Project web design

College of Computing and Informatics

Web Design
IT404
Project

Deadline: Wednesday 4/12/2024 @
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.
Restricted – ‫مقيد‬

Project Instructions

Pg. 01

Project Instructions
•

The work on this project must be performed by a group (3 students).

•

Each group leader must send an email with the team member’s details (name &
id) on 24/9/2024 (midnight).

•

Note each group needs to be approved by your instructor.

•

The work should be your own; copying from students or other resources will
result in ZERO marks.

•

This project is worth 14 marks and will be distributed as in the following:
1. Part 1 – Implementation Part (10 points)
2. Part 2 – Presentation part (4 points)

Project:
You are required to build a Multi-Page Responsive Website Using HTML,
CSS, and JavaScript
Objective:
Students will design and develop a multi-page, responsive website from
scratch using HTML, CSS, and JavaScript. The focus is on applying web
design principles, responsiveness, and interactivity.
1. Project Overview:
Create a website consisting of at least three pages (e.g., Home, About, and
Contact).
Use HTML for structuring the content, CSS for layout and styling, and
JavaScript for interactivity.

Restricted – ‫مقيد‬

Project Instructions

Pg. 02

All images, fonts, and external assets should be appropriately cited or selfcreated.
2. Functional Requirements:
Home Page:
Include a navigation menu (links to other pages).
Display a section with an image or video, a heading, and a short
description.
Add a call-to-action (CTA) button linking to another page on the website.
About Page:
Include a short description of the website’s purpose or information about
the company/person.
Embed images and media.
Contact Page:
Include a form (e.g., name, email, message fields) that the user can fill out
and submit.
Use JavaScript to validate the form (e.g., check if all fields are filled in
before submission).

3. Design and Styling:

Restricted – ‫مقيد‬

Project Instructions

Pg. 03

The website must be visually appealing and follow basic web design
principles like alignment, contrast, and proximity.
Use CSS Flexbox or CSS Grid for the layout.
Implement responsive design with media queries to adjust the layout for
different screen sizes.
Include hover effects and transitions for buttons and interactive elements.
4. JavaScript Functionality:
Use JavaScript to enhance the user experience with interactivity.
Include at least two types of JavaScript interactivity, such as:
-A slideshow or carousel on the homepage.
-Form validation on the contact page.
-A dropdown navigation menu.
-A back-to-top button that smoothly scrolls the page back up.

Project Submission:

Restricted – ‫مقيد‬

Project Instructions

Pg. 04

Students must submit a .zip file containing all the HTML, CSS, JavaScript,
and image files.The project should be uploaded to the Blackboard by the
due date.
Grading Criteria:Project Requirements:
1. The number of Web pages must be at least 3
2. Use the same theme across the website.
3. Use correct HTML syntax.
4. The students must use following elements:

• Paragraph
• Headings
• Figures
• Sections
• Navigation
• Tables
• Headers/Footers
• Inline elements

Marking Criteria for the Project

Restricted – ‫مقيد‬

• Lists
• Links
• Images
• Video
• Form
• CSS
• JavaScript

Project Instructions

Pg. 05

file explaining the features of the website, the
technologies used, and any challenges encountered
during development
Correct implementation of the required functionality

/1

mentioned above with Clean, well-organized, and
commented code.
Navigation (Links are clear and located in the same area
on each page. All links are functional)
Aesthetic quality, layout, and responsiveness of the
website.
Implementation of CSS (flexbox or CSS Grid)
Proper use of JavaScript. (at least 2 feature + validation)
Creative design or features beyond the minimum
requirements.

Restricted – ‫مقيد‬

/2
/1

/1
/2

2
/1

Project presentation and demonstration

/4

Total

/14

Project Instructions

Pg. 06

Each group has to prepare and 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).

Restricted – ‫مقيد‬

Purchase answer to see full
attachment