راح نبدا مسيرتنا في لغة CSS
في هذا التمرين انشئ قائمة مطعمك الخاص
- قم بعمل Fork
- افتح الـrepo في github desktop
- قم بإنشاء ملف بصيغة html
- استخدم وسم h1 لكتابة عنوان لمطعمك
- غير لون الخط إلى لون مناسب
- غير محاذاة النص
(text-align)إلى المنتصف
- استخدم الوسوم التالية لانشاء اول طبق في المطعم:
- اسم الطبق –> h2
- وصف الطبق بإختصار –> p
- سعر الطبق –> h3
- غير حجم الخط
(font-size)لعنصر h2 الذي قمت بإنشائه بالخطوة (5) إلى حجم "50px"
بونص!
- اضف حدود لوسم body
لننشئ صفحة css ونتعلم كيفية استخدام وسم الـ Div وننسق موقعنا بشكل بسيط وسلس!
- قم بإنشاء ملف بصيغة css
- اربط ملف الـcss في صفحة الـhtml السابقة
استخدم وسم <link> داخل الـhead - في صفحة الـhtml استخدم وسم الاحتواء div ليحتوي بداخله على عناصر الطبق التي قمت بإنشائها سابقا:
- اسم الطبق –> h2
- وصف الطبق بإختصار –> p
- سعر الطبق –> h3
- قم بإضافة كلاس بإسم card إلى الـ div، وغير خصائص الكلاس كالتالي:
- غير العرض
(width)ليصبح 500 بكسل - لون الخلفية
(background-color)إلى اللون يناسب مطعمك - محاذاة النص
(text-align)في المنتصف
- غير العرض
- اضف id إلى وسم h2 بإسم dish-name# وغير لون الخط إلى الابيض
- انسخ الـ div ليصبح في موقعك ثلاث اطباق
- احفظ التغييرات وقم بعمل commit و push
- قم بتسليم التمرين على موقع Coded Lab
بونص!
- استخدم وسم الخط الافقي لتفصل بين الاطباق
horizontal line
آخر موعد لرفع الكود هو نهاية المحاضرة "لا تترددون أنكم تسألون المدرسين 👌"