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

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

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.

Syllabus

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