Building Tailwind CSS Navbars - Responsive Too!
HTML-код
- Опубликовано: 2 июн 2024
- Let's build Tailwind CSS Navbars. We will talk about overall strategy in building responsive navbars and also mobile navigation with Tailwind.
CodePen: codepen.io/chris__sev/pen/QWG...)
In Video: Chris Sev ( / chris__sev )
0:00 Introduction
1:05 Nav Structure
2:30 Nav Container
5:27 Nav Contents
6:48 Logo
9:16 Nav Items
16:51 Centered Nav
17:44 Mobile
26:12 Conclusion
To learn more about DigitalOcean: do.co/3XUjxDs
Follow us on Twitch: / digitaloceantv
Follow us on Twitter: / digitalocean
Like us on Facebook: / digitaloceancloudhosting
Follow us on Instagram: / thedigitalocean
We're hiring: grnh.se/aicoph1
#webdevelopment #javascript #tailwind #css #tailwindCSSnavbars #tailwind #CSSnavigation #tailwindCSSresponsive 
Наука
![Roddy Ricch - Survivors Remorse [Official Music Video]](http://i.ytimg.com/vi/J5IeFzr2GgE/mqdefault.jpg)
You win the prize in category: 'Amazing explanation of CSS design and tailwind'. Seriously, the value here for someone who maybe know react and is technical but needs to catch up on CSS is immense. The thinking process between the lines you say loud is key to to learn fast. Most people doing these vides do not get it I think.
Man this was super helpful. A lot of tutorials throw a mountain of stuff at you by cut/paste and “trust me bro, it works” approach. This helped me see the strategy of how to develop and the approach to using tailwind to position and style things. Easy sub!
I was having a hard time with Tailwind CSS but this tutorial just shows me the scope of it.
Great video
Great video!
I hope we can expect more videos about building Tailwind CSS components!
Definitely one of the better (short) Tailwind tutorials on RUclips. Thanks 🙏
Excellent presentation on Tailwind classes relating to build a responsive nav bar. Thanks!
This is absolutely amazing. Not only learned Tailwind, strategies, how to design, why you weren't happy about some styles and how you dealth with them, all the way you coded I learned really a lot. Wow video, this has all benefits watching live coding. Thank you very much!
Thanks for this excellent video! I'm a back-end developer, trying to decide on a front-end framework. Your video made me want to use Tailwind!
This is my first time commenting on a RUclips video tutorial because this is so goooddddd! I must watch your other tutorials and I can really say I will learn a lot from you. I've never imagined this to be so simple! You made it look so easy to do! Great JOB!
neat explaination Chris! always good to strategize before diving into implementation. I will be using your approach often.
The best navBar tutorial I've EVER seen. Gj Bro.
The use of the and elements are good practices in terms of accessibility.
With them, screen reader users have feedback on how many elements of the same block exist and what they can do to interact.
Thank you so much for explaining the strategies I love your teaching style. Yes, please make a video on more robust production-friendly menus!
"Google does it so it's ok" is not a valid reason to ignore accessibility in 2023. If you're not going to use tags for nav links (although it is helpful, but not really necessary) then for the love of god, at least use tags for navigation, it's as basic as it gets. As someone who occasionally uses a screen reader, we shouldn't teach new developers to use tags for everything without a single thought behind it.
Outside of that it's a good tutorial, better than most. A lot of tutorials just throw one thing after another at you with no explanation and all you know at the end is how to recreate the exact copy, not make something on your own. You actually take the time to go into detail and explain things really well. Great job.
Super quality content right there! Thanks.
I've been avoiding making my own nav for forever since I used to have bootstrap do it for me but I've been trying to get a handle on tailwind. Thank you
the algorithm brought me here, really like your style and presentation man! Keep it up.
Same!
Very nice, succinct and easy to follow. Thank you! Just wondering if using tailwind allows us to use a strategy where we dont use a duplicate menu. To have the desktop menu items change on mobile as opposed to have two completely separate menus.
Excellent tutorial!!!
nice tutorial dude tnx!!!!!
Awesome job, i would use section once before divs. Like section id is main nav n mobile nav
This video helped me a LOT, very well explained, easy to understand your reasoning, perfect video :) :)
Absolut great!!
Could you tell me/us we can dispay some text under the logo-image too?
The Codepen link throws a 404. Is it possible to get the example somehow?
I like your style and I’ve subscribed to your channel.
The only thing I don’t like about this video is you have two different navbars, one for full screen and one for mobile devices.
I always try to avoid having duplicate information to avoid problems down the road.
Smart approach, Bill!
@@DigitalOcean It can turn into an issue if the navbar is big with a lot of links.
I’m learning Tailwind and your video helped me move forward.
Great Video but I need one help. When the hamburger gets open I want it to replace with X (close) icon, Can you please tell me how to do it? When are you going to make other video for different navigation styles? more complex ones as well as which includes dropdown, social icons etc....
outstanding
thanks, just newbie with TW and give me a the ideas to approach this and refactor my code, i was doing a lot of work with js to show the mobile menu, and with hidden and breakpoints is just easy
thank you man
THANKU SO MUCH
Hi there, this is first time i discovered your channel with this video and I instantly liked your style! However, I was side by side practicing in my VS Code on my project and till the part where CSS was bring used I was following (my css code is inside my xxx.js file in return() and it is working as is here) however introduction of js from @24:00 when I implement it crashes when i use it, gives a null error if i start with the js script with it, however if i start my server first and then use the js code it works! What am I missing?
document.addEventListener("DOMContentLoaded", () => {
const btn = document.querySelector("button.mobile-menu-button");
const menu = document.querySelector(".mobile-menu");
btn.addEventListener("click", () => {
menu.classList.toggle("hidden");
});
});
This is what you need.
Liked it.
thank you
the heck?
so we still have to use JS for the hamburger menu thingy?
bummer :(
By the way, this was an amazing video!
Even though I have been working in tailwind for the past 4 months, it was mostly just copy pasting codes
Glad that you talked about the logic behind why you wrote those classes the way you did.
can't we bypass the hamburger menu thingy from using javascript
Helpful
Thanks❤🙏🙏 dude
Thanks, thanks
Can you add accessibility?
from @24:00 how do I use it in my vs code, it gives me a a null error if i start my script with this js code in it, however if i implement it in an already started server, it works. What am I missing?
6 months later and still no response.
Thanks for the tutorial. Codepen link is broken.
source code?
My digital ocean account is locked please help me regarding this
lol
404 codepen T.T
My digital ocean account is locked please help me
lol
u use so weird font that i even cant find what u typed
iam backend developer and i hate to create UI
bummer!
Tell me about it!