
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
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)
- img
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>
- <p>
- <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)
- src
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!
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!