Front-End Development Capstone Project

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

Front-End Development Capstone Project

Name: Front-End Development Capstone Project
Rating: 4.631578947368421 (57 reviews)

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

Instructors: IBM Skills Network Team +1 more

7,563 already enrolled

Included with

6 modules

Gain insight into a topic and learn the fundamentals.

57 reviews

Advanced level

Recommended experience

2 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

6 modules

Gain insight into a topic and learn the fundamentals.

57 reviews

Advanced level

Recommended experience

2 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

What you'll learn

Apply your UI/UX design and Figma skills to demonstrate your proficiency in designing the layouts for various components of a responsive website
Develop static website pages and integrate them into the Landing page while demonstrating your expertise in HTML and CSS.
Demonstrate your React proficiency to create dynamic react components and convert static pages into a responsive website
Apply your GitHub concepts and skills along with the software development process to build, deploy, and update a fully functional website

Skills you'll gain

Category: Web Design
Category: React.js
Category: Front-End Web Development
Category: Responsive Web Design
Category: Version Control
Category: Code Review
Category: Web Development
Category: Software Development
Category: Web Analytics and SEO
Category: Mockups
Category: Web Components
Category: HTML and CSS

Tools you'll learn

Category: Figma (Design Software)
Category: Hypertext Markup Language (HTML)
Category: UI Components
Category: Git (Version Control System)
Category: Web Applications
Category: Frontend Integration
Category: GitHub
Category: Cascading Style Sheets (CSS)

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

10 assignments

Taught in English

Build your Mobile and Web Development expertise

This course is part of the IBM 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 IBM

There are 6 modules in this course

According to internetlivestats.com, there are over 1.58 billion websites of which 200 million are active websites. This number is constantly growing with most businesses leaning towards building their own websites or enhancing them. This requires skilled web developers to get the job done.

A key objective of this capstone project is to help you get all your design and coding skills together to implement a responsive website. This will help you gain the confidence and comfort in building websites and better your job prospects. In this six-week capstone project, you will design and develop website component layouts and push it to a GitHub repository. Ready to enhance your professional portfolio with a comprehensive website built using HTML, CSS, and React? This capstone project will help you get closer to that goal! We assume that you have completed all the previous courses in the IBM Front-End Developer Professional Certificate.

In this module, you will start with an overview of different tasks in the Capstone project and understand the business requirements to develop a website through a project scenario. You will then initiate the project’s design phase by creating mockups for website layouts using Figma, including Navigation Bar, Sign Up, Login, Appointment Booking, and Reviews.

What's included

2 videos3 readings2 assignments5 plugins

2 videosTotal 11 minutes

Course Introduction4 minutes
Project Overview8 minutes

3 readingsTotal 16 minutes

Helpful Tips for Successfully Completing the Course5 minutes
Prerequisites and Course Syllabus1 minute
Resources to Support Successful Project Completion10 minutes

2 assignmentsTotal 42 minutes

Module 1 Checklist: Designing the Website Layouts12 minutes
Module 1 Graded Quiz: Getting Started with the Capstone30 minutes

5 pluginsTotal 125 minutes

Project Scenario10 minutes
Reading: Capstone Project Reference: Git Commands 10 minutes
Reading: Capstone Project Technical Reference10 minutes
Tasks Overview: Designing the Website Layouts5 minutes
Hands-on Lab: Create Mockup Designs for Website Layouts90 minutes

In this module, you will start your journey into developing the website. You will create a repository for your project using forking. You will then clone the repository to the lab environment. After the lab environment is set up, you will create layouts, including the Navigation Bar, Sign-up form, and Login form, and apply styling to static website pages using HTML and CSS. Finally, you will test the static components.

What's included

2 assignments2 app items2 plugins

2 assignmentsTotal 48 minutes

Module 2 Checklist: Developing Static Website Pages using HTML & CSS18 minutes
Module 2 Graded Quiz: Developing Static Website Pages using HTML & CSS30 minutes

2 app itemsTotal 120 minutes

