انتقل إلى المحتوى
Miraat·dweb developer journey, reflected
FR

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

ابنِ واجهات حديثة، يسهل الوصول إليها وسريعة الاستجابة، تعمل فعلًا على أي جهاز.

24 مهارة 6 أشهر مبتدئ
يبدأ هذا المسار من أساسيات الويب — HTML وCSS وإمكانية الوصول — ويأخذك حتى بناء تطبيقات تفاعلية باستخدام React وإدارة الحالة وأدوات التطوير الحديثة.

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

المسارات المهنية المعتادة: مطوّر واجهة أمامية مبتدئ، مصمّم ويب يبرمج، عمل حر لمشاريع صغيرة.
أساسيات HTML · 25 min FOUNDATION · 25 MIN أساسيات HTML أساسيات CSS · 30 min FOUNDATION · 30 MIN أساسيات CSS التخطيط: Flexbox وGrid · 35 min FOUNDATION · 35 MIN التخطيط: Flexbox وGrid التصميم المتجاوب · 25 min FOUNDATION · 25 MIN التصميم المتجاوب HTML الدلالي · 20 min FOUNDATION · 20 MIN HTML الدلالي إمكانية الوصول للويب (a11y) · 30 min FOUNDATION · 30 MIN إمكانية الوصول للويب (a11y) الصيغة الأساسية لـJavaScript · 30 min CORE · 30 MIN الصيغة الأساسية لـJavaScript التعامل مع DOM · 25 min CORE · 25 MIN التعامل مع DOM البرمجة غير المتزامنة وPromises · 30 min CORE · 30 MIN البرمجة غير المتزامنة وProm… الوحدات والاستيراد في JavaScript · 20 min CORE · 20 MIN الوحدات والاستيراد في JavaS… الإغلاقات والنطاق في JavaScript · 25 min CORE · 25 MIN الإغلاقات والنطاق في JavaSc… fetch API وأساسيات REST · 25 min CORE · 25 MIN fetch API وأساسيات REST npm وyarn وpnpm · 20 min CORE · 20 MIN npm وyarn وpnpm Vite وأدوات البناء الحديثة · 25 min CORE · 25 MIN Vite وأدوات البناء الحديثة أساسيات Git وGitHub · 30 min FOUNDATION · 30 MIN أساسيات Git وGitHub أساسيات React · 40 min CORE · 40 MIN أساسيات React خطّافات React · 35 min ADVANCED · 35 MIN خطّافات React إدارة الحالة في React · 30 min ADVANCED · 30 MIN إدارة الحالة في React React Router · 25 min CORE · 25 MIN React Router أنماط تصميم المكوّنات · 30 min ADVANCED · 30 MIN أنماط تصميم المكوّنات أدوات المطوّرين في المتصفّح · 20 min CORE · 20 MIN أدوات المطوّرين في المتصفّح أساسيات أداء الويب · 30 min ADVANCED · 30 MIN أساسيات أداء الويب الاختبار باستخدام Vitest · 30 min ADVANCED · 30 MIN الاختبار باستخدام Vitest النماذج والتحقّق · 25 min CORE · 25 MIN النماذج والتحقّق

Core

7
الصيغة الأساسية لـJavaScript
المتغيّرات، الدوال، الشروط، الحلقات، المصفوفات، الكائنات. القاعدة لكلّ ما يأتي بعد.
30 دقيقة
8
التعامل مع DOM
قراءة الصفحة وتعديلها من JavaScript: querySelector وaddEventListener وclassList.
25 دقيقة
9
البرمجة غير المتزامنة وPromises
تشغيل أمور بالتوازي دون حظر، وانتظار النتائج بطريقة نظيفة.
30 دقيقة
10
الوحدات والاستيراد في JavaScript
تقسيم الشيفرة إلى ملفات تستورد فقط ما تحتاجه.
20 دقيقة
11
الإغلاقات والنطاق في JavaScript
افهم لماذا «تتذكّر» الدالّة المتغيّرات في موضع إنشائها، حتى بعد انتهاء السياق.
25 دقيقة
12
fetch API وأساسيات REST
التواصل مع خادم من المتصفّح: GET وPOST وJSON والأخطاء.
25 دقيقة
13
npm وyarn وpnpm
تثبيت حزم JavaScript وإدارتها، وملفات القفل، وإصدارات Semver.
20 دقيقة
14
Vite وأدوات البناء الحديثة
لماذا توجد خطوة بناء، وكيف يجعلها Vite فوريّة.
25 دقيقة
16
أساسيات React
المكوّنات وJSX وProps والتصيير. النموذج الذهني الأساسي.
40 دقيقة
19
React Router
صفحات متعدّدة في تطبيق React: المسارات، الروابط، التخطيطات، المعاملات.
25 دقيقة
21
أدوات المطوّرين في المتصفّح
فحص DOM، تنقيح JS، مراقبة الشبكة، قياس الأداء.
20 دقيقة
24
النماذج والتحقّق
التحقق المدمج في النماذج، قواعد مخصّصة، رسائل خطأ يسهل الوصول إليها.
25 دقيقة