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

تطوير الواجهات الأمامية

من صفحة ثابتة إلى واجهة متجاوبة وسهلة الاستخدام.

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

خارطة طريق تطوير الواجهات (Front-End): عناصر الصفحة في مكانها وعنصر يُصحَّح

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

لمن
يناسب من يحب بناء واجهات مرئية وحل مشكلات الاستخدام. لا يحتاج شهادة جامعية للبدء بالتعلم، لكن يحتاج إلى حاسوب وصبر على التصحيح.
قبل أن تبدأ
حاسوب، وأن تنفّذ التمرين لا أن تكتفي بمشاهدته.
الوقت
من ثلاثة إلى ثمانية أشهر إذا خصصت لها نحو 5 إلى 7 ساعات في الأسبوع، حسب الخبرة والمشروع.
ما لا تعد به الصفحة
المشروع لا يثبت خبرة فريق أو خبرة إنتاجية واسعة. بعض الوظائف تشترط إطاراً معيناً أو خبرة عملية.

ماذا تتعلم معاً، وماذا تؤجّل

  • يمكن تعلم Git مع JavaScript. يمكن تأجيل أطر العمل مثل React حتى تفهم HTML وCSS وJavaScript. لا تتعلم عدة أطر معاً.

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

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

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

ماذا تتعلم في الوقت نفسه، وماذا تؤجل: تتعلم حفظ النسخ (Git) مع جافاسكربت. أدوات مثل React تأتي بعد أن تفهم HTML وCSS وJavaScript. لا تتعلم عدة أدوات معاً.

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

https://developer.mozilla.org/en-US/docs/Learn_web_development — تعلم الويب من موزيلا: الهيكل، والشكل، والسلوك.
https://web.dev/learn/ — دروس ويب من Google: أداء وتجربة استخدام.
https://javascript.info/ — شرح JavaScript (سلوك الصفحة) مفتوح.
https://git-scm.com/doc — وثائق Git (حفظ النسخ).

الخارطة

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

أساسيات الويب
أساسيات الويببداية الخارطة
CSS والتصميم المتجاوب
CSS (شكل الصفحة) والتصميم المتجاوبيتطلب: أساسيات الويب
JavaScript
معاً
JavaScript (سلوك الصفحة)يتطلب: CSS (شكل الصفحة) والتصميم المتجاوب
Git (حفظ النسخ) وأدوات المطوريتطلب: JavaScript (سلوك الصفحة)
API وإدارة الحالة
API (واجهة برمجية) وإدارة الحالةيتطلب: Git (حفظ النسخ) وأدوات المطور
إتاحة وأداء واختبارات
إتاحة وأداء واختباراتيتطلب: API (واجهة برمجية) وإدارة الحالة
المشروع
مشروع منشوريتطلب: إتاحة وأداء واختبارات

أساسيات الويب

أساسيات الويب

الهدف

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

متى تنتقل

يمكن التنقل بلوحة المفاتيح وفهم ترتيب العناوين دون CSS (شكل الصفحة).

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

رتّب عناصر الصفحة أولاً، ثم أضف الألوان.

ماذا تتعلم

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

ماذا تفعل

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

تمرين

كيف تعرف أن الخطوة تمت؟

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

CSS والتصميم المتجاوب

CSS (شكل الصفحة) والتصميم المتجاوب

الهدف

حوّل الصفحة إلى تصميم يعمل على الهاتف والحاسوب.

متى تنتقل

يفحص غيرك الصفحة على عرضين على الأقل ولا يوجد تمرير أفقي غير مقصود.

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

إذا لم تكن الصفحة مفهومة بلا ألوان، فالألوان لن تصلحها.

ماذا تتعلم

  • كل عنصر صندوق: محتوى، ثم فراغ داخله، ثم حد، ثم فراغ خارجه.
  • الصف المرن (Flexbox) يرتب سطراً. الشبكة (Grid) ترتب صفاً وعموداً.
  • نقطة التوقف تغيّر الترتيب حين تضيق الشاشة. النص لا يخرج عن العرض.
  • التباين يعني أن النص يُقرأ على خلفيته من غير تخمين.

ماذا تفعل

حوّل الصفحة إلى تصميم يعمل على الهاتف والحاسوب.

تمرين

كيف تعرف أن الخطوة تمت؟

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

JavaScript

JavaScript (سلوك الصفحة)

الهدف

أنشئ قائمة مهام محلية مع إضافة وحذف وتصفية.

متى تنتقل

تعمل الحالات الأساسية وتظهر رسائل مفهومة للأخطاء.

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

لا يكفي أن تلصق شيفرة تعمل مرة. افهم ماذا تفعل.

