Course 4 of 8

Responsive Design & Modern CSS

Build layouts that work on every screen with Flexbox, Grid, media queries and modern CSS.

Modules

7

Lessons

32

Level

Start free, upgrade any timeAll 8 courses in Full-Stack Development

About This Course

Course 3 gave you the tools to style a page. This course makes that page work on every screen. You learn to build layouts that adapt from a phone to a wide desktop monitor, using Flexbox, Grid, fluid units, media queries and container queries. You also meet the modern CSS that front-end developers use every day: custom properties, dark mode and accessible motion. By the end, Tally has a real responsive dashboard layout.

What's Inside

  1. 1

    Responsive foundations

    5 lessons

  2. 2

    Flexbox

    5 lessons

  3. 3

    CSS Grid

    6 lessons

  4. 4

    Responsive images, type and media

    4 lessons

  5. 5

    Modern CSS

    6 lessons

  6. 6

    Transitions, animation and accessibility

    3 lessons

  7. 7

    Project: Responsive Tally dashboard

    3 lessons

Get the full syllabus

Every lesson in the Associate Full-Stack Development path, on this page and as a PDF.

See our Privacy Policy.

Next course: JavaScript Fundamentals