Course 1 – Introduction to Front-End Development quiz Answers

Week 2: Introduction to HTML and CSS

Meta front-end developer professional certificate

Complete Coursera Answers & Study Guide

Click to Enroll in Coursera Meta Front-End Professional Certificate

TABLE OF CONTENT

INTRODUCTION
KNOWLEDGE CHECK – GETTING STARTED WITH HTML

KNOWLEDGE CHECK: CSS BASICS
MODULE QUIZ: INTRODUCTION TO HTML AND CSS
CONCLUSION

Introduction to HTML and CSS INTRODUCTION

This Coursera module is part of the Meta Front-End Developer Professional Certificate program. It introduces HTML, CSS, and technical jargon for web markup and styling languages, respectively. In this module, you will learn how to use HTML to create well-structured documents and then learn how to apply basic styling using CSS.

You will also be introduced to principles of responsive design that are widely used on today’s modern websites. With the skills acquired in this module, you will be able to create a website with a usable layout, good appearance, and structured content.

Learning Objectives

Use HTML to create a simple web page

Use CSS to define style of a simple web page

KNOWLEDGE CHECK – GETTING STARTED WITH HTML

1. An HTML document begins with ______________.

The html tag
The DOCTYPE declaration (Correct)

The head tag
The body tag

Correct: That’s correct! An HTML document always begins with a DOCTYPE declaration followed by the html tag.

2. To display a link to another HTML document, the ______________ tag is used.

link
html
anchor (a) (Correct)

Correct: That’s correct! The anchor tag is used to link to another HTML document.

3. To add an image to a webpage, the ______________ tag is used.

Img (Correct)

image
anchor (a)
link

Correct: That’s correct! The img tag is used to include images in an HTML document.

4. To represent the HTML document in JavaScript, the browser builds _____________.

an HTML Element Model
an HTML Script

Document Object Model (Correct)

Correct: That’s correct! A Document Object Model (DOM) is built to represent the HTML document in JavaScript.

5. Which of the following answer choices improves web accessibility for people with disabilities? Select all that apply.

Correct HTML structure (Correct)

Accessible Rich Internet Application (ARIA) techniques (Correct)
Appropriate use of HTML elements (Correct)

Correct: That’s correct! Ensuring correct HTML structure will help assistive technologies to describe, navigate and interact with the content.

Correct: That’s correct! ARIA techniques improve accessibility for complex web applications.

Correct: That’s correct! Using HTML elements appropriately such as using paragraph tags for text and button tags for buttons will help assistive technologies to describe, navigate and interact with the content.

6. You want to insert a paragraph on your website. Choose the correct format for the opening and closing paragraph tags:

Opening tag: <p> Closing tag: </p> (Correct)

Opening tag: <p> Closing tag: <p>
Opening tag: <p> Closing tag: <p/>
Opening tag: <p/> Closing tag: </p>

Correct: That’s correct! This is the format required for opening and closing paragraph tags.

7. The structure of an HTML document starts with:

<!DOCTYPE html> (Correct)
<HTML>

<head>
<body>

Correct: That’s right! The first element in an HTML document is the DOCTYPE declaration which notifies the web browser that it is an HTML document.

8. You are creating a website and you want to add a link to the about.html page on your home.html page. What is the correct notation to create this link?

<a href = “about.html”>About</a> (Correct)
<a> about.html </a>
<a> href = about.html </a>

<a href = “home.html”>About</a>

Correct: Yes, that’s correct. The href attribute is inside the anchor tag.

9. You want to add an image to your webpage. What should you add within the image tag? Please select all that apply.

The width and height specifications (Correct)

The href attribute
The link to the source file (Correct)
The alt description (Correct)

Correct: The cloud allows you to run your website across multiple virtual and physical servers.

10. You are developing a website for a shoe shop. In order to add a table to your website, which tags can you use? Select all that apply.

The table row tag: <tr> </tr> (Correct)
The table tag: <table> </table> (Correct)

The table header tags: <th> </th> (Correct)
The table column tag: <tc> </tc>
The table data tags: <td> </td> (Correct)

Correct: You need to add table row tags for each line of information in your table.

Correct: The table tag is the first tag that you need to insert in order to add a table to a webpage.

Correct: Correct. You use the table header tags to add headings to the table which makes it easier to understand the data.

Correct: You need to add table data tags for each cell in each row.

11. You are building an e-commerce site for a client. What kind of input types could you use? Check all that apply.

Textarea (Correct)
Number (Correct)

Username
Radio (Correct)
Txt (Correct)

Password (Correct)
Email (Correct)
Checkbox (Correct)

Correct: Text, password, checkbox, radio, textarea, email and number are all types of input.

12. True or false. The Document Object Model allows you to update all HTML elements on a web page.

True (Correct)
False

Correct: That’s correct. The DOM allows you to update and delete existing elements on the web page.

13. Which of the following technologies are examples of assistive technologies? Select all that apply.

Microphones
Screen reader software (Correct)

Subtitles in videos (Correct)
Speakers
Speech recognition software (Correct)

Correct: Well done. Other assistive technologies include screen reader software and speech recognition software. Other assistive technologies include screen reader software and speech recognition software.

