
COURSE 4 – HTML AND CSS IN DEPTH QUIZ ANSWERS
Week 1: HTML and CSS in Depth
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
- KNOWLEDGE CHECK: PRACTICE USING SEMANTIC TAGS
- KNOWLEDGE CHECK: METADATA
- KNOWLEDGE CHECK: OPEN GRAPH PROTOCOL
- KNOWLEDGE CHECK: SEMANTIC AND META TAGS
- SELF REVIEW: CREATE AND TEST A FORM
- KNOWLEDGE CHECK: DECLARING FORM ELEMENTS
- KNOWLEDGE CHECK: FORM SUBMISSION
- SELF-REVIEW: CREATE A COMPLEX FORM
- KNOWLEDGE CHECK: USER INPUT AND FORMS
- SELF REVIEW: RATE THE MEDIA
- KNOWLEDGE CHECK: MEDIA ELEMENTS
- MODULE QUIZ: HTML DEEP DIVE
- CONCLUSION
HTML in Depth INTRODUCTION
In this module of the HTML and CSS in Depth course offered as part of Coursera’s Meta Front-End Developer Professional Certificate program, you will learn how to use HTML and CSS to structure webpages. Through a combination of lectures, exercises, and assessments, you will gain an understanding of HTML elements that can be used to control the appearance and function of webpages. You will also explore styling HTML with CSS properties that affect content layout, fonts and colors. With these skillset at your disposal, you will have everything you need to create websites that look good and work well.
By the end of this module, you will understand HTML fundamentals such as HTML tags, attributes, document structure and more; gain fluency in working with HTML elements such as lists, tables and forms; and master styling HTML with CSS rules to control fonts and colors.
Learning Objectives
- Create a video and audio player that can rate the media played.
- Post form data to a server
- Recognize server-side connections and the languages used to carry out requests and responses.
- Create and test a form with client-side validation.
- Create commonly-used web page layouts and components.
- Use common semantic and meta tags to improve the accessibility, readability and SEO of a web page.
KNOWLEDGE CHECK: PRACTICE USING SEMANTIC TAGS
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 (CORRECT)
- To describe the layout of the HTML document
Correct: That’s correct! Semantic tags describe the meaning and intent of the HTML document.
2. What is the impact of using semantic tags in your HTML document? Select all that apply.
- It improves your rank in search engine results
- It allows search engines to understand the HTML document (CORRECT)
- It allows accessibility software to understand the HTML document (CORRECT)
Correct: That’s correct! The semantic tags allow search engines to understand the HTML document.
Correct: That’s correct! The semantic tags allow accessibility software such as screen readers to understand the document.
3. What type of content is the <article> semantic HTML element appropriate for? Select all that apply.
- News article (CORRECT)
- Blog post (CORRECT)
- Forum post (CORRECT)
Correct: That’s correct! A news article is a self-contained block of information suitable for the <article> semantic tag.
Correct: That’s correct! A blog post is a self-contained block of information suitable for the <article> semantic tag.
Correct: That’s correct! A forum post is a self-contained block of information suitable for the <article> semantic tag.
4. Which of the following elements is most suitable for describing the navigation section of a webpage?
- <header>
- <main>
- <nav> (CORRECT)
Correct: That’s correct! <nav> is most suited for describing the navigation section.
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?
- <footer> (CORRECT)
- <section>
- <cite>
Correct: That’s correct! <footer> should be used for the copyright notice as the notice is not the main focus of the content.
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?
- <strong> (CORRECT)
- <u>
- <b>
Correct: That’s correct! <strong> indicates that a section of text is important.
7. You need to display a list of descriptions on a web page. Which of the following tags are best-suited semantically?
- <dl> (CORRECT)
- <ul>
- <ol>
Correct: That’s correct! <dl> semantically describes a description list.
KNOWLEDGE CHECK: METADATA
1. What are some of the main characteristics of meta tags? Select all that apply.
- They are placed inside the <body> element
- They don’t have a visual representation in your pages (CORRECT)
- They define metadata about an HTML document, namely information about data (CORRECT)
- They are very important for SEO (CORRECT)
Correct: Correct! They will not be displayed on the page.
Correct: Correct! They are contextual information for browsers.
Correct: Correct! They define and influence how search engines rank your pages.
2. What are some of the most important Meta tags you should use for good SEO? Select all that apply.
- Keywords
- Description (CORRECT)
- Image alt attributes (CORRECT)
- Title (CORRECT)
Correct: Correct! Although it is not a ranking factor, search engines tend to display descriptions as accompanied snippets.
Correct: Correct! They help search engines understand what the images are about.
Correct: Correct! Search engines use them as clickable headlines and titles are given high weight in the ranking factor.
3. Which meta tag is used to specify the character encoding for the HTML document?
- content
- language
- charset (CORRECT)
- lang
Correct: That’s correct! You should use charset to tell the browser the encoding used in your HTML pages, like UTF-8, for example.
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” /> (CORRECT)
- <meta name=”viewport” content =” width = device-width, initial-scale = 0” />
- <meta name=”viewport” content=”height=device-height, initial-scale=1” />
- <meta name=”viewport” content=”width=window-width, initial-scale=1” />
Correct: That’s correct! It’ll establish a 1:1 relationship between CSS pixels and device-independent pixels, taking screen orientation into account.
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=”googlebot” content=”notranslate” /> (CORRECT)
- <meta name=”googlebot” content=”english” />
- <meta name=”language” content=”english” />
Correct: That’s correct! This is how you instruct Google to skip an automatic translation.
6. Which of the following statements are true about HTTP-equiv tags? Select all that apply.
- They are the recommended way to set HTTP response headers
- They are useful if you don’t have access to the server configuration (CORRECT)
- They can simulate HTTP response headers (CORRECT)
Correct: Correct! This is true if you are using a shared hosting where it’s up to the hosting company how to respond to the requests.
Correct: Correct! The server can attach http-equiv meta tags for additional instructions to the browser.
KNOWLEDGE CHECK: OPEN GRAPH PROTOCOL
1. How does the Open Graph Protocol (OGP) name the meta tags?
- using id attribute
- using name attribute
- using property attribute (CORRECT)
Correct: That’s right! Naming OGP meta tags inside the property attribute won’t enable social media to properly identify OGP properties.
2. Each property in the Open Graph Protocol starts with ‘ogp:’
- True
- False (CORRECT)
Correct: That’s right! The property value starts with ‘og:’ instead of ‘ogp:’
3. Which property should be used to define a URL of an image that must display when the website is shared on social media?
- og:image (CORRECT)
- href
- og:url
- src
Correct: That’s right! The image property declares the url of the image that must be shared.
4. Which property is used to define the language of the content being shared?
- og:lang
- og:locale (CORRECT)
- og:description
- og:type
Correct: That’s correct! The locale contains abbreviated information regarding the language.
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:name
- og:title
- og:site_name (CORRECT)
- og:description
Correct: That’s right! The name of the website is mentioned through this property.
6. When sharing your blog post, which property would you use to provide the link to the actual post?
- og:description
- og: image
- og:url (CORRECT)
Correct: That’s right! The post url is defined with the og:url property.
KNOWLEDGE CHECK: SEMANTIC AND META TAGS
1. When setting up viewport metadata for mobile experiences, the ideal suggested value for ‘initial-scale’ is:
- 0.1
- 1 (CORRECT)
- 100
- -1
Correct: That’s correct! The most used viewport value for mobile experiences is to set the width to device-width and the initial-scale to 1.
2. True or false. The viewport metadata can impact Search Engines rankings.
- True (CORRECT)
- False
Correct: That’s correct! The viewport metadata is important when designing responsive web pages because the mobile experience of users has an influence on SEO.
3. Which of the following meta tags are used for Search Engine Optimization? Select all that apply.
- Keywords
- Description (CORRECT)
- Author (CORRECT)
- Viewport (CORRECT)
Correct: That’s correct! The description metadata describes the content of the web page and is often used as descriptive text in search results.
Correct: That’s correct! Proper author tags are important for SEO.
Correct: That’s correct! viewport size is important for SEOs.
4. Which of the following are the required properties while making social media cards using OGP? Select all that apply.
- description
- type (CORRECT)
- title (CORRECT)
- image (CORRECT)
Correct: That’s right! The Open Graph Protocol requires that you must always include the type property.
Correct: That’s right! The Open Graph Protocol requires that you must always include the title property.
Correct: That’s right! The Open Graph Protocol requires that you must alwaysinclude the image property.
5. Which of the elements below semantically divides your article content into parts that cover a specific topic?
- <header>
- <section> (CORRECT)
- <footer>
- <nav>
Correct: That’s correct. The section element helps to divide the page into conceptual blocks.
6. When defining a social media card, how would you define the title?
- <meta name=”title for facebook” content=”my title” />
- <meta property=”title” content=”my title” />
- <meta name=”media:title” content=”my title” />
- <meta property=”og:title” content=”my title” /> (CORRECT)
Correct: That’s correct. The property attribute is rightly set to og:title.
7. True or false. More than one header element can exist in an HTML document?
- True (CORRECT)
- False
Correct: That’s correct! There can be more than one header elements. For instance, when there are multiple articles in a page, each can have its own header.
8. When required to define a page refresh, which attribute value in <meta> must be set? Select all that apply.
- name
- charset
- http-equiv (CORRECT)
- content (CORRECT)
Correct: That’s correct! The value should be set to ‘refresh’.
Correct: That’s correct! The numeric value of the refresh time interval is set by the content attribute.
SELF REVIEW: CREATE AND TEST A FORM
1. When the input fields contained no text and you clicked the Log In button, what was the result?
- The password field changed to a red border
- The form submitted successfully
- The web browser notified that the required field must be completed (CORRECT)
Correct: Correct. The fields were marked as required so they must be filled out before submitting.
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. (CORRECT)
- The web browser notified that the minimum length is 2 (CORRECT)
- The password field changed to a red color (CORRECT)
Correct: Correct. The browser applied the proper CSS selectors to change the invalid field to red.
Correct: Correct. The fields were marked as needing a minimum length of 2.
Correct: Correct. The browser applied the proper CSS selectors to change the invalid field to red.
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 username field changed to a red color
- The form submitted successfully (CORRECT)
- The web browser notified that the required fields must be completed
Correct: Correct. The fields were valid so it submitted correctly.
KNOWLEDGE CHECK: DECLARING FORM ELEMENTS
1. You are building a calendar web application; which of the following input types can be used? Select all that apply.
- <input type=”year”>
- <input type=”week”> (CORRECT)
- <input type=”date”> (CORRECT)
- <input type=”month”> (CORRECT)
Correct: That’s correct. This is a valid input value for type.
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?
- Datalist (CORRECT)
- select
- output
- fieldset
Correct: That’s correct! Using datalist, you provide suggestions that users may or may not select. With the input filed, they are free to add their response.
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>
- Button
- Radio (CORRECT)
- checkbox
- submit
Correct: That’s correct! Radio is used to select a single option.
4. When defining a form, which element is almost always defined?
- <legend>
- <output>
- <input> (CORRECT)
- <option>
Correct: Correct! In almost any form, some element is required to get user input.
5. True or false. The following form element will clear the form validation errors.
<input type="reset">
- True
- False (CORRECT)
Correct: That’s correct! The reset value will reset the form contents to default values.
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 maximum length of the user input must be 1024 characters
- The user input must be in an email address format (CORRECT)
- The user must provide a value to the input field (CORRECT)
- The minimum length of the user input must be 4 characters. (CORRECT)
Correct: That’s correct. The type attribute is set to email which will validate that the input is a valid email address format.
Correct: That’s correct. The required attribute will ensure that the user provides a value to the input field.
Correct: That’s correct! The minlength attribute is applied to the element and its value is set to 4.
KNOWLEDGE CHECK: FORM SUBMISSION
1. Which form attribute is used to specify the address to which the form data will be submitted to?
- Src
- method
- action (CORRECT)
Correct: That’s correct. The action attribute specifies the URL to submit the data to.
2. Which HTTP method will be used to send data for the following form?
<form>
<button type="submit">Submit</button>
</form>
- DELETE
- POST
- PUT
- GET (CORRECT)
Correct: That’s correct. When the method attribute is not specified, GET is the default HTTP method used.
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 (CORRECT)
Correct: That’s correct. The form data is encoded as part of the request body.
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>
Correct: That’s correct. When the action attribute is not specified, the form will default to the same URL, in this case, https://meta.com/profile.
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/login (CORRECT)
- https://meta.com/profile/login
- https://meta.com
- https://meta.com/profile
Correct: That’s correct. The action attribute starts with a forward slash so it is an absolute path. Therefore, /login is appended to https://meta.com.
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 (CORRECT)
- https://meta.com/login
- https://meta.com/profile
- https://meta.com
Correct: That’s correct. The action attribute does not start with a forward slash, so it is a relative path. Therefore, login is appended to the current url.
7. The HTTP DELETE method can be used for form submission.
- True
- False (CORRECT)
Correct: That’s correct. Only HTTP GET and POST methods can be used for form submission.
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 the HTTP GET method
- Send the data using HTTPS (CORRECT)
- Send the data using the HTTP POST method (CORRECT)
Correct: That’s correct. HTTPS will encrypt the data before sending.
Correct: That’s correct. The form data will be sent as part of the request body which means it will be more secure than HTTP GET but still obtainable by a malicious third party.
SELF-REVIEW: CREATE A COMPLEX FORM
1. What attribute did you apply to the number of people field to set the minimum value?
- minlength
- minimum
- min (CORRECT)
Correct: Correct. The min attribute is used to set the minimum value of range inputs.
2. When you clicked the date of booking field, what was the result?
- A slider appeared
- A date picker was displayed (CORRECT)
- Nothing happened
Correct: Correct. The date input type will provide a date picker to the user.
3. When you typed the word hello into the email address field and submitted the form, what was the result?
- The input field changed to the color red
- The web browser prompted to fix the email address format (CORRECT)
- The form submitted successfully
Correct: That’s correct! The email input type ensures correct email address formatting.
KNOWLEDGE CHECK: USER INPUT AND FORMS
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 browser will block the form submission.
- It will use the resources of the server unnecessarily. (CORRECT)
- The server-side will prevent the processing of the request if server-side validation is implemented. (CORRECT)
- The browser will still allow form submission. (CORRECT)
Correct: That’s right! The browser proceeds with the submission.
Correct: That’s right! The server-side will still pick up the information missing but prevent the processing of the request.
Correct: That’s right! The browser proceeds with the submission.
2. What attribute should be added to the <input> element to ensure the user provides a response?
- Autocomplete
- Required (CORRECT)
- placeholder
- pattern
Correct: That’s correct! When the required attribute has been added it specifies that the input field can’t be empty.
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. (CORRECT)
- The form data will be stored in the browser history. (CORRECT)
- The form data will be sent insecurely. (CORRECT)
Correct: That’s right! The maximum address length for requests varies between servers which may lead to data loss.
Correct: That’s right! Since the data is sent as part of the web address, it will be stored in the web browser’s history.
Correct: That’s right! Since the data is sent as part of the web address it is easily exposed during transmission.
4. Which of the following is a framework that provides CSS rules for forms and visual consistency? Check all that apply.
- Boilerplate
- Foundation (CORRECT)
- Bootstrap (CORRECT)
- Tailwind CSS (CORRECT)
Correct: That’s correct. That’s a CSS framework.
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
- CDAB (CORRECT)
- ABDC
- CDBA
- ABCD
Correct: That’s right! The web browser sends a request to the web server, and the web server sends back a response. This is done by means of the GET method, which accepts values and the POST method, which submits the values in our form.
6. Which of the following values can fill the blank?
The form action attribute consists of _____ as values. Select all that apply.
- HTTP Requests
- form status
- An absolute URL (CORRECT)
- Relative URL (CORRECT)
Correct: Correct! A form action can consist of absolute URLs.
Correct: That’s right. form action can consist of relative URLs.
SELF REVIEW: RATE THE MEDIA
1. When you clicked the play button on the video, what was the result?
- The video started playing. (CORRECT)
- The video did not play.
Correct: Correct. The video will start playing.
2. You used the range type for the ratings input field. How did you define its possible values? Select all that apply.
- Using a datalist element (CORRECT)
- Using the min attribute (CORRECT)
- Using the max attribute (CORRECT)
Correct: Correct. The datalist element sets the values and labels possible within the range.
Correct: Correct. The min attribute sets the minimum value.
Correct: Correct. The max attribute sets the maximum value.
3. Which element specified which video file to be played?
- The src element
- The video element
- The source element (CORRECT)
Correct: Correct. The src attribute of the source element specifies the video file to be played.
KNOWLEDGE CHECK: MEDIA ELEMENTS
1. Each square block in a table is called a:
- Index
- Box
- cell (CORRECT)
- unit
Correct: Correct! That is the correct term.
2. What attribute can you add inside an audio tag to enable player controls such as the pause and volume buttons?
- source
- src
- audio
- controls (CORRECT)
Correct: That’s right! If you want to enable audio player controls such as a play, pause and volume buttons, you can add the controls attribute.
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 (CORRECT)
Correct: That’s right! The function that you pass the ID attribute to is ‘document.getElementById()’.
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;”
- allow=”microphone ‘none’;” (CORRECT)
- sandbox=”” (CORRECT)
- allow=”camera ‘none’;” (CORRECT)
Correct: That’s right! The allow attribute will turn the microphone off because it limits which browser features the iframe can access.
Correct: That’s right! Sandboxing will help add an extra set of restrictions such as preventing files from being downloaded and preventing popup windows.
Correct: That’s right! The allow attribute will turn the camera off because it limits which browser features the iframe can access.
5. GIF, 2D Canvas and WebGL are types of authoring tools.
- True
- False (CORRECT)
Correct: That’s right! These are all web technologies that enable authoring tools.
6. .mp4 is a type of
- File name
- File extension (CORRECT)
- File limiter
- File template
Correct: That’s right! .mp4 is a file extension type.
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
MODULE QUIZ: HTML DEEP DIVE
1. You are including a blog post on your web page. You decide to place the content inside an <article> tag. What are the advantages of using an <article> tag instead of a <div> tag in the scenario? Select all that apply.
- It allows the browser to render the element faster.
- It allows search engines to better rank your pages. (CORRECT)
- It better describes the meaning of the element to accessibility software (CORRECT)
Correct: That’s correct. Using semantic tags helps search engines understand the content of your web page better.
Correct: That’s correct. Semantic tags help accessibility software understand the meaning of the HTML document.
2. Which of the following meta tags are recommended for modern web pages? Select all that apply.
- Keywords
- Description (CORRECT)
- Author (CORRECT)
- Viewport (CORRECT)
Correct: That’s correct! Description is often used by search engines to display a summary of the web page.
3. What are the benefits of using the Open Graph Protocol? Select all that apply.
- Allows developers to inform social media platforms what type of content is being linked for a given URL. (CORRECT)
- Provides social media platforms with the correct information for your page. (CORRECT)
- Allows developers to set a preview image to display on social media platforms. (CORRECT)
Correct: That’s correct! The meta tags allow developers to specify the type of content being linked to, such as a web page, a video, a music file and so on.
Correct: That’s correct! The Open Graph Protocol meta tags help social media platforms understand the content of your web page.
Correct: That’s correct! The meta tags allow developers to specify the preview image for the web page to be displayed on social media platforms.
4. You are tasked with building a login form for a website. The project manager has asked what type of validation you recommend implementing for both security and a good user experience: client-side validation or server-side validation. Which do you recommend?
- Recommend only server-side validation
- Recommend only client-side validation
- Recommend both client-side and server-side validation (CORRECT)
Correct: That’s correct. Using both helps provide both good user experience and ensure security and integrity of data.
5. You’ve added a form element to your HTML document and set the value of the method attribute to POST. What is the other valid HTTP method for form submission?
- GET (CORRECT)
- PUT
- DELETE
Correct: That’s correct! GET is the default HTTP method when the form attribute is not specified. It can be explicitly specified using the method attribute, for example: method=”get”.
6. Your web browser is currently at the URLhttps://meta.com/hello
What address will the following form submit to?
<form action=”/login”>
- https://meta.com/hello/login
- https://meta.com/login
- https://meta.com/hello
- https://meta.com (CORRECT)
Correct: That’s correct. The action attribute does not start with a forward slash, so it is a relative path. Therefore, login is appended to the current url.
7. You are creating a landing page for a local business that includes a video player. The specification is that the video automatically plays, can’t be paused and it loops. What are the correct statements for this implementation? Select all that apply.
- Setting the controls attribute
- Setting the autoplay attribute (CORRECT)
- Setting the loop attribute (CORRECT)
- Set several source elements with distinct types (CORRECT)
Correct: Correct! The video will automatically start playing as soon as possible.
Correct: Correct! The video will automatically start over again upon reaching the end.
Correct: Correct! This allows the browser to pick the video format that it supports.
8. You’ve been asked to embed another web page within your web page using an iframe. Which of the following tasks should be done to maintain security?
- Apply sandboxing to the iframe (CORRECT)
- Validate that the web page is a trusted source (CORRECT)
- Apply the allow attribute to the iframe (CORRECT)
Correct: That’s correct! Sandboxing will limit the capabilities of the iframe.
Correct: That’s correct! You should not embed sources which you do not trust.
Correct: That’s correct! The allow attribute will limit the web browser features that the iframe can access.
9. Which of the following are possible using the canvas HTML element?
- Manipulating HTML elements
- 3D graphics rendering (CORRECT)
- 2D graphics rendering (CORRECT)
Correct: That’s correct! Canvas supports 3D graphics rendering.
Correct: That’s correct! Canvas supports 2D graphics rendering.
10. Which tag is most suited to describe the navigation menu of your web page?
- <nav> (CORRECT)
- <main>
- <div>
Correct: That’s correct! The nav element is most suited to describe the navigation section of your HTML document.
11. What is the benefit of adding the required attribute to an input element?
- It will ensure that the form data submitted is valid.
- It will ensure that the form data is sent securely.
- It will ensure that the user provides a value to the form field. (CORRECT)
Correct: That’s correct! The web browser will ensure that the user has provided a value when the form is submitted.
12. Which of the below statements are best practices when adding iframes to your pages? Select all that apply.
- Skip the allow attribute
- Use the lazy loading attribute (CORRECT)
- Use the sandbox attribute to define which privileges are granted to the iframe (CORRECT)
- Add a title attribute (CORRECT)
Correct: Correct! This prevents your iframes from slowing down your pages.
Correct: Correct! This enables you to tailor the needed permissions for the iframe and avoid unexpected behavior.
Correct: Correct! It gives accessibility software more context for what the iframe is about.
13. What are the main advantages of using the canvas element to draw content on your pages? Select all that apply.
- It provides a good experience for rendering HTML elements.
- It requires less code than HTML sectional tags
- It’s well suited for graphic intensive games. (CORRECT)
- It’s better for thousands of objects and precise manipulation (CORRECT)
Correct: Correct, the canvas eleement is optimized for highly interactive 2D and 3D rendering.
Correct: Correct! HTML sectional tags are not suited for that purpose and do not scale that well.
14. Which of the following HTTP methods can be used to submit a HTML form? Select all that apply.
- PUT
- DELETE
- GET (CORRECT)
- POST (CORRECT)
Correct: That’s correct! GET is the default HTTP method when the form attribute is not specified. It can be explicitly specified using the method attribute, for example: method=”get”.
Correct: That’s correct! POST can be used by explicitly specifying it, using the method attribute, for example: method=”get”.
15. The combination of HTML and CSS has meant that web browsing can be done on a variety of devices and not just computers and phones. Which of the following statements about CSS are true? Select all that apply.
- CSS can be used to programmatically submit HTML forms.
- CSS describes the look and layout of a document written in HTML. (CORRECT)
- You can change a web page’s appearance with CSS without editing its HTML. (CORRECT)
- CSS gives you control over spacing and positioning of content on a web page. (CORRECT)
Correct: That’s correct! CSS describes the look and layout of a document written in HTML.
Correct: That’s correct! This is possible because there is a separation between content and style in CSS.
Correct: That’s correct! It also gives you control over color, size and fonts.
16. HTML is foundational to websites and there is a lot that you can do with it. Which of the following are you able to do with HTML? Check all that apply.
- You can add images to a web page with HTML. (CORRECT)
- You can build forms with HTML. (CORRECT)
- You can display data in tables with HTML. (CORRECT)
Correct: That’s correct! HTML enables you to add images to a web page.
Correct: That’s correct! You can build forms with a wide range of inputs.
Correct: That’s correct! HTML enables you to display data in tables.
17. Semantic tags describe the meaning of a web page and they help search engines and accessibility software like screen readers to understand the contents of a page. Which of the following statements are true? Choose all that apply.
- The article element is used for complete, self-contained compositions on a web page. (CORRECT)
- Basic HTML tags like the heading and list tags can be used to describe content. (CORRECT)
- The main navigation links of your website should be added inside the nav element. (CORRECT)
Correct: That’s correct! Examples include a blog post, or an article published in an online magazine or newspaper.
Correct: That’s correct! For example, a heading tag like h1 describes that the content is a heading.
Correct: That’s correct! The main links allow users to navigate between different parts of your web page.
18. Is the following statement true or false? If you want to create an unordered list you should use the li tag.
- True
- False (CORRECT)
Correct: That’s correct! For an unordered list you use the ul tag. The li tag is list item.
19. You want to improve the SEO of a website. What metadata should you add to the head element of the website and why? Check all that apply.
- Keyword metadata to let the website show up in results of keyword searches.
- Robots metadata to improve how search engines analyze the website. (CORRECT)
- Description metadata to help search engines understand what the web page is about. (CORRECT)
- Author metadata to inform search engines who the author of the web page is. (CORRECT)
- Viewport data to help web browsers display websites at the appropriate scale on the device being used. (CORRECT)
Correct: That’s right. The name “robots” comes from the automated software, often referred to as “bots”, that search engines use to analyze websites.
Correct: That’s right. The description metadata describes the content of the web page.
Correct: That’s right. Author metadata specifies the author of the web page.
Correct: That’s right. Mobile devices will by default attempt to render a web page as if it is being viewed on a desktop. The solution is to define viewport metadata.
20. When adding a new CSS and a new JavaScript file to the template web page, what needs to be done? Check all that apply.
- Add a link element to reference the JS file
- Add the CSS file to the CSS folder (CORRECT)
- Add a script element to reference the JS file (CORRECT)
- Add the JavaScript file to the JS folder (CORRECT)
- Add a link element to reference the CSS file (CORRECT)
Correct: That’s right. You need to add the CSS file to the css folder, the JavaScript file to the jsfolder, a link element to reference the CSS file and a script element to reference the JS file.
21. Frontend developers use the Open Graph Protocol to improve the user experience of shared links because it helps social media platforms create a preview of the shared web page.
- No
- Yes (CORRECT)
Correct: That’s correct, the Open Graph Protocol is a set of metadata rules that allows web pages to describe themselves to social networks. Social media platforms use these meta tags to create a preview of the shared web page.
22. As part of your role as a developer you’ve been asked to prepare a web page so it can be linked on social media platforms. Which of the following statements are true? Choose all that apply.
- A meta tag can inform social media platforms of the content type such as video or website. (CORRECT)
- A meta tag can inform the social media platform what the preferred preview image is. (CORRECT)
- A meta tag can determine what title will be displayed in the preview of a website on a social media platform. (CORRECT)
Correct: That’s correct! A meta tag can also be added to tell social media platforms what title and image will be displayed in the preview.
Correct: That’s correct! A meta tag can also be added to tell social media platforms what title to display in the preview and whether the content being shared is a website or not.
Correct: That’s correct! A meta tag can also be added to tell social media platforms if the content being shared is a website and what the preferred preview image is.
23. As a developer, you can add client-side validation to a form by using specific input types.
- Yes (CORRECT)
- No
Correct: Correct. Client-side validation checks for errors as soon as they are typed into the form. The web browser does this by validating the submitted data against the specified input type. The web browser will show an error message if the wrong type of input has been submitted.
24. You are asked to help create a signup form. What can you do to improve the user experience of the form? Select all that apply.
- Only use server-side validation.
- Add labels for each input element. (CORRECT)
- Ensure that the correct input types are used. (CORRECT)
Correct: That’s right! Labels will help users understand what they need to add in each field. It is important to set the ID attribute of each input field so that the corresponding label can be associated with it.
Correct: That’s right! Using specific input types makes it easier to complete a form correctly because users are warned if they enter an incorrect response.
25. What additional attributes can you add to an element on an HTML form to improve client-side validation? Check all that apply.
- invalid data
- maxlength (CORRECT)
- minlength (CORRECT)
- required (CORRECT)
Correct: That’s right. You can specify the maximum number of characters allowed for a form field by adding for example: maxlength=”12″ inside the input type element.
Correct:That’s right. You can specify the minimum number of characters required for a form field by adding for example: minlength=”3″ inside the input type element.
Correct: That’s right. If it is essential that a user submit a response to a specific field on your form, you should add: Required inside the input type element.
26. What is the purpose of the fieldset element in an HTML form?
- It set the default value.
- It groups radio buttons. (CORRECT)
- It sets the width of the input fields
Correct: That’s right. If you do not add a fieldset element to each radio button, all radio buttons will belong to the same group.
27. If you must add a question on a form where users need to pick an option from a very long list, you can add a datalist input type which will allow the user to begin typing to narrow down the available options based on their input.
- Yes (CORRECT)
- No
Correct: That’s right. The Datalist input type is also useful when the list of options might become longer in future.
28. You’ve been asked to help develop a new online store. Security is very important to the customer. Which form method should be used to improve security?
- Post (CORRECT)
- Get
Correct: That’s right. The HTTP POST method is more secure than the HTTP GET method. When a form is submitted using the Post method, the form data is inserted into the content of the HTTP request instead of appended at the end of the URL as is done with the GET method.
29. What are the advantages of styling HTML forms with CSS? Check all that apply.
- CSS Stylized forms will ensure that your website will be ranked better by search engines.
- You can specify styling for element types using element selectors. (CORRECT)
- It creates a consistent user experience across browsers. (CORRECT)
- You can specify the styling of individual elements. (CORRECT)
Correct: That’s right. Alternatively, you can specify the styling of individual elements. When you style HTML forms with CSS it will display the same across browsers creating a consistent user experience.
Correct: That’s right. By default, browsers handle forms differently but if you style a form with CSS all browsers will display the form in the same way.
Correct: That’s right. Alternatively, you can style element types using element selectors. When you style HTML forms with CSS it will display the same across browsers creating a consistent user experience.
30. Video and audio tags make it easy to add videos and audio to web pages. Is the following statement true or false?
You have to add both source and type attributes to both video and audio tags.
- True (CORRECT)
- False
Correct: That’s correct! The source specifies the address of the video or audio file, and the type attribute specifies the file format.
31. You are creating an about page for a local business that includes an audio player. What are the elements and attributes needed for the audio player? Choose all that apply.
- Source Element (CORRECT)
- Audio Element (CORRECT)
- Controls Attribute (CORRECT)
- Type Attribute (CORRECT)
Correct: That’s correct! You have to specify the source element so that you can set the src attribute to the audio file.
Correct: That’s correct! Without the audio element there can’t be an audio player.
Correct: That’s correct! Without the controls attribute users won’t be able to play or pause the audio.
Correct: That’s correct! You have to set the type to specify the file format.
32. You are a developer at the Little Lemon Tree company and your team leader has asked you to embed a map in the web page you are developing. You have learned that there are various important security issues when using iframes. Select the ways that these issues can be addresed. Check all that apply.
- The sandbox attribute can prevent files from being downloaded. (CORRECT)
- Recommend that iframes are not used. (CORRECT)
- You can use the allow attribute to limit which browser features the iframe can access. (CORRECT)
Correct: That’s correct! The sandbox attribute can also prevent popup windows.
Correct: That’s correct! You need to be mindful when embedding a web page using iframe because the web page can run JavaScript code which can be used to exploit security vulnerabilities.
Correct: That’s correct! The allow attribute can be set, for example, to not allow the iframe camera or microphone access.
33. A small business is planning to embed advertisements on their website and you have to create an iframe to set up an image on their website. However, there are some security concerns when it comes to embedded content. What can you do to minimize those concerns? Select all that apply.
- Add the src attribute.
- Add the sandbox attribute to the iframe element. (CORRECT)
- Use the allow attribute. (CORRECT)
Correct: That’s correct! This will prevent JavaScript files from running within the iframe and it restricts browser capabilities within the iframe context.
Correct: That’s correct! Using the allow attribute means that you can disable browser features for the iframe like payment, microphone and camera access.
34. There are three main technologies underpinning the production of animated and video game content for the web browser. These are GIF or webP, 2D Canvas and WebGL. Which of the following statements about these technologies are true? Choose all that apply.
- WebGL doesn’t use the GPU to render graphics to screen.
- GIF and webP are used to animate images, but with no interactivity. (CORRECT)
- 2D Canvas is used for building both 2D video games and animations. (CORRECT)
Correct: That’s correct! GIF and webP are popular for embedding animated content but the format has no interactivity.
Correct: That’s correct! The 2D Canvas allows 2D graphics to be drawn in the web browser.
HTML and CSS in Depth CONCLUSION
Creating well-structured HTML is critical to building a strong foundation for any web site. By using semantic tags, you can control how your web pages are displayed to the user and ensure that they look good and work well. In this module, you learned how to create semantically correct HTML code and how to use it to structure your webpages.
You also learned how important it is to keep your code clean and organized so that it is easy to maintain and update. So why the wait, join Coursera Now!
Subscribe to our site
Get new content delivered directly to your inbox.
Quiztudy Top Courses
Popular in Coursera
- 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!