إتقان

اسم المشروع: منصة إتقان - منصة تعليمية تفاعلية لتعلم التصميم والبرمجة

1. وصف المشروع:

مشروع "إتقان" هو منصة تعليمية متكاملة تهدف إلى تقديم مسارات تعليمية ودورات تدريبية في مجالات البرمجة وتطوير الواجهات (Front-End) والأمن السيبراني. يتميز الموقع بواجهة مستخدم حديثة وتفاعلية تعتمد على نظام العرض الديناميكي لتسهيل تصفح الكورسات والمسارات التعليمية.

2. ميزات المشروع (Key Features):

نظام سلايدر (Hero Slider) ذكي: تم بناء نظام عرض شرائح تفاعلي في مقدمة الموقع للترويج لأهم المسارات التعليمية، مع إمكانية التنقل التلقائي أو اليدوي.

عرض ديناميكي للكورسات (Dynamic Content Loading): استخدام الجافاسكريبت لإنشاء عناصر الصفحة برمجياً (DOM Manipulation)، مما يسمح بتحميل المزيد من الكورسات والمسارات عند الطلب دون الحاجة لإعادة تحميل الصفحة.

تصميم بطاقات احترافي (Modern Cards Design): استخدام تأثيرات بصرية متقدمة في CSS مثل الشفافية والأيقونات الخلفية الكبيرة وتأثيرات التحويم (Hover Effects) لإعطاء طابع عصري.

نظام تقييم وأسعار مدمج: تحتوي كل بطاقة كورس على نظام نجوم للتقييم وعرض للسعر بشكل جذاب ومميز.

تجاوب تام (Responsive Design): تم ضبط التصميم ليعمل بسلاسة على كافة الشاشات مع استخدام أنظمة Layout حديثة.

3. التحليل التقني وطريقة التنفيذ:

لغات البرمجة: تم استخدام HTML5 لبناء الهيكل الدلالي، و CSS3 للتنسيق المتقدم، و Vanilla JavaScript للتحكم في منطق الصفحة.

منطق الجافاسكريبت (Logic):

بناء دوال مخصصة (createCor, loadTracks) لإنشاء واستنساخ العناصر (Cloning nodes) وتعبئتها بالبيانات من مصفوفات برمجية.

تنفيذ وظائف التنقل (rtl, ltr) للتحكم في السلايدر مع ميزة التنقل التلقائي باستخدام setInterval.

هندسة التنسيق (Styling):

استخدام CSS Variables لتوحيد الهوية البصرية والألوان عبر الموقع.

الاعتماد على Flexbox لتنظيم العناصر وضمان مرونة التصميم.

استخدام خطوط عربية متخصصة (Cairo, Tajawal, Fustat) لتعزيز تجربة المستخدم العربي.

4. أقسام الموقع:

الهيدر التفاعلي: يحتوي على قائمة تنقل أيقونية ثابتة في أسفل الشاشة للهواتف لسهولة الوصول.

قسم العروض (Hero Section): يعرض أهم الدروس والمجانية والمسارات المكثفة.

قسم الكورسات: عرض الدورات المنفردة مع تفاصيل السعر والتقييم.

قسم المسارات التعليمية: تفاصيل دقيقة للمناهج الدراسية لكل مسار (مثل Full-Stack، Data Science، و Cyber Security).