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 يحتوي على دروس مجانية
2. 2

   مواد الدورة
3. 3

   الطرق الثلاث لبناء التخطيطات1 درس · 1 اختبار يحتوي على دروس مجانية
   1. مختصر كتابي: The 3 Ways of Building Layouts درس مجاني
   2. اختبار القسم: الطرق الثلاث لبناء التخطيطات
4. 4

   العناصر العائمة Floats8 دروس · 2 اختباران
   1. استخدام العناصر العائمة
   2. مختصر كتابي: Using Floats
   3. إلغاء تأثير العناصر العائمة
   4. بناء تخطيط بسيط باستخدام العناصر العائمة
   5. الخاصية box-sizing: border-box
   6. مختصر كتابي: box-sizing – border-box
   7. اختبار قصير: box-sizing – border-box
   8. النسخة العربية
   9. التحدي 1
   10. اختبار القسم: العناصر العائمة Floats
5. 5

   خاصية Flexbox11 درسًا · 4 اختبارات
   1. مقدمة إلى Flexbox
   2. نظرة عامة على Flexbox
   3. مختصر كتابي: A Flexbox Overview
   4. اختبار قصير: A Flexbox Overview
   5. التباعد ومحاذاة عناصر Flex
   6. مختصر كتابي: Spacing and Aligning Flex Items
   7. اختبار قصير: Spacing and Aligning Flex Items
   8. الخاصية flex
   9. مختصر كتابي: The flex Property
   10. اختبار قصير: The flex Property
   11. بناء تخطيط مكوّن باستخدام Flexbox
   12. بناء تخطيط صفحة باستخدام Flexbox
   13. النسخة العربية: التخطيط النهائي باستخدام Flexbox
   14. التحدي 2
   15. اختبار القسم: خاصية Flexbox
6. 6

   شبكة CSS Grid9 دروس · 2 اختباران
   1. مقدمة إلى CSS Grid
   2. مختصر كتابي: Introduction to CSS Grid
   3. اختبار قصير: Introduction to CSS Grid
   4. نظرة عامة على CSS Grid
   5. مختصر كتابي: CSS Grid Overview
   6. تحديد أحجام أعمدة الشبكة وصفوفها
   7. وضع عناصر الشبكة وتمديدها
   8. محاذاة عناصر الشبكة ومساراتها
   9. بناء تخطيط بسيط باستخدام CSS Grid
   10. التحدي 3
   11. اختبار القسم: شبكة CSS Grid
7. 7

   خاتمة دورة CSS Layouts يحتوي على دروس مجانية

1. الاختبار النهائي
   1. الاختبار النهائي لدورة CSS Layouts

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