Front-End Developer Capstone

Ends tomorrow! Save on skills that make you shine with 40% off 3 months of Coursera Plus. Save now

Front-End Developer Capstone

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

Instructor: Taught by Meta Experts

71,749 already enrolled

Included with

4 modules

Gain insight into a topic and learn the fundamentals.

460 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.

460 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

Category: UI/UX Strategy
Category: React.js
Category: Responsive Web Design
Category: User Interface and User Experience (UI/UX) Design
Category: Semantic Web
Category: Software Technical Review
Category: Web Content Accessibility Guidelines
Category: Usability
Category: Code Review
Category: Usability Testing
Category: User Interface (UI)
Category: Version Control
Category: HTML and CSS
Category: Front-End Web Development
Category: User Interface (UI) Design
Category: Javascript

Tools you'll learn

Category: Cascading Style Sheets (CSS)
Category: Hypertext Markup Language (HTML)
Category: Web Applications
Category: Git (Version Control System)

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

41 assignments

Taught in English

91%

of learners achieved a positive career outcome

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

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

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
Module Quiz: Project Foundations50 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

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
Module Quiz: Project Functionality50 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

Readiness check: Prepare to submit the project30 minutes
Final Graded Quiz150 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

Instructor ratings

(123 ratings)

Taught by Meta Experts

Offered by

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."

Learner reviews

5 stars
78.91%
4 stars
11.08%
3 stars
4.56%
2 stars
1.95%
1 star
3.47%

Showing 3 of 460

Reviewed on Dec 5, 2023

A great course to learn all the techniques and skills of a front-end web developer.

Reviewed on Jul 6, 2023

Really challenging task, but gives you a lot of confidence boost once you've completed it.

Reviewed on May 18, 2024

Awesome course to get all the concepts from the Specialization together

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.