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

4.6
stars
68 ratings

Taught by Meta Staff

15,568 already enrolled

Offered By

Meta Front-End Developer Professional CertificateMeta

About this Course

194,989 recent views

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!

Flexible deadlines

Reset deadlines in accordance to your schedule.

Shareable Certificate

Earn a Certificate upon completion

100% online

Start instantly and learn at your own schedule.

Coursera Labs

Includes hands on learning projects.

Learn more about Coursera Labs

Course 8 of 9 in the

Meta Front-End Developer Professional Certificate

Intermediate Level

Learners need prior Front-end developer experience to complete this course.

Approx. 24 hours to complete

English

Could your company benefit from training employees on in-demand skills?

Try Coursera for Business

What you will 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 will gain

JavaScript
Front-End Web Development
User Interface
React (Web Framework)

Flexible deadlines

Reset deadlines in accordance to your schedule.

Shareable Certificate

Earn a Certificate upon completion

100% online

Start instantly and learn at your own schedule.

Coursera Labs

Includes hands on learning projects.

Learn more about Coursera Labs

Course 8 of 9 in the

Meta Front-End Developer Professional Certificate

Intermediate Level

Learners need prior Front-end developer experience to complete this course.

Approx. 24 hours to complete

English

Could your company benefit from training employees on in-demand skills?

Try Coursera for Business

Instructor

Instructor rating

4.54/5 (23 Ratings)

Taught by Meta Staff

288,480 Learners

58 Courses

Offered by

Syllabus - What you will learn from this course

Week1

Week 1

6 hours to complete

Starting the project

6 hours to complete

4 videos (Total 12 min), 15 readings, 9 quizzes

4 videos

Introduction to the course3mSetting up the project3mPlanning the UX and UI3mModule summary: Starting the project2m

15 readings

Course syllabus15mHow to be successful in this course10mChecking your development environment15mAdditional resources5mRecap: Version control15mExercise: Setting up the repository30mRecap: React set up15mExercise: Setting up the React project30mExercise: Committing the project30mAdditional resources5mRecap: Principles of UX and UI15mExercise: Wireframing the project30mExercise: Designing components30mExercise: Applying design fundamentals in Figma30mAdditional resources5m

9 practice exercises

Readiness check: Did you set up the Git repository?3mReadiness check: Did you set up the React project?3mReadiness check: Did you push your commits?3mKnowledge check: Setting up the project15mReadiness check: Did you complete the wireframe?3mReadiness check: Did you establish the designs for your key components?3mReadiness check: Did you establish a typographic hierarchy, fonts and colors using the style guide?3mKnowledge check: Planning the UX and UI15mModule quiz: Starting the project30m

Week2

Week 2

6 hours to complete

Project foundations

6 hours to complete

4 videos (Total 13 min), 13 readings, 13 quizzes

4 videos

Setting up a semantic HTML document2mStyling elements3mProject components3mModule summary: Project foundations2m

13 readings

Recap: Semantic HTML15mExercise: Setting up the HTML document30mRecap: Meta tags and Open Graph protocol15mExercise: Adding meta tags and setting up OGP30mAdditional resources5mRecap: CSS grids15mExercise: Setting up the CSS layout30mRecap: Styling elements15mExercise: Styling elements30mAdditional resources5mRecap: React basics15mExercise: Setting up the app components30mAdditional resources5m

13 practice exercises

Readiness check: Did you set up a semantic HTML document?3mReadiness check: Did you establish meta tags and Open Graph protocol data?3mReadiness check: Did you commit your progress to Git?3mKnowledge check: Semantic structure15mReadiness check: Did you set up a responsive CSS layout?3mReadiness check: Did you check that the visual elements of the website match the Figma design?3mReadiness check: Did you commit your progress to Git?3mKnowledge check: Styling and responsiveness15mReadiness check: Did you set up the app components?3mReadiness check: Are your components semantically correct?3mReadiness check: Did you commit your progress to Git?3mKnowledge check: Adding components15mModule quiz: Project foundations30m

Week3

Week 3

9 hours to complete

Project functionality

9 hours to complete

4 videos (Total 12 min), 20 readings, 17 quizzes

4 videos

Customer table bookings3mQuerying a table booking API3mThe importance of UX2mModule summary: Project functionality3m

20 readings

Recap: State in React15mRecap: Forms15mExercise: Defining the Bookings page30mExercise: Adding table booking state30mRecap: Unit testing15mExercise: Adding unit tests30mAdditional resources5mRecap: Querying APIs in React15mExercise: Connecting the bookings page to the API30mExercise: Submitting the new booking page to the API30mExercise: Update the unit tests for the API queries30mAdditional resources5mRecap: Form validation15mExercise: Adding form validation30mExercise: Adding unit tests for the form validation and submission30mRecap: Accessibility15mExercise: Ensuring your application is accessible to users30mRecap: UX and UI usability evaluation15mExercise: Evaluating and revising the UX30mAdditional resources5m

17 practice exercises

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

Week4

Week 4

3 hours to complete

Project Assessment

3 hours to complete

2 videos (Total 6 min), 3 readings, 3 quizzes

Reviews

4.6

23 reviews

5 stars
84.50%
4 stars
5.63%
3 stars
1.40%
2 stars
4.22%
1 star
4.22%

TOP REVIEWS FROM FRONT-END DEVELOPER CAPSTONE

by GSJan 27, 2023

It has been an amazing learning journey, I gained a lot of strong skills building the capstone project.

This was a good choice.

by DBFeb 4, 2023

Working on the project was worth the time, relearning what I know for better knowledge.

by MFFeb 15, 2023

Great course for anyone pursuing a career in web apps.

by BNJan 30, 2023

The final project is well rounded and it covers everything that it taught 👌

View all reviews

About the Meta Front-End Developer Professional Certificate

Want to get started in the world of coding and build websites as a career? This certificate, designed by the software engineering experts at Meta—the creators of Facebook and Instagram, will prepare you for a career as a front-end developer.

Upon completion, you’ll get access to the Meta Career Programs Job Board—a job search platform that connects you with 200+ employers who have committed to sourcing talent through Meta’s certificate programs, as well as career support resources to help you with your job search. In this program, you’ll learn: How to code and build interactive web pages using HTML5, CSS and JavaScript. In-demand design skills to create professional page layouts using industry-standard tools such as Bootstrap, React, and Figma. GitHub repositories for version control, content management system (CMS) and how to edit images using Figma. How to prepare for technical interviews for front-end developer roles. By the end, you’ll put your new skills to work by completing a real-world project where you’ll create your own front-end web application. Any third-party trademarks and other intellectual property (including logos and icons) referenced in the learning experience remain the property of their respective owners. Unless specifically identified as such, Coursera’s use of third-party intellectual property does not indicate any relationship, sponsorship, or endorsement between Coursera and the owners of these trademarks or other intellectual property.

Frequently Asked Questions

When will I have access to the lectures and assignments?
Access to lectures and assignments depends on your type of enrollment. If you take a course in audit mode, you will be able to see most course materials for free. To access graded assignments and to earn a Certificate, you will need to purchase the Certificate experience, during or after your audit. If you don't see the audit option:
The course may not offer an audit option. You can try a Free Trial instead, or apply for Financial Aid.
The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.
What will I get if I subscribe to this Certificate?
When you enroll in the course, you get access to all of the courses in the Certificate, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile. If you only want to read and view the course content, you can audit the course for free.

More questions? Visit the Learner Help Center.

Build employee skills, drive business results

Discover Coursera for Business

Front-End Developer Capstone

About this Course

What you will learn

Skills you will gain