ReactJS Mini-Projects For Beginners

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Chapter 2: Environment Setup

Lecture 1: Environment Setup

Lecture 2: VSCode Setup

Lecture 3: Project Setup

Lecture 4: Starter File Overview

Chapter 3: Project 1 – Counter App

Lecture 1: Counter App – Intro

Lecture 2: Counter App – JSX

Lecture 3: Counter App – CSS

Lecture 4: Counter App – Logic

Chapter 4: Project 2 – Accordion

Lecture 1: Accordion – Intro

Lecture 2: Accordion – JSX

Lecture 3: Accordion – CSS

Lecture 4: Accordion – Logic

Chapter 5: Project 3 – Profile App

Lecture 1: Profile App – Intro

Lecture 2: Profile App – JSX

Lecture 3: Profile App – CSS

Lecture 4: Profile App -Logic

Chapter 6: Project 4 – Profile App With Search

Lecture 1: Profile App With Search – Intro

Lecture 2: Profile App With Search – Logic

Chapter 7: Project 5 – Random Joke Generator

Lecture 1: Random Joke Generator – Intro

Lecture 2: Random Joke Generator – JSX

Lecture 3: Random Joke Generator – CSS

Lecture 4: Random Joke Generator – Logic

Chapter 8: Project 6 – Password Visibility Toggle

Lecture 1: Password Visibility Toggle – Intro

Lecture 2: Password Visibility Toggle – JSX

Lecture 3: Password Visibility Toggle – CSS

Lecture 4: Password Visibility Toggle – Logic

Chapter 9: Project 7 – Modal

Lecture 1: Modal – Intro

Lecture 2: Modal – JSX

Lecture 3: Modal – CSS

Lecture 4: Modal – Logic

Chapter 10: Project 8 – Tabs

Lecture 1: Tabs – Intro

Lecture 2: Tabs – JSX

Lecture 3: Tabs – CSS

Lecture 4: Tabs – Logic

Chapter 11: Project 9 – Countdown

Lecture 1: Countdown – Intro

Lecture 2: Countdown – JSX for products

Lecture 3: Countdown – JSX for Countdown

Lecture 4: Countdown – CSS

Lecture 5: Countdown – Logic part 1

Lecture 6: Countdown – Logic part 2

Chapter 12: Project 10 – Weather App

Lecture 1: Weather App – Intro

Lecture 2: Weather App – JSX

Lecture 3: Weather App – CSS

Lecture 4: Weather App – Logic 1 – Fetch data

Lecture 5: Weather App – Logic 2 – Dipslay data

Lecture 6: Weather App – Logic 3 – Loading state and handling error

Chapter 13: Project 11 – Image Slider

Lecture 1: Image Slider – Intro

Lecture 2: Image Slider – JSX

Lecture 3: Image Slider – CSS

Lecture 4: Image Slider – Logic

Chapter 14: Project 12 – Testimonial

Lecture 1: Testimonial – Intro

Lecture 2: Testimonial – JSX

Lecture 3: Testimonial – CSS

Lecture 4: Testimonial – Logic

Chapter 15: Project 13 – Responsive Menu 1

Lecture 1: Responsive Menu – Intro

Lecture 2: Responsive Menu – JSX

Lecture 3: Responsive Menu – CSS

Lecture 4: Responsive Menu – Logic 1

Lecture 5: Responsive Menu – Logic 2

Chapter 16: Project 14 – Responsive Menu 2

Lecture 1: Responsive Menu 2 – Intro

Lecture 2: Responsive Menu 2 – CSS and Logic

Chapter 17: Project 15 – Responsive Menu With Submenu

Lecture 1: Responsive Menu With Submenu – Intro

Lecture 2: Responsive Menu With Submenu – Part 1

Lecture 3: Responsive Menu With Submenu – Part 2

Lecture 4: Responsive Menu With Submenu – Part 3

Lecture 5: Responsive Menu With Submenu – Part 4