Build Your First Website with HTML and CSS Quiz

Quiz: modern layout

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

1 You set display: flex on a header containing a logo and a nav, and want them at opposite ends of the row, vertically centered. Which declarations do that? Single answer text-align: justify; vertical-align: middle align-content: space-between; justify-items: center justify-content: space-between; align-items: center flex-direction: column; justify-content: center

2 What does grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) give you? (several answers) Multiple answers possible Columns that are at least 16rem wide Remaining space shared equally between columns Exactly three columns on every screen A number of columns that adapts to the container width

3 Which approach best describes mobile-first CSS? Single answer Design for large screens, then use max-width queries to remove features on phones Create a separate website for phones Hide the site on phones until a mobile version exists Write the small-screen layout as the default, then add min-width media queries

4 A badge with position: absolute; top: 0; right: 0 appears at the corner of the page, not of its card. What should you do? Single answer Give the card position: relative Give the badge a very high z-index Give the badge position: static Set display: none on the card

5 Which practices make animations responsible? (several answers) Multiple answers possible Disabling or reducing motion inside @media (prefers-reduced-motion: reduce) Keeping interface transitions short Making important text depend on an infinite animation Preferring transform and opacity for smooth effects