COURSE 4 – HTML AND CSS IN DEPTH QUIZ ANSWERS

Week 2: Interactive CSS

Meta Front-End Developer Professional Certificate

Complete Coursera Answers & Study Guide

Click to Enroll in Coursera Meta Front-End Professional Certificate

TABLE OF CONTENT

INTRODUCTION
SELF REVIEW: CREATE A GRID LAYOUT

KNOWLEDGE CHECK: CREATING LAYOUTS
SELF REVIEW: TARGETED CSS
KNOWLEDGE CHECK: CSS SELECTORS

SELF REVIEW: TRANSFORMING AND TRANSITIONING ELEMENTS
KNOWLEDGE CHECK: CSS EFFECTS
KNOWLEDGE CHECK: DEBUGGING

MODULE QUIZ: INTERACTIVE CSS
CONCLUSION

Interactive CSS INTRODUCTION

In Coursera’s Interactive CSS module, part of the Meta Front-End Developer Professional Certificate program, you will build on your existing knowledge of CSS to apply more specific styling techniques to your web pages. You’ll delve into the complexities of this powerful language and gain an understanding of how to use it confidently and effectively. With hands-on practice provided by Coursera’s interactive platform, you will be able to bridge the gap between theory and application as you turn your webpage designs into reality.

By the end of this course, you will have a deeper mastery of HTML, CSS, and JavaScript that can be applied to create professional websites. Get ready for an exciting journey into the world of Interactive CSS!

Learning Objectives

Adapt your CSS to perform as expected in different browsers.
Perform basic front-end testing, debugging and error handling.

Create simple keyframe animations.
Use CSS effects to introduce text effects, animations and transformations into your stylesheet.
Use advanced CSS selectors such as pseudo-classes for targeted styling.

Use Flexbox and CSS grids to create responsive layouts and charts.

SELF REVIEW: CREATE A GRID LAYOUT

1. Did you try changing the width of the viewport? Was there a visible change in the output?

No
Yes, and there were changes (CORRECT)

Yes, but no visible changes

Correct: That’s great! The viewport changes should change the positions of grid items.

2. How many grid boxes do you see in the final output?

3
5 (CORRECT)

Correct: That’s correct! The correct number of grid boxes in the output is 5.

3. . Why is the peachpuff colour assigned inside the left class selector not visible?

Because it gets overridden by darkcyan inside the sidebar selector. (CORRECT)
Because sidebar class is mentioned before the left class inside the HTML tag.
Because it is pushed out of the grid due to alignment.

Correct: That’s correct! The sidebar class selector is written after the left class selector.

4. Were you able to get the desired Holy Grail layout?

Yes, but it is out of alignment.
Yes (CORRECT)

Yes, but some grid items are not visible.
No

Correct!

KNOWLEDGE CHECK: CREATING LAYOUTS

1. Which of the following is not a valid value for the ‘display’ property?

inline-grid
flex
grid

box (CORRECT)

Correct: That’s right! There is box-sizing, but no box property.

2. Which of the following is an absolute unit of measurement in CSS?

px (CORRECT)

Correct: Correct! px stands for pixels which is an absolute unit of measurement.

3. Which of the following is a two-dimensional layout model that can be created in CSS?

Box model
Grid model (CORRECT)

Flex model
Floats model

Correct: Correct! Grids are two-dimensional models.

4. Which of the following units of measurements are directly associated with the font sizing in CSS? Select all that apply.

vw
rem (CORRECT)
ch (CORRECT)

em (CORRECT)

Correct: Correct! rem is relative em and related to font sizing.
Correct: Correct! ch is character width and relates to font sizing.
Correct: Correct! em relates to font size of parent or itself.

5. Which of the following properties is not a part of the shorthand ‘flex’ property?

flex-basis

flex-wrap (CORRECT)
flex-shrink
flex-grow

Correct: Correct, flex-wrap is not part of the shorthand.

6. The box model consists of which of the following properties? Select all that apply.

