Project Phase I
Pg. 1
Project Phase
Deadline: Tuesday 08/11/2022 @ 23:59
[Total Mark for this Project is 14]
Student Detail:
CRN:
Name: ##########
#######
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 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.
Pg. 2
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
Project Phase I
14 Marks
Look at the following Project Scenarios:
Scenario 1
There is a small shop down the road that sells different items such as sunglasses, wallets,
shoes etc. The owner decided to create a website to make it easier for customers to get
their products selected through the website.
1. The website will have a home page (index.htm) with a relevant theme and some
paragraphs describing the purpose of the website. (Theme is the overall look, feel and
style of a website representing its brand and has a good impact on its users.)
2. There will be sufficient number of additional pages and each page will be linked
according to the logical flow of the website.
3. The website must include sufficient number of relevant images of the products and
paragraphs explaining the individual products.
4. There will be lists of the available items and unavailable items using the list tags.
5. Tables must include the items, their types, and the prices.
6. Registration form to be included for customers.
Scenario 2
Having breakfast or lunch at work is a problem for most of the working people. They do
not have much time to prepare different healthy meals. Therefore, a young lady came up
with a small business idea to create a website for providing different meals for breakfast
and lunch.
1. The website will have a home page (index.htm) with a relevant theme and some
paragraphs describing the purpose of the website. (Theme is the overall look, feel
and style of a website representing its brand and has a good impact on its
users.)
2. There will be sufficient number of additional pages and each page will be linked
according to the logical flow of the website.
3. The website must include sufficient number of relevant images of different meals
and paragraph description about meals.
4. There will be lists of the breakfast, lunch, and dinner meals using the list tags.
Pg. 3
Project Phase I
5. Tables will include the meals packages and their prices.
6. Registration form to be included for customers.
Project Requirements Instructions:
The students must create a small website consisting of sufficient number of web pages
with the following HTML elements:
•
Paragraph
•
Headings
•
Figures
•
Sections
•
Navigation
•
Headers/Footers
•
Inline elements
•
Lists
•
Links
•
Images (Inline and Background)
•
Iframe
•
Form
•
CSS
•
JavaScript
Project Phase I
Pg. 4
Marking Criteria for Project:
The Web pages contain the items specified in the project.
Navigation (Links are clear and located in the same area on each page. All
links are functional)
All elements are in the proper syntax with consistent alignment,
proximity, repetition, and contras.
All codes are neat and organized in proper way
Website clearly demonstrates (using CSS) design principles with
consistent alignment, proximity, repetition, and contras.
Proper use of JavaScript.
Total
General instructions:
Select one of the above scenarios and create a website based on it. The number of
students in each group should be preferably 2 (3 only for exception). Student must form
groups on their own and send the list of the students to their respective instructors.
Important Notes:
•
The number of students in each group: 3
•
The number of Web pages must be at least 5
•
Use the same theme across the website
•
Use correct HTML syntax
•
Add Navigation menu to all pages (appear at the same area in all pages)
Pg. 5
Project Phase I
Each student/group has to prepare
1. IT404_Project.docx and IT404_Project.pdf:
a. The student must use the same file (IT404_Project.docx) to prepare
his answer.
b. For each part of the project (HTML) and for each page, the student
must copy and paste the website code and add screenshots of the
output with a brief explication of each functionality of the web
application.
c. Prepare a PDF version of this file (IT404_Project.pdf).
2. Project.zip: contains all the files of the project (HTML).
Student will upload:
1. IT404_Project.docx
2. IT404_Project.pdf
3. IT404_Project.zip
Pg. 6
Learning
Outcome(s):
Project
LO1:
WEBSITE CODE AND SCREEN SHOTS
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.
Project Phase I
14 Marks
Pg. 7
Project Phase I