Build Your First Website with HTML and CSS Quiz

Quiz: modern CSS and quality

Pass mark: 70%. You can retry as many times as you need.

1 You define --color-primary: #0f766e; in :root. How do you use it for a button background, and what is the main benefit? Single answer background: --color-primary; and it makes the CSS load faster background: $color-primary; and it needs a preprocessor background: color(primary); and it only works in dark mode background: var(--color-primary); and you change the color in one place

2 In the BEM convention, which names are correct for a title inside a card block and a featured variant of that card? (several answers) Multiple answers possible card__title card--featured card.title card-featured-big-blue

3 A designer finds the keyboard focus outline ugly and adds *:focus { outline: none; }. What is the best assessment? Single answer It is a good idea because mouse users never need an outline It is harmless as long as links are underlined It is a serious accessibility problem; restyle the outline with :focus-visible instead It is required to pass the HTML validator

4 Which actions improve both accessibility and findability of your pages? (several answers) Multiple answers possible Writing meaningful alt text for informative images Hiding lists of keywords in invisible text Giving each page a unique, descriptive title Using one h1 and a logical outline of headings

5 Your hero image is the first thing visitors see, and further down there are ten project photos. Where should you use loading="lazy"? Single answer On every image, including the hero On the project photos below the fold, but not on the hero image Only on the hero image On none of them, because it harms accessibility