The browser is the rules engine
Nothing about CSS is simulated. The page is measured with getBoundingClientRect, so if the browser renders it, the world matches it — flex, grid, position, the lot.
Every level is a live HTML document. The browser lays it out, and each element becomes a block you can stand on. The page starts broken — fix the code, and the ground rearranges under your feet.
.path {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 8px;
}Nothing about CSS is simulated. The page is measured with getBoundingClientRect, so if the browser renders it, the world matches it — flex, grid, position, the lot.
A bridge too short, a gate that won't open, stairs in the wrong order. The fix is the lesson, and the world tells you the moment the way is open.
Every lesson adds a piece to the Anthill Bakery: content from HTML, style from CSS, layout from flexbox, life from JavaScript.
Each lesson: one idea, an annotated example, five hints when you want them, and a level you can only cross once the code is right.
Write HTML elements, name them with attributes, and nest them — then use the real tags of the web: semantic sections, headings, lists, links, images, forms and tables.
<div>classnestingdiv / span+16Write real CSS: selectors and the cascade, the box model, units, positioning, colour, typography, motion and variables — the whole toolkit, not just one rule.
widthmargintype / class / id s…descendant vs child…+34Really know flexbox: the container/item split, both axes, every alignment and sizing property, the classic gotchas, the everyday patterns, and when to reach for Grid instead.
container vs itemdisplay: flexflex-directionflex-wrap+8Really write JavaScript: values and types, control flow, functions and closures, arrays and objects, the DOM and events, async code with fetch, modules, debugging — and the tools worth knowing exist.
let, const, and why…string, number, boo…objects and arrays …== vs ===, coercion…+46Every lesson you finish adds a piece to a real website. It starts as a blank page. HTML gives it content, CSS gives it style, flexbox arranges it, and JavaScript brings it to life.
“Nobody learns to build by watching. Write one line, see what it does, then write the next.”
Free, no account needed. Progress saves in this browser.