React Course for Beginners w/ Tailwind CSS [2025]

Post Content

Video Player

00:00

04:42:59

Use Up/Down Arrow keys to increase or decrease volume.

Learn modern frontend web development using React and Tailwind CSS in this beginner course.

This course was developed by Alvin Zablan. Check out Alvin’s channel: https://www.youtube.com/c/AlvinTheProgrammer

Learn more frontend development with Alvin: https://react-formula.com/

Try interactive React courses we love, right in your browser: https://scrimba.com/freeCodeCamp-React (Made possible by a grant from our friends at Scrimba)

Contents
(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

Thanks to our Champion and Sponsor supporters:
Drake Milly
Ulises Moralez
Goddard Tan
David MG
Matthew Springman
Claudio
Oscar R.
jedi-or-sith
Nattira Maneerat
Justin Hual