Tailwind CSS + Next.JS 13 Tutorial - Building the YouTube UI 🚀
HTML-код
- Опубликовано: 29 июн 2024
- In this video, I build the RUclips UI using Tailwind CSS and Next.JS 13. I build it entirely from scratch without any preparation to capture my raw thinking process when it comes to building UI’s.
✅ Tools and Concepts Covered:
🚀 Next 13 Fundamentals (Page Routing, Layouts & Global Components)
🚀 Tailwind CSS
🚀 Responsive Design
👉 Repo link: github.com/shadeemerhi/tailwi...
👉 Tailwind/Next setup docs: tailwindcss.com/docs/guides/n...
❤️ Tips & Donations Link: paypal.me/shadeemerhi?country...
( Thank you very much for your support!)
❗️ Please comment with any feedback, questions, or concerns!
👾 JOIN MY DISCORD FOR DIRECT ACCESS TO ME! I WANT TO HELP YOU! 👉 / discord
Timestamps
0:00 - Intro
1:25 - Next 13 Layouts and Global Components
25:20 - Top Navigation
1:23:28 - Side Navigation (React multi-select navigation)
1:58:18 - Video Components
2:31:18 - Outro 
Наука
I actually prefer this format where you don't have to explain every single beginner thing and just focus on your process. This is SUPER helpful for an intermediate dev like me, I'm hoping for more videos like this one! There are tons of videos teaching the basics but not a lot teaching the ACTUAL process of problem solving.
Really love your content, Shadee, you deserve a lot more recognition, keep it up!!!
Thank you so much for this feedback! I really appreciate it. These are probably my favourite types of videos to create so I'll definitely be making more 😁
I was just about to make the same comment, but it looks like @jvsvogler beat me to it!. This kind of videos really help us as Intermediate dev. So keep making this kind of videos.
Thank you. Done reddit and now this. Excellent tutorials, keep them coming !
Perfect timing Shad. Just what I needed! 😍
Amazing video as always 🔥 💯
Thank you bro 🚀 Hope to see some content from you soon ❤️
when will you be active again??
@@shadmerhi Hello Sir
about the Reddit clone, am still having issues with finishing the project because of the files and the upgrade to Next JS 13 there's a lot of changes, please do you mind up grading it or share resources how I can figure my way out thanks alot🙏
I loved this tutorial. Thanks for walking us through your process. Please do more of these in the future.
I’m glad you enjoyed it! I’ll definitely do more of these in the future :)
Hi, Really thanks it's super: < div classBeginner = { your Teaching simply it's good to understand }>
Loved the Video keep up the great work! Keep posting and I''ll most definitely check them out! Great introduction to Next 13!
Thank you for the kind words and the support ❤
Amazing video!!
Thank you so much! Glad you enjoyed
i love it !!! please upload more video
Thank you, uploading more soon!
Wow even does it live. Great stuff 👌
Thank you m8! ❤️
Wonderful as usual, plz explain everything in the projects from beginner perspective. Thanks
Thank you for the feedback!
Thanks @Shadee Merhi, for this fantastic tutorial. I really like the way you approach to solve a problem. It would be great if you could cover some Ecommerce projects in the future videos.
Thank you, I'm glad you enjoyed it! I've gotten lots of requests for E-commerce so I'll try to create something 😁
More! More videos please. on my way to full stack developer. Started learning what html,css,JavaScript, react is about around February now it’s April and need more videos like this for practice. Your explanation of tailwind helps me understand what the f*ck justify-content center does and how it’s different from align item’s center. Thank god web development is like maths ❤😅
Nice job bro I, i love your work. You are the best teacher for me on graphql❤ Can you please to another tutorial on graphql Express server and folder arrangement 🙏
Amazing content , in the future could you consider also doing this video style for a next js 13 crud application with prisma
🔥🔥
TailwindCSS is always Best choice !
Thanks alot
You’re welcome!
If you have not got it already, "ES7+ React/Redux/React-Native snippets" is the extension you need. BTW, always admire your content.
Thank you so much!! ❤️
Great stuff brother. I think you should've used the grid for yt items, they smoothly resize themselves according to space.
You're right, I had a feeling Grid would be better for it!
Great tutorial plz make more tutorial like this with using javascript
Glad you enjoyed it, more tutorials coming soon
is there a difference between using useRouter & usePathname and the built in feature next/Link? or is just another method to switch pages
this is fucking amazing sorry for my language
Hahahah thank you very much, glad you enjoyed ❤
es7 react react native graphql is the extension
What do you think about using tailwindcss for medium sized projects? Or do you prefe material UI
I would use Tailwind for any sized project, small all the way to XLLLLLLLLLL 😁
@@shadmerhiwhy
material ui is lighter than tailwindcss?
@@isaacjon I personally like the developer-experience of Tailwind over any other frontend component/CSS library/framework I've seen. I wouldn't worry about build size here. The only significant benefit Material has over Tailwind are the React components that come with it out-of-the-box; with Tailwind, you'd need to use an additional library (such as Headless UI, Radix UI, etc) for React components. Regardless, I would personally always choose Tailwind for the amazing dev-experience. Plus, Tailwind is waaaay more customizable; with Material, it's going to look and feel like a Google application, whereas with Tailwind, you can customize it as much or as little as you want 😁
Please make a crash course for prisma.
Thank you for the suggestion, I'll definitely consider that!
Hey, Where are you? Why you stopped doing videos. The content was amazing.
I'll be back soon! Thanks for the support, really appreciate it ❤
hey shad, What's the status of Fullstack finance program?
@@Girish415Hey there! Sorry for the late reply. I've unfortunately had to abandon this project in pursuit of other opportunties
@@shadmerhi That's sad to hear! Btw good luck with other opportunities 😃 l look forward to another banger on RUclips in coming days 🔥
why dont i have the app directory, i only have pages directory;
Go in next js config and activate it from there.. it's still in beta
Please make a social media website with firebase and next 13
Social media build is coming soon!
Please use react query, graphql , prisma and postgres,also jwt passport
@@shadmerhi Hopefully it has next 13 and firebase, with less complications
Continue like this, but explain stuff as you are teaching to a beginner
Gotcha! Thanks for the feedback 😁
Please increase fontsize of code in upcoming videos.
Will try my best - I'm already having a bit of a tough time fitting it all on the screen but I'll see what I can do. Thank you for the feedback!
@@shadmerhiNo problem brother you're providing knowledge for free that is kinda rare thing nowadays everybody wants to sell knowledge but people like you makes difference.
Please increase the font size
Will try my best - I'm already having a bit of a tough time fitting it all on the screen but I'll see what I can do. Thank you for the feedback!