جميع المسارات

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

ابنِ واجهات سريعة ومتاحة للجميع، من HTML وCSS إلى TypeScript وReact.

الإنترنت

ماذا يحدث بين كتابة عنوان الموقع وظهور الصفحة؟

  1. كيف يعمل الإنترنت — العملاء والخوادم وعناوين IP، وكيف تنتقل حزم البيانات بينها.
  2. HTTP وHTTPS — الطلبات والاستجابات وطرق الطلب ورموز الحالة والترويسات وتشفير TLS.
  3. DNS وأسماء النطاقات — كيف يُحوَّل اسم النطاق إلى عنوان، وما السجلات التي تتحكم بذلك.
  4. استضافة المواقع — أين تعيش المواقع: الاستضافة الثابتة والخوادم والمنصات.
  5. كيف تعمل المتصفحات — تحليل الصفحة وتخطيطها ورسمها ومراحل عرض المحتوى.

HTML

بنية صفحات الويب ومعنى عناصرها.

  1. أساسيات HTML — بنية المستند والعناصر والسمات والروابط والصور والقوائم.
  2. HTML الدلالية — اختر العناصر وفق معناها: العناوين ومناطق الصفحة والمقالات وقوائم التنقل وغيرها.
  3. النماذج والتحقق من الإدخال — حقول الإدخال وتسمياتها والتحقق المدمج وإرسال البيانات.
  4. إمكانية الوصول — ابنِ صفحات تعمل بلوحة المفاتيح والتقنيات المساعدة.

CSS

التنسيق والتخطيط والتصميم المتجاوب.

  1. أساسيات CSS — المحددات والتتالي والأولوية ونموذج الصندوق ووحدات القياس.
  2. Flexbox — تخطيط أحادي البعد لترتيب العناصر في صفوف أو أعمدة.
  3. CSS Grid — تخطيط ثنائي الأبعاد باستخدام المسارات والمناطق والمحاذاة.
  4. التصميم المتجاوب — استعلامات الوسائط والأحجام المرنة واستعلامات الحاويات.
  5. الخصائص المخصصة — رموز التصميم وتخصيص المظهر باستخدام متغيرات CSS.

JavaScript

لغة الويب.

  1. أساسيات اللغة — المتغيرات والأنواع والدوال والنطاق والإغلاقات والتحكم في تدفق التنفيذ.
  2. DOM والأحداث — الوصول إلى عناصر الصفحة وتعديلها والاستجابة لتفاعلاتها.
  3. Promises وasync/await — إدارة العمليات غير المتزامنة والأخطاء وحلقة الأحداث.
  4. الوحدات البرمجية — قسّم الشيفرة إلى ملفات باستخدام import وexport.
  5. جلب البيانات — استدعِ واجهات API باستخدام fetch، وتعامل مع JSON وحالات الفشل.

TypeScript

أضف أنواعًا ثابتة إلى JavaScript.

  1. الأنواع والواجهات — الأنواع الأساسية والكائنات والاتحادات ووصف بنية البيانات.
  2. تضييق الأنواع — حدّد أنواع الاتحاد بدقة باستخدام حراس الأنواع والاتحادات المميّزة.
  3. الأنواع العامة — اكتب دوال وأنواعًا قابلة لإعادة الاستخدام مع الحفاظ على سلامة الأنواع.
  4. إعداد المشروع — خيارات tsconfig والوضع الصارم.

Git وGitHub

تتبّع التغييرات وتعاون مع مطورين آخرين.

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

React

ابنِ الواجهات من مكونات.

  1. المكونات وJSX — ركّب الواجهة من دوال صغيرة تعيد عناصر العرض.
  2. الحالة والخصائص — مرّر البيانات إلى المكونات الفرعية، واحتفظ بالحالة المحلية قرب موضع استخدامها.
  3. التأثيرات — زامن الواجهة مع الأنظمة الخارجية، وتعلّم متى لا تحتاج إلى تأثير.
  4. التوجيه — اربط عناوين URL بالشاشات باستخدام React Router.
  5. حالة الخادم — اجلب البيانات البعيدة وخزّنها مؤقتًا وحدّثها باستخدام TanStack Query.

الاختبارات

أطلق التغييرات بثقة.

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

قارن المسارات