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

4.5

stars

23 ratings

Taught by Meta Staff

10,940 already enrolled

Offered By

Meta Front-End Developer Professional CertificateMeta

About this Course

251,182 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.

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.

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.5/5 (9 Ratings)

Taught by Meta Staff

231,157 Learners

49 Courses

Offered by

Syllabus - What you will learn from this course

Week

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 course3m

Setting up the project3m

Planning the UX and UI3m

Module summary: Starting the project2m

15 readings

Course syllabus15m

How to be successful in this course10m

Checking your development environment15m

Additional resources5m

Recap: Version control15m

Exercise: Setting up the repository30m

Recap: React set up15m

Exercise: Setting up the React project30m

Exercise: Committing the project30m

Additional resources5m

Recap: Principles of UX and UI15m

Exercise: Wireframing the project30m

Exercise: Designing components30m

Exercise: Applying design fundamentals in Figma30m

Additional resources5m

9 practice exercises

Readiness check: Did you set up the Git repository?3m

Readiness check: Did you set up the React project?3m

Readiness check: Did you push your commits?3m

Knowledge check: Setting up the project15m

Readiness check: Did you complete the wireframe?3m

Readiness check: Did you establish the designs for your key components?3m

Readiness check: Did you establish a typographic hierarchy, fonts and colors using the style guide?3m

Knowledge check: Planning the UX and UI15m

Module quiz: Starting the project30m

Week

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 document2m

Styling elements3m

Project components3m

Module summary: Project foundations2m

13 readings

Recap: Semantic HTML15m

Exercise: Setting up the HTML document30m

Recap: Meta tags and Open Graph protocol15m

Exercise: Adding meta tags and setting up OGP30m

Additional resources5m

Recap: CSS grids15m

Exercise: Setting up the CSS layout30m

Recap: Styling elements15m

Exercise: Styling elements30m

Additional resources5m

Recap: React basics15m

Exercise: Setting up the app components30m

Additional resources5m

13 practice exercises

Readiness check: Did you set up a semantic HTML document?3m

Readiness check: Did you establish meta tags and Open Graph protocol data?3m

Readiness check: Did you commit your progress to Git?3m

Knowledge check: Semantic structure15m

Readiness check: Did you set up a responsive CSS layout?3m

Readiness check: Did you check that the visual elements of the website match the Figma design?3m

Readiness check: Did you commit your progress to Git?3m

Knowledge check: Styling and responsiveness15m

Readiness check: Did you set up the app components?3m

Readiness check: Are your components semantically correct?3m

Readiness check: Did you commit your progress to Git?3m

Knowledge check: Adding components15m

Module quiz: Project foundations30m

Week

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 bookings3m

Querying a table booking API3m

The importance of UX2m

Module summary: Project functionality3m

20 readings

Recap: State in React15m

Recap: Forms15m

Exercise: Defining the Bookings page30m

Exercise: Adding table booking state30m

Recap: Unit testing15m

Exercise: Adding unit tests30m

Additional resources5m

Recap: Querying APIs in React15m

Exercise: Connecting the bookings page to the API30m

Exercise: Submitting the new booking page to the API30m

Exercise: Update the unit tests for the API queries30m

Additional resources5m

Recap: Form validation15m

Exercise: Adding form validation30m

Exercise: Adding unit tests for the form validation and submission30m

Recap: Accessibility15m

Exercise: Ensuring your application is accessible to users30m

Recap: UX and UI usability evaluation15m

Exercise: Evaluating and revising the UX30m

Additional resources5m

17 practice exercises

Readiness check: Did you set up a component for viewing the available bookings?3m

Readiness check: Did you share table booking state across components?3m

Readiness check: Are your components semantically correct?3m

Readiness check: Did you set up component unit tests?3m

Knowledge check: Table booking system15m

Readiness check: Is your bookings page using "live" data?3m

Readiness check: Is the table booking system working end-to-end?3m

Readiness check: Did you set up the API unit tests?3m

Readiness check: Did you commit your progress to Git?3m

Knowledge check: Interacting with the API15m

Readiness check: Is your booking form validating user data?3m

Readiness check: Did you set up the form validation and submission unit tests?3m

Readiness check: Is your application accessible?3m

Readiness check: Have you completed the heuristics usability evaluation?3m

Readiness check: Did you commit your progress to Git?3m

Knowledge check: Improving the experience15m

Module quiz: Project functionality30m

Week

Week 4

3 hours to complete

Project Assessment

3 hours to complete

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

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.
What is the refund policy?
If you subscribed, you get a 7-day free trial during which you can cancel at no penalty. After that, we don’t give refunds, but you can cancel your subscription at any time. See our full refund policy.

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