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
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?
- 4
- 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)
- ch
- rem
- vh
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
- 103
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.
nth-last-of-type
- 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)
- No
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!
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.
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.
Correct: Correct! The most common uses of flexbox in CSS are creating a responsive search bar, navigation bar and image gallery.
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!
Subscribe to our site
Get new content delivered directly to your inbox.
Quiztudy Top Courses
Popular in Coursera
- Google Advanced Data Analytics
- Google Cybersecurity Professional Certificate
- Meta Marketing Analytics Professional Certificate
- Google Digital Marketing & E-commerce Professional Certificate
- Google UX Design Professional Certificate
- Meta Social Media Marketing Professional Certificate
- Google Project Management Professional Certificate
- Meta Front-End Developer Professional Certificate
Liking our content? Then, don’t forget to ad us to your BOOKMARKS so you can find us easily!