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

row-gap: 10px;

grid-template-gap: 10px;

grid-row-gap: 10px;

grid-column-gap: 10px;

Question 2/15

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

Select your answer

max-width

aspect-ratio

line-height

min-width

Question 3/15

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

Select your answer

rem

Question 4/15

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

Select your answer

inline-block

block

none

inline

Question 5/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: absolute;

position: fixed;

position: float;

position: sticky;

Question 6/15

In CSS, how would you ensure an element takes at least 50% of its parent’s width but no more than 80%?

Select your answer

width: 50%; max-width: 80%;

min-width: 50%; height: 80%;

width: 50%; height: auto;

min-width: 50%; max-width: 80%;

Question 7/15

Which media feature can be used in a media query to detect if the device can hover (e.g., a mouse)?

Select your answer

hover

pointer

hover: hover

is-hover

Question 8/15

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

Select your answer

index

z-index

layer

stack-order

Question 9/15

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

Select your answer

Flexbox

CSS Variables

Media Queries

CSS Grid

Question 10/15

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

Select your answer

inner-shadow

text-shadow

box-shadow

shadow

Question 11/15

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

Select your answer

Background

Padding

Border

Margin

Question 12/15

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

Select your answer

align-items

align-content

justify-content

flex-direction

Question 13/15

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

Select your answer

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

Focusing solely on the aesthetics of a mobile page

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

Designing websites that only function on mobile devices

Question 14/15

Which CSS property is used to control how content overflows an element's box in the horizontal direction?

Select your answer

text-overflow

overflow

overflow-y

overflow-x

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()

calc()

minmax()

clamp()

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

row-gap: 10px;

grid-template-gap: 10px;

grid-row-gap: 10px;

grid-column-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

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

Available answers

max-width

aspect-ratio

line-height

min-width

The

aspect-ratio

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

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

inline-block

block

none

inline

Setting

display: inline;

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

Question 5/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: absolute;

position: fixed;

position: float;

position: sticky;

position: sticky;

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

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

In CSS, how would you ensure an element takes at least 50% of its parent’s width but no more than 80%?

Available answers

<pre><code>width: 50%; max-width: 80%;</code></pre>

<pre><code>min-width: 50%; height: 80%;</code></pre>

<pre><code>width: 50%; height: auto;</code></pre>

<pre><code>min-width: 50%; max-width: 80%;</code></pre>

Setting

width: 50%

ensures the element is at least 50% of the parent, and

max-width: 80%

restricts its maximum width to 80% of the parent.

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which media feature can be used in a media query to detect if the device can hover (e.g., a mouse)?

Available answers

hover

pointer

hover: hover

is-hover

The

(hover: hover)

media feature checks if the primary input mechanism can hover.

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

index

z-index

layer

stack-order

The

z-index

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

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

Flexbox

CSS Variables

Media Queries

CSS Grid

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

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

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

Available answers

inner-shadow

text-shadow

box-shadow

shadow

The

text-shadow

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

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

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

Available answers

Background

Padding

Border

Margin

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

align-content

justify-content

flex-direction

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

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

Available answers

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

Focusing solely on the aesthetics of a mobile page

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

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

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS property is used to control how content overflows an element's box in the horizontal direction?

Available answers

text-overflow

overflow

overflow-y

overflow-x

The

overflow-x

property controls the horizontal overflow of content, allowing content to scroll or be clipped.

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()

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.