خارطة طريق مطور الواجهات الأمامية
دورات مجانية بالترتيب الذي يحتاجه مطور الواجهات الأمامية فعلًا: HTML للبنية، وCSS للتنسيق، وJavaScript للسلوك، وTypeScript للأمان، وReact وNext.js لبناء تطبيقات حقيقية، وGit للنشر، وثمانية مشاريع تثبت ما تعلّمته. كل درس يعمل داخل متصفحك، وكل دورة قبل خطوة المشاريع تنتهي بشهادة مجانية.
552,774+ من الـ codders مسجلون في هذه الدورات
804 درسًا823 تحديات3,182 أسئلة الاختبار
- مناسب للمبتدئين
مساعدة برمجية بالذكاء الاصطناعي
دروس تفاعلية عملية
تعليق صوتي في كل درس
اختبارات لقياس معرفتك
شهادة المسار في النهاية، بالإضافة إلى 13 على طول الطريق
مسار مطور الواجهات الأمامية، خطوة بخطوة
كل خطوة هي دورة موجودة بالفعل على Coddy. اتبعها بالترتيب أو انتقل مباشرة إلى الدورة التي تنقصك - فتقدّمك يُحفظ لكل دورة على حدة في الحالتين.
- 1الخطوة 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 مشروع
تعلّم بالممارسة
اكتب أكواداً حقيقية، واستعلم من قواعد البيانات، وأنشئ مواقع ويب، وأتقن أوامر الذكاء الاصطناعي. دروسنا التفاعلية تغطي كل المهارات التي يحتاجها المطورون المعاصرون.
ابنِ سلسلتك
حافظ على الاستمرارية وشاهد تقدمك ينمو! تابع عادة البرمجة اليومية، واحمِ سلسلتك بأيام التجميد، واكسب مكافآت لحضورك كل يوم.
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 نجوم.
لست وحدك
تنافس على لوحات المتصدرين العالمية، وادعُ أصدقاءك لكسب المكافآت، واحتفلوا بإنجازات بعضكم. البرمجة أفضل مع الأصدقاء!
كل طريقة للتعلّم
اقرأ، استمع، اختبر نفسك، اسأل الذكاء الاصطناعي، أو ابحث عما درسته من قبل. كل درس يتكيّف معك.
المتغيّر حاوية مسمّاة تخزّن قيمة يمكن الرجوع إليها لاحقًا في برنامجك.
في بايثون، تُنشئ واحدًا بكتابة الاسم ثم علامة يساوي ثم القيمة التي تريد تخزينها.
يمكن أن تتغيّر القيمة بمرور الوقت. إعادة الإسناد ببساطة توجّه الاسم إلى قيمة جديدة.
احصل على شهادتك
احصل على شهادات لكل دورة تكملها. أضفها إلى ملفك على 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 يثبت أنك من بناها، ومقابلة تستطيع فيها شرح تخطيط الصفحة وشرح مكوّن. الثلاثة تأتي من هذا المسار، ولا يحتاج أي منها إلى معسكر تدريبي مدفوع.
هل أحصل على شهادة لمسار مطور واجهات أمامية؟
نعم. أكمل كل الخطوات واحصل على شهادة مجانية واحدة لمسار مطور واجهات أمامية كله. تذكر كل دورة أنهيتها في الطريق، وترتبط بشهادة كل دورة، ليتمكن أي شخص من التحقق من كل مهارة تذكرها. يمكنك إضافتها إلى ملفك على LinkedIn. إنها شهادة إتمام من Coddy، وليست مؤهلًا معتمدًا.