Short lessons with a working tool beside them. Write real markup and watch the browser render it, or send real requests and read what actually came back. Every chapter ends with tasks that ask you to break it on purpose.
One idea at a time, in plain English, with the gotchas that actually catch people out.
2. Do it yourself
A real editor in the HTML course. A real request console in the API course, with a practice server behind it.
3. See what really happened
Not just the result. The structure the browser silently built, or the exact status, headers and timing that came back.
Courses
Ready
HTML
The structure of every web page
Learn what markup actually is, then build real pages. Every lesson comes with a live editor, and a pane that shows you the structure the browser really built from what you typed.
The page skeleton, and why each line of it exists
Text, links, images, lists and tables
Forms, labels, and why fields silently fail to submit
Block versus inline, and the rules browsers quietly fix for you
Send real requests from the first lesson. A practice API runs inside the page, so a 401, a 429 and a duplicated order arrive exactly when the lesson needs them. Then switch to Real and watch your own traffic in Chrome's Network panel.
Requests, responses, methods and what each status code really means
Path params, query params, headers and JSON bodies, and which to use when
API keys versus bearer tokens, and the difference between 401 and 403
Pagination, rate limits, retries, idempotency and webhooks
Colour, spacing, layout with flexbox and grid, and responsive design. Same format: read a little, then type it and watch it change.
Selectors, the cascade, and specificity
The box model, and why spacing behaves oddly
Flexbox and grid for real layouts
Responsive design and media queries
Content being written
PlannedPlanned
SQL
Asking questions of data
Queries against a real database running in your browser. Write SQL, see the rows come back, break it and read the error.
SELECT, WHERE, ORDER BY and LIMIT
Joins, and what actually happens to the rows
GROUP BY and aggregates
Reading query plans, and why an index matters
Content being written
Planned
Why this is different
Nothing warns you when you are wrong
Forget a closing tag and the page still renders, silently restructured. Send a broken request and you get a status code nobody reads. Both fail quietly. Here you watch it happen.
Break-it tasks
Every chapter asks you to damage working code on purpose, then explain what changed. That is where understanding actually forms.
Failures on demand
No public API hands you a 429, an expired token or a duplicated order when the lesson needs one. The practice API runs inside the page, so it can.
Works offline, no account
One HTML file per course, no sign-up, no tracking, nothing to install. Your progress is saved in your own browser.
HTML course · what you typed
<p>Some text <div>a div</div> more</p>
HTML course · what the browser built
<p>Some text</p><-- closed early<div>a div</div>
more
<p></p><-- you never typed this
API course · what you sent
POST /orders
Content-Type:application/json{"product_id":3,"qty":2}
API course · what came back
201 Created 38 ms location: /orders/1006{"created":true,"order":{"id":1006} }<-- send it again and you get order 1007 unless you send an Idempotency-Key