Front-End Development Capstone Project

Instructor: IBM Skills Network Team , Richa Arora

Advanced Level • 2 weeks to complete at 10 hours a week • Flexible Schedule

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

Web Design
Application Deployment
Web Development
React.js
Front-End Web Development
Databases
Figma (Design Software)
Web Analytics and SEO
Mockups
GitHub
UI Components
Web Design and Development
HTML and CSS

Shareable Certificate

Earn a shareable certificate to add to your LinkedIn profile

Outcomes

  • 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

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.

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.

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.

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

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.

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.