Project Foundations

COURSE 8 – FRONT-END DEVELOPER CAPSTONE QUIZ ANSWERS

Week 2: Project Foundations

Meta Front-End Developer Professional Certificate

Complete Coursera Answers & Study Guide

Click to Enroll in Coursera Meta Front-End Professional Certificate

TABLE OF CONTENT

Project Foundations INTRODUCTION

This module is part of the Coursera Meta Front-End Developer Professional Certificate Project Foundations program. Here, you will learn about how to create a modern HTML structure for your web app using semantic HTML, meta tags and Open Graph protocol. You will also be acquainted with CSS grid and other styling techniques that can help make your website responsive, clear and inviting. With these skills in hand, you’ll be able to build an effective website from the ground up!

By mastering these concepts, you’ll have a strong foundation for building projects with excellent quality standards. At the end of this module, you will understand fundamental principles for structuring HTML documents for use on the web as well as key principles around creating responsive websites with attractive designs.

Learning Objectives

  • Set up a responsive website
  • Use React components to create multiple views
  • Design and style a responsive UI

READINESS CHECK: DID YOU SET UP A SEMANTIC HTML DOCUMENT?

1. Did you set up the necessary components based on your UX/UI wireframe?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you use appropriate HTML5 semantic tags?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Did you replace unnecessary root div elements with React fragments?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: DID YOU ESTABLISH META TAGS AND OPEN GRAPH PROTOCOL DATA?

1. Did you add the appropriate descriptions using meta tags?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you add the og:title meta tag?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Did you add the og:description meta tag?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

4. Did you add the og:image meta tag?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: DID YOU COMMIT YOUR PROGRESS TO GIT?

1. Did you commit your progress to Git?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you push your local commits to GitHub?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Did you verify that the commits are showing on your repository’s page on GitHub?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

KNOWLEDGE CHECK: SEMANTIC STRUCTURE

1. Which of the following are semantic HTML tags? Choose all that apply. 

  • <div>
  • <table>
  • <h1> (CORRECT)
  • <article> (CORRECT)
  • <header> (CORRECT)

Correct: That’s correct. The <h1> tag is a semantic HTML tag used to represent the main heading of a webpage or section of content.

Correct: That’s correct. The <article> tag is a semantic HTML tag used to represent a standalone piece of content, such as a blog post or news article.

Correct: That’s correct. The <header> tag is a semantic HTML tag used to represent the header of a webpage or section of content. 

2. Complete the sentence: Semantic tags are a way to…

  • Create a layout for a webpage or document.
  • Give meaning to the content of a webpage or document. (CORRECT)
  • Create a table of data.
  • Add style to a webpage or document.

Correct: That’s correct. Semantic tags give meaning to the content of a webpage or document by indicating the purpose or function of the content. This makes it easier for search engines and screen readers to understand the content and helps improve the overall accessibility of the webpage or document.

3. What is Open Graph protocol (OGP)?

  • A protocol for transmitting audio and video over the internet
  • A protocol for describing the shared content on social media platforms (CORRECT)
  • A protocol for encrypting data transmitted over the internet
  • A protocol for sending and receiving email messages

Correct: That’s correct. The Open Graph protocol is a protocol for sharing content on social media platforms. It allows developers to specify how content should be displayed when shared on social media sites such as Facebook.

4. HTML meta tags are used to provide information about a webpage to search engines and other web services.

  • True (CORRECT)
  • False

Correct: That’s correct. HTML meta tags provide information about a webpage, such as its title, description and keywords, to search engines and other web services. This information is used to help search engines understand the webpage’s content and improve its ranking in search results.

5. Which of the following meta tags are valid? Choose all that apply. 

  • responsive
  • viewport (CORRECT)
  • og:title (CORRECT)
  • description (CORRECT)

Correct: That’s correct. This is a valid HTML meta name used to specify the viewport for a webpage. The viewport is the area of the webpage that is visible to the user and determines how the webpage is displayed on different devices.

