برمجيات مصممة لطريقة عملك.مصر · السعودية · الإمارات
JoSamCodeابدأ مشروعك

خطة تعلم12 دقيقة قراءة

خطة تعلم Full Stack من الصفر: من HTML لحد مشروع كامل أونلاين

الخطة كاملة لو بتبدأ من الصفر: 6 مراحل بالترتيب، في كل واحدة إيه تتعلمه بالظبط، ومشروع تعمله بإيدك، ومدة تقريبية، وإزاي تعرف إنك جاهز للي بعدها.

JoSamCodeشركة برمجيات · مصر والخليج

الـ Full Stack مش معناها إنك تعرف كل حاجة.

معناها إنك تقدر تبني المشروع من أوله لآخره: الشاشة اللي المستخدم بيشوفها، والسيرفر اللي شغال وراها وبيرد عليها. والترتيب: HTML و CSS، وبعدها JavaScript، وبعدها React، وبعدين Node.js، وبعدها قاعدة بيانات زي PostgreSQL، وفي الآخر الـ Deployment.

علّم على كل حاجة تخلصها وانت ماشي، علشان تعرف انت فين، وترجع تكمّل من نفس المكان.

قبل ما تبدأ

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

المرحلة 1 من 6

HTML و CSSهيكل الصفحة وشكلها

المدة: 3 لـ 4 أسابيع

HTML هي هيكل الصفحة، و CSS هي شكلها. ودول أول حاجة، علشان أي مشروع Full Stack في الآخر هو شاشات بيستخدمها ناس.

متقعدش فيهم شهور. خد الأساس اللي هنا، ولو عايز تفاصيل أكتر، فيه خطة الـ Frontend لوحدها.

هتتعلم إيه

0 من 9

اعمل بإيدك

Landing Page لمنتج. header فيه لوجو ولينكات، وعنوان كبير وزرار، و3 كروت مميزات، وفورم «اشترك» في الآخر. وتبان مظبوطة على الموبايل والكمبيوتر.

تعدّي للمرحلة اللي بعدها لما

  • تقدر تحوّل صورة تصميم بسيط لصفحة شبهها بـ Flexbox أو Grid
  • صفحتك مفيهاش scroll بالعرض على الموبايل
  • بتعمل commit بعد كل خطوة شغالة

المرحلة 2 من 6

JavaScriptحركة الصفحة

المدة: 6 لـ 8 أسابيع

JavaScript هي حركة الصفحة: اللي بيخليها ترد عليك لما تدوس أو تكتب. ودي أهم مرحلة في الخطة دي بالذات، علشان هتكتب بيها الناحيتين: الشاشة والسيرفر.

كل اللي جاي، React و Node.js، هو JavaScript في الآخر. فخد وقتك هنا ومتستعجلش.

هتتعلم إيه

0 من 11

اعمل بإيدك

تطبيق طقس. تكتب اسم مدينة، وتجيب الطقس بتاعها من API مجاني زي Open-Meteo، وتعرض حالة التحميل، ورسالة واضحة لو حصل error. وآخر 5 مدن دورت عليهم يتحفظوا بـ localStorage.

تعدّي للمرحلة اللي بعدها لما

  • تقدر تعمل صفحة تفاعلية من الصفر: تاخد من المستخدم، وتجيب بيانات، وتغيّر الصفحة
  • بتكتب map و filter و async و await من غير ما تبص على شرح
  • عملت 3 مشاريع صغيرة على الأقل بـ JavaScript لوحدها

المرحلة 3 من 6

Reactالشاشات الكبيرة من قطع صغيرة

المدة: 5 لـ 6 أسابيع

React بتبني بيها الشاشات الكبيرة من قطع صغيرة اسمها components: كارت، وزرار، وقايمة. وتستخدم القطعة الواحدة أكتر من مرة.

ادخلها لما تبقى مرتاح في JavaScript. لو JavaScript عندك ضعيفة، React هتبان صعبة، مش علشان هي صعبة، علشان هي JavaScript في الآخر.

هتتعلم إيه

0 من 10

