COMP 1105 Assignment: Health-Focused E-Commerce Website: A Web Technologies Project Using HTML5, CSS, and JavaScript, Singapore

Learning Outcomes Covered in This Assessment

• Identify solutions to complex problems.
• Design and implement a business-oriented website.
• Evaluate, document, and present a multimedia website.
• Demonstrate evidence of reflection on academic performance by implementing feedback given.
• Use appropriate technology to simplify studies, e.g., use of information resources, production of individual assignment, communication with tutors and peers.

Web Technologies Assignment – Individual Work

Please read the entire assignment brief to ensure you understand all the requirements before you begin.

A: Individual Assignment

This assessment should be attempted individually and independently. Individual assignment work can facilitate your learning, improve thinking skills, practical skills, and prepare you to work independently while collaborating in groups across borders spread across the globe in your future careers.

The marking criterion for the Coursework is based on the assessment marking scheme in ANNEX A and the assessment rubric included in the last page of this assessment brief in ANNEX B.

B: Project Specification

1: Introduction

The key objective of this assignment is to assess the students’ ability to understand and utilize the technologies used in web design/development. Implementing the website includes the construction of a graphically interesting and user-friendly website using HTML5, CSS, and JavaScript, etc.

1.1: Task List

This assignment consists of TWO (2) tasks.

1.2: Task 1 – Web Design and Implementation (75 marks)

E-Commerce Website Project: Health-Focused Online Store

Create an e-commerce platform designed for health-conscious adults and teenagers, offering a curated selection of:

• Low-carb and low-sugar foods (e.g., keto snacks, organic protein bars, gluten-free options)
• Low-sugar or zero-sugar beverages (e.g., diet sodas, herbal teas, natural fruit-infused drinks)

Your task is to design and develop a user-friendly website that provides a wide range of health-focused products tailored to the needs of your target audience. The online store should cater to both men and women, ensuring easy accessibility to essential health products.

Project Requirements

• Affordable Pricing & Discounts: Offer competitive prices and highlight special promotions.
• Easy Navigation & Smooth User Experience: Ensure a seamless browsing and shopping experience.
• Minimum of 5 Pages: The website must include essential pages such as Home, Shop, Product Details, About Us, and Contact.

Key Features to Include

1. Website Design & Layout

Your website should have a clean, modern, and responsive design to ensure a smooth experience across different devices. Consider using:

• A well-organized homepage showcasing featured products and promotions
• A simple and intuitive navigation menu (e.g., Home, Shop, About Us, Contact, Cart)
• High-quality images and detailed product descriptions
• A consistent color scheme that reflects a health-conscious theme (e.g., green, blue, or pastel shades)

2. Required Pages (Minimum 5 Pages)

Your website must include at least the following:

1. Home Page:
   • A welcoming introduction to the e-commerce store
   • Featured products and special promotions
   • A search bar for easy product discovery
2. Shop/Product Listings Page:
   • A categorized product display (e.g., Low-Carb Foods, Zero-Sugar Drinks)
   • Product thumbnails, names, short descriptions, and prices
   • Sorting and filtering options (e.g., by price, category, or new arrivals)
3. Product Details Page:
   • High-resolution images of the product
   • Detailed descriptions including ingredients, benefits, and pricing
   • Customer reviews and ratings
   • An “Add to Cart” button
4. About Us Page:
   • A brief story about the e-commerce business
   • Mission and values of the brand (e.g., promoting healthier lifestyles)
   • Contact details and social media links
5. Contact & Support Page:
   • A contact form for inquiries
   • Customer support information (e.g., email, phone, live chat)
   • FAQ section addressing common questions

Assessment Criteria:

You will create an HTML page with content arranged appropriately for the development of a CSS layout. The page should be placed in your web design folder and named index.html. The link on the first page of this syllabus should lead to this file. You should include:

1. A title in the title bar.
2. One image.
3. Your name.
4. A navigation scheme for the assignments: you should use “#” in place of the not-yet-completed links.
5. You may include basic links to social media.
6. Other background information.
7. The text and the links should be formatted using an external CSS page.
8. You should also comment on the code with at least four comments.
9. The site should validate at https://html5.validator.nu/

Your website should also demonstrate the use of the following:

Key Features:

1. Use Cascading Style Sheets (CSS)
2. Consistent Webpage Design
3. Proper file and folder conventions
4. Cross Browser / Platform Support
5. Presence of a title
6. Correct HTML/CSS.
7. Usage of Frame
8. Hyperlinks
9. HTML/CSS background
10. HTML/CSS colors
11. HTML/CSS Fonts
12. HTML/CSS Marquess
13. Text links
14. Image links
15. Links with rollovers
16. Email links
17. Form(s)
18. Tables
19. JavaScript Validation
20. JavaScript Redirection
21. Use of Named Anchors
22. Minimum 5 Image sources
23. HTML Embed multimedia
24. Aesthetic choices:
    • Legible text
    • Non-clashing colors that ruin legibility
    • Reasonable use of space (including alignment of boxes, etc.)
    • A clear focal point with one image.
    • Creativity
    • Appropriateness to purpose
    • The use of Flexbox

Students will create a responsive web page.

The page will include a text (and possibly image) based logo and at least six images, along with text added to the images—not through Photoshop. A header (and title) must be included, as must (non-working) links to at least five pages within the site (that should not be created).

Color choice, typography, and simplicity/appropriateness of images will be considered in grading. The HTML should validate with an external CSS file. The site must be responsive—

Consider: Lands’ End and Neiman Marcus and Men’s Wearhouse.

Students should consider location (or mask out background).

The results of usability testing should test the design in terms of three common interactions with the site (task analysis).

1.2: Task 2 – Presentation & Individual Viva-Voce (25 marks)

Task 2 consists of a presentation and live demonstration in which you will demonstrate your Health-Focused Online Store website in operation.

• Your presentation is a condensed version of your report and your website, to be presented to the lecturer.
• Everyone is given 20 minutes for everyone’s presentation and 10 minutes Q&A for each team.
• See oral presentation – Viva Voce Rubrics in ANNEX B.