This device is not compatible.
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.
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:
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
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.