Starting the Project

COURSE 8 – FRONT-END DEVELOPER CAPSTONE QUIZ ANSWERS

Week 1: Starting the Project

Meta Front-End Developer Professional Certificate

Complete Coursera Answers & Study Guide

Click to Enroll in Coursera Meta Front-End Professional Certificate

TABLE OF CONTENT

Starting the Project INTRODUCTION

Welcome to Starting the Project, part of the Meta Front-End Developer Professional Certificate program from Coursera! This module is designed to help you kick off your capstone project by giving you a brief recap of relevant React concepts from the previous coursework. Specifically, we will be looking at components, props, and states so that you can confidently start building your project.

The topics in this module also provide an opportunity to practice using some of the core concepts you have acquired throughout your study. Once you complete this refresher exercise, you will be ready to get started on the project itself. Best of luck!

Learning Objectives

  • Set up a React application
  • Commit the project to a Git repository
  • Plan the UI/UX

READINESS CHECK: DID YOU SET UP THE GIT REPOSITORY?

1. How does the diff command portray changes in a file?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you use the git status and git log commands?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Did you add a new repository on GitHub?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: DID YOU SET UP THE REACT PROJECT?

1. Did you setup the ES7+ React/Redux/GraphQL/React-Native VS Code extension?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you set up the Auto Rename Tag VS Code extension?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Did you set up the Trailing Spaces VS Code extension?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: DID YOU PUSH YOUR COMMITS?

1. Did you add your changes as another commit?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you push those changes to your remote origin (GitHub)?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Did you inspect the updates in GitHub?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

KNOWLEDGE CHECK: SETTING UP THE PROJECT

1. Which of the following command allows you to quickly create a React project?

  • npx create-react-app
  • create-react-app app-name (CORRECT)
  • npm build
  • npm test

Correct: That’s correct. You can create a new react app by passing the app name to the create-react-app command.

2. Before pushing your changes to a Git repository, you need to commit the changes first. 

  • True (CORRECT)
  • False

Correct: That’s correct. When you push changes, only the committed changes go to the Git repository. 

3. Which of the following commands sends the local change to a remote git repository like GitHub?

  • git commit 
  • git tag 
  • git fetch 
  • git push (CORRECT)

Correct: That’s correct. After committing the local changes, you need to use the git push command to send these changes to the git repository.

4. What is the purpose of using this ES7+ React/Redux/GraphQL/React-Native extension in VS Code?

  • It helps to convert your code for older JavaScript engines
  • It helps you to debug the React and GraphQL-based projects.
  • It provides quick JavaScript snippets to help you code faster in your React and GraphQL-based projects. (CORRECT)

Correct: That’s correct. This extension provides related JavaScript snippets to help you code faster

5. In a project, which directory contains all the dependencies?

  • src
  • build
  • node_modules (CORRECT)

Correct: That’s correct. This is where the project dependencies are stored by the npm or yarn package manager.

READINESS CHECK: DID YOU COMPLETE THE WIREFRAME?

1. Did you create a grid?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you block out layout sections?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Did you wireframe your proposed solution?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: DID YOU ESTABLISH THE DESIGNS FOR YOUR KEY COMPONENTS?

1. Did you create a drop-down component using variants?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you animate your drop-down component using variants?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Did you did you test your proposed solution?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: DID YOU ESTABLISH A TYPOGRAPHIC HIERARCHY, FONTS AND COLORS USING THE STYLE GUIDE?

1. Did you establish typographic hierarchy and create styles in Figma using the style guide?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you establish permissible colors and create color styles in Figma?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Did you apply these to your proposed wireframe?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

KNOWLEDGE CHECK: PLANNING THE UX AND UI

1. UX is an iterative process that solves usability problems.

  • True (CORRECT)
  • False

Correct: That’s correct. UX or User Experience is an iterative process that solves usability problems and makes a product or service usable, enjoyable, and accessible.

2. What is a wireframe in UX design?

  • It’s representation of the interface concerned with placement and hierarchy of content and functionalities. (CORRECT)
  • It’s a 3D printed view of the project
  • It’s a simulation of the final functional product
  • It’s a complete design of the product 

Correct: Correct. It’s representation of the interface concerned with placement and hierarchy of content and functionalities.

3. Which of the following statements about designing forms are true?

  • Forms are only used to collect information for the stakeholder’s benefit, so it is not worth putting effort into designing them.
  • Forms are not an important part of user experience and can be designed quickly without considering the user’s needs.
  • Time should be spent on good form design to create an appealing and approachable form that represents the brand. (CORRECT)
  • It is important to design forms from the user’s perspective to create a good user experience. (CORRECT)

Correct: That’s correct. Time and care should be taken to design forms well, as how are you meant to persuade your visitors to take the time to give you their personal information without a straightforward, approachable and appealing form? Forms also represent the brand, so a poorly designed form can frustrate potential customers.

Correct: That’s correct. Forms are an important part of user experience, which is why time and effort should be spent on designing good forms from the user’s perspective.

4. Which of the following is true about responsive design? Select all that apply. 

  • Responsive design only applies to desktop devices and is not necessary for mobile devices.
  • Responsive design involves creating separate versions of a website or app for different devices.
  • Responsive design is a technique that automatically scales and rearranges the layout of a website or app to fit the screen size and resolution of the device it is being viewed on. (CORRECT)
  • Responsive design is a design approach that ensures a website or app looks good on all devices, regardless of screen size or resolution. (CORRECT)

