Building Tailwind CSS Navbars - Responsive Too!

[@freshhorizonswithjakub]

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.

[@mschwanitz]

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!

[@senatrius]

"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.

[@licokr]

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!

[@BrunoPulis]

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.

[@BrettKromkamp]

Definitely one of the better (short) Tailwind tutorials on KZbin. Thanks 🙏

[@marysoil3209]

This is my first time commenting on a KZbin 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!

[@gamer_monk]

I was having a hard time with Tailwind CSS but this tutorial just shows me the scope of it. Great video

[@danhodgins4015]

Excellent presentation on Tailwind classes relating to build a responsive nav bar. Thanks!

[@Kirsehirli40able]

Great video! I hope we can expect more videos about building Tailwind CSS components!

[@ashwah]

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!

[@alishahmansouri9530]

The best navBar tutorial I've EVER seen. Gj Bro.

[@jaitjacob]

neat explaination Chris! always good to strategize before diving into implementation. I will be using your approach often.

[@jtunstopable]

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

[@DrinkingGin]

the algorithm brought me here, really like your style and presentation man! Keep it up.

[@litergame]

Same!

[@shinebayar]

Super quality content right there! Thanks.

[@joshuacash2463]

Thank you so much for explaining the strategies I love your teaching style. Yes, please make a video on more robust production-friendly menus!

[@cristobalbenjamin196]

OMG INCREIBLE, MUCHAS GRACIAS!!!

[@lancen6805]

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.

[@Antebios]

Excellent tutorial!!!

[@AlThePal78]

Awesome job, i would use section once before divs. Like section id is main nav n mobile nav

[@aamirnasir1091]

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

[@MarkConstable]

The Codepen link throws a 404. Is it possible to get the example somehow?

[@randolphcarter8283]

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

[@gr1msasor14]

nice tutorial dude tnx!!!!!

[@appstuff6565]

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?

[@appstuff6565]

6 months later and still no response.

[@Sinha.ritesh]

outstanding

[@nialmadev]

Absolut great!! Could you tell me/us we can dispay some text under the logo-image too?

[@microspacer]

Can you add accessibility?

[@appstuff6565]

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?

[@crystinecullen3031]

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.

[@agamurat3019]

thank you

[@BillElgin]

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.

[@DigitalOcean]

Smart approach, Bill!

[@BillElgin]

@@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.

[@ramyakrohanmohanty9895]

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.

[@QuranDemystifiedRD]

can't we bypass the hamburger menu thingy from using javascript

[@ishimweanna7904]

Helpful

[@7073shea]

thank you man

[@xcr6436]

THANKU SO MUCH

[@NikolaDjordjevic-n4o]

source code?

[@ogbillity]

Thanks for the tutorial. Codepen link is broken.

[@sistana]

Thanks, thanks

[@caioitalo3618]

This video helped me a LOT, very well explained, easy to understand your reasoning, perfect video :) :)

[@arjunkhanal9163]

Thanks❤🙏🙏 dude

[@piyushkumardongre5873]

Liked it.

[@abhishekshukla8716]

My digital ocean account is locked please help me regarding this

[@Mogwai88]

lol

[@abhishekshukla8716]

My digital ocean account is locked please help me

[@Mogwai88]

lol

[@kacperkepinski4990]

u use so weird font that i even cant find what u typed

[@BalkanLeaksArchive]

iam backend developer and i hate to create UI

[@DigitalOcean]

bummer!

[@ashwah]

Tell me about it!

[@arsnohachikoi1767]

404 codepen T.T