تطوير الواجهات الأمامية
تعلم كيفية بناء واجهات ويب حديثة وجذابة. هذا المسار يغطي HTML، CSS، JavaScript، React، TypeScript، والمشاريع العملية. من الصفر إلى الاحتراف.
HTML5 (Structure)
ما هذا؟
HTML5 هي لغة ترميز النص التشعبي، وهي العمود الفقري لأي صفحة ويب. تحدد هيكل المحتوى باستخدام عناصر دلالية (Semantic Elements) مثل header، nav، main، section، article، و footer.
لماذا هو مهم؟
HTML هي أساس كل موقع على الإنترنت. بدونها، لا يمكن عرض أي محتوى على الويب. العناصر الدلالية تحسن SEO وتجعل الموقع أكثر سهولة في الوصول (Accessibility).
المواضيع المغطاة
• Semantic Elements (header, nav, main, section, article, footer)
• Forms and Input Types
• Page Structure and Layout
• Multimedia (audio, video, canvas)
• Accessibility (ARIA roles)
مصادر التعلم
CSS3 (Styling)
ما هذا؟
CSS3 هي لغة تنسيق صفحات الويب. تتحكم في مظهر العناصر: الألوان، الخطوط، التباعد، التخطيط، والرسوم المتحركة.
لماذا هو مهم؟
CSS تحول HTML العادي إلى واجهة جميلة وجذابة. بدونها، سيكون الويب مجرد نصوص على خلفية بيضاء.
المواضيع المغطاة
• Box Model (margin, border, padding, content)
• Flexbox (تخطيط مرن أحادي الاتجاه)
• Grid (تخطيط ثنائي الأبعاد)
• Responsive Design (Media Queries)
• Animations and Transitions
مصادر التعلم
مشروع 1: Landing Page
فكرة المشروع
صفحة هبوط (Landing Page) لشركة أو منتج
قم ببناء صفحة هبوط احترافية باستخدام HTML و CSS فقط.
المتطلبات
• هيدر مع شعار وقائمة تنقل
• قسم Hero مع عنوان وصورة خلفية
• قسم Features (3-4 ميزات)
• قسم About أو Services
• Footer مع روابط التواصل الاجتماعي
• تصميم متجاوب (Responsive) لجميع الشاشات
مشروع 2: Personal Portfolio
فكرة المشروع
موقع محفظة شخصية (Portfolio) يعرض مهاراتك ومشاريعك
قم ببناء موقع شخصي يعرف بك وبمهاراتك وأعمالك.
المتطلبات
• قسم Hero مع صورة شخصية ونبذة
• قسم المهارات (Skills)
• قسم المشاريع (Projects) مع بطاقات
• قسم الخدمات (Services)
• نموذج اتصال (Contact Form)
• تصميم جذاب ومتجاوب
JavaScript Basics
ما هذا؟
JavaScript هي لغة البرمجة التي تجعل المواقع تفاعلية وديناميكية. تتحكم في سلوك الصفحة، وتتعامل مع أحداث المستخدم، وتعدل المحتوى بشكل ديناميكي.
المواضيع المغطاة
• Variables (var, let, const)
• Data Types (String, Number, Boolean, Array, Object)
• Operators (Arithmetic, Comparison, Logical)
• Control Flow (if/else, switch)
• Loops (for, while)
• Functions (declaration, expression, arrow)
• Scope (global, local, block)
JavaScript Advanced
المواضيع المغطاة
• Arrays Methods (map, filter, reduce, forEach)
• Objects and Object Manipulation
• DOM Manipulation (select, create, modify, delete)
• Events (click, submit, input, keypress)
• OOP in JavaScript (Classes, Inheritance)
• Async JavaScript (Callbacks, Promises, Async/Await)
• Fetch API and AJAX
مشروع 3: To-Do App
فكرة المشروع
تطبيق إدارة المهام (To-Do List)
قم ببناء تطبيق كامل لإدارة المهام باستخدام HTML، CSS، و JavaScript.
المتطلبات
• إضافة مهمة جديدة
• حذف مهمة
• تحديد مهمة كمكتملة
• تصفية المهام (الكل، المكتملة، غير المكتملة)
• حفظ المهام في LocalStorage
• تصميم جميل وسهل الاستخدام
APIs & Real World
ما هذا؟
واجهات برمجة التطبيقات (APIs) تسمح لتطبيقك بالتواصل مع خوادم خارجية لجلب البيانات أو إرسالها.
المواضيع المغطاة
• Fetch API vs Axios
• Working with JSON data
• GET, POST, PUT, DELETE requests
• Error Handling (try/catch, .catch())
• Async/Await with APIs
• API Keys and Authentication
مصادر التعلم
مشروع 4: CRUD App (API Integration)
فكرة المشروع
تطبيق CRUD كامل يتعامل مع API حقيقي
قم ببناء تطبيق لإدارة المستخدمين أو المنتجات باستخدام API (مثل JSONPlaceholder
أو API حقيقي).
المتطلبات
• عرض البيانات (Read) من API
• إضافة بيانات جديدة (Create) عبر POST
• تحديث بيانات (Update) عبر PUT/PATCH
• حذف بيانات (Delete) عبر DELETE
• عرض حالة التحميل (Loading)
• معالجة الأخطاء (Error Handling)
React Fundamentals
ما هذا؟
React هي مكتبة JavaScript لبناء واجهات المستخدم. تسمح ببناء تطبيقات معقدة باستخدام مكونات قابلة لإعادة الاستخدام.
المواضيع المغطاة
• Components (Functional vs Class)
• JSX Syntax
• Props (passing data between components)
• State (managing component data)
• Conditional Rendering
• Lists and Keys
مصادر التعلم
React Core
المواضيع المغطاة
• useState Hook (إدارة الحالة المحلية)
• useEffect Hook (التعامل مع الآثار الجانبية)
• Forms in React (controlled components)
• Events Handling
• Fetching Data with useEffect
• Component Lifecycle
مصادر التعلم
Routing (React Router)
ما هذا؟
React Router هي مكتبة تسمح بإنشاء تطبيقات React متعددة الصفحات (SPA) مع التنقل بين الصفحات دون إعادة تحميل.
المواضيع المغطاة
• BrowserRouter, Routes, Route
• Link and NavLink components
• Nested Routes
• Dynamic Routes (useParams)
• Navigation (useNavigate)
• Protected Routes
مصادر التعلم
Styling (Tailwind CSS / CSS Modules)
ما هذا؟
طرق مختلفة لتنسيق تطبيقات React، من CSS Modules إلى Tailwind CSS.
المواضيع المغطاة
• CSS Modules (scoped styling)
• Styled Components (CSS-in-JS)
• Tailwind CSS (utility-first framework)
• Responsive Design in React
مصادر التعلم
مشروع 5: React App (Dashboard / Blog)
فكرة المشروع
تطبيق React كامل (لوحة تحكم أو مدونة)
قم ببناء تطبيق React متكامل باستخدام React Router و API.
المتطلبات
• صفحات متعددة (Home, About, Contact)
• جلب البيانات من API
• عرض البيانات في بطاقات أو جدول
• إضافة بحث وتصفية
• تصميم متجاوب وجذاب
TypeScript
ما هذا؟
TypeScript هو نسخة مطورة من JavaScript تضيف الأنواع (Types) الثابتة، مما يساعد في اكتشاف الأخطاء قبل تشغيل الكود.
المواضيع المغطاة
• Basic Types (string, number, boolean, array, tuple)
• Interfaces and Types
• Functions and Type Annotations
• Union and Intersection Types
• Generics Basics
• Typing React Components
مصادر التعلم
State Management
ما هذا؟
إدارة الحالة (State Management) هي طريقة للتعامل مع البيانات المشتركة بين مكونات متعددة في التطبيق.
المواضيع المغطاة
• Context API (حل React المدمج)
• Redux Toolkit (الحل الأكثر شيوعاً)
• Zustand (حل بسيط وخفيف)
• Comparing different solutions
مصادر التعلم
Advanced React
المواضيع المغطاة
• Custom Hooks (إنشاء Hooks مخصصة)
• useMemo and useCallback (تحسين الأداء)
• React.memo (تجنب إعادة الرسم غير الضرورية)
• Lazy Loading and Code Splitting
• Error Boundaries
• Render Props and HOCs (أنماط قديمة)
Testing Basics
ما هذا؟
اختبار الكود (Testing) هو عملية التحقق من أن التطبيق يعمل كما هو متوقع، ويقلل من الأخطاء والـ Bugs.
المواضيع المغطاة
• Unit Testing (اختبار الوحدات) باستخدام Jest
• Component Testing باستخدام React Testing Library
• Integration Testing
• Mocking APIs and Functions
Frontend Architecture
ما هذا؟
هندسة تطبيقات الواجهة الأمامية (Frontend Architecture) هي كيفية تنظيم الكود وجعله قابلاً للتوسع والصيانة.
المواضيع المغطاة
• Folder Structure (تنظيم المجلدات)
• Reusable Components (مكونات قابلة لإعادة الاستخدام)
• Clean Code Principles in React
• SOLID Principles in Frontend
• Design Patterns in React
Final Project 🔥: Production-Level App
فكرة المشروع
تطبيق متكامل جاهز للإنتاج (Production-Level App)
قم ببناء تطبيق React كامل باستخدام جميع المفاهيم التي تعلمتها.
المتطلبات التقنية
• React + TypeScript
• State Management (Redux Toolkit / Context API)
• API Integration (REST or GraphQL)
• Responsive Design (Mobile-First)
• Clean Architecture (Folder Structure)
• Unit and Component Testing
• Performance Optimization (Lazy Loading, Memoization)
• Deployment (Vercel / Netlify)
أفكار للمشروع
• E-commerce Store (منتج إلكتروني كامل)
• Social Media Dashboard (لوحة تحكم وسائل التواصل)
• Task Management System (نظام إدارة مهام متقدم)
• Blog Platform with CMS (منصة تدوين)
• Weather App with Maps (تطبيق طقس مع خرائط)
• Chat Application (تطبيق محادثة في الوقت الفعلي)