Animated Responsive Navbar with CSS - Plus Other Useful Tricks

#css #html #tutorial

Install the quiz app 🤓

Use code lORhwXd2 for 25% off your first payment.

My VS Code Theme

- Atom One Dark
- vscode-icons
- Fira Code Font

[JamieMcI]

"I've got a fever and the only prescription is more Fireship!"

[strum]

You had me at, "you don't need Bootstrap"

[kubiatmorgan]

Amazing content!

One of the few people that actually explain the "why" not just the "what".

Your videos are absolutely amazing!

[maxix]

This dude is insane you learn so much in 10 mins and he speaks fast yet so clear that you can wrap your head aroudn what he is saying really quickly, thank you so much man. Seriously, greetings from Venezuela.

[brodyf]

I love the pacing. This is a great, straightforward tutorial. Thank you!

One note for others watching: Make sure the main element has a bottom margin for the small screens. Otherwise, content will get hidden by the navigation.

[cadeheinberg]

Since this video leaves out alot.. I am compiling a list that you should look at if you are stuck so far:

SVG:
simply just download the icon as an svg and open the file in a text editor to get the <svg> tag they have

GEAR ICON NOT GOING TO BOTTOM:
set the "height: 100%" in .navbar-nav{}

ICONS GET TOO BIG WHEN NAVBAR EXPANDS:
add "width: 2rem" in .nav-link svg{}

[TheElkster]

I make myself sit through so many You Tube tutorials, and generally like gain a lot of good info from most of them - but the way this tutorial has been put together is on another level! I love the way that you cover all these great points in such a short amount of time. It allows me to follow along in no time at all - and if I need to go back over anything - I can just hit rewind!!! Many thanks for sharing! ;)

[kingstrikers]

Absolutely love your content! It's so applicable, straight to the point, and understandable.


(hopefully) constructive feedback: During the section around 6:05 it might be helpful to do a split screen view of vscode and the browser to see how each individual property changes the layout. Your voiceover is spot on. but seeing the code, browser, with the voiceover would be the holy trinity of learning.

[xhaiii]

-"You don't need bootsrap"
Me: hold up that's illegal

[samjaklic]

This is phenomenal. As a backend developer dipping my toes into UI design, this is so enlightening to watch. Thank you for displaying what can be accomplished by leveraging only base CSS and a monumental amount of creativity and knowledge.

[MrRset]

One of the cleanest, straight to the poiny and best tutorials Ive seen so far.

[victormonteirocunha]

Must say, I'm a PHP dev and have been so since I fell in love with programming (around 7 years ago) and I thought that'd be the language I'd study forever, despite the growing relevancy JS has kept gathering. Among many things, this channel eliminated much of the prejudice I felt torwards Javascript and frontend, with a coherent content and many tips that get me excited to mess with JS. Thanks for the excellent channel! Love from Brazil!

[Aryevang]

This is the way most tutorials should be, simple, precise, with a good example and a link with the source code. Congratulations from the Dominican Republic.

[tejas]

Dude, I am out of words for you. I mean, a newbie can come to your channel, learn full-stack web development in 1 single day and make responsive full-stack web-pages within minutes!! 👍 I am new to web development and all these short videos are just making my day. I am more focused on the front-end than on the backend and I feel like I just landed in the perfect place to start. Thanks a lot, dude I don't know what I would do without these underrated amazing videos.
Lots of love 🥰

[DSAntrat]

If only you had been making content when I took my only programming classes in college maybe I would have enjoyed it more and gone into this field even sooner than I had. Really nice refreshers on front end dev for a back end dev suddenly being thrust back into the front end.

[mauriciabad]

Animating the width and filter properties may cause choppy animation in low end devices.
To make it smooth everywhere I suggest:
1. Instead of filter, duplicate the SVG and overlap them. The one below with the filter and the one in top with color. Then simply animate the opacity in the top one.
2. Fix the width of the bar and with transform move it to the left making it look narrower. Position fix the icons and add a padding-left to avoid overlapping. Set the opacity of the text to 0. On hover just animate the translate and opacity properties.

Great video!

[xfuttex]

All your content is amazing! Explaining everything so well without it being either to fast or slow. Great video quality as well! Love the channel.

[dharmang]

Yes thank you so much. This would help me a lot :D 👍🏻

Edit - I tried writing this code and see what it does line by line. But the output is a bit different than yours due to you skipping some variables. Need to have a look at the code.

Anyways thankyou ❤️

[Techusiast]

I thought I was pretty good at CSS until I watched this, learned a few new tricks. Thank you and keep up the awesome work!

[cymonevo]

I learn a lot of things in just 10 minutes with your video. Much faster than reading / learning the doc. What an amazing explanation! Well done!