Free Projects , Project ,

Create Portfolio Website

In this project we are going to create and deploy a fully responsive portfolio website from scratch using React icons, hooks. We will also be adding multiple contact options in website - WhatsApp, Facebook, Messenger and Email.

What will you Learn in the Project?

  1. How to work with the use State Hook?
  2. How to work with the Props and passing data?
  3. How to work with React Icons?
  4. How to work with Modern Responsive design?
  5. How to work with multiple contact options –  Email, WhatsApp, Messenger and Facebook
  6. How to work with Swiper JS?
  7. How to deploy the website in the Internet

Tools Used

Visual Studio Code

Tasks Performed

Task-1: Buy the hosting claiming free domain and Installing the node and VSCode. Creating the React app

Task-2: Create all the Components

Task-3: Create all the CSS variables and General Styles

Task-4: Create Header component JSX and install the React Icons and make header component Responsive Design

Task-5: Create Floating Nav component and Floating Nav CSS and manage the Nav state using use State Hook

Task-6: Create About Component JSX and About Component CSS.

Task-7: Make About Component to Responsive Design and create Experience component of JSX and CSS.

Task-8: Create Experience Component in Responsive Design and create Services Component of JSX and CSS and make Services component to Responsive Design.

Task-9: Create Portfolio component of JSX and CSS. Make Portfolio Component to Responsive

Task-10: Create Portfolio items from array using map and create Testimonials component of JSX and CSS .Make Testimonial component as Responsive

Task-11: Create Testimonials items from array using map method and create carousel Slides using Swiper JS.

Task-12: Create Contact Component JSX.
Contact options are Face Book, Messenger, What’s App and Email.

Task-13: Create Contact Component of CSS and make it Responsive Design.

Task-14: Create Form Submission using Email JS

Task-15: Create Footer Component of JSX and CSS .Make Footer Component as Responsive

Task-16: Deploy React JS portfolio website

Course Content

Expand All
Lesson Content
0% Complete 0/2 Steps
Not Enrolled

Skills you will develop

Create React project from scratch

Work with the use State Hook

Work with the React Icons

Work with Props and passing data to parent to child

Work with Modern and Responsive design with CSS

Work with carousel slides using Swiper JS

Deploy your website

Share with Friends and earn points!!