Final assessment

Twelve questions across the whole course. Score 70% or more to pass and unlock your certificate. You can retake it as often as you like.

Finish every lesson to earn the certificate — you can take the assessment any time.

What color is the paragraph?

HTML

<p style="color: red">Doors open at 08:30</p>

CSS

p { color: blue !important; }

red, because inline styles always win.
red, because it is more specific.
blue, because stylesheet rules load after inline styles.
blue, because an important declaration beats a normal inline style.

An element has the hidden attribute and the class card. What is its display?

CSS

@layer reset, components;
@layer reset { [hidden] { display: none !important; } }
@layer components { .card { display: grid !important; } }

none, because important declarations in earlier layers win.
grid, because components is the later layer.
grid, because a class beats an attribute selector.
The browser default for the element.

--accent is never defined anywhere. What does color: var(--accent, teal) produce?

The inherited color, because the declaration is invalid.
black, the initial value of color.
teal
An empty string, so the text becomes transparent.

A two-column grid uses grid-template-columns: 1fr 1fr. A code sample with a very long line makes the first column much wider. Which change keeps the columns equal and lets the code scroll?

grid-template-columns: repeat(2, auto)
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) plus overflow-x: auto on the code block.
white-space: nowrap on the code block.
grid-auto-flow: column

A component uses font-size: clamp(1rem, 4cqi, 2rem), but on one page it isn’t inside any size container. What does 4cqi resolve against there?

4% of the small viewport’s inline size, the fallback for container units.
Zero, so the font size sits at the 1rem minimum.
The parent element’s width.
The declaration is invalid and ignored.

Which declaration centers a fixed-width block horizontally in both left-to-right and right-to-left pages?

margin-inline-start: auto;
text-align: center;
inset-inline: 0;
margin-inline: auto;

What does background: color-mix(in oklch, var(--brand), transparent 80%) produce?

The brand color at 20% opacity.
The brand color at 80% opacity.
A grey, because mixing with transparent removes chroma.
An invalid value, because transparent can’t be mixed.

Your dark mode swaps every token correctly, but form <select> menus and scrollbars stay bright white. What’s missing?

Dark tokens for --select-bg and --scrollbar-bg.
A prefers-color-scheme media query around the tokens.
appearance: none on every control.
A color-scheme declaration that includes dark, so the browser renders its own UI in dark mode.

A mouse user clicks a button and sees no focus ring; a keyboard user tabs to it and sees one. The CSS uses :focus-visible. Is this a bug?

Yes. The ring must appear for every user on every focus.
No. :focus-visible uses browser heuristics to show the indicator for keyboard focus but not after a mouse click on a button.
Yes. Programmatic focus is required for mouse users.
No, but only because the button has no outline in the reset.

A dialog shown with showModal() should fade in from opacity 0. The transition on opacity never runs on open. What’s the fix?

Increase the transition duration.
Add @starting-style { dialog[open] { opacity: 0; } } so the first style has a starting value.
Use animation-delay instead of a transition.
Set will-change: opacity on the dialog.

Speaker cards reveal with a scroll-driven animation inside @supports (animation-timeline: view()). What does a visitor using stable Firefox in 2026 see?

The cards fully visible, with no reveal animation.
Invisible cards, because the reveal starts at opacity 0.
A time-based fade-in on page load.
An error overlay from the browser.

Fifty speaker cards transition box-shadow on hover, and moving the mouse across the grid feels heavy. What’s a cheaper way to get the same look?

Add will-change: box-shadow to every card.
Lower the transition duration to 50ms.
Put the larger shadow on a ::after pseudo-element and transition its opacity instead.
Use filter: drop-shadow() instead.

12 questions unanswered