Correct: That’s correct. Responsive design automatically adjusts layout for different screens.

Correct: That’s correct. Responsive design ensures good visual appearance on all devices.

5. How many columns are generally used in a desktop grid system?

  • 12 (CORRECT)
  • 4
  • 8

Correct: That’s correct. 12 column grids are commonly used in desktop designs. This allows for a high level of flexibility in terms of layout and design, as designers can use different combinations of columns to create a wide range of layouts.

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: STARTING THE PROJECT

1. How can you add some information about your current commit while using git commit command?

  • -I X
  • –amend 
  • -a
  • -m (CORRECT)

Correct: That’s correct. Add some message to your current git commit using this –m switch.

2. What are the benefits of using a version control system like git? Choose all that apply. 

  • Increases the speed of the development process
  • Automates the testing process
  • Enables easy collaboration with team members (CORRECT)
  • Allows multiple people to work on the same project without overwriting each other’s changes (CORRECT)
  • Helps to keep a record of all changes made to a project (CORRECT)

Correct: That’s correct. A version control system enables easy collaboration with team members

Correct: That’s correct. Version control tools like git allow multiple people to work on the same project simultaneously without the risk of overwriting each other’s change

Correct: That’s correct. Git keeps a record of all changes made to a project in the form of a commit history. This allows users to easily track the progress of a project and revert to previous versions if necessary.

3. After you have saved and committed the changes, you can push them to GitHub using: 

  • The git commit command  
  • The git push command (CORRECT)
  • The git status command

Correct: Correct. You can use the git push command to push your committed changes to GitHub.

4. Which of the followings are not the purpose of create-react-app? Choose all that apply

  • Create a new react project
  • Add react to an existing project. (CORRECT)
  • Build and deploy the current react app from source (CORRECT)
  • To test React components (CORRECT)

Correct: That’s correct. If you want to add React to an existing project, you can do so manually by : installing the React library and setting up the necessary configurations.

Correct: That’s correct. Once you have created a new React project using create-react-app, you can use the provided build scripts to bundle your app and prepare it for deployment.

Correct: That’s correct. This create-react-app is not a testing tool.

5. What’s the importance of the node_modules folder for a React app built using the create-react-app npm package? 

  • It is used by dependencies to save all the project’s files. 
  • It is used by the npm or yarn package manager to save all the dependencies of your current project. (CORRECT)
  • This folder is not important. In fact, it’s entirely optional.

Correct: That’s correct. The npm and yarn package managers use the node_modules folder to save all the dependencies of your current project. 

6. To create a nice, smooth animation in Figma, you can use the Clever animate option. 

  • True 
  • False (CORRECT)

Correct: That’s correct. You can use the Smart animate feature in Figma to create smooth animation.

7. Which of the following is the purpose of a wireframe?

  • To create a basic structure for each screen in the design before things like branding, colors and images are considered. (CORRECT) 
  • To create a completed design for the entire website, including branding colors, and images. 
  • To create a completed design of all the typographical elements of the web app.

Correct: That’s correct. This is the purpose of a wireframe. 

8. Which of the following tools can be used to create a new react project?

  • git
  • create-react-app (CORRECT)
  • yarn (CORRECT)
  • npx (CORRECT)

Correct: That’s correct. You can use this command create-react-app app-name to create a new react project. 

Correct: That’s correct. You can also create a new react project using this command yarn create react-app my-app.

Correct: That’s correct. To create a new react app using npx, you need to apply the command npx create-react-app app-name

9. To host a react project, you need to upload the content of the src directory in your web hosting space. 

  • True 
  • False (CORRECT)

Correct: That’s correct. The src directory contains the source code of your project which cannot run directly if you upload it on your web hosting space. You need to build it first using the build scripts that come with the create-react-app command and then upload the build version of your project.

10. Which of the following items are part of the UX design process?

  • User testing
  • Market research
  • Empathize (CORRECT)
  • Ideation (CORRECT)

Correct: That’s correct. Empathizing with users is an important step in the UX design process. It involves understanding the needs, goals, and motivations of users and considering their perspective when designing a product or service.

Correct: That’s correct. Ideation is the process of generating and refining ideas for a product or service. It involves brainstorming and prototyping to come up with creative solutions to user needs and problems.

11. When you build a new app using the create-react-app npm package, it automatically adds an initial Git commit so that you can track your project with Git.    

  • True (CORRECT)
  • False

Correct: Correct! When you build a React project using the create-react-app npm package, it comes with a local Git setup and an initial commit added.

12. What is the purpose of the planning stage in the UX UI process?    

  • To produce design structures and sketches for approval and testing.
  • To gather the user’s objectives and goals and determine and map the overall purpose of a project. (CORRECT) 
  • To complete coding and programming tasks to implement the project designs.      
  • To deliver the product.     

Starting the Project CONCLUSION

The goal of this module is to get you started on your capstone project. You’ll begin by recapitulating, and then linking to content in the React course you have already completed. By the end of this module, you should be well on your way to finishing your project. Remember, if you need any help along the way, our expert staff is always available to answer your questions.

Also, don’t forget – Coursera offers a wide variety of courses on many different topics, so be sure to check us out when you’re ready for more learning opportunities. Thanks for joining us!

Previous Week
Next Week 2

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