UCI201: Internet Technologies and the Web

Assignment: Group Project - E-Commerce Website Development

Objective:
The aim of this assignment is to enhance your skills in web development by creating a fully
functional e-commerce website using HTML5, CSS3, and JavaScript. The project will involve
designing, developing, and testing an online shopping platform that provides an engaging user
experience.
Assignment Guidelines:
1. Group Formation:
o Students will form groups of 20. Each group will collaborate to design and
implement an e-commerce website.
o Roles should be assigned within each group to cover different aspects of the
project, such as front-end development, design, content creation, and testing.
2. Project Requirements:
The e-commerce website must include the following features:
o Homepage:
 A visually appealing homepage that highlights the main features of the
website and includes navigation links.
 A header with a navigation bar containing links to various sections such as
"Home," "Shop," "About Us," and "Contact Us."
 A footer with copyright information, social media links, and contact
details.
o Product Listing Page:
 A product catalog page displaying various products for sale.
 Each product should have a title, image, price, and description.
 A filtering or sorting option for users to find products based on categories
or price range.
o Product Detail Page:
 A detailed view of a selected product, including an enlarged image, a more
detailed description, price, and an "Add to Cart" button.
o Shopping Cart:
 A shopping cart page that allows users to add, view, update, or remove
items.
  A summary of the total price and an option to proceed to checkout.
o Checkout Page:
 A form where users can enter their shipping and payment information.
 Basic client-side validation for form inputs.
o About Us Page:
 A section that provides information about the organization or team behind
the e-commerce website.
o Contact Us Page:
 A form for users to send inquiries or feedback, including fields for name,
email, subject, and message.
o User Interface Enhancements:
 Use of modern design principles to ensure a responsive and user-friendly
experience on different devices (desktop, tablet, mobile).
 Application of animations, transitions, and other effects for a polished
look.
3. Technical Requirements:
o HTML5: Utilize semantic HTML5 elements to structure the content
appropriately.
o CSS3: Implement styling using CSS3 features such as flexbox, grid layout, media
queries, transitions, and animations.
o JavaScript: Use JavaScript to enhance interactivity, such as form validation,
adding items to the cart, and updating totals dynamically.
o Version Control: Use Git for version control to track the project's development
process.
4. Project Milestones:
The project will be divided into the following milestones:
o Milestone 1: Project planning and group formation (Week 1).
o Milestone 2: Design mockups and wireframes (Week 2).
o Milestone 3: HTML structure and initial CSS styling (Week 3).
o Milestone 4: JavaScript integration for interactivity (Week 4).
o Milestone 5: Testing, debugging, and final touch-ups (Week 5).
 o Milestone 6: Final presentation and project submission (Week 6).
5. Deliverables:
o Source Code: Submit the complete source code for the website, including
HTML, CSS, JavaScript files, and images.
o Project Report: A brief report outlining the development process, technologies
used, and roles of each group member.
o Presentation: A 10-minute presentation demonstrating the website's features and
discussing the development experience.
6. Grading Criteria:
The project will be assessed based on the following aspects:
o Functionality (40%): Completeness of the features and interactivity.
o Design (25%): Visual appeal, responsive design, and usability.
o Code Quality (20%): Proper use of HTML5, CSS3, and JavaScript, including
comments and code organization.
o Documentation (10%): Clarity and thoroughness of the project report.
o Presentation (5%): Effectiveness and clarity of the presentation.
Submission Deadline:
All deliverables are due by 15th Nov 2024. Submit the source code and project report through the
course's online portal.
Note:
 Students are encouraged to use online resources, but plagiarism will not be tolerated.
Ensure all code and content are original or appropriately referenced.
 Assistance will be available during scheduled lab sessions to address any development
challenges.
Good luck, and enjoy the process of creating a real-world web application!