Coursera Answers

HTML and CSS in depth Coursera Quiz Answers

by Niyander

Hello Friends in this article i am gone to share Coursera Course: HTML and CSS in depth Coursera Quiz Answers with you..

Enroll Link: HTML and CSS in depth

HTML and CSS in depth Coursera Quiz Answers

 

Week 1 Quiz Answers

Knowledge check: Practice using semantic tags Quiz Answer

Question 1)
What is the purpose of Semantic HTML tags?

  • To describe the structure of the HTML document
  • To describe the meaning of the HTML document
  • To describe the layout of the HTML document

Question 2)
What is the impact of using semantic tags in your HTML document? Select all that apply.

  • It allows search engines to understand the HTML document
  • It improves your rank in search engine results
  • It allows accessibility software to understand the HTML document

Question 3)
What type of content is the <article> semantic HTML element appropriate for? Select all that apply.

  • News article
  • Blog post
  • Forum post

Question 4)
Which of the following elements is most suitable for describing the navigation section of a webpage?

  • <nav>
  • <header>
  • <main>

Question 5)
You need to add a copyright notice to the bottom of a web page. Which of the following semantic tags is most suitable to use?

  • <cite>
  • <section>
  • <footer>

Question 6)
You need to indicate that a section of text in a <p> element is important. Which of the following semantic tags should you use?

  • <u>
  • <b>
  • <strong>

Question 7)
You need to display a list of descriptions on a web page. Which of the following tags are best-suited semantically?

  • <dl>
  • <ul>
  • <ol>

 

Knowledge check: Metadata Quiz Answer

Question 1)
What are some of the main characteristics of meta tags? Select all that apply.

  • They define metadata about an HTML document, namely information about data
  • They are placed inside the <body> element
  • They are very important for SEO
  • They don’t have a visual representation in your pages

Question 2)
What are some of the most important Meta tags you should use for good SEO? Select all that apply.

  • Image alt attributes
  • Title
  • Description
  • Keywords

Question 3)
Which meta tag is used to specify the character encoding for the HTML document?

  • lang
  • charset
  • language
  • content

Question 4)
Which meta tag and properties do you need to set to make your pages responsive in desktop and mobile viewports?

  • <meta name=”viewport” content=”width=device-width, initial-scale=1” />
  • <meta name=”viewport” content =” width = device-width, initial-scale = 0” />
  • <meta name=”viewport” content=”width=window-width, initial-scale=1” />
  • <meta name=”viewport” content=”height=device-height, initial-scale=1” />

Question 5)
How do you tell Google you don’t want to provide an automatic translation for your page if the user uses a different language?

  • <meta name=”language” content=”english” />
  • <meta name=”googlebot” content=”english” />
  • <meta name=”googlebot” content=”notranslate” />

Question 6)
Which of the following statements are true about HTTP-equiv tags? Select all that apply.

  • They are useful if you don’t have access to the server configuration
  • They can simulate HTTP response headers
  • They are the recommended way to set HTTP response headers

 

Knowledge check: Open Graph Protocol Quiz Answer

Question 1)
How does the Open Graph Protocol (OGP) name the meta tags?

  • using id attribute
  • using name attribute
  • using property attribute

Question 2)
Each property in the Open Graph Protocol starts with ‘ogp:’

  • True
  • False

Question 3)
Which property should be used to define a URL of an image that must display when the website is shared on social media?

  • src
  • href
  • og:url
  • og:image

Question 4)
Which property is used to define the language of the content being shared?

  • og:description
  • og:lang
  • og:locale
  • og:type

Question 5)
The type property defines the type of the content. For example:

<meta property="og:type" content="website" />

Which property would mention the name of the website?

  • og:description
  • og:title
  • og:site_name
  • og:name

Question 6)
When sharing your blog post, which property would you use to provide the link to the actual post?

  • og: image
  • og:description
  • og:url

 

Knowledge check: Semantic and meta tags Quiz Answer

Question 1)
When setting up viewport metadata for mobile experiences, the ideal suggested value for ‘initial-scale’ is:

  • 100
  • 0.1
  • 1
  • -1

