Front-End Developer Capstone

This course is part of Meta Front-End Developer Professional Certificate

Instructor: Taught by Meta Experts

Access provided by US Postal Service

70,582 already enrolled

4 modules

Gain insight into a topic and learn the fundamentals.

451 reviews

Intermediate level

Recommended experience

Flexible schedule

3 weeks at 10 hours a week

Learn at your own pace

94%

Most learners liked this course

4 modules

Gain insight into a topic and learn the fundamentals.

451 reviews

Intermediate level

Recommended experience

Flexible schedule

3 weeks at 10 hours a week

Learn at your own pace

94%

Most learners liked this course

What you'll learn

Design and style a responsive User Interface (UI)
Demonstrate clean and bug free coding
Use React components to create multiple views
Create a website front-end using React JS and JavaScript

Skills you'll gain

Tools you'll learn

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

41 assignments

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

Build your Mobile and Web Development expertise

This course is part of the Meta Front-End Developer Professional Certificate

When you enroll in this course, you'll also be enrolled in this Professional Certificate.

Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate from Meta

There are 4 modules in this course

The Capstone project enables you to demonstrate multiple skills from the Certificate by solving an authentic real-world problem. Each module includes a brief recap of, and links to, content that you have covered in previous courses in this program.

This course will test your knowledge and understanding, and provide you with a platform to show off your new abilities in front-end web development using React. During this course, you will be guided through the process of building an app, combining all the skills and technologies you've learned throughout this program to solve the problem at hand. On completion of the Capstone project, you’ll have a job-ready portfolio that you can show to recruiters, demonstrate during interviews and impress potential employers. To complete this course, you will need front-end developer experience. Additionally, it always helps to have a can-do attitude!

In this module, you’ll get started with the capstone project. This will include a brief recap of, and links to, content in the React course you have already completed.

What's included

4 videos15 readings9 assignments

4 videos Total 12 minutes

Introduction to the course 3 minutes
Setting up the project 3 minutes
Planning the UX and UI 3 minutes
Module summary: Starting the project 3 minutes

15 readings Total 280 minutes

Course syllabus 15 minutes
How to be successful in this course 10 minutes
Checking your development environment 15 minutes
Additional resources 5 minutes
Recap: Version control 15 minutes
Exercise: Setting up the repository 30 minutes
Recap: React set up 15 minutes
Exercise: Setting up the React project 30 minutes
Exercise: Committing the project 30 minutes
Additional resources 5 minutes
Recap: Principles of UX and UI 15 minutes
Exercise: Wireframing the project 30 minutes
Exercise: Designing components 30 minutes
Exercise: Applying design fundamentals in Figma 30 minutes
Additional resources 5 minutes

9 assignments Total 98 minutes

Readiness check: Did you set up the Git repository? 3 minutes
Readiness check: Did you set up the React project? 3 minutes
Readiness check: Did you push your commits? 3 minutes
Knowledge check: Setting up the project 15 minutes
Readiness check: Did you complete the wireframe? 3 minutes
Readiness check: Did you establish the designs for your key components? 3 minutes
Readiness check: Did you establish a typographic hierarchy, fonts and colors using the style guide? 3 minutes
Knowledge check: Planning the UX and UI 15 minutes
Module Quiz: Starting the Project 50 minutes

In this module, you’ll use semantic HTML, meta tags and Open Graph protocol to create a modern HTML structure for the web app. You will also use CSS grid and other CSS styling to set up a responsive, clear and inviting website.

What's included

4 videos13 readings13 assignments

4 videos Total 13 minutes

Setting up a semantic HTML document 3 minutes
Styling elements 4 minutes
Project components 4 minutes
Module summary: Project foundations 3 minutes

13 readings Total 240 minutes

