الخطوة 1
مسار تعليمي
خارطة طريق مطور الواجهات الأمامية
دورات مجانية بالترتيب الذي يحتاجه مطور الواجهات الأمامية فعلًا: HTML للبنية، وCSS للتنسيق، وJavaScript للسلوك، وTypeScript للأمان، وReact وNext.js لبناء تطبيقات حقيقية، وGit للنشر، وثمانية مشاريع تثبت ما تعلّمته. كل درس يعمل داخل متصفحك، وكل دورة قبل خطوة المشاريع تنتهي بشهادة مجانية.
663,032+ من الـ codders مسجلون في هذه الدورات
804 درسًا681 تحديات3,184 أسئلة الاختبار
- مناسب للمبتدئين
مساعدة برمجية بالذكاء الاصطناعي
دروس تفاعلية عملية
تعليق صوتي في كل درس
اختبارات لقياس معرفتك
13 شهادات مجانية على طول المسار
مسار مطور الواجهات الأمامية، خطوة بخطوة
كل خطوة هي دورة موجودة بالفعل على Coddy. اتبعها بالترتيب أو انتقل مباشرة إلى الدورة التي تنقصك - فتقدّمك يُحفظ لكل دورة على حدة في الحالتين.
- 1
- 2الخطوة 2
CSS: التخطيط والتصميمصفحة مخصصة
ابدأ هذه الخطوةابدأالمُحدِّدات ونموذج الصندوق والألوان والخطوط، ثم flexbox وgrid والتخطيطات المتجاوبة والانتقالات والحركة على مدى قسمين. هنا تبدأ الصفحة تشبه الصفحات التي تستخدمها كل يوم.ابدأصفحة مخصصة - 3الخطوة 3
JavaScript، اللغة كاملةصفحة مخصصة
ابدأ هذه الخطوةابدأالأساسيات والمنطق وتدفق التحكم، ثم الكائنات والأصناف، في ثلاثة أقسام. العمل في الواجهات الأمامية هو عمل بـ JavaScript؛ وكل إطار عمل يأتي بعد هذه الخطوة ليس إلا طريقة لتنظيمها، ولا يصبح مقروءًا إلا حين تكون اللغة مقروءة.ابدأصفحة مخصصة3 أقسام، بالترتيب - 4الخطوة 4
JavaScript داخل المتصفحصفحة مخصصة
ابدأ هذه الخطوةابدأDOM والأحداث وجلب البيانات وبناء صفحات تفاعلية دون إطار عمل، ثم أنماط عملية في الواجهات الأمامية. هنا يصير HTML وCSS وJavaScript شيئًا واحدًا: صفحة تستجيب لمن يستخدمها.ابدأصفحة مخصصة2 أقسام، بالترتيب - 5الخطوة 5
TypeScriptصفحة مخصصة
ابدأ هذه الخطوةابدأالأنواع والواجهات والأنواع العامة، ورسائل خطأ المُصرِّف بوصفها أداة عمل. تكاد كل قاعدة شفرة React احترافية تكون بـ TypeScript، لذا يأتي قبل إطار العمل مباشرة لا كإضافة في النهاية.ابدأصفحة مخصصة - 6الخطوة 6
React وNext.jsصفحة مخصصة
ابدأ هذه الخطوةابدأالمكوّنات وprops والحالة وhooks والعرض، ثم Next.js للتوجيه وتحميل البيانات وبناء تطبيقات حقيقية. إطار العمل الأكثر طلبًا في وظائف الواجهات الأمامية، يُدرَّس بعد اللغة المكتوب بها.ابدأصفحة مخصصة - 7الخطوة 7
Git وإدارة الإصداراتصفحة مخصصة
ابدأ هذه الخطوةابدأالـ commits والفروع والدمج وحل التعارضات والمستودعات البعيدة. كل وظيفة واجهات أمامية وكل مشروع في معرض الأعمال يعيش داخل مستودع Git؛ وتعلّمه هنا يعني أن مشاريع الخطوة التالية تُنشر بالطريقة نفسها التي يُنشر بها العمل الحقيقي.ابدأصفحة مخصصة - 8الخطوة 8
مشاريع: ابنِ ما رأيته من قبل
ابدأ هذه الخطوةابدأتمارين على flexbox والمُحدِّدات، وتدريب على DOM وتوابع المصفوفات، ثم أعمال حقيقية: بطاقة ملف شخصي على Coddy، وصفحة Instagram، وصفحة تسجيل دخول Netflix، ومعرض صور متحرك. كل واحد منها قطعة في معرض أعمالك يستطيع مسؤول التوظيف فتحها.ابدأ8 دورات، بالترتيب- CSS Flexbox - الدورة الشاملة15 درسًا
- محددات CSS15 درسًا
- دوال JavaScript DOM13 درسًا
- دوال المصفوفات في JavaScript18 درسًا
- محاكاة بطاقة الملف الشخصي لـ Coddy | مشروع Front-end26 درسًا
- محاكاة صفحة إنستغرام | مشروع Front-End16 درسًا
- نسخة من صفحة تسجيل الدخول إلى Netflix | مشروع Front-end19 درسًا1 تحديات
- شريط تمرير | مشروع Front-end23 درسًا1 تحديات
ما الذي تحصل عليه
كل ما ستستخدمه لتتعلّم البرمجة
Learn by Doing
Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.
playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3 return greeting + " " + name
4}
5
Test #1
Test #2
Test #3
Input
"Alex"
Output
"Hello, Coddy! Alex"
Build Your Coding Streak
Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.
12 days streak
Return tomorrow to keep your streak!
January 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
22
23
24
25
26
27
28
29
30
Double or Nothing
Day 5 of 7
Streak Freeze
2 left
Code Anywhere, Anytime
Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.
7
250
5
Variables
CONTINUE
4.9
Rating
You're Not Alone in This
Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!
Challenger LeagueTop 7 advance
1
Alex7+ Days
2840
2
Jordan7+ Days
2650
3
Sam7+ Days
2420
4
Casey
2180
5
Morgan7+ Days
1950
Promotion zoneEvery way to learn
Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.
Intro to Variables
Audio
A variable is a named container that stores a value you can reference later in your program.
In Python, you create one by writing the name, an equals sign, then the value you want to store.
The value can change over time - reassigning the name simply points it to a new value.
1xSarah
Prove Your Skills
Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.
Certificate of CompletionThis certifies thatJohn Doehas successfully completedPython Fundamentals
Python Fundamentals
DateJan 2026
Add to LinkedInلماذا تتعلّم تطوير الواجهات الأمامية على Coddy
- ترى الصفحة التي تبنيها. كل درس في HTML وCSS وJavaScript يُعرض مباشرة في المتصفح بجوار شفرتك، فالمُحدِّد الخاطئ أو تخطيط flexbox المكسور يظهر أمامك في اللحظة نفسها التي تكتبه فيها، لا في لقطة شاشة في النهاية.
- الترتيب الصحيح، ودون تخطٍّ لـ JavaScript. معظم دورات الواجهات الأمامية تقفز من HTML إلى إطار عمل مباشرة؛ أما هذا المسار فيمنح JavaScript ثلاثة أقسام كاملة قبل React، لأن إطار العمل لا يصبح مقروءًا إلا حين تكون اللغة التي تحته مقروءة.
- تلميحات ذكاء اصطناعي تقرأ ترميزك وشفرتك. حين ينهار التخطيط أو يمتنع مكوّن عن الظهور، ينظر Bugsy إلى ما كتبته بالفعل ويدفعك نحو الحل دون أن يعطيك الإجابة جاهزة.
- مشاريع يستطيع مسؤول التوظيف فتحها. الخطوة الأخيرة ثمانية أعمال حقيقية - نسخ من صفحات تعرفها مسبقًا - كل واحدة منها قطعة جاهزة للمشاركة في معرض أعمالك، إضافة إلى شهادة مجانية لكل دورة في الخطوات السبع الأولى.
أسئلة شائعة حول كيف تصبح مطور واجهات أمامية
كيف أصبح مطور واجهات أمامية؟
تعلّم HTML وCSS وJavaScript إلى الحد الذي يمكّنك من بناء صفحة كاملة انطلاقًا من ملف فارغ، ثم أضف TypeScript وإطار عمل واحدًا (React هو الخيار الآمن)، وتعلّم Git، وبعدها ابنِ ثلاثة أو أربعة مشاريع حقيقية دون اتباع شرح جاهز وانشرها على الإنترنت. هذا هو المسار بالضبط، وبهذا الترتيب. المشاريع أهم من الشهادات: معرض أعمالك هو الشيء الوحيد الذي يستطيع مسؤول التوظيف الحكم عليه خلال ثلاثين ثانية.
هل أبدأ بـ HTML أم CSS أم JavaScript؟
ابدأ بـ HTML، ثم CSS، ثم JavaScript، وامنح JavaScript أكبر قدر من الوقت. يكفي أسبوعان لتشعر بالراحة مع HTML وشهر تقريبًا مع CSS؛ أما JavaScript فهي لغة برمجة كاملة، وهي الموضع الذي يختصر فيه معظم المتعلّمين ذاتيًا الطريق. يخصص هذا المسار لها ثلاثة أقسام إضافة إلى قسم عن DOM قبل أن يظهر أي إطار عمل.
هل أحتاج TypeScript لأعمل مطور واجهات أمامية؟
للعمل الاحترافي، نعم في الغالب: الغالبية العظمى من قواعد شفرة React وNext.js في الشركات مكتوبة بـ TypeScript، والإعلان الوظيفي الذي يذكر «JavaScript» يعني عمليًا TypeScript في أغلب الأحيان. وهي خطوة قصيرة متى ترسّخت JavaScript، ولهذا وضعناها هنا قبل React مباشرة لا في نهاية المسار.
React أم Vue أم Angular: أي إطار عمل أتعلّم؟
React، إلا إذا كانت وظيفة بعينها تطلب غير ذلك. فهو الأكثر ورودًا في إعلانات التوظيف بفارق كبير، وصاحب أكبر منظومة أدوات، وNext.js المبني فوقه هو ما تُبنى به معظم المواقع الجديدة في الإنتاج. أما المفاهيم - المكوّنات والحالة وprops والعرض - فتنتقل لاحقًا إلى Vue وAngular خلال أسبوع أو اثنين. هذا المسار يعلّم React وNext.js.
كم يستغرق تعلّم تطوير الواجهات الأمامية؟
نحو ستة إلى تسعة أشهر بمعدل ساعة يوميًا للوصول إلى مستوى مبتدئ محترف مع معرض أعمال. في هذا المسار يأخذ HTML وCSS معًا ستة إلى ثمانية أسابيع، وJavaScript شهرين إلى ثلاثة، وTypeScript أسبوعين، وReact وNext.js ستة أسابيع، أما خطوة المشاريع فتستمر ما دمت تبني. الرقم المهم هو عدد المشاريع المكتملة، لا عدد الدروس المكتملة.
هل يغطي هذا المسار الاختبارات أو إتاحة الوصول أو إدارة الحالة؟
ليس كدورات مستقلة، ونفضّل قول ذلك بصراحة بدل حشو الصفحة. الترميز الدلالي، وهو أساس الصفحات المتاحة للجميع، جزء من خطوة HTML، كما تُغطّى إدارة الحالة الخاصة بـ React؛ أما دورة الاختبارات والعمل الأعمق على إتاحة الوصول ومكتبة إدارة الحالة فهي مدرجة في خارطة طريق المناهج، وستنضم إلى هذا المسار كخطوات جديدة فور إطلاقها.
هل أحصل على وظيفة واجهات أمامية بدورات مجانية فقط؟
نعم، إن أنتجت هذه الدورات معرض أعمال، وهذا بالضبط سبب انتهاء المسار بثمانية مشاريع. ما تبحث عنه الشركات هو صفحة بنيتها بنفسك ويمكنها فتحها، وسجل Git يثبت أنك من بناها، ومقابلة تستطيع فيها شرح تخطيط الصفحة وشرح مكوّن. الثلاثة تأتي من هذا المسار، ولا يحتاج أي منها إلى معسكر تدريبي مدفوع.
