سأشرح لكم خطوات اعجبتني لكيفية البدء بتعلم هذا المجال، فهيا بنا نبدأ

 ‏❗️تريد البدء برحلة تعلم front-end؟❗️

تطوير الواجهات الامامية او front-end web development هي مجال خاص بتطوير جميع ما يراه المستخدم

سأشرح لكم خطوات اعجبتني لكيفية البدء بتعلم هذا المجال، فهيا بنا نبدأ👇🏼 

‏1️⃣ تعلم HTML/CSS:

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

‏2️⃣ قم بتطوير موقع شخصي:

للاحتفاظ بالمفاهيم التي تحتاج لممارستها ، يمكنك التدرب عن طريق تطوير الأشياء

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

‏3️⃣ تعلم التحكم بالاصدارات بGit: 

يسمح لك git ب:

- تتبع التعليمات البرمجية الخاصة بك

- عمل نسخة احتياطية من التعليمات البرمجية الخاصة بك

- تجنب العواقب الوخيمة بسبب التغييرات غير المرغوب فيها

- التعاون مع زملائك في الفريق والأشخاص الآخرين بسلاسة

‏4️⃣ إضافة تفاعل إلى الواجهة الأمامية الخاصة بك - تعلم JavaScript:

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

- نموذج 

- نافذة منبثقة 

- Twitter feed

‏5️⃣ تعلم الخوارزميات وهياكل البيانات:

يعد امتلاك فهم جيد للخوارزميات وهياكل البيانات أمرًا أساسيًا لكتابة كود أكثر تحسينًا ونظافة

لكن الافضل ان تبدأ بتعلم الخوارزميات بعد اتقان JavaScript بشكل عام

‏6️⃣ قم بتوصيل الواجهة الأمامية - تعرف على APIS:

بصفتك مطورًا للواجهة الأمامية ، سيكون عليك إيجاد طريقة للتواصل مع المبرمجين في الواجهة الخلفية ، لتبادل البيانات أو التحقق من مستخدم

للقيام بذلك ، ستستخدم بعض APIS و HTTP ، وكيف يمكنك إرسال واستقبال البيانات منه

‏7️⃣ اصنع الواجهات الأمامية:

 الآن بعد أن تعلمت JavaScript ، حان الوقت لتطوير بعض تطبيقات الواجهة الأمامية الكاملة💪🏼

حاول إنشاء: 

- مكون التسعير pricing component 

- صفحة انطلاق landing page

- نموذج اشتراك signup form

-  تطبيق المهام to-do list app

‏8️⃣ تعلم اطر عمل جافاسكريبت:

- React

- vue

- angular 

- svelte 

9️⃣ تعلم معالجات CSS :

هناك العديد من معالجات CSS التي تضيف بعض الميزات غير الموجودة في CSS ، مثل: 

- Mixin 

- nesting 

- inheritance selector

وما إلى ذلك

‏هكذا تكون قد اكملت رحلتك في تعلم تطوير الواجهات

الخطوات:

1️⃣ تعلم HTML/CSS

2️⃣ قم بتطوير موقع شخصي

3️⃣ تعلم التحكم بالاصدارات بGit

4️⃣ إضافة تفاعل إلى الواجهة الأمامية الخاصة بك - تعلم JavaScript

5️⃣ تعلم الخوارزميات وهياكل البيانات

6️⃣ قم بتوصيل الواجهة الأمامية - تعرف على APIS

‏7️⃣ اصنع الواجهات الأمامية

8️⃣ تعلم اطر عمل جافاسكريبت

9️⃣ تعلم معالجات CSS

مصادر لتعلم تطوير الواجهات👇🏼

Freecodecamp

Udemy

Youtube

W3school