Skip to Content
HTML and CSS Advanced: Styles That Hold Up in Production
Advanced
0 likes
Courses
HTML and CSS Advanced: Styles That Hold Up in Production

Final Check: HTML and CSS Advanced

Fifteen scenario questions across the whole course. If you get twelve or more right, you have the HTML and CSS track covered.

15 min HTML and CSSWeb DevelopmentTesting and DebuggingPerformance Optimization Advanced
Prev Next
Fullscreen Share
Course content

Sign in to save your progress.

Course Home
1. Your site has four layers declared in this order: reset, base, components, utilities. A .text-muted rule in utilities has one class. A .nav a.active rule in components has a class, a class and an element. Both set colour. Which wins?
.text-muted, because utilities comes later and the layer is checked before specificity. .nav a.active, because it is more specific. Neither. They cancel out. Whichever appears first in the file.
2. You add one file to @layer vendor and your own CSS is not in any layer. A vendor rule seems to lose to a weak rule of yours. Is this expected?
No. It is a browser bug. Yes. Unlayered CSS beats layered CSS for normal declarations. No. Vendor layers always win. Yes, but only in Safari.
3. Which statement about @layer and @import is right?
Layers can be reordered by declaring them again later. @import url("x.css") layer(vendor) loads the file into the vendor layer, and it must come before other rules except @layer statements. Importing into a layer makes the file load in parallel with the page. <link rel="stylesheet" layer="vendor"> assigns a layer in HTML.
4. Three cards in a row each have a title, a price and a button. One title wraps to three lines. Without subgrid, what do you see?
All three cards align automatically. The price and button of that card sit lower than in the other cards. The long card is cut off. The page gets a horizontal scrollbar.
5. A product card is placed in three slots on a page, and you want its layout to depend only on its slot. Which setup is correct?
A media query on the card's own class. A wrapper with container-type: inline-size and an @container rule that styles the card inside it. container-type on the card and the @container rule styling the same card. container-type: size on the body.
6. In a flex row, your .slot { container-type: inline-size; } has no width and measures 0px. What is a good fix?
Add display: inline. Use container-type: normal. Give the slot a size, for example flex: 1 1 20rem. Remove the container and use a media query.
7. Which animation choice is the better default for a hover effect on a button?
Animate width and height for the hover. Transition transform and a colour for about 150 ms. transition: all 1s. An infinite pulse.
8. With prefers-reduced-motion: reduce on, which of these should you keep?
A parallax hero. A zoom on every image on hover. An auto-playing background video. A progress bar that shows work is happening.
9. What does scroll-behavior: smooth inside @media (prefers-reduced-motion: no-preference) achieve?
Smooth scrolling is forced on for everyone. It turns smooth scrolling off. It has no effect, because scroll-behavior is not a CSS property. Smooth scrolling is only enabled for users who have not asked for less motion.
10. A page uses a normal <link rel="stylesheet"> to a slow file. In Chrome's resource timing entry, what is its renderBlockingStatus?
blocking. It depends on the file's size only. non-blocking. async.
11. In a test, the same slow stylesheet was loaded with the media="print" and onload pattern. What happened to first contentful paint and the CSS download?
The CSS downloaded faster. Paint did not change. The stylesheet did not load at all. Paint came much earlier, and the CSS still took the same time to download.
12. A web font swaps in and the text moves. Which pair of settings goes into the fallback @font-face to match the web font's size and vertical metrics?
font-display and unicode-range. size-adjust and ascent-override, with descent-override and line-gap-override. font-feature-settings and font-variant. font-weight and font-style.
13. sizes="25vw" is written on an image, but the CSS grid now gives the image a 600px slot on a 1280px window. What does the browser do?
It trusts sizes and may choose a file that is too small for the real slot. It measures the real slot and corrects itself. It always picks the largest file. It ignores sizes and uses src.
14. Which image should not have loading="lazy"?
The main image at the top of the page. A gallery image far below the first screen. An image in a collapsed section. A footer logo.
15. You have a light and a dark theme using semantic tokens. A designer asks for dark colours that "just flip the lightness". What check should you run before you ship?
A visual check on one page in light mode. Whether the token names are alphabetical. Contrast ratios for every semantic pair in each theme. Nothing, since flipping lightness keeps contrast.

About

Fifteen scenario questions across the whole course. If you get twelve or more right, you have the HTML and CSS track covered.

Duration
15 min
Last update
08/09/2026
Was this helpful?
​ 0 ​ 0

Comments (0)

Sign in to comment

No comments yet.