Website Design Responsive Website Design 3

Question 1

Which CSS function allows you to set a value that adapts between a minimum and maximum based on the viewport?

Accepted Answer

clamp()

Answer

The clamp() function takes three values—minimum, preferred, and maximum—and returns a value constrained within that range.

Question 2

What is a CSS breakpoint?

Accepted Answer

A viewport width at which layout changes are applied via media queries

Answer

A breakpoint is a specific viewport width defined in a media query where the CSS layout shifts to accommodate different screen sizes.

Question 3

Which CSS property makes an image scale down to fit its container without exceeding its natural size?

Accepted Answer

max-width: 100%

Answer

Setting max-width: 100% on an image ensures it never exceeds its container's width while still rendering at its natural size when space allows.

Question 4

In CSS Grid, what does the fr unit represent?

Accepted Answer

A fraction of the available space in the grid container

Answer

The fr unit represents a fraction of the remaining free space in the grid container after non-flexible tracks are accounted for.

Question 5

What is the main advantage of using CSS custom properties (variables) in responsive design?

Accepted Answer

They allow values to be changed in one place and updated across media queries

Answer

CSS custom properties can be redefined inside media queries, making it easy to update spacing, colors, or sizes consistently across breakpoints.

Website Design Practice Test