Outline
Border (CORRECT)

Padding (CORRECT)
Margin (CORRECT)

Correct: Correct! Border is an integral part of box models.
Correct: Correct! Padding is an integral part of box models.
Correct: Correct! Margin is an integral part of box models

7. . The grid items by default will start at the __ of the grid container.

bottom right
top right
top left (CORRECT)

bottom left

Correct: Correct! Grid starts from the top left corner.

8. Is the following statement true or false? The cross-axis will always be perpendicular to the main axis in a flexbox.

True (CORRECT)

False

Correct: That’s correct! They may be vertical or horizontal respectively but they’ll always be perpendicular to each other.

SELF REVIEW: TARGETED CSS

1. Did you try changing the width of the viewport? Was there a visible change in the dimensions of the output?

Yes, but no visible changes.

Yes, and there were changes. (CORRECT)
No, did not change the viewport size.

Correct: Correct! That’s the expected behaviour of the output.

2. Which combinator type among the four you have covered was not used in the exercise?

General sibling combinator
Child combinator
Descendant combinatory (CORRECT)

Adjacent sibling combinator

Correct: Correct! This type has a space between the two elements and was not used.

3. When you change the width of the viewport the height should also change.

True (CORRECT)

False

Correct: Correct, the grid size must change both the width and height of the viewport.

KNOWLEDGE CHECK: CSS SELECTORS

1. While specifying the ideal logical order of the four link-states added as rules in CSS code, what pseudo-class will you add second?

Hover

Link
Visited (CORRECT)
Active

Correct: That’s correct! Visited should be placed in the second position.

2. For a given<div> tag and<p> tag, which of the following will be the correct syntax for use of adjacent sibling combinator?

div p
div ~ p

div > p
div + p (CORRECT)

Correct: Correct! This is the syntax for an adjacent sibling combinator.

3. Calculate the specificity of the following selector:

```ul#alpha li.visited ```

112 (CORRECT)
13
22

Correct: That’s correct! #alpha ID selector will add 100, .visited class selector will add 10. ul and li element selectors will add 2. 100 + 10 + 2 = 112.

4. `nth-last-of-type` is a pseudo element that matches the last sibling from a list of siblings of specific type inside a parent.

TRUE (CORRECT)

FALSE

Correct: That’s right! This is correct. For example, div: nth-last-of-type(2) will target second last div element inside some parent.

5. For the given HTML code, irrespective of the effect on other list elements, which of the following will be a valid selector to ensure “Little” is coloured “red”? Select all that apply.

<body>
   <ul>
      <li class="red">Little</li>
      <li>Lemon</li>
      <li>Restaurant</li>
   </ul>
</body>

red { color: red; }

li > red { color: red; }
ul > .red{ color: red; } (CORRECT)
.red{ color: red; } (CORRECT)

li { color: red; } (CORRECT)

Correct: Correct! The rule will apply to ‘red’ class descendant of <ul> tag.
Correct: Correct! The rule will apply to class .red directly.
Correct: Correct! This will apply to all list elements which also includes one that has the text “Little”.

6. Which of the selectors below will select
tags with a title attribute in CSS?

div[title] (CORRECT)

title
div.title
div#title

Correct: That’s correct! This will address title attribute inside the div tag.

SELF REVIEW: TRANSFORMING AND TRANSITIONING ELEMENTS

1. Add skew of 10 degrees to your transform property in both the cases in addition to the rotate property, do you observe any visible changes?

Yes, there are changes (CORRECT)
No changes

Correct: That’s right! The box items should skew 10 degrees in the upper half for all items.

2. If you change the values inside the rotate function from ‘360’ to ‘720’ in both places, what will be the visible changes?

The flips will happen double the times (CORRECT)
There will be no change in the output

The flips will happen half the times

Correct: That’s correct! The rotation has to happen twice the amount in the same time.

3. Does the size of the box items change with changes in viewport?

Yes (CORRECT)

Correct: That’s correct! The box items should shrink when size is reduced.

