كيف أتمرن على تصميم المواقع بـ html-css-Javascript ؟

و عليكم السلام و رحمة الله . 
التطبيق العملي و بناء ما بني بالفعل لا يعني مماثلة طرق بناءه الأولى أو السير على نفس طريقة مصممها الأول , فما تراه أنت مناسبا أن يتم عمله بتخطيط شبكي Grid Layout يمكن أن أفضل عمله بـخواص الصندوق المرن flexbox مثلا و قس على ذلك الكثير . فقد نختلف في الطرق و نتفق في النتيجة . و هذا ما هو إلا نتيجة طبيعية للتنوع و التضارب بين الطرق , الأدوات و مختلف الفلسفات التي توفرها طبيعة المجال و حجمه و حجم مجتمعه . 

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

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

أما عن طرق للتمرن على تصميم المواقع بـ html و css و javascript فإليك بعض النقاط التي أحب الإشارة إليها دوما : 

• قم بتقليد التصاميم و القوالب الجاهزة , و ذلك كتغذية بصرية و تطويرا لقدرتك على النمذجة . 
• قم ببناء تطبيقات بسيطة ( سيتم اقتراح بضعة تطبيقات فيما سيأتي ) , و ذلك لحاجتك لتطوير قدرتك على إستخدام مفاهيم اللغة و أساسياتها و خصوصا في الجافاسكربت . 
• حاول فهم المشاكل التي تصادفها , وصفها , مناقشتها و تبسيطها و البحث عن ما يتعلق بها و قراءة اراء الاخرين و أكوادهم بشأنها .  
• كن نقديا في انتقاء الأفكار , فبدل البحث عن "كيفية فعل كذا" ابحث عن "أفضل الطرق لفعل كذا". 
• استعن بأوراق و ملصقات ملاحظات لتبسيط كل ما يصعب عليك . 
• قم بتجزئة الأفكار إلى الكبيرة إلى أصغر و إلى أخرى أدق و هكذا , أي أنه لا يجب عليك رؤية التطبيق ككل في محاولة لفهمه , بل قم بتجزئته و تفكيك مفاهيمه . و نفس الشيء ينطبق على قوالب المواقع أو أية مجسمات أو تركيبات تظهر صعبة التشكيل بها . 

إليك 7 تطبيقات يمكنك تطبيق مهاراتك عليها : 

1. ساعة رقمية عن طريق الجافاسكربت .
2. ساعة دائرية عن طريق الجافاسكربت و تحويلات الـ CSS . 
3. الة حاسبة عن طريق الجافاسكربت .  
4. تطبيق إدارة قائمة مهام To Do List . 
5. مولد ألوان عشوائية . 
6. تطبيق معرض صور Gallery .   
7. تطبيق عارض شرائح Slide Show . 

يمكنك البحث عبر اليوتيوب على قنوات تقوم ببناء موقع ومن ثم تقوم بتقليد ذلك الموقع دون النظر إلى الشفرة البرمجية, وعند الإنتهاء تقوم بالنظر إلى الشفرة البرمجية ومقارنتها بالشفرة خاصتك

لمساعدة نفسك على اتباع ال best practices يجب عليك أن تتعلم frameworks مبنية فوق التكنولوجيات المستخدمة في حالتك يمكنك استخدام أحد هذه ال frameworks

• react
• vue 
• angular
• svelte

واضب داءما على استخدام أخر النسخ من المكاتب المشهورة لأنها تكون مبنية من فريق متخصص و تكون مصممة لتتماشى مع best practices عدا ذلك اذا كنت لا تريد استخدام أي framework يمكنك جلب قوالب مبنية مسبقا وحاول بناءها وحدك ثم قارن شيفرتك مع شيفرت الموقع وتعلم منها ال best practices