Free tutorial

CSS

The language for styling and laying out HTML pages.

← Frontend Development

Ready to go further?

These free tutorials are a preview, our Frontend Development cohort covers it in depth, with a real project and a cohort alongside you. Active

Enroll in Frontend Development

1. Introduction to CSS

What CSS is, how a rule is structured, and the three ways to attach it, with why one of them is almost always the right choice.

Free

2. Selectors

Targeting elements by tag, class, id, or combinations of these, and how CSS decides which rule wins when two rules conflict.

Free

3. Colors & Backgrounds

Setting text and background color by name, hex, or rgb, and what that fourth rgba number actually controls.

Free

4. The Box Model

Content, padding, border, and margin, the four layers every element is built from, and the one setting that changes how they're measured.

Free

5. Text & Fonts

font-family, font-size, font-weight, and text-align, and why a font-family list always needs a fallback.

Free

6. Flexbox

Laying out a row (or column) of items with display: flex, the single most useful layout tool for everyday UI work.

Free

7. Grid

Two-dimensional layouts with display: grid, when to reach for it instead of flexbox.

Free

8. Positioning

static, relative, absolute, and fixed positioning, and the parent/child relationship that makes absolute positioning predictable instead of confusing.

Free

9. Responsive Design (Media Queries)

Changing styles based on screen width with @media, and why the mobile-first approach beats designing desktop-first.

Free

10. Transitions & Hover Effects

Animating property changes smoothly with the transition property, and why it needs to be paired with :hover to actually be noticed.

Free
Don't miss out

Ready to build something real?

Create a free account to enroll in a track, and get notified the moment a cohort opens.

Create free account