Front-End Developer Capstone

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

Instructor: Taught by Meta Staff

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

Web Development

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

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

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV

Share it on social media and in your performance review

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 assignments1 discussion prompt

4 videosTotal 12 minutes

Introduction to the course3 minutesPreview module
Setting up the project3 minutes
Planning the UX and UI3 minutes
Module summary: Starting the project2 minutes

15 readingsTotal 280 minutes

Course syllabus15 minutes
How to be successful in this course10 minutes
Checking your development environment15 minutes
Additional resources5 minutes
Recap: Version control15 minutes
Exercise: Setting up the repository30 minutes
Recap: React set up15 minutes
Exercise: Setting up the React project30 minutes
Exercise: Committing the project30 minutes
Additional resources5 minutes
Recap: Principles of UX and UI15 minutes
Exercise: Wireframing the project30 minutes
Exercise: Designing components30 minutes
Exercise: Applying design fundamentals in Figma30 minutes
Additional resources5 minutes

9 assignmentsTotal 98 minutes

Module Quiz: Starting the Project50 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 project15 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 UI15 minutes

1 discussion promptTotal 10 minutes

Meet and greet10 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 videosTotal 13 minutes

Setting up a semantic HTML document2 minutesPreview module
Styling elements3 minutes
Project components3 minutes
Module summary: Project foundations2 minutes

13 readingsTotal 240 minutes

Recap: Semantic HTML15 minutes
Exercise: Setting up the HTML document30 minutes
Recap: Meta tags and Open Graph protocol15 minutes
Exercise: Adding meta tags and setting up OGP30 minutes
Additional resources5 minutes
Recap: CSS grids15 minutes
Exercise: Setting up the CSS layout30 minutes
Recap: Styling elements15 minutes
Exercise: Styling elements30 minutes
Additional resources5 minutes
Recap: React basics15 minutes
Exercise: Setting up the app components30 minutes
Additional resources5 minutes

13 assignmentsTotal 122 minutes

Module Quiz: Project Foundations50 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 structure15 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 responsiveness15 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 components15 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 videosTotal 12 minutes

Customer table bookings3 minutesPreview module
Querying a table booking API3 minutes
The importance of UX2 minutes
Module summary: Project functionality3 minutes

20 readingsTotal 420 minutes

Recap: State in React15 minutes
Recap: Forms15 minutes
Exercise: Defining the Bookings page30 minutes
Exercise: Adding table booking state30 minutes
Recap: Unit testing15 minutes
Exercise: Adding unit tests30 minutes
Additional resources5 minutes
Recap: Querying APIs in React15 minutes
Exercise: Connecting the bookings page to the API30 minutes
Exercise: Submitting the new booking page to the API30 minutes
Exercise: Update the unit tests for the API queries30 minutes
Additional resources5 minutes
Recap: Form validation15 minutes
Exercise: Adding form validation30 minutes
Exercise: Adding unit tests for the form validation and submission30 minutes
Recap: Accessibility15 minutes
Exercise: Ensuring your application is accessible to users30 minutes
Recap: UX and UI usability evaluation15 minutes
Exercise: Evaluating and revising the UX30 minutes
Additional resources5 minutes

17 assignmentsTotal 134 minutes

Module Quiz: Project Functionality50 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 system15 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 API15 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 experience15 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.