CSS mock tests
Test yourself on the whole course, against the clock: questions from every module, then coding problems you solve and run right here. Your score comes at the end, with every answer explained.
Each mock test has 12 questions drawn from the lessons, and 45 minutes on the clock, which keeps running if you reload. Questions are worth a point each. Score 60% or more to pass; your best score is kept.
- 01Mock test 112 questions · 45 minutes · 12 points
- 02Mock test 212 questions · 45 minutes · 12 points
- 03Mock test 312 questions · 45 minutes · 12 points
Part A · 12 questions
- What happens on a phone if a page has no viewport meta tag?
- Which layer is inside the border, between the border and the content?
- What does font-size: clamp(1rem, 4vw, 2rem) do?
- What is the difference between :hover and ::before?
- How do you turn a square image into a circle?
- With the default box-sizing, an element has width: 100px; padding: 10px; border: 2px solid. How wide is it on screen?
- Which unit compounds when elements are nested?
- The root font size is 16px. How big is 2rem?
- In a flex row, which property spaces items out horizontally?
- Which kind of query does mobile-first CSS mostly use?
- What does article p select?
- Which way of adding CSS is best for styling a whole website consistently?
Part A · 12 questions
- In box-shadow: 0 4px 12px rgba(0, 0, 0, .2), what is 12px?
- Which hides an element but keeps its space in the layout?
- How do you centre a child both ways with flexbox?
- Which timing function starts fast and slows down at the end?
- What does ::before need in order to appear at all?
- Why does border: 2px red draw nothing?
- An animation has infinite alternate. How does it play?
- Which makes an item span three columns?
- How do you give one element several shadows?
- What is the main difference between a transition and a keyframe animation?
- What does inline-block give you?
- What does background-size: cover do?
Part A · 12 questions
- Why write line-height: 1.6 instead of line-height: 26px?
- Which position keeps an element in the same place on screen while the page scrolls?
- How does position: sticky behave?
- Three items all have flex: 1. How is the free space shared?
- Which display value ignores width and height?
- What does var(--accent, blue) do when --accent isn't defined?
- Why should a font-family list end with a generic family like sans-serif?
- In rgba(0, 0, 0, 0.5), what does 0.5 control?
- Which gradient sweeps around a centre point, like the hands of a clock?
- Which property puts flex items in a vertical column?
- What colour is #000000?
- Why do custom properties suit theming so well?