KNOWLEDGE CHECK: CSS EFFECTS

1. Which of the following properties is used to set the length of time in seconds for one iteration of animation in CSS?

animation-timeline

animation-timing-function
animation-duration (CORRECT)
animation-delay

Correct: That’s right! Animation-duration is used to set the time duration for one iteration.

2. What are the benefits of using preprocessors such as SASS and SCSS? Select all that apply.

They allow for re-use of values across CSS rules (CORRECT)
They reduce the amount of CSS to maintain (CORRECT)

They provide audit functionality (CORRECT)

Correct: That’s correct! Values are be used across multiple rules through variables.
Correct: That’s correct! Using variables and loops in a preprocessor allows you to reduce the amount of CSS to maintain.
Correct: That’s correct! Preprocessors can audit and validate the correctness of your code.

3. The __ suffix is used to define variables inside SCSS files used for CSS.

@
No special characters are needed
$ (CORRECT)

Correct: Correct! That is the correct special character used to define variables.

4. What styling property will you apply if you want to rotate an object 60 degrees in counter clockwise direction?

transform: rotate(60deg)
transform: rotate(-60deg) (CORRECT)

rotate: -60deg
rotate: 60deg

Correct: That is the correct special character used to define variables.

5. You cannot apply more than one property inside a single ‘transform’ declaration rule in CSS.

True
False (CORRECT)

Correct: That’s right. You can apply more than one transformation inside a single property-value pair

6. Is this valid code for an animation-name ‘animate’?

@keyframes animate {
     0% {
         transform: rotate(60deg) scale(0.8);
    }
     25% {
         transform: rotate(90deg) scale(1.2);
    }
}

No, the animation transition is not fully defined
Yes, this should work fine (CORRECT)
No, you cannot use the transform inside @keyframes

Correct: Correct! The rules defined for animation sequence are valid.

KNOWLEDGE CHECK: DEBUGGING

1. In a CSS selector such as ‘div .alpha>p’, what will be the element or class that will be read first by the CSS compiler?

the entire selector is read and interpreted
div

.alpha
p (CORRECT)

Correct: That’s correct! The CSS compiler starts reading from the right.

2. What is the default behavior of CSS when it encounters an incomplete rule with missing values?

It will stop further compilation altogether after reporting the error
It will set default values for the property and continue compilation
It will stop further compilation altogether without reporting the error
It will ignore the specific property-value pair and continue compilation (CORRECT)

Correct: That’s correct! CSS continues execution ignoring the specific property-value pair.

3. A styling issue is occurring with an element on your web page. You can skip the missing delimiter for the last property but it is not a good practice.

True (CORRECT)
False

Correct: Correct! The missing delimiter can be skipped for the last property but it is not a good practice.

4. Which of the following are ideal coding practices to reduce errors in CSS? Choose all that apply.

Universal selectors (CORRECT)
Shorthand properties (CORRECT)

Correct: Correct! Universal selectors help perform browser resets.
Correct: Correct! Shorthand properties help in writing clean code with less errors.

5. Modernizer, reset.css and normalize.css are types of:

CSS libraries for help in browser compatibility (CORRECT)
CSS validators
CSS linters
CSS libraries for live previews

Correct: Correct! These are forms of stylesheets that help reset and normalize browser settings for CSS.

6. Which of the following types is the stylesheet created by the browser to render CSS?

Syntactically Awesome stylesheet
Author stylesheet
User stylesheet
User-agent stylesheet (CORRECT)

Correct: That’s correct! These are default stylesheets for browsers.

Coursera Meta Front-End Developer Professional Certificate Answers and Study Guide

Liking our content? Then don’t forget to ad us to your bookmarks so you can find us easily!

Weekly Breakdown | Meta Study Guides | Back to Top

Subscribe to Our Newsletter

MODULE QUIZ: INTERACTIVE CSS

1. Which of the following attribute selectors will make a selection based on starting of the value specified?

