Assessment $2$ Web Page Design

Unit code$/$name ICT $203$ Web Application Development

Presentation duration $10-$minute presentation per student in week $9$

Total marks $40\%$ of final mark

General Instruction for students Students will have to record a $3-$minute video to show case their website.

The video must contain code$-$walkthrough explaining how the code works.

Video must be uploaded to YouTube and then submit link in a text file.

Also, the folder containing all the code for their web app will have to be zipped and submitted.

Submission will contain $2$ things:

$1.$ Text file contain link to your video

$2.$ Zip file containing your entire website files.

Date Week $7$

Time $3$:$00$ PM

Description

Design and build a set of linked web pages for a fictitious Online Car Sale. You are required to create Online Car Sale allowing registered sellers to advertise their cars. The site should provide a search capability for the car buyers to find car that they are looking for by typing the car model and location. In this stage, you are required to build front$-$end of website by using HTML$,$ CSS$,$ and JavaScript. Your web pages must be cross$-$browser compatible $($responsive to different browsers$).$

Guidelines

A$.$ Homepage

Homepage must consist of the company logo$,$ brief introduction about the business, and links to other web pages of the website.

B$.$ Car Seller Registration

Seller registration allows the system to validate the sellers$$ details and the system must send back notification if any field is empty.

This page should prompt sellers to fill a form with fields for

$$ Name

$$ Address

$$ Phone number

$$ Email address

$$ Username

$$ Password

C$.$ Seller Page

This page should provide the following links for the sellers to manage the advertisement of their cars after successfully logging in: Login, Add car. the system must send back notification if any field is empty.

i$)$ Login page $-$ This page should prompt sellers to fill a login form with fields for:

$$ Username

$$ Password

ii$)$ Add car $-$ This page should request user to fill in the form with field for:

$$ Make

$$ Model

$$ Year

$$ Milage

$$ Location

$$ Price

D$.$ Search Page

Search page allows the users to find car$($s$)$ that they are looking for by typing the model and location.

E$.$ About Us page

You should provide full name of business, location of main office, telephone$/$fax numbers, e$-$ mail address, staff names and picture of staff.

F$.$ Dynamic content

You are required to write JavaScript to achieve the following:

$$ The background color of each form input must change to yellow when it is selected.

$$ Background color of each form input must change to white when user leaves input field.

$$ Background color of each button must change to light blue when the mouse pointer is moving onto a button.

Marking Scheme

Marks will be allocated for:

$5$ to $7$ unique pages

$$ Original content

$$ Original design

$$ Site structure

$$ Appropriate and useful content