تطوير الواجهات الأمامية
تعلّم بناء واجهات ويب حديثة ومتجاوبة باستخدام HTML وCSS وJavaScript وReact، ضمن أسلوب تعليمي عملي يدمج الشرح والتطبيق واستخدام أدوات حديثة تدعم سرعة الإنجاز وتح...
نظرة عامة على الدورة
تم تصميم برنامج تطوير الواجهات الأمامية لمساعدة الطلاب على اكتساب فهم عملي وحديث في بناء واجهات المواقع والتطبيقات الإلكترونية. يركّز البرنامج على تطوير مهارات تنظيم صفحات الويب، بناء مكوّنات واجهة واضحة، وتحويل الأفكار إلى تجارب استخدام حديثة ومتجاوبة.
يتم التعليم في هذا البرنامج بطريقة عملية تعتمد على الشرح المباشر، التطبيق خطوة بخطوة، والعمل على تمارين ومشاريع، مع توظيف أدوات وتقنيات حديثة، بما فيها بعض الأدوات الذكية التي تساعد على تسريع بعض المهام وتحسين الإنتاجية، بحيث يبقى التركيز الأساسي على الفهم الحقيقي للتقنيات وبناء مهارات قابلة للاستخدام في الواقع العملي.
Course Curriculum
-
هيكل صفحة 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
بناء صفحات ويب حديثة ومتجاوبة
فهم عملي لأساسيات HTML وCSS وJavaScript
تطوير واجهات تفاعلية باستخدام React
التعامل مع مكوّنات الواجهة والتنقل داخل التطبيق
تحسين طريقة العمل باستخدام أدوات وتقنيات حديثة
بناء أساس قوي للانطلاق في مسار Front-End بشكل احترافي
HTML5
CSS3
JavaScript
React
Git / GitHub
Responsive Design
Flexbox
CSS Grid
DOM Manipulation
REST API Basics
لا يشترط وجود خبرة سابقة متقدمة
معرفة أساسية باستخدام الكمبيوتر والإنترنت
الرغبة في التعلم العملي وبناء مهارات رقمية حديثة
الالتزام بالتطبيق والتدرّب أثناء البرنامج
الأسئلة الشائعة
ليس بالضرورة، ويتم تحديد المستوى المناسب قبل بدء البرنامج.
نعم، يعتمد البرنامج على الشرح والتطبيق والمشاريع العملية.
نعم، يتضمن أساسيات React وبناء واجهات تفاعلية حديثة.
نعم، يحصل الطالب على شهادة إتمام بعد استكمال متطلبات البرنامج بنجاح.
info@swissbridgeacademy.com