IT 404 Saudi Electronic University Web Design Worksheet

College of Computing and InformaticsProject
Deadline: Monday 05/06/2023 @ 23:59
[Total Mark is 14]
Student Details:
CRN:
Name:
Name:
Name:
ID:
ID:
ID:
Instructions:
• You must submit two separate copies (one Word file and one PDF file) using the Assignment Template on
Blackboard via the allocated folder. These files must not be in compressed format.
• It is your responsibility to check and make sure that you have uploaded both the correct files.
• Zero mark will be given if you try to bypass the SafeAssign (e.g. misspell words, remove spaces between
words, hide characters, use different character sets, convert text into image or languages other than English
or any kind of manipulation).
• Email submission will not be accepted.
• You are advised to make your work clear and well-presented. This includes filling your information on the cover
page.
• You must use this template, failing which will result in zero mark.
• You MUST show all your work, and text must not be converted into an image, unless specified otherwise by
the question.
• Late submission will result in ZERO mark.
• The work should be your own, copying from students or other resources will result in ZERO mark.
• Use Times New Roman font for all your answers.
Description and Instructions
Pg. 01
Description and Instructions
• 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.
Description and Instructions
Pg. 02
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
Pg. 03
Description and Instructions
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.
Description and Instructions
Pg. 04
Project Requirements:
1.
2.
3.
4.
The number of Web pages must be at least 5, inclusive main page.
Use the same theme across the website.
Use correct HTML syntax.
The students must use following HTML elements:
• Paragraph
• Headings
• Figures
• Sections
• Navigation
• Tables
• Headers/Footers
• Inline elements
• Lists
• Links
• Images (Inline and Background)
• iframe
• Form
• CSS
• JavaScript
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: PASTE 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, animations…etc).
Description and Instructions
Pg. 05
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.
Marking Criteria for Project:
Report Completeness and documentation
/10
The Web pages contain the elements specified in the project.
/10
Navigation (Links are clear and located in the same area on
each page. All links are functional)
/10
All elements are in the proper syntax with consistent
alignment, proximity, repetition, and contras.
/10
All codes are neat and organized in a proper way
/10
The website clearly demonstrates (using CSS) design
principles with consistent alignment, proximity, repetition, and
contras.
/10
Proper use of JavaScript.
/10
User-friendly website: optimized for all devices such as
desktops, tablets, and mobile phones
/10
Project presentation and demonstration
/20
Total
Final Grade
/100
/14
Project
Pg. 06
14 Marks
Project
WEBSITE CODE AND SCREEN SHOTS