know too many backend developers who are stifled by one glaring phobia: CSS.
I know too many backend developers who are stifled by one glaring phobia: CSS. How do you construct a layout when nothing lines up? Every browser renders your code differently. Floats constantly break. Nothing works!
If you agree, your thinking might be a bit out of date. You’ll be happy to hear that the ecosystem is vastly better than fifteen years ago. This series is specifically for backend developers who understand the basics, but need a fast primer on modern CSS that they’ll actually use in their day-to-day workflow.
Let’s begin by reproducing a common navigation layout. We’ll first visualize the underlying HTML structure, and will then move on to writing CSS piece by piece. This will provide us with an opportunity to Creating a reliable CSS grid used to require hours of work with meticulous percentage calculations to protect your layout from breaking entirely. Luckily, life is much easier these days. Add a few selectors and you’re off to the races, all thanks to flexbox. review browser resets, and the greatest addition to CSS in the last decade: flexbox.
In the previous lesson, we constructed a card component in a fairly traditional fashion. Let’s try a different approach in this episode. Using the completed design, we’ll drastically reduce the size of our CSS file by refactoring to utility classes and