Hands-on Lab: Create GitHub Repository for your Project30 minutes
Hands-on Lab: Build Static Website Layouts90 minutes

2 pluginsTotal 10 minutes

Tasks Overview: Setting Up the GitHub Repository5 minutes
Tasks Overview: Developing Static Website Layouts5 minutes

In this module, you will start working with React to build and manage dynamic components. As a first step, you will set up the React project and establish the required database connectivity, which is required for a few of the website components to function. You will then convert the static pages to dynamic React components and test them. You will also create the first dynamic React component for the project. Finally, you will integrate an existing dynamic React component and customize it based on your color scheme and theme for the website.

What's included

2 assignments5 app items4 plugins

2 assignmentsTotal 55 minutes

Module 3 Checklist: Developing Dynamic React Components - Part I25 minutes
Module 3 Graded Quiz: Developing Dynamic React Components - Part I 30 minutes

5 app itemsTotal 240 minutes

Hands-on Lab: Set Up the React Project with Backend Connectivity45 minutes
[Optional] Hands-on Lab: Create a React Project Using Vite30 minutes
Hands-on Lab: Convert Static Pages to Dynamic React Components45 minutes
Hands-on Lab: Integrate Existing Functionality30 minutes
Hands-on Lab: Build the Appointment Booking Component90 minutes

4 pluginsTotal 35 minutes

Tasks Overview: Setting Up the React Environment5 minutes
Local Storage and Session Storage10 minutes
Tasks Overview: Converting Static Website Pages to Dynamic React Components 15 minutes
Tasks Overview: Building and Integrating Dynamic React Components5 minutes

In this module, you will continue developing dynamic React components. You will also test each component to ensure they are working as expected.

What's included

2 assignments3 app items3 plugins

2 assignmentsTotal 62 minutes

Module 4 Checklist: Developing Dynamic React Components – Part II32 minutes
Module 4 Graded Quiz: Developing Dynamic React Components – Part II30 minutes

3 app itemsTotal 270 minutes

Hands-on Lab: Build the Notification Component90 minutes
Hands-on Lab: Build the Reviews Component90 minutes
Hands-on Lab: Build the Profile Component90 minutes

3 pluginsTotal 45 minutes

Tasks Overview: Building the Notification Component15 minutes
Tasks Overview: Building the Reviews Component15 minutes
Tasks Overview: Building the Profile Component15 minutes

In this module, you will integrate all components and test the website’s functionality. Then, you will deploy the website. After deploying, you will make changes to the website components to add meta tags for SEO in the index.html file for the project and redeploy the website.

What's included

2 assignments2 app items2 plugins

2 assignmentsTotal 40 minutes

Module 5 Checklist: Update Components and Redeploy the Website10 minutes
Module 5 Graded Quiz: Building, Deploying, and Updating the Website30 minutes

2 app itemsTotal 60 minutes

Hands-on Lab: Build and Deploy the Website30 minutes
Hands-on Lab: Update Components and Redeploy the Website30 minutes

2 pluginsTotal 10 minutes

Tasks Overview: Building and Deploying the Website5 minutes
Tasks Overview: Making Changes and Updating the Website Post Production5 minutes

In the final module, you will need to submit the screenshots from the hands-on labs for evaluation. You will submit GitHub repository links to enable peers to review your code. After you submit your project, you will need to review and grade one of your peer’s submissions.

What's included

2 readings1 peer review1 app item1 plugin

Earn a career certificate

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

Instructors

Instructor ratings

(8 ratings)

IBM Skills Network Team

91 Courses1,892,727 learners

Richa Arora

IBM

11 Courses146,969 learners

Offered by

IBM

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
86.88%
4 stars
4.91%
3 stars
1.63%
2 stars
0%
1 star
6.55%

Showing 3 of 57

Reviewed on Sep 25, 2024

i found this course very good. All the topics and labs are covered in this course. Give 5 star.

Reviewed on Sep 25, 2024

Good capstone project, well designed and explained!

Reviewed on May 20, 2025

I'm very glad, this is good course, there are many Lab

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.