Annual Report FY [Year] [Add a quote here from one of your company executives or use this space for a brief summary of the document content.]

Web design IT404

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

4 Marks

Learning Outcome(s): CLO1 Identify and construct HTML & CSS structure for a webpage CLO2 Recognize real-world web design approaches Instructors: State the Learning Outcome(s) that match this question

Question One

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

Smart Campus Portal

Requirements:

• Create a minimum of 4 interconnected pages (Home, Services, Registration, Contact).
• Use correct HTML5 document structure including:
  • DOCTYPE
  • meta charset
  • viewport
  • semantic elements (header, nav, main, section, article, footer)
• Implement:
  • A structured navigation bar linking all pages
  • An academic schedule table using rowspan and colspan
• Create a complete registration form using:
  • text, email, number, radio, checkbox
  • required attributes
  • fieldset and legend

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

4 Marks

Learning Outcome(s):CLO1 Apply CSS properties CLO2 Evaluate design approach Instructors: State the Learning Outcome(s) that match this question

Question Two

Apply professional styling using external CSS only:

• Implement layout using Flexbox or Grid.
• Use:
  • font stack
  • em or rem sizing
  • HEX or RGB color system
• Apply:
  • pseudo-classes (:hover, :focus)
  • pseudo-elements (::before or ::after)
• Implement:
  • Responsive design with at least 2 breakpoints
  • Mobile-first approach
• Include:
  • CSS 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.
• 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:

• A Word file (.docx) containing your report (screenshots and code).
• A PDF file (.pdf) of the same report.
• A Word file (.docx) containing your report (screenshots and code).
• A PDF file (.pdf) of the same report.

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

4 Marks

Learning Outcome(s): CLO4 Develop websites using CSS and JavaScript Instructors: State the Learning Outcome(s) that match this question

Question Three

Enhance the website with dynamic functionality:

• Link an external JavaScript file.
• Use:
  • Variables
  • Condition (if statement)
  • Loop (for or while)
• DOM Manipulation:
  • getElementById()
  • querySelector()
• Implement:
  • Dark/Light mode toggle
  • Dynamic form validation with custom error messages
• Use addEventListener() for at least one interactive event.

The JavaScript functionality must improve user interaction and usability.

Learning Outcome(sCLO2 Evaluate real-world design approaches CLO3 Evaluate effectiveness in context Instructors: State the Learning Outcome(s) that match this question

2 Marks

Question Four

Submit a concise structured report (12 pages) explaining:

• Design rationale (color, layout, typography).
• Target audience and usability considerations.
• How the design meets real-world academic portal standards.
• Reflection on improvements.

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

Submission Guidelines

Files to Submit

You must upload the following files:

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

WRITE MY PAPER