تعلّم CSS

هذا القسم جزء من رحلة HTML. المنهج الكامل يحتوي على أقسام أكثر - اضغط على أي معاينة أدناه لعرضها في صفحة الرحلة.

1. قسم 1Fundamentals60 درسًا
2. قسم 2

   Styling with CSS

   ابدأ القسمابدأتوسيعطيBring your web pages to life with colors, layouts, and styles76 درسًا100 تحديات420 أسئلة3 مشاريع

   مقدمة

   5 درسًا540

   • 01ما هي CSS؟تحدياختبار
   • 02بنية CSSتحدياختبار
   • 03تعليقات CSSاختبار
   • 04وسم Headتحدياختبار
   • 05وسم Titleتحديإتقاناختبار

   إضافة CSS

   4 درسًا725

   • 01CSS سطريتحديإتقاناختبار
   • 02CSS داخليتحديإتقاناختبار
   • 03CSS خارجيتحديإتقاناختبار
   • 04تحدي التنسيق الأساسيتحدي

   المحددات الأساسية

   7 درسًا1247

   • 01مقدمة في المحدداتتحدياختبار
   • 02محدد النوعتحديإتقاناختبار
   • 03محدد الفئةتحديإتقاناختبار
   • 04محدد المعرفتحديإتقاناختبار
   • 05محددات المجموعاتتحديإتقاناختبار
   • 06المحدد العامتحديإتقاناختبار
   • 07تحدي التحديدتحدي

   أساسيات النصوص

   8 درسًا1450

   • 01لون النصتحديإتقاناختبار
   • 02عائلة الخطتحديإتقاناختبار
   • 03حجم الخطتحديإتقاناختبار
   • 04سمك الخطتحديإتقاناختبار
   • 05محاذاة النصتحديإتقاناختبار
   • 06زخرفة النصتحديإتقاناختبار
   • 07تحدي المراجعة رقم 1تحدي
   • 08تحدي المراجعة رقم 2تحدي

   الألوان والخلفيات

   5 درسًا834

   • 01لون الخلفيةتحديإتقاناختبار
   • 02ألوان HEXتحديإتقاناختبار
   • 03ألوان RGBتحديإتقاناختبار
   • 04الشفافية باستخدام RGBAتحدياختبار
   • 05تحدي المراجعة #1تحدي

   قائمة المقهى

   مشروع3 درسًا1

   • 01أساسيات تنسيق الخطوطتحدي
   • 02تنسيق النصوصمشروع
   • 03الألوان والخلفياتمشروع

   نموذج الصندوق - الجزء الأول

   6 درسًا943

   • 01ما هو نموذج الصندوق؟اختبار
   • 02المسافات الداخلية (Padding)تحديإتقاناختبار
   • 03الهوامش (Margins)تحديإتقاناختبار
   • 04الحدود (Borders)تحديإتقاناختبار
   • 05العرض والارتفاعتحديإتقاناختبار
   • 06تحدي المراجعةتحدي

   نموذج الصندوق (Box Model) - الجزء الثاني

   5 درسًا834

   • 01تحجيم الصندوق (Box Sizing)تحدياختبار
   • 02حواف العناصر (Border Radius)تحديإتقاناختبار
   • 03التدفق الزائد (Overflow)تحديإتقاناختبار
   • 04ظل الصندوق (Box Shadow)تحديإتقاناختبار
   • 05تحدي المراجعةتحدي

   Flex Box

   6 درسًا943

   • 01ما هو Flex Box؟تحدياختبار
   • 02خاصية Flex Directionتحديإتقاناختبار
   • 03خاصية Justify Contentتحديإتقاناختبار
   • 04خاصية Align Itemsتحديإتقاناختبار
   • 05التوسيط المثاليتحدياختبار
   • 06تحدي Flex Boxتحدي

   نموذج تسجيل الدخول

   مشروع4 درسًا1

   • 01جسم الصفحةتحدي
   • 02حاوية النموذجمشروع
   • 03حقل إدخالمشروع
   • 04زرمشروع

   تقنيات التخطيط

   7 درسًا1152

   • 01العناصر من نوع Block مقابل Inlineتحدياختبار
   • 02أساسيات تحديد المواقع (Positioning)تحديإتقاناختبار
   • 03تحديد الموقع النسبي (Relative)تحديإتقاناختبار
   • 04تحديد الموقع المطلق (Absolute)تحديإتقاناختبار
   • 05تحديد الموقع الثابت (Fixed)تحديإتقاناختبار
   • 06أساسيات Z-Indexتحدياختبار
   • 07تحدي المراجعةتحدي

   أساسيات التصميم المتجاوب

   6 درسًا1052

   • 01ما هو التصميم المتجاوب؟تحدياختبار
   • 02وسم Viewport Metaتحدياختبار
   • 03التخطيطات الانسيابيةتحديإتقاناختبار
   • 04وحدات Viewportتحديإتقاناختبار
   • 05أساسيات Media Queriesتحديإتقاناختبار
   • 06الصور المرنةتحديإتقاناختبار

   صفحة ويب تونغا

   مشروع6 درسًا1

   • 01قائمة التنقلتحدي
   • 02رأس الترحيبمشروع
   • 03قسم "عن الموقع"مشروع
   • 04قسم التواصلمشروع
   • 05وسم Viewportمشروع
   • 06Media Queryمشروع

   التحديات النهائية

   4 درسًا4

   • 01ترتيب العناصرتحدي
   • 02قائمة الأفلامتحدي
   • 03بطاقة دعوة زفافتحدي
   • 04إشعار عائمتحدي
