الأيقونات الاجتماعية

اضغط على ESC للإغلاق

تعلم CSS

قائمتي المفضلة مشاركة
مشاركة
رابط الصفحة
مشاركة على وسائل التواصل الاجتماعي

عن الدورة

اكتشف قوة تصميم الويب مع دورة CSS الشاملة لدينا! 🎨

هل أتقنت أساسيات HTML وأنت مستعد لإضفاء الحيوية على مواقعك الإلكترونية؟ هذه الدورة هي خطوتك التالية لتصبح مطور ويب ماهرًا. انغمس في عالم أوراق الأنماط المتتالية (CSS) وتعلم كيفية تحويل HTML العادي إلى مواقع ويب مذهلة بصريًا واحترافية ومتجاوبة.

تأخذك هذه الدورة في رحلة تعليمية تدريجية، تبدأ بالأساسيات الأساسية وتنتقل إلى تقنيات عملية أكثر تقدمًا. ستتجاوز مجرد النظريات وتكتسب خبرة عملية في بناء المكونات الأساسية لمواقع الويب الحديثة.

إليك لمحة عما ستبنيه:

  • أشرطة التنقل التفاعلية

  • القوائم المنسدلة الديناميكية

  • نماذج وأزرار الويب المصممة

  • تلميحات الأدوات الأنيقة وتراكبات الصور

  • رسوم متحركة وانتقالات CSS جذابة

بنهاية هذه الدورة، لن تفهم فقط ماهية CSS وكيفية استخدامها، بل ستفهم أيضًا سبب استخدامها. ستكتسب الثقة للتحكم في تخطيط صفحات الويب وأسلوب الطباعة والألوان، وستمتلك المهارات اللازمة لإنشاء تصاميم جميلة وسهلة الاستخدام، تبدو رائعة على أي جهاز. إذا كنت مستعدًا للتخلي عن تصميم صفحات ويب مملة والبدء في تصميم تجارب ويب رائعة، فهذه الدورة مناسبة لك.

إظهار المزيد

ماذا سوف تتعلم؟

  • في دورة CSS الشاملة هذه، ستنتقل من الأساسيات إلى مواضيع أكثر تقدمًا، واكتساب المهارات اللازمة لتصميم مواقع الويب الحديثة والمستجيبة. 🎨
  • إتقان الأساسيات: فهم المفاهيم الأساسية لـ CSS، بما في ذلك كيفية تطبيق الأنماط باستخدام أوراق الأنماط المضمنة والداخلية والخارجية.
  • استخدم محددات قوية: تعلم كيفية استهداف أي عنصر بدقة باستخدام محددات العلامة والفئة والمعرف، بالإضافة إلى محددات السمات المتقدمة والفئات الزائفة.
  • نمط النص والخطوط: احصل على التحكم الكامل في طباعة موقع الويب الخاص بك من خلال خصائص تزيين النص والتحويل والتباعد وعائلات الخطوط، بما في ذلك كيفية تضمين الخطوط المخصصة الخاصة بك.
  • إنشاء العمق والجاذبية البصرية: تعلم كيفية استخدام الحدود والألوان (بما في ذلك الألوان السداسية والأحمر والأخضر والأزرق وHSL) والتدرجات والظلال لجعل عناصر التصميم الخاصة بك بارزة.
  • إنشاء تخطيطات ديناميكية: تحكم في الموضع الدقيق وتدفق المحتوى الخاص بك باستخدام خصائص التخطيط الأساسية مثل الموضع والعرض والطفو، وتعلم كيفية إدارة التكديس باستخدام z-index.
  • أضف الحيوية إلى موقعك: أنشئ رسومًا متحركة سلسة وتأثيرات تفاعلية باستخدام انتقالات CSS وقم ببناء رسوم متحركة معقدة ومتعددة الخطوات باستخدام @keyframes.
  • تطوير التصميمات المستجيبة: تعلم أساسيات التصميم المستجيب باستخدام استعلامات @media لتكييف تخطيطك مع أحجام الشاشات المختلفة، من الهواتف المحمولة إلى أجهزة الكمبيوتر المكتبية.
  • إنشاء مكونات واجهة مستخدم مشتركة: احصل على خبرة عملية في إنشاء مكونات موقع الويب الأساسية من الصفر، بما في ذلك الأزرار المصممة، والقوائم المنسدلة، والترقيم الصفحي، وأشرطة التنقل، والنماذج، وإرشادات الأدوات.

