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
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
overflowproperty?
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.