Web Development Responsive Design 2

Question 1

Which CSS unit is relative to the viewport's width?

Accepted Answer

vw

Answer

vw (viewport width) is equal to 1% of the viewport's width, making it ideal for responsive layouts.

Question 2

What does the CSS property `object-fit: cover` do to an image?

Accepted Answer

Scales the image to cover the container while maintaining aspect ratio

Answer

object-fit: cover scales the image to cover the entire container while preserving its aspect ratio, cropping if necessary.

Question 3

In a CSS Grid layout, what does `grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))` accomplish?

Accepted Answer

Creates as many 200px columns as will fit, expanding them to fill space

Answer

auto-fill with minmax creates as many columns as fit, each at least 200px wide, expanding to fill remaining space.

Question 4

What is the default value of the CSS `flex-wrap` property?

Accepted Answer

nowrap

Answer

flex-wrap defaults to nowrap, causing flex items to stay on one line and potentially overflow the container.

Question 5

Which HTML element should wrap navigation links to improve accessibility on responsive sites?

Accepted Answer

<nav>

Answer

The <nav> element provides semantic meaning, helping screen readers identify the navigation region of a page.

Web Development Practice Test