✨ [ للمبتدئين جدًا ] ✨
هنا خارطة الطريق لمسار مطور Front-End المبتدئ، مع:
⚡️ مصادر تعلم عربية وانجليزية
🏆 مواقع تمارين وتحديات لتطوير مهاراتك
🔗 قنوات ومواقع مفيدة
🧵 ثريدات مميزة في هذا المجال
رحلة ممتعة 🤩🚀
هنا خارطة الطريق لمسار مطور Front-End المبتدئ، مع:
⚡️ مصادر تعلم عربية وانجليزية
🏆 مواقع تمارين وتحديات لتطوير مهاراتك
🔗 قنوات ومواقع مفيدة
🧵 ثريدات مميزة في هذا المجال
رحلة ممتعة 🤩🚀
![✨ [ للمبتدئين جدًا ] ✨
هنا خارطة الطريق لمسار مطور Front-End المبتدئ، مع:
⚡️ مصادر تعلم عربية وانج...](https://pbs.twimg.com/media/FI03ecOWUAAgg70.jpg)
⚡️ مصادر تعلم عربية وانجليزية
⭐️ أولًا: تهيئــة
تحتاج تعرف كأول خطوة كيف يعمل الويب، وراح تلاقي الإجابة بشكل جميل ومختصر في هذه الفيديوهات 👇🏻
🔗 عربي
youtube.com
🔗 انجليزي
youtube.com
⭐️ أولًا: تهيئــة
تحتاج تعرف كأول خطوة كيف يعمل الويب، وراح تلاقي الإجابة بشكل جميل ومختصر في هذه الفيديوهات 👇🏻
🔗 عربي
youtube.com
🔗 انجليزي
youtube.com
⭐️ ثانيـــًا: لغة HTML/HTML5
وهي أساس كل مواقع الويب، أول وأهم شي لازم تتعلمه وتتقنه ✔️
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
وهي أساس كل مواقع الويب، أول وأهم شي لازم تتعلمه وتتقنه ✔️
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
⭐️ ثالثـــًا: لغة CSS/CSS3
وهي لغة الاستايل لتنسيق صفحات الويب اللي عملتها بلغة HTML 🎨
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
وهي لغة الاستايل لتنسيق صفحات الويب اللي عملتها بلغة HTML 🎨
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
⭐️ رابعـــًا: التصميم المتجاوب Responsive Design
ويكون بلغة CSS بالتأكيد، لتنسيق الصفحة بحيث تظهر مرتبة ومتجاوبة في مختلف أحجام الشاشات 📱🖥
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
ويكون بلغة CSS بالتأكيد، لتنسيق الصفحة بحيث تظهر مرتبة ومتجاوبة في مختلف أحجام الشاشات 📱🖥
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
⭐️ خامســـًا: لغة Javascript
وهي لغة برمجية لجعل صفحات موقعك تفاعلية، ولاحظ إن لغة Javascript تختلف تمامًا عن لغة Java 😉
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
وهي لغة برمجية لجعل صفحات موقعك تفاعلية، ولاحظ إن لغة Javascript تختلف تمامًا عن لغة Java 😉
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
⭐️ سادســـًا: معرفة ES6 ( بعد أساسيات Javascript )
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
⭐️ سابعـــًا: Git/Github
وهو أداة مهمة لحفظ عملك أو مشاركته مع آخرين، بالإضافة إلى أنه مهارة ضرورية لأي مطور 🗂
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
وهو أداة مهمة لحفظ عملك أو مشاركته مع آخرين، بالإضافة إلى أنه مهارة ضرورية لأي مطور 🗂
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
⭐️ ثامنـــًا: إطارات عمل CSS
إطارات العمل (Frameworks) تسهّل عملك، وتختصر وقتك وجهدك.. وهي كثيرة أرشح لك منها:
✅ أولًا (Bootstrap)
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
إطارات العمل (Frameworks) تسهّل عملك، وتختصر وقتك وجهدك.. وهي كثيرة أرشح لك منها:
✅ أولًا (Bootstrap)
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
⭐️ تاسعـــًا: إطارات عمل Javascript
يوجد 3 إطارات عمل: (Angular, Vue.js, ReactJs) أنصحك تتعلم منها ReactJs:
🔗 كورس (React) عربي:
youtube.com
🔗 كورس (React) انجليزي:
youtube.com
يوجد 3 إطارات عمل: (Angular, Vue.js, ReactJs) أنصحك تتعلم منها ReactJs:
🔗 كورس (React) عربي:
youtube.com
🔗 كورس (React) انجليزي:
youtube.com
⭐️ عاشـــرًا: معالجات CSS أو ما يسمى (CSS preprocessor) أنصحك تتعلم منها Sass:
🔗 كورس (Sass) عربي:
youtube.com
🔗 كورس (Sass) انجليزي:
youtube.com
🔗 كورس (Sass) عربي:
youtube.com
🔗 كورس (Sass) انجليزي:
youtube.com
⭐️ الثاني عشر: تقنيات إضافية جميلة تميزك وتزيد جودة عملك
✅ إضافة الميزات البرمجية للغة HTML من خلال Pugjs
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
✅ إضافة الميزات البرمجية للغة HTML من خلال Pugjs
🔗 كورس عربي:
youtube.com
🔗 كورس انجليزي:
youtube.com
🏆 مواقع تمارين وتحديات لتطوير مهاراتك
🔗 (عربي) أكاديمية الزيرو ويب سكول (شروحات وتحديات)
elzero.org
🔗 (عربي) أكاديمية دليل مبرمج (شروحات وتحديات)
dalilmobarmg.com
🔗 (عربي) أكاديمية الزيرو ويب سكول (شروحات وتحديات)
elzero.org
🔗 (عربي) أكاديمية دليل مبرمج (شروحات وتحديات)
dalilmobarmg.com
🔗 (انجليزي) موقع freecodecamp - شروحات وتحديات
freecodecamp.org
🔗 (انجليزي) تحديات CSS
cssbattle.dev
100dayscss.com
🔗 (انجليزي) تحديات Javascript
codewars.com
javascript30.com
🔗 تحديات Front-End أسبوعية
codepen.io
freecodecamp.org
🔗 (انجليزي) تحديات CSS
cssbattle.dev
100dayscss.com
🔗 (انجليزي) تحديات Javascript
codewars.com
javascript30.com
🔗 تحديات Front-End أسبوعية
codepen.io
🔗 قنوات ومواقع مفيدة (عربي)
⭐️ الزيرو ويب سكول
youtube.com
⭐️ نور حمصي
youtube.com
⭐️ المهندس محمد عيسى
youtube.com
⭐️ موقع خدمات ويب
5dmat-web.com
⭐️ الزيرو ويب سكول
youtube.com
⭐️ نور حمصي
youtube.com
⭐️ المهندس محمد عيسى
youtube.com
⭐️ موقع خدمات ويب
5dmat-web.com
youtube.com/c/ElzeroInfo/f…
youtube.com/c/NourHomsi
Nour Homsi
تقدّم القناة دروسا في التصميم الاعلاني و تصميم الويب بالاضافة إلى مختلف مجالات التكنولوجيا بدأت هذه...
youtube.com/c/MuhammedEssa…
Learn with Muhammed Essa
The channel aims to teach all programming languages, including the web, computers, phones and tablet...
5dmat-web.com/ar
الرئيسية | خدمات ويب
شبكة تفاعليه تعليمية عربية نهتم بانتاج ونشر الفيديوهات التعليميه باللغه العربية في مجال تصميم المواق...
🔗 قنوات ومواقع مفيدة (انجليزي)
⭐️ قناة Kevin Powell لـ CSS
youtube.com
⭐️ قناة Web Dev Simplified
youtube.com
⭐️ قناة Dev Ed
youtube.com
⭐️ قناة Kevin Powell لـ CSS
youtube.com
⭐️ قناة Web Dev Simplified
youtube.com
⭐️ قناة Dev Ed
youtube.com
🧵 ثريدات جميلة في هذا المجال
أخيرًا 🌷 ..
- هل هذه المصادر هي الصح وغيرها خطأ؟ اكيد لا.
- هل المسار اللي رسمته لك هو الصح وغيره خطأ؟ اكيد لا.
- هل المفروض تكتفي بهذه الكورسات والمواقع فقط؟ اكيد لا.
- هل هذه المصادر هي الصح وغيرها خطأ؟ اكيد لا.
- هل المسار اللي رسمته لك هو الصح وغيره خطأ؟ اكيد لا.
- هل المفروض تكتفي بهذه الكورسات والمواقع فقط؟ اكيد لا.
كل ما سبق اجتهاد مني، ومسار لو رجعت أتعلم الـ Front-End من جديد كنت مشيت عليه.. لو عجبك اعتمده ولو لقيت شيء ثاني يناسبك أكثر اعتمده.
وتذكر دائمًا إن كل ما سبق أساسيات تحطك على أول الطريق.. وبعدها المفروض تبحر وتتعمق أكثرر..
ولا تتوقف عن التعلم والممارسة ابدًا.
وتذكر دائمًا إن كل ما سبق أساسيات تحطك على أول الطريق.. وبعدها المفروض تبحر وتتعمق أكثرر..
ولا تتوقف عن التعلم والممارسة ابدًا.
ونصيحة مني لك:
- لا تشتت نفسك بالتنقل بين الكورسات، اختر كورس واحد فقط وألتزم معاه، ولما تنتهي انتقل لكورس ثاني بمستوى أعلى، وهكذا..
- طبّق، طبّق، طبّق.. تعلّم بدون تطبيق ما يفيدك ابدًا.
- خذ وقتك بالتعلم والتعمق في كل لغة/ تقنية تتعلمها.. ولا تستعجل.
- لا تشتت نفسك بالتنقل بين الكورسات، اختر كورس واحد فقط وألتزم معاه، ولما تنتهي انتقل لكورس ثاني بمستوى أعلى، وهكذا..
- طبّق، طبّق، طبّق.. تعلّم بدون تطبيق ما يفيدك ابدًا.
- خذ وقتك بالتعلم والتعمق في كل لغة/ تقنية تتعلمها.. ولا تستعجل.
وهنا مهندس أسامة لخّص لك مسار الـ Front-End كامل بالمهارات اللي لازم تكتسبها كمبتدئ أو محترف.. جميل جدًا لو تطلع عليه وتاخذ فكرة عامة قبل البدء بالتعلم عشان تكون فاهم مسار رحلتك
youtube.com
youtube.com
شكرًا لوصولك لنهاية الثريد 💛
ولو ما تعرفني أنا وفاء مطوّرة واجهات ويب Front-End Developer، وانشر أدوات وثريدات تخليك مطوّر واجهات محترف 🚀✨
كل التوفيق - ( @b_wffa ) 🌷..
ولو ما تعرفني أنا وفاء مطوّرة واجهات ويب Front-End Developer، وانشر أدوات وثريدات تخليك مطوّر واجهات محترف 🚀✨
كل التوفيق - ( @b_wffa ) 🌷..
جاري تحميل الاقتراحات...