Question 2)
True or false. The viewport metadata can impact Search Engines rankings.

  • True
  • False

Question 3)
Which of the following meta tags are used for Search Engine Optimization?Select all that apply.

  • Description
  • Author
  • Keywords
  • Viewport

Question 4)
Which of the following are the required properties while making social media cards using OGP? Select all that apply.

  • image
  • type
  • description
  • title

Question 5)
Which of the elements below semantically divides your article content into parts that cover a specific topic?

  • <nav>
  • <section>
  • <footer>
  • <header>

Question 6)
When defining a social media card, how would you define the title?

  • <meta property=”title” content=”my title” />
  • <meta property=”og:title” content=”my title” />
  • <meta name=”media:title” content=”my title” />
  • <meta name=”title for facebook” content=”my title” />

Question 7)
True or false. More than one header element can exist in an HTML document?

  • True
  • False

Question 8)
When required to define a page refresh, which attribute value in <meta> must be set? Select all that apply.

  • name
  • charset
  • http-equiv
  • content

 

Self review: Create and test a form Quiz Answer

Question 1)
When the input fields contained no text and you clicked the Log In button, what was the result?

  • The web browser notified that the required field must be completed
  • The form submitted successfully
  • The password field changed to a red border

Question 2)
When the input fields contained a single text character and you clicked the Log In button, what was the result? Select all that apply.

  • The form submitted successfully
  • The username field changed to a red color.
  • The password field changed to a red color
  • The web browser notified that the minimum length is 2

Question 3)
When the username field contained the text “admin” and the password field contained the text “password”, what was the result when you clicked the Log In button?

  • The web browser notified that the required fields must be completed
  • The form submitted successfully
  • The username field changed to a red color

 

Knowledge check: Declaring form elements Quiz Answer

Question 1)
You are building a calendar web application; which of the following input types can be used? Select all that apply.

  • <input type=”week”>
  • <input type=”date”>
  • <input type=”month”>
  • <input type=”year”>

Question 2)
You want to define a dropdown of selectable options. However, you also want users to be able to input their responses as well. Which of the following is the most suitable form element to wrap available options?

  • fieldset
  • output
  • select
  • datalist

Question 3)
For the following code block, what is the most suitable input type that will ensure that only a single option is selected?

<form>
<input type="----" id="alpha" name="letters" value="Alpha">
<label for="html">Alpha</label><br>
<input type="----" id="beta" name="letters" value="Beta">
<label for="css">Beta</label><br>
<input type="----" id="gamma" name="letters" value="Gamma">
<label for="javascript">Gamma</label>
</form>
  • radio
  • button
  • checkbox
  • submit

Question 4)
When defining a form, which element is almost always defined?

  • <legend>
  • <option>
  • <output>
  • <input>

Question 5)
True or false. The following form element will clear the form validation errors.

<input type="reset">
  • True
  • False

Question 6)
A developer has added the following input element to a HTML form. What client-side validation is applied? Select all that apply.

<input type="email" required minlength="4">
  • The user input must be in an email address format
  • The user must provide a value to the input field
  • The maximum length of the user input must be 1024 characters
  • The minimum length of the user input must be 4 chararacters.

 

Knowledge check: Form submission Quiz Answer

Question 1)
Which form attribute is used to specify the address to which the form data will be submitted to?

  • src
  • method
  • action

Question 2)
Which HTTP method will be used to send data for the following form?

<form>
<button type="submit">Submit</button>
</form>
  • POST
  • PUT
  • GET
  • DELETE

Question 3)
When using the HTTP POST method to submit form data, how is the data transmitted to the server?

  • Via the address in the URL bar of the web browser
  • Via the body of the HTTP request

Question 4)
Your web browser is currently at the address https://meta.com/profile. When the following form is submitted, what address will it submit to?

<form>
<button type="submit">Submit</button>
</form>
  • https://meta.com
  • https://meta.com/login
  • https://meta.com/profile

Question 5)
Your web browser is currently at the address https://meta.com/profile. When the following form is submitted, what address will it submit to?