KNOWLEDGE CHECK: CSS BASICS

1. To reference a CSS file in an HTML document, you use the ______________ tag.

head
script

style
link (Correct)

Correct: That’s correct! The link tag is used to reference a CSS file.

2. In the following CSS rule, the `h1` part of the rule is called the ______________.

1 	h1 {
2	color:         green;
3	}

Box model
Selector (Correct)
Inheritance

HTML

Correct: That’s correct! In this CSS rule h1 is called the selector.

3. What is the padding box width of the following CSS rule?

1
2	div {
3		with: 10px
4		padding: 20px
5		margin: 40px: 
6	}
7

10 pixels

30 pixels (Correct)
50 pixels
70 pixels

Correct: The padding box width is the sum of the content width and the padding width.

4.Which CSS property and value change the HTML element to a block-level element?

align-content
content

list-style
display: block (Correct)

Correct: That’s correct! The display property and block value are used to change the HTML element to a block-level element.

5. Which CSS property and value change the text to center alignment?

text-align: center (Correct)
align-self
vertical-align

align-items

Correct: That’s correct! The text-align property and center value change the text to center alignment.

6. When you create a CSS rule, the part inside the curly brackets is called the:

Property

Declaration block (Correct)
Value
Selector

Correct: That’s right. Everything between the curly brackets is called the declaration block.

7. You are busy designing a web page for a small company. They supplied you with an image that needs to be in the center on the landing page. The image has a content width of 100px, 10px padding on both left and right sides, a 10px border on both left and right sides and a 10px margin on both left and right sides. What is the border box width?

160px
140px (Correct)

180px

Correct: Well done. Border box width = content width (100) + padding width (2×10) + border width (2×10)

8. True or false. Inline elements appear on a new line.

True

False (Correct)

Correct: That’s right. Inline elements only occupy the width and height of their content and they don’t appear on a new line, hence the name “inline”.

MODULE QUIZ: INTRODUCTION TO HTML AND CSS

1. Which two elements should be added to the html element to make the structure of an HTML document?

1 <!DOCTYPE html>
2 <html>
3 </html>

<div>
<head> (Correct)
<body> (Correct)

Correct: That’s correct! The body element is added to the html element.

2. When using the anchor tag <a>, which attribute determines where the hyperlink links to?

link
href (Correct)

Correct: That’s correct! The href attribute specifies where the hyperlink links to. <a href=”index.html”>Link</a>

3. When adding an image to a web page, which of the following is the correct HTML tag?

<link>

<img> (Correct)
<image>
<img src=”image.jpg”>

Correct: That’s correct. The img tag adds an image to a web page.

4. How many columns exist on the following HTML table?

1 <table>
2    <tr>
3        <td>Falafel</td>
4        <td>$10.00</td>
5    </tr>
6    <tr>
7        <td>Pasta Salad</td>
8        <td>$12.00</td>
9    </tr>
10    <tr>
11        <td>Dessert</td>
12        <td>$8.00</td>
13    </tr>
14 </table>

1 column
2 columns (Correct)

3 columns

5. When an HTML form is submitted to a web server, which HTTP methods can be used? Select all that apply.

PUT
DELETE

GET (Correct)
POST (Correct)

Correct: That’s correct. A GET method can be used for the form submission. <form method=”get”>

Correct: That’s correct. A POST method can be used for the form submission. <form method=”post”>

6. For the following HTML code, which CSS selectors can be used to select the h1 element? Select all that apply.

1 <h1 id="title">Welcome</h1>

Element Selector (Correct)
ID selector (Correct)

Class Selector
Descendant Selector

7. In the following CSS code, what is the color: purple; part known as?

1 h1 {
2     color: purple;
3 }

CSS Attribute

CSS Rule
CSS Property (Correct)
CSS Selector

Correct: That’s correct. The CSS properties are defined inside the curly brackets in a CSS rule.

8. Based on the following CSS, what will be the margin-box width for div elements?

1 div {
2    width: 10px;
3    padding-left: 5px;
4    padding-right: 5px;
5    margin-left: 5px;
6    margin-right: 5px;
7 	}

10 pixels
20 pixels

30 pixels (Correct)
40 pixels

9. True or false. In document flow, block-level elements always start on a new line.

True (Correct)

False

Correct: That’s correct. Block-level elements always start on a new line.

10. Based on the following CSS code, how will the text be aligned for the p element?

The text will be aligned to the right of the p element.
The text will be centered inside the p element.
The text will be spread out so that every line of the text has the same width within the p element. (Correct)
The text will be aligned to the left of the p element.

Correct: That’s correct. The justify value will spread out the text within the p element so that every line has the same width.

Introduction to HTML and CSS CONCLUSION

With the skills you will acquire from this module, you will be able to build your own website from scratch or style and improve an existing one. You will also be able to apply for entry-level web development positions and/or use your new skills as a foundation for learning more advanced web development concepts. So what are you waiting for?

Join Coursera now and get started on your journey to becoming a web developer!

Previous Week

Next Week 3

Subscribe to our site

Get new content delivered directly to your inbox.

Quiztudy Top Courses

Popular in Coursera

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