ماذا تتعلم

  • المتغير يحفظ قيمة. الدالة تعيد العمل نفسه بلا نسخ.
  • الصفحة شجرة عناصر (DOM). الزر حدث يغيّر الشجرة، لا صورة مرسومة.
  • الحالة الفارغة جزء من العمل: قائمة بلا بنود، وحقل فارغ، ونص غير صالح.
  • رسالة الخطأ تقول ما الذي ينقص. «حصل خطأ» لا تكفي.

ماذا تفعل

أنشئ قائمة مهام محلية مع إضافة وحذف وتصفية.

تمرين

كيف تعرف أن الخطوة تمت؟

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

Git (حفظ النسخ) وأدوات المطور

الهدف

أنشئ مستودعاً مع سجل تغييرات واضح وأصلح خطأ موثقاً.

متى تنتقل

يستطيع غيرك تشغيل النسخة واتباع سجل التغييرات.

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

احفظ ماذا تغيّر ولماذا، حتى يستطيع غيرك أن يتابع عملك.

ماذا تتعلم

  • Git (حفظ النسخ) يسجّل ماذا تغيّر ولماذا. نسخ المجلد يدوياً يضيع الفرق.
  • كل حفظ (commit) جملة واحدة صادقة، لا «تعديلات» بلا معنى.
  • أدوات المطوّر في المتصفح تُظهر السطر الذي فشل، لا تخميناً.
  • كلمة السر ومفتاح الربط لا يدخلان المستودع.

ماذا تفعل

أنشئ مستودعاً مع سجل تغييرات واضح وأصلح خطأ موثقاً.

تمرين

كيف تعرف أن الخطوة تمت؟

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

API وإدارة الحالة

API (واجهة برمجية) وإدارة الحالة

الهدف

اعرض بيانات عامة من API (واجهة برمجية) مع حالات التحميل والخطأ.

متى تنتقل

لا تنهار الصفحة عند فشل الطلب وتوضح للمستخدم ما حدث.

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

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

ماذا تتعلم

  • الواجهة تطلب بيانات من واجهة برمجية (API) ثم تنتظر. الانتظار حالة ظاهرة.
  • إن فشل الطلب تظهر رسالة. إن رجع فراغ تظهر رسالة أخرى. الصفحة لا تصير بيضاء فارغة.
  • JSON (نص بيانات) يُقرأ حقلاً حقلاً. لا يُلصق كله كما وصل.
  • لا تعرض إلا ما تحتاجه الصفحة.

ماذا تفعل

اعرض بيانات عامة من API (واجهة برمجية) مع حالات التحميل والخطأ.

تمرين

كيف تعرف أن الخطوة تمت؟

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

إتاحة وأداء واختبارات

إتاحة وأداء واختبارات

الهدف

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

متى تنتقل

تقرير قصير يذكر الاختبارات والعيوب المتبقية.

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

صفحة جميلة قد لا تُستخدم بلوحة المفاتيح، أو لا تُقرأ.

ماذا تتعلم

  • ما يُنقر بالماوس يُبلغ بلوحة المفاتيح أيضاً.
  • صورة تحمل معلومة لها نص بديل. الزخرفة لا تحتاج نصاً.
  • الوصف الإضافي (ARIA) يُستخدم حين لا يكفي العنصر وحده. لا يغني عن زر حقيقي.
  • الأداء هنا: لا صورة ضخمة تؤخر القراءة. ثلاثة عيوب تُكتب: أين، وماذا حدث، وماذا أُصلح.

ماذا تفعل

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

تمرين

كيف تعرف أن الخطوة تمت؟

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

المشروع

مشروع منشور

الهدف

ابنِ موقع خدمة أو معرض أعمال دون نسخ مشروع تعليمي حرفياً.

متى تنتقل

رابط العرض يعمل، والكود مفهوم، والتعليمات كافية، ولا توجد أسرار في المستودع.

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

حين تجمع ما تعلمته في موقع واحد، يتبين أنك تستطيع إنهاء عمل.

ماذا تتعلم

  • ثلاث صفحات تُفتح من رابط واحد، على الهاتف وعلى شاشة عريضة.
  • ملف الشرح يقول كيف تُفتح الصفحة، وماذا تفعل، وما الذي لم يُبنَ.
  • المحتوى من عندك. نسخ مشروع تعليمي كما هو لا يُعدّ عملاً منك.
  • المستودع بلا أسرار، والرابط يعمل عند شخص آخر.

ماذا تفعل

ابنِ موقع خدمة أو معرض أعمال دون نسخ مشروع تعليمي حرفياً.

تمرين

كيف تعرف أن الخطوة تمت؟

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

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

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

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

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

صورة الخارطة

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

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

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

أسئلة شائعة

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

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

هل هذه دورة؟

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

لمن كُتبت؟

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

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

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

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

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

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

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