I'm a long-time full-stack dev, but trying to learn Tailwind in as close to a mostly real, high-quality app. I'm halfway into running through this in a Nextjs app and it's super helpful. Thanks for the great video!
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!
It'd be interesting to attempt to convert from tailwind to vanilla css, as a front-end exercise. Excellent tutorial. I'm sure youtube doesn't prefer it, but these long-form "beyond the basics" vids are really great.
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
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)
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. :)
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.
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..***
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
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.
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
@@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
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
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
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.
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.
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.
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
I'm a long-time full-stack dev, but trying to learn Tailwind in as close to a mostly real, high-quality app. I'm halfway into running through this in a Nextjs app and it's super helpful. Thanks for the great video!
写的真好，看似不怎么复杂的功能其实包含了这么多细节，而且up把react和tailwind css的功能发挥的淋漓尽致啊。仔细学完这个教程能学习到很多
Just brilliant. It has sat in my queue to watch for two months, and it was worth waiting for.
This is by far the most dense tutorial I have ever watched and its awesome. Not a single wasted second! 🤓
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!
😅🤣
WTF! How many tips and tricks in a such small video. Awesome content. Surely one of the better I ever seen
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.
the goat 🐐
It'd be interesting to attempt to convert from tailwind to vanilla css, as a front-end exercise. Excellent tutorial. I'm sure youtube doesn't prefer it, but these long-form "beyond the basics" vids are really great.
I am impressed by the quality level of this tutorial. I think it is the best one I have seen
I'm already excited to watch it! 😀 Thank you, Kyle!
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
I learnt so much from this that I've been applying at my job every day - thank you so much!
I strive to be 10% of the programmer you are man, great tutorial!
The fact that we have the same RUclips recommendations 😭❤️❤️
This CVA blowed my mind, thanks for another amazing video 💪💪👏👏
Just cannot find words...
Perfect job.
literally waiting for this
This tutorial is sooo brilliant, for a beginner like me it's so detail. Thanks for the insights throughout the tutorial ^_^
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)
Amazing job! Love your content, keep doing videos like this one!
I just want to say that i love you bro 😭
5:28 PageHeader
32:39 main section
Bro really respect what you do
Good video! Thanks Kyle as always 👍
Ur as good as Mr Powell, ur da GOAT man
Why does the observer object of the container react to the transition property? Where does the width and height get changed?
this is gonna keep me busy tonight
timestamp 33:00
🤯 Perfeito!!
Ficou muito bom, parabéns!!
Seu conteúdo é realmente muito bom!!!!!
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. :)
Great Tutorial. Hope to see more.
So i have a question why you would choose "type" instead "Interface"?
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.
exactly what I thought, did you found an answer?
Bro never give up
Awsome tutorial. Good Job!!!
Superb. How I wish I was good at tailwind/css in general.
Thank you Kyle! Anyone know why flex instead of grid was used for layout of NavBar, SideBar and Main content? Cheers!
Because flex is usually more flexible
Can you add all functionalities like "like", "comment", "share"?
that has been done, with database
ruclips.net/video/lyNetvEfvT0/видео.htmlsi=2xBnWoAM33JDYLo0
Great as always!!
I love this video please continue to other page
Replayspeed 0.75 🤝
Real GOAT 🐐
So, what is the pre-requistes of the video, do we need to know typescript or tailwind css to create this project!!
He's using them so most likely
You don't need to know TypeScript as it is used minimally, but I would recommend being familiar with the basics of Tailwind.
hey, great video! what extensions do you use for autocomplete tailwind? nothing works for me with this autocompletion
Same here. Do you have any idea how to enable that feature? It's so frustrating to manually type all those classes.
Nice video as always!
Absolutely amazing video!
The video is really great
Please create more such videos
Great tutorial full of tips, thanks man :)
you are great ,you give us the best
what's the purpose of using resizeObserver? i did it without the resizeObserver and it works
Thank you! I really enjoyed your video
I see that Tailwind so popular now, but what do you think about material-ui?
material ui has overcomplicated things, tailwind keeps it simple and effective and hence more popular.
Your a Genius !!!
Wow...!!!!! Thanks
27:33 the hidden property Do not work You can use className=" invisible md:visible md:flex "
preview play is not working when i used youtube api to fetch videos. can you help?
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..***
Ty Kyle
Wonderful video! Thanks
Nice one! Thanks!
max-h-screen and other Tailwind CSS classNames seem to be ignored/have no effect - do I check the tailwind.config.ts file?
Perfect dude thanks you so much
41:44
54:02
58:00
1:10:47
1:26:28
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
Apparently its only happening on Vivaldi browser, because the shadow dom expanding on the top left of the screen. weird stuff
The Sidebar on small screens needs to transition smoothly which currently isn't, can anyone guide how to do it as it seems tricky.
Thank you very much.... this was amazing
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
Adobe Illustrator is more than what you are looking for.
It was a really great project
how do you have those two different windows automagically change their sizes to fill the screen while changing the other ones size?
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.
Amazing content! 😊
My face when I finally reached the end of the video...
Looks easy but it's not, it can take days for me make this kind of clone.
Great effort 💪
Awesome video 🔥
HOW WOULD THE SAME CATEGORY PILLS BE IMPLEMENTED IN NEXT.JS? Is this parallel routing?
Thanks.
How your color visible in line 3 at 12:29 ?
It would be great if you could also add recommendation system for videos ml model
ml has nothing to do with web dev
спасибо за видео
why can you import Menu so quick? what have you install?
Hello all you developers should i continue in react or should i shift to nextJs 😢
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
@@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
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
❤🔥
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
The Next.js content should go live by the end of this year
How do you resize your chrome without having to use dev tools?
He's resizing the whole browser window.
👍👍👍
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.
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.
Try make a recommendation system on your project
1.6k+...Thanks mate
Based
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.
thanks bro
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
Please make video on server less
12:35 i am not getting the auto completion over there
please make the tutorial for the backend
All the major companies are dropping type script. So can you make vixeo with JS.
👍💯💯
Could you make a minalistic spotify player with latest technologies
Why isn't Daisy UI used more?
You could even say that you build it with ViteJS in your title :)