Free course

CSS Course

Learn the cascade, selectors, the box model, Flexbox, Grid, responsive design, and the modern CSS features used in real interfaces.

8 modules · 40 lessons · No signup

Prerequisites: HTML

Download this course as PDF or EPUB

Read it offline, on your Kindle, or print it. Join my free newsletter and you get this course plus every other book and course I published.

Download PDFDownload EPUB
~~~

Your progress

of lessons completed.

Course completed.

What you'll learn

Style an HTML page deliberately and build responsive layouts with Flexbox and Grid.

Course contents

  1. Add CSS to a page

    Rules, declarations, stylesheets, selectors, and DevTools.

    1. ✓ What CSS does
    2. ✓ Anatomy of a CSS rule
    3. ✓ Add CSS to HTML
    4. ✓ Inspect CSS with DevTools
    5. ✓ Start the course page

  2. The cascade

    Inheritance, specificity, source order, and selector behavior.

    1. ✓ Type, class, and ID selectors
    2. ✓ Combinators
    3. ✓ Pseudo-classes and pseudo-elements
    4. ✓ Cascade and specificity
    5. ✓ Inheritance

  3. Values and visual language

    Color, units, typography, backgrounds, and custom properties.

    1. ✓ Colors
    2. ✓ Length units
    3. ✓ Typography
    4. ✓ Backgrounds and borders
    5. ✓ Custom properties and calculations

  4. Boxes and positioning

    The box model, normal flow, positioning, and stacking.

    1. ✓ The box model
    2. ✓ Box sizing
    3. ✓ Margin and padding
    4. ✓ Display and normal flow
    5. ✓ Positioning
    6. ✓ Stacking and overflow

  5. Flexbox

    Build and align one-dimensional layouts.

    1. ✓ Start a Flexbox layout
    2. ✓ Align flex items
    3. ✓ Grow, shrink, and basis
    4. ✓ Wrap flex items
    5. ✓ Build a Flexbox header

  6. Grid

    Build two-dimensional layouts with explicit tracks.

    1. ✓ Start a Grid layout
    2. ✓ Define flexible tracks
    3. ✓ Place grid items
    4. ✓ Named grid areas
    5. ✓ Build the feature grid

  7. Responsive and modern CSS

    Adapt layouts and motion to screens and user preferences.

    1. ✓ Responsive foundations
    2. ✓ Media queries
    3. ✓ Container queries
    4. ✓ Transitions, animations, and motion
    5. ✓ Finish the responsive page

  8. Debugging and review

    Inspect layout problems and review the complete course.

    1. ✓ Debug the cascade
    2. ✓ Debug layout and overflow
    3. ✓ Bisect a CSS problem
    4. ✓ Final CSS review