ابتدِي من فين؟ خريطة تعلّم تطوير الويب في 2026

أول سؤال بيسأله أي حد داخل المجال: أبدأ من فين؟ والمشكلة مش في نقص المصادر — المشكلة إن في آلاف المصادر، وكل واحد بيقولك «أنا الأهم». فالنتيجة إن الواحد بيقضي شهور بيتفرّج ويقارن، ومش بيكتب سطر كود واحد.

المقال ده مش قائمة كورسات. ده ترتيب بسيط، بالأسباب، ومكتوب من ناحية اللي بيبدأ لوحده ومش لاقي حد يوجّهه.

القاعدة الأولى: مش محتاج تختار المسار الصح

مفيش مسار «صح». في مسار تكمله لآخره. اللي بيوقف الناس مش إنهم اختاروا غلط — إنهم اختاروا عشر مرات، وكل مرة يبدأوا من الأول. أول أسبوعين في كل مسار بيتقضّوا في نفس الحاجات (أساسيات الويب)، فالفترة دي مش خسارة أصلًا.

القرار اللي بيوقف الناس فعلاً هو قرار «الأداة»: React ولا Vue؟ Tailwind ولا CSS عادي؟ والجواب: القرار ده مش مستعجل، وبيتاخد لوحده بعد ما تعرف تعمل حاجة بإيدك.

المرحلة الأولى: أساسيات تبان قدام عينك (٢–٣ أسابيع)

الهدف هنا مش إنك تبقى «فاهم HTML كويس». الهدف إنك تقدر تحوّل صورة في دماغك لصفحة موجودة على الشاشة.

• HTML: العناصر الأساسية، الترتيب المنطقي للمحتوى، الفورمز. مش محتاج تحفظ كل وسم — محتاج تعرف تفكر: العنوان فين، المحتوى فين، الزرار فين.
• CSS: الصندوق (margin / padding / border)، العرض، الـ flexbox، وأخيرًا الـ grid. دول لوحدهم بيعملوا ٩٠٪ من أي تصميم.
• الموبايل: من أول يوم، شوف صفحتك على شاشة صغيرة. مش حاجة تتعلّمها في الآخر.

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

المرحلة الثانية: JavaScript — وهنا الوقت الحقيقي (٤–٦ أسابيع)

هنا بيقع أغلب الناس، ومش لأن اللغة صعبة، لكن لأنهم بيحاولوا يتعلموها كأنها امتحان. متحاولش تحفظ. حاول تعمل.

اللي محتاجه بالترتيب:

1. المتغيرات والدوال والشروط — الأساس اللي هتفضل تستخدمه لآخر يوم.
2. المصفوفات والكائنات: إزاي تشيل بيانات وتمر عليها وتفلترها.
3. الـ DOM: تختار عنصر، تغيّر محتواه، تسمع لحدث زي ضغطة زرار.
4. الأحداث والـ state: إزاي الصفحة بتتغيّر لما المستخدم يعمل حاجة.
5. الطلبات (fetch): تجيب بيانات من مكان تاني وتعرضها.

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

في حاجات كتير بتتقال إنها «لازم» في المرحلة دي وهي مش كده: الـ classes المتقدمة، الـ closures الغريبة، أنماط التصميم. كل دي هتجيلك طبيعي بعدين. اللي محتاجه دلوقتي: تكتب كود، يشتغل، وتفهم ليه اشتغل.

المرحلة الثالثة: مشروع حقيقي — وده اللي بيفرّق (مفتوحة)

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

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

حاجات مش محتاجها دلوقتي

ودي أكتر حاجة بتوفّر وقت، فخدها زي ما هي:

• إطارات العمل (Frameworks): مش محتاجها قبل ما تعمل حاجة واحدة كاملة بـ JavaScript عادي.
• «التصميم» كتخصص: محتاج تعرف ترتّب وتوضّح، مش تعمل هوية بصرية.
• كورسات بآلاف: المعلومة موجودة مجانًا. اللي بتشتريه فلوس هو الالتزام والترتيب، ولو مش لاقيهم، الكورس مش هيعملهم.
• جهاز قوي: أي جهاز يفتح متصفح كفاية في المرحلة دي.

إزاي تعرف إنك اتقدّمت فعلاً؟

مش بعدد الفيديوهات اللي خلّصتها. العلامات الحقيقية تلاتة:

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

وأهم حاجة: انشر اللي بتعمله

حتى لو لسه مش مكتمل. الرابط اللي بيشتغل أحسن من عشر ملفات على الجهاز.

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

متحاولش تجهّز «نسخة نهائية» قبل ما تنشر. النسخة النهائية دي مش بتيجي أبدًا، واللينك اللي اتنشر بيفضل يتحسّن، والملف اللي في الجهاز بيفضل زي ما هو.

خلاصة في ٤ أسطر

• اختار مسار واحد وكمّله — مش مهم أنهي واحد.
• HTML و CSS أسبوعين بتطبيق، مش مشاهدة.
• JavaScript بالتمرين على مشروع صغير، مش بالحفظ.
• انشر، اسأل، صلّح، وكرّر.