يوجد في منطقتك مأوى للحيوانات ، يعمل على زيادة وعي الناس بأهمية الرفق بالحيوان و حثهم على التبني بدل الشراء. ولعمل ذلك، قرروا بناء موقع إليكتروني و تريد منك مساعدتهم في عمل ذلك.
في هذا المشروع ستقوم ببناء الصفحة الرئيسية للموقع، فكل ما عليك فعله هو مطابقة التصميم المرفق. سيتم توفير كل من الصور و ملف الـ HTML و عليك فقط إستخدام ملف الـ CSS.
في الدروس الأخيرة، تعلمت الـ HTML و الـ CSS ويعتبر انك اكتسبت المهارة، لكن حتى تكتسبها فعلاً ينبغي عليك التدرب عليها وهذا هو هدف هذا المشروع. حيث ستقوم باستخدام كل ما تعلمته في الدروس السابقة من positioning, colors, media queries , وغيرها، لعمل صفحه مطابقة للتصميم.
يجمع هذا المشروع العديد من الأفكار والمهارات التي تعلمناها خلال الدروس والتي تشمل على:
- تنظيم تنسيق التطبيق عن طريق الـ positioning
- تطبيق يعمل على مختلف الاجهزة responsive design
- العمل مع الصور و جعلها responsive
- عرض لائحة من القوائم
- إستخدام pseudo-selectors
يجب أن يحتوي المشروع على المزايا التالية:
- أن يكون التطبيق مماثل للتصميم.
- فقط إستخدام ملف الـ CSS. حيث سيوفر لك ملف الـ HTML بكافة الأوسم و خصائص الـ class و الـ ID اللازمة.
- يجم ان يكون التصميم responsive أي نسق خاص لكل من الـ desktop، و الـ tablet و الـ mobile.
لإكمال هذا المشروع يجب عليك إنشاء تحميل ملف المشروع من الرابط اعلاه، و إستخدام code editor لإتمام المتطلبات الخاصة بالمشروع و المذكورة أعلاه.
سيتم تقييم المشروع بناء على المعايير الآتي ذكرها تحت بند تقييم المشروع.
- يجب أن يكون الموقع مطابق للتصميم المرفق اعلاه.
- استخدام الـ media queries.
- عمل قواعد الـ CSS بالوصول إلى الوسم عن طريق الـ class او id
- يجب استخدام layout مناسب لعرض الواجهة بالشكل المطلوب.
- يجب أن يعمل التطبيق على المحاكي أو الموبايل دون أخطاء.
- يعمل على اجهزة مختلفة أي responsive
- لا يجب أن يظهر المحتوى مقتطع منه جزء خارج إطار الشاشة، يجب أن يتوافق الـ layout مع أحجام الشاشات دون اقتصاص جزء من المحتوى.
- يجب عدم لمس ملف الـ HTML
- يجب عدم إضافة أسطر فارغة زائدة غير ضرروية.
- يجب تنسيق الكود بشكل مناسب بحيث تكون هناك ازاحة بين الكود داخل الدالة وبين تعريف الدالة.