3. قسم 3

   CSS Mastery

   ابدأ القسمابدأتوسيعطيTake you css skills to the next level!43 درسًا40 تحديات164 أسئلة

   إتقان المحددات – الربط

   6 درسًا539

   • 01مقدمةاختبار
   • 02محدد الأحفادتحدياختبار
   • 03محدد الأبناءتحدياختبار
   • 04محدد الأشقاء المتجاورينتحدياختبار
   • 05محدد الأشقاء العامتحدياختبار
   • 06تحدي المراجعةتحدي

   الفئات الزائفة التفاعلية

   5 درسًا431

   • 01الفئات الزائفة (Pseudo-Classes)اختبار
   • 02تأثيرات التمرير (Hover)تحدياختبار
   • 03تأثيرات التركيز (Focus)تحدياختبار
   • 04الأنماط النشطة (Active)تحدياختبار
   • 05تحدي المراجعةتحدي

   الأصناف الزائفة الهيكلية (Structural pseudo-classes)

   5 درسًا432

   • 01الأصناف الزائفة الهيكلية (Structural pseudo-classes)اختبار
   • 02استهداف الابن الأولتحدياختبار
   • 03استهداف الابن الأخيرتحدياختبار
   • 04قوة الأنماط: استخدام nth-childتحدياختبار
   • 05تحدي المراجعةتحدي

   مشروع القائمة المنسدلة

   4 درسًا4

   • 01إضافة القائمة الفرعيةتحدي
   • 02إظهار القائمة الفرعيةتحدي
   • 03المزيد من التنسيقتحدي
   • 04حقل الإدخال والزرتحدي

   التأثيرات البصرية

   5 درسًا536

   • 01التدرجاتتحدياختبار
   • 02فلاتر CSSتحدياختبار
   • 03التحويلاتتحدياختبار
   • 04الانتقالات وتأثيرات الحومتحدياختبار
   • 05تحدي المراجعةتحدي

   صفحة الهبوط (Landing Page)

   5 درسًا5

   • 01تنسيق قسم Headerتحدي
   • 02تنسيق الزرتحدي
   • 03تخطيط القسمتحدي
   • 04تخطيط البطاقةتحدي
   • 05إضافة اللمسات النهائيةتحدي

   البناء باستخدام CSS Grid

   4 درسًا426

   • 01أساسيات Gridتحدياختبار
   • 02تحديد مواقع العناصر في Grid-rowتحدياختبار
   • 03المناطق المسماةتحدياختبار
   • 04تحدي المراجعةتحدي

   موقع Flavor Fiesta

   4 درسًا4

   • 01ضبط الشبكةتحدي
   • 02رأس الصفحةتحدي
   • 03الجزء الرئيسيتحدي
   • 04تذييل الصفحةتحدي

   التحديات النهائية

   5 درسًا5

   • 01تمييز القائمة النشطةتحدي
   • 02صفوف الجدول المخططةتحدي
   • 03تأثير تمرير الماوس على الزرتحدي
   • 04تخطيط البطاقات بنظام Gridتحدي
   • 05صورة Hero مموهةتحدي
4. قسم 4Practical Frontend35 درسًا
5. قسم 5JavaScript in Action27 درسًا