Correct: That’s correct. The og:title is a valid Open Graph protocol (OGP) meta name used to specify the title of a webpage when it is shared on social media platforms.

Correct: That’s correct. The description tag is a valid HTML meta name used to specify a description of the content of a webpage.

READINESS CHECK: DID YOU SET UP A RESPONSIVE CSS LAYOUT?

1. Did you code a reusable grid or flexbox layout? 

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Using the browser developer tools, did you check that your website will layout correctly on mobile devices?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Using the browser developer tools, did you check that your website will layout correctly on desktop devices?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: DID YOU CHECK THAT THE VISUAL ELEMENTS OF THE WEBSITE MATCH THE FIGMA DESIGN?

1. Did you complete the Figma design?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you complete the visual elements of the website?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!!

3. Did you confirm that the visual elements of the website match the Figma design?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: DID YOU COMMIT YOUR PROGRESS TO GIT?

1. Did you commit your progress to Git?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you push your local commits to GitHub?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Did you verify that the commits are showing on your repository’s page on GitHub?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

KNOWLEDGE CHECK: STYLING AND RESPONSIVENESS

1. What is the fr unit in CSS grid? 

  • A length unit used only for the texts in the grid 
  • A flexible length unit that grows or shrinks based on the available space in the grid (CORRECT)
  • A flexible color unit to be used in the grid
  • A flexible length unit used only for the images in the grid

Correct: That’s correct. The fr is a flexible length unit in CSS grid that grows or shrinks based on the available space in the grid. It is used to specify the size of grid tracks (rows or columns) in a grid layout. The fr unit is a proportional unit, meaning that it takes up a fraction of the available space based on the value assigned to it

2. Choose the correct explanation for how the CSS code below works.

@media (max-width: 700px) {
  .grid-adjustable-columns {
    display: grid;
    grid-auto-flow: row;
  }
}
 
@media (min-width: 701px) {
  .grid-adjustable-columns {
    width: min(1000px,75rem);
    margin: 0 auto;
    grid-auto-flow: column;
    gap: 1em;
  }
}
  • On small resolutions it stacks the grid items in a column and on large resolutions it lines them up in a single row. (CORRECT)     
  • On large resolutions it stacks the grid items in a column and on small resolutions it lines them up in a single row.
  • This code doesn’t work.

Correct: That’s correct. This code will stack grid items in a column for small resolutions and in a single row for large resolutions.

3. Which of the following statements about CSS Grid is true?  

  • CSS Grid is a layout system that allows developers to create grid-based layouts using rows and columns. (CORRECT)
  • CSS Grid is a programming language used for creating dynamic and interactive web applications.
  • CSS Grid is a design tool used for creating graphics and visual elements for webpages.
  • CSS Grid is a styling system that allows developers to apply styles to specific elements of a webpage.

Correct: That’s correct. CSS Grid is a layout system that allows developers to create grid-based layouts using rows and columns. It is a powerful tool for creating flexible and responsive layouts for webpages and applications.

4. In CSS Grid, horizontal tracks are also known as:  

  • Columns 
  • Grid items 
  • Rows (CORRECT)

Correct: That’s correct. Horizontal tracks are referred to as rows.

5. True or false: CSS Grid layout automatically adjusts the size of grid tracks.              

  • True
  • False (CORRECT)

Correct: That’s correct. While CSS Grid can be a powerful tool for creating responsive layouts, it is not the only way to create responsive web designs. Responsive web design can also be achieved using other techniques such as media queries, flexible layout patterns and responsive images.

READINESS CHECK: DID YOU SET UP THE APP COMPONENTS?

1. Did you code the first version of your homepage’s components? 

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you style all the homepage components?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Did you set up the routes for the different pages?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: ARE YOUR COMPONENTS SEMANTICALLY CORRECT?

1. Did you use the correct HTML5 tags? 

  • Yes (CORRECT)
  • No

Correct; Well done on completing the exercise!

