تكليفات CSS على جميع الدروس
[ 25 ] تكليفات خاصة ب [ All Course ]
المقاطع المطلوب مشاهدتها
كل ما يخص الدورة التعليمية الموجودة هنا
التكليف 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
- قم بعمل الشكل المطلوب كما في الصورة
تسليم ومراجعة الحلول
الحلول النموذجية هي هدية للداعمين يمكنك الإنضمام للداعمين لترى جميع الحلول من
هنا
0 تعليقات