Modern CSS for Real Websites
Stop fighting the cascade and build resilient, modern web layouts with confidence. Learn how to combine Flexbox and Grid, leverage fluid sizing without media query bloat, and master stacking contexts and custom properties.
Like Duolingo, but for Modern CSS for Real Websites. Tomo turns the whole topic into a game you play five minutes a day, until it actually sticks.
A short one: 10 levels across 2 sections, about 20 minutes end to end, roughly 4 days at five minutes a day. It moves through Composing Predictable Layouts and Taming the Browser and the Cascade. It assumes you already know the basics.
Free forever · No credit card · iPhone & Android
Key ideas in Modern CSS for Real Websites
- Flexbox operates on a single axis and allocates space based on item content sizes
- Dynamic components like navbars and pill lists flow naturally with Flexbox wrapping
- CSS Grid enforces container-level tracks that disregard intrinsic item boundaries
- CSS Grid defines two-dimensional tracks from the container down into children
- Matching row heights across independent column items requires two-dimensional Grid
- Flexbox treats each wrapped line as an independent layout with no cross-row alignment
- An auto margin in a flex container absorbs all remaining free space along that axis
- Setting margin-left: auto pushes an element and any subsequent siblings to the far right
- Auto margins eliminate the need for empty spacer divs or justify-content workarounds
- flex-basis: auto distributes remaining space after subtracting intrinsic content width
- flex-basis: 0 ignores item content width to distribute the entire container proportionally
- Identical flex-grow values only produce equal widths if flex-basis is set to 0
- Nested cards normally establish their own independent formatting contexts
- grid-template-rows: subgrid inherits track sizing from the parent grid container
- Subgrid forces card internal rows to align with sibling card internal rows
- auto-fit collapses empty tracks to 0px so existing items can expand via 1fr
You've tried the other tabs
Thirty open tabs. Four facts you actually kept.
You watched. You nodded. By Sunday it was gone.
One answer, then back to scrolling.
Eight weeks. You meant to finish. You didn't.
Tomo gives Modern CSS for Real Websites the Duolingo treatment: levels, streaks, and quick quizzes that test what you just learned. That game loop is what the tabs above never had, so it's the one you actually finish.
Here's what playing it feels like
A real question from this course. Take your best guess.
Which items naturally wrap and flow best when built with Flexbox?
Get it right to open this lesson and 9 more in the app.
Where Modern CSS for Real Websites takes you
- 1
Composing Predictable Layouts
- Choosing Between Flexbox and Grid
- Fluid Layouts Without Breakpoint Fatigue
- 2
Taming the Browser and the Cascade
- Mastering Stacking and Flow
- Component Architecture with Modern CSS
2 sections · 4 units · 10 levels. Built to play, not to enroll.
Tomo is in ChatGPT
Tomo is also a ChatGPT plugin: the same playable courses, built and played inside your chat.
Add Tomo to ChatGPT- What to ask
- “Make me a Tomo course on black holes.” “Turn this chat into a Tomo course.”
- What you get
- Quick questions with instant feedback, hearts and stars, ready to play in about a minute.
- Where it goes
- No sign-up to start. Connect your Tomo account and your streak carries on in the app.
You pick the voice
Modern CSS for Real Websites is taught in the Explain Like I'm 5 style: no big words. promise.. Want a different feel? In the app you can spin up the same topic in any of Tomo's teaching styles. Same facts, totally different vibe.
More Technology on Tomo
The Flow of Power
Stop guessing and start building. Learn to see electricity as a flowing current you can direct, control, and use to bring your own gadgets to life.
Jetpack Compose: Beyond the Basics
Master the art of building high-performance, scalable Android UIs. Move past simple layouts to handle complex state, custom graphics, and seamless architecture.
Modern JavaScript in Practice
Move beyond basic syntax to build high-performance, interactive web components. Learn the professional patterns used to manage state, handle asynchronous data, and manipulate the DOM with precision.
Excel for Everyday Work
Turn blank spreadsheets into reliable, automated tools. Learn the core formulas, table tricks, and layout habits that save hours of manual data entry.
Practical Mechanical Design
Bridge the gap between textbook mechanics and hardware that actually works. Learn how to prevent binding, design joints that resist fatigue, and tame thermal expansion in real mechanisms.
Mastering the Flow: Practical Electronics
Move beyond simple batteries and bulbs to design circuits that solve real problems. Master the math of power, troubleshoot like a pro, and understand how modern gadgets actually think.
Start Modern CSS for Real Websites today.
Download Tomo, search Modern CSS for Real Websites, and play your first lesson in under a minute.