A Weekend Roadmap to Modern CSS
Two days, five topics and a small project at the end. A focused path to writing CSS you are not afraid of.
1 min read
CSS feels endless until you notice that most layouts use the same handful of ideas. Spend a weekend on these five, in this order, and you will be able to build almost any page you see.
Saturday morning: the box model
Every element is a box with content, padding, border and margin. Add box-sizing: border-box to everything and sizes finally behave the way you expect.
Saturday afternoon: flexbox
Use flexbox for anything that lines up in one direction: navigation bars, button rows, cards with an icon and text.
.row {
display: flex;
align-items: center;
gap: 1rem;
}Sunday morning: grid
Use grid when you think in rows and columns at the same time: galleries, dashboards, page layouts.
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.5rem;
}Sunday afternoon: responsive design
Start with the phone layout, then add media queries as the screen grows. Use relative units like rem and percentages instead of fixed pixel widths.
Sunday evening: build something
Rebuild a page you like, a product page or a blog, without looking at its code. You will get stuck, and getting unstuck is where the learning happens.
