Web design

profileSallum
IT404_Project.docx

Pg. 05

Project Phase I

Project Phase

Deadline: Thursday 15/4/2021 @ 23:59

[Total Mark for this Project is 10]

Web Design

IT404

https://www.seu.edu.sa/sites/ar/SitePages/images/logo.png

College of Computing and Informatics

Topic Scenarios

10 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.

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. Because of the Covid 19 pandemic, the owner of the shop finds it difficult attracting customers and consequently the number of visitors has become very low. Therefore, 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.

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

Marking Criteria for Project:

The Web pages contain the items specified in the project.

2.5

Navigation (Links are clear and located in the same area on each page. All links are functional)

2

All elements are in the proper syntax with consistent alignment, proximity, repetition, and contras.

2

All codes are neat and organized in proper way

1

Website clearly demonstrates (using CSS) design principles with consistent alignment, proximity, repetition, and contras.

2

Proper use of JavaScript.

0.5

Total

10

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 at the start of week-5 on Sunday, 14th February 2021.

Important Notes:

· The number of students in each group: 2 (3 only for exception)

· 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)

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

Project

10 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.