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