Play all

Intro Project Overview

Buying Hosting & Claiming Free Domain on Hostinger

Installing Node & VSCode

Assets

Creating our React App using npx create-react-app

Managing and Creating files & folders

Creating all Components

CSS Variables & General CSS Styles

Header Component JSX

Installing React Icons and Using them in our project

Header Component CSS

Header Component Responsive Design

Floating Nav Component JSX

Floating Nav Component CSS

Managing Nav States using useState Hook

About Component JSX

About Component CSS

About Component Responsive Design

Experience Component JSX

Experience Component CSS

Experience Component Responsive Design

Services Component JSX

Services Component CSS

Services Component Responsive Design

Portfolio Component JSX

Portfolio Component CSS

Portfolio Component Responsive Design

Generating Portfolio Items from Array using map method

Testimonials Component JSX

Testimonials Component CSS

Testimonials Component Responsive Design

Generating Testimonials from Array using map method

Creating Carousel/Slides using SwiperJS

Contact Component JSX Multiple contact options: Facebook Messenger, WhatsApp & Email

Contact Component CSS

Contact Component Responsive Design

Form Submission using EmailJS

Footer Component JSX

Footer Component CSS

Footer Component Responsive Design

Deploying Our React Website

Description:

Learn how to build and deploy a fully responsive personal portfolio website using React JS from scratch. Master essential React concepts including useState hooks, React Icons library, and modern CSS3 techniques. Create dynamic components for header, navigation, about, experience, services, portfolio, and testimonials sections. Implement interactive features like carousels with SwiperJS and multiple contact options including WhatsApp, Facebook Messenger, and email form submission using EmailJS. Follow step-by-step instructions to design, develop, and deploy a professional portfolio website, gaining practical experience in React development and responsive web design.

React Portfolio Website Tutorial - Build & Deploy React JS Portfolio Website

EGATOR

Add to list

#Programming #Programming Languages #Javascript #React #Web Development #Web Design #Responsive Design #Computer Science #CSS3

0:00 / 0:00