اعمل بإيدك

لوحة مهام بـ React. مهام مقسمة على 3 أعمدة: لسه، وشغال، وخلص. تضيف مهمة، وتنقلها بين الأعمدة، وتمسحها. البيانات لسه في الـ state و localStorage، وفي المرحلة الجاية هتيجي من سيرفر انت كاتبه.

تعدّي للمرحلة اللي بعدها لما

  • تقدر تبني شاشة كاملة من components صغيرة، وتنقل البيانات بينهم بالـ props
  • بتعرف تحط الـ state في المكان الصح
  • بتجيب بيانات من API وتعرض التحميل والـ error من غير ما تبص على شرح

المرحلة 4 من 6

Node.jsالسيرفر بنفس الـ JavaScript

المدة: 4 لـ 6 أسابيع

Node.js بتخليك تكتب السيرفر بنفس الـ JavaScript اللي اتعلمتها. يعني مش محتاج لغة جديدة، محتاج تفهم السيرفر بيستقبل الطلب ويرد عليه إزاي.

وهنا هتستخدم Express، وده framework بسيط ومشهور لـ Node.js. ولو حابب تتعمق في الناحية دي، فيه خطة الـ Backend لوحدها.

هتتعلم إيه

0 من 10

اعمل بإيدك

API للوحة المهام. سيرفر Express فيه endpoints تضيف وتعرض وتعدّل وتمسح مهمة، وكلها بترجّع JSON و status codes صح. البيانات لسه في array جوه السيرفر. وبعدين خلي تطبيق React يكلم السيرفر ده بـ fetch بدل localStorage.

تعدّي للمرحلة اللي بعدها لما

  • تقدر تعمل CRUD كامل في Express من ملف فاضي
  • تطبيق React بتاعك بيكلم السيرفر بتاعك، وانت فاهم الطلب ماشي إزاي من الزرار للسيرفر ورجوع
  • لما طلب يفشل، بتعرف المشكلة في الشاشة ولا في السيرفر

المرحلة 5 من 6

PostgreSQLتحفظ بيانات المستخدمين

المدة: 4 لـ 5 أسابيع

قاعدة البيانات هي اللي بتحفظ بيانات المستخدمين: حساباتهم، والحاجات اللي بيضيفوها. من غيرها، أول ما السيرفر يقف كل حاجة تضيع.

و PostgreSQL داتا بيز Relational، يعني البيانات في جداول مربوطة ببعض. ولو فهمت SQL هنا، هتعرف تتعامل مع أي داتا بيز تانية. وبما إنك بتحفظ مستخدمين، هنا كمان هتعمل تسجيل الدخول.

هتتعلم إيه

0 من 11

اعمل بإيدك

لوحة المهام بمستخدمين. انقل المهام من الـ array للداتا بيز، وضيف تسجيل حساب ودخول. كل مستخدم يشوف مهامه هو بس، والمهام تفضل موجودة لو السيرفر وقف واشتغل تاني.

تعدّي للمرحلة اللي بعدها لما

  • بتصمم جدولين مربوطين وتكتب JOIN من غير ما تبص على شرح
  • الباسوردات عندك hashed، وجربت تفتح مهام مستخدم تاني واترفضت
  • المشروع كله شغال على جهازك: React بيكلم Express، و Express بيكلم PostgreSQL

المرحلة 6 من 6

Deploymentيفتحه أي حد من النت

المدة: 2 لـ 3 أسابيع

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

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

هتتعلم إيه

0 من 10

اعمل بإيدك

لوحة المهام أونلاين. ارفع التلات أجزاء: React، والسيرفر، والداتا بيز. وابعت اللينك لصاحبك، وخليه يعمل حساب ويضيف مهام من موبايله. لو اشتغل عنده، يبقى سلّمت أول مشروع Full Stack.

تعدّي للمرحلة اللي بعدها لما

  • المشروع شغال على لينك حقيقي، وأي حد يقدر يعمل حساب ويستخدمه
  • مفيش ولا secret في الكود اللي على GitHub
  • لما حاجة تقع، بتفتح الـ logs وتعرف السبب

