Responsive Web Design with CSS Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

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

Select your answer

Question 2/15

How does the CSS 
@supports
rule enhance responsive design?

Select your answer

Question 3/15

What is the purpose of the CSS 
overflow
property?

Select your answer

Question 4/15

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

Select your answer

Question 5/15

In a multi-column layout using CSS, how can you specify a gap between columns?

Select your answer

Question 6/15

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

Select your answer

Question 7/15

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

Select your answer

Question 8/15

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

Select your answer

Question 9/15

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

Select your answer

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

Question 11/15

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

Select your answer

Question 12/15

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

Select your answer

Question 13/15

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

Select your answer

Question 14/15

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

Select your answer

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

Your Results

You did not answer any questions correctly.

Your Answers

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

The 
order
property is used to specify the order of the flex items within a flex container, affecting their position.
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

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
What is the purpose of the CSS <pre>overflow</pre> property?

Available answers

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
Which CSS pseudo-class would you use to style an element before it receives focus?

Available answers

The 
:focus-within
pseudo-class applies styles to a parent element when any child element receives focus.
Question 5/15
😊 Your answer was correct 🙁 Your answer was incorrect
In a multi-column layout using CSS, how can you specify a gap between columns?

Available answers

The 
column-gap
property specifically sets the spacing between columns in a multi-column layout.
Question 6/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which CSS function allows you to calculate lengths or sizes programmatically?

Available answers

The 
calc()
function allows you to perform calculations to determine CSS property values.
Question 7/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you vertically center text inside a box using Flexbox?

Available answers

With Flexbox, you use 
justify-content: center;
and 
align-items: center;
to center content both vertically and horizontally.
Question 8/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

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

The property 
grid-row-gap
or simply 
row-gap
if using shorthand syntax creates spacing between rows in a CSS Grid layout.
Question 10/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

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

Using 
minmax(100px, 1fr)
in a grid definition ensures that grid items do not shrink beyond 100px.
Question 12/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

The default value for 
grid-template-columns
is 
auto
, which sizes columns based on content.
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

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
How do you ensure a CSS Grid item spans three columns starting from the second column?

Available answers

grid-column: 2 / span 3;
starts the grid item at the second column and spans three columns.
Question 15/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

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.