React JS Portfolio Website with Theme Customization

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction (What you'll learn)

Lecture 2: Full Project Demo

Chapter 2: Hosting & Domain, Tools & Extensions, and Project Folder Structure

Lecture 1: Project Live Demo link & Brief Info

Lecture 2: Hosting & Free Domain Name

Lecture 3: Installing Necessary Tools

Lecture 4: Creating Our React App & Installing Helpful Extensions

Lecture 5: Project Folder Structure

Lecture 6: CSS3 Variables & General CSS Styles

Lecture 7: Media Queries for General CSS

Chapter 3: Navbar

Lecture 1: Navbar JSX & Using React Icons

Lecture 2: Navbar CSS

Chapter 4: Header

Lecture 1: Header JSX

Lecture 2: Header CSS

Lecture 3: Header Media Queries (Responsive Design)

Chapter 5: About

Lecture 1: About JSX

Lecture 2: Creating Re-Usable Card Component

Lecture 3: Card Component CSS

Lecture 4: Making use of the Card Component in About JSX

Lecture 5: About CSS

Lecture 6: About Media Queries (Responsive Design)

Chapter 6: Services

Lecture 1: Services JSX

Lecture 2: Services CSS

Lecture 3: Services Media Queries (Responsive Design)

Chapter 7: Portfolio

Lecture 1: Portfolio JSX (useState Hook)

Lecture 2: Projects JSX

Lecture 3: Project JSX

Lecture 4: Projects CSS

Lecture 5: Getting Unique Categories From data array

Lecture 6: Projects Categories JSX

Lecture 7: Category Button JSX

Lecture 8: Projects Categories CSS

Lecture 9: Filter Projects Functionality

Lecture 10: Portfolio Media Queries (Responsive Design)

Chapter 8: Testimonials

Lecture 1: Testimonials JSX

Lecture 2: Creating Carousel/Slides with Swiper JS

Lecture 3: Testimonial JSX

Lecture 4: Testimonials CSS

Lecture 5: Firefox Bug Fix

Lecture 6: Creating Breakpoints for Swiper JS (Responsive Design)

Chapter 9: FAQs

Lecture 1: FAQs JSX

Lecture 2: FAQ JSX

Lecture 3: FAQs CSS

Lecture 4: FAQs Toggle using useState Hook

Chapter 10: Contacts

Lecture 1: Adding your contact details

Lecture 2: Contact JSX

Lecture 3: Contact CSS

Chapter 11: Footer

Lecture 1: Footer JSX

Lecture 2: Footer CSS

Chapter 12: Theme Customization

Lecture 1: Theme Modal JSX & React Fragment

Lecture 2: React Portals

Lecture 3: Modal Context (App-Wide State Management using Context API)

Lecture 4: Creating a Custom Hook to Consume our Context Value (with useContext Hook)

Lecture 5: Adding Event props to Open & Close Theme Modal

Lecture 6: The Trick (My Approach To Achieve The Theme Customization)

Lecture 7: Theme JSX

Lecture 8: Theme CSS

Lecture 9: Theme Media Queries (Responsive Design for small screens like phones)

Lecture 10: Theme Context (Context API & useReducer Hook)

Lecture 11: Creating a Custom Hook to Consume Theme Value with useContext Hook

Lecture 12: Changing Theme via className prop

Lecture 13: Adding Theme Colors in CSS

Lecture 14: Storing Theme State in Local Storage with useEffect Hook

Chapter 13: Floating Navbar

Lecture 1: Floating Navbar JSX

Lecture 2: Nav JSX

Lecture 3: Floating Navbar CSS

Lecture 4: Show/Hide Floating Navbar Feature (useRef, useState & useEffect Hook)

Lecture 5: Spice this up with Animation

Chapter 14: Animate-On-Scroll & Project Deployment

Lecture 1: Animate On Scroll

Lecture 2: Website Deployment (Making project live on the internet)

Lecture 3: Project Live Demo