Project Exams
Five larger assessments where the deliverable is a working site. Requirements, constraints and a rubric for each.
-
HTML Basics
- What is HTML: The Structure Layer of Every Web Page
- HTML Document Structure: DOCTYPE, html, head and body
- Elements, Tags and Attributes: The Vocabulary of HTML
- HTML Comments: Notes That Ship With Your Code
- Block Level and Inline Elements
- Writing and Running Your First HTML Page
- How a Browser Turns Markup Into a Page
- Text and Formatting
- Links and Navigation
- Images and Media
- Lists
- Tables
-
Forms
- Form Structure: form, action and method
- Input Types: Text, Email, Number, Date and the Rest
- Labels: The Most Important Element in a Form
- Checkboxes, Radio Buttons and Grouping
- select, option, optgroup and datalist
- textarea, File Uploads and Hidden Fields
- Buttons: submit, reset and button
- Built In Form Validation
- GET or POST: What Happens When a Form Is Submitted
- Semantic HTML
- HTML5 Features
- Head and Metadata
- HTML with CSS
- HTML with JavaScript
- Accessibility
-
HTML SEO
- How Google Works: Crawling, Indexing and Ranking
- SEO Friendly HTML Structure
- Titles and Descriptions That Earn Clicks
- Headings and Content Structure for Search
- Internal Linking and Anchor Text
- robots.txt and XML Sitemaps
- Canonical URLs and Duplicate Content
- Structured Data and JSON-LD
- Image SEO
- Core Web Vitals and Mobile Friendliness
- DevTools and Debugging
- Editor Productivity
- HTML Best Practices
- HTML Projects
- Advanced Projects
- Practice and Exams
Format
Each of these is a multi page build assessed against a rubric. They take between four and twelve hours and are the sort of thing set as a take home technical test.
The constraints are part of the assessment. Ignoring them loses marks even if the result looks good.
Exam A: Personal portfolio (4 to 6 hours)
Deliverable. A three page portfolio: a home page, a work index and one case study.
Constraints. No CSS framework. No JavaScript except for one filter. Must work with scripting disabled.
| Weight | Criterion |
|---|---|
| 20% | Semantic markup, valid, correct heading structure on all three pages |
| 20% | Accessibility: keyboard, focus, contrast, labels, alt text |
| 15% | Responsive from 320 to 1600 pixels |
| 15% | Performance: image handling, page weight, no layout shift |
| 15% | Metadata: unique titles and descriptions, canonicals, Open Graph |
| 15% | Content quality and consistency of the shared layout |
Exam B: Small business site (8 to 10 hours)
Deliverable. Six pages: home, services, one service detail, about, contact and a 404.
Constraints. One shared layout. A real sitemap and robots.txt. The 404 must return a 404 status.
| Weight | Criterion |
|---|---|
| 20% | Consistent layout, navigation with aria-current, breadcrumbs on deep pages |
| 20% | Contact page: address, hours table, map with a text alternative, working form |
| 15% | Accessibility across all six pages |
| 15% | SEO: per page metadata, canonicals, sitemap, LocalBusiness structured data |
| 15% | Mobile menu that is keyboard operable and closes on Escape |
| 15% | Performance and correct deployment behaviour |
Exam C: Blog or journal (8 to 10 hours)
Deliverable. An index of at least six posts, three full articles, a tag page and an author page.
Constraints. Articles must be readable with the stylesheet disabled. Each article must have a working table of contents.
| Weight | Criterion |
|---|---|
| 20% | Article structure: header, body, footer, correct use of article and aside |
| 15% | Figures, blockquotes with attribution outside the quote, escaped code blocks |
| 15% | Table of contents with working fragment links clearing any sticky header |
| 15% | Article structured data and Open Graph on every post |
| 15% | Accessibility and reading comfort: line length, contrast, heading outline |
| 20% | Index, tag and author pages linking coherently with no orphan posts |
Exam D: Shop listing and product (10 to 12 hours)
Deliverable. A category listing with filters, sorting and pagination, plus two full product pages and a cart page.
Constraints. Filters must work with scripting disabled. No price may be sent from the client. Canonical strategy must be documented.
| Weight | Criterion |
|---|---|
| 20% | Listing: GET filter form, working pagination, accessible result announcements |
| 20% | Product page: gallery, specifications, safe add to cart form, stock status |
| 15% | Canonical and robots.txt strategy for filter parameters, with a written rationale |
| 15% | Product and BreadcrumbList structured data matching visible values |
| 15% | Accessibility across the whole flow |
| 15% | Responsive image handling and page weight |
Exam E: Accessibility remediation (6 to 8 hours)
Deliverable. Take an existing inaccessible site of at least five pages - your own earlier work is ideal - and bring it to level AA. Deliver the fixed site plus a report.
Constraints. The visual design must not change. Every fix must be documented with the guideline it addresses.
| Weight | Criterion |
|---|---|
| 25% | Automated scan clean on every page |
| 25% | Manual issues found and fixed: keyboard, focus, order, announcements |
| 20% | Report: each issue, its impact, the fix and the criterion it satisfies |
| 15% | Visual design genuinely unchanged |
| 15% | Screen reader testing evidence on at least three pages |
What is being assessed
Across all five, the same underlying questions:
- Did you choose the right element? Not whether it looks right.
- Does it work for everyone? Keyboard, screen reader, small screen, slow connection.
- Is it consistent? Six pages built the same way, not six different approaches.
- Can you explain it? The written rationale is worth as much as the code in most of these.
- Did you follow the constraints? Ignoring them is the most common reason a good looking submission scores badly.
Submitting
- A repository with a clear README.
- A deployed URL.
- A short document covering the three hardest decisions and why you made them.
- Evidence: validation results, accessibility scan output, Lighthouse scores.
Practice
- Complete Exam A and have someone else mark it against the rubric.
- Complete Exam E on your own earliest project and write the report.
- Attempt Exam B under a real time limit and note where the time actually went.
- Swap submissions with someone and review each against the rubric.