1. الرئيسية
2. مسارات التعلم
3. تعلّم CSS من الصفر

ابدأ الدورة من الدرس الأول

1. ما هي CSS وكيف تضيفها إلى صفحتك؟

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

   6 دقائق
2. المحددات في CSS: العناصر والفئات والمعرّفات والأولوية

   تعلم محددات CSS: محدد العنصر والفئة class والمعرّف id، والمحددات المركبة والأبناء، والحالات مثل hover، وكيف يقرر المتصفح أي قاعدة تفوز (الأولوية Specificity).

   8 دقائق
3. الألوان والخطوط وتنسيق النص في CSS (مع الخطوط العربية)

   تعلم كتابة الألوان في CSS بـ hex وrgb وhsl، واختيار الخطوط العربية من Google Fonts، والأحجام rem وem، وارتفاع السطر ومحاذاة النص وتنسيقات النص الأخرى.

   8 دقائق
4. نموذج الصندوق في CSS: margin وpadding وborder

   افهم نموذج الصندوق في CSS: المحتوى والحشوة padding والحد border والهامش margin، وbox-sizing، والعرض والارتفاع، والزوايا الدائرية والظلال، والفرق بين block وinline.

   8 دقائق
5. Flexbox في CSS: ترتيب العناصر في صف أو عمود بسهولة

   تعلم Flexbox خطوة بخطوة: display flex والاتجاه والمحاذاة justify-content وalign-items والمسافة gap والالتفاف flex-wrap، مع أمثلة لقائمة تنقل وبطاقات.

   9 دقائق
6. CSS Grid: تخطيط الصفحات بالصفوف والأعمدة

   تعلم CSS Grid: grid-template-columns ووحدة fr وrepeat وminmax والمسافات gap وامتداد العناصر على عدة أعمدة وتسمية المناطق grid-template-areas، مع تخطيط صفحة كامل.

   9 دقائق
7. التصميم المتجاوب: موقع يعمل على الهاتف والكمبيوتر

   تعلم التصميم المتجاوب في CSS: وسم viewport واستعلامات الوسائط media queries ومبدأ الهاتف أولًا والصور المرنة والوحدات النسبية وclamp، مع قائمة فحص لموقع صديق للهاتف.

   9 دقائق
8. متغيرات CSS والحركة والوضع الليلي: مشروع صفحة كاملة

   الدرس الأخير في دورة CSS: متغيرات CSS والانتقالات transition والوضع الليلي التلقائي، ثم نجمّل صفحة مشروع HTML ونجعلها متجاوبة.

   12 دقائق