تكليفات CSS على جميع الدروس

المقاطع المطلوب مشاهدتها

---

التكليف 01 تحدي

• إستخدم بنية ال HTML التالية كما هي بدون أي تعديل
• بواسطة ما تعلمته قم بكتابة CSS Code لعمل الشكل في الصورة
• حجم الخطوط الملونة هو 5 Pixel
• يمنع إستخدام Box-Shadow
• تحدي إضافي أن تجعل حجم الخطوط الملونة عبارة عن متغير عندما نقوم بتغييره من مكان واحد يتغير الشكل بدون اي مشكلة

---

التكليف 02

• لدينا البنية التالية كما في الشكل التالي
• البنية تحتوي على ملفات CSS في كل مكان ونريد إستدعائها جميعا
• لاحظ كل مسار يفرق بين الإبن والأب بعلامتين —
• اكتب ال HTML Code الخاص بإستدعاء جميع الملفات والمثال بالأسفل

---

التكليف 03

• لديك مجموعة الخواص التي تخص ال Fonts في ال Code التالي
• المطلوب إختصار جميع هذه الخواص في سطر واحد فقط

---

التكليف 04

• لديك بنية ال HTML التالية ممنوع التعديل عليها
• قم بكتابة Code ال CSS لعمل الشكل كما في الصورة بالأسفل

---

التكليف 05 تحدي

• لديك بنية ال HTML التالية ممنوع التعديل عليها
• قم بكتابة Code ال CSS لعمل الشكل كما في الصورة بالأسفل

---

التكليف 06

• لدينا مجموعة من الروابط كما في المثال
• المطلوب تنسيق الرابط الأخير الذي لا يحتوي على Classes
• مع العلم ان الروابط يمكن أن يتغير مكاتها لذلك لا تعتمد على إختيار العنصر بواسطة ال Child
• ممنوع إستخدام اسماء ال Classes في الحل نهائيا
• المطلوب تلوين الرابط الأخير بأي لون يعجبك

---

التكليف 07 تحدي

• لديك بنية ال HTML التالية ممنوع التعديل عليها
• قم بكتابة Code ال CSS لعمل الشكل كما في الصورة بالأسفل

---

التكليف 08

• لديك بنية ال HTML التالية ممنوع التعديل عليها
• قم بكتابة Code ال CSS لعمل الشكل كما في الصورة بالأسفل
• لاحظ النص الخاص بالرابط غير موجود

---

التكليف 09

• لديك بنية ال HTML التالية ممنوع التعديل عليها
• قم بكتابة Code ال CSS لعمل الشكل كما في الصورة بالأسفل
• يمكنك إختيار لونين مختلفين لا توجد مشكلة

---

التكليف 10

• لديك بنية ال HTML التالية ممنوع التعديل عليها
• قم بكتابة Code ال CSS لعمل الشكل كما في الصورة بالأسفل

---

التكليف 11

• نريد عمل جدول مثل الموجود في الصورة
• لاحظ عند عمل Hover على أي خلية يتم تغيير لون الخلفية للصف والعمود كاملا ماعدا ال Head الخاص بالجدول
• وعند ال Hover أيضا يتم تغيير لون ال Border الخاص بالخلية
• لديك بنية الجدول لتساعدك

---

التكليف 12

• المطلوب عمل الشكل كما في الصورة
• يجب إستخدام نفس الألوان

---

التكليف 13

• المطلوب عمل الشكل كما في الصورة
• يجب إستخدام نفس الألوان
• العنصر الأول هو ال Active ونفس الشكل يظهر عند عمل Hover

---

التكليف 14 تحدي

• المطلوب عمل الشكل كما في الصورة
• يجب إستخدام نفس الألوان
• الفكرة منقولة من موقع Codepen مع بعض التعديلات
• قم برسم الشكل بنفسك ولا تحاول نقله حتى تتعلم

---

التكليف 15

• لديك بنية ال HTML التالية ممنوع التعديل عليها
• قم بكتابة Code ال CSS لعمل الشكل كما في الصورة بالأسفل

---

التكليف 16

• لديك بنية ال HTML التالية ممنوع التعديل عليها
• قم بكتابة Code ال CSS لعمل الشكل كما في الصورة بالأسفل

---

التكليف 17

• لديك بنية ال HTML التالية ممنوع التعديل عليها
• قم بكتابة Code ال CSS لعمل الشكل كما في الصورة بالأسفل

---

التكليف 18 تحدي

• لديك بنية ال HTML التالية ممنوع التعديل عليها
• قم بكتابة Code ال CSS لعمل الشكل كما في الصورة بالأسفل
• لا تستخدم ال ::after Pseudo Element

---

التكليف 19

• لديك بنية ال HTML التالية ممنوع التعديل عليها
• قم بكتابة Code ال CSS لعمل الشكل كما في الصورة بالأسفل
• ممنوع إستخدام ال Pseudo Elements
• ممنوع إستخدام ال Gradients
• يجب أن يتم تغيير حجم ال Border من مكان واحد فقط بمعنى يمكن تكبيره أو تصغيره بخطوة واحدة

---

التكليف 20

• لديك بنية ال HTML التالية ممنوع التعديل عليها
• قم بكتابة Code ال CSS لعمل الشكل كما في الصورة بالأسفل

---

التكليف 21

• لديك مجموعة من ال Selectors
• المطلوب إختصار السطور الخاصة بكل Selector في سطر واحد فقط
• هناك أول مثال لتوضيح الفكرة

---

التكليف 22

• قم بعمل الشكل كما في الصورة
• يمكنك إستخدام اي صور تريدها

---

التكليف 23

• لديك بنية ال HTML التالية ممنوع التعديل عليها
• قم بكتابة Code ال CSS لعمل الشكل كما في الصورة بالأسفل

---

التكليف 24

• قم بعمل الشكل المطلوب كما في الصورة

---

التكليف 25

• قم بعمل الشكل المطلوب كما في الصورة

تسليم ومراجعة الحلول