Front-End Developer Capstone

Grow your skills with Coursera Plus for $239/year (usually $399). Save now.

Front-End Developer Capstone

Name: Front-End Developer Capstone
Rating: 4.600877192982456 (456 reviews)

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

Instructor: Taught by Meta Experts

70,841 already enrolled

Included with

4 modules

Gain insight into a topic and learn the fundamentals.

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

456 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: Web Content Accessibility Guidelines
Category: Usability
Category: Responsive Web Design
Category: User Interface and User Experience (UI/UX) Design
Category: React.js
Category: Front-End Web Development
Category: Semantic Web
Category: User Experience Design
Category: Data Validation
Category: Software Technical Review
Category: Javascript
Category: HTML and CSS

Tools you'll learn

Category: Git (Version Control System)
Category: Web Applications

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

41 assignments

Taught in English

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 videos Total 12 minutes

Introduction to the course 3 minutes
Setting up the project 3 minutes
Planning the UX and UI 3 minutes
Module summary: Starting the project 3 minutes

15 readings Total 280 minutes

Course syllabus 15 minutes
How to be successful in this course 10 minutes
Checking your development environment 15 minutes
Additional resources 5 minutes
Recap: Version control 15 minutes
Exercise: Setting up the repository 30 minutes
Recap: React set up 15 minutes
Exercise: Setting up the React project 30 minutes
Exercise: Committing the project 30 minutes
Additional resources 5 minutes
Recap: Principles of UX and UI 15 minutes
Exercise: Wireframing the project 30 minutes
Exercise: Designing components 30 minutes
Exercise: Applying design fundamentals in Figma 30 minutes
Additional resources 5 minutes

9 assignments Total 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 project 15 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 UI 15 minutes
Module Quiz: Starting the Project 50 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 videos Total 13 minutes

Setting up a semantic HTML document 3 minutes
Styling elements 4 minutes
Project components 4 minutes
Module summary: Project foundations 3 minutes

13 readings Total 240 minutes

Recap: Semantic HTML 15 minutes
Exercise: Setting up the HTML document 30 minutes
Recap: Meta tags and Open Graph protocol 15 minutes
Exercise: Adding meta tags and setting up OGP 30 minutes
Additional resources 5 minutes
Recap: CSS grids 15 minutes
Exercise: Setting up the CSS layout 30 minutes
Recap: Styling elements 15 minutes
Exercise: Styling elements 30 minutes
Additional resources 5 minutes
Recap: React basics 15 minutes
Exercise: Setting up the app components 30 minutes
Additional resources 5 minutes

13 assignments Total 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 structure 15 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 responsiveness 15 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 components 15 minutes
Module Quiz: Project Foundations 50 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 videos Total 12 minutes

Customer table bookings 3 minutes
Querying a table booking API 3 minutes
The importance of UX 3 minutes
Module summary: Project functionality 3 minutes

20 readings Total 420 minutes

Recap: State in React 15 minutes
Recap: Forms 15 minutes
Exercise: Defining the Bookings page 30 minutes
Exercise: Adding table booking state 30 minutes
Recap: Unit testing 15 minutes
Exercise: Adding unit tests 30 minutes
Additional resources 5 minutes
Recap: Querying APIs in React 15 minutes
Exercise: Connecting the bookings page to the API 30 minutes
Exercise: Submitting the new booking page to the API 30 minutes
Exercise: Update the unit tests for the API queries 30 minutes
Additional resources 5 minutes
Recap: Form validation 15 minutes
Exercise: Adding form validation 30 minutes
Exercise: Adding unit tests for the form validation and submission 30 minutes
Recap: Accessibility 15 minutes
Exercise: Ensuring your application is accessible to users 30 minutes
Recap: UX and UI usability evaluation 15 minutes
Exercise: Evaluating and revising the UX 30 minutes
Additional resources 5 minutes

17 assignments Total 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 system 15 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 API 15 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 experience 15 minutes
Module Quiz: Project Functionality 50 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 videos Total 6 minutes

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

3 readings Total 50 minutes

About the final project assessment 15 minutes
Solution: Booking a table on the Little Lemon website 30 minutes
Next steps 5 minutes

2 assignments Total 180 minutes

Readiness check: Prepare to submit the project 30 minutes
Final Graded Quiz 150 minutes

1 peer review Total 60 minutes

Booking a table on the Little Lemon website 60 minutes

1 discussion prompt Total 10 minutes

Reflect on learning 10 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.94%
4 stars
11.18%
3 stars
4.38%
2 stars
1.97%
1 star
3.50%

Showing 3 of 456

Reviewed on May 18, 2024

Awesome course to get all the concepts from the Specialization together

Reviewed on Aug 24, 2023

Helped me on my journey to become a front end developer

Reviewed on Sep 1, 2023

Fantastic Course, Please Take time to learn all concepts, You are on the right platform!

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.