Front-End Development Capstone Project

Front-End Development Capstone Project

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

Instructors: IBM Skills Network Team

Access provided by NMIMS Indore

7,466 already enrolled

6 modules

Gain insight into a topic and learn the fundamentals.

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

55 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

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.

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

Course Introduction 4 minutes
Project Overview 8 minutes

3 readings Total 16 minutes

Helpful Tips for Successfully Completing the Course 5 minutes
Prerequisites and Course Syllabus 1 minute
Resources to Support Successful Project Completion 10 minutes

2 assignments Total 42 minutes

Module 1 Graded Quiz: Getting Started with the Capstone 30 minutes
Module 1 Checklist: Designing the Website Layouts 12 minutes

5 plugins Total 125 minutes

Project Scenario 10 minutes
Reading: Capstone Project Reference: Git Commands 10 minutes
Reading: Capstone Project Technical Reference 10 minutes
Tasks Overview: Designing the Website Layouts 5 minutes
Hands-on Lab: Create Mockup Designs for Website Layouts 90 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 assignments Total 48 minutes

Module 2 Graded Quiz: Developing Static Website Pages using HTML & CSS 30 minutes
Module 2 Checklist: Developing Static Website Pages using HTML & CSS 18 minutes

2 app items Total 120 minutes

Hands-on Lab: Create GitHub Repository for your Project 30 minutes
Hands-on Lab: Build Static Website Layouts 90 minutes

2 plugins Total 10 minutes

Tasks Overview: Setting Up the GitHub Repository 5 minutes
Tasks Overview: Developing Static Website Layouts 5 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 assignments Total 55 minutes

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

5 app items Total 240 minutes

Hands-on Lab: Set Up the React Project with Backend Connectivity 45 minutes
[Optional] Hands-on Lab: Create a React Project Using Vite 30 minutes
Hands-on Lab: Convert Static Pages to Dynamic React Components 45 minutes
Hands-on Lab: Integrate Existing Functionality 30 minutes
Hands-on Lab: Build the Appointment Booking Component 90 minutes

4 plugins Total 35 minutes

Tasks Overview: Setting Up the React Environment 5 minutes
Local Storage and Session Storage 10 minutes
Tasks Overview: Converting Static Website Pages to Dynamic React Components 15 minutes
Tasks Overview: Building and Integrating Dynamic React Components 5 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 assignments Total 62 minutes

Module 4 Graded Quiz: Developing Dynamic React Components – Part II 30 minutes
Module 4 Checklist: Developing Dynamic React Components – Part II 32 minutes

3 app items Total 270 minutes

Hands-on Lab: Build the Notification Component 90 minutes
Hands-on Lab: Build the Reviews Component 90 minutes
Hands-on Lab: Build the Profile Component 90 minutes

3 plugins Total 45 minutes

Tasks Overview: Building the Notification Component 15 minutes
Tasks Overview: Building the Reviews Component 15 minutes
Tasks Overview: Building the Profile Component 15 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 assignments Total 40 minutes

Module 5 Graded Quiz: Building, Deploying, and Updating the Website 30 minutes
Module 5 Checklist: Update Components and Redeploy the Website 10 minutes

2 app items Total 60 minutes

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

2 plugins Total 10 minutes

Tasks Overview: Building and Deploying the Website 5 minutes
Tasks Overview: Making Changes and Updating the Website Post Production 5 minutes

In the final module, you will need to submit the screenshots from the hands-on labs for peers to review. 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.