خطة تعليمية · مستندة دايماً للتحديث

تطوير واجهات المواقع

ده نقطة بداية مش مسار ثابت. الخطة دي بترسم منين هنبدأ وإزاي الطريق هيكبر بعد كده — من إزاي الويب بيشتغل وأساسيات HTML و CSS لتطبيقات ويب احترافية كاملة (full-stack) — مع فهم الدورة كلها، ومشروع منشور في كل مرحلة.

+5
مراحل البداية
+4
مشاريع حقيقية
أسبوعي
الحصص
خارطة البداية
من هنا هنبدأ. كل مرحلة بتبني على اللي قبلها، والخطة بتتراجع وتتوسع كل ما يتقدم — وموضوعات جديدة بتتضاف على حسب اهتماماته وأهدافه.
01

إزاي الويب بيشتغل

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

هيتعلم إيه

  • الإنترنت بيشتغل إزاي (الأجهزة والسيرفرات)
  • المتصفح بيعمل إيه ورا الكواليس
  • DNS — إزاي اسم الموقع بيلاقي السيرفر
  • طلبات واستجابات HTTP (لغة الويب)
  • إيه اللي بيحصل لما تكتب رابط وتضغط Enter

المهارات المكتسبة

  • يشوف الويب كنظام مش سحر
  • تصوّر واضح لدورة الطلب والاستجابة
  • قراءة نشاط الشبكة في أدوات المطورين
  • يتكلم عن الويب بالمصطلحات الصح
المشروع

شرح مرئي ومُفصّل لرحلة الطلب كاملة — من ما تكتب الرابط لحد ما الصفحة تظهر قدامك. بيبنيه كصفحة بسيطة يقدر ينشرها ويشرحها بكلامه هو.

02

تصميم الصفحات وأول موقع

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

هيتعلم إيه

  • بنية HTML والعناصر الصحيحة
  • نموذج الصندوق والمسافات في CSS
  • نظام Flexbox للتنسيق
  • تصميم متجاوب (يشتغل على الموبايل)
  • نشر المواقع واستضافتها

المهارات المكتسبة

  • التخطيط قبل البرمجة
  • قراءة الأخطاء وإصلاحها
  • استخدام أدوات المطورين
  • البناء من الصفر
  • نشر الشغل على الإنترنت
المشروع

موقع متعدد الأقسام ومتجاوب عن موضوع هو يختاره — فيه شريط تنقل وقسم رئيسي وكروت محتوى وفوتر. منشور على رابط حقيقي يقدر يشاركه مع أي حد.

03

JavaScript والتفاعل

الانتقال من صفحات ثابتة لمواقع بتعمل حاجات فعلاً. هيتعلم JavaScript — لغة البرمجة الأساسية للويب — ويبدأ يبني ميزات تفاعلية ويشتغل مع بيانات حقيقية ويستخدم Git و GitHub زي المطورين المحترفين.

هيتعلم إيه

  • أساسيات JavaScript
  • التحكم في الصفحة (خليها تفاعلية)
  • التعامل مع APIs وبيانات حقيقية
  • Git و GitHub (إدارة الكود)

المهارات المكتسبة

  • حل المشاكل بالكود
  • تتبع الأخطاء وإصلاحها
  • التعاون مع مطورين تانيين
  • قراءة التوثيق باستقلالية
المشروع

تطبيق ويب تفاعلي بيجيب بيانات حقيقية من الإنترنت ويعرضها — زي تطبيق طقس أو متصفح أفلام أو لعبة أسئلة. منشور على GitHub بتاريخ نسخ منظم.

04

الـ Backend والدورة الكاملة

نفهم النص التاني من أي تطبيق. هيتعلم الـ backend ده إيه بالظبط، وإزاي الفرونت اند اللي بيبنيه بيكلّمه، وإزاي البيانات بتتخزن وترجع تاني — عشان الدورة كلها، من ضغطة الزرار لحد حفظ البيانات، يبقى فاهمها من الأول للآخر.

