Web Development Responsive Design 3

Question 1

What is the purpose of the `sizes` attribute on an `<img>` element?

Accepted Answer

Tells the browser how wide the image will be displayed at different breakpoints

Answer

The sizes attribute tells the browser how wide the image will be rendered at various viewport widths, enabling smarter srcset selection.

Question 2

Which CSS Flexbox property controls how items grow to fill available space?

Accepted Answer

flex-grow

Answer

flex-grow specifies how much of the remaining space in the flex container should be assigned to the item.

Question 3

What does `min-width` in a media query typically represent in a mobile-first approach?

Accepted Answer

The breakpoint at which styles begin to apply going up

Answer

In mobile-first design, min-width media queries add or override styles as the screen gets wider, starting from base mobile styles.

Question 4

Which CSS function lets you clamp a value between a minimum and maximum?

Accepted Answer

clamp()

Answer

clamp(min, preferred, max) ensures a value never goes below the minimum or above the maximum, useful for fluid typography.

Question 5

What is the correct way to hide an element visually but keep it accessible to screen readers?

Accepted Answer

position: absolute; clip: rect(0,0,0,0); width: 1px; height: 1px; overflow: hidden

Answer

The visually-hidden / sr-only pattern removes the element from visual flow while keeping it in the accessibility tree.

Web Development Practice Test