Beginner
-
Lists: ordered, unordered and description lists
When to use ul, ol and dl, nesting lists, and the start and reversed attributes.
-
Native CSS nesting
Nest rules in plain CSS, the & selector, nesting media queries, and differences from Sass.
-
Links: absolute and relative URLs, fragments and new tabs
Write links with the a element, relative and absolute paths, links to page sections, email links, and safe new-tab links.
-
Subgrid and intrinsic grid layouts
Align nested content to a parent grid with subgrid, and size tracks with min-content, max-content and fit-content.
-
Images: src, alt text, width and height
Add images with img, write useful alt text, and set width and height to prevent layout shift.
-
CSS architecture: BEM, utility-first and scoped styles
How teams keep CSS maintainable: naming conventions, utility classes, component scoping and when each fits.
-
Semantic layout: header, nav, main, article, section, aside and footer
Structure pages with semantic elements instead of generic divs, and how they map to landmarks.
-
Modern colour: color-mix(), relative colours and light-dark()
Build palettes and dark mode from a few tokens with color-mix(), relative colour syntax and light-dark().
-
HTML tables for tabular data
Build tables with table, tr, th and td, add headers, and know when a table is the wrong tool.
-
How browsers render CSS: style, layout, paint and composite
The rendering pipeline, what triggers layout and paint, and using DevTools to find slow styles.
-
Forms: form, input, label and button
Build a working form, connect labels to inputs, and understand action, method and name.
-
View transitions and scroll-driven animations
Animate between page states with the View Transitions API and link animations to scroll position without JavaScript.
-
Input types and built-in validation
Email, number, date, url and other input types, plus required, min, max and pattern for browser validation.
-
Backgrounds, borders and shadows
Background colours and images, gradients, borders, radius and box shadows.
-
Cascade layers with @layer
Organise CSS into layers so resets, frameworks and components stop fighting over specificity.
-
Introduction to Flexbox
Lay out items in a row or column with display: flex, direction, gap and basic alignment.
-
Modern selectors: :has(), :is() and :where()
The parent selector :has(), and :is() and :where() for shorter selectors with controlled specificity.
-
Combinators and attribute selectors
Descendant, child and sibling combinators, and selecting by attribute value.
-
Pseudo-classes and pseudo-elements
Style states like :hover, :focus-visible and :checked, positions like :nth-child, and generated content with ::before and ::after.
-
Flexbox in depth: alignment, wrapping and flex sizing
justify-content, align-items, wrapping, and how flex-grow, flex-shrink and flex-basis share space.