<form action="/login">
<button type="submit">Submit</button>
</form>
  • https://meta.com
  • https://meta.com/profile
  • https://meta.com/profile/login
  • https://meta.com/login

Question 6)
Your web browser is currently at the address https://meta.com/profile. When the following form is submitted, what address will it submit to?

<form action=”login”>
<button type=”submit”>Submit</button>
</form>

  • https://meta.com/profile/login
  • https://meta.com/login
  • https://meta.com/profile
  • https://meta.com

Question 7)
The HTTP DELETE method can be used for form submission.

  • True
  • False

Question 8)
There are several ways to secure transmitting form data to the web server. Which of the following will help secure the data? Select all that apply.

  • Send the data using HTTPS
  • Send the data using the HTTP GET method
  • Send the data using the HTTP POST method

 

Self-review: Create a complex form Quiz Answer

Question 1)
What attribute did you apply to the number of people field to set the minimum value?

  • minlength
  • min
  • minimum

Question 2)
When you clicked the date of booking field, what was the result?

  • Nothing happened
  • A slider appeared
  • A date picker was displayed

Question 3)
When you typed the word hello into the email address field and submitted the form, what was the result?

  • The web browser prompted to fix the email address format
  • The input field changed to the color red
  • The form submitted successfully

 

Knowledge check: User input and forms Quiz Answer

Question 1)
When the user clicks the submit button of the following form, what will happen? Select all that apply.

<form method="POST">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit">Log In</button>
</form>
  • The server-side will prevent the processing of the request if server-side validation is implemented.
  • The browser will still allow form submission.
  • The browser will block the form submission.
  • It will use the resources of the server unnecessarily.

Question 2)
What attribute should be added to the <input> element to ensure the user provides a response?

  • autocomplete
  • required
  • placeholder
  • pattern

Question 3)
What is the risk of using the HTTP GET method for form submission? Check all that apply.

  • The web address may exceed the maximum length accepted by the web server.
  • The form data will be stored in the browser history.
  • The form data will be sent insecurely.

Question 4)
Which of the following is a framework that provides CSS rules for forms and visual consistency? Check all that apply.

  • Tailwind CSS
  • Foundation
  • Boilerplate
  • Bootstrap

Question 5)
The web browser sends a ____ to the web server, and the web server sends back a ____. This is done by means of the HTTP ____ method which accepts values as part of the URL or the HTTP ____ method which submits the values in our form as part of the request.

Fill in the blank with the correct order from the options below:

A. GET
B. POST
C. Request
D. Response

  • CDBA
  • ABDC
  • CDAB
  • ABCD

Question 6)
Which of the following values can fill the blank?

The form action attribute consists of _____ as values. Select all that apply.

  • HTTP Requests
  • An absolute URL
  • form status
  • Relative URL

 

 

Self review: Rate the media Quiz Answer

Question 1)
When you clicked the play button on the video, what was the result?

  • The video started playing.
  • The video did not play.

Question 2)
You used the range type for the ratings input field. How did you define its possible values? Select all that apply.

  • Using the min attribute
  • Using the max attribute
  • Using a datalist element

Question 3)
Which element specified which video file to be played?

  • The src element
  • The video element
  • The source element

 

Knowledge check: Media elements

Question 1)
Each square block in a table is called a:

  • box
  • cell
  • unit
  • index

Question 2)
What attribute can you add inside an audio tag to enable player controls such as the pause and volume buttons?

  • source
  • audio
  • controls
  • src

Question 3)
While using the canvas element from the HTML file inside your JavaScript file, you pass the value of the id attribute of the canvas to the document.getDocumentById() function in your JavaScript code.

  • True
  • False

Question 4)
Which of the following attributes can you add to an iFrame to improve the security of the web page where the iFrame is added? Choose all that apply.

  • style=”border:none;”
  • sandbox=””
  • allow=”camera ‘none’;”
  • allow=”microphone ‘none’;”

Question 5)
GIF, 2D Canvas and WebGL are types of authoring tools.

  • True
  • False

Question 6)
.mp4 is a type of

  • File name
  • File extension
  • File limiter
  • File template

 

