CSS practice
48 exercises and 62 quizzes from the lessons of this track. Sample tests run in your browser; what you pass is kept in this browser only.
How CSS works
Selectors
The cascade, specificity and layers
The box model, sizing and overflow
- Work out the width to write for an exact card size
- Quiz: The box model: content, padding, border, margin
- Predict where a heading's top margin ends up
- Quiz: Margin collapse and formatting contexts
- Size a product card with a 4:3 image and a fitted button
- Quiz: Sizing: percentages, intrinsic sizes and ratios
- Work out scroll containers and where a sticky header sticks
- Quiz: Overflow, scroll containers and truncation
Values, units and math functions
Colour and theming
- Read hex and rgb() colours, then check their contrast
- Quiz: Colour syntax: hex, rgb(), hsl() and keywords
- Build a nine-step OKLCH scale that every screen can show
- Quiz: OKLCH, Oklab and wide-gamut colour
- Work out what color-mix() returns in sRGB
- Quiz: color-mix(), relative colour and contrast-color()
- Work out the colour scheme a browser uses, and what forced colours remove
- Quiz: Dark mode, colour schemes and forced colours
Backgrounds, borders, images and effects
Normal flow, positioning and stacking
Flexbox
- Predict where a wrapping toolbar breaks into lines
- Quiz: Flexbox fundamentals: axes, wrapping and gap
- Work out a flex item's automatic minimum width
- Quiz: How flex items grow, shrink and size
- Place items on a line with auto margins and justify-content
- Quiz: Flex alignment, auto margins and order
- Predict the header that switches without a media query
- Quiz: Flexbox patterns for real interfaces
CSS Grid
- Work out where line-based placement puts each item
- Quiz: Grid fundamentals: tracks, fr and placement
- Draw a dashboard's three layouts with grid areas
- Quiz: Grid areas and named lines
- Predict the columns of an auto-fill or auto-fit grid
- Quiz: Responsive grids: minmax(), auto-fit, auto-fill
- Predict the shared rows of subgrid cards
- Quiz: Subgrid: aligning nested content
- Position the layers of an overlay card
- Quiz: Grid alignment, overlap and new grid features
Responsive design: media and container queries
- Write the checks behind a reflow and text-spacing test
- Quiz: Responsive design foundations
- Evaluate width media queries the way a browser does
- Quiz: Media queries: range syntax and user preferences
- Find the container a query asks, and resolve its lengths
- Quiz: Container queries and container units
- Write fluid clamp() values and check them against zoom
- Quiz: Fluid typography and spacing scales
- Predict what three layout patterns do at any width
- Quiz: Layouts that adapt without breakpoints
International layout: logical properties, writing modes and Indian scripts
Custom properties, nesting, scope and architecture
Feature queries and the newest conditional CSS
Transitions, animations, scroll and view transitions
- Work out steps(), linear() and a reversed transition
- Quiz: Transitions and @starting-style
- Work out where an animation is at any moment
- Quiz: Keyframe animations and smooth motion
- Work out where a transformed box is drawn
- Quiz: Transforms: translate, rotate, scale and 3D
- Work out snap positions and view() timeline progress
- Quiz: Scroll snap and scroll-driven animations
- Predict a view transition's default animations
- Quiz: View transitions for pages and components
Forms, tables, popovers and anchor positioning
Sass modules, migrating off @import and Sass in production
Bootstrap 5.3: grid, utilities, components and JavaScript
Utility-first CSS with Tailwind CSS 4
Debugging, performance, accessibility, tooling and print
Design to code and interview preparation
Results here are what this browser has checked: feedback for you, not proof. They stay on this device; your Learn progress can be exported to a file. · Back to the CSS track