mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-30 12:05:39 -05:00
refactor(curriculum): CSS Layout and Effects Quiz (#58493)
This commit is contained in:
Estefania Cassingena Navone
committed by
GitHub
GitHub
parent
6abaee592d
commit
24c8467d6d
@@ -17,7 +17,7 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo
|
||||
|
||||
#### --text--
|
||||
|
||||
What happens when there is too much content to fit in an element box?
|
||||
What term is used in CSS to describe when an element's content exceeds the size of its container?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
@@ -39,23 +39,23 @@ Overflow
|
||||
|
||||
#### --text--
|
||||
|
||||
What is the default behavior of CSS when there is overflow?
|
||||
What is the default behavior of CSS when content overflows an element?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Content is hidden
|
||||
Hiding the content.
|
||||
|
||||
---
|
||||
|
||||
Content is clipped
|
||||
Clipping the content.
|
||||
|
||||
---
|
||||
|
||||
Content is resized
|
||||
Resizing the content.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Content is visible
|
||||
Keeping the content visible.
|
||||
|
||||
### --question--
|
||||
|
||||
@@ -65,63 +65,63 @@ Why does CSS typically avoid hiding content when there is overflow?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
To enhance page design by hiding irrelevant content
|
||||
To maintain the original layout and design.
|
||||
|
||||
---
|
||||
|
||||
To save memory and load pages faster
|
||||
To prevent performance issues in the browser.
|
||||
|
||||
---
|
||||
|
||||
To automatically fix broken layout issues
|
||||
To allow for better search engine optimization.
|
||||
|
||||
#### --answer--
|
||||
|
||||
To prevent data loss and make issues noticeable
|
||||
To ensure all content is accessible to users.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
How can you handle overflow in CSS to hide content or add scrollbars?
|
||||
How can you handle vertical overflow in CSS by hiding content or displaying scrollbars?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Use `overflow: visible` to hide content and `overflow: auto` to always display scrollbars
|
||||
Use `overflow-y: visible` to hide content and `overflow-y: auto` to always display scrollbars.
|
||||
|
||||
---
|
||||
|
||||
Use `overflow: collapse` to hide content and `overflow: expand` to display scrollbars
|
||||
Use `overflow-y: collapse` to hide content and `overflow-y: expand` to display scrollbars.
|
||||
|
||||
---
|
||||
|
||||
Use `overflow: none` to hide content and `overflow: show` to display scrollbars
|
||||
Use `overflow-y: none` to hide content and `overflow-y: show` to display scrollbars.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Use `overflow: hidden` to hide content and `overflow: scroll` to always display scrollbars
|
||||
Use `overflow-y: hidden` to hide content and `overflow-y: scroll` to always display scrollbars.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
How can you specify different scrolling behaviors for the x-axis and y-axis in CSS?
|
||||
How can you specify different horizontal and vertical scrolling behaviors in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
By using `scroll-x` and `scroll-y` properties
|
||||
By using the `scroll-x` and `scroll-y` properties.
|
||||
|
||||
---
|
||||
|
||||
By using `overflow-x` and `overflow-y` separately in every case
|
||||
By specifying the same value for `overflow-x` and `overflow-y`.
|
||||
|
||||
---
|
||||
|
||||
By passing two values to the `overflow` property, where the first applies to `overflow-y` and the second to `overflow-x`
|
||||
By specifying two values for the `overflow` property, where the first value applies to `overflow-y` and the second value to `overflow-x`.
|
||||
|
||||
#### --answer--
|
||||
|
||||
By passing two values to the `overflow` property, where the first applies to `overflow-x` and the second to `overflow-y`
|
||||
By specifying two values for the `overflow` property, where the first value applies to `overflow-x` and the second value to `overflow-y`.
|
||||
|
||||
### --question--
|
||||
|
||||
@@ -131,47 +131,47 @@ What does the `transform` CSS property allow you to do?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Change the color and font style of an element
|
||||
Change the color and font style of an element.
|
||||
|
||||
---
|
||||
|
||||
Adjust the margin and padding of an element
|
||||
Adjust the margin and padding of an element.
|
||||
|
||||
---
|
||||
|
||||
Modify the visibility and display of an element
|
||||
Modify the visibility and display of an element.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Rotate, scale, skew, or translate an element
|
||||
Rotate, scale, skew, and translate an element.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What does the `transform-box: fill-box` property do in an animation that rotates an element?
|
||||
How does the `transform: translate(15px, 200px)` property modify an element?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It resizes the element to fit the canvas during the transformation
|
||||
It moves the element 15 pixels to the left and 200 pixels down from its original position.
|
||||
|
||||
---
|
||||
|
||||
It changes the background of the element during transformation
|
||||
It rotates the element 15 degrees in a clockwise direction.
|
||||
|
||||
---
|
||||
|
||||
It sets the transform origin to the top-left corner of the element
|
||||
It moves the element 15 pixels to the right and 200 pixels up from its original position.
|
||||
|
||||
#### --answer--
|
||||
|
||||
It sets the transform origin to the center of the element's bounding box, allowing it to spin in place
|
||||
It moves the element 15 pixels to the right and 200 pixels down from its original position.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What is the purpose of CSS's `overflow-x` and `overflow-y` properties?
|
||||
What is the purpose of the CSS properties `overflow-x` and `overflow-y`?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
@@ -193,45 +193,45 @@ They control the horizontal and vertical overflow of an element's content.
|
||||
|
||||
#### --text--
|
||||
|
||||
How does margin affect the size of an element in CSS?
|
||||
What is the purpose of the `margin` property in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Margin increases the actual size of the element's box
|
||||
It defines the space between the content and the border of an element.
|
||||
|
||||
---
|
||||
|
||||
Margin has no effect on the element's size or position
|
||||
It defines the space between the border and the padding of an element.
|
||||
|
||||
---
|
||||
|
||||
Margin decreases the total area the element occupies on the page
|
||||
It defines the width and height of an element.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Margin affects the total area an element occupies but is not part of the actual size of the box
|
||||
It defines the space around an element, outside of its border.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What does the content area of an element in CSS represent?
|
||||
What does the content area of an element represent in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It defines the margins and padding around the element
|
||||
It defines the margins and padding around the element.
|
||||
|
||||
---
|
||||
|
||||
It specifies the border thickness of the element
|
||||
It defines the thickness of the element's border.
|
||||
|
||||
---
|
||||
|
||||
It controls the visibility of the element on the page
|
||||
It controls the visibility of the element on the page.
|
||||
|
||||
#### --answer--
|
||||
|
||||
It contains the "real" content of the element, such as text, images, or videos
|
||||
It contains the actual content of the element, such as text, images, and videos.
|
||||
|
||||
### --question--
|
||||
|
||||
@@ -241,19 +241,19 @@ What is the difference between `content-box` and `border-box` in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`content-box` includes padding and border, while `border-box` includes only content dimensions
|
||||
`content-box` includes padding and border, while `border-box` includes only content dimensions.
|
||||
|
||||
---
|
||||
|
||||
Both `content-box` and `border-box` include only the border dimensions
|
||||
Both `content-box` and `border-box` include only the border dimensions.
|
||||
|
||||
---
|
||||
|
||||
`content-box` is used for 2D elements, while `border-box` is used for 3D elements
|
||||
`content-box` is used for 2D elements, while `border-box` is used for 3D elements.
|
||||
|
||||
#### --answer--
|
||||
|
||||
`content-box` includes only the content dimensions, while `border-box` includes content, padding, and border in its dimensions
|
||||
`content-box` includes only content dimensions, while `border-box` includes content, padding, and border in the dimensions.
|
||||
|
||||
### --question--
|
||||
|
||||
@@ -263,47 +263,47 @@ What is the purpose of CSS resets?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
To apply default styles to all elements for faster loading
|
||||
To apply default styles to all elements for faster loading.
|
||||
|
||||
---
|
||||
|
||||
To minimize the size of CSS files by removing unused styles
|
||||
To minimize the size of CSS files by removing unused styles.
|
||||
|
||||
---
|
||||
|
||||
To optimize images and fonts for better performance
|
||||
To optimize images and fonts for better performance.
|
||||
|
||||
#### --answer--
|
||||
|
||||
To remove default browser styling and create a consistent baseline for styling across different browsers
|
||||
To remove default browser styling and ensure consistent styling across browsers.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What are the common types of CSS resets?
|
||||
Which of the following is a common example of a CSS reset?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Bootstrap Reset, Tailwind Reset, and Foundation Reset
|
||||
Bootstrap.css
|
||||
|
||||
---
|
||||
|
||||
Simple Reset, Comprehensive Reset, and Adaptive Reset
|
||||
Reset.css
|
||||
|
||||
---
|
||||
|
||||
Minimal Reset, Advanced Reset, and Legacy Reset
|
||||
Restore.css
|
||||
|
||||
#### --answer--
|
||||
|
||||
Normalize.css, Eric Meyer's Reset, and HTML5 Reset
|
||||
Normalize.css
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which CSS property is used to apply transformations such as rotation, scaling, and translation to elements?
|
||||
Which CSS property is used to apply changes such as rotation, scaling, and translation to elements?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
@@ -325,131 +325,131 @@ Which CSS property is used to apply transformations such as rotation, scaling, a
|
||||
|
||||
#### --text--
|
||||
|
||||
How is the total width of an element calculated in CSS?
|
||||
How is the total width of an element calculated in CSS when using the `border-box` value for the `box-sizing` property?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Total width = width + margin + padding + border
|
||||
Total Width = Content Width + Border + Margin
|
||||
|
||||
---
|
||||
|
||||
Total width = width + margin + padding
|
||||
Total Width = Content Width + Padding + Border + Margin
|
||||
|
||||
---
|
||||
|
||||
Total width = width + margin + border
|
||||
Total Width = Content Width
|
||||
|
||||
#### --answer--
|
||||
|
||||
Total width = width + left padding + right padding + left border + right border
|
||||
Total Width = Content Width + Padding + Border
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What does the filter property in CSS do?
|
||||
What is the purpose of the `filter` property in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It changes the layout of the element on the page
|
||||
Changing the scale and rotation of an element.
|
||||
|
||||
---
|
||||
|
||||
It changes the background color and texture of an element
|
||||
Changing the background color and texture of an element.
|
||||
|
||||
---
|
||||
|
||||
It alters the size and position of an element
|
||||
Altering the size and position of an element.
|
||||
|
||||
#### --answer--
|
||||
|
||||
It applies visual effects like blur and saturation to an element
|
||||
Modifying the visual appearance of an element by using various graphical effects.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
How is the `filter` property specified in CSS?
|
||||
What does the CSS property `filter: grayscale(50%);` do to an element?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
As only a single function, where percentage values must be used
|
||||
It increases the brightness of the element by 50%.
|
||||
|
||||
---
|
||||
|
||||
As `block` or `inline`, with values expressed in pixels
|
||||
It decreases the contrast of the element by 50%.
|
||||
|
||||
---
|
||||
|
||||
As `none` or multiple functions, but only percentage values are accepted
|
||||
It applies a sepia effect to the element.
|
||||
|
||||
#### --answer--
|
||||
|
||||
As `none` or one or more functions, where percentage values can also be expressed as decimals
|
||||
It applies a 50% grayscale effect to the element.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What does the `contrast()` function in CSS do?
|
||||
What is the purpose of the `contrast()` function in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white
|
||||
It adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white.
|
||||
|
||||
---
|
||||
|
||||
Changes the color balance of the image, where `0%` desaturates it and `100%` oversaturates it
|
||||
It adjusts the contrast of the image, where `100%` makes it grey, `0%` has no effect, and values over `100%` increase contrast.
|
||||
|
||||
---
|
||||
|
||||
Alters the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque
|
||||
It adjusts the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Adjusts the contrast of the input image, where `0%` makes it grey, `100%` has no effect, and values over 100% increase contrast
|
||||
It adjusts the contrast of the image, where `0%` makes it grey, `100%` has no effect, and values over `100%` increase contrast.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What does the `hue-rotate()` function in CSS do?
|
||||
What is the purpose of the `hue-rotate()` function in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It changes the brightness of the input image based on degrees
|
||||
It changes the brightness of an image.
|
||||
|
||||
---
|
||||
|
||||
It rotates an element's size and position in the document
|
||||
It rotates an image clockwise by a certain number of degrees.
|
||||
|
||||
---
|
||||
|
||||
It adjusts the saturation and contrast of the input image
|
||||
It adjusts the saturation and contrast of an image.
|
||||
|
||||
#### --answer--
|
||||
|
||||
It applies a hue rotation, where the `<angle>` value defines the degrees around the hue color circle
|
||||
It applies a color shift, where the `angle` value defines the number of degrees to rotate around the color circle.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What happens when two animated filters have different function list lengths in CSS?
|
||||
What is margin collapsing in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
The shorter list's filters override the longer list's filters
|
||||
When the margin of an element is set to a negative number and this causes issues in the layout.
|
||||
|
||||
---
|
||||
|
||||
The filters are discarded and no animation is applied
|
||||
When the margin of an element is decreased by the padding and this changes the element's dimensions.
|
||||
|
||||
---
|
||||
|
||||
Only the first filter function in each list is animated
|
||||
When the margin of an element is ignored by the browser, so it's not visible.
|
||||
|
||||
#### --answer--
|
||||
|
||||
The longer list's missing equivalent filter functions are added to the shorter list using their initial values
|
||||
When the vertical margins of adjacent elements overlap, so they are combined into a single margin.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user