React - How To Create The YouTube Home Page With Tailwind, React, and TypeScript

Discover React Mastery: From Essential Concepts to Advanced Hooks, Master React Development with Real-World Projects and Boost Your Skills in Record Time!

4.0 (0)

12 learners

What you'll learn

Understand the fundamental concepts of React, including components and hooks.
Differentiate between React state and props and their respective uses.
Build and enhance web applications using React, including implementing features like infinite scrolling and currency conversion.
Apply React best practices to optimize application performance and debugging processes.

This course includes

43.3 hours of video
Certificate of completion
Access on mobile and TV

Summary

Keywords

webdevsimplified youtube home page project youtube clone how to build youtube reactjs project react project reactjs tailwind typescript typescript project react typescript projects reactjs typescript tailwindcss project

Full Transcript

The YouTube home page may seem simple at first (that is what I thought), but there are so many small complex interactions that actually make building out this home page design quite complicated. In this video I will show you exactly how to build out the entire YouTube home page from scratch with TailwindCSS, React, and TypeScript. 📚 Materials/References: GitHub Code: https://github.com/WebDevSimplified/youtube-react-ts-tailwind-home-page Relative Time Formatter Article: https://blog.webdevsimplified.com/2020-07/relative-time-format Grid Video: https://youtu.be/9zBsdzdE4sM Custom Scrollbar Video: https://youtu.be/v_8CmC6cwUs 🌎 Find Me Here: My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified ⏱️ Timestamps: 01:00:00 - Introduction 01:01:30 - Setup 01:02:37 - Planning 01:04:18 - Page Header 01:32:15 - Categories Header 01:54:00 - Main Video Grid 01:10:45 - Sidebar #TailwindCSS #WDS #ReactJS

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Welcome