الخطوة 1
مسار تعليمي
خارطة طريق مطور الواجهات الأمامية
دورات مجانية بالترتيب الذي يحتاجه مطور الواجهات الأمامية فعلًا: HTML للبنية، وCSS للتنسيق، وJavaScript للسلوك، وTypeScript للأمان، وReact وNext.js لبناء تطبيقات حقيقية، وGit للنشر، وثمانية مشاريع تثبت ما تعلّمته. كل درس يعمل داخل متصفحك، وكل دورة قبل خطوة المشاريع تنتهي بشهادة مجانية.
698,051+ من الـ codders مسجلون في هذه الدورات
804 درسًا823 تحديات3,184 أسئلة الاختبار
- مناسب للمبتدئين
مساعدة برمجية بالذكاء الاصطناعي
دروس تفاعلية عملية
تعليق صوتي في كل درس
اختبارات لقياس معرفتك
13 شهادات مجانية على طول المسار
مسار مطور الواجهات الأمامية، خطوة بخطوة
كل خطوة هي دورة موجودة بالفعل على Coddy. اتبعها بالترتيب أو انتقل مباشرة إلى الدورة التي تنقصك - فتقدّمك يُحفظ لكل دورة على حدة في الحالتين.
- 1
- 2الخطوة 2
CSS: التخطيط والتصميمصفحة مخصصة
ابدأ هذه الخطوةابدأالمُحدِّدات ونموذج الصندوق والألوان والخطوط، ثم flexbox وgrid والتخطيطات المتجاوبة والانتقالات والحركة على مدى قسمين. هنا تبدأ الصفحة تشبه الصفحات التي تستخدمها كل يوم.ابدأصفحة مخصصة2 أقسام، بالترتيب - 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 - الدورة الشاملةhtml فقط15 درسًا
- محددات CSShtml فقط15 درسًا
- دوال JavaScript DOMhtml فقط13 درسًا
- دوال المصفوفات في JavaScriptjavascript فقط18 درسًا
- محاكاة بطاقة الملف الشخصي لـ Coddy | مشروع Front-endhtml فقط26 درسًا24 تحديات1 مشروع
- محاكاة صفحة إنستغرام | مشروع Front-Endhtml فقط16 درسًا14 تحديات1 مشروع
- محاكاة صفحة تسجيل الدخول إلى Netflix | مشروع واجهة أماميةhtml فقط19 درسًا18 تحديات1 مشروع
- شريط تمرير | مشروع Front-endhtml فقط23 درسًا22 تحديات1 مشروع
ما الذي تحصل عليه
كل ما ستستخدمه لتتعلّم البرمجة
تعلّم بالممارسة
اكتب أكواداً حقيقية، واستعلم من قواعد البيانات، وأنشئ مواقع ويب، وأتقن أوامر الذكاء الاصطناعي. دروسنا التفاعلية تغطي كل المهارات التي يحتاجها المطورون المعاصرون.
playground.js
محرر الأكواد
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3 return greeting + " " + name
4}
5
اختبار #1
اختبار #2
اختبار #3
الإدخال
"Alex"
الإخراج
"Hello, Coddy! Alex"
ابنِ سلسلتك
حافظ على الاستمرارية وشاهد تقدمك ينمو! تابع عادة البرمجة اليومية، واحمِ سلسلتك بأيام التجميد، واكسب مكافآت لحضورك كل يوم.
12 أيام متتالية
عُد غداً للحفاظ على سلسلتك!
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
ضعف أو لا شيء
اليوم 5 من 7
تجميد السلسلة
2 left
برمج في أي مكان
خذ رحلة البرمجة معك أينما ذهبت! لا إعداد، لا تنزيلات - فقط افتح وابدأ البرمجة. متوفر على iOS وAndroid والويب بتقييم 4.9 نجوم.
7
250
5
المتغيرات
متابعة
4.9
التقييم
لست وحدك
تنافس على لوحات المتصدرين العالمية، وادعُ أصدقاءك لكسب المكافآت، واحتفلوا بإنجازات بعضكم. البرمجة أفضل مع الأصدقاء!
دوري المتحدّينأفضل 7 يتقدمون
1
Alex7+ Days
2840
2
Jordan7+ Days
2650
3
Sam7+ Days
2420
4
Casey
2180
5
Morgan7+ Days
1950
منطقة الترقيةكل طريقة للتعلّم
اقرأ، استمع، اختبر نفسك، اسأل الذكاء الاصطناعي، أو ابحث عما درسته من قبل. كل درس يتكيّف معك.
مقدمة للمتغيّرات
صوت
المتغيّر حاوية مسمّاة تخزّن قيمة يمكن الرجوع إليها لاحقًا في برنامجك.
في بايثون، تُنشئ واحدًا بكتابة الاسم ثم علامة يساوي ثم القيمة التي تريد تخزينها.
يمكن أن تتغيّر القيمة بمرور الوقت - إعادة الإسناد ببساطة توجّه الاسم إلى قيمة جديدة.
1xSarah
احصل على شهادتك
احصل على شهادات لكل دورة تكملها. أضفها إلى ملفك على LinkedIn وسيرتك الذاتية لعرض خبرتك البرمجية لأصحاب العمل.
شهادة إتماميُشهد بأنمحمد أحمدقد أتمّ بنجاحأساسيات Python
أساسيات Python
التاريخيناير 2026
أضف إلى 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 يثبت أنك من بناها، ومقابلة تستطيع فيها شرح تخطيط الصفحة وشرح مكوّن. الثلاثة تأتي من هذا المسار، ولا يحتاج أي منها إلى معسكر تدريبي مدفوع.
