The Web: HTML & CSS

🧪 Modern CSS, accessibility and architecture

Closing the Web track in style: native variables, modern functions like clamp() and :has(), CSS that respects every person (accessibility), and a BEM architecture that won't collapse as it grows.

What you'll learn

Declare custom properties in :root and reuse them with var() for theming and maintenance
Apply modern functions: fluid sizes with clamp()/min()/max(), ratios with aspect-ratio and the :has() selector
Improve accessibility with :focus-visible, prefers-reduced-motion and prefers-color-scheme
Architect your CSS with BEM and specificity control

Lessons

Custom properties: CSS variablesDeclare --variables in :root and reuse them with var(): a single point of change for your whole theming system. Modern CSS: clamp(), aspect-ratio, :has() and moreToday's CSS: fluid sizes with clamp()/min()/max(), ratios with aspect-ratio, the :has() selector and container queries that trim your media queries. Accessibility and CSS architectureWrite CSS for EVERYONE: :focus-visible, prefers-reduced-motion, prefers-color-scheme and contrast. Then architect it with BEM so it won't collapse on you.

Practice this module in the app

DevPath is a hands-on course: you read the theory here; in the app you put it into practice with exercises that really run, offline.

Start free in the app →