Introduction
This series is not a CSS tutorial.
You already know CSS. At least enough to write it, ship it, and eventually inherit someone else’s version of it. That’s the starting point here.
What this series is about is what happens after you know enough CSS to be dangerous: the codebase that grew without a plan, the file called fixes.css, the !important declaration someone added because they couldn’t figure out why their rule wasn’t working. The client who says the site “just feels inconsistent” and doesn’t know why.
That’s the real work. This series teaches you how to handle it.
How it works differently
Most CSS resources start at zero and build up. This one starts with a mess and works toward clarity.
In Chapter 01 you’ll download a starting project: a small venue website built by three different developers over five years. It mostly works. But the buttons aren’t consistent across pages. A style change in one place breaks something somewhere else. There’s a file called fixes.css. You’ve been asked to clean it up.
You’ll spend the first chapter reading the code carefully and writing down what you notice, in plain language, without needing any CSS vocabulary to do it. Then each subsequent chapter picks up one of those observations and explains the mechanism behind it, not in the abstract, but by tracing exactly what’s happening in the project.
Theory arrives when you need it, not before.
Who this is for
You’ve written CSS. Maybe a lot of it. You’ve probably done something that worked but you weren’t entirely sure why. You’ve definitely encountered something that didn’t work and you weren’t entirely sure why either.
This series is for you.
It’s also for anyone who teaches front-end development and wants a more realistic starting point than a blank style.css file.
What you’ll have at the end
Eleven chapters from now, the same broken codebase will exist in a form you’d be comfortable handing to someone else or coming back to in a year. You’ll be able to explain, clearly and specifically, why every problem in it existed and how you resolved it.
More usefully: you’ll be able to do the same thing the next time someone hands you a codebase you didn’t write.
The starting project
Download the Millworks starter project before Chapter 01. Instructions and download link are at the top of that chapter.
The project is a static HTML/CSS/JS site. No build tools. No framework. Open it in VS Code, launch with Live Server, and read before you touch anything.