Learning Goal: I’m working on a html / css project and need support to help me learn.
- The work should be your own. Copying from students or other resources will result in ZERO marks.
- You are advised to make your work clear and well-presented; marks may be reduced for poor documentation. This includes filling in your information on the cover page.
- You MUST show all your work; text must not be converted into an image.
- Late submission will result in ZERO marks being given.
- Use Times New Roman font with font size 12.
- In this project, every group of students is required to apply the knowledge gained throughout the course by designing a website for the following scenario. The work on this project must be performed by a group (maximum of 3 students). Students must form groups on their own and send the list of the students to their respective instructors. The leader of each group must send an email with the group member’s details (name, id) before 1/5/2023 (midnight), and the group leader must submit the project with all group member details mentioned on the cover page. The work should be your own. Copying from students or other resources will result in ZERO marks. You are advised to make your work clear and well-presented; marks may be reduced for poor documentation. This includes filling in your information on the cover page. You MUST show all your work; text must not be converted into an image. Late submission will result in ZERO marks being given. Use Times New Roman font with font size 12.
14 Marks Course Learning Outcome(s): CLO1: Identify most HTML tags and CSS properties and use a text editor to construct the basic HTML and CSS structure for a webpage. CLO2: Develop websites that present information, graphics and hypertext using CSS and JavaScript. CLO4: Evaluate the effectiveness of a web design in respect to its context. Scenario: A jewelry store is looking to expand its sales across the country by launching an online store. To make the website favorable for users, the following requirements need to be considered: 1. Responsive Design: The website must be responsive and optimized for all devices such as desktops, tablets, and mobile phones to provide a seamless user experience. 2. Visually Appealing Design: The main page of the website should have a clean, visually appealing design that reflects the brand’s identity and captures the attention of visitors. The design should be optimized for quick loading times, and all important information about the brand and its products should be easily accessible from the home page. 3. Easy Navigation: The website must have an intuitive navigation system that makes it easy for users to find what they are looking for. This can be achieved by categorizing the products into different sections such as Necklaces, Earrings, Rings, Bracelets, and Watches. The navigation menu should appear in the same area on all pages, making it easy for users to access it and navigate through the website. 4. Additional Pages: In addition to the main page, there should be additional pages on the website such as About Us, Our Products, Reviews/Testimonials, and Contact Us. Each page should be linked according to the logical flow of the website. 5. Product Descriptions: The website must include a view of the products and their images with interesting descriptions (items, types, prices) in the form of tables. The shopping cart and Wishlist must be included so that users can easily purchase products. 6. User Account Management: Include a registration form and login feature for customers to create and manage their accounts. The registration form should collect necessary information such as name, email address, and shipping address. Customers should be able to view their order history, track their current orders, and save their payment details for faster checkout using HTML forms. Additionally, customers should be able to update their personal information and reset their password if they forget their login credentials. A user-friendly account management feature using HTML forms will enhance the user experience and increase customer retention. 7. Contact Page: Create a contact page that contains all necessary information for customers to get in touch with the jewelry store easily. The contact page should include the store’s physical address, phone number, email address, and a contact form. The contact form should allow customers to send inquiries or messages to the store directly from the website. The form should include fields for the customer’s name, email address, subject, and message. Additionally, the contact page should have a map showing the store’s location and operating hours. By providing all necessary information and making it easy for customers to contact the store, you can improve customer satisfaction and increase sales. 8. Customizable Design: Allow users to personalize their experience on the website by providing options to change the website’s background color. Provide at least three color options to choose from to suit their preferences. Additionally, provide options to change font sizes and styles to improve readability for users. This customization will enhance the user’s browsing experience and make the website more appealing to them.
Project Requirements: 1. The number of Web pages must be at least 5, inclusive main page. 2. Use the same theme across the website. 3. Use correct HTML syntax. 4. The students must use following HTML elements:Paragraph Lists Headings Links Figures Images (Inline and Background) Sections iframe Navigation Form Tables CSS Headers/Footers JavaScript Inline elements 5. Each group needs to make a presentation of their project based on the following guidelines: The maximum time for a presentation is 5 mins. All the group members need to present. No need to make PowerPoint slides. You need to run/demonstrate your project pages and present their functionality and interfaces. Use any recording software such as Camtasia to record your presentation. After finishing your presentation recording, upload the recorded video to any cloud service and paste the access URL here: o i.e: YOUR VEDIO URL HERE Files to submit: 1. IT404_Project.docx: The group must use the same file (IT404_Project.docx) to prepare his answer. 2. IT404_Project.pdf Prepare a PDF version of this file (IT404_Project.pdf). 3. IT404_Project.zip: Contains all the files of the project (HTML files, images, sounds, animationsetc). Student will upload: 1. IT404_Project.docx 2. IT404_Project.pdf 3. IT404_Project.zip NOTE: ONLY the project leader needs to upload the mentioned files.
