كورس CSS بالعربي

ماذا ستتعلم؟

• ربط CSS بصفحات HTML واختيار العناصر بالمحددات
• التحكم في الألوان والخلفيات والخطوط
• فهم نموذج الصندوق والمسافات
• ترتيب العناصر باستخدام Flexbox و Grid
• تصميم صفحات تتكيف مع شاشات الموبايل
• تحديد أماكن العناصر بـ position والتحكم في ظهورها
• الظلال والزوايا والحركة بـ transition و animation
• المتغيرات، ومشروع ختامي: صفحة هبوط متجاوبة

فهرس الدروس

1. 1مقدمة في CSS: تنسيق صفحات الويبتعرّف على CSS، لغة تنسيق صفحات الويب: كيف تغيّر الألوان والخطوط والمسافات، وما هي القاعدة والمحدد والخاصية والقيمة، وكيف تكتب أول تنسيق لصفحة HTML بنفسك.
2. 2طرق إضافة CSS: داخل الوسم وفي الصفحة وملف خارجيتعرّف على الطرق الثلاث لإضافة CSS إلى صفحة HTML: الخاصية style، والوسم style، والملف الخارجي بالوسم link، ومتى تستخدم كل طريقة، ومن يفوز عند تعارض التنسيقات.
3. 3المحددات في CSS: الوسم والكلاس والمعرّف وأكثرتعلّم محددات CSS لاختيار العناصر بدقة: محدد الوسم والكلاس والمعرّف، والتجميع، والمحدد الوصفي والابن المباشر، والحالات مثل hover، وكيف تُحسب قوة المحدد.
4. 4الألوان والخلفيات في CSSتعلّم كتابة الألوان في CSS بالأسماء و hex و rgb و hsl، والشفافية، وألوان الخلفية، وصور الخلفية وحجمها وموضعها، والتدرج اللوني، ونصائح للتباين المريح.
5. 5الخطوط والنصوص في CSS: font-family والأحجامتعلّم تنسيق النصوص في CSS: اختيار الخط بـ font-family وخطوط Google، ووحدات الأحجام px و rem و em، وسمك الخط، وارتفاع السطر، والمحاذاة، وتزيين النص.
6. 6نموذج الصندوق في CSS: padding و border و marginافهم نموذج الصندوق في CSS: المحتوى و padding و border و margin، والعرض والارتفاع، والخاصية box-sizing، وتوسيط العناصر بـ margin auto، والفرق بين block و inline.
7. 7Flexbox في CSS: ترتيب العناصر في صف أو عمودتعلّم Flexbox لترتيب العناصر بسهولة: display flex، والاتجاه flex-direction، والتوزيع justify-content، والمحاذاة align-items، والمسافات gap، والالتفاف flex-wrap.
8. 8Grid في CSS: تخطيط الصفحة بالصفوف والأعمدةتعلّم CSS Grid لبناء التخطيطات: grid-template-columns ووحدة fr و repeat، والمسافات gap، وتمديد العناصر على أعمدة، وتسمية المناطق، ومتى تختار Grid أو Flexbox.
9. 9التصميم المتجاوب في CSS: موقع لكل الشاشاتتعلّم التصميم المتجاوب لتعمل صفحتك على الموبايل والتابلت والكمبيوتر: وسم viewport، والوحدات والصور المرنة، واستعلامات الوسائط media queries، والموبايل أولاً.
10. 10الوحدات والحساب في CSS: em و rem و calc و clampتعمّق في وحدات القياس في CSS: الفرق العملي بين px و em و rem والنسبة المئوية، ووحدات الشاشة vw و vh، وإجراء الحسابات بالدوال calc و min و max و clamp.
11. 11display و visibility في CSS: إظهار العناصر وإخفاؤهاتعلّم الخاصية display في CSS وقيمها block و inline و inline-block و none، والفرق بين طرق إخفاء العناصر الثلاث: display: none و visibility: hidden و opacity: 0.
12. 12position و z-index في CSS: تحديد مكان العناصرتعلّم الخاصية position في CSS بقيمها الخمس: static و relative و absolute و fixed و sticky، وتحريك العناصر بـ top و left و inset، وترتيب الطبقات بـ z-index.
13. 13overflow في CSS: التحكم في المحتوى الزائدتعلّم الخاصية overflow في CSS للتعامل مع المحتوى الأكبر من صندوقه: القيم visible و hidden و scroll و auto، والتمرير الأفقي، وقص النص الطويل بثلاث نقاط.
14. 14الزوايا والظلال في CSS: border-radius و box-shadowتعلّم تجميل العناصر في CSS: تدوير الزوايا بـ border-radius وصنع الدوائر والكبسولات، وإضافة الظلال بـ box-shadow و text-shadow، وخط التحديد outline وأهميته.
15. 15الحالات والعناصر الزائفة في CSS: nth-child و before و afterتعلّم المحددات الزائفة في CSS: اختيار العناصر بترتيبها بـ nth-child و first-child و not، وحالات النماذج مثل checked و disabled، والعناصر الزائفة before و after.
16. 16الانتقالات والتحويلات في CSS: transition و transformتعلّم إضافة الحركة الناعمة في CSS: الانتقال التدريجي بين القيم بـ transition، وتحريك العناصر وتكبيرها وتدويرها بـ transform والدوال translate و scale و rotate.
17. 17الحركة في CSS: animation و keyframesتعلّم صنع الحركات في CSS بدون JavaScript: تعريف مراحل الحركة بقاعدة keyframes، والتحكم في المدة والتكرار والاتجاه بخصائص animation، مع أمثلة لمؤشر تحميل ونبض.
18. 18المتغيرات في CSS: الخصائص المخصصة و varتعلّم المتغيرات في CSS لتوحيد الألوان والمسافات: تعريف الخصائص المخصصة في root واستخدامها بالدالة var، والقيم الاحتياطية، وبناء وضع ليلي بتغيير قيم المتغيرات.
19. 19مشروع CSS: صفحة هبوط متجاوبة خطوة بخطوةطبّق كل ما تعلمته في كورس CSS ببناء صفحة هبوط كاملة ومتجاوبة: متغيرات للألوان، وشريط علوي ملتصق، وقسم رئيسي، وبطاقات مميزات بـ Grid، وحركات ناعمة عند المرور.