The DOM, Browser & CSS covers: Head First HTML5 Programming, The HTML Handbook, CSS in Depth, Refactoring UI, Don't Make Me Think. Understand how browsers work — the rendering pipeline, the DOM, events, CSS layout (Flexbox, Grid), responsive design, accessibility, and UX fundamentals. This is the environment where your JavaScript runs.
In Rails, you write ERB templates and trust the asset pipeline (or importmap) to deliver CSS. But do you know why turbo-frame sometimes causes layout shifts? Why Stimulus controllers that touch style properties cause layout thrashing? Understanding the browser rendering pipeline explains these issues. CSS in Rails has evolved too: Tailwind CSS is now the Rails 7+ default, and understanding CSS in Depth helps you use Tailwind intentionally rather than guessing utility classes. Refactoring UI's principles apply to every <%= render partial: %> you write — even server-rendered HTML benefits from good visual hierarchy.
This course unlocks once you've finished its prerequisite. Open prerequisite →
Most backend engineers treat CSS like a chore. Something you copy from Stack Overflow, tweak until it looks right, and never think about again. This is a mistake, and I am going t…
Every framework you've ever used in the browser — Turbo, Stimulus, React, all of them — is an elaborate way of not touching the DOM directly. Turbo swaps frames so you don't have …
Run this thought experiment on the last Rails view you shipped: if you stripped away every class attribute, would the markup still say what the page is? Or is it divs all the way …
Be honest about how you learned CSS: a property at a time, under deadline, pasting candidates until the box moved. It worked, mostly, so the suspicion never quite died — that CSS …
You know the feeling. You build a feature — model, controller, view, tests green — and the page works, but it looks like a settings screen from 2009. Meanwhile some indie develope…
Watch someone use your app. Not a colleague who knows where everything is — a real user, first visit. Within thirty seconds you'll experience a special kind of pain: they don't re…
Work through each item before the checkpoint.
A responsive, dark-mode, accessible portfolio site with zero JavaScript — the constraint that teaches CSS depth. CI checks the structure (semantic HTML, custom-property theming, g…
8 lessons. Read in order; spiral back when you need to. By the end you'll have used the core ideas twice — once on the abstract, once on something you'll meet at work next week.