[attribute~=”value”]
[attribute*=”value”]
[attribute=”value”]
[attribute^=”value”] (CORRECT)

2. If you modify the second CSS selector mentioned to ‘div + p’ with the properties remaining the same, which of the <p> tags will have a change in color? Select all that apply. HTML Code:

<div>
   <p>alpha</p>
</div>
<p>beta</p>
 
CSS code:
 
div p {
     color: red;
}
div p {
     color: blue;
}

Both alpha and beta (CORRECT)
Neither alpha nor beta
Only alpha
Only beta

Correct: The + character refers to the first element after the div, which is beta. The ‘alpha’ will change from blue to red color and the ‘beta’ will change from black to blue

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

Pseudo-class Selector
Descendant Selector (CORRECT)
Child Selector (CORRECT)

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

4. True or false. The following CSS code will change the color of paragraph elements to red.

/*
p { color: red; }
*/

False (CORRECT)
True

Correct. The CSS rule is commented out and therefore it will not be applied.

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

True (CORRECT)
False

Correct. That’s the right answer!

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

Vb
vi
vw (CORRECT)
vh (CORRECT)

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

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

align-self
grid-area
grid-template-areas (CORRECT)
grid-auto-flow (CORRECT)

Correct. grid-template-areas specifies areas within the grid layout.
Correct. grid-auto-flow controls how auto-placed items are inserted into the grid.

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

from {top:0px;} to {bottom:100px;}
None of the above
from {top:0px;} to {top:100px;} (CORRECT)
from {bottom:100px;} to {bottom:0px;} (CORRECT)

Correct. You can use the top or bottom property to make the changes.
Correct. You can use the top or bottom property to make the changes.

9. Which of the following are benefits of using preprocessors?

If-Else Statements (CORRECT)
Loops (CORRECT)
Variable re-use (CORRECT)

Correct: That’s correct! You can conditionally output CSS rules and properties.
Correct: That’s correct! You can use loops to generate CSS rules.
Correct: That’s correct! You can define and use variables when using a preprocessor.

10. You’re developing a website and the customer has reported that the website doesn’t display correctly in their web browser. Which of the following will help you to investigate the issue? Select all that apply.

Review CSS selectors used and ensure that they are more specific
Install and use a linter (CORRECT)
Inspect the element using the browser developer tools (CORRECT)

Correct: That’s correct! A linter will validate that your CSS contains no errors.
Correct: That’s correct! The browser developer tools will help you investigate the CSS rule applied to the element.

11. div + p is an example of which type of CSS selector?

Child Selector
General Sibling Selector
Adjacent Sibling Selector (CORRECT)

Correct. The + character used to define an adjacent sibling selector. In this case it will select p elements if it immediately following a div element.

12. You want to set the font-size of an element relative to the font-size of the root HTML element. Which of the following is the appropriate unit of measurement?

px
em
rem (CORRECT)

Correct: That’s correct! The rem unit is relative to the font-size of the root element.

13. Which of the following display CSS property values will result in a block-level element? Select all that apply.

none
inline-grid
flex (CORRECT)
grid (CORRECT)

Correct: That’s correct! The flex value will result in a block-level element in the web page layout.

Correct: That’s correct! The grid value will result in a block-level element in the web page layout.

14. Which of the following is the correct way of commenting in CSS?

— This is a comment. —
/* This is a comment. */ (CORRECT)
This is a comment.
// This is a comment.

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

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

from {top:0px;} to {top:100px;}
None of the above
from {right:100px;} to {right:0px;} (CORRECT)
from {left:0px;} to {left:100px;} (CORRECT)

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

16. You’re developing a website and another developer noticed that your CSS contains errors. Which of the following will help resolve CSS errors?

Review CSS selectors used and ensure that they are more specific
Inspect the web page using the browser developer tools (CORRECT)
Install and use a linter (CORRECT)

Correct: That’s correct! Developers tools do help trace errors during development if browsers are used.

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

17. An element with the property set as ‘position: fixed’ is placed relative to the parent (or ancestor) element, not the viewport.