2. Did you use React fragments instead of div tags where redundant?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: DID YOU COMMIT YOUR PROGRESS TO GIT?

1. Did you commit your progress to Git?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you push your local commits to GitHub?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Did you verify that the commits are showing on your repository’s page on GitHub?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

KNOWLEDGE CHECK: ADDING COMPONENTS

1. Choose the correct statement about the following code:

<>  
 
    <h1>...</h1>  
 
    <p>...</p>  
 
</>
  • This is a valid HTML tag 
  •  This is valid JavaScript code  
  • This is valid React code. (CORRECT)
  •  This is not valid React code  

Correct: That’s correct. This is called fragment. A React fragment allows you to group a list of children without adding extra nodes to the DOM.

2. In React, you can only have one root element in a component.

  • True
  • False (CORRECT)

Correct: That’s correct. In React, you can have multiple root elements in a component as long as they are wrapped in a single parent element.

3. Which of the following statements are true about JSX? Choose all that apply. 

  • JSX elements must be written in all uppercase. 
  • JSX elements must be self-closing.
  • JSX elements can have multiple children. (CORRECT)
  • JSX allows you to include expressions in your code. (CORRECT)
  • JSX allows you to use JavaScript functions as attributes (CORRECT)

Correct: That’s correct. JSX elements can have multiple children, just like HTML elements.

Correct: That’s correct. You can use expressions in JSX by enclosing them in curly braces.

Correct: That’s correct. You can use JavaScript functions as attributes in JSX by enclosing them in curly braces.

4. What is the output of the following JSX code block?

const myList = ['apple', 'banana', 'orange']; 
 
const listItems = myList.map((item) => 
 
  <li key={item}>{item}</li> 
 
); 
 
return ( 
 
  <ul>{listItems}</ul> 
 
);
  • <ul><li>apple</li><li>banana</li><li>orange</li></ul> (CORRECT)
  • <li>apple</li><li>banana</li><li>orange</li> 
  • <ul> [<li>apple</li>, <li>banana</li>, <li>orange</li>] </ul> 
  • [<ul>,<li>apple</li>, <li>banana</li>, <li>orange</li>,<ul>]  

Correct: That’s correct! The code block creates a list of li elements using the map() function and then renders them inside a ul element.

5. Which of the following is true about props in React?

  • Props are mutable and can be changed within a component.
  • Props should be used for values that will not change within a component. (CORRECT)
  • The prop value must be wrapped in quotes.
  • Props should only be used for simple data types, such as strings and numbers.

Correct: That’s correct. Props are used to pass values from a parent component to a child component and should not be changed within the child component. They are considered immutable.

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

Subscribe to Our Newsletter

MODULE QUIZ: PROJECT FOUNDATIONS

1. What is the advantage of using the <nav> tag over a <div> tag?

  • The <nav> tag is faster to render.
  • The <nav> tag is more semantically correct. (CORRECT)
  • The <nav> tag has better browser support.
  • The <nav> tag has better styling options.

Correct: That’s correct. The <nav> tag is a semantic HTML element that is specifically designed to represent a section of a page that contains navigation links. Using the <nav> tag helps to improve the semantics of your HTML and make your code more understandable to both humans and machines.

2. What are the benefits of semantic HTML? Select all that apply.

  • Improves performance
  • Allows for more styling options
  • Makes the code easier to read and understand (CORRECT)
  • Improves SEO (CORRECT)
  • Improves accessibility (CORRECT)

Correct: That’s correct. Using semantic HTML elements helps to make the code more meaningful and easier to read and understand, both for humans and for machines. This can make it easier to maintain and update the code over time.

Correct: That’s correct. Search engines use the structure and content of a website to understand its relevance and quality. Using semantic HTML elements can help search engines to better understand the content of a page and improve its ranking in search results.

Correct: That’s correct. Using semantic HTML elements helps to improve the accessibility of a website or application by providing additional context and meaning to the content. This can make it easier for screen readers and other assistive technologies to understand and navigate the page.

