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

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

خطة تعلم Frontend من الصفر: من HTML لحد React

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

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

لو هتبدأ Frontend، متبدأش بـ React.

الـ Frontend هو كل حاجة بتشوفها وبتدوس عليها في أي موقع: الزراير، والقوايم، والصور، والفورم اللي بتكتب فيها. وعلشان تتعلمه صح فيه ترتيب: HTML، وبعدها CSS، وبعدها JavaScript، ومعاهم الـ Responsive، وبعدين Git، وفي الآخر React.

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

قبل ما تبدأ

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

المرحلة 1 من 6

HTMLهيكل الصفحة

المدة: أسبوع لـ أسبوعين

HTML هي هيكل الصفحة، زي الطوب في البيت. هي اللي بتقول للمتصفح: ده عنوان، ودي فقرة، ودي صورة، وده زرار.

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

هتتعلم إيه

0 من 9

اعمل بإيدك

صفحة CV ليك. صفحة واحدة فيها اسمك، وصورة، ونبذة صغيرة عنك، والمهارات اللي بتتعلمها في قايمة، ولينكات لحساباتك، وفورم تواصل (لسه مش هيبعت حاجة). HTML بس، من غير ولا سطر CSS.

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

  • تقدر تكتب صفحة كاملة من ملف فاضي من غير ما تنسخ من حد
  • بتختار الـ tag على حسب معناه، مش على حسب شكله
  • كل صورة عندك ليها alt، وكل input ليه label

المرحلة 2 من 6

CSSالدهان والديكور

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

لو HTML هي الطوب، فـ CSS هي الدهان والديكور: الألوان، والخطوط، والمسافات، ومكان كل حاجة في الصفحة.

ناس كتير بتستسهل CSS، وبعدين تقف ساعات قدام layout بسيط. ركّز على إزاي العناصر بتترص جنب بعض وتحت بعض، مش على الألوان بس.

هتتعلم إيه

0 من 10

اعمل بإيدك

Landing Page لمنتج أو كورس. فيها header فيه لوجو ولينكات، وجزء أول فيه عنوان كبير وزرار، و3 كروت مميزات جنب بعض، وآراء ناس، و footer. وأحسن تمرين إنك تنقل تصميم جاهز بالظبط، زي التصميمات المجانية على Frontend Mentor.

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

  • تقدر تعمل layout فيه header و sidebar ومحتوى بـ Flexbox أو Grid من غير ما تتلخبط
  • لما حاجة تبان غلط، بتفتح DevTools وتعرف السبب، بدل ما تجرب أي حاجة لحد ما تظبط
  • تقدر تحوّل صورة تصميم بسيط لصفحة شبهها

المرحلة 3 من 6

JavaScriptالصفحة ترد عليك

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

JavaScript هي اللي بتخلي الصفحة ترد عليك لما تدوس على زرار: تفتح قايمة، أو تضيف حاجة للسلة، أو تطلعلك رسالة لو كتبت حاجة غلط في الفورم.

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

وبعد مشروع المرحلة، اعمل مشروعين صغيرين كمان بـ JavaScript لوحدها، زي تطبيق الطقس اللي في سلم المشاريع تحت، أو آلة حاسبة، أو لعبة أسئلة.

هتتعلم إيه

0 من 12

اعمل بإيدك

To-Do List. تضيف مهمة، وتعلّم إنها خلصت، وتمسحها، وتفلتر بين الكل واللي خلص واللي لسه. والمهام تفضل موجودة بعد الـ refresh بـ localStorage. وكل ده بـ JavaScript بس، من غير أي مكتبة.

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

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

المرحلة 4 من 6

Responsiveمظبوط على الموبايل والكمبيوتر

المدة: أسبوع لـ أسبوعين تركيز

الـ Responsive معناه إن الموقع يبان مظبوط على الموبايل والكمبيوتر وأي شاشة بينهم. ودي مش مرحلة بتستناها لحد ما تخلص اللي قبلها: بتتعلمها مع HTML و CSS و JavaScript، من أول صفحة تعملها.

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

هتتعلم إيه

0 من 8

اعمل بإيدك

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

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

  • مفيش scroll بالعرض في صفحتك على أي حجم شاشة
  • بتبدأ أي صفحة جديدة من الموبايل من غير ما حد يفكرك

المرحلة 5 من 6

Gitكل نسخة من الكود محفوظة

المدة: أسبوع، وبعدها كل يوم

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

مش لازم تستنى المرحلة دي علشان تبدأه. لو حبيت تستخدمه من أول مشروع، يبقى أحسن.

هتتعلم إيه

0 من 8

اعمل بإيدك

كل مشاريعك على GitHub. ارفع كل مشروع عملته لحد دلوقتي في repository لوحده، ومعاه ملف README بيقول المشروع بيعمل إيه. وانشر صفحة الـ Landing Page على GitHub Pages، علشان يبقى ليها لينك تبعته لأي حد.

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

  • بتعمل commit بعد كل خطوة شغالة من غير ما تفكر
  • لو بوّظت حاجة، بتعرف ترجع لآخر نسخة سليمة
  • كل مشاريعك على GitHub، وواحد منهم على الأقل ليه لينك شغال

المرحلة 6 من 6

Reactالصفحة من قطع صغيرة

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

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

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

هتتعلم إيه

0 من 10

اعمل بإيدك

اعمل الـ To-Do List تاني بـ React. وبعدها قارن الكود بالنسخة اللي عملتها بـ JavaScript لوحدها. ساعتها هتفهم React بتحل إيه بالظبط.

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

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

سلم المشاريع

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

  1. صفحة CV

    HTML

    صفحة واحدة عنك، من مرحلة HTML. أول حاجة تشوفها بتتبني بإيدك.

  2. Landing Page

    HTML و CSS و Responsive

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

  3. To-Do List

    JavaScript و DOM و localStorage

    أول مشروع بيرد عليك: تضيف وتمسح وتفلتر، والبيانات بتفضل موجودة بعد الـ refresh.

  4. تطبيق طقس

    JavaScript و fetch و API

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

  5. مشروع الـ portfolio بـ React

    React و API و GitHub

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

مصادر مجانية

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

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

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

CSS و Responsive

JavaScript

Git

React

تصميمات تتمرن عليها

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

  • إنك تجري على React قبل ما تعمل كذا مشروع صغير بـ JavaScript لوحدها. دي أكتر غلطة بشوفها. React مبنية على JavaScript، فلو JavaScript عندك ضعيفة هتحس إن React صعبة ومش مفهومة، وهتنسخ كود من غير ما تعرف بيعمل إيه. اعمل 3 مشاريع صغيرة بإيدك الأول، وساعتها React هتبان سهلة.
  • إنك تتفرج على كورسات ورا بعض من غير ما تكتب كود. وانت بتتفرج بتحس إنك فاهم، وأول ما تقعد قدام ملف فاضي متعرفش تبدأ. بعد كل درس، اقفل الفيديو واكتب اللي اتعلمته بإيدك.
  • إنك تنسخ كود من غير ما تفهمه، سواء من كورس أو من AI. وانت لسه بتتعلم الأساس، خلي الـ AI يشرحلك، مش يكتب بدالك.
  • إنك تدخل على Bootstrap أو Tailwind قبل ما تفهم CSS. نفس غلطة React بالظبط: الأداة بتسهّل اللي انت فاهمه، مش بتفهّمك بدالك.
  • إنك تستنى لما تحس إنك جاهز علشان تعمل مشروع. الإحساس ده مش هييجي لوحده. ابدأ بمشروع صغير من أول أسبوع، حتى لو طلع وحش.

بعد كده

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

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

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

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

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

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