مسار تعليمي

خارطة طريق مطور Full Stack

دورات مجانية بالترتيب الذي يحتاجه مطور الويب Full Stack: HTML وCSS وJavaScript للصفحة، وTypeScript وReact للواجهة، وNext.js للخادم، وSQL للبيانات، ثم Linux وGit وDocker لإطلاقه. تعمل JavaScript في الجانبين، فتتعلّم لغة واحدة وتستخدمها من البداية إلى النهاية. كل درس يعمل في متصفحك، وكل قسم من أقسام الدورات ينتهي بشهادة مجانية.

ابدأ التعلم(مجاني)

889,130+ من الـ codders مسجلون في هذه الدورات

880 درسًا969 تحديات4,345 أسئلة الاختبار

مناسب للمبتدئين
مساعدة برمجية بالذكاء الاصطناعي
دروس تفاعلية عملية
تعليق صوتي في كل درس
اختبارات لقياس معرفتك
16 شهادات مجانية على طول المسار

مسار مطور Full Stack، خطوة بخطوة

7 دورات16 أقسام880 درسًا969 تحديات4,345 أسئلة الاختبار

كل خطوة دورة قائمة على Coddy. اتبعها بالترتيب أو ابدأ مباشرة بما ينقصك: يُحفَظ تقدّمك لكل دورة في الحالتين.

1
الخطوة 1
HTML وCSS: الصفحةصفحة مخصصة
ابدأ هذه الخطوةابدأالعناصر والروابط والنماذج والترميز الدلالي، ثم المُحدِّدات ونموذج الصندوق وflexbox وgrid والتخطيطات المتجاوبة والانتقالات على مدى قسمين من CSS. النماذج التي تكتبها هنا هي نفسها التي سيقرؤها خادمك لاحقًا في المسار.ابدأ صفحة مخصصة
3 أقسام، بالترتيب
179 درسًا236 تحديات833 أسئلة6 مشاريع
2
الخطوة 2
JavaScript وTypeScriptصفحة مخصصة
ابدأ هذه الخطوةابدأالأساسيات والمنطق وتدفق التحكم والكائنات والأصناف في ثلاثة أقسام، ثم TypeScript: الأنواع والواجهات والأنواع العامة وقراءة أخطاء المُصرِّف. هذه هي اللغة التي تكتب بها في المتصفح وعلى الخادم، لذلك تأخذ وقتًا أكثر من أي خطوة أخرى.ابدأ صفحة مخصصة
4 أقسام، بالترتيب
271 درسًا315 تحديات1,456 أسئلة7 مشاريع
3
الخطوة 3
JavaScript داخل المتصفحصفحة مخصصة
ابدأ هذه الخطوةابدأDOM والأحداث والنماذج والتحقق من المدخلات، ثم أنماط عملية في الواجهة الأمامية مثل علامات التبويب والنوافذ المنبثقة والسمات والتنقل المتجاوب. تصبح HTML وCSS وJavaScript صفحة واحدة تستجيب لمن يستخدمها.ابدأ صفحة مخصصة
2 أقسام، بالترتيب
1. JavaScript قيد التطبيق27 درسًا27 تحديات163 أسئلة
2. الواجهة الأمامية العملية35 درسًا34 تحديات197 أسئلة
62 درسًا61 تحديات360 أسئلة
4
الخطوة 4
Reactصفحة مخصصة
ابدأ هذه الخطوةابدأالمكوّنات وJSX وprops والحالة والأحداث والقوائم والنماذج المتحكَّم بها، وتنتهي ببطاقة اجتماعية صغيرة تبنيها خطوة بخطوة. React هو طبقة الواجهة التي تشغّلها الخطوة التالية على الخادم.ابدأ صفحة مخصصة42 درسًا37 تحديات65 أسئلة
5
الخطوة 5
Next.js: نصف الخادمصفحة مخصصة
ابدأ هذه الخطوةابدأالتوجيه والتخطيطات، ومكوّنات الخادم والعميل، وجلب البيانات على الخادم، وroute handlers لنقاط API الخاصة بك، وserver actions للنماذج، وحالات التحميل والأخطاء، ثم تطبيق مطعم من تسع خطوات فيه سلة مشتريات وفلاتر ومراجعات وبحث فوري. هنا تكتب الواجهة الخلفية.ابدأ صفحة مخصصة47 درسًا41 تحديات99 أسئلة1 مشروع
6
الخطوة 6
SQL: قاعدة البياناتصفحة مخصصة
ابدأ هذه الخطوةابدأاستعلامات على جداول حقيقية: التصفية والترتيب والربط والتجميع والدوال التجميعية، ثم الاستعلامات الفرعية ودوال النوافذ وCASE وتعبيرات الجداول المشتركة. كل تطبيق Full Stack يحفظ بياناته في قاعدة بيانات، وSQL هي طريقتك لسؤالها.ابدأ صفحة مخصصة
2 أقسام، بالترتيب
1. الأساسيات72 درسًا76 تحديات360 أسئلة1 مشروع
2. ما وراء الأساسيات27 درسًا28 تحديات167 أسئلة
99 درسًا104 تحديات527 أسئلة1 مشروع
7
الخطوة 7
Linux وGitصفحة مخصصة
ابدأ هذه الخطوةابدأالملفات والصلاحيات والـ pipes وسكربتات الصدفة في طرفية Linux حقيقية، ثم الـ commits والفروع والدمج والتعارضات والمستودعات البعيدة. الخوادم تعمل على Linux، وكل فريق يحفظ شفرته في مستودع Git.ابدأ صفحة مخصصة
2 أقسام، بالترتيب
1. الأساسيات82 درسًا80 تحديات440 أسئلة3 مشاريع
2. التحكم في الإصدارات58 درسًا55 تحديات370 أسئلة2 مشاريع
140 درسًا135 تحديات810 أسئلة5 مشاريع
8
الخطوة 8
Dockerصفحة مخصصة
ابدأ هذه الخطوةابدأالصور والحاويات وملفات Dockerfile والـ volumes والشبكات. الحاوية تغلّف تطبيقك مع كل ما يحتاجه ليعمل، وهكذا تُشحن معظم تطبيقات الويب إلى الخوادم اليوم.ابدأ صفحة مخصصة40 درسًا40 تحديات195 أسئلة1 مشروع

