🎨

دبلوم الـ Front-End

إتقان تصميم وبناء واجهات الويب الاحترافية من الصفر حتى المشاريع المتكاملة مع أحدث التقنيات.

المستوى التأسيسي — مجاناً المستوى المتقدم — مدفوع

المستوى التأسيسي (HTML + CSS + المشروع التطبيقي) مجاناً بالكامل — بدون أي رسوم انتساب.

13
أقسام رئيسية
150+
درس تفصيلي
4
مشاريع عملية
15+
تقنية وأداة
📖 محاور الدبلوم

تدريب يأخذك من أساسيات HTML حتى بناء مشاريع احترافية متكاملة.

المستوى التأسيسي

مجاناً بالكامل

يشمل محاور HTML5 و CSS3 و المشروع التطبيقي الأول. المستوى التأسيسي مجاناً بالكامل — بدون أي رسوم انتساب أو رسوم لكل محور.

01

أساسيات HTML5 المستوى التأسيسي — مجاناً

لغة بناء وهيكلة صفحات الويب بالكامل

01مقدمة للغة HTML وأساسيات البناء والوسوم
02العناوين الرئيسية والفرعية والفقرات النصية
03إدراج الروابط التشعبية والصور الديناميكية
04القوائم المنظمة والغير منظمة (Lists)
05النماذج (Forms) وحقول الإدخال المتعددة
06بناء وتخصيص الجداول (Tables) لعرض البيانات
07دمج ملفات الصوت والفيديو وتشغيلها في المتصفح
08الجداول المتقدمة والنماذج المعقدة
09تضمين الخرائط الجغرافية (Google Maps)
10تجهيز الموقع للتجاوب (Responsive Concepts)
11الأمان السيبراني للواجهات وأفضل الممارسات
02

احتراف CSS3 المستوى التأسيسي — مجاناً

تجميل وتنسيق المواقع باحترافية وبناء مشروع متكامل

01مقدمة عن أساسيات التصميم بالمحددات (Selectors)
02أنظمة الألوان المتعددة (Hex, RGB, HSL)
03الحواف والحدود (Borders) والهوامش (Margin & Padding)
04استيراد وتخصيص الخطوط وأحجامها (Fonts)
05مكتبات الأيقونات العالمية (Icons)
06طرق عرض العناصر (Display: Block, Inline, Flex)
07تمحور العناصر على الشاشة (Positions)
08العناصر الوهمية (Pseudo Elements & Classes)
09فلاتر وتأثيرات الصور (Filters)
10وحدات القياس المتجاوبة (px, em, rem, vh, vw)
11تأثيرات النصوص والظلال والانتقالات
12الخلفيات المتعددة والتدرجات (Gradients)
13هندسة توزيع العناصر بـ Flexbox
14التخطيط الشبكي ثنائي الأبعاد (Grid Layout)
15المشروع الختامي: بناء موقع شركة متكامل
03

المشروع التطبيقي الأول المستوى التأسيسي — مجاناً

17 درساً عملياً — بناء موقع شركة احترافي من الصفر حتى التسليم

01تحليل فكرة المشروع ومتطلبات العميل
02إعداد هيكل المجلدات وملفات المشروع
03بناء الهيكل العام للصفحة (Header & Navigation)
04تصميم قسم البطل (Hero Section)
05قسم عن الشركة (About) بالصور والنصوص
06عرض الخدمات في بطاقات (Services Cards)
07معرض المشاريع والأعمال (Portfolio Grid)
08قسم آراء العملاء (Testimonials)
09فريق العمل والإحصائيات (Team & Stats)
10نموذج التواصل (Contact Form)
11تذييل الموقع (Footer) والروابط الاجتماعية
12تحسين التجربة على الموبايل (Responsive)
13القائمة الجانبية للجوال (Mobile Menu)
14تأثيرات الحركة والانتقالات (Hover & Transitions)
15تحسين الأداء والصور (Performance & Images)
16مراجعة الكود وأفضل الممارسات (Code Review)
17التسليم النهائي: نشر الموقع وعرضه في ملف الإنجازات
نهاية المستوى التأسيسي — بداية المستوى المتقدم

المستوى المتقدم

يشمل المستوى التأسيسي للجافا سكريبت وBootstrap وTailwind وSASS والمشاريع الاحترافية وGit والسيرفرات. هذا المستوى مدفوع بشكل منفصل عن المستوى التأسيسي المجاني.