محتوى الدورة

الدرس الأول
CSS هي الطريقة التي تُخبر بها المتصفح كيف ينبغي أن يبدو HTML. في هذه البداية، ستُنشئ الأنماط بالطريقة الصحيحة - مضمنة، داخلية ( ), and external (.css file)—and learn the anatomy of a rule: selector { property: value; }. We’ll compare IDs (#logo) and classes (.btn), when to use each, and how they affect specificity so your styles actually “stick.” You’ll practice targeting elements with type selectors (h1, p), class selectors (.card), ID selectors (#header), and simple combined selectors (h1.title). Along the way we’ll set foundational properties—color, font-size, margin, padding, background, border—while building a small, clean style sheet you can reuse. By the end, you’ll know how to attach styles without making a mess, how to choose between an ID and a class without second-guessing, and how to keep selectors readable so future you doesn’t hate present you.

  • مقدمة وأنماط، معرف ومحددات الفئة، محددات
    36:43
  • الاختبار 1: المقدمة والمحددات

الدرس الثاني
يستكشف هذا الدرس كيفية استخدام محددات CSS بفعالية أكبر، ويتعمق في تصميم الحدود واستخدام تنسيقات ألوان متنوعة. ستتعلم كيفية تطبيق نمط واحد على عناصر متعددة باستخدام محدد عام (*) أو عن طريق تجميع المحددات بفاصلة. يوضح الفيديو أيضًا كيفية تعيين فئات متعددة لعنصر HTML واحد لدمج قواعد أنماط مختلفة. جزء كبير من الدرس عبارة عن شرح مفصل لخاصية الحدود. ستتعلم كيفية استخدام خاصية الاختزال لتعيين عرض ونمط ولون الحدود دفعة واحدة. يغطي الفيديو العديد من أنماط الحدود، بما في ذلك الصلبة، والمنقطة، والمتقطعة، والمزدوجة، والأخدودية، والخطية. كما يوضح كيفية تصميم كل جانب من حدود العنصر (أعلى، يمين، أسفل، يسار) بشكل فردي باستخدام أنماط أو ألوان مختلفة. ستتعلم أيضًا كيفية إنشاء زوايا مستديرة باستخدام border-radius، وحتى استخدام صورة كحدود باستخدام border-image. وأخيرًا، يشرح الفيديو الطرق المختلفة لتحديد الألوان في CSS. وهو يغطي استخدام أسماء الألوان، وأكواد ألوان HEX، وقيم RGB، وHSL (الصبغة، والتشبع، والسطوع)، مما يوضح أنه يمكن استخدامها جميعًا بالتبادل لتحقيق نفس النتائج.

الدرس الثالث
يستكشف هذا الدرس كيفية التحكم في تخطيط العناصر ومظهرها باستخدام خاصيتي العرض والتعويم، ويقدم دليلاً شاملاً لتصميم الخطوط. ستتعلم القيم المختلفة لخاصية العرض، بما في ذلك block وinline وinline-block وflex وgrid، وستفهم كيفية تأثيرها على تخطيط العنصر. يشرح الفيديو أيضًا الفرق بين إخفاء عنصر باستخدام display: none و visibility: hidden، موضحًا كيف تحافظ الأخيرة على مساحة العنصر في التخطيط. بعد ذلك، يتناول الدرس خاصية التعويم، موضحًا كيفية تعويم العناصر إلى اليسار أو اليمين للسماح بامتداد المحتوى حولها. أما القسم الأخير والمتعمق فهو مخصص لخطوط CSS. ستتعلم أهمية خاصية font-family وكيفية إنشاء "مجموعة خطوط" من خلال توفير خطوط احتياطية متعددة في حال عدم تثبيت الخط الأساسي على متصفح المستخدم. يتناول الفيديو أيضًا خصائص الخطوط الرئيسية الأخرى، مثل نمط الخط (للخطوط المائلة والمائلة)، ومتغير الخط (للأحرف الصغيرة)، وسمك الخط (غامق، أغمق)، وحجم الخط. وأخيرًا، ستتعلم كيفية تضمين الخطوط المخصصة التي نزّلتها في موقعك الإلكتروني باستخدام قاعدة @font-face.

الدرس الرابع
يقدم هذا الدرس دليلاً عملياً للتحكم في مساحة العناصر ورؤيتها وتخطيطها، وصولاً إلى تصميم شريط التنقل. ستتعلم أولاً خاصية الهامش، المستخدمة لإنشاء مساحة خارج حدود العنصر. يشرح الفيديو الاختصار اللازم لتعيين الهوامش على الجوانب الأربعة دفعة واحدة (أعلى، يمين، أسفل، يسار) وكيفية استخدام كل خاصية على حدة مثل الهامش العلوي والهامش الأيسر. بعد ذلك، يقدم الفيديو خاصية التعتيم، موضحاً كيفية جعل العنصر شفافاً أو شبه شفاف باستخدام قيم من 0.0 إلى 1.0. ستستكشف بعد ذلك خاصية التجاوز، التي تتحكم في كيفية عمل المحتوى الذي يكون كبيراً جداً بحيث لا يتسع في الحاوية الخاصة به. يوضح الدرس تأثيرات التمرير (إضافة شريط تمرير)، والمخفي (قص المحتوى)، والمرئي (ترك المحتوى ينسكب). ثم يتم شرح مفهوم الحشو، مع إبراز تشابهه مع الهامش، مع التأكيد على أنه يخلق مساحة داخل حدود العنصر. وأخيراً، يتم جمع كل هذه المفاهيم في درس تعليمي حول تصميم شريط التنقل. ستتعلم كيفية تصميم حاوية التنقل وروابطها، واستخدام فئات الارتباط الزائفة (:link، :visited، :hover، :active) لإنشاء تأثيرات تفاعلية، وإزالة الخطوط السفلية باستخدام text-decoration: none، وتغيير نمط مؤشر الماوس باستخدام خاصية المؤشر.

الدرس الخامس
يقدم هذا الدرس نظرة عامة شاملة على خاصية الموضع في CSS وكيفية استخدامها لإنشاء تخطيطات وعناصر لاصقة. ستتعلم قيم الموضع الرئيسية الخمس: ثابت (الافتراضي)، نسبي، مطلق، ثابت، وملتصق. يشرح الفيديو كيفية عمل الموضع النسبي مع الإزاحات (أعلى، يمين، أسفل، يسار) لتحريك عنصر من موضعه الطبيعي، بينما يضع الموضع المطلق العنصر بالنسبة لأقرب سلف له. يركز الدرس بشكل أساسي على إنشاء شريط تنقل لاصق. ستشاهد عرضًا عمليًا لكيفية استخدام الموضع: ثابت مع إزاحة أعلى: 0 لجعل العنصر يلتصق بأعلى نافذة العرض بمجرد التمرير إليها. يغطي الفيديو أيضًا الموضع: ثابت ويشرح اختلافه عن الملصق. ثم يقدم الدرس خاصية المخطط التفصيلي كبديل للحدود ويوضح كيفية استخدام إزاحة المخطط التفصيلي لإنشاء مسافة بين المخطط التفصيلي وحافة العنصر. أخيرًا، يتعمق الفيديو في استعلامات الوسائط، موضحًا كيفية استخدام قاعدة @media لتطبيق أنماط مختلفة بناءً على حجم الشاشة (العرض الأقصى، العرض الأدنى)، والاتجاه (أفقي)، وحتى إمكانية تحريك المستخدم للمؤشر (أي تمرير). ستتعلم أيضًا كيفية استهداف أنواع مختلفة من الوسائط، مثل الشاشة مقابل الطباعة، وكيفية استخدام خاصيتي overflow-x وoverflow-y.

الدرس السادس
بالطبع. بعد مشاهدة الفيديو https://www.youtube.com/watch?v=doVrD0IWWN4 كاملاً، أعددتُ وصفًا مفصلاً له. إليكم وصف الدرس السادس: النصوص، الجداول، محدد الأخوة العام، وفهرس Z. رابط الفيديو: https://www.youtube.com/watch?v=doVrD0IWWN4. يغطي هذا الدرس مجموعة متنوعة من خصائص CSS المتوسطة، مع التركيز على تنسيق النصوص المتقدم، وتكديس العناصر، والمحددات الفعالة، ودليل مفصل لتصميم جداول HTML. يبدأ الفيديو باستكشاف خصائص نصية مختلفة، موضحًا كيفية تغيير حالة النص باستخدام تحويل النص (أحرف كبيرة، أحرف صغيرة، أحرف كبيرة)، وكيفية إدارة اتجاه النص للغات التي تُكتب من اليمين إلى اليسار باستخدام الاتجاه: rtl. ثم يتعمق الدرس في خاصية زخرفة النص، موضحًا ليس فقط الاختزال، بل أيضًا كيفية التحكم في جوانب فردية مثل لون زخرفة النص، والنمط (مثل: مزدوج، متقطع)، وسمكه. بعد ذلك، يشرح الدرس كيفية التحكم في ترتيب العناصر باستخدام خاصية z-index، موضحًا كيف يمكن لقيمة سالبة وضع صورة خلف النص. ثم يقدم العديد من محددات التجميع القوية التي تحدد العلاقات بين العناصر، بما في ذلك محدد العناصر الشقيقة العام (~)، ومحدد العناصر الشقيقة المجاورة (+)، ومحدد العناصر الفرعية (>)، ومحدد العناصر الفرعية (مسافة). أما الجزء الأخير والأشمل من الدرس فهو شرح عملي لكيفية تصميم جدول HTML باحترافية. تشمل التقنيات الرئيسية التي يغطيها الدرس استخدام خاصية طي الحدود لإنشاء حدود أنيقة أحادية السطر، وتطبيق تأثير "شريط حمار وحشي" باستخدام الفئة الزائفة :nth-child(even)، وإضافة تأثير :hover إلى صفوف الجدول، وإنشاء نمط مميز لرأس الجدول (th).

الدرس السابع
يركز هذا الدرس على إنشاء تأثيرات ديناميكية وتفاعلية باستخدام انتقالات CSS ومحددات متقدمة مثل شبه الفئات وشبه العناصر. ستتعلم كيفية استخدام شبه الفئات لتحريك تغييرات الخصائص بسلاسة خلال مدة محددة، وتجنب التغييرات الفورية المفاجئة التي تحدث افتراضيًا. يقدم الفيديو شرحًا مفصلاً لخاصية الانتقال، ويشرح كيفية التحكم في خاصية الانتقال (مثل العرض)، ومدة الانتقال، ودالة توقيت الانتقال (مثل السهولة والخطية)، وتأخير الانتقال. يوضح مثال عملي كيفية جعل الصورة تنمو بسلاسة عند :hover. ثم يشرح الدرس الفرق بين شبه الفئات (التي تحدد حالة خاصة للعنصر، مثل :hover) وشبه العناصر (التي تُنسق جزءًا محددًا من العنصر). ستتعلم كيفية استخدام شبه العناصر مثل ::first-letter و ::first-line لتنسيق بداية كتلة نصية، و ::before و ::after لإدراج محتوى، مثل صورة، قبل أو بعد المحتوى الفعلي للعنصر. أخيرًا، يشرح الفيديو مفهوم خصوصية CSS ويقدم قاعدة !important، ويوضح كيف يمكن استخدامها لتجاوز الأنماط المتضاربة الأخرى وضمان تطبيق نمط معين دائمًا، بغض النظر عن موضعه في ورقة الأنماط.

الدرس الثامن
يقدم هذا الدرس دليلاً شاملاً لتصميم نماذج HTML، ويعرّف بمحددات سمات فعّالة، ويشرح كيفية إجراء الحسابات مباشرةً داخل CSS. ستتعلم كيفية تصميم مُدخلات النماذج المختلفة، بما في ذلك حقول النص، وحقول كلمات المرور، وحقول البريد الإلكتروني، و...