سلم المشاريع

المشاريع هي اللي بتعلمك بجد، وهي اللي هتوريها لأي حد عايز يشغّلك. أول 4 عملتهم في المراحل فوق، ولوحة المهام فيهم بتكبر معاك لحد ما تبقى أونلاين. والخامس هو اللي بيقفل الخطة.

  1. Landing Page

    HTML و CSS

    صفحة منتج شغالة على الموبايل والكمبيوتر. هنا بتتعلم تنقل تصميم بالظبط.

  2. تطبيق طقس

    JavaScript و fetch و API

    أول مرة تجيب بيانات من سيرفر حد تاني، وتتعامل مع التحميل والـ error.

  3. لوحة مهام

    React

    شاشة من components صغيرة، والـ state في مكانه الصح.

  4. لوحة مهام بسيرفر وداتا بيز

    React و Node.js و PostgreSQL

    نفس اللوحة، بس بمستخدمين، وبيانات محفوظة في داتا بيز، وسيرفر انت كاتبه، وكلها أونلاين.

  5. مشروع الـ portfolio: مشروع كامل أونلاين

    React و Node.js و PostgreSQL و Deployment

    مثلًا موقع حجز مواعيد لعيادة أو صالون: صفحة حجز للزباين، ولوحة أدمن بتشوف الحجوزات، ومينفعش اتنين يحجزوا نفس المعاد. صغير، بس كامل ومرفوع وأي حد يقدر يستخدمه. حط اللينك ولينك الكود في الـ CV بتاعك.

مصادر مجانية

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

كورسات من الأول للآخر

HTML و CSS و JavaScript

React

Node.js و Express

PostgreSQL

Deployment

أكتر الأخطاء اللي بشوفها

  • إنك تجمع أدوات كتير من غير ما تسلّم مشروع واحد كامل. الـ Full Stack الحقيقي في رأيي مش اللي عارف أدوات كتير، ده اللي سلّم مشروع كامل شغال، حتى لو صغير. مشروع واحد مرفوع وأي حد يقدر يستخدمه، أحسن من 10 كورسات خلصتهم.
  • إنك تفتكر Full Stack يعني تعرف كل حاجة. مش محتاج 5 لغات و3 frameworks. JavaScript واحدة بتكتب بيها الناحيتين، وداتا بيز واحدة، وكفاية جدًا في الأول.
  • إنك تبدأ بـ React أو Node.js قبل ما تبقى مرتاح في JavaScript. الاتنين JavaScript في الآخر. لو هي ضعيفة، هتحس إن كل حاجة بعدها صعبة ومش مفهومة.
  • إنك تأجل الـ Deployment لآخر المشروع. أول مرة ترفع فيها هيطلعلك مشاكل مكنتش شايفها على جهازك. ارفع بدري، وارفع كتير.
  • إنك تنسخ كود من AI أو tutorial من غير ما تفهمه. وانت لسه بتتعلم، خلي الـ AI يشرحلك، مش يكتب بدالك. ده في السيرفر أخطر، لأن الكود اللي مش فاهمه ممكن يبقى ثغرة.

بعد كده

لما تخلص الخطة دي وتعمل مشروع الـ portfolio، دي الخطوات اللي بعدها:

  • TypeScript: هي JavaScript بس بأنواع (types)، فبتمسك أخطاء كتير قبل ما تشغّل الكود، في الشاشة وفي السيرفر.
  • Next.js: framework مبني على React، بيخليك تكتب الشاشات وجزء من السيرفر في مشروع واحد.
  • Testing و Docker: تكتب كود بيتأكد إن مشروعك شغال، و Docker بيخلي المشروع يشتغل بنفس الشكل على جهازك وعلى السيرفر.

احفظ الصفحة دي، وارجعلها كل ما تخلص حاجة وعلّم عليها. ولو وقفت في مرحلة ومش فاهم، ارجع للي قبلها، غالبًا المشكلة هناك.

لديك مشروع يحتاج من يبنيه؟

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

ابدأ مشروعكاختر الخدمة المناسبة