HTMLLab<Learn the web by changing it./>
Every lesson in HTMLLab is real, editable code. Change a tag, watch the result update, and let the lesson tell you which requirements you've met. No videos to sit through.
Lesson one. Go on, type.
This is “Hello Semantic World”, the first Academy lesson. Edit the code on the left. The result and the checklist update as you type, exactly as they do in the app.
Hello Semantic World
Create your first semantic HTML structure with main landmarks, matching headers and paragraphs.
- Create a
<main>container element. - Add an
<h1>heading with text containing ‘HTMLLab’. - Include a
<p>paragraph describing the workspace.
Thirty-two lessons, five subjects.
Not only the three languages. Accessibility and performance are taught as part of the craft, from the start.
Some ideas are easier to see than to read.
Around the lessons sits a bench of small studios and visualisers. Drag a slider, watch the CSS write itself.
Gradient Studio
background: linear-gradient(135deg, hsl(18 90% 55%), hsl(218 85% 52%));Animation & Transform Studios
Keyframes, easing, rotate, scale and skew with live output.
Specificity & Units
Why one rule wins, and what rem, em and vw really measure.
DOM Tree Visualiser
Your markup drawn as the tree it actually is.
Event Loop Visualiser
Call stack, tasks and microtasks, one step at a time.
DOM Events & RegEx
Capture, target, bubble. And a place to test patterns safely.
Contrast & Screen Reader
Check a colour pair, and hear how a page is announced.
Bug Hunt & Parsons Puzzles
Find the mistake. Put scrambled lines back in order.
Flashcards & Micro Quizzes
Quick recall for the two minutes you have.
Emmet, SVG & Responsive views
Expand abbreviations, draw vector shapes, try layouts at phone and tablet widths.
Guides & HTTP status companion
Quick reference for the things you look up every week.
Runs on your device
Your code is rendered locally. A clear output log shows errors and warnings from your own code.
Works offline, no account
Lesson drafts are saved on the device. Open the app on a train and carry on.
Made to be read
Adjustable editor font size, and a clean interface that keeps the code in front.
Open a lesson. Break something. Fix it.
HTMLLab is free to start. HTMLLab Pro unlocks unlimited Code Lab editing and the full Academy, monthly or yearly.
iPhone & iPad · iOS 18 or later