True
False (CORRECT)

Correct: That’s correct! The fixed position will place the element relative to the viewport.

18. CSS layouts is all about how the content of your web page is organized. Flexboxes, grids and boxes are all popular CSS layout options. Which of the following statements about CSS layouts are correct? Select all that apply.

A grid is two-dimensional. (CORRECT)
The display property specifies the type of box you want to use for an HTML element. (CORRECT)
A flexbox is one-dimensional. (CORRECT)
Flexboxes and grids can help create rules for multiple elements. (CORRECT)

Correct: That’s correct! Grids are two-dimensional. A grid creates a two-dimensional grid along both the row and column axes.

Correct: That’s correct! The display property does specify the type of box you can use for an HTML element.

Correct: That’s correct! Flexboxes are one-dimensional. A given flexbox container will lay things out in either a column or a row along its axis.

Correct: That’s correct! Flexboxes and grids can help create rules for multiple elements.

19. Flexboxes are ideal for creating a:

Create complex page layout
Search bar (CORRECT)
Navigation bar (CORRECT)
Image gallery (CORRECT)

Correct: Correct! The most common uses of flexbox in CSS are creating a responsive search bar, navigation bar and image gallery.

20. When using flexbox to create a bar chart, which one of the following properties will you use to control the alignment along the cross axis?

Justify content
Flex direction
Align items (CORRECT)

Correct: That’s correct! The property ‘Align items’ aligns multiple lines of items on the cross axis.

21. CSS grids are responsive, two-dimensional design layouts. Is the following statement true or false? The best way to ensure uniformity of rows and columns when setting grids is to use auto properties and the repeat function together.

False
True (CORRECT)

Correct: That’s correct! Using the repeat function in addition to the auto properties will reduce redundancy and provide ease of code modification.

22. As a developer at Little Lemon restaurant you have to create a basic grid layout for your web page. You start by dividing the page into three sections, what are those sections? Select all that apply.

Article
Footer (CORRECT)
Main (CORRECT)
Header (CORRECT)

Correct: That’s correct! The footer element at the bottom of the page is often used for “about us” or “contact info” sections.

Correct: That’s correct! The main element will be used to display the menu.

Correct: That’s correct! The header element will be used for the restaurant’s name in the logo.

23. With different variations of the attribute selectors, you can target different attributes of the HTML. You can select all items that have a class, or all items with a common value or a specific target by referencing its specific value. But these are not the only examples of what the attribute selector can target.

True (CORRECT)
False

Correct: That’s correct. The Attribute selector has several syntax variations.

24. What is the difference between Adjacent and Sibling combinators?

Sibling combinators will only target the first element after the specified elements while Adjacent combinators target all elements of the same type that follow the specified element.
Adjacent combinators will only target the first element after the specified elements while Sibling combinators target all elements of the same type that follow the specified element. (CORRECT)

Correct: That’s right. They both affect elements that follow a specified element. Adjacent combinators will only target the first element and Sibling combinators target all elements of the same type after the specified element

25. Which of the following items are User action state pseudo-classes? Check all that apply

Invalid
Hover (CORRECT)
Active (CORRECT)

Correct: Yes, that’s correct. User action state Pseudo-classes have an effect while a user is actively engaging with an HTML element. You can use the hover Pseudo-class to target an item while a user is hovering over it.

Correct: Yes, that’s correct. User action state Pseudo-classes have an effect while a user is actively engaging with an HTML element. The active pseudo-class changes the properties of an element when the state of that element is active like the appearance of a button.

26. You are developing a web page and want to add effect to links on the page. You use pseudo-classes related to web-link states to do this. But to prevent overwriting one of the rules, you must place them in the following order in the CSS file:

Active, hover, visited, link (AHVL)
link, visited, hover, active. (LVHA) (CORRECT)
Link, hover, active, visited (LHAV)

Correct: That is right! Developers use the acronym LVHA to remind them of the order that they need to follow when writing pseudo-class rules. LVHA stands for link, visited, hover, active.

