اليوم راح نسوي هيكل لعبة X O بالـ Flexbox
- قم بعمل fork للـ repository
- افتح الـ repository باستخدام github desktop
- انشئ ملف بصيقة HTML
- استخدم وسم h1 لتكتب جملة ترحيبية
- مثال: حياكم في لعبتي الجميلة
- ثم غير نوع خط وسم h1 ليصبح monospace
- انشئ div حاوية مع كلاس container وغير خصائص الكلاس كالتالي:
- العرض = 500 بكسل
- انشئ div داخل الحاوية مع كلاس box وغير خصائص الكلاس كالتالي:
- العرض = 150 بكسل
- الطول = 150 بكسل
- لون الخلفية = teal
- إزاحة هامشية = 1 بكسل (margin)
- دوران الزوايا = 10 بكسل (border-radius)
- تدرج الانتقالات = نص ثانيه لجميع التغيرات (transition)
- حدود = 10 بكسل صلب ولون teal
- عند تمرير المؤشر:
- لون الحدود = turquoise
- انسخ وسم div مع كلاس box تسع مرات
- احفظ التغييرات وارفع الكود إلى github
بونص! ✨
- استخدم animation مع keyframes 😍
- اكمل الخطوات في صفحة التمرين السابق
- اضف الخصائص التالية إلى كلاس container:
- طريقة العرض = فلكس
- محاذاة محور س = منتصف
- محاذاة محور ص = منتصف
- فلكس راب = راب
- الان، لنجعل المكعبات تظهر في منتصف الصفحة
- قم بإضافة التغيرات التالية إلى الوسم الذي يحتوي على container (البودي):
- طريقة العرض = فلكس
- اتجاه الحاوية = عمودي
- محاذاة محور س = منتصف
- محاذاة محور ص = منتصف
لا تنسى! لا يمكنك تغير محور بدون ارتفاع
- احفظ اتغيرات وارفع الكود إلى github
- قم بتسليم التمرين على موقع Mentorly
بونص! ✨
- أضف ظلال خفيف بطريقة مناسبة
آخر موعد لرفع الكود هو نهاية المحاضرة "لا تترددون أنكم تسألون المدرسين 👌"