Skip to content
Varnook
All courses
HTML and CSSIntermediate

CSS Layout and Responsive Design

Lay out real pages with flexbox, grid and positioning, then make them work on any screen with media queries, fluid type and custom properties.

Recommended first: Web Foundations: HTML and CSS. This course builds on it.

Start courseView syllabus

Free to browse. You sign in at the first lesson so your progress is saved.

What you will be able to do

  • Size boxes predictably with border-box, max-width and relative units
  • Build nav bars, rows of cards and centred panels with flexbox
  • Lay out whole pages and responsive card grids with CSS grid
  • Adapt a layout from phone to desktop with mobile-first media queries
  • Theme a site with custom properties, including a dark mode

Syllabus

8 modules and 22 lessons. Each lesson is a short read followed by an exercise with tests.

Module 1

Sizing and the box model

Make widths mean what they say, centre a column and choose the right unit.3 lessons, about 32 min
  1. 1Making width mean what it saysUse box-sizing: border-box so padding and borders stay inside the width you set.10 min
  2. 2A centred reading columnUse max-width and auto margins to build a column that shrinks on small screens.10 min
  3. 3Choosing the right unitKnow when to reach for px, rem, % and vw.12 min
Module 2

Display and flow

See how block and inline boxes flow down a page, and how to hide them.2 lessons, about 22 min
  1. 4Block, inline and inline-blockUnderstand how the display property decides where a box sits.12 min
  2. 5Hiding elementsRemove a box with display: none, or hide it and keep its space with visibility: hidden.10 min
Module 3

Flexbox

Line items up in rows and columns, space them out and centre them.4 lessons, about 50 min
  1. 6Your first flex containerTurn a parent into a flex container and set its direction and gap.12 min
  2. 7Building a nav barPosition flex items with justify-content and align-items.14 min
  3. 8Wrapping and growingLet items wrap onto new lines with flex-wrap, and fill spare space with flex-grow.14 min
  4. 9Centring with flexboxPut something in the exact middle of the screen.10 min
Module 4

CSS grid

Build rows and columns at once, from photo galleries to whole-page layouts.3 lessons, about 41 min
  1. 10Columns with fr and repeatDefine grid columns with the fr unit and the repeat() function.12 min
  2. 11Page layouts with named areasSketch a page layout in words with grid-template-areas.15 min
  3. 12Card grids that fit any widthLet the grid choose the number of columns with auto-fit and minmax().14 min
Module 5

Positioning

Pin badges to cards, keep a header on screen and control what sits on top.3 lessons, about 36 min
  1. 13Relative and absolutePin an element to the corner of its parent with position: absolute.14 min
  2. 14A sticky headerKeep a header on screen as the page scrolls with position: sticky.10 min
  3. 15Stacking with z-indexDecide which overlapping element sits on top.12 min
Module 6

Responsive design

Make one page work well on phones, tablets and laptops.3 lessons, about 35 min
  1. 16The viewport meta tagStop phones from shrinking your page to fit a pretend desktop width.8 min
  2. 17Mobile-first media queriesStart with the small-screen layout and add columns with min-width queries.15 min
  3. 18Fluid type with clamp()Let headings grow and shrink smoothly with the screen, within limits.12 min
Module 7

Custom properties and theming

Store colours in variables and switch them for a dark theme.2 lessons, about 26 min
  1. 19Custom propertiesDefine a value once with --name and reuse it everywhere with var().12 min
  2. 20A dark themeFollow the reader's light or dark setting with prefers-color-scheme.14 min
Module 8

Project: a responsive landing page

Combine everything from the course into one landing page that works at any width.2 lessons, about 40 min
  1. 21Header and heroBuild a sticky header and a centred hero with a fluid headline.20 min
  2. 22Services, visit and footerFinish the page with an auto-fit grid, a media query and a wrapping footer.20 min