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

The KZread 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 KZread home page from scratch with TailwindCSS, React, and TypeScript.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/y...
Relative Time Formatter Article: blog.webdevsimplified.com/202...
Grid Video: • Learn CSS Grid in 20 M...
Custom Scrollbar Video: • How To Create Custom S...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: 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

Пікірлер: 136

  • @YEETlCUS
    @YEETlCUS7 ай бұрын

    the goat 🐐

  • @juliannicholls
    @juliannicholls5 ай бұрын

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

  • @JacobDuenke
    @JacobDuenke7 ай бұрын

    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.

  • @GentlemanTomcat
    @GentlemanTomcat6 ай бұрын

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

  • @estherinyang4779
    @estherinyang47797 ай бұрын

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

  • @joaogomes9318
    @joaogomes93187 ай бұрын

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

  • @ofwoodfalegnameria1107
    @ofwoodfalegnameria11077 ай бұрын

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

  • @OliviaGraceDev
    @OliviaGraceDev2 ай бұрын

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

  • @salvadorbalas5234
    @salvadorbalas52347 ай бұрын

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

  • @anand_dudi
    @anand_dudi7 ай бұрын

    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

  • @simonzuluaga2081
    @simonzuluaga2081Ай бұрын

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

  • @garikmelqonyan6011
    @garikmelqonyan60112 ай бұрын

    Just cannot find words... Perfect job.

  • @theisoj
    @theisoj7 ай бұрын

    Good video! Thanks Kyle as always 👍

  • @FunQuizzy88
    @FunQuizzy884 ай бұрын

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

  • @mirzaevelyorbek5235
    @mirzaevelyorbek52357 ай бұрын

    Bro really respect what you do

  • @karthik.g500
    @karthik.g5007 ай бұрын

    literally waiting for this

  • @Seamkey
    @SeamkeyАй бұрын

    Great Tutorial. Hope to see more.

  • @saifashraf2135
    @saifashraf21355 ай бұрын

    Great tutorial full of tips, thanks man :)

  • @Saioren
    @Saioren5 ай бұрын

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

  • @mboron83
    @mboron836 ай бұрын

    Awsome tutorial. Good Job!!!

  • @uniquehandle389
    @uniquehandle3897 ай бұрын

    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!

  • @bubaisubrata

    @bubaisubrata

    7 ай бұрын

    😅🤣

  • @tinalee8686
    @tinalee86866 ай бұрын

    Thank you! I really enjoyed your video

  • @atemrandyasong5710
    @atemrandyasong57107 ай бұрын

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

  • @mortezarostami3287
    @mortezarostami32873 ай бұрын

    Great as always!!

  • @noahr1545
    @noahr15457 ай бұрын

    Nice video as always!

  • @user-cj9by3ip1z
    @user-cj9by3ip1z5 ай бұрын

    Superb. How I wish I was good at tailwind/css in general.

  • @ta_pipo9669
    @ta_pipo96697 ай бұрын

    Perfect dude thanks you so much

  • @fatfat5186
    @fatfat51863 ай бұрын

    you are great ,you give us the best

  • @itzzRaghav
    @itzzRaghav2 ай бұрын

    The video is really great Please create more such videos

  • @jamalijufri2839
    @jamalijufri28396 ай бұрын

    I love this video please continue to other page

  • @Gurralanarayanareddy
    @Gurralanarayanareddy7 ай бұрын

    Wonderful video! Thanks

  • @jonatasmelosilva7899
    @jonatasmelosilva78992 ай бұрын

    🤯 Perfeito!! Ficou muito bom, parabéns!! Seu conteúdo é realmente muito bom!!!!!

  • @aygunbayir
    @aygunbayir7 ай бұрын

    Amazing content! 😊

  • @mirzaevelyorbek5235
    @mirzaevelyorbek52357 ай бұрын

    It was a really great project

  • @GhostWithAHoodie
    @GhostWithAHoodie7 ай бұрын

    Ur as good as Mr Powell, ur da GOAT man

  • @Ziboo30
    @Ziboo304 ай бұрын

    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. :)

  • @orcdev
    @orcdev7 ай бұрын

    Nice one! Thanks!

  • @JustinK0
    @JustinK06 ай бұрын

    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)

  • @miq_5239
    @miq_52398 күн бұрын

    Why does the observer object of the container react to the transition property? Where does the width and height get changed?

  • @amanrawat2177
    @amanrawat21777 ай бұрын

    Awesome video 🔥

  • @princebautista
    @princebautista7 ай бұрын

    this is gonna keep me busy tonight

  • @VladBatalin
    @VladBatalin2 ай бұрын

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

  • @ozanturhan8408
    @ozanturhan84083 ай бұрын

    Ty Kyle

  • @atifrehman1755
    @atifrehman17557 ай бұрын

    Your a Genius !!!

  • @mirzaevelyorbek5235
    @mirzaevelyorbek52357 ай бұрын

    Bro never give up

  • @nirajsali6939
    @nirajsali69396 ай бұрын

    Thanks.

  • @majdwahoob2364
    @majdwahoob23647 ай бұрын

    what's the purpose of using resizeObserver? i did it without the resizeObserver and it works

  • @rakhmatillorustamov3839
    @rakhmatillorustamov38395 ай бұрын

    5:28 PageHeader 32:39 main section

  • @imamansoni
    @imamansoni7 ай бұрын

    Looks easy but it's not, it can take days for me make this kind of clone. Great effort 💪

  • @darelbvcr687
    @darelbvcr6877 ай бұрын

    can you make fullstack next js tutorial using prisma and server actions?

  • @jopadjr
    @jopadjr4 ай бұрын

    1.6k+...Thanks mate

  • @user-su4rq2dt2r
    @user-su4rq2dt2r7 ай бұрын

    спасибо за видео

  • @speedster784
    @speedster7847 ай бұрын

    Great video. Just a question can you suggest a site or tool you use to create a logo for a website like the one you used in this video

  • @code_magpie

    @code_magpie

    2 ай бұрын

    Adobe Illustrator is more than what you are looking for.

  • @AzaB2C
    @AzaB2C7 ай бұрын

    Thank you Kyle! Anyone know why flex instead of grid was used for layout of NavBar, SideBar and Main content? Cheers!

  • @TheedonCritic

    @TheedonCritic

    6 ай бұрын

    Because flex is usually more flexible

  • @mirzaevelyorbek5235
    @mirzaevelyorbek52357 ай бұрын

    Try make a recommendation system on your project

  • @pratikanand143
    @pratikanand1434 ай бұрын

    How your color visible in line 3 at 12:29 ?

  • @ismogivenchy
    @ismogivenchyАй бұрын

    HOW WOULD THE SAME CATEGORY PILLS BE IMPLEMENTED IN NEXT.JS? Is this parallel routing?

  • @TheOneHong
    @TheOneHong7 ай бұрын

    please make the tutorial for the backend

  • @morhaham6609
    @morhaham66096 ай бұрын

    Thank you. I'm not sure how ResizeObserver works here since the width of the element does not change while translating. Can you explain please? Also you could pass "className={twMerge(buttonStyles({variant, size, className}))}" and it works due to its associative nature.

  • @miq_5239

    @miq_5239

    8 күн бұрын

    exactly what I thought, did you found an answer?

  • @wlnightmare
    @wlnightmare7 ай бұрын

    Real GOAT 🐐

  • @avijitchanda7944
    @avijitchanda79447 ай бұрын

    Please make video on server less

  • @samking618
    @samking6187 ай бұрын

    The Sidebar on small screens needs to transition smoothly which currently isn't, can anyone guide how to do it as it seems tricky.

  • @amalmurikkoli7629
    @amalmurikkoli76297 ай бұрын

    Could you make a minalistic spotify player with latest technologies

  • @kueifengtung2693
    @kueifengtung26934 ай бұрын

    max-h-screen and other Tailwind CSS classNames seem to be ignored/have no effect - do I check the tailwind.config.ts file?

  • @bklynpeter
    @bklynpeter7 ай бұрын

    "xerpm" for install?

  • @nanonkay5669
    @nanonkay56697 ай бұрын

    Why isn't Daisy UI used more?

  • @Rafael-wn6nh
    @Rafael-wn6nh7 ай бұрын

    Hello, I am interested in buying your React course, but would like to know when you are planning on launching the React Simplified - Next.js course. Thanks

  • @WebDevSimplified

    @WebDevSimplified

    7 ай бұрын

    The Next.js content should go live by the end of this year

  • @mirzaevelyorbek5235
    @mirzaevelyorbek52357 ай бұрын

    It would be great if you could also add recommendation system for videos ml model

  • @KILLCHRISU

    @KILLCHRISU

    7 ай бұрын

    ml has nothing to do with web dev

  • @gymGirlForLyf
    @gymGirlForLyf7 ай бұрын

    So, what is the pre-requistes of the video, do we need to know typescript or tailwind css to create this project!!

  • @adityaanuragi6916

    @adityaanuragi6916

    7 ай бұрын

    He's using them so most likely

  • @WebDevSimplified

    @WebDevSimplified

    7 ай бұрын

    You don't need to know TypeScript as it is used minimally, but I would recommend being familiar with the basics of Tailwind.

  • @dantemix
    @dantemix7 ай бұрын

    All the major companies are dropping type script. So can you make vixeo with JS.

  • @aditya-gt5sv
    @aditya-gt5sv7 ай бұрын

    How webdev is going to look like in next 2-3 year ? All these emerging technologies like prisma nextjs how are they gonna perform in next few year , I'm a newbie please clear my doubt

  • @user-zv6bv7eu8k
    @user-zv6bv7eu8k6 ай бұрын

    Keep getting an error when importing and mapping over subscrioptions, it throws this error saying somwthing to do with the images i believe ? Need help ***..Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided..***

  • @singhplayzz
    @singhplayzz7 ай бұрын

    27:33 the hidden property Do not work You can use className=" invisible md:visible md:flex "

  • @aquinas_choi
    @aquinas_choi5 ай бұрын

    how do you have those two different windows automagically change their sizes to fill the screen while changing the other ones size?

  • @evalaviniabucur1789

    @evalaviniabucur1789

    2 ай бұрын

    Select an window (give it focus) then press "Windows + left arrow". Select another window and press "Windows + left arrow". Each window will fill half of the space on the monitor. Now resize any of those windows and the other window will fill the remaining space.

  • @ArtemVerbat
    @ArtemVerbat5 ай бұрын

    I see that Tailwind so popular now, but what do you think about material-ui?

  • @SoberMan2001

    @SoberMan2001

    2 ай бұрын

    material ui has overcomplicated things, tailwind keeps it simple and effective and hence more popular.

  • @dstutz
    @dstutz6 ай бұрын

    Hey Kyle, the timestamps in the video description need to be fixed -- they start an hour in. Just need to remove the 1 from the beginning of all the timestamps before the Sidebar section

  • @reactDevelopment
    @reactDevelopment7 ай бұрын

    12:35 i am not getting the auto completion over there

  • @kamakura9722
    @kamakura97224 ай бұрын

    My face when I finally reached the end of the video...

  • @QuocDuyau
    @QuocDuyau7 ай бұрын

    🎉❤ i love you so:3

  • @junaidkt3676
    @junaidkt36767 ай бұрын

    ❤🔥

  • @jaimel8219
    @jaimel82197 ай бұрын

    You could even say that you build it with ViteJS in your title :)

  • @rayyanabdulwajid7681
    @rayyanabdulwajid76817 ай бұрын

    Can you add all functionalities like "like", "comment", "share"?

  • @TheOneHong

    @TheOneHong

    7 ай бұрын

    that has been done, with database

  • @TheOneHong

    @TheOneHong

    7 ай бұрын

    kzread.info/dash/bejne/nq2Cx9avdcnchJM.htmlsi=2xBnWoAM33JDYLo0

  • @Drakhuze
    @Drakhuze6 ай бұрын

    I found something bothering me, apparently when you hover to the video and try to press the Menu Button it got blocked by the #shadow-root div. I'm still learning on what shadow-root actually does and is there a fix for this

  • @Drakhuze

    @Drakhuze

    6 ай бұрын

    Apparently its only happening on Vivaldi browser, because the shadow dom expanding on the top left of the screen. weird stuff

  • @tekz541
    @tekz54110 күн бұрын

    Replayspeed 0.75 🤝

  • @lagunablade7952
    @lagunablade79526 ай бұрын

    How do you resize your chrome without having to use dev tools?

  • @evalaviniabucur1789

    @evalaviniabucur1789

    2 ай бұрын

    He's resizing the whole browser window.

  • @koranKarim33
    @koranKarim337 ай бұрын

    hi kyle I'm using your courses (java script and react ) for free because your the only one I love to learn from and also I don't have the money to pay for them, when I get a job and start make money I will buy the courses to give you your money because this is what should happend so are we ok ?

  • @gidi1899
    @gidi18997 ай бұрын

    Maybe I am out of line, but, Can a person use youtube video addresses to really build a replacement to the youtube website?! I am asking as a person with real difficulty handling changes in day to interfaces, my attention is a highly scares reasource that most websites abuse, making them unoperable for me. So a youtube site dedicate to minimize external input or placing external suggestions and options in boxes on a shelf, leaving the table very clean very the same year in year out.

  • @gidi1899

    @gidi1899

    7 ай бұрын

    btw, paying the website for a subscription sometime unclutters it, but in the case of youtube it added issues in playback unfortunatly. just imagin having stuff arranged your way .... one can only dream. programming is easy! learning other people's usage and arrangement of data is hard! that's why your video rings a loud bell.

  • @jsart_pl
    @jsart_pl5 ай бұрын

    How come you can preview color of 'hover:bg-secondary-hover' like at 12:45? Are you using some kind of VSCode extension for that? Edit: actually I just needed to add these lines to my VSCode settings.json file if someone stuble upon same problem : { "tailwindCSS.experimental.classRegex": [ ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"], ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"] ] } so it can work inside cva functions.

  • @mayankse

    @mayankse

    2 ай бұрын

    thanks bro

  • @aditya-gt5sv
    @aditya-gt5sv7 ай бұрын

    Hello all you developers should i continue in react or should i shift to nextJs 😢

  • @KILLCHRISU

    @KILLCHRISU

    7 ай бұрын

    if you know react you know most of next.js it's not hard to learn next if you know react. also, this depends on your location. do research on what people are hiring for in your area. there is no right or wrong answer

  • @aditya-gt5sv

    @aditya-gt5sv

    7 ай бұрын

    @@KILLCHRISU and how does the backend works 🤔 like i use nodejs, express to hit the request how does it works in next do i need to continue learning nodejs or expressjs

  • @paulbond8244
    @paulbond82447 ай бұрын

    👍👍👍

  • @tkrstore4334
    @tkrstore43347 ай бұрын

    Based

  • @PrinzEugen39
    @PrinzEugen397 ай бұрын

    i have difficulties understanding the content from minutes 45 and above lol. Welp i just learned react since September 10 so still my skill issue, and not really good at JS either

  • @legendsanimexy8217
    @legendsanimexy82176 ай бұрын

    Hey friends i am thinking about building a full KZread clone from scratch with all the main features ( including backend and frontend ) Would you like to join and make it together ? Its a lot of work to do for one person . Can we do it together

  • @abdikadirQulle
    @abdikadirQulle7 ай бұрын

    also thanks

  • @sergeisurin2963
    @sergeisurin29637 ай бұрын

    🔥👍🙏

  • @user-qb3be7gc1z
    @user-qb3be7gc1zАй бұрын

    19:53

  • @RishiRajxtrim
    @RishiRajxtrim7 ай бұрын

    👍💯💯

  • @christianarroyo3033
    @christianarroyo30337 ай бұрын

    There's always something new to learn isn't there... Okay guess I'll learn class variance authority now

  • @jenstornell
    @jenstornell7 ай бұрын

    And you put someone who really dislikes Tailwind on the thumbnail. 😮

  • @nongsoft5462
    @nongsoft54626 ай бұрын

    41:44

  • @nongsoft5462

    @nongsoft5462

    6 ай бұрын

    54:02

  • @nongsoft5462

    @nongsoft5462

    6 ай бұрын

    58:00

  • @nongsoft5462

    @nongsoft5462

    6 ай бұрын

    1:10:47

  • @nongsoft5462

    @nongsoft5462

    6 ай бұрын

    1:26:28