موقع تعريفي لمنصة تعليمية

### مشروع موقع ويب تعريفي لمنصة تعليمية

يهدف هذا المشروع إلى تطوير موقع ويب تعريفي لمنصة تعليمية تقدم مجموعة متنوعة من الدورات والبرامج التعليمية. الهدف من الموقع هو تسهيل وصول المستخدمين إلى معلومات شاملة عن المنصة وتشجيعهم على الانضمام والاستفادة من الدورات المتاحة.

#### **وصف مفصل للمراحل وكيفية التنفيذ:**

1. **التحليل والتخطيط:**

- تم تحديد المتطلبات الأساسية للمشروع بعد جلسة مع العميل لفهم رؤيته وأهدافه.

- قمت بإنشاء خارطة الموقع (Sitemap) لتوضيح الهيكل الأساسي للصفحات وترابطها.

2. **تصميم واجهة المستخدم (UI):**

- استخدمت برنامج **Figma** لتصميم واجهة المستخدم.

- ركزت على تصميم متجاوب يناسب جميع الأجهزة (شاشات كبيرة، أجهزة لوحية، وهواتف ذكية).

- تم اختيار لوحة ألوان هادئة وخطوط عصرية لخلق تجربة مستخدم مريحة.

3. **التطوير البرمجي:**

- تم بناء الموقع باستخدام:

- **HTML5** و**CSS3** لتصميم الهيكل والمظهر.

- **JavaScript** لإضافة عناصر تفاعلية مثل القوائم المنسدلة والأزرار التفاعلية.

- **WordPress** كنظام إدارة محتوى لتسهيل التحديثات المستقبلية للموقع من قبل العميل.

- أضفت تكاملًا مع إضافات WordPress مثل:

- **Elementor** لتصميم الصفحات بسهولة.

- **Yoast SEO** لتحسين محركات البحث.

- تم تحسين سرعة التحميل باستخدام ضغط الصور وتقنيات التخزين المؤقت (caching).

4. **إضافة محتوى الموقع:**

- قمت بإنشاء قسم يعرض معلومات المنصة (الرؤية والرسالة).

- أضفت صفحات تفصيلية لكل دورة، تتضمن الأهداف والمحتوى الدراسي والفوائد.

- أنشأت قسمًا لقصص نجاح الطلاب مع شهادات وصور حقيقية لتعزيز مصداقية المنصة.

5. **تحسين تجربة المستخدم (UX):**

- صممت قسمًا للأسئلة الشائعة (FAQ) لتقليل استفسارات الدعم.

- أضفت نموذج تسجيل بسيط يسهل على المستخدمين الاشتراك.

6. **اختبار الموقع:**

- تم اختبار الموقع على متصفحات وأجهزة متعددة لضمان الأداء الجيد.

- استخدمت أدوات مثل **pagespeed.web.dev** لتحسين الأداء وتحليل تجربة المستخدم.

#### **اللغات والأدوات المستخدمة:**

- **لغات برمجية:** HTML5، CSS3، JavaScript.

- **إطار العمل:** WordPress.

- **أدوات التصميم:** Figma.

- **أدوات تحسين الأداء:** Yoast SEO، Google Lighthouse.

#### **مميزات الموقع:**

- تصميم متجاوب بالكامل يناسب جميع الأجهزة.

- سهولة التصفح مع هيكلية واضحة للمحتوى.

- تحسينات لمحركات البحث لضمان ظهور جيد في النتائج.

- إمكانية التحديث وإضافة المحتوى بسهولة عبر لوحة التحكم.

#### **مخرجات المشروع:**

- تم تسليم ملفات المصدر بما يشمل:

- ملفات HTML وCSS وJavaScript.

- لقطات شاشة من داخل برنامج Figma توضح تصميم الواجهة.

- تقرير تحسين محركات البحث (SEO).

- دليل استخدام WordPress لتحديث المحتوى.