Projects Notes

Project Exams

Five larger assessments where the deliverable is a working site. Requirements, constraints and a rubric for each.

Practical Exam: Building From Requirements

Six timed tasks in the format a practical assessment or a technical test actually uses: a written requirement, a time limit and a marking scheme.

HTML

Coding Challenges: Easy, Medium and Hard

Twenty build tasks graded by difficulty, each with a specification and a checklist to test against. No solutions - the checklist is the answer.

HTML

Capstone: An Accessible, Fast, Findable Website

The final build. Everything in the path applied to one real site, with a defined standard it has to meet before it is finished.

HTML

Project: An Admin Dashboard Layout

Data tables, a persistent sidebar, status indicators and a dialog. The interface where dense information has to stay navigable.

HTML

Project: An E-commerce Listing Page

Filters, sorting, pagination and a product grid. The page where canonical tags, crawl budget and accessible dynamic updates all become real problems.

HTML

Project: A Documentation Site

Sidebar navigation, an on this page menu, code blocks that scroll, a search box and deep links that survive a sticky header. The hardest layout to get...

HTML

Project: A Multi Page Business Website

Six pages sharing a layout, with consistent navigation, breadcrumbs, a sitemap and metadata that differs correctly on every page.

HTML

Project: Registration, Login and Contact Forms

Three forms that cover almost every input type, validation pattern and accessibility requirement you will meet in real work.

HTML

Project: A Product Page

An image gallery, a specification list, a quantity form and structured data. The page where hidden fields, tables and forms all have to be right at on...

HTML

Project: A Blog Article Page

Long form content done properly: article structure, a table of contents, figures, code blocks, an author footer and Article structured data.

HTML

Project: A Portfolio Page

A grid of project cards with a filter, responsive images and a case study page. The project where card markup, image performance and clickable regions...