IT 404 Saudi Electronic University Web Design Questions

College of Computing and InformaticsProject
Deadline: Monday 13/2/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 choosing any of the following website design scenarios.
Select one of the below scenarios and create a website based on it.
• 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 5/1/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
Learning
Outcome(s):
LO1:
Identify most
HTML tags and
CSS properties
and use a text
editor to construct
the basic HTML
and CSS
structure for a
webpage.
LO2:
Develop websites
that present
information,
graphics and
hypertext using
CSS and
JavaScript.
LO4:
Evaluate the
effectiveness of a
web design in
respect to its
context.
Topic Scenarios
Look at the following Project Scenarios:
Scenario 1
There is a furniture store that is needed to have a website to expand the sales
around the country. The store sells different items such sofas, tables, lamps
etc. The website needs to have the following requirements to be favorable for
the user:
1. The website will have the main page (index.htm) with the proper theme where
the feel and style of a website representing the brand and have a good impact on
its users.
2. Add a Navigation menu to all pages (appear in the same area on all pages).
3. Describe the objective or the purpose of the website in paragraphs.
4. Provide additional pages to the main page, and each page will be linked
according to the logical flow of the website (at least 4 additional pages).
5. 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.
6. Registration form/ Login feature to be included for customers.
7. Contact page that contains the information for contacting (location, working
hours, email etc.)
8. Allow the user to change the website’s background color (provide at least three
colors).
Description and Instructions
Pg. 03
Scenario 2
With a busy life, an online bookstore website is needed to save people time
and provide them with up-to-date books. An online bookstore website contains
various books in stock along with their title, author and cost. The website needs
to have the following requirements to be favorable for the user:
1. The website will have the main page (index.htm) with the proper theme where
the feel and style of a website representing the bookstore and have a good
impact on its users.
2. Add a Navigation menu to all pages (appear in the same area on all pages)
3. Describe the objective or the purpose of the website in paragraphs.
4. Provide additional pages; each page will be linked according to the logical flow
of the website (at least 4 pages).
5. A visitor to the website can view a large selection of books organized into
several categories (Books, Fiction, Nonfiction, eBooks and Audiobooks). It
must include the view of the books, their images, and descriptions (title, author
and cost) in the form of tables. The shopping cart and Wishlist must be
included.
6. Registration form/ Login feature to be included for customers.
7. Contact page that contains the information for contacting (location, working
hours, email etc.)
8. Allow the user to change the website’s background color (provide at least three
colors).
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 create a small website consisting of a sufficient number of web
pages with the 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:
Description and Instructions
Pg. 05
Contains all the files of the project (HTML files,
images, sounds, animations…etc).
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.
/20
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
Project presentation and demonstration
/20
Total
Final Grade
/100
/14
Project
Pg. 06
14 Marks
Project
WEBSITE CODE AND SCREEN SHOTS