وفـــاء 🌟
وفـــاء 🌟

@b_wffa

33 تغريدة 134 قراءة Jan 11, 2022
✨ [ للمبتدئين جدًا ] ✨
هنا خارطة الطريق لمسار مطور Front-End المبتدئ، مع:
⚡️ مصادر تعلم عربية وانجليزية
🏆 مواقع تمارين وتحديات لتطوير مهاراتك
🔗 قنوات ومواقع مفيدة
🧵 ثريدات مميزة في هذا المجال
رحلة ممتعة 🤩🚀
⚡️ مصادر تعلم عربية وانجليزية
⭐️ أولًا: تهيئــة
تحتاج تعرف كأول خطوة كيف يعمل الويب، وراح تلاقي الإجابة بشكل جميل ومختصر في هذه الفيديوهات 👇🏻
🔗 عربي
youtube.com
🔗 انجليزي
youtube.com
⭐️ ثانيـــًا: لغة HTML/HTML5
وهي أساس كل مواقع الويب، أول وأهم شي لازم تتعلمه وتتقنه ✔️
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
⭐️ ثالثـــًا: لغة CSS/CSS3
وهي لغة الاستايل لتنسيق صفحات الويب اللي عملتها بلغة HTML 🎨
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
⭐️ رابعـــًا: التصميم المتجاوب Responsive Design
ويكون بلغة CSS بالتأكيد، لتنسيق الصفحة بحيث تظهر مرتبة ومتجاوبة في مختلف أحجام الشاشات 📱🖥
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
⭐️ خامســـًا: لغة Javascript
وهي لغة برمجية لجعل صفحات موقعك تفاعلية، ولاحظ إن لغة Javascript تختلف تمامًا عن لغة Java 😉
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
⭐️ سادســـًا: معرفة ES6 ( بعد أساسيات Javascript )
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
⭐️ سابعـــًا: Git/Github
وهو أداة مهمة لحفظ عملك أو مشاركته مع آخرين، بالإضافة إلى أنه مهارة ضرورية لأي مطور 🗂
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
⭐️ ثامنـــًا: إطارات عمل CSS
إطارات العمل (Frameworks) تسهّل عملك، وتختصر وقتك وجهدك.. وهي كثيرة أرشح لك منها:
✅ أولًا (Bootstrap)
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
✅ بعده (TailwindCSS)
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
⭐️ تاسعـــًا: إطارات عمل Javascript
يوجد 3 إطارات عمل: (Angular, Vue.js, ReactJs) أنصحك تتعلم منها ReactJs:
🔗 كورس (React) عربي:
youtube.com
🔗 كورس (React) انجليزي:
youtube.com
⭐️ عاشـــرًا: معالجات CSS أو ما يسمى (CSS preprocessor) أنصحك تتعلم منها Sass:
🔗 كورس (Sass) عربي:
youtube.com
🔗 كورس (Sass) انجليزي:
youtube.com
⭐️ الحادي عشر: Json والتعامل مع API:
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
⭐️ الثاني عشر: تقنيات إضافية جميلة تميزك وتزيد جودة عملك
✅ إضافة الميزات البرمجية للغة HTML من خلال Pugjs
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
✅ - أتمتة عملك وزيادة جودته من خلال Gulpjs
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
🔗 (انجليزي) موقع freecodecamp - شروحات وتحديات
freecodecamp.org
🔗 (انجليزي) تحديات CSS
cssbattle.dev
100dayscss.com
🔗 (انجليزي) تحديات Javascript
codewars.com
javascript30.com
🔗 تحديات Front-End أسبوعية
codepen.io
🧵 ثريدات جميلة في هذا المجال
أخيرًا 🌷 ..
- هل هذه المصادر هي الصح وغيرها خطأ؟ اكيد لا.
- هل المسار اللي رسمته لك هو الصح وغيره خطأ؟ اكيد لا.
- هل المفروض تكتفي بهذه الكورسات والمواقع فقط؟ اكيد لا.
كل ما سبق اجتهاد مني، ومسار لو رجعت أتعلم الـ Front-End من جديد كنت مشيت عليه.. لو عجبك اعتمده ولو لقيت شيء ثاني يناسبك أكثر اعتمده.
وتذكر دائمًا إن كل ما سبق أساسيات تحطك على أول الطريق.. وبعدها المفروض تبحر وتتعمق أكثرر..
ولا تتوقف عن التعلم والممارسة ابدًا.
ونصيحة مني لك:
- لا تشتت نفسك بالتنقل بين الكورسات، اختر كورس واحد فقط وألتزم معاه، ولما تنتهي انتقل لكورس ثاني بمستوى أعلى، وهكذا..
- طبّق، طبّق، طبّق.. تعلّم بدون تطبيق ما يفيدك ابدًا.
- خذ وقتك بالتعلم والتعمق في كل لغة/ تقنية تتعلمها.. ولا تستعجل.
وهنا مهندس أسامة لخّص لك مسار الـ Front-End كامل بالمهارات اللي لازم تكتسبها كمبتدئ أو محترف.. جميل جدًا لو تطلع عليه وتاخذ فكرة عامة قبل البدء بالتعلم عشان تكون فاهم مسار رحلتك
youtube.com
شكرًا لوصولك لنهاية الثريد 💛
ولو ما تعرفني أنا وفاء مطوّرة واجهات ويب Front-End Developer، وانشر أدوات وثريدات تخليك مطوّر واجهات محترف 🚀✨
كل التوفيق - ( @b_wffa ) 🌷..

جاري تحميل الاقتراحات...