Start learning →

Modern, adaptive CSS

Styles that respond to state and to the device, values that are shared through variables, motion that respects people, and habits that keep a stylesheet healthy as it grows.

About 6 hours of study

Learning objectives

Lessons

  1. 1

    Pseudo-classes and pseudo-elements Intermediate

    Style elements by their state and position, such as hover, focus and every second row, and add decorative content without touching the HTML.

  2. 2

    Custom properties (CSS variables) Intermediate

    Store values in one place, understand how variables inherit and can be overridden in a section of the page, and build a theme that switches instantly.

  3. 3

    Responsive design basics Intermediate

    Make one page work on every screen with the viewport tag, fluid images, mobile-first media queries and sizes that scale smoothly.

  4. 4

    Transitions, transforms and animations Intermediate

    Move and fade elements smoothly, understand which properties are cheap to animate, and make sure motion never harms the people using your page.

  5. 5

    Keeping CSS maintainable Advanced

    A sensible reset, class naming that scales, cascade layers for controlling order, nesting, and how to debug styles with your browser's own tools.

Module practice

Module quiz

1. What is the difference between :focus and :focus-visible?
2. What is the main benefit of mobile-first CSS?
3. How do you make a section of a page use a different accent colour without new rules for its cards?
4. Why are transform and opacity preferred for animation?
5. A rule in a later cascade layer conflicts with a more specific rule in an earlier layer. Which wins?
6. In BEM, what does .card--featured represent?

‹ LayoutFinal assessment ›