معلومات لتعرف طريقك

تطوير الويب للمبتدئين

من صفحة فارغة إلى صفحة منشورة تستطيع شرح بنيتها.

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

خارطة طريق تطوير الويب: من صفحة فارغة إلى صفحة منشورة

انشر البطاقة على Pinterest

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

لم تبدأ بعد على هذا الجهاز. تقدّمك يبقى هنا، ويمكنك تنزيله في ملف.

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

الوقت يتراوح بين شهرين وأربعة لمن يتدرب بضع ساعات أسبوعياً. هذا نطاق، لا وعد.

من أين تبدأ؟

أجب عن الأسئلة لنقترح عليك من أين تبدأ.

هل تستطيع شرح ماذا يحدث حين يفتح المتصفح صفحة؟
هل بنيت صفحة عناوينها مرتبة وروابطها تعمل؟
هل تُقرأ الصفحة على هاتف بلا تمرير أفقي؟
هل الصفحة مفهومة حتى لو تعطلت الجافاسكربت؟

الخارطة

كل عمود مرحلة. ما تحته «معاً» تتعلمه في الوقت نفسه، وما تحته «بديل» طريق آخر. اضغط الخطوة ليظهر شرحها.

فهم الصفحة
كيف يطلب المتصفح صفحةبداية الخارطة
HTML (هيكل الصفحة) له معنىيتطلب: كيف يطلب المتصفح صفحة
الشكل والسلوك
CSS (شكل الصفحة) والشاشة الضيقةيتطلب: HTML (هيكل الصفحة) له معنى
سلوك صغير بجافاسكربتيتطلب: CSS (شكل الصفحة) والشاشة الضيقة
المخرج
الصفحة التعريفيةيتطلب: سلوك صغير بجافاسكربت
عند الحاجة
بديل
Git (حفظ النسخ) والنشراختياري بعد: الصفحة التعريفية · بديل عن إبقاء الصفحة على جهازك فقط، إن أردت رابطاً يفتحه غيرك.

فهم الصفحة

كيف يطلب المتصفح صفحة

الهدف

معرفة ماذا يحدث قبل كتابة وسم.

متى تنتقل

تشرح الرحلة بكلامك دون مصطلحات زائدة.

لماذا هذه الخطوة الآن

من يكتب كوداً بلا هذه الصورة يصلح العرض لا السبب.

ماذا تتعلم

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

ماذا تفعل

ارسم على ورقة رحلة فتح صفحة تعرفها.

تمرين

حدد ما يحدث قبل أن ترى الصفحة.

هذا تقديرك أنت، وليس شهادة.

HTML (هيكل الصفحة) له معنى

الهدف

بنية يفهمها المتصفح.

متى تنتقل

العناوين مرتبة، والروابط تعمل، والصورة المفيدة لها وصف.

لماذا هذه الخطوة الآن

الشكل يأتي لاحقاً. المعنى يُبنى أولاً.

ماذا تتعلم

  • عنوان واحد للصفحة.
  • عناوين متسلسلة.
  • روابط وصور بنص بديل.
  • زر لا يُصنع من مربع ملوّن.

ماذا تفعل

ابنِ صفحة نصية بلا تنسيق.

تمرين

حدد ما يجب أن يوجد في الصفحة قبل الشكل.

هذا تقديرك أنت، وليس شهادة.

الشكل والسلوك

CSS (شكل الصفحة) والشاشة الضيقة

الهدف

الصفحة تُقرأ على الهاتف.

متى تنتقل

لا تمرير أفقي، والنص لا يلتصق بالحافة.

لماذا هذه الخطوة الآن

أغلب الزيارات ليست من شاشة عريضة.

ماذا تتعلم

  • المسافة والخط.
  • العمود.
  • نقطة يضيق عندها التخطيط.
  • عدم إخفاء النص المهم.

ماذا تفعل

اجعل الصفحة السابقة مريحة على عرض ضيق.

تمرين

حدد ما الذي يكسر القراءة على الهاتف.

هذا تقديرك أنت، وليس شهادة.

سلوك صغير بجافاسكربت

الهدف

تغيير مفهوم بعد فعل الزائر.

متى تنتقل

الصفحة تبقى مفهومة لو تعطلت الجافاسكربت.

لماذا هذه الخطوة الآن

ليس كل موقع يحتاج إطار عمل. يحتاج استجابة مفهومة.

ماذا تتعلم

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

ماذا تفعل

أضف تفاعلاً واحداً يمكن استخدام الصفحة بدونه.

تعطلت الجافاسكربت. ماذا يجب أن يبقى؟

هذا سؤال لك أنت، وليس شهادة.

تمرين

حدد الصفحة المقبولة إن تعطلت الجافاسكربت.

هذا تقديرك أنت، وليس شهادة.

المخرج

الصفحة التعريفية

الهدف

مخرج يراه غيرك.

متى تنتقل

غريب يفهمها على الهاتف.

لماذا هذه الخطوة الآن

المهارة بلا صفحة لا تُراجع.

ماذا تتعلم

  • جمع البنية والشكل والسلوك في صفحة واحدة صادقة.

ماذا تفعل

أنجز مشروع الصفحة التعريفية.

تمرين

حدد الصفحة التي تصلح مخرجاً.

هذا تقديرك أنت، وليس شهادة.

عند الحاجة

Git (حفظ النسخ) والنشر

الهدف

نسخة يمكن الرجوع إليها وعنوان يمكن فتحه.

متى تنتقل

رابط يعمل، أو سبب مكتوب إن أخّرت النشر.

لماذا هذه الخطوة الآن

مفيدة، وليست شرطاً لفهم HTML.

ماذا تتعلم

  • حفظ نسخة.
  • نشر الصفحة على استضافة مجانية إن رغبت.
  • كتابة سطر عما تغيّر.

ماذا تفعل

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

ما الذي يثبته نشر الصفحة؟

هذا سؤال لك أنت، وليس شهادة.

تمرين

حدد ما يثبته النشر.

هذا تقديرك أنت، وليس شهادة.

رتّب التعلم على هذا الجهاز
مستواك الآن
الوقت الأسبوعي
خطوات أقول إنني أعرفها

إذا قلت إنك تعرف خطوة، نؤخرها في خطتك، والشرح يبقى.

احفظ مكانك أو شاركه

انسخ ما وصلت إليه أو تمرين الخطوة، ثم ارجع إلى الصفحة قبل أن تنتقل. الملف لمن يغيّر الجهاز.

صورة الخارطة

الصورة تعرض ترتيب المراحل ورابط الصفحة، وتُصنع على جهازك.

صفحات المهارات

المشروع

حُدّث في 2026-10-20

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

أسئلة شائعة

ما معنى خارطة الطريق؟

هي ترتيب التعلم. تقول لك من أين تبدأ، وماذا تتعلم أولاً، وماذا بعد ذلك. ليست قائمة دورات.

هل هذه دورة؟

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

لمن كُتبت؟

لمن يريد تعلم مهارة أو فهم مهنة، ولا يعرف من أين يبدأ.

كيف أستعملها؟

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

هل إتمامها يعني وظيفة؟

لا. الصفحة توضح ماذا تتعلم وكيف تتدرب. الوظيفة قرار من صاحب العمل، وليست وعداً من الصفحة.

لماذا أرى برنامجاً أحياناً؟

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