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