Front-End Developer Capstone

Ends tomorrow! Save 40% on your access to 10,000+ programs and make a real impact in your career. Save now.

Front-End Developer Capstone

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

Instructor: Taught by Meta Experts

72,422 already enrolled

Included with Learn more

Ask Coursera

4 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

3 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

4 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

3 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

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 videosTotal 12 minutes

Introduction to the course3 minutes
Setting up the project3 minutes
Planning the UX and UI3 minutes
Module summary: Starting the project3 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

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 document3 minutes
Styling elements4 minutes
Project components4 minutes
Module summary: Project foundations3 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 minutes
Querying a table booking API3 minutes
The importance of UX3 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.

What's included

2 videos3 readings2 assignments1 peer review1 discussion prompt

2 videosTotal 6 minutes

Course recap: Capstone Project3 minutes
Congratulations, you have completed the Capstone Project!3 minutes

3 readingsTotal 50 minutes

About the final project assessment15 minutes
Solution: Booking a table on the Little Lemon website30 minutes
Next steps5 minutes

2 assignmentsTotal 180 minutes

Final Graded Quiz150 minutes
Readiness check: Prepare to submit the project30 minutes

1 peer reviewTotal 60 minutes

Booking a table on the Little Lemon website60 minutes

1 discussion promptTotal 10 minutes

Reflect on learning10 minutes

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructor

Taught by Meta Experts

Offered by

Explore more from Mobile and Web Development

IBM
Front-End Development Capstone Project
Course
Status: Free Trial
Meta
Back-End Developer Capstone
Course
Status: Free Trial
Meta
Capstone (React App)
Course
Status: Free Trial
Microsoft
Full-Stack Developer Capstone Project
Course
Status: Free Trial

Why people choose Coursera for their career

Felipe M.

Learner since 2018

"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."

Jennifer J.

Learner since 2020

"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."

Larry W.

Learner since 2021

"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Frequently asked questions

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. 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.

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.