إتقان CSS: من الصفر إلى الاحتراف في 100 درس
إتقان CSS: من الصفر إلى الاحتراف في 100 درس
مرحباً بكم في دورة CSS الأكثر شمولاً والمصممة خصيصاً للمبتدئين. تأخذك هذه الرحلة من "الصفر إلى الاحتراف" عبر 100 درس مفصل، لتبدأ بفهم المحددات (Selectors) الأساسية وصولاً إلى إتقان تقنيات التخطيط الحديثة مثل Flexbox و Grid، وبناء واجهات ويب احترافية ومتجاوبة. ستتعلم أساسيات الـ Cascade، وSpecificity، ونموذج الصندوق (Box Model)، والطباعة المتقدمة (Typography)، والخصائص المخصصة (Custom Properties)، والانتقالات المعقدة (Transitions)، وتحسين الأداء. بنهاية هذه الدورة، لن تكتفي بكتابة CSS فحسب، بل ستتمكن من هيكلة ملفات أنماط قوية وقابلة للصيانة قادرة على التعامل مع أي تحدي تصميمي.
الدروس
- الدرس 1: ما هي CSS ولماذا نحتاج إليها؟
- الدرس 2: تشريح قواعد CSS (المحدد، الخاصية، القيمة)
- الدرس 3: ربط CSS: الأنماط المضمنة (تجنبها!)
- الدرس 4: ربط CSS: ملفات الأنماط الداخلية
- الدرس 5: ربط CSS: ملفات الأنماط الخارجية (أفضل الممارسات)
- الدرس 6: المحددات الأساسية: المحدد العام (*)
- الدرس 7: المحددات الأساسية: محددات النوع (محددات العناصر)
- الدرس 8: المحددات الأساسية: محددات الفئة (.)
- الدرس 9: المحددات الأساسية: محددات المعرف (#)
- الدرس 10: دمج المحددات: التجميع والربط
- الدرس 11: فهم نموذج الصندوق (Box Model) - نظرة عامة
- الدرس 12: تعمق في نموذج الصندوق: الحشوة (Padding)
- الدرس 13: تعمق في نموذج الصندوق: الحدود (Borders)
- الدرس 14: تعمق في نموذج الصندوق: الهامش (Margin)
- الدرس 15: أهمية Box-Sizing: border-box
- الدرس 16: تحديد العرض والارتفاع (ثابت مقابل مرن)
- الدرس 17: مقدمة في خصائص الألوان (الأمامية والخلفية)
- الدرس 18: ألوان متقدمة: HSL والشفافية (Opacity)
- الدرس 19: صور الخلفية والتكرار (Tiling)
- الدرس 20: التحكم في حجم الخلفية وارتباطها
- الدرس 21: خاصية اختصار الخلفية (Background Shorthand)
- الدرس 22: فهم وحدات CSS: بكسل (px) ونسبة مئوية (%)
- الدرس 23: الوحدات النسبية: Em و Rem ووحدات منفذ العرض (vw, vh)
- الدرس 24: وحدات أخرى: الوقت (s, ms)، الزوايا (deg)، و Flex (fr)
- الدرس 25: متغيرات CSS (الخصائص المخصصة) - مقدمة
- الدرس 26: الطباعة: عائلات الخطوط والبدائل (Fallbacks)
- الدرس 27: خطوط الويب (@font-face) و Google Fonts
- الدرس 28: حجم الخط والقياس (font-size)
- الدرس 29: وزن الخط ونمطه (font-weight, font-style)
- الدرس 30: ارتفاع السطر والمسافات الرأسية (line-height)
- الدرس 31: محاذاة النص وضبطه (text-align)
- الدرس 32: زخرفة النص وتحويله (Text Decoration & Transformation)
- الدرس 33: تباعد الأحرف وتباعد الكلمات
- الدرس 34: اختصار الخط وعيوب الطباعة الشائعة
- الدرس 35: التعامل مع النص الفائض (white-space, overflow)
- الدرس 36: خاصية العرض (Display): block, inline, inline-block
- الدرس 37: الـ Cascade: فهم الترتيب والمصدر
- الدرس 38: حساب التخصيص: ID و Class و Type
- الدرس 39: الوراثة والخصائص الموروثة
- الدرس 40: قاعدة important! المخيفة (ولماذا يجب تجنبها)
- الدرس 41: الفئات الزائفة (Pseudo-Classes): التفاعل (:hover, :active, :focus)
- الدرس 42: الفئات الزائفة: محددات الأطفال الهيكلية (nth-child)
- الدرس 43: العناصر الزائفة (Pseudo-Elements): تنسيق المحتوى المُولد (before, after)
- الدرس 44: مخطط التموضع: Static (الافتراضي)
- الدرس 45: مخطط التموضع: Relative (الإزاحة)
- الدرس 46: مخطط التموضع: Absolute (خارج التدفق)
- الدرس 47: مخطط التموضع: Fixed (مقيد بمنفذ العرض)
- الدرس 48: مخطط التموضع: Sticky (الأفضل من العالمين)
- الدرس 49: سياق التكديس و Z-Index
- الدرس 50: العناصر العائمة (Float): أداة تخطيط تاريخية
- الدرس 51: مقدمة في Flexbox (تخطيط الصندوق المرن)
- الدرس 52: خاصية حاوية Flex: flex-direction
- الدرس 53: خاصية حاوية Flex: justify-content (المحور الرئيسي)
- الدرس 54: خاصية حاوية Flex: align-items (المحور المتقاطع)
- الدرس 55: خاصية حاوية Flex: flex-wrap
- الدرس 56: اختصار حاوية Flex: flex-flow
- الدرس 57: خاصية حاوية Flex: align-content (المحاذاة متعددة الأسطر)
- الدرس 58: خاصية عنصر Flex: order
- الدرس 59: خاصية عنصر Flex: flex-grow
- الدرس 60: خاصية عنصر Flex: flex-shrink
- الدرس 61: خاصية عنصر Flex: flex-basis
- الدرس 62: اختصار عنصر Flex: flex
- الدرس 63: خاصية عنصر Flex: align-self (المحاذاة الفردية على المحور المتقاطع)
- الدرس 64: تطبيق Flexbox العملي: إنشاء تذييل لاصق وشريط تنقل
- الدرس 65: خاصية Gap في Flexbox وعيوب المحاذاة
- الدرس 66: مقدمة في تخطيط CSS Grid (نظام ثنائي الأبعاد)
- الدرس 67: تعريف الأعمدة والصفوف (grid-template-columns/rows)
- الدرس 68: دالة repeat() (الكفاءة)
- الدرس 69: وضع العناصر بواسطة أرقام الخطوط
- الدرس 70: وضع العناصر بواسطة أسماء مناطق الشبكة (Grid Area Names)
- الدرس 71: فجوات الشبكة (التباعد بين المسارات)
- الدرس 72: محاذاة الشبكة: Justify مقابل Align (المحتوى والعناصر)
- الدرس 73: التحجيم باستخدام minmax() و auto
- الدرس 74: الشبكة الضمنية و auto-flow
- الدرس 75: اختصارات الشبكة (grid, grid-area)
- الدرس 76: Grid مقابل Flexbox: معرفة متى تستخدم كل منهما
- الدرس 77: استخدام Grid لتداخل العناصر (Z-Index في الشبكة)
- الدرس 78: تطبيق Grid العملي: بناء نظام 12 عموداً
- الدرس 79: تطبيق Grid العملي: إنشاء تخطيط لوحة معلومات (Dashboard) معقد
- الدرس 80: اعتبارات إمكانية الوصول في Flexbox و Grid
- الدرس 81: مقدمة في تصميم الويب المتجاوب (RWD)
- الدرس 82: فهم استعلامات الوسائط (Media Queries) - النحو والهيكل
- الدرس 83: نهج الهاتف أولاً (Mobile-First) - min-width
- الدرس 84: نهج الحاسوب أولاً (Desktop-First) - max-width
- الدرس 85: منطق استعلامات الوسائط: AND و OR (الفاصلة) و NOT
- الدرس 86: الصور المرنة و max-width: 100%
- الدرس 87: شبكة متجاوبة باستخدام auto-fit و minmax()
- الدرس 88: إخفاء وإظهار العناصر بشكل متجاوب
- الدرس 89: التوجيه الأفقي مقابل الرأسي لمنفذ العرض
- الدرس 90: استعلامات وسائط إمكانية الوصول (الوضع الليلي، تقليل الحركة)
- الدرس 91: مقدمة في انتقالات CSS (Transitions)
- الدرس 92: دالة توقيت الانتقال والتأخير (Timing Function & Delay)
- الدرس 93: تحويلات CSS ثنائية الأبعاد (2D Transforms): translate, scale, rotate
- الدرس 94: تحويلات CSS ثلاثية الأبعاد (3D Transforms): perspective, translateZ, rotateX/Y
- الدرس 95: مقدمة في رسوم CSS المتحركة (Keyframe Animations)
- الدرس 96: خصائص الرسوم المتحركة المفصلة: duration, iteration, direction
- الدرس 97: التحكم في حالات الرسوم المتحركة (fill-mode, play-state)
- الدرس 98: أداء CSS: الـ Reflow والـ Repaint والـ Compositing
- الدرس 99: CSS الحديث: Filter و Backdrop Filter والأشكال (Shapes)
- الدرس 100: مراجعة الدورة والخطوات التالية (Sass/Preprocessors)