Project Assessment

COURSE 8 – FRONT-END DEVELOPER CAPSTONE

Week 4: Project Assessment

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 Assessment INTRODUCTION

In this Project Assessment module of Coursera’s Meta Front-End Developer Professional Certificate, you will evaluate the Little Lemon reserve-a-table web app developed by other learners. Through this assessment, you will investigate various aspects such as usability, accessibility, design and code to ensure that the final output meets industry standards. This self-review and peer review exercise will be a valuable learning experience for your journey towards becoming a professional front-end developer.

With proper guidance and understanding of evaluation criteria, you can gain skills in objectively assessing projects developed by others. Good luck!

Learning Objectives

  • Synthesize the skills from this course and evaluate other learners
  • Reflect on this project’s content and on the learning path that lies ahead

READINESS CHECK: PREPARE TO SUBMIT THE PROJECT

1. Have you completed all the exercises in this course?

  • Yes (CORRECT)
  • No

Correct: Congratulations on completing this part of the capstone project!

2. Have you check and tested all the code in the capstone project?

  • Yes (CORRECT)
  • No

Correct: Congratulations on completing this part of the capstone project!

3. Did you add your final commit and push the final code changes to GitHub?

  • Yes (CORRECT)
  • No

Correct: Congratulations on completing this part of the capstone project!

FINAL GRADED QUIZ

1. Which of the following are HTML Inline Elements? Select all that apply.

  • <div>
  • <p>
  • <input> (CORRECT)
  • <span> (CORRECT)

Correct: Correct. The <input> element is an Inline Element in HTML.

Correct: Correct. The <span> element is an Inline Element in HTML.

2. What is required by JavaScript when creating a function declaration?

  • The function name (CORRECT)
  • The assignment operator
  • The name of an argument you want to pass to the function 

Correct: Correct. When coding function declarations, you need to give them a name.

3. True or false: When creating a new branch using the git branch command, that branch is only available to other developers once the branch is pushed to the remote repository.

  • True (CORRECT)
  • False

Correct: That’s correct! The branch must be pushed to a remote repository and fetched by other developers for them to access it.

4. Which of these options are considered best practices for form design? Select all that apply.

  • Always request a contact phone number
  • Align text to the center
  • Make use of inline form field validation. (CORRECT)
  • Use one column. (CORRECT)

Correct: Correct! Inline form validation is a procedure that checks a visitor’s information in real time as they fill out the form. The error message displays below or inside the form field, alerting the visitor to their mistake and allowing them to quickly correct it and move on to the next question.

Correct: Correct! When possible, use a single-column web form layout. This is especially important when creating long multi-step forms. Single-column layouts are more straightforward for visitors to follow, understand, complete and submit than forms with multiple columns.

5. What is the purpose of Semantic HTML?

  • Semantic HTML creates a generic container-like structure to group related content together. 
  • Semantic HTML is used to describe information about the webpage.
  • Semantic HTML is a way to describe the meaning of your web page through specific tags. (CORRECT)

Correct: Correct. You use semantic tags to describe the meaning of your web page, for example, <header>, <nav> and <footer>.

6. What is the main function of the semantic HTML tags <article> and <section>?

  • You can use <article> for an independent, self-contained block of content such as a blog post or product. You use <section> to specify the main content of a section or the web page.
  • You can use <article> for an independent, self-contained block of content and <section> for a standalone section of the document. (CORRECT)
  • You can use <article> to specify the main content of a section or the web page. You use <section> for a standalone section of the document, often within the body and article elements.

Correct: That’s correct. You can use <article> for an independent, self-contained block of content, such as a blog post or product. You can use <section> for a standalone section of the document. It is often used within the body and article elements.

7. Which command is used to create a local copy of a remote Git repository? 

  • git fetch 
  • git pull 
  • git init
  • git clone (CORRECT)

Correct: That’s correct. With this git clone command, you can create a local copy of a remote Git repository.

8. React has at least one component known as the __________ component.

  • Top
  • Root (CORRECT)
  • Origin

Correct: That’s correct. The component is known as the Root or App component.

