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

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:

🌎 Find Me Here:

⏱️ 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

[GentlemanTomcat]

This is by far the most dense tutorial I have ever watched and its awesome. Not a single wasted second! 🤓

[ofwoodfalegnameria]

WTF! How many tips and tricks in a such small video. Awesome content. Surely one of the better I ever seen

[juliannicholls]

Just brilliant. It has sat in my queue to watch for two months, and it was worth waiting for.

[JacobDuenke]

I loved this video. Just plain entertaining as well as informative. A lot of interesting css challenges addressed here that will be useful later on.

[OliviaGraceDev]

I learnt so much from this that I've been applying at my job every day - thank you so much!

[joaogomes]

This CVA blowed my mind, thanks for another amazing video 💪💪👏👏

[estherinyang]

I'm already excited to watch it! 😀 Thank you, Kyle!

[anand_dudi]

I love this video compare others because here you explained things and logic before impementing. that makes an easy guess for us to interepret how you thought process works in different react scenerio

[uniquehandle]

Love your videos, you explain things very clearly and break them down well, it's so helpful. My cat seems to love your videos as well, every time I start watching he runs over and sits on my lap and stares at the screen 😂 so I guess you have a very cat-friendly teaching style!

[simonzuluaga]

I am impressed by the quality level of this tutorial. I think it is the best one I have seen

[salvadorbalas]

Amazing job! Love your content, keep doing videos like this one!

[Saioren]

I strive to be 10% of the programmer you are man, great tutorial!

[FunQuizzy]

This tutorial is sooo brilliant, for a beginner like me it's so detail. Thanks for the insights throughout the tutorial ^_^

[garikmelqonyan]

Just cannot find words...
Perfect job.

[JustinK]

Im following along with this video even but im using angular instead, which means i have to always ask me self, "cool.. now how would i do the same thing in angular".
This will help me learn to think for myself more so than if i was using react where it would be easy to just blindly copy what you are doing.

Afterwards i can use my completed angular version to then make a react version. (without referring back to this video)

[VladBatalin]

hey, great video! what extensions do you use for autocomplete tailwind? nothing works for me with this autocompletion

[atemrandyasong]

The fact that we have the same YouTube recommendations 😭❤️❤️

[herbertpimentel]

Thank you very much.... this was amazing

[Ziboo]

Love the tutorials. Thank you for sharing. One feedback if I may. When editing the code, I think it would be more helpfull to see the result page and not the actual finished product. Also saving from time to time to see the CSS updating. Like that, we could see in realtime what each CSS attributes does on the layout. :)

[jamalijufri]

I love this video please continue to other page