Vinny's ( Coffee shop )

الصفحة دي كانت من مشروع الكلية مصممها انا والفريق بتاعي مصممينها بلغة HTML وكمان مربوطة بملف CSS خارجي لتنسيق التصميم، وبرضو استخدمت JavaScript علشان أضيف شوية وظائف تفاعلية زي عرض المنتجات بطريقة مختلفة (ليست، جريد، ديتيلز) وكمان بحث داخل المنتجات.

محتوى الصفحة:

دي صفحة بتعرض منتجات كافيةمتقسمة لقسمين:

قسم للمشروبات (drinks)

وقسم للحلويات (desserts)

وكل منتج معاه صورة بجودة عالية، وسعره، ووصف بسيط ليه

الأدوات والبرامج اللي استخدمتها:

HTML5: لهيكلة الصفحة بالكامل (العناوين، الصور، الأقسام، الأزرار...)

CSS (بملف خارجي): لتنسيق الألوان، والخطوط، وتظبيط الشكل العام، وعملت كمان دعم للوضع الليلي (dark mode) باستخدام switch

JavaScript: عشان أضيف وظيفة الفلترة (search) بين المنتجات، وكمان عرض المنتجات بأكتر من شكل (grid / list / details view).

Font Awesome: علشان استخدمت أيقونات جاهزة زي أيقونة الهوم، وأيقونة الدعم، وأيقونات الوضع الليلي

طريقة التنفيذ:

بدأت بهيكلة الـHTML وقسمت الصفحة بشكل منطقي (Top Bar ,Products , Footer)

بعد كده التنسيق بـCSS، وخليت كل جزء في الصفحة ليه class خاص بيه، ونسقت التصميم يكون بسيط ونظيف ومرتب.

بعدين أضفت شوية جافاسكريبت علشان:

أقدر أبحث عن المنتجات بكلمة

أغيّر طريقة العرض (من جريد إلى ليست أو ديتيلز)

أظهِر النتائج بشكل ديناميكي

ضفت شوية أكواد عشان الوضع الليلي يتفعل ويتغيّر شكل الصفحة بالكامل

المهارات اللي اكتسبتها من خلال المشروع:

تنظيم الكود وفصل التنسيق والوظائف

استخدام responsive design بشكل مرن

التفكير في تجربة المستخدم زي البحث وطريقة العرض

معرفة باستخدام أدوات التصميم والأيقونات

وكل المشاريع دي انا كودتها من خلال Visual Studio