خارطة الطريق لمسار برمجة المواقع-Frontend

HTML

CSS

JS

React

Saturday, Jan 27, 2024

لكل من ينوي تعلم تطوير المواقع هذا ملخص لأشهر التقنيات و اللغات المختلفة المستخدمة في تطوير المواقع و سأوضح خارطة الطريق لمن يريد الدخول في هذا المجال

بدايةً تحتاج تعرف كأول خطوة كيف يعمل الويب، ورح ادرج فيديو خاص بشرح هاي الجزئية

🔗 رابط الفيديو

HTML & CSS .1

تستخدم الـ html لتحديد محتوى الصفحة و طريقة توزيع هذا المحتوى، و تستخدم الـ css لإضافة التصميم على هذا المحتوى. يجب التنويه هنا تعلم الـ Responsive Design بعين الاعتبار، تطبق من خلال لغة CSS لتنسيق الصفحة بحيث تظهر متجاوبة في مختلف أحجام الشاشات.

🔗 كورس عربي: HTML

🔗 كورس انجليزي: HTML

🔗 كورس عربي: CSS

🔗 كورس انجليزي: CSS

Javascript .2

و هي اللغة التي تستخدم لإضافة المنطق البرمجي على الصفحات، وكذلك تعتبر الجافاسكربت خيار أساسي و لا وجود لبديل فعال عوضًا عنها بعد تعلم الـJS يجب معرفة الـ ES6

🔗 كورس عربي: JS

🔗 كورس انجليزي: JS

🔗 كورس عربي: ES6

🔗 كورس انجليزي: ES6

Styling Frameworks .3

و هي تساعد بشكل كبير على إنشاء عناصر (أزرار-جداول-نماذج..الخ) في الصفحة بالإضافة إلى العديد من الخيارات التي تسهل ترتيب العناصر في الصفحة، ‏أحدى الأمثلة عليها الـ Bootstrap, Tailwind, MUI.

✅ أولًا (Bootstrap)

🔗 كورس عربي: Bootstrap

🔗 كورس انجليزي: Bootstrap

✅ ثانيا (TailwindCSS)

🔗 كورس عربي: Tailwind

🔗 كورس انجليزي: Tailwind

✅ ثالثا (MUI)

🔗 كورس عربي: MUI

🔗 كورس انجليزي: MUI

4. Javascript Frameworks

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

🌿 ‏Angular والتي أطلقتها Google
🌿 ‏React والتي أطلقتها Facebook
🌿 ‏Vue والتي أطلقها أحد موظفي جوجل.
أنصحك تتعلم منها ReactJs

🔗 كورس عربي: React

🔗 كورس انجليزي: React

اخيراً مهارة ضرورية لأي مطور وهي تعلم Github/Git وهي أداة مهمة لحفظ عملك أو مشاركته مع الآخرين.

🔗 كورس عربي: Git

🔗 كورس انجليزي: Git

🏆 مواقع تمارين وتحديات لتطوير مهاراتك

🔗 عربي: Elzero

🔗 انجليزي: Freecodecamp