9. Which of the following hooks is most appropriate for tracking complex application state in React?

  • UseEffect 
  • UseState 
  • UseReducer (CORRECT)

Correct: That’s correct! The useReducer hook can be used to track complex application state.

10. What is wrong with the following React code?

import React from 'react';


function MyList() {
  const list = ['item1', 'item2', 'item3'];
  return (
    <ul>
    {list.map((item) => (
      <li>{item}</li>
    ))}
    </ul>
  );
}
  • There is nothing wrong with this code.
  • The list is not being sorted correctly.
  • The list elements do not have unique keys. (CORRECT)
  • The list elements is not styled correctly.

Correct: That’s correct. The list elements do not have unique keys. React elements inside a list should have a unique key prop to help React identify which elements have changed, been added or been removed. Without a key, React will not be able to efficiently update the list.

11. Which of the following statements about CSS grids are true? Choose all that apply. 

  • CSS grids are created using the float property.
  • CSS grids can be used to create inline-block elements.
  • CSS grids are created using the display property with a value of grid. (CORRECT)
  • CSS grids can be used to create flexible layouts. (CORRECT)

Correct: That’s correct. To create a grid using CSS grid, you should use the display property with a value of grid.

Correct: That’s correct. CSS grids are a powerful layout tool that can be used to create a wide range of layouts, including flexible layouts that adapt to different screen sizes and device orientations.

12. Which of the following is not part of the CSS box model?

  • Padding
  • Margin
  • Border
  • The outline property (CORRECT)

Correct: Correct. The outline property is not part of the box model. The box model consists of four parts: the content box, margin, padding and border. 

13. Which of the following array methods can you use to add a new item to the end of an array?

  • pop()
  • arrayBuilder()
  • push() (CORRECT)

Correct: Correct. You can use the push() method to add a new item to the end of an array.

14. Which of the following options can you use to clone a GitHub repository? Select all that apply. 

  • You can clone a GitHub repository with GitHub’s web interface.
  • You can download a GitHub repository as a ZIP file. (CORRECT)
  • You can clone a GitHub repository with the GitHub Desktop app. (CORRECT)
  • You can use the git clone command in the Git terminal. (CORRECT)

Correct: Correct. You can download the entire repository to your local computer as a ZIP file. 

Correct: Correct. You can use the GitHub Desktop app to perform push and pull operations. 

Correct: Correct. The git clone command creates a copy in the local repository.

15. Which of the following are rules from Shneiderman’s 8 Golden Rules of UI Design? Select all that apply. 

  • Help and documentation
  • Strive for consistency (CORRECT)
  • Offer informative feedback (CORRECT)
  • Offer simple error handling (CORRECT)

Correct: Correct! This is one of Shneiderman’s 8 Golden Rules of UI Design. It is critical to maintain uniformity throughout the site, whether it’s the layout, the size of the button, the color code, or the tone used when writing the page.

Correct: Correct! This is one of Shneiderman’s 8 Golden Rules of UI Design. It is essential to provide informative feedback for every action in a format that’s readable to the user. The user should always know where they are at all times.

Correct: Correct! This is one of Shneiderman’s 8 Golden Rules of UI Design. If unavoidable errors occur, you must ensure that you provide users with simple step-by-step instructions to solve the problem quickly and easily.

16. When designing a website using CSS grid, what code can you use to design three columns where the second column uses twice the space as the other two?

  • grid-auto-columns: auto;
  • grid-template-columns: 1fr 2fr 1fr; (CORRECT)
  • grid-column-gap: 2fr;
  • grid-template-rows: 1fr 2fr 1fr;

Correct: Correct. You can use the grid-template-columns property with the second column value set to a fraction value of 2fr.

17. What is the purpose of the og:type Open Graph tag?

  • To specify the layout of the page
  • To specify the color scheme of the page
  • To specify the language of the page
  • To specify the type of the page, such as website, article or video. (CORRECT)

Correct: That’s correct. The og:type tag is used to specify the type of the page, such as website, article or video. This information is used by social media platforms to determine how to display the preview of the shared page.

18. In React, which direction does data flow between parent and child components?

  • One-way (CORRECT)
  • Two-way