هيتعلم إيه

  • الـ Backend إيه والسيرفر بيعمل إيه
  • قواعد البيانات — إزاي التطبيق بيفتكر البيانات
  • تصميم واستخدام REST APIs (الناحيتين)
  • دورة الطلب والاستجابة من الأول للآخر
  • أساسيات تسجيل الدخول (Authentication)

المهارات المكتسبة

  • يشوف الدورة الكاملة بين الفرونت والباك
  • يوصّل فرونت اند ببيانات حقيقية هو متحكم فيها
  • يفكر في البيانات مش بس الشاشات
  • تتبع الأخطاء عبر النظام كله
المشروع

يوصّل واحد من تطبيقاته بـ backend حقيقي وقاعدة بيانات — يحفظ ويجيب بيانات بتفضل متسجلة. تطبيق full-stack صغير (زي لوحة ملاحظات أو سجل زوار) هو متحكم في كل خطوة فيه، من ضغطة الزرار لحد تخزين البيانات.

05

React ومشروع البورتفوليو

تعلّم React — أكتر إطار عمل مطلوب في سوق العمل عالمياً — وبناء تطبيق ويب كامل جاهز للبورتفوليو. كل اللي قبل كده بيتجمع هنا في شغل بمستوى احترافي.

هيتعلم إيه

  • إطار React والمكونات
  • إدارة حالة التطبيق
  • تطبيقات متعددة الصفحات والتنقل
  • أدوات التطوير الحديثة

المهارات المكتسبة

  • بناء تطبيقات احترافية
  • تنظيم الكود وهيكلته
  • التعلم والبحث باستقلالية
  • أسلوب عمل بمعايير الصناعة
المشروع

تطبيق React كامل ومتعدد الصفحات — منتج حقيقي هو اللي يصممه ويبنيه من الصفر. المشروع ده بيبقى قلب البورتفوليو بتاعه، جاهز يعرضه لأي شركة أو جامعة في المستقبل.

···

...وبعد كده الطريق مستمر

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

إزاي البرنامج بيشتغل
01

تعلّم بالمشاريع

كل مفهوم بيتعلمه من خلال بناء مشاريع حقيقية — مش نظري. بيتعلم لأن المشروع محتاج كده، فالمعلومة بتثبت.

02

حصص أسبوعية

حصة واحدة في الأسبوع (٤٥–٦٠ دقيقة) مع واجب بين الحصص. تقدم مستمر من غير ضغط زيادة.

03

دعم مستمر

يقدر يبعت أي سؤال بين الحصص في أي وقت. الرد خلال ٢٤ ساعة — فمش هيفضل واقف كتير.

04

عقلية المهندس

أكتر من مجرد كود — هيتعلم إزاي المطورين المحترفين بيفكروا: التخطيط، تتبع الأخطاء، تقسيم المشاكل، وبناء حاجات شغالة.

الهدف من الخطة
دي النتائج المستمرة اللي الخطة دي مصممة عشان تحققها — وبتزيد كل ما خارطة الطريق تكبر.

بورتفوليو متجدد من مشاريع منشورة

مواقع وتطبيقات متعددة منشورة على الإنترنت — مش بس كود على الشاشة، لكن منتجات حقيقية أي حد يقدر يزورها.

حساب GitHub احترافي

حساب GitHub فيه مشاريع منظمة بتوضح تطوره — الطريقة المعتمدة عالمياً اللي المطورين بيعرضوا بيها شغلهم.

أساس جاهز لسوق العمل

المهارات والبورتفوليو اللي يقدر بيهم يدخل سوق العمل الحر أو التدريب أو وظائف مطور مبتدئ — بمشاريع حقيقية مش مجرد شهادات.

القدرة على التعلم الذاتي

الثقة والمهارات اللي تخليه يتعلم تقنيات جديدة لوحده — ودي أهم نتيجة من الخطة كلها.

تحت إشراف

Abdelrahman Mostafa

مهندس برمجيات · خبرة مهنية +3 سنة