When will I have access to the lectures and assignments?

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.

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.

Front-End Development Capstone Project

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

Front-End Development Capstone Project

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

Instructors: IBM Skills Network Team

7,610 already enrolled

Included with

Learn more

6 modules

Gain insight into a topic and learn the fundamentals.

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

58 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

Tools you'll learn

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

10 assignments

Taught in English

91% of learners achieved a positive career outcome

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

Module details

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