Module quiz: Interactive CSS English Due Dec 3, 11:59 PM -05

Back Graded Quiz • 15 min

Hide menu
Try again once you are ready
Module quiz: Interactive CSS
Creating layouts Try again
Grade Latest Submission To pass 80% or
CSS Selectors received 60% Grade 60% higher
CSS Effects

Debugging
Review Learning Objectives
Video: Common errors
6 min
1. Which of the following attribute selectors will make a selection based on starting of the value specified? 1 / 1 point
Video: Handling errors
4 min [attribute="value"]
Submit your assignment
Reading: Installing a third-party Linter in VS Code [attribute\*="value"] Try again
15 min Due Dec 3, 11:59 PM -05 Attempts 3 every 8 hours
[attribute^="value"]
Reading: Debugging the front-end
20 min [attribute~="value"]
Receive grade Your grade
Video: Debugging tools View Feedback
3 min
To Pass 80% or higher
Correct
Correct. The ^ character used with an attribute selector will select values whose value will start with the
60% We keep your highest score
Video: Browser-specific CSS specified value.
5 min

Discussion Prompt: What are some CSS bugs you have struggled with?
10 min
Like Dislike Report an issue
Video: UI testing 2. div + p is an example of which type of CSS selector? 1 / 1 point
3 min

Child Selector
Video: Case study: How Meta performs front-end testing
3 min
General Sibling Selector
Practice Quiz: Knowledge check: Debugging
Adjacent Sibling Selector
Started

Video: Module summary: Interactive CSS Correct

2 min Correct. The + character used to define an adjacent sibling selector. In this case it will select p elements if
Quiz: Module quiz: Interactive CSS it immediately following a div element.
Submitted

Reading: Additional resources

10 min
3. Which of the following CSS selectors is suitable for selecting an element that is a child of another element? Select 1 / 1 point
all that apply.

Child Selector

Correct
Correct. The Child Selector can select an element that is a child of another element.

Descendant Selector

Correct
Correct. The Descendant Selector can select an element that is a child or descendant of another element.

Pseudo-class Selector

4. Which of the following is the correct way of commenting in CSS? 1 / 1 point

-- This is a comment. --

This is a comment.
// This is a comment.

/* This is a comment. */

Correct
Correct. That’s the correct way of commenting in CSS.

5. An element with the property set as ‘position: absolute' is placed relative to the parent (or ancestor) element, not 0 / 1 point
the viewport.

True

False

Incorrect
Not quite. Review the item, “CSS Units of measurement” in Lesson 1, “Creating layouts”.

6. Select the CSS units of measurement that are directly related to the viewport’s measurement. Choose all that 0 / 1 point
apply.

vi

vh

vb

vw

Correct
Correct. vw is a measurement of the viewport’s width.

You didn’t select all the correct answers

7. Which of the following ARE a part of the grid shorthand property? Select all that apply. 0 / 1 point

grid-auto-flow

Correct
Correct. grid-auto-flow controls how auto-placed items are inserted into the grid.

align-self

grid-area

This should not be selected

Not quite. Review the item, “CSS Grids” in Lesson 1, “Creating layouts”.

grid-template-areas

Correct
Correct. grid-template-areas specifies areas within the grid layout.

8. Which of the following rules inside the @keyframes is valid code for moving an item by 100px from left to right, 1 / 1 point
assuming elements have an absolute position. Select all that apply.

from {top:0px;} to {top:100px;}

from {right:100px;} to {right:0px;}

Correct
Correct. You can use the right or left property to make the changes.

None of the above

from {left:0px;} to {left:100px;}

Correct
Correct. You can use the right or left property to make the changes.

9. @mixin and @includes are NOT REQUIRED to be used inside which of the following? 1 / 1 point

SCSS

Stylus CSS

SASS

Correct
That’s right! You can bypass the use of @mixin and @includes directives in Stylus CSS and use the
functionality directly

10. You're developing a website and another developer noticed that your CSS contains errors. Which of the following 0 / 1 point
will help resolve CSS errors?

Inspect the web page using the browser developer tools

Install and use a linter

Correct
That's correct! A linter will validate that your CSS contains no errors.

Review CSS selectors used and ensure that they are more specific

This should not be selected

Not quite. More specificity is considered bad practice when writing CSS.