A creative field guide to the browser EST. 2018 · REIMAGINED
The web is
a living material.
HTML gives things meaning. CSS gives them form. The browser brings them together. Come discover not only how the web works, but why it was designed this way.
No experience needed. No account. Learn by changing things.
THE BIG IDEA / 001
Don't memorize.
Make sense of it.
Ever followed a tutorial, copied a snippet, and wondered why it worked? This is a different kind of learning space—part studio, part playground, part field guide.
Every experiment starts with something you can see. Change it. Notice what happens. Then uncover the code, the browser behavior, the tradeoffs, and the decisions behind it.
No magic tricks. No assumption that you already speak developer.
- See
- Manipulate
- Explain
- Break
- Rebuild
- Apply
CHOOSE YOUR ENTRY POINT / 002
Start with a question.
Learn in order, or open the door that interests you. There's no wrong starting point.
What does a browser actually do?
From document meaning to pixels. Start here if the whole thing feels mysterious.
Understand the foundations ↗ PATH 02 · MAKE SOMETHINGWhy won't this layout behave?
Play with Flexbox, Grid, spacing and containers until the pieces click.
Enter the layout studio ↗ PATH 03 · GET CURIOUSCan HTML and CSS make 3D?
Yes—sometimes surprisingly far. Explore depth, perspective and the limits of the DOM.
Explore the unexpected ↗THE TOOLS BEHIND THE CRAFT / NEW
You don't have to reinvent the wheel.
Learn the browser's fundamentals, then decide when a toolkit, component library or design system earns its place. There are two paths: a simple overview for the curious and a deeper guide for developers.
THE OPEN STUDIO / 003
An experiment for every idea.
Hands-on lessons, thoughtful explanations, practical decisions. Each one works as its own web page.
13 experiments to explore
Why does a browser need HTML?
Discover documents, meaning, style, rendering and the accessibility tree.
Open experimentHow should I organize a small website?
Real HTML pages, relative links, shared assets and splitting code by page.
Open experimentWhen should I reach for Grid?
Change columns and gaps. Understand two-dimensional placement.
Open experimentWhy are Flexbox and Grid different?
Experiment with flexible one-dimensional relationships.
Open experimentWhy isn't hover enough?
Native buttons, keyboard focus, disclosures, popovers and dialogs.
Open experimentHow does a browser think in color?
Mix colors, explore modern CSS and discover why contrast matters.
Open experimentSVG, image or video?
Choose the right representation, loading strategy and accessible alternative.
Open experimentClipping, masking or filtering?
Try shape and blur effects, then look at rendering costs.
Open experimentCan HTML and CSS become 3D?
Move a real DOM surface in perspective. Know when to choose a 3D engine.
Open experimentWhat changed in modern CSS?
Container queries, subgrid, nesting, layers, :has() and progressive enhancement.
Open experimentDo I have to build everything from scratch?
Bootstrap, Tailwind, Material, Fluent and the value of well-chosen tools.
Explore the toolkitHow does a static page become an app?
Meet browser JavaScript, server languages, frameworks and gradual growth.
Plan the next stepWhat can CSS do without JavaScript?
Luminous cards, ambient halos, SVG animation, small charts and a CSS-only game.
Explore the creative studioA DIFFERENT KIND OF SHOW-AND-TELL / 004
Beautiful is good.
Usable is better.
Design decisions are never only visual. Every lesson asks what happens when you use a keyboard, zoom in, request less motion, or load the page on a slower connection.
We don't save accessibility and performance for the last page. We make them part of the way we see.
Explore the accessible web ↗FROM THE ARCHIVE / 005
A little history,
a lot of curiosity.
This began in 2018 as a handmade set of HTML and CSS experiments: a Grid composition, Flexbox cards, hover states, Bootstrap and an atmospheric layered scene. The point was simple: run it, change it, break it.
The original source remains in Git history. Familiar page URLs now lead to responsive, self-contained reinterpretations, with their techniques explained in the modern lessons.
Enter the origins studio ↗