NextStep | تطوير الواجهات الأمامية — من الصفر إلى الاحتراف

الخطوة 1 من 20

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)

مصادر التعلم

الخطوة 2 من 20

CSS3 (Styling)

ما هذا؟

CSS3 هي لغة تنسيق صفحات الويب. تتحكم في مظهر العناصر: الألوان، الخطوط، التباعد، التخطيط، والرسوم المتحركة.

لماذا هو مهم؟

CSS تحول HTML العادي إلى واجهة جميلة وجذابة. بدونها، سيكون الويب مجرد نصوص على خلفية بيضاء.

المواضيع المغطاة

• Box Model (margin, border, padding, content)
• Flexbox (تخطيط مرن أحادي الاتجاه)
• Grid (تخطيط ثنائي الأبعاد)
• Responsive Design (Media Queries)
• Animations and Transitions

مصادر التعلم

الخطوة 3 من 20

مشروع 1: Landing Page

فكرة المشروع

صفحة هبوط (Landing Page) لشركة أو منتج
قم ببناء صفحة هبوط احترافية باستخدام HTML و CSS فقط.

المتطلبات

• هيدر مع شعار وقائمة تنقل
• قسم Hero مع عنوان وصورة خلفية
• قسم Features (3-4 ميزات)
• قسم About أو Services
• Footer مع روابط التواصل الاجتماعي
• تصميم متجاوب (Responsive) لجميع الشاشات

الخطوة 4 من 20

مشروع 2: Personal Portfolio

فكرة المشروع

موقع محفظة شخصية (Portfolio) يعرض مهاراتك ومشاريعك
قم ببناء موقع شخصي يعرف بك وبمهاراتك وأعمالك.

المتطلبات

• قسم Hero مع صورة شخصية ونبذة
• قسم المهارات (Skills)
• قسم المشاريع (Projects) مع بطاقات
• قسم الخدمات (Services)
• نموذج اتصال (Contact Form)
• تصميم جذاب ومتجاوب

الخطوة 5 من 20

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)

مصادر التعلم

الخطوة 6 من 20

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

مصادر التعلم

الخطوة 7 من 20

مشروع 3: To-Do App

فكرة المشروع

تطبيق إدارة المهام (To-Do List)
قم ببناء تطبيق كامل لإدارة المهام باستخدام HTML، CSS، و JavaScript.

المتطلبات

• إضافة مهمة جديدة
• حذف مهمة
• تحديد مهمة كمكتملة
• تصفية المهام (الكل، المكتملة، غير المكتملة)
• حفظ المهام في LocalStorage
• تصميم جميل وسهل الاستخدام

الخطوة 8 من 20

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

مصادر التعلم

الخطوة 9 من 20

مشروع 4: CRUD App (API Integration)

فكرة المشروع

تطبيق CRUD كامل يتعامل مع API حقيقي
قم ببناء تطبيق لإدارة المستخدمين أو المنتجات باستخدام API (مثل JSONPlaceholder أو API حقيقي).

المتطلبات

• عرض البيانات (Read) من API
• إضافة بيانات جديدة (Create) عبر POST
• تحديث بيانات (Update) عبر PUT/PATCH
• حذف بيانات (Delete) عبر DELETE
• عرض حالة التحميل (Loading)
• معالجة الأخطاء (Error Handling)

الخطوة 10 من 20

React Fundamentals

ما هذا؟

React هي مكتبة JavaScript لبناء واجهات المستخدم. تسمح ببناء تطبيقات معقدة باستخدام مكونات قابلة لإعادة الاستخدام.

المواضيع المغطاة

• Components (Functional vs Class)
• JSX Syntax
• Props (passing data between components)
• State (managing component data)
• Conditional Rendering
• Lists and Keys

مصادر التعلم

الخطوة 11 من 20

React Core

المواضيع المغطاة

• useState Hook (إدارة الحالة المحلية)
• useEffect Hook (التعامل مع الآثار الجانبية)
• Forms in React (controlled components)
• Events Handling
• Fetching Data with useEffect
• Component Lifecycle

مصادر التعلم

الخطوة 12 من 20

Routing (React Router)

ما هذا؟

React Router هي مكتبة تسمح بإنشاء تطبيقات React متعددة الصفحات (SPA) مع التنقل بين الصفحات دون إعادة تحميل.

المواضيع المغطاة

• BrowserRouter, Routes, Route
• Link and NavLink components
• Nested Routes
• Dynamic Routes (useParams)
• Navigation (useNavigate)
• Protected Routes

مصادر التعلم

الخطوة 13 من 20

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

مصادر التعلم

الخطوة 14 من 20

مشروع 5: React App (Dashboard / Blog)

فكرة المشروع

تطبيق React كامل (لوحة تحكم أو مدونة)
قم ببناء تطبيق React متكامل باستخدام React Router و API.

المتطلبات

• صفحات متعددة (Home, About, Contact)
• جلب البيانات من API
• عرض البيانات في بطاقات أو جدول
• إضافة بحث وتصفية
• تصميم متجاوب وجذاب

الخطوة 15 من 20

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

مصادر التعلم

الخطوة 16 من 20

State Management

ما هذا؟

إدارة الحالة (State Management) هي طريقة للتعامل مع البيانات المشتركة بين مكونات متعددة في التطبيق.

المواضيع المغطاة

• Context API (حل React المدمج)
• Redux Toolkit (الحل الأكثر شيوعاً)
• Zustand (حل بسيط وخفيف)
• Comparing different solutions

مصادر التعلم

Playlist [01]

الخطوة 17 من 20

Advanced React

المواضيع المغطاة

• Custom Hooks (إنشاء Hooks مخصصة)
• useMemo and useCallback (تحسين الأداء)
• React.memo (تجنب إعادة الرسم غير الضرورية)
• Lazy Loading and Code Splitting
• Error Boundaries
• Render Props and HOCs (أنماط قديمة)

الخطوة 18 من 20

Testing Basics

ما هذا؟

اختبار الكود (Testing) هو عملية التحقق من أن التطبيق يعمل كما هو متوقع، ويقلل من الأخطاء والـ Bugs.

المواضيع المغطاة

• Unit Testing (اختبار الوحدات) باستخدام Jest
• Component Testing باستخدام React Testing Library
• Integration Testing
• Mocking APIs and Functions

الخطوة 19 من 20

Frontend Architecture

ما هذا؟

هندسة تطبيقات الواجهة الأمامية (Frontend Architecture) هي كيفية تنظيم الكود وجعله قابلاً للتوسع والصيانة.

المواضيع المغطاة

• Folder Structure (تنظيم المجلدات)
• Reusable Components (مكونات قابلة لإعادة الاستخدام)
• Clean Code Principles in React
• SOLID Principles in Frontend
• Design Patterns in React

الخطوة 20 من 20

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 (تطبيق محادثة في الوقت الفعلي)