تطوير الواجهات الأمامية
تعلّم بناء واجهات ويب حديثة ومتجاوبة باستخدام HTML وCSS وJavaScript وReact، ضمن أسلوب تعليمي عملي يدمج الشرح والتطبيق واستخدام أدوات حديثة تدعم سرعة الإنجاز وتحسين طريقة العمل....
نظرة عامة على الدورة
تم تصميم برنامج تطوير الواجهات الأمامية لمساعدة الطلاب على اكتساب فهم عملي وحديث في بناء واجهات المواقع والتطبيقات الإلكترونية. يركّز البرنامج على تطوير مهارات تنظيم صفحات الويب، بناء مكوّنات واجهة واضحة، وتحويل الأفكار إلى تجارب استخدام حديثة ومتجاوبة.
يتم التعليم في هذا البرنامج بطريقة عملية تعتمد على الشرح المباشر، التطبيق خطوة بخطوة، والعمل على تمارين ومشاريع، مع توظيف أدوات وتقنيات حديثة، بما فيها بعض الأدوات الذكية التي تساعد على تسريع بعض المهام وتحسين الإنتاجية، بحيث يبقى التركيز الأساسي على الفهم الحقيقي للتقنيات وبناء مهارات قابلة للاستخدام في الواقع العملي.
منهج الدورة
-
هيكل صفحة HTML الأساسية0:22:00
-
العناوين والفقرات والنصوص0:20:00
-
الروابط والصور والوسائط0:25:00
-
القوائم المرتبة وغير المرتبة0:18:00
-
الجداول Tables0:25:00
-
النماذج Forms وعناصر الإدخال0:35:00
-
العناصر الدلالية Semantic HTML50:28:00
-
الوسوم الوصفية Meta Tags وSEO0:20:00
-
إمكانية الوصول Accessibility0:22:00
-
تمرين عملي: بناء صفحة Bio كاملة0:45:00
-
ربط CSS بصفحة HTML0:15:00
-
المحددات Selectors بالتفصيل0:30:00
-
نموذج الصندوق Box Model0:28:00
-
الألوان والخلفيات Backgrounds0:25:00
-
الخطوط Typography وGoogle Fonts0:22:00
-
الـ Display وPositioning0:35:00
-
Flexbox من الصفر للاحتراف0:50:00
-
CSS Grid نظام الشبكة0:50:00
-
الظلال والتأثيرات البصرية0:20:00
-
CSS Variables المتغيرات المخصصة0:22:00
-
Transitions والانتقالات السلسة0:25:00
-
CSS Animations والإطارات المفتاحية0:35:00
-
تمرين: تصميم بطاقة مستخدم تفاعلية0:40:00
-
مقدمة لـ JavaScript ودورها في الويب0:15:00
-
المتغيرات: var وlet وconst0:25:00
-
أنواع البيانات والمشغلات0:30:00
-
الجمل الشرطية if/else والـ switch0:28:00
-
الحلقات: for وwhile وfor...of0:30:00
-
الدوال Functions والنطاق Scope0:35:00
-
المصفوفات Arrays والطرق الأساسية0:35:00
-
الكائنات Objects والخصائص0:30:00
-
التعامل مع النصوص Strings0:25:00
-
معالجة الأخطاء try/catch0:22:00
-
تمرين: برنامج قائمة مهام بـ JS خالص0:50:00
-
Arrow Functions والفرق عن الدوال العادية0:25:00
-
Destructuring للمصفوفات والكائنات0:30:00
-
Spread وRest Operators0:25:00
-
Template Literals0:15:00
-
Modules: import وexport0:25:00
-
البرمجة الكائنية OOP والـ Classes0:40:00
-
Promises والبرمجة غير المتزامنة0:35:00
-
Async/Await بالتفصيل0:30:00
-
مناهج المصفوفات: map وfilter وreduce0:35:00
-
تمرين: بناء تطبيق بحث بـ API0:55:00
-
ما هو DOM وكيف يعمل؟0:18:00
-
اختيار العناصر querySelector وgetElementById0:25:00
-
تعديل العناصر: المحتوى والأنماط0:28:00
-
إنشاء وحذف العناصر ديناميكيًا0:30:00
-
الأحداث Events والمستمعون0:35:00
-
Event Delegation وتحسين الأداء0:25:00
-
Fetch API والتواصل مع الخوادم0:35:00
-
LocalStorage وSessionStorage0:22:00
-
تمرين: تطبيق طقس باستخدام API حقيقي1:00:00
-
لماذا React؟ Virtual DOM والفلسفة0:20:00
-
إعداد مشروع باستخدام Vite0:22:00
-
JSX: كتابة HTML داخل JavaScript0:25:00
-
المكونات Components وأنواعها0:28:00
-
Props: تمرير البيانات بين المكونات0:30:00
-
State وhook الـ useState0:35:00
-
التعامل مع الأحداث في React0:25:00
-
Rendering الشرطي وعرض القوائم0:30:00
-
Hook الـ useEffect والتأثيرات الجانبية0:35:00
-
React Router: التنقل بين الصفحات0:40:00
-
Context API: إدارة الحالة العامة0:35:00
-
استدعاء APIs في React0:30:00
المتطلبات
-
لا يشترط وجود خبرة سابقة متقدمة
-
معرفة أساسية باستخدام الكمبيوتر والإنترنت
-
الرغبة في التعلم العملي وبناء مهارات رقمية حديثة
-
الالتزام بالتطبيق والتدرّب أثناء البرنامج
التقنيات والأدوات
-
HTML5
-
CSS3
-
JavaScript
-
React
-
Git / GitHub
-
Responsive Design
-
Flexbox
-
CSS Grid
-
DOM Manipulation
-
REST API Basics
ماذا ستتعلم؟
-
بناء صفحات ويب حديثة ومتجاوبة
-
فهم عملي لأساسيات HTML وCSS وJavaScript
-
تطوير واجهات تفاعلية باستخدام React
-
التعامل مع مكوّنات الواجهة والتنقل داخل التطبيق
-
تحسين طريقة العمل باستخدام أدوات وتقنيات حديثة
-
بناء أساس قوي للانطلاق في مسار Front-End بشكل احترافي
الأسئلة الشائعة
ليس بالضرورة، ويتم تحديد المستوى المناسب قبل بدء البرنامج.
نعم، يعتمد البرنامج على الشرح والتطبيق والمشاريع العملية.
نعم، يتضمن أساسيات React وبناء واجهات تفاعلية حديثة.
نعم، يحصل الطالب على شهادة إتمام بعد استكمال متطلبات البرنامج بنجاح.
