Front-End React Development
كورس Front-End لتعلم تصميم وتطوير واجهات مواقع الويب بشكل احترافي، يشمل HTML وCSS وJavaScript وReact مع تنفيذ مشاريع عملية حقيقية.
عن هذه الدبلومة
هتتعلم فيه أساسيات تصميم وتطوير الويب بداية من بناء الهيكل باستخدام HTML، وتنسيق الصفحات باستخدام CSS، وصولًا لإضافة التفاعل باستخدام JavaScript، ثم الانتقال لمستوى متقدم باستخدام React لبناء تطبيقات حديثة وسريعة.
الكورس بيركز بشكل كبير على التطبيق العملي من خلال مشاريع حقيقية بتساعدك تبني Portfolio قوي، وتكون جاهز لدخول سوق العمل كمطور Front-End بثقة.
ماذا ستتعلم
ماذا ستتقن بنهاية هذه الدبلومة
🚀 ماذا ستتعلم؟
🔹 Front-End Development باستخدام React
من الصفر هتتعلم:
HTML لبناء هيكل الصفحات
CSS لتصميم وتنسيق المواقع بشكل احترافي
Responsive Design عشان موقعك يشتغل على كل الأجهزة
JavaScript لإضافة التفاعل
التعامل مع DOM و Events
استخدام APIs وجلب البيانات
React لبناء تطبيقات حديثة وسريعة
🛠️ المشاريع العملية
خلال الكورس هتطبق عملي على مشاريع حقيقية زي:
Landing Page احترافية
Dashboard تفاعلي
To-Do App
Weather App باستخدام API
مشروع React متكامل
🎯 ماذا ستحقق بعد الكورس؟
بناء مواقع ويب احترافية (Front-End فقط)
تحويل أي تصميم (UI) إلى موقع فعلي
التعامل مع APIs وربط البيانات بالواجهة
إنشاء تطبيقات تفاعلية باستخدام React
تأهيلك للعمل كمطور Front-End Freelance أو في شركة
📌 في النهاية
بعد إتمام الكورس، هتكون قادر تبدأ مشوارك في مجال Front-End Development بثقة، ومعاك Portfolio قوي من المشاريع اللي تقدر تعرضها لأي شركة أو عميل.
المتطلبات المسبقة
المنهج الدراسي
دليل تفصيلي لرحلتك التعليمية
1
🧩 أساسيات الويب
🧩 أساسيات الويب
الفرق بين Front-End و Back-End
كيف يعمل المتصفح (Browser Rendering)
إيه هو Front-End وليه مهم
2
⚙️ Getting Started
⚙️ Getting Started
VS Code
Node.js
npm / yarn
إنشاء أول مشروع باستخدام React
التعرف على هيكل المشروع
تشغيل المشروع وبناء أول صفحة
3
🌐 HTML & CSS
🌐 HTML & CSS
CSS (Selectors - Box Model)
Flexbox
CSS Grid
Responsive Design (تصميم متجاوب)
Best Practices في التصميم
4
⚡ JavaScript
⚡ JavaScript
Arrays & Objects
Functions
ES6+ (Arrow Functions - Destructuring - Modules)
التعامل مع DOM
التعامل مع APIs (Fetch)
5
⚛️ React Basics
⚛️ React Basics
Components
JSX
Props & State
Event Handling
Conditional Rendering
Lists & Keys
6
🧠 React Advanced
🧠 React Advanced
useState
useEffect
useRef
useContext
Custom Hooks
Component Lifecycle
تنظيم المشروع (Project Structure)
7
🔗 التعامل مع البيانات
🔗 التعامل مع البيانات
إدارة البيانات داخل التطبيق
Loading & Error Handling
Form Handling
Validation
8
🧭 Routing & State Management
🧭 Routing & State Management
إدارة الحالة (State Management):
Context API
مقدمة في Redux (اختياري)
9
🚀 تحسين الأداء وتجهيز المشروع
🚀 تحسين الأداء وتجهيز المشروع
Lazy Loading
Code Splitting
إعادة استخدام المكونات
Clean Code & Best Practices
تجهيز المشروع للنشر
10
🛠 Final Projects
🛠 Final Projects
To-Do App
Dashboard تفاعلي
Blog UI مرتبط بـ API
E-commerce Front-End (React)
سجل في هذه الدبلومة
أكمل النموذج أدناه وسنتواصل معك قريبًا
شركاؤنا
آراء الطلاب
ماذا يقول طلابنا عن هذه الدبلومة.