04

Bootstrap بالكامل

إطار العمل الأشهر لبناء واجهات متجاوبة بسرعة واحترافية

01مقدمة Bootstrap — لماذا نستخدمه؟
02التثبيت عبر CDN و npm وإعداد المشروع
03نظام الشبكة Grid System (Containers, Rows, Columns)
04Breakpoints والتجاوب (Responsive Utilities)
05Typography — العناوين والنصوص والقوائم
06الألوان والخلفيات والحدود (Colors & Borders)
07Spacing — Margin & Padding Utilities
08الأزرار Badges و Alerts
09البطاقات Cards والتخصيص
10Navbar و Nav و Dropdown
11Forms — حقول الإدخال والتحقق
12Tables و List Groups
13Carousel و Modal و Collapse
14Accordion و Offcanvas و Toast
15Icons (Bootstrap Icons) و Flex Utilities
16تخصيص الثيم و CSS Variables في Bootstrap
17أفضل الممارسات وهيكلة ملفات المشروع
05

مشروع متجر إلكتروني

HTML + CSS + Bootstrap — بناء متجر متكامل من الصفر

01تحليل فكرة المتجر وهيكل الصفحات
02إعداد المشروع وربط Bootstrap والملفات
03بناء Navbar المتجر والبحث والسلة
04قسم Hero والعروض الترويجية (Carousel)
05عرض التصنيفات (Categories Grid)
06بطاقات المنتجات (Product Cards)
07صفحة تفاصيل المنتج (Product Details)
08صفحة سلة المشتريات (Cart)
09صفحة إتمام الطلب (Checkout)
10صفحة تسجيل الدخول وإنشاء حساب
11Footer المتجر والروابط الاجتماعية
12تحسين التجاوب على الموبايل والتابلت
13مراجعة التصميم وتسليم المشروع
06

Tailwind CSS بالكامل

أسلوب Utility-First لبناء واجهات حديثة وسريعة

01مقدمة Tailwind — Utility-First vs Bootstrap
02التثبيت (CDN / CLI) وإعداد المشروع
03الملف tailwind.config والتخصيص
04Spacing, Sizing و Colors
05Typography و Font Utilities
06Flexbox بـ Tailwind
07Grid بـ Tailwind
08Borders, Shadows و Rounded
09Responsive Design (sm, md, lg, xl)
10Hover, Focus و States
11Dark Mode في Tailwind
12Components — أزرار، بطاقات، نماذج
13Navbar و Layouts عملية
14@apply وإعادة استخدام الأنماط
15Plugins وأفضل الممارسات
07

مشروع منصة تعليمية LMS

بناء مدرسة إلكترونية كاملة بـ Tailwind CSS

01تحليل منصة LMS وهيكل الصفحات
02إعداد مشروع Tailwind وهيكلة الملفات
03الصفحة الرئيسية للمدرسة (Landing)
04قائمة الدورات وبطاقات الكورسات
05صفحة تفاصيل الدورة والدروس
06لوحة الطالب (Student Dashboard)
07صفحة تشغيل الفيديو وتتبع التقدم
08صفحة المدربين والملفات الشخصية
09نماذج التسجيل وتسجيل الدخول
10قسم الأسعار والاشتراكات (Pricing)
11صفحة الأسئلة الشائعة والمدونة
12التجاوب الكامل على الموبايل
13المراجعة النهائية وتسليم المنصة
08

SASS بالكامل

معالج CSS المتقدم لتنظيم وتنسيق المشاريع الكبيرة

01مقدمة SASS — لماذا نحتاجه؟
02التثبيت والإعداد (Dart Sass / VS Code)
03المتغيرات Variables و Maps
04Nesting — التداخل المنظم للأنماط
05الخلط Mixins و @include
06الدوال Functions و Operators
07Partials و @use / @forward
08Extend و Placeholder Selectors
09التحكم الشرطي والحلقات (@if, @for, @each)
10بنية ملفات 7-1 Architecture
11كتابة Components قابلة لإعادة الاستخدام
12أفضل الممارسات في مشاريع SASS
09

مشروع موقع عقاري بـ SASS

بناء منصة تسويق عقاري احترافية باستخدام SASS

