Loading... Login Loading... Register

Responsive Web Design with CSS Quiz

Want to learn more than this quiz offers you? Have a look at my Frontend web development courses.

Create an account and save your quiz results

Login and save your results

First Name *

Last Name *

Email *

Password *

Confirm Password *

I agree to the Terms of Service & Privacy Policy.

Add me to your newsletter.

Question 1/15

Which CSS property allows you to change the visual stacking order of elements in a positioned container?

Select your answer

z-index

index

layer

stack-order

Question 2/15

In CSS Grid, what is the default size for grid-template-columns if not explicitly set?

Select your answer

1fr

minmax(0, 1fr)

auto

Question 3/15

What is the purpose of the CSS

overflow

property?

Select your answer

To remove elements from the DOM

To collapse margins within a box

To deal with content that extends beyond its container

To automatically adjust element size

Question 4/15

In CSS, what does the term 'mobile-first design' imply?

Select your answer

Using min-width instead of max-width in media queries

Focusing solely on the aesthetics of a mobile page

Starting with a desktop design, then adding media queries for mobile

Designing websites that only function on mobile devices

Question 5/15

How can you prevent a CSS Grid container from shrinking below a certain size?

Select your answer

minmax(auto, 1fr);

min-width: 100px;

minmax(100px, 1fr);

grid-auto-columns

Question 6/15

How do you ensure a CSS Grid item spans three columns starting from the second column?

Select your answer

grid-area: 2 / 3;

grid-column: 2 / span 3;

grid-row: 2 / 3;

grid-column: span 3 / 2;

Question 7/15

How does the CSS

@supports

rule enhance responsive design?

Select your answer

By fixing bugs in older browsers

By giving high-resolution support

By checking if the browser supports specific CSS features

By loading fonts conditionally

Question 8/15

Which value of the CSS display property would transform a block-level element into an inline-level element?

Select your answer

none

block

inline-block

inline

Question 9/15

What property and value pair would you use to hide an element from the layout without removing it from the source order?

Select your answer

visibility: hidden;

opacity: 0;

width: 0;

display: none;

Question 10/15

Which CSS feature allows a layout to adapt based on the size of the viewport?

Select your answer

Media Queries

CSS Variables

Flexbox

CSS Grid

Question 11/15

What CSS property lets you specify different background images for high-resolution displays?

Select your answer

image-set()

image-resolution

resolution

background-size

Question 12/15

In Flexbox, which property is used to define the alignment along the cross axis?

Select your answer

align-items

flex-direction

justify-content

align-content

Question 13/15

Using CSS Grid, how would you define a layout with a gap of 10px between rows?

Select your answer

row-gap: 10px;

grid-column-gap: 10px;

grid-template-gap: 10px;

grid-row-gap: 10px;

Question 14/15

In CSS, which property would you use to create a fixed aspect ratio for an element?

Select your answer

max-width

line-height

min-width

aspect-ratio

Question 15/15

What CSS unit allows for fluid typography that scales relative to the viewport width?

Select your answer

rem

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS property allows you to change the visual stacking order of elements in a positioned container?

Available answers

z-index

index

layer

stack-order

The

z-index

property controls the stack order of elements that have positioning, such as relative, absolute, or fixed.

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

In CSS Grid, what is the default size for grid-template-columns if not explicitly set?

Available answers

1fr

minmax(0, 1fr)

auto

The default value for

grid-template-columns

auto

, which sizes columns based on content.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the purpose of the CSS <pre>overflow</pre> property?

Available answers

To remove elements from the DOM

To collapse margins within a box

To deal with content that extends beyond its container

To automatically adjust element size

The

overflow

property handles content overflow for an element, allowing it to scroll or hide excess content.

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

In CSS, what does the term 'mobile-first design' imply?

Available answers

Using <code>min-width</code> instead of <code>max-width</code> in media queries

Focusing solely on the aesthetics of a mobile page

Starting with a desktop design, then adding media queries for mobile

Designing websites that only function on mobile devices

Mobile-first design involves starting with the layout and functionality for mobile devices and progressively enhancing it for larger screens, often using min-width queries.

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

How can you prevent a CSS Grid container from shrinking below a certain size?

Available answers

minmax(auto, 1fr);

min-width: 100px;

minmax(100px, 1fr);

grid-auto-columns

Using

minmax(100px, 1fr)

in a grid definition ensures that grid items do not shrink beyond 100px.

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

How do you ensure a CSS Grid item spans three columns starting from the second column?

Available answers

grid-area: 2 / 3;

grid-column: 2 / span 3;

grid-row: 2 / 3;

grid-column: span 3 / 2;

grid-column: 2 / span 3;

starts the grid item at the second column and spans three columns.

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

How does the CSS <pre><code>@supports</code></pre> rule enhance responsive design?

Available answers

By fixing bugs in older browsers

By giving high-resolution support

By checking if the browser supports specific CSS features

By loading fonts conditionally

The

@supports

rule checking for CSS feature support enables developers to apply specific styles if certain features are supported by the browser.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which value of the CSS display property would transform a block-level element into an inline-level element?

Available answers

none

block

inline-block

inline

Setting

display: inline;

makes a block-level element behave like an inline element, fitting snugly within the content flow.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

What property and value pair would you use to hide an element from the layout without removing it from the source order?

Available answers

visibility: hidden;

opacity: 0;

width: 0;

display: none;

Both

display: none;

and

visibility: hidden;

can hide an element without removing it from the DOM, but

display: none;

removes it from the layout flow entirely.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS feature allows a layout to adapt based on the size of the viewport?

Available answers

Media Queries

CSS Variables

Flexbox

CSS Grid

Media Queries allow you to apply different styles based on the size of the viewport or specific conditions, enabling responsive design.

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

What CSS property lets you specify different background images for high-resolution displays?

Available answers

image-set()

image-resolution

resolution

background-size

The

image-set()

function allows you to specify multiple images for different device resolutions.

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

In Flexbox, which property is used to define the alignment along the cross axis?

Available answers

align-items

flex-direction

justify-content

align-content

The

align-items

property is used to align flex items along the cross axis in a flex container.

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

Using CSS Grid, how would you define a layout with a gap of 10px between rows?

Available answers

row-gap: 10px;

grid-column-gap: 10px;

grid-template-gap: 10px;

grid-row-gap: 10px;

The property

grid-row-gap

or simply

row-gap

if using shorthand syntax creates spacing between rows in a CSS Grid layout.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

In CSS, which property would you use to create a fixed aspect ratio for an element?

Available answers

max-width

line-height

min-width

aspect-ratio

The

aspect-ratio

property is used to define a fixed width-to-height ratio for an element.

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

What CSS unit allows for fluid typography that scales relative to the viewport width?

Available answers

rem

vw

stands for viewport width and is a relative unit that scales based on the width of the viewport, making it ideal for fluid typography.