Harvard University · edX
CS50's Introduction to Computer Science
An introduction to the intellectual enterprises of computer science and the art of programming.
freeCodeCamp via YouTube Free video
React Course for Beginners w/ Tailwind CSS [2025]
Overview
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
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
Chapters 28
- 0:00:00Course Introduction
- 0:04:31Your First App Exercise - https://react-formula.com/workspace/your-first-app
- 0:10:00Rendering Components Exercise - https://react-formula.com/workspace/rendering-components
- 0:07:54Passing Props - https://react-formula.com/workspace/passing-props
- 0:27:52Passing Props II - https://react-formula.com/workspace/passing-props-ii
- 0:36:39Passing Props III - https://react-formula.com/workspace/passing-props-iii
- 0:45:05Intro to Tailwind CSS Lecture
- 0:49:40Tailwind Basics Exercise - https://react-formula.com/workspace/tailwind-css-basics
- 0:59:55Padding & Margin Lecture
- 1:03:21Button Style Exercise - https://react-formula.com/workspace/button-style-exercise
- 1:14:30Tailwind ClassNames Lecture
- 1:19:53Button Component Exercise - https://react-formula.com/workspace/button-style-exercise
- 1:29:32Flex Box Lecture
- 1:34:38Flex Exercise - https://react-formula.com/workspace/flex-exercise
- 1:39:26Flex Column Lecture
- 1:42:17Flex Exercise II - https://react-formula.com/workspace/flex-exercise-ii
- 1:46:21Analyzing Layouts Lecture
- 1:51:50Tailwind Docs Lecture
- 1:56:04Analyzing Layouts Exercise - https://react-formula.com/workspace/analyzing-layouts-exercise
- 2:22:59Search Page Design Exercise - https://react-formula.com/workspace/search-page-design
- 2:49:53Event Handling & State Lecture
- 2:57:08Click Event Exercise - https://react-formula.com/workspace/click-event-exercise
- 3:12:05Conditional Rendering Exercise - https://react-formula.com/workspace/conditional-rendering-exercise
- 3:29:28Counter Exercise - https://react-formula.com/workspace/counter
- 3:39:27Light Switch Exercise - https://react-formula.com/workspace/light-switch
- 3:58:22Image Carousel Exercise - https://react-formula.com/workspace/image-carousel
- 4:17:43Cat Carousel Exercise - https://react-formula.com/workspace/cat-carousel
- 4:42:11Outro
Advantages and disadvantages
Advantages
- Completely free, with no ads inside the lessons.
- Project-based: you build real apps as you learn.
- freeCodeCamp's own certifications are free and well known among developers.
- Free, one long video that covers a topic end to end.
- Use the chapters to jump to what you need.
- 129,691 views, so help and notes are easy to find.
- Completely free.
- Self-paced: start any time.
Disadvantages
- YouTube videos are long single recordings; you pace yourself.
- Less theory than a university course.
- No exercises or certificate: code along to make it stick.
- No certificate.
- No graded assignments or feedback.
Some points apply to every course of this kind; see how we rank.
Free
- Free: Watch on YouTube, no account needed.
- Certificate: None. Code or take notes along to make it stick.
freeCodeCamp is in Tier 3: good universities, respected companies, nonprofits and well-known teachers of our institution ranking (78/100). Free full courses and certifications; practical, but not university-level depth.
Similar courses
CS50's Mobile App Development with React Native 2018
Learning objectives This course picks up where Harvard University's CS50 leaves off, transitioning from web development to mobile app development with React Native, a popular open-source framework maintained by Facebook that enables cross-platform native apps using JavaScript without Java or Swift.…
Harvard University · edX
CS50's Web Programming with Python and JavaScript
This course picks up where CS50 leaves off, diving more deeply into the design and implementation of web apps with Python, JavaScript, and SQL using frameworks like Django, React, and Bootstrap.
CS50 Fall 2023 - Lecture 8 - HTML, CSS, JavaScript (live, unedited)
*** This is CS50, Harvard University's introduction to the intellectual enterprises of computer science and the art of programming. *** TABLE OF CONTENTS 00:00:00 - Introduction 00:14:01 - Bingo Board 00:14:51 - Internet 00:19:37 - TCP/IP 00:27:25 - ports 00:31:05 - DNS 00:34:20 - DHCP 00:35:25 - H…
CS50 Fall 2025 - Lecture 8 - HTML, CSS, JavaScript (live, unedited)
*** This is CS50, Harvard University's introduction to the intellectual enterprises of computer science and the art of programming. *** 00:20:28 - TCP/IP 00:31:06 - Ports 00:36:22 - DNS 00:40:11 - DHCP 00:41:43 - HTTP 00:52:29 - Status Codes 00:55:15 - Inspect 01:02:09 - HTML 01:55:26 - Regular Exp…
Harvard University · edX
Data Science: Wrangling
4.436 ratingsLearn to process and convert raw data into formats needed for analysis.