Web Development

Structure pages with semantic markup and accessible forms.

Objectives

• Use semantic HTML elements correctly
• Structure multi-section pages
• Build accessible forms

Tasks (4)

1. 1. Personal profile webpage

   Build a single-page profile with a header, about section, skills list, education table and footer. Use semantic tags (header, main, section, footer) rather than div for everything.

   Deliverable: HTML file plus a hosted link or screenshot.

   10 pts

2. 2. Business webpage

   Build a one-page site for any small business: hero, services, gallery and contact details. No CSS framework.

   Deliverable: HTML file or repository link.

   10 pts

3. 3. Multi-section website

   Create a 4-page site (Home, About, Services, Contact) with a shared navigation and working internal links.

   Deliverable: ZIP of the site or a GitHub link.

   15 pts

4. 4. Contact and registration form

   Build a form with text, email, phone, select, radio, checkbox, textarea and a submit button. Use labels, required attributes and correct input types.

   Deliverable: HTML file with the form.

   10 pts

Style your pages and make them work on every screen size.

Objectives

• Apply the box model confidently
• Build layouts with Flexbox and Grid
• Write mobile-first media queries

Tasks (5)

1. 1. Style your week 1 website

   Add a colour system, spacing scale and typography to the multi-section website from week 1.

   Deliverable: Updated site with a stylesheet.

   10 pts

2. 2. Responsive navigation

   Build a navigation bar that collapses into a menu button under 768px. CSS-only or minimal JS.

   Deliverable: Working nav demo.

   10 pts

3. 3. Responsive card layout

   Build a card grid that shows 3 columns on desktop, 2 on tablet and 1 on mobile using CSS Grid.

   Deliverable: HTML and CSS files.

   10 pts

4. 4. Mobile, tablet and desktop layouts

   Take one page and produce three screenshots showing it at 375px, 768px and 1440px with no horizontal scrolling.

   Deliverable: Three screenshots plus the source.

   15 pts

5. 5. Typography and spacing pass

   Refine line length, line height, heading scale and vertical rhythm across the site. Write two lines on what you changed and why.

   Deliverable: Updated CSS plus a short note.

   10 pts

Add behaviour: events, validation, state and DOM updates.

Objectives

• Handle events and update the DOM
• Validate user input in JavaScript
• Work with arrays and objects

Tasks (5)

1. 1. Interactive components

   Build three working components: a theme toggle, an accordion and a modal dialog.

   Deliverable: Single HTML file or repository link.

   10 pts

2. 2. Form validation

   Add JavaScript validation to your week 1 form: required fields, email format, password length, and inline error messages.

   Deliverable: Working form with validation.

   10 pts

3. 3. Dynamic to-do list

   Build a to-do list that adds, completes, edits and deletes items, with a count of remaining items.

   Deliverable: Working app plus source.

   15 pts

4. 4. Search and filter

   Render a list of at least 12 items from an array and add live text search plus category filtering.

   Deliverable: Working demo.

   10 pts

5. 5. Add JavaScript to your project

   Bring the week 2 site to life with at least three interactive behaviours.

   Deliverable: Updated project link.

   10 pts

Ship one complete responsive business website.

Objectives

• Plan and deliver a multi-page site
• Apply a consistent design system
• Write a short project README

Tasks (3)

1. 1. Project plan and wireframe

   Choose a business, list the pages, sketch each page and list the components you will reuse.

   Deliverable: PDF or image of the plan.

   10 pts

2. 2. Build the site

   Build the full responsive site: minimum 4 pages, shared header and footer, working forms and at least three interactive elements.

   Deliverable: Repository link plus live demo.

   30 pts

3. 3. README and screenshots

   Write a README covering what it is, how to run it, and the tech used. Add three screenshots.

   Deliverable: README file and screenshots.

   10 pts