This device is not compatible.

Build a Personal Portfolio Using React

PROJECT


Build a Personal Portfolio Using React

Learn how to build a personal portfolio that allows showcasing our work to the IT industry. We’ll use React to create the front-end of this web application and use Vanilla CSS to style the application.

Build a Personal Portfolio Using React

You will learn to:

Create a React application.

Use the functional components of React.

Uplift the state to share the data between multiple functional components.

Use CSS IDs to navigate between different sections of the same page.

Skills

Web Development

React.js

Prerequisites

Basic understanding of React

Good understanding of JavaScript, including arrow functions and array handling

Basic understanding of Vanilla CSS

Technologies

CSS

React

JavaScript

Project Description

In this project, we will build a personal portfolio that contains our work and other details, and allows us to showcase our work to recruiters and managers in the IT industry. We’ll fill in the missing code snippets and gradually create the segments of our web application.

We’ll start with the initial skeleton React.js code that displays “Hello World”, and then incrementally add different sections of our portfolio such as skills, projects, and contact details to the project.

This is what our final portfolio will look like:

Portfolio demo

Project Tasks

1

Introduction

Task 0: Get Started

Task 1: Start the Application

2

Develop the Header Section

Task 2: Implement the Header Component

Task 3: Import the Header Component

Task 4: Add Styling to the Header Component

3

Develop the Body Section

Task 5: Create the Body Component

Task 6: Import the Body Component

Task 7: Style the Body Component

4

Develop the About Section

Task 8: Build the About Component

Task 9: Add the About Component

Task 10: Style the About Component

5

Develop the Projects Section

Task 11: Implement the Projects Component

Task 12: Import the Projects Component

Task 13: Style the Projects Component

6

Develop the Skills Section

Task 14: Create the Skills Component

Task 15: Import the Skills Component

Task 16: Style the Skills Component

7

Develop the Footer Section

Task 17: Build the Footer Component

Task 18: Import the Footer Component

Task 19: Style the Footer Component

Congratulations

has successfully completed the Guided ProjectBuild a Personal Portfolio Using React

Relevant Courses

Use the following content to review prerequisites or explore specific concepts in detail.