Midterm Exam: Commercial Website Design 2 - PDF

Midterm Exam: Commercial Website Design 2 (Practical Exam) Instructions: The exam duration is 3 days.  Use your development environment to complete the tasks.  Submit your files and/or hosted link before the end of the exam.  Follow best practices in web design and coding.  Exam...

Midterm Exam: Commercial Website Design 2 (Practical Exam) Instructions: The exam duration is 3 days.  Use your development environment to complete the tasks.  Submit your files and/or hosted link before the end of the exam.  Follow best practices in web design and coding.  Exam Tasks: Task 1: Responsive Homepage Design (30 Marks)  Create a responsive homepage for a fictional e-commerce website selling gadgets.  Requirements:  Include a navigation bar with at least 4 links (e.g., Home, Products, About Us and Contact).  Add a hero section (carousel) with a background image and add left-center text above the carousel a call-to-action button (e.g., "Shop Now").  Ensure the page adapts to both mobile and desktop screens using bootstrap 5.3.  Task 2: Product Listing Page (30 Marks)  Design a product listing page for the same website.  Requirements:  Display at least 16 products using a bootstrap grid.  Each product should show an image, name, price, and a button (e.g., "Add to Cart").  Style the page using CSS to ensure visual appeal. Task 2: Form Validation (20 Marks)  Create a "Contact Us" form that includes:  Fields for name, email, phone number, and message. Task 3: Footer Design (20 Marks) Design a professional footer for the e-commerce website. Requirements: Include the following sections:  About Us: A short description of the website or company.  Quick Links: Links to key pages (e.g., Home, Products, Contact Us, FAQ).  Contact Information: Email, phone number, and address.  Social Media Icons: Add icons or links to at least 3 social media platforms.  Style the footer to match the overall design of the website.  Ensure the footer is responsive and sticks to the bottom of the page. Bonus Task (Optional): Add Interactivity (10 Marks)  Create a hover effect for the product listing page to display additional details (e.g., a short description or discount). Submission:  Save all your work in a folder named: Midterm_.  Submit the folder or the hosted project link via the provided submission method. Evaluation Criteria:  Code Quality: Readability, structure, and comments.  Responsiveness: Pages should work well on different devices.  Aesthetics: Visual design and user-friendliness.  Functionality: Ensure all features work as expected. Good luck!