React & Tailwindcss Projects Masterclass: Build Websites

Build Responsive, Animated and Modern Websites with React, TailwindCSS and Framer Motion.

What you'll learn

React

TailwindCSS

Build Websites

Webdesign

Requirements

HTML

VSCode or other IDE Beginner Knowledge

Description

In this course, we will be building websites using React and TailwindCSS. We’ll use Framer Motion to animate some components, adding smooth and engaging interactions. You’ll also learn how to deploy your websites so they’re live and accessible.I’ll be sharing quick web design tips along the way. You’ll work on projects that you can customize or add to your portfolio. You can even create your own portfolio—there’s plenty to choose from!Learn how to use Framer Motion to take your website’s animations to the next level. More importantly, master working with TailwindCSS, building components with React, and creating full websites from scratch.Throughout the course, we’ll follow a hands-on, project-based approach. Instead of just learning theory, you’ll immediately apply what you learn by building projects. This will help you gain confidence and develop a strong foundation in frontend development.We will also explore best practices for structuring your code, making your components reusable, and ensuring your websites are both responsive and visually appealing. These skills will help you stand out, whether you're freelancing, applying for jobs, or working on personal projects.By the end of this course, you won’t just rely on ChatGPT outputs or copy-paste code—you’ll be building on your own. You’ll be able to recreate websites you see or bring your own ideas to life, directly with code.See you in the lessons!

Overview

Section 1: Introduction

Lecture 1 Introduction

Section 2: Quicktips

Lecture 2 Steps to make UI better

Section 3: Reusable Components

Lecture 3 Intro Reusable Components

Lecture 4 Navbar Template

Lecture 5 Key Metrics Template

Lecture 6 Logo Animation Template

Lecture 7 Portfolio Template

Lecture 8 Portfolio Template 2

Lecture 9 Services Template

Lecture 10 Stack Template

Lecture 11 Contact Template

Lecture 12 Contact Template 2

Lecture 13 Footer Template

Section 4: Project 1: Animated Purple Planet Portfolio

Lecture 14 Resources

Lecture 15 Setup

Lecture 16 Hero Section

Lecture 17 About Section

Lecture 18 Logo Animation

Lecture 19 Portfolio Section

Lecture 20 Key Metrics Section

Lecture 21 Stack Section

Lecture 22 Services Section

Lecture 23 Contact Section

Lecture 24 Footer Section

Lecture 25 Navbar

Lecture 26 Testing & Fixing

Section 5: Project 2: Animated Clouds Portfolio

Lecture 27 Resources

Lecture 28 Intro

Lecture 29 Hero Section

Lecture 30 Navbar

Lecture 31 Portfolio Section

Lecture 32 Stack Section

Lecture 33 Services Section

Lecture 34 Contact Section

Lecture 35 Footer Section

Lecture 36 UI Fixes

Lecture 37 Deployment Section

Section 6: Project 3

Lecture 38 Resources

Lecture 39 Setup

Lecture 40 Navbar

Lecture 41 Hero Section

Lecture 42 About Section

Lecture 43 Portfolio Section

Lecture 44 Contact Section

Lecture 45 Footer Section

Lecture 46 Shinny Effect

Section 7: Project 4

Lecture 47 Resources

Lecture 48 Introduction

Lecture 49 Hero Section

Lecture 50 About Section

Lecture 51 Portfolio Section

Lecture 52 Contact Section

Lecture 53 Footer Section

Lecture 54 Final Fixes & Updates

Section 8: Project 5

Lecture 55 Resources

Lecture 56 Setup

Lecture 57 Navbar

Lecture 58 Hero Section

Lecture 59 Portfolio Section

Lecture 60 Contact Section

Lecture 61 About Section

Lecture 62 Footer Section

Lecture 63 Final Fixes

Section 9: Project 6

Lecture 64 Resources

Lecture 65 Setup

Lecture 66 Navbar

Lecture 67 Hero Section

Lecture 68 About Section

Lecture 69 Portfolio Section

Lecture 70 Contact & Footer Section

Lecture 71 Final Fixes

Section 10: Project 7: Multipage Portfolio

Lecture 72 Resources

Lecture 73 Setup

Lecture 74 Navbar

Lecture 75 Hero Section

Lecture 76 About Section

Lecture 77 Portfolio Section

Lecture 78 Contact Section

Section 11: Project 8

Lecture 79 Resources

Lecture 80 Setup

Lecture 81 Navbar

Lecture 82 Hero Section

Lecture 83 About Section

Lecture 84 Portfolio Section

Lecture 85 Experience Section

Lecture 86 Contact Section

Lecture 87 Footer Section

Lecture 88 Final Updates

Beginner Web Developers,Advanced Web Developers,Anyone interested in building websites