مطوّر متكامل (Full-Stack)
المطوّر المتكامل يبني التطبيق كاملًا: من الزرّ الذي ينقره المستخدم، إلى الخادم الذي يعالج طلبه، إلى قاعدة البيانات التي تحفظه. هذا أطول المسارات وأكثرها قيمةً في السوق. رتّبناه ليأخذك من الواجهة تدريجيًا نحو الخادم، بحيث ترى الصورة الكاملة بلا فجوات.
- 1
🟧المرحلة 1: HTML
23 درس💡 لماذا هذه المرحلة؟
كل شيء يبدأ بالبنية. HTML هو الهيكل الذي ستلبسه لاحقًا بالتنسيق والتفاعل والبيانات. لا يمكن بناء أي طبقة فوقه دون إتقانه أولًا.
🎯 أهم ما ستتقنه
العناصرالنماذجHTML الدلاليإمكانية الوصولابدأ تعلّم HTML ←📌 المتطلّبات السابقة
لا شيء — نقطة البداية.
💼 في سوق العمل
أساس كل واجهة ويب يبنيها المطوّر المتكامل.
- 2
🟦المرحلة 2: CSS
25 درس💡 لماذا هذه المرحلة؟
بعد البنية يأتي المظهر. CSS يحوّل صفحاتك إلى تصاميم متجاوبة وجميلة. المطوّر المتكامل يحتاجه ليصنع واجهات يستخدمها الناس فعلًا.
🎯 أهم ما ستتقنه
FlexboxGridالتصميم المتجاوبالتنسيقابدأ تعلّم CSS ←📌 المتطلّبات السابقة
أساسيات HTML.
💼 في سوق العمل
ضروري لأي واجهة احترافية في أي مشروع.
- 3
🟨المرحلة 3: JavaScript
25 درس💡 لماذا هذه المرحلة؟
هنا تبدأ القوة الحقيقية. JavaScript تضيف التفاعل للواجهة، وهي أيضًا اللغة التي ستبني بها الخادم لاحقًا (Node.js). إتقانها يخدم طرفي التطبيق — وهذا جوهر كونك مطوّرًا متكاملًا.
🎯 أهم ما ستتقنه
DOM والأحداثغير المتزامنFetchالمصفوفات والكائناتابدأ تعلّم JavaScript ←📌 المتطلّبات السابقة
إتقان HTML وCSS.
💼 في سوق العمل
اللغة الوحيدة التي تعمل في الواجهة والخادم معًا — ميزة كبرى للمطوّر المتكامل.
- 4
⚛️المرحلة 4: React
20 درس💡 لماذا هذه المرحلة؟
لبناء واجهات تطبيقات حقيقية (لا مجرد صفحات)، تحتاج React ومكوّناتها القابلة لإعادة الاستخدام. هذه المرحلة تكمّل الجانب الأمامي قبل أن ننتقل للخادم.
🎯 أهم ما ستتقنه
المكوّناتالحالة والخطّافاتإدارة البياناتالتوجيهابدأ تعلّم React ←📌 المتطلّبات السابقة
إتقان قويّ لـ JavaScript.
💼 في سوق العمل
أشهر مكتبة واجهات، مطلوبة في الجانب الأمامي لمعظم وظائف الـ Full-Stack.
- 5
🟩المرحلة 5: Node.js
6 درس💡 لماذا هذه المرحلة؟
الآن نعبر إلى الجانب الخلفي. بفضل JavaScript التي أتقنتها، يصبح تعلّم Node.js طبيعيًا — نفس اللغة، بيئة جديدة. هنا تبني الخادم الذي سيخدم واجهتك.
🎯 أهم ما ستتقنه
Expressخادم HTTPالوحدات وnpmغير المتزامنابدأ تعلّم Node.js ←📌 المتطلّبات السابقة
إتقان JavaScript.
💼 في سوق العمل
الخادم الذي يشغّل منطق التطبيق ويتصل بقاعدة البيانات في مشاريع JS المتكاملة.
- 6
🗄️المرحلة 6: SQL
5 درس💡 لماذا هذه المرحلة؟
تطبيقك يحتاج ذاكرة دائمة لحفظ المستخدمين والبيانات. SQL تمنحك ذلك. تتعلّمها بعد بناء الخادم لتربطها به مباشرةً وتكمل دورة البيانات.
🎯 أهم ما ستتقنه
الاستعلاماتالجداول والعلاقاتJOINتصميم قاعدة البياناتابدأ تعلّم SQL ←📌 المتطلّبات السابقة
فهم أساسيات الخادم.
💼 في سوق العمل
تخزين البيانات في كل تطبيق متكامل تقريبًا.
- 7
🔌المرحلة 7: REST APIs
3 درس💡 لماذا هذه المرحلة؟
هذه المرحلة هي 'الجسر' الذي يربط كل ما تعلّمته: تجعل واجهة React تتحدّث مع خادم Node وقاعدة البيانات. هنا تكتمل الصورة وتفهم كيف يعمل التطبيق المتكامل من طرف لطرف.
🎯 أهم ما ستتقنه
طرق HTTPنقاط النهايةJSONالمصادقةربط الواجهة بالخادمابدأ تعلّم REST APIs ←📌 المتطلّبات السابقة
Node.js وقاعدة بيانات.
💼 في سوق العمل
العمود الفقري للتواصل بين أجزاء أي تطبيق حديث.
- 8
▲المرحلة 8: Next.js
5 درس💡 لماذا هذه المرحلة؟
المرحلة الختامية التي تجمع كل شيء في إطار واحد: Next.js يتيح بناء الواجهة والخادم معًا في مشروع واحد، مع أداء وSEO ممتازين. إنه التتويج الطبيعي لرحلة المطوّر المتكامل.
🎯 أهم ما ستتقنه
التوجيه بالملفاتمكوّنات الخادمجلب البياناتالنشرابدأ تعلّم Next.js ←📌 المتطلّبات السابقة
إتقان React وأساسيات الباك-إند.
💼 في سوق العمل
إطار مفضّل لبناء تطبيقات متكاملة في الإنتاج (وهذا الموقع منها).