01تحليل فكرة المنصة العقارية وهيكل الصفحات
02إعداد مشروع SASS ببنية 7-1
03الصفحة الرئيسية و Hero العقاري
04شريط البحث المتقدم عن العقارات
05بطاقات العقارات (Property Cards)
06صفحة قائمة العقارات مع الفلاتر
07صفحة تفاصيل العقار والمعرض
08قسم الوكلاء والعقاريين
09نموذج طلب معاينة / تواصل
10صفحة من نحن والمدونة العقارية
11Footer والخريطة والمعلومات
12التجاوب الكامل على كل الشاشات
13المراجعة النهائية وتسليم الموقع العقاري
10

Git & GitHub بالكامل

إدارة المشاريع والتعاون الاحترافي — من أول commit حتى Pull Request

01ما هو Git؟ — أنظمة التحكم بالإصدارات (VCS)
02تثبيت Git وإعداد الهوية (user.name & user.email)
03إنشاء مستودع محلي — git init
04Staging Area — git add و git status
05حفظ التغييرات — git commit ورسائل الـ Commit الجيدة
06عرض السجل — git log و git diff
07ملف .gitignore — ماذا نتجاهل؟
08ما هو GitHub؟ وإنشاء حساب ومستودع بعيد
09الربط مع Remote — git remote و git push
10جلب التحديثات — git clone و git pull و git fetch
11الفروع Branches — إنشاء وتبديل ودمج
12git merge وحل تعارضات الكود (Conflicts)
13Pull Requests — المراجعة والدمج على GitHub
14التراجع عن الأخطاء — reset, revert, restore
15Tags و Releases لنشر إصدارات المشروع
16GitHub Pages — نشر موقعك مجاناً
17العمل الجماعي — Fork, Collaborate و Issues
18أفضل ممارسات Git في المشاريع الاحترافية
11

السيرفرات والاستضافة بالكامل

من شراء النطاق حتى رفع الموقع وتشغيله على السيرفر

01ما هو السيرفر؟ وأنواع الاستضافة (Shared, VPS, Cloud)
02النطاقات Domains — شراء وربط الدومين
03DNS — A Record, CNAME و Name Servers
04اختيار شركة استضافة وإعداد الحساب
05التعرف على لوحة cPanel بالكامل
06File Manager — رفع وإدارة ملفات الموقع
07FTP / SFTP — رفع الملفات عبر FileZilla
08مجلد public_html وهيكل ملفات الموقع
09رفع مشروع Front-End ونشره على السيرفر
10قواعد البيانات MySQL عبر cPanel (phpMyAdmin)
11إنشاء بريد إلكتروني احترافي على النطاق
12شهادات SSL — تفعيل HTTPS مجاناً
13النسخ الاحتياطي Backup واستعادة الموقع
14Subdomains و Addon Domains
15مراقبة الأداء والأخطاء (Error Logs)
16نقل الموقع بين سيرفرات (Migration)
17أفضل ممارسات الأمان على الاستضافة
18مشروع عملي: نشر موقعك الكامل على سيرفر حقيقي
12

المستوى التأسيسي للجافا سكريبت

أول 20 درساً — من المقدمة حتى Arrow Functions

01JavaScript Intro
02Variables and Data Types
03Template Literals
04Assignment Operators
05Math Object
06String Methods Part 1
07String Methods Part 2
08Comparison Operators
09Logical Operators
10If Condition
11Nested If — Ternary Operator
12Arrays
13Array Methods
14For Loop Part 1
15For Loop Part 2
16Nested Loop
17While Loop — Do While
18Functions
19Anonymous Function and Default Param
20Arrow Function
13

هدايا ومزايا حصرية ميزة

هدايا تُمنَح مع الدبلوم لدعم مسيرتك المهنية

01ميزة حساب Canva Pro مجاناً لمدة عام
02ميزة مكتبة قوالب مدفوعة ضخمة
✨ مميزات الدبلوم
🌱

المستوى التأسيسي

HTML5 و CSS3 والمشروع التطبيقي — مجاناً بالكامل.

🏗️

المستوى المتقدم

متجر Bootstrap + منصة LMS بـ Tailwind + موقع عقاري بـ SASS.

🎯

أحدث التقنيات

Bootstrap, Tailwind CSS, SASS, Git والسيرفرات.

🎁

هدايا حصرية

Canva Pro + مكتبة قوالب مدفوعة مجاناً.

🚀 ابدأ بالمستوى التأسيسي (مجاناً بالكامل) ثم انتقل للمستوى المتقدم المدفوع لبناء مشاريع احترافية!