</>Code Temper

Intermediate · Free · In your browser

Learn HTML & CSS Intermediate

Go beyond the basics with modern HTML and CSS. Build layouts that adapt with wrapping, auto-fit grids, positioning and container queries; use :has(), cascade layers, pseudo-elements and nesting; make components accessible with names, popovers and helpful forms; add responsive images, light and dark themes and careful motion; support other languages and printing; and make pages load fast.

20 lessons6 modules4 hours of practice4 challenges
Start the HTML & CSS Intermediate course →

No installation. Your code runs right in the browser. Finish HTML & CSS Foundations first, or be comfortable with semantic HTML, the box model, flexbox, grid, and media queries. Use an up-to-date browser, because some lessons use features added in recent years.

What you will be able to do

Course outline

Module 1

Layouts that adapt

Wrapping rows, self-sizing grids, positioning, and container queries.

  1. Cards that wrapflex-wrap & flex-basis · 9 min
  2. Grids that fit themselvesauto-fit, minmax() & min() · 10 min
  3. Pin things in placeposition: sticky, relative & absolute · 10 min
  4. Components that adapt to their spaceContainer queries · 12 min
Module 2

Selectors and the cascade

:has() and friends, cascade layers, pseudo-elements, and nesting.

  1. Smarter selectors:has(), :not() & :nth-child() · 11 min
  2. Control the cascade with layers@layer & specificity · 11 min
  3. Content from CSS::before, ::after & counters · 10 min
  4. Write component CSS with nestingNative CSS nesting & naming · 11 min
Module 3

Accessible, interactive HTML

Accessible names, popovers, helpful forms, and a pricing project.

  1. Give everything a nameAccessible names, skip links & visually hidden text · 12 min
  2. Interactive without JavaScriptThe popover attribute · 10 min
  3. Forms that guide peoplefieldset, autocomplete, inputmode & hints · 11 min
  4. Project: a pricing sectionFoundation project · layout, positioning & accessible structure · 20 min
Module 4

Images, themes and motion

Responsive images, light and dark themes, and motion with care.

  1. Images that fit every screenpicture, aspect-ratio & lazy loading · 11 min
  2. Light and dark themesCustom properties & prefers-color-scheme · 12 min
  3. Motion with careTransitions, keyframes & reduced motion · 11 min
Module 5

Pages for every situation

Other writing directions, swipeable rows, and printing.

  1. Write CSS for every languageLogical properties, dir & readable line length · 10 min
  2. Swipeable rows with scroll snapoverflow, scroll-snap & keyboard access · 10 min
  3. Pages that print well@media print · 9 min
Module 6

Fast pages and the capstone

Loading performance, and an article page for everyone.

  1. Pages that load fastfont-display, image priority & content-visibility · 11 min
  2. Capstone: an article page for everyoneCapstone · accessible, themeable, responsive & printable · 30 min

Ready for your first line?

Every lesson is short, hands-on, and checked automatically.

Start learning HTML & CSS Intermediate →