3. Choose the correct Open Graph value for the name attribute in the code below:

<meta name="" content="https://meta.com/logo.png"/>
  • og:title
  • og:description 
  • og:image (CORRECT)

Correct: That’s correct. The value of the name attribute should be og:image.

4. Which of the following are valid values for the CSS display property? Select all that apply. 

  • float
  • grid (CORRECT)
  • flex (CORRECT)

Correct: Correct. The grid value is a valid value of the CSS display property. 

Correct: Correct. The flex value is a valid value of the CSS display property. 

5. Which of the following CSS selectors is an example of an adjacent sibling selector?

  • div > p
  • div p
  • div + p (CORRECT)

Correct: That’s correct. This selector is an example of the adjacent sibling selector. It targets the <p> element that immediately follows a <div> element.

6. When should you use the pseudo-class selectors?

  • You want to select elements based on their state. (CORRECT)
  • You want to select elements that are wrapping other elements.
  • You want to select elements that are wrapped by other elements.

Correct: That’s correct. Pseudo-class selectors allow you to select elements based on their state, such as hover, focus and active. These selectors are useful for styling elements when they are in a specific state or interacting with the user.

7. Which of the following relative units would be appropriate to use when the dimensions of the viewport (web page area that the user is viewing) are important? Chooseall that apply.

  • em
  • rem
  • %
  • Vh (CORRECT)
  • Vw (CORRECT)

Correct: That’s correct. The unit of vh stands for viewport height and is equal to 1% of the height of the viewport. It is an appropriate unit of measure when the dimensions of the viewport are important.

Correct: That’s correct. The unit of vw stands for viewport width and is equal to 1% of the width of the viewport. It is an appropriate unit of measure when the dimensions of the viewport are important.

8. HTML event attributes are lowercased; React event attributes are camelCased

  • True (CORRECT)
  • False

Correct: That’s correct. In HTML, event attributes are lowercased, such as onclick or onmouseover. In React, event attributes are camelCased, such as onClick or onMouseOver.

9. What is prop in a react component?

  • A way to handle user input
  • A way to modify the component’s state
  • A way to pass data from a parent component to a child component (CORRECT)
  • A property of a component’s state

Correct: That’s correct. In React, props (short for properties) are a way to pass data from a parent component to a child component. Props are a way for the parent component to communicate with and pass data to the child component, which can then use the data to render its content.

10. True or false: The following is a valid JSX code:

<span>{10+16}</span>
  • True (CORRECT)
  • False

Correct: That’s correct. This is a valid JSX code. The curly braces within the JSX code are used to insert JavaScript expressions and the expression 10+16 is a valid JavaScript expression that evaluates to 26.

11. With HTML 5, you should use the <div> element instead of semantic tags.

  • False (CORRECT)
  • True

Correct: That’s correct. In line with the proper HTML 5 semantics, you should focus instead on using the many semantic HTML 5 tags that are available today, rather than relying on the <div> element.      

12. Which of the following are modern ways to build CSS layouts? Select all that apply.    

  •  Floats    
  • Table-based layout     
  • Flexbox layout  (CORRECT)
  • Grid layout (CORRECT)    

Correct: That’s correct. Modern CSS layouts use CSS Flexbox, in addition to another modern alternative.      

Correct: That’s correct. Modern CSS layouts use CSS Grid, in addition to another modern alternative.     

13. True or false: Modern React components are class-based components.      

  • False (CORRECT)
  • True

Correct: Correct! In modern React, components are based on functions, which was made possible with the introduction of hooks. Effectively, hooks made class-based components obsolete.     

Project Foundations CONCLUSION

Now that you understand how to create a modern HTML structure and style it using CSS, you are well on your way to becoming a web developer. In the next module, you will learn about JavaScript and how to use it to add interactive features to your web app.

Coursera offers many courses on different programming languages that can help you become a full-stack web developer. Join Coursera now and start learning!

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!

Subscribe