CSS Layouts

لعقود من الزمان، استخدم مطورو CSS ال floats لإنشاء تصميمات مرنة تعمل عبر مختلف المتصفحات. لكن استخدامهم للأسلوب الخاطئ كان له الكثير من الجوانب السلبية. يقدم أحدث جيل من ال CSS مجموعة أدوات أفضل وأكثر سهولة إلى حد كبير…

اشترك الآن سجّل الدخول تصفح الدورات

لعقود من الزمان، استخدم مطورو CSS ال floats لإنشاء تصميمات مرنة تعمل عبر مختلف المتصفحات. لكن استخدامهم للأسلوب الخاطئ كان له الكثير من الجوانب السلبية. يقدم أحدث جيل من ال CSS مجموعة أدوات أفضل وأكثر سهولة إلى حد كبير، ولكن الانتقال من استخدام ال floats إلى Grid أو Flexbox أو كليهما يعني تغيير طريقة تفكيرك. في هذه الدورة، يرشدك المهندس ابو سريع خلال هذه العملية، من المفاهيم الأولية إلى التحويل الكامل، وتسليط الضوء على الطرق المختلفة لإنشاء تخطيطات الصفحة باستخدام الجيل الحديث من ال CSS. اكتشف كيفية العمل مع خصائص العرض وال floats؛ استخدام تحديد المواقع النسبي (relative) والمطلق (absolute) والثابت (fixed) لتخطيط المكونات (components)؛ إنشاء تخطيطات Grid و Flexbox الأساسية؛ وأكثر.

7 قسم · 29 درس · 10 اختبار

محتوى الدورة

  1. 1
    CSS Layouts Course Introduction يحتوي على دروس مجانية
  2. 2
    Course Materials
  3. 3
    The 3 Ways of Building Layouts1 درس · 1 اختبار يحتوي على دروس مجانية
    1. مختصر كتابي: The 3 Ways of Building Layouts درس مجاني
    2. اختبار القسم: The 3 Ways of Building Layouts
  4. 4
    Floats8 دروس · 2 اختباران
    1. Using Floats
    2. مختصر كتابي: Using Floats
    3. Clearing Floats
    4. Building a Simple float Layout
    5. Box-Sizing: Border-Box
    6. مختصر كتابي: box-sizing – border-box
    7. اختبار قصير: box-sizing – border-box
    8. Arabic Version
    9. Challenge 1
    10. اختبار القسم: Floats
  5. 5
    Flexbox11 درسًا · 4 اختبارات
    1. Introduction to Flexbox
    2. A Flexbox Overview
    3. مختصر كتابي: A Flexbox Overview
    4. اختبار قصير: A Flexbox Overview
    5. Spacing and Aligning Flex Items
    6. مختصر كتابي: Spacing and Aligning Flex Items
    7. اختبار قصير: Spacing and Aligning Flex Items
    8. The Flex Property
    9. مختصر كتابي: The flex Property
    10. اختبار قصير: The flex Property
    11. Building a Component Layout with Flexbox
    12. Building a Page Layout with Flexbox
    13. Arabic Version: final Flexbox Layout
    14. Challenge 2
    15. اختبار القسم: Flexbox
  6. 6
    CSS Grid9 دروس · 2 اختباران
    1. Introduction to CSS Grid
    2. مختصر كتابي: Introduction to CSS Grid
    3. اختبار قصير: Introduction to CSS Grid
    4. CSS Grid Overview
    5. مختصر كتابي: CSS Grid Overview
    6. Sizing Grid Columns and Rows
    7. Placing and Spanning Grid Items
    8. Aligning Grid Items and Tracks
    9. Building a Simple CSS Grid Layout
    10. Challenge 3
    11. اختبار القسم: CSS Grid
  7. 7
    CSS Layouts Course Conclusion يحتوي على دروس مجانية
  1. الاختبار النهائي
    1. الاختبار النهائي

اشترك الآن سجّل الدخول تصفح الدورات