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

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

في نهاية البرنامج، المشاركين هيقدروا:

• يبنوا هيكل صفحة ويب صحيح ومنظم باستخدام HTML.
• ينسقوا ويتحكموا في تصميم الصفحة بفعالية باستخدام CSS.
• يضيفوا تفاعلية للصفحة بمهارات JavaScript الأساسية.
• يبنوا صفحات متجاوبة تشتغل على مختلف الأجهزة والشاشات.
• يكملوا بثقة لتقنيات ويب أكتر تقدمًا بعد كده.

الدورة دي لمين؟

• المبتدئين اللي عايزين يدخلوا مجال تطوير الويب.
• موظفي التسويق الرقمي والمحتوى اللي محتاجين يفهموا تقنيات الويب.
• موظفي تقنية المعلومات والدعم الفني جوه المؤسسات.
• رواد الأعمال والمستقلين اللي عايزين يبنوا مواقعهم بنفسهم.

المحور الأول: خريطة عالم تطوير الويب

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

المحور الثاني: تجهيز أدوات الشغل

• محررات النصوص الشائعة زي Visual Studio Code وSublime.
• تنظيم الملفات والمجلدات لمشروع الموقع.
• فتح الصفحات محليًا وتجربتها في المتصفح.

المحور الثالث: بناء المحتوى وإثراؤه بلغة HTML

• الوسوم الأساسية: <html>, <head>, <body>، والعناوين والفقرات والروابط.
• القوائم والنصوص المنسقة.
• إدراج الصور وضبط خصائصها.
• بناء الجداول لتنظيم البيانات، والنماذج بحقولها المختلفة.

المحور الرابع: تنظيم الصفحة بالشكل الصح

• تقسيم الصفحة لأقسام منطقية ومنظمة.
• استخدام العناصر الدلالية زي <header>, <nav>, <main>.
• إنشاء روابط داخلية وخارجية والربط بين صفحات متعددة.
• استخدام المراسي (Anchors) للتنقل جوه نفس الصفحة.

المحور الخامس: أساسيات التنسيق بـCSS

• التنسيق الداخلي والخارجي والمضمن، وإزاي تربط HTML بـCSS.
• أفضل الممارسات في تنظيم ملفات CSS.
• الألوان والخلفيات والخطوط وتنسيق النصوص.
• التحكم في الهوامش والمسافات (Margin وPadding).

المحور السادس: تصميم التخطيطات والقوائم والتنقل

• استخدام Display وPosition، وفهم نموذج الصندوق (Box Model).
• الشبكات (Grid) والمحاذاة.
• تنسيق القوائم الأفقية والعمودية لتبقى جذابة بصريًا.
• إضافة تأثيرات تفاعلية بسيطة على القوائم.

المحور السابع: المحددات والتجاوب مع الشاشات

• المحددات الأساسية والمركبة والمخصصة.
• الوراثة والأولوية (Specificity) في CSS.
• بناء تخطيطات مرنة بـFlexbox وتصميم واجهات متجاوبة.
• استخدام Media Queries للتكيف مع أحجام الشاشات المختلفة.

المحور الثامن: التعرف على JavaScript

• الفرق بين JavaScript وHTML وCSS، ومكانها جوه الصفحة.
• كتابة أول كود بسيط.
• أنواع البيانات الأساسية والتصريحات (var, let, const).
• العمليات الحسابية والمنطقية.

المحور التاسع: المنطق البرمجي والتفاعلية

• استخدام if وelse لاتخاذ القرارات.
• التكرار باستخدام for وwhile.
• التعامل مع أحداث النقر والتحويم والتحميل، وربطها بالعناصر.
• بناء تفاعل مباشر مع المستخدم.

المحور العاشر: التعامل مع DOM والنماذج

• الوصول للعناصر باستخدام document.getElementById.
• تغيير النصوص والخصائص ديناميكيًا وإضافة عناصر جديدة للصفحة.
• التقاط بيانات المستخدم من النماذج والتحقق منها.
• عرض تنبيهات ورسائل فورية للمستخدم.

المحور الحادي عشر: دمج كل حاجة مع بعض

• تصميم واجهة بـHTML وCSS، وتفعيل التفاعلية عبر JavaScript.
• تنظيم ملفات المشروع باحترافية.
• تسمية العناصر بشكل صح وتقليل التكرار وتحسين الأداء.
• كتابة تعليقات واضحة في الكود.

المحور الثاني عشر: مشروع تطبيقي وخطوات لبعد الدورة

• بناء صفحة تسجيل دخول أو نموذج تواصل، مع وظائف التحقق والإرسال.
• تجهيز المشروع للعرض.
• مقدمة عن أطر عمل زي React وVue.
• أساسيات التطوير الخلفي (Back-end) والربط مع السيرفرات.
• إنشاء حساب GitHub ونشر مشاريع بسيطة.