Beginner to Intermediate

CSS

A practical, in-depth CSS course that takes you from your first rule to responsive, accessible, production-ready interfaces. You learn how the browser resolves styles, builds boxes and lays things out, then apply it in two realistic projects.

12 modules
39 lessons
About 218 min reading

Start learning

Course syllabus

Select any lesson to open it.

Module 1: Introduction & Fundamentals

4 lessons

What CSS is, how the browser turns it into pixels, the three ways to attach it, its syntax, and how colors and units behave.

Module 2: Selectors & Combinators

4 lessons

How to target exactly the elements you mean, and how the browser decides which rule wins when several match.

Module 3: Box Model & Spacing

4 lessons

Content, padding, border and margin, how sizes are calculated, and how backgrounds, borders and overflow behave.

Module 4: Typography & Text Styling

2 lessons

Font stacks, web fonts, and the text properties that decide whether a page is comfortable to read.

Module 5: Layout & Positioning

3 lessons

Normal flow, the position property, stacking contexts, Flexbox and CSS Grid.

Module 6: Responsive Design & Media Queries

2 lessons

Viewport behavior, mobile-first media queries, fluid units and responsive images.

Module 7: Visual Effects, Transitions & Animations

4 lessons

Transitions, transforms, keyframe animations and UI polish such as shadows, glass effects and tooltips.

Module 8: Advanced CSS & Architecture

4 lessons

Custom properties, preprocessors, naming methodologies and an honest look at CSS frameworks.

Module 9: Real-World Usage

4 lessons

Forms, common components, theming with dark mode, accessibility, and modern CSS you can ship today.

Module 10: Tooling & Testing

3 lessons

DevTools debugging, linting and build tooling, and practical ways to test CSS.

Module 11: Projects

2 lessons

Two realistic projects that combine everything in the course.

Module 12: Interview Questions

3 lessons

Conceptual questions with real explanations, and coding exercises with solutions and reasoning.

What you will learn

Explain how a browser parses CSS, computes styles, lays out boxes and paints pixels
Write selectors with predictable specificity and debug cascade conflicts quickly
Control sizing, spacing, overflow and backgrounds using the box model correctly
Build page and component layouts with Flexbox, Grid and positioning
Create mobile-first responsive designs with media queries, fluid units and responsive images
Add transitions, transforms and animations that perform well and respect user preferences
Organize CSS with custom properties, BEM and layers, and judge when a framework is worth it
Ship accessible, themeable interfaces and verify them with DevTools, linting and automated tests

Prerequisites

Basic HTML: elements, attributes and the structure of a document
A code editor such as VS Code
A modern browser with developer tools (Chrome, Firefox, Edge or Safari)

Loading course...