Recap: Semantic HTML 15 minutes
Exercise: Setting up the HTML document 30 minutes
Recap: Meta tags and Open Graph protocol 15 minutes
Exercise: Adding meta tags and setting up OGP 30 minutes
Additional resources 5 minutes
Recap: CSS grids 15 minutes
Exercise: Setting up the CSS layout 30 minutes
Recap: Styling elements 15 minutes
Exercise: Styling elements 30 minutes
Additional resources 5 minutes
Recap: React basics 15 minutes
Exercise: Setting up the app components 30 minutes
Additional resources 5 minutes

13 assignments Total 122 minutes

Readiness check: Did you set up a semantic HTML document? 3 minutes
Readiness check: Did you establish meta tags and Open Graph protocol data? 3 minutes
Readiness check: Did you commit your progress to Git? 3 minutes
Knowledge check: Semantic structure 15 minutes
Readiness check: Did you set up a responsive CSS layout? 3 minutes
Readiness check: Did you check that the visual elements of the website match the Figma design? 3 minutes
Readiness check: Did you commit your progress to Git? 3 minutes
Knowledge check: Styling and responsiveness 15 minutes
Readiness check: Did you set up the app components? 3 minutes
Readiness check: Are your components semantically correct? 3 minutes
Readiness check: Did you commit your progress to Git? 3 minutes
Knowledge check: Adding components 15 minutes
Module Quiz: Project Foundations 50 minutes

In this module, you'll code the table booking system using React. You'll also explore the importance of UX and form validation and write unit tests. Additionally, you'll cover accessibility and UX and UI usability evaluation.

What's included

4 videos20 readings17 assignments

4 videos Total 12 minutes

Customer table bookings 3 minutes
Querying a table booking API 3 minutes
The importance of UX 3 minutes
Module summary: Project functionality 3 minutes

20 readings Total 420 minutes

Recap: State in React 15 minutes
Recap: Forms 15 minutes
Exercise: Defining the Bookings page 30 minutes
Exercise: Adding table booking state 30 minutes
Recap: Unit testing 15 minutes
Exercise: Adding unit tests 30 minutes
Additional resources 5 minutes
Recap: Querying APIs in React 15 minutes
Exercise: Connecting the bookings page to the API 30 minutes
Exercise: Submitting the new booking page to the API 30 minutes
Exercise: Update the unit tests for the API queries 30 minutes
Additional resources 5 minutes
Recap: Form validation 15 minutes
Exercise: Adding form validation 30 minutes
Exercise: Adding unit tests for the form validation and submission 30 minutes
Recap: Accessibility 15 minutes
Exercise: Ensuring your application is accessible to users 30 minutes
Recap: UX and UI usability evaluation 15 minutes
Exercise: Evaluating and revising the UX 30 minutes
Additional resources 5 minutes

17 assignments Total 134 minutes

Readiness check: Did you set up a component for viewing the available bookings? 3 minutes
Readiness check: Did you share table booking state across components? 3 minutes
Readiness check: Are your components semantically correct? 3 minutes
Readiness check: Did you set up component unit tests? 3 minutes
Knowledge check: Table booking system 15 minutes
Readiness check: Is your bookings page using "live" data? 3 minutes
Readiness check: Is the table booking system working end-to-end? 3 minutes
Readiness check: Did you set up the API unit tests? 3 minutes
Readiness check: Did you commit your progress to Git? 3 minutes
Knowledge check: Interacting with the API 15 minutes
Readiness check: Is your booking form validating user data? 3 minutes
Readiness check: Did you set up the form validation and submission unit tests? 3 minutes
Readiness check: Is your application accessible? 3 minutes
Readiness check: Have you completed the heuristics usability evaluation? 3 minutes
Readiness check: Did you commit your progress to Git? 3 minutes
Knowledge check: Improving the experience 15 minutes
Module Quiz: Project Functionality 50 minutes

In this module, you’ll have the opportunity to perform a self-review of your project and a peer review of other learners’ solutions for the Little Lemon reserve-a-table web app, assessing the projects in terms of usability, accessibility, design and code.