كيف أقوم بالتطبيق على HTML و CSS ؟

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

ولا أنصحك بالإنتقال مباشرًة إلى إنشاء موقع فذلك من شأنه إحباطك، بل عليك إنشاء نماذج بسيطة ثم تنفيذ مشاريع بعد ذلك، وقم تم شرح المصادر التي توفر لك نماذج وتحديات للتدريب وأيضًا مصادر الحصول على تصميمات للتطبيق في النقاش التالي:

وبجانب ذلك عليك تعلم أساسيات التصميم الجيد.

السلام عليكم

• ابدأ بالتطبيق علي نماذج مصغرة مثل تنسيق ازرار مثلا او سكشن صغير وهذه التطبيقات تجدها بكثرة علي اليوتيوب او في المواقع فقط ابحث عن Html, css tutorials.
• ثانيا قم بالتطبيق علي مشاريع كاملة وابدأ بالتدريج أيضا صفحات بسيطة وانتقل الي تصاميم أعقد وقارن دوما طريقة تنفيذك بالكود الأصلي.
• يوجد أيضا علي اليوتيوب تطبيقات لمشاريع كاملة حاول تنجزها بنفسك أولا ثم قارن كودك بكود المدرب.

يفضل التطبيق على html و css بالتدريج في الصعوبة لذلك ابدأ بمشروع صغير وبسيط يتيح لك تطبيق المفاهيم الأساسية التي تعلمتها. قد تكون صفحة ويب بسيطة تحتوي على عناصر HTML مختلفة وتنسيقها باستخدام CSS. يمكنك توسيع المشروع تدريجيًا وزيادة تعقيده بمرور الوقت.

بعد ذلك يمكنك البحث عن تصميم مواقع psd ومحاولة تحويلها إلى html و css أو يمكنك محاولة تقليد أي موقع يعجبك

كما أن هناك موقع يسمى frontend mentor يحتوي على الكثير من الأفكار للتطبيق على html و css وأكثر ويمكنك تحديد الصعوبة حتى تجد التطبيق الذي بناسب مستواك

قم بالدخول علي مواقع لعرض بعض المشاريع السابقة و قم بعمل مثلها تمام و من افضل هذه المواقع colorlib , pintertest , dribbble

يوجد موقع اسمه css battle يعطيك اشكال تم تصميمها ب css و يطلب منك اعادة نفس التصميم.

يمكنك ايضا ان تسابق مستخدمين آخرين او حتى اصدقاءك و بالتأكيد هذه المنافسة ستزيد من تحفيزك للتعلم أكثر.

تهانينا على تعلمك لغة HTML و CSS حتى الآن، فهي حقيقة خطوة أساسية ونقطة مرحلية في تعلم تطوير تطبيقات الويب بشكل عام وواجهات الاستخدام بشكل خاص، لتطوير مهاراتك وتطبيق معرفتك النظرية فيهما، يمكنك اتباع هذه الخطوات لبدء إنشاء مشاريع وتطبيق ما تعلمته:

1. اختر مشروعًا صغيرًا للبداية
2. استخدم محرر نصوص جيد
3. احصل على التغذية البصرية اللازمة وابحث عن كل جزئية تهتم بتصميمها او هيكلتها
4. البداية بالـ HTML، صف الهياكل اللازمة
5. أضف الـ CSS، اضف التنسيقات المناسبة
6. قم بتجربة وتعديل الناتج واختبر قيما مختلفة لمختلف خواص css لديك
7. استخدم الأدوات والمصادر عبر الإنترنت، من مثل التوثيقات الرسمية وتوثيق ويكي حسوب
8. اعمل على مشاريع متعددة
9. استفد من المشاريع المفتوحة المصدر والتي تكون منشورة عادة اما في شكل مستودعات عامة على الغيتهب او قصاصات على مواقع مثل codepen
10. تعلم بالتجربة والصبر
11. ابحث عن حلول مشاكلك واقصد المجتمعات التقنية لذلك
12. استمتع بالرحلة وتطوير خبراتك.