Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

React Course for Beginners with Tailwind CSS [2025]

via freeCodeCamp

Start learning Write review

Details

Start learning

Provider

freeCodeCamp
Pricing

Free Video
Languages

English
Effort

4 hours 43 minutes
Sessions

Self-Paced
Level

Beginner

Found in

This beginner course introduces React through hands-on exercises covering components, props, event handling, state, conditional rendering, and interactive interfaces. It also teaches Tailwind CSS styling through utility classes, spacing, flex layouts, and design exercises.

Syllabus

0:00:00 Course Introduction
0:04:31 Your First App Exercise - https://react-formula.com/workspace/your-first-app
0:10:00 Rendering Components Exercise - https://react-formula.com/workspace/rendering-components
0:07:54 Passing Props - https://react-formula.com/workspace/passing-props
0:27:52 Passing Props II - https://react-formula.com/workspace/passing-props-ii
0:36:39 Passing Props III - https://react-formula.com/workspace/passing-props-iii
0:45:05 Intro to Tailwind CSS Lecture
0:49:40 Tailwind Basics Exercise - https://react-formula.com/workspace/tailwind-css-basics
0:59:55 Padding & Margin Lecture
1:03:21 Button Style Exercise - https://react-formula.com/workspace/button-style-exercise
1:14:30 Tailwind ClassNames Lecture
1:19:53 Button Component Exercise - https://react-formula.com/workspace/button-style-exercise
1:29:32 Flex Box Lecture
1:34:38 Flex Exercise - https://react-formula.com/workspace/flex-exercise
1:39:26 Flex Column Lecture
1:42:17 Flex Exercise II - https://react-formula.com/workspace/flex-exercise-ii
1:46:21 Analyzing Layouts Lecture
1:51:50 Tailwind Docs Lecture
1:56:04 Analyzing Layouts Exercise - https://react-formula.com/workspace/analyzing-layouts-exercise
2:22:59 Search Page Design Exercise - https://react-formula.com/workspace/search-page-design
2:49:53 Event Handling & State Lecture
2:57:08 Click Event Exercise - https://react-formula.com/workspace/click-event-exercise
3:12:05 Conditional Rendering Exercise - https://react-formula.com/workspace/conditional-rendering-exercise
3:29:28 Counter Exercise - https://react-formula.com/workspace/counter
3:39:27 Light Switch Exercise - https://react-formula.com/workspace/light-switch
3:58:22 Image Carousel Exercise - https://react-formula.com/workspace/image-carousel
4:17:43 Cat Carousel Exercise - https://react-formula.com/workspace/cat-carousel
4:42:11 Outro