CSS Basics

Most people learn CSS backwards. They copy a snippet, it almost works, they add another rule, it fights the first one, and eventually they slap !important on everything and hope. I have watched that cycle for years, in students and in working developers who never got the fundamentals, and the fix is always the same: go back and actually learn how CSS decides which styles apply.

That is why this course spends a whole section on selectors and the cascade. Element, class, and ID selectors, then combinators and grouping, then specificity: the scoring system that settles every conflict between rules. It is 17 lessons total, and the specificity lesson is the one that pays rent forever, because once you can predict which rule wins, CSS stops feeling random. It starts feeling like a system, which is what it always was.

You write the code, the lesson checks it

This course is interactive. Each lesson has you writing CSS and checking your work, not passively watching. For this material specifically, that matters. Nobody learns the box model by hearing about it; you learn it by setting padding, watching the element grow, and figuring out why box-sizing changes the math. The course is structured so you hit those small realizations yourself, in order.

There is a second benefit to the format that I did not appreciate until I watched students use it: you cannot fake your way through. A video lets you nod along and believe you understood. An exercise that checks your selector tells you the truth immediately, and the truth arriving early is what keeps small gaps from becoming big ones.

From first rule to positioned elements

The path is deliberate. You start with what CSS is, the anatomy of a rule, and the three ways to add CSS to a page. Then selectors and the cascade. Then the visual layer: colors, backgrounds and gradients, text and fonts. Then the box model gets four lessons, including sizing, box-sizing, borders, radius, and shadows, because spacing is where beginner layouts quietly fall apart.

The last section covers the concepts that unlock real layouts: display values (block, inline, inline-block), the units that actually matter (px, %, em, rem, vw, vh), and positioning with relative, absolute, and fixed. The units lesson alone will save you future pain; knowing when rem beats px is one of those small decisions that quietly separates maintainable stylesheets from brittle ones.

It ends with a project: a profile card you build yourself. Spacing from the box model, borders and shadows, styled text, positioned elements, all pulled together into one component you could actually show someone.

Where this fits in the bigger picture

An honest note: this course stops before flexbox and grid, on purpose. Modern layout deserves more than a rushed lesson at the end of a basics course, so it gets its own course in Advanced CSS with Flexbox and CSS Grid. Take this one first; flexbox makes far more sense when display and the box model are already solid.

If you have not done the markup side yet, HTML Basics is the natural companion, and the two together cover the true entry point into front-end work. And when you want your styles to move, CSS Animation for Developers picks up right where this leaves off.