بعد التركيز على تعلم الأساسيات والتطبيق على النماذج الصغيرة، عليك الإنتقال للمرحلة التالية وهي تنفيذ مشاريع كاملة سواء موقع من صفحة واحدة أو عدة صفحات، بحيث تحاول تحويل التصميم إلى موقع حي من خلال الكود والمحتوى.
ولا أنصحك بالإنتقال مباشرًة إلى إنشاء موقع فذلك من شأنه إحباطك، بل عليك إنشاء نماذج بسيطة ثم تنفيذ مشاريع بعد ذلك، وقم تم شرح المصادر التي توفر لك نماذج وتحديات للتدريب وأيضًا مصادر الحصول على تصميمات للتطبيق في النقاش التالي:
يفضل التطبيق على html و css بالتدريج في الصعوبة لذلك ابدأ بمشروع صغير وبسيط يتيح لك تطبيق المفاهيم الأساسية التي تعلمتها. قد تكون صفحة ويب بسيطة تحتوي على عناصر HTML مختلفة وتنسيقها باستخدام CSS. يمكنك توسيع المشروع تدريجيًا وزيادة تعقيده بمرور الوقت.
بعد ذلك يمكنك البحث عن تصميم مواقع psd ومحاولة تحويلها إلى html و css أو يمكنك محاولة تقليد أي موقع يعجبك
كما أن هناك موقع يسمى frontend mentor يحتوي على الكثير من الأفكار للتطبيق على html و css وأكثر ويمكنك تحديد الصعوبة حتى تجد التطبيق الذي بناسب مستواك
تهانينا على تعلمك لغة HTML و CSS حتى الآن، فهي حقيقة خطوة أساسية ونقطة مرحلية في تعلم تطوير تطبيقات الويب بشكل عام وواجهات الاستخدام بشكل خاص، لتطوير مهاراتك وتطبيق معرفتك النظرية فيهما، يمكنك اتباع هذه الخطوات لبدء إنشاء مشاريع وتطبيق ما تعلمته:
اختر مشروعًا صغيرًا للبداية
استخدم محرر نصوص جيد
احصل على التغذية البصرية اللازمة وابحث عن كل جزئية تهتم بتصميمها او هيكلتها
البداية بالـ HTML، صف الهياكل اللازمة
أضف الـ CSS، اضف التنسيقات المناسبة
قم بتجربة وتعديل الناتج واختبر قيما مختلفة لمختلف خواص css لديك
استخدم الأدوات والمصادر عبر الإنترنت، من مثل التوثيقات الرسمية وتوثيق ويكي حسوب
اعمل على مشاريع متعددة
استفد من المشاريع المفتوحة المصدر والتي تكون منشورة عادة اما في شكل مستودعات عامة على الغيتهب او قصاصات على مواقع مثل codepen
مجتمع لمناقشة وتبادل الخبرات حول تطوير الويب. ناقش أحدث التقنيات، اللغات، والأدوات في عالم تطوير المواقع والتطبيقات. شارك مشاريعك، اسأل عن نصائح، وتعاون مع مطورين محترفين وهواة.