IT404_WD Q

Question One

Design the basic structure of a professional academic service website titled:

Smart Campus Portal

Requirements:

1.Create a minimum of 4 interconnected pages (Home, Services, Registration, Contact).

2.Use correct HTML5 document structure including:

oDOCTYPE

ometa charset

oviewport

osemantic elements (header, nav, main, section, article, footer)

3.Implement:

oA structured navigation bar linking all pages

oAn academic schedule table using rowspan and colspan

4.Create a complete registration form using:

otext, email, number, radio, checkbox

orequired attributes

ofieldset and legend

The structure must reflect professional organization and real-world web design standards.

Question Two

Apply professional styling using external CSS only:

1.Implement layout using Flexbox or Grid.

2.Use:

ofont stack

oem or rem sizing

oHEX or RGB color system

3.Apply:

opseudo-classes (:hover, :focus)

opseudo-elements (::before or ::after)

4.Implement:

oResponsive design with at least 2 breakpoints

oMobile-first approach

5.Include:

oCSS transition or transform effect

The design must maintain consistency across all pages and reflect usability principles.

Submission Guidelines

The project must be submitted on Blackboard by ONE member of the group.

Your HTML, CSS, and JavaScript code must be pasted as editable text into your report, not as screenshots.

You must include screenshots of your output pages in the report file.

Files to Submit

You must upload the following files:

1.A Word file (.docx) containing your report (screenshots and code).

2.A PDF file (.pdf) of the same report.

A Zip file (.zip) containing all the project files (HTML, CSS, JavaScript, and images)

Question Three

Enhance the website with dynamic functionality:

1.Link an external JavaScript file.

2.Use:

oVariables

oCondition (if statement)

oLoop (for or while)

3.DOM Manipulation:

ogetElementById()

oquerySelector()

4.Implement:

oDark/Light mode toggle

oDynamic form validation with custom error messages

5.Use addEventListener() for at least one interactive event.

The JavaScript functionality must improve user interaction and usability.

Question Four

Submit a concise structured report (12 pages) explaining:

1.Design rationale (color, layout, typography).

2.Target audience and usability considerations.

3.How the design meets real-world academic portal standards.

4.Reflection on improvements.

You can work on it individually or as a group of a maximum of 3 members.

Submission Guidelines

The project must be submitted on Blackboard by ONE member of the group.

Your HTML, CSS, and JavaScript code must be pasted as editable text into your report, not as screenshots.

You must include screenshots of your output pages in the report file.

Files to Submit

You must upload the following files:

3.A Word file (.docx) containing your report (screenshots and code).

4.A PDF file (.pdf) of the same report.

A Zip file (.zip) containing all the project files (HTML, CSS, JavaScript, and images)

WRITE MY PAPER