تطبيقات عملية على HTML و CSS

ستحتاج أولاً إلى قراءة التالي:

ثم دراسة flexbox و grid، وعليك بالتدرج في مستوى المشاريع لكي لا تصاب بالإحباط بدون داعي.

بعد دراسة  flexbox و grid بشكل متعمق، قم ببناء جزء صغير من الموقع باستخدام html و CSS وأنصحك بتنفيذ التحديات على موقع Frontend mentor مع تحديد التمارين الخاصة بالمستوى المبتدئ newbie ثم  junior ثم تستطيع زيادة الصعوبة فيما بعد إلى intermediate، وإليك التمارين مباشرًة:

https://www.frontendmentor.io/challenges?difficulty=1&type=free%2Cfree-plus

اختر أي تمرين تراه مناسب ثم حاول تنفيذه، وفي حال واجهتك مشكلة تستطيع الاستفسار في قسم أسئلة البرمجة، ومع الوقت والإلتزام والصبر سيتحسن مستواك وتستطيع بعدها تنفيذ تصميم كامل.

ثم التمارين التالية:

يوجد العديد من المواقع ويعد أفضلها 

Frontend Mentor حيث يوفر لك تصميمات ويطلب منك بناءها لتطابق التصميم الأصلي. التحديات مقسمة من مبتدئ إلى متقدم، وهو ممتاز لبناء معرض أعمالك . DevChallenges.io أيضاً  يقدم مسارات كاملة لتطوير الواجهات والتصميم المتجاوب (Responsive Design). الميزة هنا أنه يركز على بناء أجزاء كاملة من تطبيقات الويب الحديثة.

وبالنسبة لل css إذا كنت تريد احتراف الـ CSS والـ Layouts (مثل Flexbox و Grid) فيوجد موقع CSSBattle  يطلب منك إعادة إنشاء شكل هندسي أو تصميم معين باستخدام HTML و CSS فقط، والهدف هو كتابة أقل عدد ممكن من الأكواد لتطابق الشكل.

100 Days of CSS تحدي رائع يقدم لك فكرة يومية لمدة 100 يوم لعمل أشكال ورسومات وتأثيرات متحركة (Animations) باستخدام CSS فقط.

يمكنك البحث في محرك البحث جوجل ع كويزات أو اختبارات على HTML و CSS وإليك بعض الكلمات المفتاحية التي يمكنك استخدامها للبحث عن اختبارات وتطبيقات في مجال HTML و CSS :

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

وإليك االمواقع التالية أيضا يمكنك الدخول عليها مباشرة :