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

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

Select your answer

grid-row-gap: 10px;

row-gap: 10px;

grid-column-gap: 10px;

grid-template-gap: 10px;

Question 2/15

How does the CSS

@supports

rule enhance responsive design?

Select your answer

By giving high-resolution support

By loading fonts conditionally

By fixing bugs in older browsers

By checking if the browser supports specific CSS features

Question 3/15

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

Select your answer

min-width: 100px;

grid-auto-columns

minmax(auto, 1fr);

minmax(100px, 1fr);

Question 4/15

What is the purpose of the CSS

overflow

property?

Select your answer

To remove elements from the DOM

To automatically adjust element size

To collapse margins within a box

To deal with content that extends beyond its container

Question 5/15

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

Select your answer

image-set()

resolution

image-resolution

background-size

Question 6/15

To set a minimum font size that scales with viewport width, which CSS function would you use?

Select your answer

fit-content()

calc()

minmax()

clamp()

Question 7/15

Which CSS property allows you to apply a drop-shadow to text?

Select your answer

box-shadow

inner-shadow

shadow

text-shadow

Question 8/15

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

Select your answer

minmax(0, 1fr)

auto

1fr

Question 9/15

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

Select your answer

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

Designing websites that only function on mobile devices

Focusing solely on the aesthetics of a mobile page

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

Question 10/15

Which of the following is NOT a part of the CSS box model?

Select your answer

Margin

Padding

Background

Border

Question 11/15

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

Select your answer

layer

stack-order

index

z-index

Question 12/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-row: 2 / 3;

grid-column: 2 / span 3;

grid-column: span 3 / 2;

Question 13/15

What CSS property would you use to create a rounded corner effect on a box?

Select your answer

border-radius

border-corner

box-shadow

corner-radius

Question 14/15

Which CSS technique allows you to keep a fixed header on top while scrolling the rest of the page content?

Select your answer

position: float;

position: absolute;

position: fixed;

position: sticky;

Question 15/15

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

Select your answer

Media Queries

CSS Grid

Flexbox

CSS Variables

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/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

grid-row-gap: 10px;

row-gap: 10px;

grid-column-gap: 10px;

grid-template-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 2/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 giving high-resolution support

By loading fonts conditionally

By fixing bugs in older browsers

By checking if the browser supports specific CSS features

The

@supports

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

Question 3/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

min-width: 100px;

grid-auto-columns

minmax(auto, 1fr);

minmax(100px, 1fr);

Using

minmax(100px, 1fr)

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

Question 4/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 automatically adjust element size

To collapse margins within a box

To deal with content that extends beyond its container

The

overflow

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

Question 5/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()

resolution

image-resolution

background-size

The

image-set()

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

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

To set a minimum font size that scales with viewport width, which CSS function would you use?

Available answers

fit-content()

calc()

minmax()

clamp()

The

clamp()

function allows you to define a minimum, preferred, and maximum value, which is useful to maintain a responsive yet constrained typography size.

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS property allows you to apply a drop-shadow to text?

Available answers

box-shadow

inner-shadow

shadow

text-shadow

The

text-shadow

property is specifically used to add shadows to text, giving it depth and dimension.

Question 8/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

minmax(0, 1fr)

auto

1fr

The default value for

grid-template-columns

auto

, which sizes columns based on content.

Question 9/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

Designing websites that only function on mobile devices

Focusing solely on the aesthetics of a mobile page

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

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 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which of the following is NOT a part of the CSS box model?

Available answers

Margin

Padding

Background

Border

The CSS box model consists of the content, padding, border, and margin. Background is not part of the box model but affects the appearance.

Question 11/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

layer

stack-order

index

z-index

The

z-index

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

Question 12/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-row: 2 / 3;

grid-column: 2 / span 3;

grid-column: span 3 / 2;

grid-column: 2 / span 3;

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

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

What CSS property would you use to create a rounded corner effect on a box?

Available answers

border-radius

border-corner

box-shadow

corner-radius

The

border-radius

property allows you to apply a radius for rounded corners on a box.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS technique allows you to keep a fixed header on top while scrolling the rest of the page content?

Available answers

position: float;

position: absolute;

position: fixed;

position: sticky;

position: sticky;

enables an element to remain fixed when it reaches a certain scroll position, often used for headers.

Question 15/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 Grid

Flexbox

CSS Variables

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