YoVDO

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

Offered By: EGATOR via YouTube

Tags

React Courses Web Development Courses Responsive Design Courses CSS3 Courses

Course Description

Overview

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


Taught by

EGATOR

Related Courses

Mobile Web Development
Google via Udacity
iDESWEB, Introducción al desarrollo web
Miríadax
Information Design
University of California, San Diego via Coursera
Advanced Styling with Responsive Design
University of Michigan via Coursera
Front-End Web UI Frameworks and Tools
The Hong Kong University of Science and Technology via Coursera