Coding Challenges: Easy, Medium and Hard

How to use these

Each challenge is a specification. Build it, then check it against the list underneath. If every item passes, the challenge is complete.

No solution markup is given. That is deliberate: the checklist defines what correct means, and testing against it is the skill being practised. There is more than one correct answer to most of these.

Easy

1. Recipe card

Mark up a recipe with a title, an ingredients list, a method, a preparation time and a photograph.

Passes when: ingredients are an unordered list, the method is an ordered list, the time is in a time element, the photograph has meaningful alt text and dimensions, there is one h1, and it validates.

2. Postal address block

Mark up a four line postal address and a two paragraph note beneath it.

Passes when: the address uses br because the breaks are content, the note uses two p elements, and no br is used for spacing anywhere.

3. Navigation bar

Build a five item navigation menu with the third item marked as the current page.

Passes when: it is a list of links inside a labelled nav, the current item has aria-current="page", and it is one tab stop per link with visible focus.

4. Contact details

Mark up an email address, a phone number and an office address, each actionable where possible.

Passes when: the email uses mailto:, the phone uses tel: in international format with no punctuation in the href, both are also visible as text, and the block uses address.

5. Simple table

Build a three column timetable with headers on both axes and a caption.

Passes when: row and column headers are th with correct scope, there is a caption, and a middle cell is announced with both its headers.

Medium

6. Article with a table of contents

Build an article with four sections and a table of contents linking to each, plus a back to top link.

Passes when: every section heading has an id, the contents list is in a labelled nav, links land on the right heading, and scroll-margin-top handles a sticky header.

7. Responsive image set

Serve one photograph at three widths, plus a WebP alternative, in a layout that is full width below 50rem and half width above.

Passes when: srcset uses accurate w descriptors, sizes matches the layout, the img carries alt and dimensions, and the Network panel confirms the right file is fetched at three window widths.

8. Accessible card grid

Build a grid of six cards, each with an image, a heading, a description and a link, where the whole card is clickable.

Passes when: each card is one tab stop, the link text is meaningful, the image alt is empty because the heading names it, and the focus ring appears around the card rather than the invisible link.

9. Registration form

Build a form with a name, email, phone, date of birth, password, password confirmation, a radio group and a required checkbox.

Passes when: every control has a bound visible label, types and autocomplete are correct, the radio group is in a fieldset with a legend, validation attributes are present, and it is completable with the keyboard alone.

10. Disclosure FAQ

Build a six question FAQ where only one answer is open at a time, with no JavaScript.

Passes when: it uses details with a shared name, each summary is first inside its details, and each is operable with Enter and Space.

11. Data table for a phone

Take an eight column table and make it usable at 320 pixels wide.

Passes when: the page body never scrolls sideways, the scroll container is keyboard reachable and labelled, and the table keeps its semantics.

12. Media block

Embed a video with two source formats, a poster image, captions and a fallback download link.

Passes when: the sources are ordered preferred first with type attributes, a track with kind="captions" is present, controls is set, and the embed keeps its aspect ratio from 320 to 1600 pixels.

13. Breadcrumb with markup

Build a three level breadcrumb trail with matching structured data.

Passes when: it is an ordered list in a labelled nav, separators are generated in CSS rather than typed, the last item has aria-current="page", and the JSON-LD validates.

14. Social preview

Give a page complete Open Graph and Twitter card metadata.

Passes when: all URLs are absolute, the image is 1200 by 630, dimensions and alt are declared, and a platform debugger renders the card correctly.

Hard

15. Multi level menu

Build a two level navigation menu that works by click, closes on Escape, and is fully keyboard operable.

Passes when: submenu triggers are button elements with accurate aria-expanded, submenus are nested inside their li, closed submenus are removed from the tab order, and Escape returns focus to the trigger.

16. Form with an error summary

Build a form that, on a failed submit, shows a summary of every error at the top, each linking to its field.

Passes when: the summary receives focus, each entry links to the failing field, each field has aria-invalid and a described error message, and no error is signalled by colour alone.

17. Filterable list

Build a list of twenty items with four filter buttons and a live result count.

Passes when: filtered items are removed from the tab order, aria-pressed tracks the active filter, the count is announced through a live region, and the list still renders fully with scripting disabled.

18. Confirmation dialog

Build a delete action that opens a confirmation dialog and announces the result.

Passes when: it uses dialog opened with showModal(), focus is trapped, autofocus is on the non destructive option, Escape cancels, focus returns to the trigger, and the outcome is announced.

19. Three column documentation layout

Build a documentation page with a sidebar, content and an on this page menu.

Passes when: all navigation regions are distinctly labelled, the source order puts content before the table of contents, it collapses to one sensible column at 320 pixels, code blocks scroll inside themselves, and fragment links clear the sticky header.

20. Product page

Build a product page with a gallery, specifications, stock status, an add to cart form and structured data.

Passes when: the form sends an identifier rather than a price, the gallery thumbnails are buttons with accurate aria-pressed and swap the alt text with the image, stock status uses more than colour, and the Product structured data matches the visible values exactly.

A checklist that applies to all twenty

• Validates with zero errors.
• An automated accessibility scan reports zero violations.
• Fully operable with the keyboard, focus always visible.
• No horizontal scrolling at 320 pixels.
• Usable at 200 percent zoom.
• Every image has alt and dimensions.
• One h1, no skipped heading levels.

Practice

1. Complete all five easy challenges in one session.
2. Take one medium challenge and test it against the checklist before considering it done.
3. Complete two hard challenges and write down what each taught you.
4. Give a challenge specification to someone else and review their result against the checklist.