تطوير المواقع للمبتدئين
إتقان HTML و CSS و JavaScript و React من الصفر إلى الاحتراف
ما ستتعلمه في هذه الدورة
- أساسيات HTML الشاملة
- تنسيق وتخطيط CSS
- التصميم المتجاوب
- تخطيطات Flexbox و Grid
- استعلامات الوسائط للموبايل
- النماذج والتفاعل مع المستخدم
- أساسيات JavaScript والبرمجة
- قراءة ومعالجة بيانات JSON
- مقدمة في React وبناء المكونات
- تطوير تطبيقات تفاعلية حديثة
نظرة عامة على الدورة
هذه الدورة الشاملة مصممة للمبتدئين تماماً الذين يريدون تعلم تطوير المواقع من الصفر. ستتقن الأسس الأساسية للويب: HTML لبناء الهيكل و CSS للتنسيق والتصميم، ثم ستنتقل إلى JavaScript لإضافة التفاعل، وأخيراً React لبناء تطبيقات حديثة.
سواء كنت تتطلع إلى بدء مسيرة مهنية في تطوير المواقع، أو تحسين مهاراتك الحالية، أو ببساطة بناء مواقعك وتطبيقاتك الخاصة، فإن هذه الدورة توفر الأساس القوي والمسار الكامل الذي تحتاجه. بنهاية هذه الدورة، ستكون قادراً على إنشاء تطبيقات ويب تفاعلية ومتجاوبة باستخدام أحدث التقنيات.
لماذا تختار هذه الدورة؟
- منهج متدرج ومنطقي: من HTML/CSS الأساسية إلى React المتقدمة
- مشاريع عملية: تطبيق فوري لما تتعلمه مع مشاريع JavaScript و React
- تعلم التقنيات الحديثة: JSON، APIs، وأحدث ممارسات React
- دعم مستمر: إجابة على جميع أسئلتك في كل مرحلة
- شهادة معتمدة: أثبت مهاراتك في تقنيات الويب الحديثة
- مسار كامل: من المبتدئ إلى المطور قادر على بناء تطبيقات تفاعلية
المنهج التفصيلي للدورة
الجزء الأول: أساسيات HTML
- مقدمة عن HTML: ما هي HTML ولماذا نستخدمها
- الوسوم الأساسية: <html>, <head>, <body>, <title>
- العناوين والنصوص: <h1> إلى <h6>, <p>, <br>, <hr>
- الروابط: إنشاء روابط تشعبية باستخدام <a href="">
- الصور: إضافة الصور باستخدام <img src="" alt="">
- القوائم: القوائم المرتبة (<ol>) وغير المرتبة (<ul>)
- الجداول: إنشاء جداول البيانات باستخدام <table>, <tr>, <td>, <th>
- النماذج: إدخال المستخدم باستخدام <form>, <input>, <label>, <button>
الجزء الثاني: إتقان تنسيق CSS
- مقدمة CSS: ما هي CSS وطرق الربط
- تكامل CSS: الأنماط الداخلية والخارجية والمضمنة
- المحددات: محددات العنصر والكلاس (.class) والمعرف (#id)
- الألوان والخلفيات: خصائص الألوان وتنسيق الخلفية
- الطباعة: عائلات الخطوط والأحجام ومحاذاة النص
- نموذج الصندوق: فهم الهوامش والحشو والحدود
- تقنيات التخطيط: خصائص الموضع والعرض
الجزء الثالث: التصميم المتجاوب
- تخطيط Flexbox: تخطيطات الصندوق المرن الحديثة
- CSS Grid: نظام التخطيط ثنائي الأبعاد
- استعلامات الوسائط: التصميم المتجاوب للأجهزة المختلفة
- التصميم الموبايل أولاً: أفضل الممارسات للتطوير المحمول
- تنسيق النماذج: تصاميم نماذج جميلة وعملية
- قوائم التنقل: إنشاء تنقل متجاوب
الجزء الرابع: مقدمة في JavaScript
بعد إتقان HTML و CSS، ستدخل إلى عالم البرمجة التفاعلية مع JavaScript - لغة البرمجة التي تجعل المواقع تنبض بالحياة!
أساسيات JavaScript
- مقدمة إلى JavaScript: ما هي JavaScript ولماذا نحتاجها
- المتغيرات والثوابت: var, let, const والفروقات بينها
- أنواع البيانات: String, Number, Boolean, Array, Object
- العمليات الحسابية: الجمع والطرح والضرب والقسمة
- الشروط والقرارات: if, else if, else, switch
- الحلقات التكرارية: for, while, do-while
- الدوال (Functions): إنشاء وتنفيذ الدوال
- التفاعل مع HTML: DOM Manipulation وتغيير المحتوى
التعامل مع البيانات - JSON
- ما هو JSON: JavaScript Object Notation وأهميته
- قراءة JSON: JSON.parse() لتحويل النص إلى كائن
- كتابة JSON: JSON.stringify() لتحويل الكائن إلى نص
- التعامل مع API: جلب البيانات من الخوادم الخارجية
- معالجة البيانات: التنقل خلال البيانات المعقدة
- عرض البيانات: إظهار JSON في صفحة الويب
- Local Storage: حفظ البيانات في المتصفح
- مشاريع عملية: بناء تطبيقات تتعامل مع البيانات
التفاعل والأحداث
- معالجة الأحداث: onClick, onSubmit, onLoad
- التحقق من النماذج: Form Validation باستخدام JavaScript
- التحكم في CSS: تغيير الأنماط ديناميكياً
- الرسوم المتحركة: إضافة حركات بسيطة للموقع
- المؤثرات البصرية: إظهار وإخفاء العناصر
- التنقل الديناميكي: تحديث المحتوى بدون إعادة تحميل
الجزء الخامس: مقدمة في React
ادخل إلى عالم التطوير الحديث مع React - أقوى مكتبة JavaScript لبناء واجهات المستخدم التفاعلية!
أساسيات React
- ما هو React: مقدمة عن مكتبة React وفوائدها
- إعداد البيئة: Create React App وإعداد المشروع الأول
- المكونات (Components): فهم فكرة المكونات القابلة لإعادة الاستخدام
- JSX: كتابة HTML داخل JavaScript
- Props: نقل البيانات بين المكونات
- State: إدارة حالة المكون والتحديثات
- Events: التعامل مع الأحداث في React
- هيكل المشروع: تنظيم الملفات والمجلدات
المفاهيم المتوسطة
- useState Hook: إدارة الحالة في المكونات الوظيفية
- useEffect Hook: التعامل مع دورة حياة المكون
- الشروط في JSX: عرض المحتوى حسب الشروط
- القوائم والمصفوفات: عرض البيانات المتعددة
- النماذج في React: التعامل مع إدخال المستخدم
- CSS في React: تنسيق المكونات وأفضل الممارسات
- معالجة البيانات: جلب البيانات من APIs
مشروع عملي - تطبيق React
- تخطيط التطبيق: تصميم هيكل التطبيق والمكونات
- إنشاء المكونات: بناء مكونات قابلة لإعادة الاستخدام
- إدارة البيانات: تنظيم وتمرير البيانات بين المكونات
- التفاعل مع المستخدم: إضافة وظائف تفاعلية
- تحسين الأداء: أفضل ممارسات الأداء في React
- النشر والتطوير: رفع التطبيق للإنترنت
- الخطوات التالية: مسار التعلم المتقدم في React
JavaScript أولاً
تأكد من إتقان JavaScript الأساسي قبل الانتقال إلى React
React التطبيقي
تعلم React من خلال بناء مشاريع حقيقية وعملية
نبذة عن المدرب
جواب
مطور مواقع أول ومدرب
جواب هو مطور مواقع ومعلم ذو خبرة تزيد عن 8 سنوات في هذا المجال. يتخصص في تطوير الواجهات الأمامية والخلفية، مع خبرة في HTML و CSS و JavaScript و PHP والأطر الحديثة مثل Laravel.
يركز منهجه التعليمي على التعلم العملي والتطبيقي الذي يهيئ الطلاب لمواجهة تحديات التطوير في العالم الحقيقي.
وصول مدى الحياة
تعلم بالسرعة التي تناسبك مع وصول غير محدود لجميع محتويات الدورة
مشاريع عملية
ابني مواقع حقيقية وأنشئ محفظة أعمال لعرض مهاراتك
دعم الخبراء
احصل على المساعدة من المدربين ذوي الخبرة كلما احتجت إليها