ما الذي تحصل عليه

كل ما ستستخدمه لتتعلّم البرمجة

تعلّم بالممارسة

اكتب أكواداً حقيقية، واستعلم من قواعد البيانات، وأنشئ مواقع ويب، وأتقن أوامر الذكاء الاصطناعي. دروسنا التفاعلية تغطي كل المهارات التي يحتاجها المطورون المعاصرون.

playground.js

محرر الأكواد

1const greeting = "Hello, Coddy!"

2function sayHi(name) {

3 return greeting + " " + name

اختبار #1

اختبار #2

اختبار #3

الإدخال

"Alex"

الإخراج

"Hello, Coddy! Alex"

ابنِ سلسلتك

حافظ على الاستمرارية وشاهد تقدمك ينمو! تابع عادة البرمجة اليومية، واحمِ سلسلتك بأيام التجميد، واكسب مكافآت لحضورك كل يوم.

12 أيام متتالية

عُد غداً للحفاظ على سلسلتك!

January 2026

ضعف أو لا شيء

اليوم 5 من 7

تجميد السلسلة

2 left

برمج في أي مكان

خذ رحلة البرمجة معك أينما ذهبت! لا إعداد، لا تنزيلات - فقط افتح وابدأ البرمجة. متوفر على iOS وAndroid والويب بتقييم 4.9 نجوم.

250

المتغيرات

متابعة

4.9

التقييم

لست وحدك

تنافس على لوحات المتصدرين العالمية، وادعُ أصدقاءك لكسب المكافآت، واحتفلوا بإنجازات بعضكم. البرمجة أفضل مع الأصدقاء!

دوري المتحدّينأفضل 7 يتقدمون

Alex7+ Days

2840

Jordan7+ Days

2650

Sam7+ Days

2420

Casey

2180

Morgan7+ Days

1950

منطقة الترقية

كل طريقة للتعلّم

اقرأ، استمع، اختبر نفسك، اسأل الذكاء الاصطناعي، أو ابحث عما درسته من قبل. كل درس يتكيّف معك.

مقدمة للمتغيّرات

صوت

المتغيّر حاوية مسمّاة تخزّن قيمة يمكن الرجوع إليها لاحقًا في برنامجك.

في بايثون، تُنشئ واحدًا بكتابة الاسم ثم علامة يساوي ثم القيمة التي تريد تخزينها.

يمكن أن تتغيّر القيمة بمرور الوقت - إعادة الإسناد ببساطة توجّه الاسم إلى قيمة جديدة.

1xSarah

احصل على شهادتك

احصل على شهادات لكل دورة تكملها. أضفها إلى ملفك على LinkedIn وسيرتك الذاتية لعرض خبرتك البرمجية لأصحاب العمل.

شهادة إتمام

يُشهد بأنمحمد أحمدقد أتمّ بنجاح

أساسيات Python

التاريخيناير 2026

أضف إلى LinkedIn

لماذا تتعلّم تطوير Full Stack على Coddy

لغة واحدة في الجانبين. يعلّمك المسار JavaScript وTypeScript للمتصفح، ثم يستخدم اللغة نفسها على الخادم عبر route handlers وserver actions في Next.js، فتكون الواجهة الخلفية أفكارًا جديدة لا لغة ثانية تتعلّمها من الصفر.
لا شيء لتثبيته. تُعرض HTML وCSS مباشرة بجانب شفرتك، وتعمل SQL على جداول حقيقية، وتمنحك خطوات Linux وGit وDocker طرفية حقيقية داخل المتصفح. يمكنك دراسة الحزمة كاملة على حاسوب محمول لم تُثبَّت عليه أي أداة تطوير من قبل.
تلميحات ذكاء اصطناعي تقرأ شفرتك. حين لا يظهر مكوّن، أو يعيد استعلام صفوفًا خاطئة، أو يفشل أمر، ينظر Bugsy إلى ما كتبته ويوجّهك نحو الحل دون أن يعطيك الإجابة.
الترتيب هو الأساس. معظم دورات Full Stack تقفز إلى إطار عمل في الأسبوع الثاني، أما هذا المسار فيمنح JavaScript ثلاثة أقسام والمتصفح قسمًا رابعًا قبل أن يظهر React، لأن إطار العمل لا يُفهم إلا بعد فهم اللغة التي تحته.

أسئلة شائعة حول كيف تصبح مطور Full Stack

من هو مطور Full Stack؟

مطوّر يستطيع بناء نصفي تطبيق الويب: الواجهة الأمامية التي تعمل في المتصفح (HTML وCSS وJavaScript وإطار عمل مثل React) والواجهة الخلفية التي تعمل على الخادم (معالجة الطلبات ومنطق العمل وقاعدة البيانات). عمليًا يكون معظم مطوري Full Stack أقوى في جانب واحد، لكنهم يستطيعون إنجاز ميزة من جدول قاعدة البيانات إلى الزر الذي يستخدمها دون تسليمها لشخص آخر.

كيف أصبح مطور ويب؟

تعلّم HTML وCSS وJavaScript بما يكفي لبناء صفحة من ملف فارغ، وأضف إطار عمل واحدًا (React)، وتعلّم كيف يجيب الخادم عن الطلبات وكيف تُخزَّن البيانات (Next.js وSQL في هذا المسار)، وتعلّم Git، وابنِ مشاريع تنشرها على الإنترنت وتستطيع شرحها. الشركات توظّف بناءً على ما تستطيع أن تريه لها، لذلك المشاريع أهم من أي شهادة. هذا المسار هو هذا التسلسل، بهذا الترتيب، وهو مجاني.

هل أتعلّم الواجهة الأمامية أم الخلفية أولًا؟

الواجهة الأمامية أولًا. ترى نتيجة كل سطر على الشاشة، فتظهر الأخطاء بوضوح ويبقى الحماس مرتفعًا، والواجهة الخلفية أسهل فهمًا بكثير بعد أن تبني الصفحة التي تستدعيها. لهذا يقضي هذا المسار خطواته الأربع الأولى في المتصفح، ثم ينتقل بعدها إلى الخادم وقاعدة البيانات.

لماذا يستخدم هذا المسار JavaScript على الخادم بدل Python؟

لأن JavaScript هي اللغة الوحيدة التي تعمل في المتصفح، فاستخدامها على الخادم أيضًا يعني لغة واحدة للحزمة كلها. يتيح Next.js، المبني على React، لقاعدة الشفرة نفسها أن تعرض الصفحات على الخادم وتجيب عن طلبات API وتعالج إرسال النماذج. وإن كنت تفضّل كتابة الواجهة الخلفية بلغة Python، فمسار مطوّر Backend على Coddy يعلّم طريق Python.

هل أحتاج إلى معسكر تدريبي لأصبح مطور Full Stack؟

لا. المعسكر التدريبي يمنحك جدولًا زمنيًا ودفعة تتعلّم معها وإرشادًا مهنيًا، ويتقاضى مقابلها؛ أما المهارات نفسها فهي ما يعلّمه هذا المسار، والمواد المجانية تغطيها جيدًا. ما لا يستطيع المعسكر اختصاره هو التدريب: مئات التمارين الصغيرة وبضعة مشاريع حقيقية. إن استطعت الالتزام بساعة يوميًا دون معلّم يتابعك، فالمسار المجاني يوصلك إلى المكان نفسه.

كم يستغرق أن أصبح مطور Full Stack؟

نحو تسعة إلى اثني عشر شهرًا بمعدل ساعة يوميًا للوصول إلى مستوى مبتدئ في سوق العمل (junior). في هذا المسار تأخذ HTML وCSS معًا من ستة إلى ثمانية أسابيع، وJavaScript والمتصفح من شهرين إلى ثلاثة، وTypeScript وReact نحو ستة أسابيع، وNext.js شهرًا، وSQL من ثلاثة إلى أربعة أسابيع، وLinux وGit وDocker شهرًا آخر. بناء مشروعك الخاص بالتوازي مع الخطوات الأخيرة هو ما يحوّل هذا الوقت إلى معرض أعمال.

هل يغطي هذا المسار Node.js أو Express أو المصادقة أو النشر؟

ليس كدورات مستقلة بعد، ونفضّل أن نقول ذلك بدل أن نحشو الصفحة. تُكتب شفرة الخادم في هذا المسار باستخدام route handlers وserver actions في Next.js، وهي تعمل على Node.js، لكن لا توجد دورة في Express، ولا دورة عن ربط تطبيق بقاعدة بيانات إنتاج عبر ORM، ولا دورة عن المصادقة أو النشر على منصة استضافة. هذه كلها على خارطة طريق المنهج، وتنضم إلى هذا المسار كخطوات جديدة حين تصدر.

هل دورة Full Stack هذه مجانية، وهل أحصل على شهادة؟

نعم. كل دورة في المسار مجانية، بما فيها الدروس والمحرّرات والطرفية داخل المتصفح وتلميحات الذكاء الاصطناعي والشهادات. كل قسم من أقسام الدورات ينتهي بشهادة مجانية قابلة للتحقق عبر رابطها الخاص، يمكنك إضافتها إلى LinkedIn أو سيرتك الذاتية.

مسارات تعليمية أخرى

الدورات نفسها مرتّبة لدور مختلف. يُحفَظ التقدّم: الدورة المُنجَزة في مسار تُحتسب في كل مسار يتضمّنها.

كل المسارات التعليمية

ابدأ مسار مطوّر Full Stack مجانًا

ابدأ التعلّم