ShopMax Online Shopping

1. نوع العمل

تطوير واجهة مستخدم (UI) متكاملة لمتجر تجارة إلكترونية، تشمل الصفحة الرئيسية، عرض المنتجات، وتذييل الصفحة (Footer) مع نموذج تواصل.

2. الميزات التقنية والفنية

هيكلية HTML5 دقيقة: استخدام وسوم HTML الدلالية (Semantic HTML) مثل <header>، <section>، و <footer> لضمان تحسين محركات البحث (SEO) وسهولة القراءة.

تصميم متجاوب (Responsive Design): تم استخدام تقنية CSS Grid و Flexbox لضمان تناسق العناصر على مختلف الشاشات، مع تخصيص شروط (Media Queries) للهواتف والأجهزة اللوحية.

استخدام متطور لـ SASS: اعتمد المشروع على بنية متقدمة من خلال تقسيم الملفات (Modules) واستخدام الميزات التالية:

Variables: لتوحيد الألوان (مثل $primary-color) والخطوط عبر الموقع.

Mixins: لتسهيل كتابة الأكواد المتكررة الخاصة بالتجاوب.

Nesting: لتنظيم الكود وجعله أكثر قابلية للصيانة.

تفاعلية JavaScript: إضافة خاصية التمرير السلس (Smooth Scroll) عند النقر على روابط القائمة لزيادة راحة المستخدم.

تنسيق بصري جذاب: استخدام ظلال ناعمة ($shadow) وزوايا منحنية (border-radius) وتأثيرات حركية (transition) عند تمرير الفأرة على المنتجات.

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

التخطيط والهيكلة: بناء هيكل الصفحة باستخدام HTML5 وتوزيع المحتوى ليشمل قسم الترحيب (Hero)، المنتجات المميزة (Featured Products)، ومعلومات التواصل.

التصميم البرمجي (Styling): استخدام SASS لتنسيق الواجهة، حيث تم فصل المتغيرات (Variables) والقائمة (Navbar) في ملفات مستقلة لسهولة الإدارة.

إضافة الموارد: دمج خطوط Google Fonts (Poppins) وأيقونات Font Awesome لإضفاء لمسة احترافية.

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