27. Why is adding effects with CSS still popular today?

JavaScript libraries such as jQuery and Popmotion have less capabilities than CSS animations.
It simplifies web development. (CORRECT)
It is easy to learn. (CORRECT)
It is quicker and less expensive to create effects with CSS than with other programs. (CORRECT)

Correct: That’s correct! With CSS animations there is no need for additional libraries or third-party plugins.

Correct: That’s correct! By only knowing a small amount of CSS, animations can be added to a web page with ease.

Correct: That’s correct! Animation authoring tools can have a steep learning curve compared to learning CSS animations.

28. You have text that is overflowing on your website and you want to only have it displayed when you hover over it. To do this your ‘text overflow’ property can be set to ellipses.

Yes (CORRECT)
No

Correct: That’s correct! When the ‘text overflow’ property is set to ellipses the text will only display if you hover over it.

29. You have written code for boxes that rotate when you hover over them, but the effect happens instantaneously. Which one of the following properties will you use to show the motion when you hover over the boxes?

Transition (CORRECT)
Hover Pseudo -class
Transform

Correct: That’s correct! When you add the transition property it will make your effect visible.

30. The purpose of the @keyframe rule is to control the timing of advanced animations.

True (CORRECT)
False

Correct: That’s right. When developers want to create complex animations, they use the animation property. But to control the execution of the steps of the animation they use the at-keyframe rule

31. To make an animation move at a consistent speed you should:

Select all that apply.
Change the default timing function from ease to linear. (CORRECT)
Change the default timing function from linear to ease.
The default timing function will let the animation move at a consistent speed so you should not change thesettings.

Correct: That’s right. The default timing function is ease and that will cause an animation to be slow at the start, speed up in the middleand slow down at the end again.

32. You wrote a class name that starts with a numeric value. Which one of the following errors did you make?

Knowledge-based error
Skill-based error
Rule-based error (CORRECT)

Correct: That’s correct. Writing a class name that starts with a numeric value is a rule-based error.

33. When you want to run tests on your CSS code you need a linter tool. Why?

CSS indicates all syntax errors and will not execute if you do not run a linter.
CSS linters are only used to pick up syntax errors in your CSS code.
CSS does not handle errors. It just passes through the code and simply ignores the lines that it does not understand. Although VS code will indicate general errors, a linter can help you find any problematic patterns or inefficiencies in your code. (CORRECT)

Correct: That’s right. In fact, you can use a linter to test according to the rules of your choice.

34. The developer tools in the browser have several diagnostic functions you can use to check and debug your code. Is the following statement true or false?

True (CORRECT)
False

Correct: That’s correct. You can inspect the CSS rules applied to a highlighted element and it helps you to know what the properties of those rules are.

35. You want to ensure that your webpage is compatible with different browsers and you make use of media rules. Which of the following are media rules used for? Select all that apply.

Set properties for specific rules
Specify the density of the schemes (CORRECT)
Apply different styles to different media types or devices (CORRECT)

Correct: That’s correct! Media rules are used to specify the density of the schemes.

Correct: That’s correct! Media rules are used to apply different styles to different media types or devices.

36. rue or false. The goal of cross-device testing is to ensure user experience consistency between different devices.

False
True (CORRECT)

Correct: That’s correct. Cross-device testing ensures consistency across different screen sizes, device software and hardware.

Interactive CSS CONCLUSION

The application of CSS is a powerful tool that enables developers to create custom styles for their webpages. By using increasingly specific selectors, you can target the exact elements you want to style on your page. This module has taught you how to apply CSS to webpages, and we hope that you will continue learning more about this important topic.

Join Coursera now and take advantage of all the resources we offer so that you can become a master developer!

Previous Week

Next Week 3

Subscribe to our site

Get new content delivered directly to your inbox.

Quiztudy Top Courses

Popular in Coursera

Liking our content? Then, don’t forget to ad us to your BOOKMARKS so you can find us easily!