دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي
مدرب
عن هذه الدورة
عن هذه الدورة
تقدم هذه الدورة شرحًا عربيًا منظمًا لـ CSS يبدأ بالمفاهيم الأساسية وينتقل تدريجيًا إلى الاستخدام العملي. لا يكتفي المسار بالتعريفات؛ بل يربط كل محور بممارسة واختبار وفهم الأخطاء المتوقعة.
ما الذي ستتعلمه؟
- أساسيات CSS
- التخطيط
- التصميم المتجاوب
- تقنيات التنسيق المتقدمة
- بناء المكونات
- هندسة CSS
- المشروع العملي: صفحة هبوط متكاملة
كيف تستفيد من المنهج؟
ابدأ بالوحدات حسب ترتيبها، ونفّذ الأمثلة على بيئة اختبار، ثم حل التمارين دون نسخ الحل مباشرة. احتفظ بملاحظاتك حول الأخطاء، وأنهِ الوحدات بالمشروع العملي عندما يتوفر.
دورة CSS من الصفر إلى الاحتراف عملية بالكامل: بعد أن بنيت هيكل صفحاتك بـ HTML تأتي هذه الدورة لتعلّمك التنسيق والتخطيط والتصميم المتجاوب بأحدث الأساليب، حتى بناء صفحة هبوط متكاملة جاهزة للنشر.
ماذا ستتعلم؟ المحتوى مقسّم على 7 وحدات متدرجة من الأساسيات حتى الإتقان:
- أساسيات CSS: كيف تعمل الأنماط، المحددات، الألوان والوحدات، نموذج الصندوق، والطباعة.
- التخطيط: display والموضع، Flexbox، الشبكات Grid، التقنيات التقليدية، والفيضان والتدفق.
- التصميم المتجاوب: استعلامات الوسائط، الصور المتجاوبة، منهجية Mobile First، التخطيطات المرنة، واختبار التجاوب.
- تقنيات تنسيق متقدمة: الانتقالات، الحركة والـ keyframes، التحويلات، التدرجات والظلال والمرشحات، والمتغيرات.
- بناء المكونات: الأزرار، البطاقات، شريط التنقل، النماذج، وصفحات الهبوط.
- هندسة CSS: معمارية ومنهجية BEM، معالجات مثل Sass، أداء التحميل والرسم، التطبيع وتوافق المتصفحات، وتنظيم الملفات.
- المشروع الختامي: بناء صفحة هبوط كاملة: التخطيط ونظام التصميم، البناء بالشبكات والمرونة، تنميط المكونات، التجاوب الكامل، ثم الصقل والتحقق النهائي.
تفاصيل الدورة: 7 وحدات و35 درسًا ومدة دراسية تقديرية نحو 6 ساعات و 26 دقيقة. كل درس يشرح المصطلح بوضوح (تعريفه، متى يُستخدم، أين يطبَّق) مع أمثلة عملية وتمرين تطبيقي وأسئلة مراجعة.
المتطلبات: فهم أساسي لبنية HTML. يكفي متصفح حديث ومحرر نصوص مجاني مثل VS Code.
لمن هذه الدورة؟ لكل من أنهى HTML ويريد تصميم صفحاته باحتراف، وللمطورين الراغبين بتنظيم CSS وتحسينه وأدائه وتجاوبه.
أديب الصلوي
نظرة عامة على المنهج
تتضمن هذه الدورة 7 وحدات، 42 دروس، و 7:14 ساعات من المواد.
[المستوى التأسيسي (Beginner)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «مقدمة إلى CSS: كيف تعمل الأنماط؟» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى التطبيقي (Practitioner)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «المحددات: العناصر والخصائص والفئات» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى المتقدم (Advanced)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «الألوان والوحدات وأنواع القيم» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى المعماري (Architecture & Security)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «نموذج الصندوق: الهوامش والحواف والحشوات» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[مستوى الإنتاج (Production & Testing)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «الخطوط والنصوص والطباعة» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
اختبار وحدة «أساسيات CSS» في دورة CSS.
[المستوى التأسيسي (Beginner)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «مقدمة إلى CSS: كيف تعمل الأنماط؟» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى التطبيقي (Practitioner)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «المحددات: العناصر والخصائص والفئات» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى المتقدم (Advanced)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «الألوان والوحدات وأنواع القيم» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى المعماري (Architecture & Security)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «نموذج الصندوق: الهوامش والحواف والحشوات» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[مستوى الإنتاج (Production & Testing)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «الخطوط والنصوص والطباعة» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
اختبار وحدة «التخطيط» في دورة CSS.
[المستوى التأسيسي (Beginner)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «مقدمة إلى CSS: كيف تعمل الأنماط؟» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى التطبيقي (Practitioner)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «المحددات: العناصر والخصائص والفئات» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى المتقدم (Advanced)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «الألوان والوحدات وأنواع القيم» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى المعماري (Architecture & Security)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «نموذج الصندوق: الهوامش والحواف والحشوات» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[مستوى الإنتاج (Production & Testing)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «الخطوط والنصوص والطباعة» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
اختبار وحدة «التصميم المتجاوب» في دورة CSS.
[المستوى التأسيسي (Beginner)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «مقدمة إلى CSS: كيف تعمل الأنماط؟» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى التطبيقي (Practitioner)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «المحددات: العناصر والخصائص والفئات» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى المتقدم (Advanced)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «الألوان والوحدات وأنواع القيم» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى المعماري (Architecture & Security)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «نموذج الصندوق: الهوامش والحواف والحشوات» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[مستوى الإنتاج (Production & Testing)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «الخطوط والنصوص والطباعة» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
اختبار وحدة «تقنيات التنسيق المتقدمة» في دورة CSS.
[المستوى التأسيسي (Beginner)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «مقدمة إلى CSS: كيف تعمل الأنماط؟» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى التطبيقي (Practitioner)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «المحددات: العناصر والخصائص والفئات» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى المتقدم (Advanced)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «الألوان والوحدات وأنواع القيم» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى المعماري (Architecture & Security)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «نموذج الصندوق: الهوامش والحواف والحشوات» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[مستوى الإنتاج (Production & Testing)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «الخطوط والنصوص والطباعة» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
اختبار وحدة «بناء المكونات» في دورة CSS.
[المستوى التأسيسي (Beginner)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «مقدمة إلى CSS: كيف تعمل الأنماط؟» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى التطبيقي (Practitioner)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «المحددات: العناصر والخصائص والفئات» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى المتقدم (Advanced)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «الألوان والوحدات وأنواع القيم» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى المعماري (Architecture & Security)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «نموذج الصندوق: الهوامش والحواف والحشوات» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[مستوى الإنتاج (Production & Testing)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «الخطوط والنصوص والطباعة» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
اختبار وحدة «هندسة CSS» في دورة CSS.
[المستوى التأسيسي (Beginner)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «مقدمة إلى CSS: كيف تعمل الأنماط؟» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى التطبيقي (Practitioner)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «المحددات: العناصر والخصائص والفئات» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى المتقدم (Advanced)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «الألوان والوحدات وأنواع القيم» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[المستوى المعماري (Architecture & Security)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «نموذج الصندوق: الهوامش والحواف والحشوات» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
[مستوى الإنتاج (Production & Testing)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «الخطوط والنصوص والطباعة» ضمن وحدة «أساسيات CSS والمحددات ونموذج الصندوق (Box Model)» في دورة CSS بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
اختبار وحدة «المشروع العملي: صفحة هبوط متكاملة» في دورة CSS.
شهادة الدورة
مواصفات الدورة
اشترك في نشرتنا البريدية
تصنيفات شائعة
تطوير الويب الأنظمة الخلفية وواجهات API تطبيقات الجوال وسطح المكتب أساسيات علوم الحاسب الأنظمة والبنية التحتية البيانات والتحليل المهارات المهنيةتواصل معنا
الرد على التعليق