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 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 task gives a written requirement and a time limit. Build to the requirement, then mark yourself against the scheme.
No solutions are provided. The marking scheme is the specification - if every item scores, the task is complete.
Work as you would in an assessment: no copying from an existing page, and validate before you declare it finished.
Task 1: Event page (30 minutes)
Requirement. Build a page for a one day workshop. It must state the title, the date and time, the venue with a full address, the price, what is included, who it is for, and a booking form asking for name, email, phone and dietary requirements.
| Marks | Criterion |
|---|---|
| 4 | Valid document with correct head, unique title and description |
| 4 | One h1, logical heading structure, landmarks present |
| 4 | Date and time in time elements with correct datetime |
| 4 | Address in an address element, price and inclusions well structured |
| 6 | Booking form: labels bound, correct types, autocomplete, required fields marked |
| 4 | Keyboard operable throughout with visible focus |
| 4 | No horizontal scroll at 320 pixels |
| 30 | Total |
Task 2: Fix the broken page (20 minutes)
Requirement. You are given a page containing the following problems. Fix every one without changing how it looks.
- Headings jump from
h1toh4. - Three images have no
alt, one is decorative. - Two elements share an
id. - A form field has an
idbut noname. - A label is not bound to its field.
- A clickable
divacts as a button. - An external link opens in a new tab with no
reland no warning. - A
divis nested inside ap. - Two links read click here.
- An
iframehas notitle.
| Marks | Criterion |
|---|---|
| 10 | All ten problems found and fixed, one mark each |
| 5 | Validates with zero errors afterwards |
| 5 | Visual appearance unchanged |
| 20 | Total |
Task 3: Data table (25 minutes)
Requirement. Build a table of examination results: five students, four subjects, plus a total column and an average row. Add a two row header grouping the subjects into two semesters. It must be usable on a phone.
| Marks | Criterion |
|---|---|
| 5 | Correct column arithmetic on every row including spans |
| 5 | caption, thead, tbody, tfoot all used correctly |
| 5 | Headers on both axes with correct scope including group scopes |
| 5 | Usable at 320 pixels with a keyboard reachable scroll container |
| 5 | Numeric columns right aligned with tabular figures |
| 25 | Total |
Task 4: Accessible form (30 minutes)
Requirement. Build a course application form: personal details, a course choice from twelve options grouped by faculty, a preferred start date, an accommodation yes or no question, a supporting statement of up to five hundred characters, a document upload, and a required terms checkbox. Errors must be shown in the page, not in browser bubbles.
| Marks | Criterion |
|---|---|
| 5 | Every control labelled and named; groups in fieldsets with legends |
| 5 | Correct input types, autocomplete and validation attributes |
| 5 | Twelve options grouped with optgroup, placeholder option handled |
| 5 | Upload works: POST, correct enctype, accept set |
| 5 | Character counter in a live region |
| 5 | Error messages in the page, tied with aria-describedby, focus moved to the first failure |
| 30 | Total |
Task 5: Optimise for search (25 minutes)
Requirement. You are given a page that renders correctly and has no metadata. Make it findable without changing the visible content.
| Marks | Criterion |
|---|---|
| 4 | Unique title under sixty characters, most important words first |
| 4 | Description around one hundred and fifty five characters, written for a person |
| 4 | Self referencing absolute canonical |
| 4 | Open Graph set with an absolute image URL and declared dimensions |
| 5 | Correct structured data for the page type, validating |
| 4 | Heading structure corrected, image alt text and file names improved |
| 25 | Total |
Task 6: Debug with DevTools only (20 minutes)
Requirement. A page has five faults. Find each one using DevTools alone - you may not read the source file - and describe the cause and the fix.
- A stylesheet rule that does not apply.
- A form field whose value never reaches the server.
- An image that does not load.
- An element that causes horizontal scrolling.
- A button announced with no name.
| Marks | Criterion |
|---|---|
| 10 | All five faults located, two marks each |
| 5 | Correct cause identified for each |
| 5 | Correct panel used and named for each |
| 20 | Total |
Exam technique
- Read the whole requirement first and list the deliverables before typing.
- Structure before style. If time runs out, a correct unstyled page scores far better than a styled broken one.
- Validate at the halfway point, not at the end. Errors compound.
- Tab through it before you finish. It takes thirty seconds and catches several marking criteria at once.
- Leave five minutes for the checklist.
- Answer what was asked. Extra features score nothing and cost time.
Practice
- Attempt task 1 under a real thirty minute limit and mark yourself honestly.
- Build the broken page described in task 2 yourself, leave it a week, then fix it.
- Attempt task 4 without looking anything up, then check what you got wrong.
- Time yourself on task 6 and record which panel found each fault.