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

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

Select your answer

1fr

auto

minmax(0, 1fr)

Question 2/15

Which CSS pseudo-class would you use to style an element before it receives focus?

Select your answer

:focus-within

:before

:focus

:hover

Question 3/15

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

Select your answer

grid-template-gap: 10px;

grid-row-gap: 10px;

grid-column-gap: 10px;

row-gap: 10px;

Question 4/15

What is the CSS property used to control the order of flex items within a container?

Select your answer

flex-direction

order

flex-align

align-items

Question 5/15

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

Select your answer

aspect-ratio

max-width

min-width

line-height

Question 6/15

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

Select your answer

rem

Question 7/15

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

Select your answer

Margin

Background

Border

Padding

Question 8/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: sticky;

position: fixed;

position: absolute;

Question 9/15

How do you vertically center text inside a box using Flexbox?

Select your answer

flex-direction: column;

justify-content: flex-start;

justify-content: center; align-items: center;

align-items: top;

Question 10/15

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

Select your answer

layer

stack-order

z-index

index

Question 11/15

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

Select your answer

text-shadow

box-shadow

inner-shadow

shadow

Question 12/15

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

Select your answer

justify-content

align-content

flex-direction

align-items

Question 13/15

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

Select your answer

image-resolution

image-set()

background-size

resolution

Question 14/15

Which CSS function allows you to calculate lengths or sizes programmatically?

Select your answer

var()

clamp()

content()

calc()

Question 15/15

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

Select your answer

fit-content()

minmax()

clamp()

calc()

Your Results

You did not answer any questions correctly.

Your Answers

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

auto

minmax(0, 1fr)

The default value for

grid-template-columns

auto

, which sizes columns based on content.

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS pseudo-class would you use to style an element before it receives focus?

Available answers

:focus-within

:before

:focus

:hover

The

:focus-within

pseudo-class applies styles to a parent element when any child element receives focus.

Question 3/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-template-gap: 10px;

grid-row-gap: 10px;

grid-column-gap: 10px;

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

😊 Your answer was correct 🙁 Your answer was incorrect

What is the CSS property used to control the order of flex items within a container?

Available answers

flex-direction

order

flex-align

align-items

The

order

property is used to specify the order of the flex items within a flex container, affecting their position.

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

aspect-ratio

max-width

min-width

line-height

The

aspect-ratio

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

Question 6/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.

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

Background

Border

Padding

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 8/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: sticky;

position: fixed;

position: absolute;

position: sticky;

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

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

How do you vertically center text inside a box using Flexbox?

Available answers

flex-direction: column;

justify-content: flex-start;

justify-content: center; align-items: center;

align-items: top;

With Flexbox, you use

justify-content: center;

and

align-items: center;

to center content both vertically and horizontally.

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

z-index

index

The

z-index

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

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

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

Available answers

text-shadow

box-shadow

inner-shadow

shadow

The

text-shadow

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

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

justify-content

align-content

flex-direction

align-items

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

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

Available answers

image-resolution

image-set()

background-size

resolution

The

image-set()

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

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS function allows you to calculate lengths or sizes programmatically?

Available answers

var()

clamp()

content()

calc()

The

calc()

function allows you to perform calculations to determine CSS property values.

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

minmax()

clamp()

calc()

The

clamp()

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