عن الكورس
هذا المسار هو رحلة هندسية متكاملة لبناء تطبيقات الويب (Web Applications). لا يقتصر الكورس على تصميم صفحات ثابتة، بل يعلم الطالب كيف يعمل الإنترنت حقاً عبر دمج شقين أساسيين:
واجهة المستخدم (Front-End): ما يراه الزائر ويتفاعل معه، باستخدام (HTML, CSS, Bootstrap, JavaScript).
الخوادم وقواعد البيانات (Back-End): العقل المدبر خلف الكواليس، باستخدام لغة (PHP) وقواعد بيانات (MySQL) لتسجيل الدخول، حفظ المعلومات، ومعالجة الطلبات.
هذا المسار يبني عقلية معمارية برمجية تجعل الطالب قادراً على ربط التصميم المرئي بالمنطق البرمجي وقواعد البيانات لإنتاج نظام تقني متكامل يعمل بكفاءة.
متطلبات الالتحاق
يُشترط وجود خلفية في البرمجة النصية (مثل كورس Python أو C++)، وفهم جيد لمفاهيم البرمجة الأساسية (المتغيرات، الشروط، الحلقات التكرارية).
اللغة: إجادة اللغة الإنجليزية (قراءة وكتابة) للتعامل السلس مع الأكواد واكتشاف الأخطاء.
مستويات الكورس
بناء صفحات ويب بـ HTML5 وCSS3: هيكل الصفحة، النصوص، الروابط، الجداول، النماذج، Flexbox.
المحاور الدراسية
- أساسيات لغة HTML: تعلم كيفية بناء هيكل الصفحة باستخدام الوسوم (Tags) الأساسية مثل العناوين (Headings)، الفقرات (Paragraphs)، والروابط (Links).
- إضافة المحتوى البصري: تعلم كيفية إدراج الصور (Images) والفيديوهات والقوائم (Lists) المنظمة وغير المنظمة داخل الموقع.
- تنسيق الموقع بلغة CSS: تعلم كيفية تغيير ألوان النصوص، أحجام الخطوط، وتنسيق الخلفيات لجعل الموقع يبدو احترافياً.
- إدارة تخطيط الصفحة (Layouts): فهم كيفية التحكم في أماكن العناصر باستخدام خصائص التنسيق المتقدمة.
- هيكلة الملفات: تعلم كيفية إنشاء ملفات الويب وتنظيمها داخل المجلدات ليتم تشغيل الموقع بشكل صحيح.
مخرجات التعلم
- إنشاء صفحة ويب كاملة (Static Website) تحتوي على نصوص وصور وروابط.
- التمييز بين لغات البرمجة والترميز وفهم دور كل منها في الموقع.
- تصميم واجهة مستخدم بسيطة وجذابة باستخدام الألوان والخطوط المتنوعة.
الأدوات المستخدمة
VS Code
في هذا المستوى، ينتقل الطالب من مجرد بناء صفحات ثابتة إلى بناء مواقع ويب كاملة الوظائف وتفاعلية. يركز الكورس على كيفية جمع البيانات من المستخدمين عبر النماذج (Forms)، وإضافة الجداول المنظمة، واحتراف فن التنسيق المتقدم باستخدام CSS لجعل المواقع تبدو كالمواقع العالمية التي نستخدمها يومياً.
المحاور الدراسية
- محور النماذج التفاعلية (HTML Forms): تعلم كيفية إنشاء حقول الإدخال (Inputs)، الأزرار، القوائم المنسدلة، وخانات الاختيار (Checkboxes) لجمع بيانات المستخدمين.
- محور تنظيم البيانات (Tables): احتراف بناء الجداول المعقدة لتنظيم المعلومات والبيانات بشكل منطقي وسلس.
- محور التنسيق المتقدم (CSS Advanced):
- التعامل مع الألوان والخلفيات المتعددة.
- فهم الـ (Box Model) للتحكم في المسافات والهوامش (Padding & Margin).
- إضافة التأثيرات عند مرور الماوس (Hover Effects).
- محور الروابط والوسائط: ربط الصفحات ببعضها البعض لإنشاء موقع متعدد الصفحات، وإضافة خرائط جوجل أو فيديوهات يوتيوب بشكل احترافي.
مخرجات التعلم
- تصميم جداول عرض البيانات (مثل جدول الحصص أو قائمة الأسعار) بشكل منسق.
- التحكم الكامل في مظهر الموقع وتوزيعه باستخدام خصائص CSS الاحترافية.
- ربط أكثر من صفحة ويب ببعضها البعض لبناء موقع متكامل (Multi-page Website).
تصميم مواقع متجاوبة احترافية بـ Bootstrap 5: Grid System، المكونات، تخصيص CSS.
المحاور الدراسية
- Bootstrap 5 Setup + CDN
- Grid System: rows, cols, breakpoints
- Navbar + Cards + Buttons + Badges
- Forms + Modals + Dropdowns + Accordion
- Responsive Utilities (d-none, d-flex)
- Custom CSS Variables + Override Bootstrap
- Flexbox & CSS Grid
- Animations & Transitions
- Final: Multi-page Responsive Website
مخرجات التعلم
- بناء مواقع متجاوبة لكل الشاشات
- استخدام Bootstrap Grid احترافياً
- تخصيص مكونات Bootstrap
- تطبيق CSS Variables والـ Transitions
- تسليم موقع Responsive متعدد الصفحات
الأدوات المستخدمة
Bootstrap 5
VS Code
CSS3
Google Fonts
Browser DevTools
بعد أن تعلم الطالب بناء شكل الموقع (HTML) وتنسيقه (CSS)، يأتي دور لغة JavaScript ليتحول الموقع من مجرد صورة ثابتة إلى نظام تفاعلي يستجيب للمستخدم، يحلل البيانات، ويقوم بعمليات ذكية تلقائية.
المحاور الدراسية
- أساسيات البرمجة بلغة JS: كيفية كتابة الأكواد داخل صفحات الويب والتعرف على بيئة العمل.
- التفاعل مع المستخدم (Output Methods): تعلم طرق عرض البيانات المختلفة مثل alert() و console.log() و document.write().
- المتغيرات وأنواع البيانات: فهم كيفية تخزين المعلومات (Variables) والفرق بين النصوص والأرقام والمنطق.
- العمليات الحسابية والمنطقية: استخدام جافا سكريبت لإجراء الحسابات المعقدة والتحقق من صحة البيانات.
- التحكم في المسار (Conditions): استخدام جملة if لجعل الموقع يتخذ قرارات (مثل: إذا كان السن أقل من 18، اظهر رسالة تحذير).
- التفاعل مع العناصر (DOM Introduction): بداية فهم كيفية تغيير محتوى صفحة الويب برمجياً عند الضغط على زر أو تحريك الماوس.
مخرجات التعلم
- كتابة برامج جافا سكريبت منظمة تعمل داخل أي متصفح.
- إنشاء رسائل تنبيه وتفاعل ذكية مع زوار الموقع.
- بناء آلة حاسبة بسيطة أو نظام للتحقق من درجات الطلاب.
- فهم منطق "الأحداث" (Events) وكيفية جعل الموقع يستجيب لضغطات الأزرار.
- تصحيح الأخطاء البرمجية (Debugging) باستخدام أدوات المتصفح الاحترافية.
الأدوات المستخدمة
VS Code
سيتعلم الطالب كيف يتحكم في خصائص العناصر برمجياً (DOM Manipulation)، وكيف يستجيب لكل حركة يقوم بها المستخدم (Events). الهدف النهائي هو بناء لوحة تحكم (Dashboard) تفاعلية بالكامل، مع تعلم أساسيات العمل الجماعي باستخدام GitHub.
المحاور الدراسية
- محور الأحداث (Events):
- التفاعل مع الضغط (Onclick) والتمرير (Onscroll).
- التحكم في لوحة المفاتيح (Onkeyup / Onkeydown) لبناء أنظمة إدخال ذكية.
- محور التوقيت والعمليات المؤجلة (Timers):
- تنفيذ أوامر بعد وقت محدد (SetTimeout) أو تكرارها (Interval).
- كيفية إيقاف العدادات (ClearTime / ClearInterval).
- محور إدارة المشاريع (Git & GitHub):
- رفع المشاريع على الإنترنت وتعلم أساسيات الـ Version Control.
- محور التطبيق العملي (Dashboard):
- تجميع كل ما سبق لبناء "داشبورد" تحتوي على رسوم تفاعلية، قوائم متحركة، وبيانات تتغير لحظياً.
- 3. مخرجات التعلم (ماذا سيتقن الطالب؟)
مخرجات التعلم
- رفع مشروعه الخاص على استضافة GitHub Pages ليراه العالم.
- بناء "Dashboard" تفاعلية تحتوي على أزرار وعدادات ومساحات عرض بيانات متغيرة.
الأدوات المستخدمة
VS Code
الهدف: أن يثبت الطالب لنفسه قدرته على بناء مشروع متكامل من الصفر دون مساعدة خارجية، لترسيخ المفاهيم التي تعلمها.
المحاور الدراسية
- منهجية العمل: يختار الطالب فكرة مشروع (مثلاً: Dashboard لمحل تجاري، موقع شخصي، أو منصة عرض بيانات) ويبدأ بتنفيذها سيكشن بسيكشن.
- التحدي: كتابة أكواد الـ HTML, CSS, JavaScript يدوياً بالكامل.
- المخرج: مشروع متكامل (Interactive Dashboard) يعكس قدرة الطالب على التفكير المنطقي، إدارة الـ DOM، التعامل مع الـ Events، وتنسيق الواجهات.
- المرحلة الثانية: احتراف أدوات الذكاء الاصطناعي مثل( GitHub Copilot )
- المحاور:
- Prompt Engineering للمبرمجين: كيف يطلب من الـ AI كتابة وظائف معقدة أو تحسين التنسيق.
- Code Debugging: استخدام الـ AI لاكتشاف الثغرات والأخطاء في المشروع الذي بناه في المرحلة الأولى.
- Rapid Refactoring: طلب تحسين جودة الكود (Clean Code) واقتراح ميزات إضافية ذكية.
في هذا المستوى، ينتقل الطالب من تصميم شكل الموقع إلى فهم "عقل" الموقع وكيفية تخزين البيانات وإدارتها باحترافية باستخدام لغة SQL.
المحاور الدراسية
- مقدمة في قواعد البيانات: فهم ماهية الـ Database والفرق بينها وبين الجداول العادية.
- لغة SQL الكاملة: احتراف أوامر التعامل مع البيانات (CREATE, INSERT, SELECT, UPDATE, DELETE).
- إدارة الجداول: كيفية بناء وتعديل جداول البيانات وتنظيم العلاقات بينها.
- استعلامات متقدمة: البحث داخل البيانات وترتيبها وتصفيتها للوصول للمعلومات بدقة.
الأدوات المستخدمة
MySQL / phpMyAdmin.
بعد فهم البيانات، نبدأ في تعلم لغة PHP لتحويل الموقع من صفحات ثابتة إلى صفحات تفاعلية تعالج البيانات وتتخذ القرارات.
المحاور الدراسية
- إعداد بيئة العمل: تجهيز سيرفر محلي باستخدام XAMPP وتشغيل أول كود PHP.
- أساسيات البرمجة: المتغيرات (Variables)، أنواع البيانات، والعمليات الحسابية والمنطقية.
- التحكم في المسار: احتراف الشروط (if / switch) والحلقات التكرارية (Loops) بأنواعها.
- التعامل مع المستخدم: استقبال البيانات عبر الـ Forms باستخدام ($_POST / $_GET) والتحقق من صحتها (Validation).
- إدارة الجلسات: فهم الـ Sessions والـ Cookies للحفاظ على بيانات المستخدم أثناء التنقل.
الأدوات المستخدمة
XAMPP, VS Code, PHP 8+.
المستوى النهائي حيث يجتمع كل ما سبق؛ يربط الطالب لغة PHP بقاعدة البيانات ليصنع تطبيق ويب حقيقي ومتكامل.
المحاور الدراسية
- الربط الذكي: توصيل PHP بـ MySQL باستخدام (mysqli / PDO).
- نظام CRUD الكامل: برمجة عمليات (إضافة، عرض، تعديل، وحذف) البيانات من الموقع مباشرة.
- بناء نظام تسجيل دخول (Login)، إنشاء حساب (Register)، وتسجيل خروج (Logout) آمن.
مخرجات التعلم
- إعداد XAMPP وبيئة PHP
- ربط الموقع بقاعدة بيانات MySQL
- تنفيذ CRUD كامل
- نظام تسجيل دخول وتسجيل
- تسليم موقع Full Stack حقيقي
الأدوات المستخدمة
XAMPP
VS Code
PHP 8+
MySQL / phpMyAdmin
HTML + CSS + Bootstrap
9
مستوى
8
محاضرة/مستوى
9 - 13 سنة / 14 - 18 سنة
الفئة العمرية
سعر المستوى الواحد
1,200 ج.م
سجّل الآن
- محاضرات أونلاين مباشرة عبر Zoom
- شهادة معتمدة من STEM.org
- مدربون متخصصون وخبراء
- مشاريع عملية وتطبيقية
- دعم فني ومتابعة مستمرة
محتوى الكورس
1
المستوى الأول: هيكلة وتنسيق الويب (HTML & CSS Basics)
2
المستوى الثاني
3
المستوى الثالث: Bootstrap 5
4
المستوى الرابع : JavaScript
5
المستوى الخامس: JavaScript المتقدم
6
المستوى السادس- ورشة نهائية
7
المستوى السابع هندسة وقواعد البيانات (SQL )
8
المستوى الثامن PHP Fundamentals
9
المستوى التاسع: PHP & MySQL (Backend)