Correct: That’s correct. Data flow is unidirectional via props.

19. Which of the following hooks can be used to track state in a React app?

  • useEffect
  • useReducer (CORRECT)
  • useState (CORRECT)

Correct: That’s correct! The useReducer hook can be used to track complex application state.

Correct: That’s correct! The useState hook can be used to track simple state objects.

20. True or false: It is essential to provide a unique key for each list item when rendering a list in React.

  • True (CORRECT)
  • False

Correct: That’s correct. In React, it is important to provide a unique key prop for each element in a list to help React identify which elements have changed, been added or been removed. Without a key, React will not be able to efficiently update the list and may cause performance issues or unexpected behavior.

21. True or false: CSS grids are created using the grid-gap property.

  • True
  • False (CORRECT)

Correct: The grid-gap property is used to specify the amount of space between the rows and columns of a grid, but it is not used to create the grid itself. To create a grid using CSS grid, you should use the display property with a value of grid and set the grid-template-columns and grid-template-rows properties to specify the number and size of the columns and rows.

22. The git fetch command creates a local copy from a remote git repository

  • True 
  • False (CORRECT)

23. Which of the following is not a valid Open Graph meta tag?

  • <meta property=”og:image” content=”image.jpg”> 
  • <meta property=”og:title” content=”Page Title”>
  • <meta property=”og:url” content=”https://example.com/page”>&nbsp;
  • <meta property=”og:description” content=”Page Description”>
  • <meta property=”og:keywords” content=”keyword1, keyword2″> (CORRECT)

Correct: That’s correct. There is no og:keywords tag in the Open Graph protocol. The og:keywords tag is not a valid Open Graph tag.

24. Which of the following options will create a 4-column grid using CSS grid?

  • display: grid;
    grid-template-columns: repeat(4,200px); (CORRECT)
  • display: flex;
    grid-template-columns: repeat(4,200px);
  • display: inline-block;
    grid-template-columns: repeat(4,200px);
  • display: block;
    grid-template-columns: repeat(4,200px);

Correct: That’s correct. To create a grid using CSS grid, you should use the display property with a value of grid and set the grid-template-columns property to specify the number and size of the columns. The repeat function can be used to create multiple columns of the same size, as in the example given: grid-template-columns: repeat(4,200px) will create a grid with four columns, each 200 pixels wide.

25. Which of the following elements can you find in a user story for a website? Select all that apply.

  • A user’s personal information
  • A detailed list of requirements
  • A feature of the website written from the perspective of the user (CORRECT)
  • A users need or goal (CORRECT)

Correct: Correct! User stories can contain an informal explanation of a website feature written from the perspective of the user using the website or app.

Correct: Correct! User stories assist in documenting helpful information about users, such as the various needs and motivations for using a website or app.

26. What does the git clone command do?

  • It creates a new git repository.
  • It creates a local copy of a remote repository. (CORRECT)
  • It fetches the changes from the remote repository. 

Correct: That’s correct. You can create a local copy of a remote Git repository using the git clone command.

27. What type of selector is used in the following CSS rule?

 .footer { width: 100%; }
  • The ID selector
  • The Class selector (CORRECT)
  • The Element selector 

28. Which of the following hooks should be used to fetch data from an API in a React app?

  • UseReducer 
  • useState
  • useEffect (CORRECT)

Correct: That’s correct! useEffect is best used for side effects such as fetching data from API, updating the DOM or fetching resources.

29. What is the very first step when creating a wireframe in Figma? 

  • Gather requirements (CORRECT)
  • Create a frame 
  • Create a grid 

Correct: Correct! The first step when creating a wireframe in Frigma is to write down or sketch out what is required to go onto the page.

Project Assessment CONCLUSION

You should now have a good understanding of how to assess the usability, accessibility, design and code of web applications. These skills are essential not only for your future career as a web developer but also when you are using websites and apps as a consumer.

If you found this module interesting and would like to learn more about web development, we invite you to join Coursera’s Front-End Web Development specialization. In this specialization, you will build on what you learned in this course and create your own responsive websites from scratch. We hope to see you in the specialization soon!

Previous Week
Next Course

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