Agreed.. it's very addictive.. often i just want to sit back and enjoy Jeff's tutorials like relaxing when watching Netflix which means I don't actually do any practice I just enjoy and relax.
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.
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.
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.
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.
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.
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!
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 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{}
how did he make the media query react while in responsive mode in chrome? it doesn't work on mine, and only works when I resize the browser window itself
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! ;)
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!
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.
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 🥰
First of all, thank you! Awesome video, very helpful on getting a good grasp on CSS. I'm about halfway through the tutorial, and I'll finish it soon, with some minor adjustments to customize to my taste. However I went ahead and give the final product a go from github, and noticed that the sidebar had these ugly scrollbars in it (in google chrome). So I checked the CSS for something overflow related and found that the .navbar class had an "overflow: scrollbar;". Removing this line solved the issue for this supersexy responsive navigation tutorial. (Sorry if this was already mentioned before)
These videos that demonstrate functions, problems and ideas are just plain better even for a semiexperienced programmer because they keep a person so much more engaged
Bruh, I started my project using bootstrap and was very excited thinking that it would improve development but it started to slow me a bit cause I knew nothing about it. I've actually learned a lot reading the docs and watching the live styles on the developers tab, but then I thought if it's taking me so much work and time to learn and adapt to this framework, why not just do it myself? This comes very handy. Thanks. Luv ur vids
This is beautiful! It always bothered me to import bootstrap in every single project just for the navbar and grid. I started reconsidering it. Thanks! :)
I m here for the same problem, i have plenty of responsive navbars with bootstrap, but everytime it s a mess using all the classes and personalizing them, I m trying to find a final solution to have things simplier faster and customizable
Dude, you need to do more videos, almost every developer that does tutorials out there, won't help you 1 bit, and here you are helping me out with me very first paid project :)
Fireship has become my favorite tech-oriented content channel. Diverse content (that contains more than your average react.js d*ck-riding, ugh). Thanks for this nice tutorial! Would have been helpful a while ago, but I can use this on my new project~
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 ❤️
YES! Love it! Up next, how to change theme of the navbar then after that, instead of showing the full name of the menu item upon hover, how about showing a tool tip with the name of the menu item. That would be nice.
When youtube recommended me "Fireship" you had half a million subscribers, and now it have 1m+ subscribers. Congratulations bro. Love the way u explain things in short time.
Great video! 👍 This also made me realize I can target the last-child and set its margin to auto in order to separate items, instead of always using extra container divs with space-between.
@@Fireship can you do a similar thing in css grid so you don't have to do a lot of media queries for the height of the main content based upon header and footer height?
Great video!! A definitely life saver for non web devs as well. I struggled with my toolbar on my website. Will definitely be using some of the things you mentioned in here. thanks for the great content.
Can someone explain, why we use min-width instead of width at 6:39 ? If I use width I later get problems with the transition expanding the navbar. The moment the navbar extends to the right, the svgs are also scaling from zero to 2rem. Why does the transition affect them? They are not in the same class, nor do I change their size...
@@deepsarkar8666 Why did he used the min-width? There was already code for larger screens. Does he use that code (min-width:600px) for the landscape orientation. Then, I think it should have been covered too from the main code??
Please PLEASE PLEASE keep making "absolute minimum" tutorials like this one, you know, things that accomplish something in the absolute simplest way Thank you
When you said I need to slow down the video, I instantly subscribed. Cause other places I keep increasing the speed of the videos , little content but duration one hour!!!
Beautiful. Thank you for that one. Quite informative stuff, explained perfectly. Would love to see a vid on JS code optimization basics (how to deal with time out when looking for a value in a huge array , or just general info on how to work with such arrays). Thanks!
So first off love the 100 second series and several of the others. This is exactly what I need to brush up on things. More demos where we can make small super simplified products! Great work!
Font Awesome has a teensy little Download button when looking at an icon that lets you download the svg code. All Fireship did was format it to be more readable, as well as nesting it into a list tag to make it work with the navbar. Also, he nested a tag between the tagsto include it into a class for the icons. I got it through some minor digging and experimentation.
i found a solution: basically, you just have to download or create an SVG icon file then take its path and read it on any text document apps then get the d stackoverflow.com/questions/11529470/is-there-a-tool-to-create-svg-paths-from-an-svg-file
Faz o download do svg, abre com o chrome, clica com o botão direito e seleciona a opção "View page source". Aí é só você criar duplicar o , colocar class="fa-primary" no primeiro e class="fa-secondary" no segundo, e em seguida inserir dentro da tag .
@@rc3043 You can download the SVG files directly from FontAwesome's website and import them into your projects. It's a little hard to see, but when you select an icon from their gallery, there's a small download icon near the bottom-right of the page title.
Great video! Quick question though: Usually animating the width property of an element is ill-advised because it requires the browser to calculate the layout for every step, as opposed to a propertie like transform where the calculation is much later in the pipeline during the composition step and therefore much cheaper. Is this counteracted here by the fixed position or would you agree it's not ideal?
my .nav-item:last-child set to margin-top: auto; wont make the last item go to the bottom of the nav bar. Is there something else i need to do. I've set the nav-item width to 100% already.
@@xi_red4936 yo it’s been awhile since I fixed this problem give me like 6-8 hours and I can go back and figure out how I fixed it. Reply to me in like 5 hours so I remember how I fixed that old code.
@@Fireship keep up with these straight to the point tutorials ;) I love how much value can be crammed in such a short amount of time. You're the best in that aspect in my opinion :)
Not sure if you will see this however, I was wondering if you could explain how to change the svg images or whatever, very new to code and cant figure this out
IMPORTANT: ::-webkit-scrollbar is only available in Blink- and WebKit-based browsers (e.g., Chrome, Edge, Opera, Safari, all browsers on iOS, and others).
Congrats! Absolutely amazing tutorial! It's the first video I'm watching from you and subscribed right away. Good explanations and also really good English!
Did you define it in :root { } selector? And as the other comment mentioned, when using it you have to use var(--var-name). :root { --text-primary: #369; } body { color: var(--text-primary); }
If you have having issues getting the navbar to bottom:0, change navbar from position: fixed to position: absolute !important and if navbar-nav displays in a column when small screens are active add !important to flex direction : row. Not sure if the problems I had were because of other fixed elements or not but I thought I would pass it along just in case. Love this navbar btw!!!
MAN! The explanation along with the visual presentation, it's just amazing! There are very few people who makes such videos. Thumbs up, man! Like your content. Keep up! :)
This is one of the best tutorials I've watched on YT. Thank you! PRO TIP: Make sure to include .navbar {overflow: hidden;}, so that, in the 200ms while the navbar is expanding, the text and logo inside the navbar will not prematurely overlay onto the rest of the screen outside the bar.
Now these videos I like. It's only taken a year to find thanks to RUclips algorithm not showing it to me. Many thanks, this will help loads with a site I am building.
This is how I see things when I see all of you nice youtubers out there: Dev Ed - pretty good, honest, I learn all the beginner stuff from him, I feel like I have a connection with that man idk why maybe because he's romanian as well. Traversy Media - very good, has a big fucking channel holy shit I learned so much from him, the fact that he was addicted to some opies and now he's so successful and good at what he's doing MOTIVATE the shit out of me (I have addiction problems as well). Fireship - G-O-D TIER, dude you made my MIND go brrr brr brr, you're barely hitting 400k subs (congrats btw) BUT YOUR TUTORIALS ARE GOD TIER, PRO QUALITY, VERY NICE TRICKS, VERY GOOD CODE, ETC. You deserve more then you have, you made some of us here now work, literally, your videos make me wanna open up visual studio and just code along you. Good job dude!
You're the only channel, I've watched that explain every single line of code. Keep doing it and you will surely help a lot people! Rem: 5*16, I just had an idea about this lol!
First of all, guys, thank you for all your videos. Your js tips were very helpful while i learned that. And know you made css content! Pls keep doing these videos.
Cool video man. Some beginners might find it an quick so I like that you addressed that in the intro. Also, I really like your teaching style! Thanks for the good content I, as well as others, appreciate it! 🙏🏽
"webkit-scrollbar" selector only works in webkit based browsers AFAIK, and isn't standard according to "canIuse"; seems like the W3C has nothing around styling scrollbars defined in the standards though... If you want to support Firefox (and IE depending on your requirements) it'll require a skosh more CSS &/or the inclusion of a scrollbar JS library for consistency cross-browser. Really awesome video notwithstanding. Was looking more-or-less for exactly this for a nested menu bar on a site I'm working on. Really clearly & concisely presented.
"I've got a fever and the only prescription is more Fireship!"
Agreed.. it's very addictive.. often i just want to sit back and enjoy Jeff's tutorials like relaxing when watching Netflix which means I don't actually do any practice I just enjoy and relax.
I literally have a fever right now and I’m binging fireship
@@benjaminjameswaller thats like totally fine atleast u r watching something productive
Amazing content!
One of the few people that actually explain the "why" not just the "what".
Your videos are absolutely amazing!
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.
You had me at, "you don't need Bootstrap"
Bootstrap is excellent
Bootstrap is great for a simple layout but you can't really style anything except for colour changes.
@@kongenerkasper what? You can practically style anything
@@supagoon8 Yeah but why bring in a bloated styling library when you can make it yourself with more flexibility and control?
@@Justin73791 it’s not bloated ? But if that’s how you feel that’s fine .. we can have different views on that
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.
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.
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.
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.
+1
++1
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!
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 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{}
bro u are a saviour, I spent almost an hour trying to edit the icons. Thanks a mill
Thanks for the last one I couldn't figure out what was causing the icons expanding with the navbar
how did he make the media query react while in responsive mode in chrome? it doesn't work on mine, and only works when I resize the browser window itself
Perfect! Thank you very much :)
PLEASEEEEEE MAKE THISSSS KINDAAAAA CONTENT MORE!!!!!❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️
Also please tell us the trick that you use to paste the code in your tutorials...like it's super awesome...
@@abhinav.sharma It's just a simple delete in reverse, then ctrl+Z
I thought so...but then I was like...maybe there'd be another way...
Anyway...you just sync it soooo well man...
Yeah dude, this kind of things gets you instant subscribers.
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! ;)
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!
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.
One of the cleanest, straight to the poiny and best tutorials Ive seen so far.
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 🥰
First of all, thank you! Awesome video, very helpful on getting a good grasp on CSS. I'm about halfway through the tutorial, and I'll finish it soon, with some minor adjustments to customize to my taste. However I went ahead and give the final product a go from github, and noticed that the sidebar had these ugly scrollbars in it (in google chrome). So I checked the CSS for something overflow related and found that the .navbar class had an "overflow: scrollbar;". Removing this line solved the issue for this supersexy responsive navigation tutorial. (Sorry if this was already mentioned before)
Thank you!
Thank you :D You should make a pull request on his github
These videos that demonstrate functions, problems and ideas are just plain better even for a semiexperienced programmer because they keep a person so much more engaged
I have never learned more CSS from any video before. This was amazing! Thanks :)
I think comfortably I can say I met a Guru on HTML & CSS. Hats off man!!! Thank you so much!
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!
Bruh, I started my project using bootstrap and was very excited thinking that it would improve development but it started to slow me a bit cause I knew nothing about it. I've actually learned a lot reading the docs and watching the live styles on the developers tab, but then I thought if it's taking me so much work and time to learn and adapt to this framework, why not just do it myself? This comes very handy. Thanks. Luv ur vids
I'm so glad I found a channel with such an amazing content
Thank you! Welcome to the channel :)
Where the fuck has this channel been my entire programming journey? I refuse to skip videos from here on out because the content is so solid.
I like this style of videos a lot!
This is beautiful! It always bothered me to import bootstrap in every single project just for the navbar and grid. I started reconsidering it. Thanks! :)
CSS grid over bootstrap
@@raknos13 anything is better than bootstrap
I m here for the same problem, i have plenty of responsive navbars with bootstrap, but everytime it s a mess using all the classes and personalizing them, I m trying to find a final solution to have things simplier faster and customizable
Dude, you need to do more videos, almost every developer that does tutorials out there, won't help you 1 bit, and here you are helping me out with me very first paid project :)
Fireship has become my favorite tech-oriented content channel. Diverse content (that contains more than your average react.js d*ck-riding, ugh). Thanks for this nice tutorial! Would have been helpful a while ago, but I can use this on my new project~
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 ❤️
it is actually very nice to see you do more css content for the moment before switching back to javascript.
Great content!
YES! Love it!
Up next, how to change theme of the navbar then after that, instead of showing the full name of the menu item upon hover, how about showing a tool tip with the name of the menu item. That would be nice.
I like that idea! There are plenty of ways to might improve the current demo.
When youtube recommended me "Fireship" you had half a million subscribers, and now it have 1m+ subscribers. Congratulations bro. Love the way u explain things in short time.
Great video! 👍 This also made me realize I can target the last-child and set its margin to auto in order to separate items, instead of always using extra container divs with space-between.
Thank you! margin:auto is super useful in flexbox.
@@Fireship can you do a similar thing in css grid so you don't have to do a lot of media queries for the height of the main content based upon header and footer height?
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!
My Zeus, this is the most amazing channel ever! Every wanna-be Web Dev's dream!!!
To the point yet so thorough. Please do more of this content, you earned a subscriber!
Thank you! Welcome to the channel 😁
Great video!! A definitely life saver for non web devs as well. I struggled with my toolbar on my website. Will definitely be using some of the things you mentioned in here. thanks for the great content.
I got annoyed by how you was explaining EVERYTHING but then I realized how great this is xD liked and subscribed ;)
I very rarely comment on videos on RUclips, but this one is really amazing, thanks a lot!
Can someone explain, why we use min-width instead of width at 6:39 ? If I use width I later get problems with the transition expanding the navbar. The moment the navbar extends to the right, the svgs are also scaling from zero to 2rem. Why does the transition affect them? They are not in the same class, nor do I change their size...
Boarding fireSHIP is awesome. Thanks captain for such a quality content. 🔥🔥🔥
You are the coolest HTML-CSS'er I have seen in my life by far.
I've had to set overflow to "auto" on the navbar, on "scroll", it seemed to be active even when not overflowing, leaving a permanent scrollbar.
Set overflow to none
@@deepsarkar8666 Why did he used the min-width? There was already code for larger screens. Does he use that code (min-width:600px) for the landscape orientation. Then, I think it should have been covered too from the main code??
I've had this on my 'to try' list for ages and finally did it today. Such a great tutorial. Thank you!
New to the channel. Amazing content brother!
Welcome 🍰 and thank you!
Please PLEASE PLEASE keep making "absolute minimum" tutorials like this one, you know, things that accomplish something in the absolute simplest way
Thank you
Amazing video, do git in 100 seconds
That is on the list, I want to do a whole collection of git in 100s videos.
@@Fireship Good thinking, git deserves many videos with advanced features.
Done ruclips.net/video/hwP7WQkmECE/видео.html
@@Fireship
Hi!
How to make your navbar in your website
@@evan.5967 you can look at the source
When you said I need to slow down the video, I instantly subscribed.
Cause other places I keep increasing the speed of the videos , little content but duration one hour!!!
My new favorite channel. Looking forward to more content.
Ps, audio at start and end is a bit scuffed
I love you make videos this short. I actually took some time to follow along but the fact that is so short doesn't make it look to intimidating!
-"You don't need bootsrap"
Me: hold up that's illegal
Was just wandering along to see some nav tutorials.
When I saw it till 3:00 immediately subbed Fireship.
Awesomeeee!!!!
Beautiful. Thank you for that one. Quite informative stuff, explained perfectly.
Would love to see a vid on JS code optimization basics (how to deal with time out when looking for a value in a huge array , or just general info on how to work with such arrays). Thanks!
Thank you! Interesting suggestion, I've considering doing some algorithm implementations in JS.
@@Fireship have you done it yet?
So first off love the 100 second series and several of the others. This is exactly what I need to brush up on things. More demos where we can make small super simplified products! Great work!
Could you please do a tutorial on svg? I'm so lost trying to add my own icons
stackoverflow.com/questions/11529470/is-there-a-tool-to-create-svg-paths-from-an-svg-file
Really appreciate your fast speed bro, others treat us like seven years old.
It's hard to figure out how to implement the svg with duotone into the html without deeper explanation.
Exactly what I was thinking.It just poped out of nowhere, with no explanation..
Could you explain how it works I cant figure it out
Font Awesome has a teensy little Download button when looking at an icon that lets you download the svg code. All Fireship did was format it to be more readable, as well as nesting it into a list tag to make it work with the navbar. Also, he nested a tag between the tagsto include it into a class for the icons. I got it through some minor digging and experimentation.
i found a solution: basically, you just have to download or create an SVG icon file then take its path and read it on any text document apps then get the d
stackoverflow.com/questions/11529470/is-there-a-tool-to-create-svg-paths-from-an-svg-file
@@John-yu6to Still can not find it. Where is that download button which gives you back this kinda code? (like the )
I learned more CSS in this video then I did in my last internship. Great stuff!
already great:
- "Let's push it further."
me:
(silent open mouth)
🤣
Wow! This is SO COOL! I'm amazed at what CSS allows competent programmers to do!
How did you use the svg font awesome inline icons? When I go on their page there is only the option...
I had the same problem
Faz o download do svg, abre com o chrome, clica com o botão direito e seleciona a opção "View page source". Aí é só você criar duplicar o , colocar class="fa-primary" no primeiro e class="fa-secondary" no segundo, e em seguida inserir dentro da tag .
@@gustavomoraes4199 eu te amo
@@gustavomoraes4199 Thanks for your answer but I can speak only english?
@@rc3043 You can download the SVG files directly from FontAwesome's website and import them into your projects. It's a little hard to see, but when you select an icon from their gallery, there's a small download icon near the bottom-right of the page title.
WOW! Incredible! verybody that I ask this kind of think says: "Node! Node! Node!" You just go there I make everything with CSS! Amazing! Super thanks!
Great video! Quick question though: Usually animating the width property of an element is ill-advised because it requires the browser to calculate the layout for every step, as opposed to a propertie like transform where the calculation is much later in the pipeline during the composition step and therefore much cheaper. Is this counteracted here by the fixed position or would you agree it's not ideal?
How amazing is your explanation? I found nothing like it so far! Thank you so much for this amazing content.
my .nav-item:last-child set to margin-top: auto; wont make the last item go to the bottom of the nav bar. Is there something else i need to do. I've set the nav-item width to 100% already.
Yo, same here, did u find a solution?
@@xi_red4936 yo it’s been awhile since I fixed this problem give me like 6-8 hours and I can go back and figure out how I fixed it. Reply to me in like 5 hours so I remember how I fixed that old code.
Sorry for the long delay I work a day job so won’t have access to my project folder until I’m home
@@MrKingPlayz it's been 6 hours = }
I remember when this channel was angular firebase. This guy is the reason I wanted to be a web developer. Great content Jeff 👍
I know how to do all these things, so I'll pass this one around and wait for the Electron + Svelte app tutorial patiently. :)
Expect more electron next week!
@@Fireship keep up with these straight to the point tutorials ;) I love how much value can be crammed in such a short amount of time. You're the best in that aspect in my opinion :)
Wow, i just saw result in the start, and i understand that lesson will be super!
Subscribed and liked, keep it going!
Not sure if you will see this however, I was wondering if you could explain how to change the svg images or whatever, very new to code and cant figure this out
Google "font awesome" from there you can grab tons of great svg icons.
@@Iglum but what tag I have to change ? On font awesome I see only ... tags ?
This is amazing work. I have enjoyed every minute of the video. And on top of that, I've improved my CSS skills in 11 minutes and 39 seconds!!
.nav-item:last-child { margin-top: auto; } 🎉
didn't work for me somehow :(
@@davidmotz8963 make sure you have `height: 100vh; display: flex; flex-direction: column;` applied on the nav-item's container element ;)
@@sten6160 Thanks. I was also having same problem. Solved now!
@@sten6160 thank you thank you thank you :D
@@sten6160 Thank you, this wasn't clear in the video
Need more project oriented tutorial videos like this @Fireship
IMPORTANT:
::-webkit-scrollbar is only available in Blink- and WebKit-based browsers (e.g., Chrome, Edge, Opera, Safari, all browsers on iOS, and others).
Congrats! Absolutely amazing tutorial! It's the first video I'm watching from you and subscribed right away. Good explanations and also really good English!
somehow the margin-top: auto doesn't work.
Sir you just answered a question that I was having trouble with for a while now. Redesigning the scroll bar. Thank you so much.
i cant use the '--text-primary'
someone help me
Are you using it like this? color: var(--text-primary);
Did you define it in :root { } selector? And as the other comment mentioned, when using it you have to use var(--var-name).
:root {
--text-primary: #369;
}
body {
color: var(--text-primary);
}
If you have having issues getting the navbar to bottom:0, change navbar from position: fixed to position: absolute !important and if navbar-nav displays in a column when small screens are active add !important to flex direction : row. Not sure if the problems I had were because of other fixed elements or not but I thought I would pass it along just in case. Love this navbar btw!!!
Can I subscribe more than one time 😂?
I'll allow it
Yeah just click twice
@@Scizzzor 😂😂 won't do that
MAN! The explanation along with the visual presentation, it's just amazing! There are very few people who makes such videos. Thumbs up, man! Like your content. Keep up! :)
Watching old Fireship videos: "Comment and maybe win a free shirt"
Me: "Find the latest video to try to get free tshirt"
This is one of the best tutorials I've watched on YT. Thank you!
PRO TIP: Make sure to include .navbar {overflow: hidden;}, so that, in the 200ms while the navbar is expanding, the text and logo inside the navbar will not prematurely overlay onto the rest of the screen outside the bar.
OMFG, THIS IS ONE OF THE BEST TUTORIAL I'VE EVER SEEN!!!
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.
Now these videos I like. It's only taken a year to find thanks to RUclips algorithm not showing it to me. Many thanks, this will help loads with a site I am building.
This is how I see things when I see all of you nice youtubers out there:
Dev Ed - pretty good, honest, I learn all the beginner stuff from him, I feel like I have a connection with that man idk why maybe because he's romanian as well.
Traversy Media - very good, has a big fucking channel holy shit I learned so much from him, the fact that he was addicted to some opies and now he's so successful and good at what he's doing MOTIVATE the shit out of me (I have addiction problems as well).
Fireship - G-O-D TIER, dude you made my MIND go brrr brr brr, you're barely hitting 400k subs (congrats btw) BUT YOUR TUTORIALS ARE GOD TIER, PRO QUALITY, VERY NICE TRICKS, VERY GOOD CODE, ETC.
You deserve more then you have, you made some of us here now work, literally, your videos make me wanna open up visual studio and just code along you. Good job dude!
I didn't know how much I miss doing CSS until I saw this, great video!
Way to go player, Im a clever dev, but even I learned alot from this simple CSS tutorial, im very proud of you!
🤯🤯 i have saved this video to watch later along time ago and from few days i was searching for a tutorial for responsive navbar now finally i get it 😊
This is simple to follow at straight to the point. I love it
You're the only channel, I've watched that explain every single line of code. Keep doing it and you will surely help a lot people!
Rem:
5*16, I just had an idea about this lol!
First of all, guys, thank you for all your videos. Your js tips were very helpful while i learned that. And know you made css content! Pls keep doing these videos.
Never knew CSS could play Animation, so many potentials!
Simple, to the point, focus, and complete explanation.. great channel.. really
Best channel on RUclips. Very relevant and concise !
Cool video man. Some beginners might find it an quick so I like that you addressed that in the intro. Also, I really like your teaching style! Thanks for the good content I, as well as others, appreciate it! 🙏🏽
Man! This is quality content dude! Subscribed (without even seeing other videos)
I got teary eyes coz of your channel champ! what a great uiux tutorial here! thank you!
"webkit-scrollbar" selector only works in webkit based browsers AFAIK, and isn't standard according to "canIuse"; seems like the W3C has nothing around styling scrollbars defined in the standards though... If you want to support Firefox (and IE depending on your requirements) it'll require a skosh more CSS &/or the inclusion of a scrollbar JS library for consistency cross-browser.
Really awesome video notwithstanding. Was looking more-or-less for exactly this for a nested menu bar on a site I'm working on. Really clearly & concisely presented.
the way you explained it in the beginning! thank you!! more like this pls 👏