مسار تعليمي

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

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

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

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

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

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

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

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

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

1
الخطوة 1
HTML وCSS: الصفحةصفحة مخصصة
ابدأ هذه الخطوةابدأالعناصر والروابط والنماذج والترميز الدلالي، ثم المُحدِّدات ونموذج الصندوق وflexbox وgrid والتخطيطات المتجاوبة والانتقالات على مدى قسمين من CSS. النماذج التي تكتبها هنا هي نفسها التي سيقرؤها خادمك لاحقًا في المسار.ابدأ صفحة مخصصة
3 أقسام، بالترتيب
179 درسًا215 تحديات833 أسئلة
2
الخطوة 2
JavaScript وTypeScriptصفحة مخصصة
ابدأ هذه الخطوةابدأالأساسيات والمنطق وتدفق التحكم والكائنات والأصناف في ثلاثة أقسام، ثم TypeScript: الأنواع والواجهات والأنواع العامة وقراءة أخطاء المُصرِّف. هذه هي اللغة التي تكتب بها في المتصفح وعلى الخادم، لذلك تأخذ وقتًا أكثر من أي خطوة أخرى.ابدأ صفحة مخصصة
4 أقسام، بالترتيب
271 درسًا288 تحديات1,457 أسئلة
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 درسًا32 تحديات99 أسئلة
6
الخطوة 6
SQL: قاعدة البياناتصفحة مخصصة
ابدأ هذه الخطوةابدأاستعلامات على جداول حقيقية: التصفية والترتيب والربط والتجميع والدوال التجميعية، ثم الاستعلامات الفرعية ودوال النوافذ وCASE وتعبيرات الجداول المشتركة. كل تطبيق Full Stack يحفظ بياناته في قاعدة بيانات، وSQL هي طريقتك لسؤالها.ابدأ صفحة مخصصة
2 أقسام، بالترتيب
1. الأساسيات72 درسًا72 تحديات360 أسئلة
2. ما وراء الأساسيات27 درسًا28 تحديات167 أسئلة
99 درسًا100 تحديات527 أسئلة
7
الخطوة 7
Linux وGitصفحة مخصصة
ابدأ هذه الخطوةابدأالملفات والصلاحيات والـ pipes وسكربتات الصدفة في طرفية Linux حقيقية، ثم الـ commits والفروع والدمج والتعارضات والمستودعات البعيدة. الخوادم تعمل على Linux، وكل فريق يحفظ شفرته في مستودع Git.ابدأ صفحة مخصصة
2 أقسام، بالترتيب
1. الأساسيات82 درسًا68 تحديات440 أسئلة
2. التحكم في الإصدارات58 درسًا46 تحديات370 أسئلة
140 درسًا114 تحديات810 أسئلة
8
الخطوة 8
Dockerصفحة مخصصة
ابدأ هذه الخطوةابدأالصور والحاويات وملفات Dockerfile والـ volumes والشبكات. الحاوية تغلّف تطبيقك مع كل ما يحتاجه ليعمل، وهكذا تُشحن معظم تطبيقات الويب إلى الخوادم اليوم.ابدأ صفحة مخصصة40 درسًا36 تحديات195 أسئلة

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

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

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

Test #1

Test #2

Test #3

Input

"Alex"

Output

"Hello, Coddy! Alex"

Build Your 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

Double or Nothing

Day 5 of 7

Streak Freeze

2 left

Code Anywhere

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.

250

Variables

CONTINUE

4.9

Rating

You're Not Alone

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger LeagueTop 7 advance

Alex7+ Days

2840

Jordan7+ Days

2650

Sam7+ Days

2420

Casey

2180

Morgan7+ Days

1950

Promotion zone

Every 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

Earn a Certificate

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

Certificate of Completion

This certifies thatJohn Doehas successfully completed

Python Fundamentals

DateJan 2026

Add to 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 أو سيرتك الذاتية.