الأهداف العامة للدورة
- تمكين المشاركين من بناء صفحات ويب احترافية باستخدام HTML وCSS.
- تعريف المشاركين بمفاهيم البرمجة الأساسية بلغة JavaScript لتطوير واجهات تفاعلية.
- تطوير مهارات المشاركين في تصميم وتنسيق المحتوى باستخدام CSS وتقنيات Flexbox وGrid.
- إكساب المشاركين القدرة على التعامل مع أحداث المستخدم وإنشاء عناصر ديناميكية بفعالية.
- تدريب المشاركين على بناء تطبيق ويب بسيط متكامل يجمع بين اللغات الثلاث.
- تمهيد الطريق لتعلم أطر العمل الحديثة مثل React أو Vue بعد التمكن من الأساسيات.
محاور البرنامج التدريبي
اليوم الأول: أساسيات HTML – الهيكل والمحتوى
- مقدمة في تطوير الويب: الفرق بين Frontend وBackend.
- هيكل صفحة HTML الأساسية (doctype, head, body).
- العناصر الرئيسية: العناوين، الفقرات، القوائم، الروابط، الصور.
- النماذج (Forms): مدخلات النص، الأزرار، مربعات التحديد.
- السمات (Attributes) واستخدامها في تحسين المحتوى.
اليوم الثاني: تنسيق وتصميم الصفحات باستخدام CSS
- مقدمة في CSS: التضمين الداخلي والخارجي.
- أنواع الانتقاء (Selectors) وخصائص النصوص والألوان والخلفيات.
- تنسيقات الصناديق (Box Model): الحواف (Margin)، الحدود (Border)، الحشو (Padding).
- تخطيط الصفحات باستخدام Flexbox وCSS Grid.
- استجابة التصميم (Responsive Design) باستخدام Media Queries.
اليوم الثالث: أساسيات JavaScript – التفاعل والمنطق
- مقدمة إلى JavaScript ودورها في تطوير الواجهة.
- المتغيرات، الأنواع، العمليات، الشروط، الحلقات.
- التعامل مع الأحداث (Events) وربطها بالعناصر.
- التفاعل مع HTML عبر DOM (Document Object Model).
- بناء وظائف (Functions) وتكرار الاستخدام.
اليوم الرابع: تطوير واجهات تفاعلية باستخدام JavaScript
- تغيير محتوى الصفحة ديناميكياً (innerHTML، textContent).
- إضافة/إزالة عناصر من الصفحة برمجياً.
- التحقق من صحة النموذج باستخدام JavaScript.
- التحكم في الأنماط والتصميم عبر JavaScript (style, classList).
- مقدمة في التخزين المحلي (Local Storage) وطرق الاستخدام.
اليوم الخامس: مشروع عملي – بناء تطبيق ويب متكامل
- تخطيط وتصميم واجهة تطبيق بسيط (مثل: قائمة مهام – To-do List).
- إنشاء هيكل HTML وتصميم CSS مخصص.
- إضافة التفاعل الكامل باستخدام JavaScript (إضافة، حذف، تخزين البيانات).
- اختبار وتحسين الأداء والتصميم عبر الأجهزة المختلفة.
- مراجعة جماعية وتقييم المشروع الختامي.