Visit this link: Module quiz: HTML deep dive Quiz Answers

 

 

Week 2 Quiz Answers

Self review: Create a grid layout Quiz Answer

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

  • Yes, but no visible changes
  • Yes, and there were changes
  • No

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

  • 5
  • 3
  • 4

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

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

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

  • Yes
  • No
  • Yes, but it is out of alignment.
  • Yes, but some grid items are not visible.

 

Knowledge check: Creating layouts Quiz Answer

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

  • box
  • inline-grid
  • grid
  • flex

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

  • vh
  • ch
  • px
  • rem

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

  • Flex model
  • Grid model
  • Box model
  • Floats model

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

  • vw
  • ch
  • em
  • rem

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

  • flex-shrink
  • flex-wrap
  • flex-basis
  • flex-grow

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

  • Border
  • Padding
  • Outline
  • Margin

Question 7)
The grid items by default will start at the ________ of the grid container.

  • top left
  • bottom left
  • bottom right
  • top right

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

  • True
  • False

 

Self review: Targeted CSS Quiz Answer

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

  • No, did not change the viewport size.
  • Yes, and there were changes.
  • Yes, but no visible changes.

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

  • General sibling combinator
  • Child combinator
  • Adjacent sibling combinator
  • Descendant combinator

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

  • True
  • False

 

Knowledge check: CSS selectors Quiz Answer

Question 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?

  • Visited
  • Link
  • Hover
  • Active

Question 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

Question 3)
Calculate the specificity of the following selector:

“`ul#alpha li.visited “`

  • 103
  • 112
  • 22
  • 13

Question 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
  • FALSE

Question 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>

  • ul > .red{ color: red; }
  • #red { color: red; }
  • li > red { color: red; }
  • li { color: red; }
  • .red{ color: red; }

Question 6)
Which of the selectors below will select <div> tags with a title attribute in CSS?

  • #title
  • div.title
  • div[title]
  • div#title

 

Self review: Transforming and transitioning elements Quiz Answer

Question 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
  • No changes

Question 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
  • The flips will happen half the times
  • There will be no change in the output

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

  • Yes
  • No

 

Knowledge check: CSS effects Quiz Answer

Question 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
  • animation-delay

Question 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
  • They reduce the amount of CSS to maintain
  • They provide audit functionality

Question 3)
The ______ suffix is used to define variables inside SCSS files used for CSS.

  • $
  • @
  • #
  • No special characters are needed

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

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

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

  • True
  • False

Question 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);
}
}
  • Yes, this should work fine
  • No, you cannot use the transform inside @keyframes
  • No, the animation transition is not fully defined

Knowledge check: Debugging Quiz Answer

Question 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
  • .alpha
  • p
  • div

Question 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 ignore the specific property-value pair and continue compilation
  • It will stop further compilation altogether without reporting the error

Question 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
  • False

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

  • Overspecificity
  • Shorthand properties
  • Universal selectors

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

  • CSS linters
  • CSS libraries for live previews
  • CSS libraries for help in browser compatibility
  • CSS validators

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

  • Syntactically Awesome stylesheet
  • User-agent stylesheet
  • Author stylesheet
  • User stylesheet

 

Visit this link:  Module quiz: Interactive CSS Quiz Answers

 

 

Week 3 Quiz Answers

Readiness check: Have you completed the initial setup?

Question 1)
Have you selected one of the fictional clients provided in the Subject selection reading?

  • Yes
  • No

Question 2)
Indicate if you have added the required sections on your home page. Check all that apply.

  • Header
  • Nav
  • Main
  • Footer

Question 3)
Have you set up a grid-based or flexbox CSS Layout?

  • Yes
  • No

Question 4)
Have you created two rows for the main content?

  • Yes
  • No

Question 5)
Have you created one full-width column for the first row of the main content?

  • Yes
  • No

Question 6)
Have you created three columns for the second row?

  • Yes
  • No

Question 7)
Have you created two half-width columns for the footer?

  • Yes
  • No

 

Visit this link:  Peer-graded Assignment: Submit your portfolio project Solution