in visual studio code, you don't have to select a line to copy it, just place your cursor at the end of the line without selecting the content there, and hit CTRL C (or x for cut) and it'll be copied. Or, in your case whatever the key is on mac.
Thank you for the tutorial man before waching this i was not knowing what does 1 inline-block 2 display: flex 3 justify-content etc...... i was really searching this type of content thank you so much
bro Your helping millions of people around the globe i really appreciate it and i'm actually Learning From your Videos Your have Earned a loyal Subscriber
Great tutorial! Funnily enough, I use Montserrat too and have used it in past projects, I was just searching around for some good navbar tutorials. Keep up the good work!
Thank you for this tutorial! I made all three and changed the CSS to have variables at the top to make it more customizable and put the navbar into a div element. I also make the image a link! So if I ever need this for a project I can just insert the code to my page.
@@Skillthrive If i may, can I have one question? How to make fixed navbar while scroling? i used position: fixed, and then all 3 sections came together. Somehow it overwrites justify-content Thanks for help :))
@@vencalysek7847 It's actually pretty easy using position: sticky. Checkout this link with the code: codesandbox.io/embed/static-72sod I added comments in the css of what I changed.
Short, Crisp and to the point. Thanks for this video. Keep it up :) It also reminds me why we usually tends to use different CSS framework/s just to avoid writing so many lines of code just for a simple nav bar design.
@@contraspower6302 because we want the header to be divided into 3 parts, basically (logo, links and button). So if u include the img under nav, you can't have the logo set anywhere far from the nav elements.
Thanks bro, i know it seems simple, and I'm pretty proficient with all else html and css, but navbars have just given me hell for some reason. Thanks, you've cleared it up for me.
Great content. I was able to follow along and even correct my mistakes when it didn't turn out like yours. I'm a complete beginner so I can't say it is beginner friendly (for my level at least) since I was just following along and didn't understand what I was putting in. But that's because I'm a level 1 out of 3 beginner. If you're in the mid-range beginner (if that makes sense) I think you'll be able to pick up on this really well since I did with my complete lack of knowledge. But this was great to learn. Once I get the hand of the basics, I think I'll be able to follow along and understand more completely. Thank you for this content.
Does everyone knows why can't I set the logo to the right side? with margin-right:auto; I don't understand EDIT: If this happened to you, in my case, I've put the logo into a tag, you have to put the margin-rigtht to that class and not for the logo.
It's so simple stylings and HTML formatting for header class building.. thank u so much the maker! Really helped. And video ending Subscribe button neon effect u make so cool✔️✨
I kind of wish we got to see more of how this looks on multiple browsers. Such as mobile, tablet, etc. I can make great NAV bars, but designing something that works on other things is hard to do for me.
use media queries (@media) set max-width: (however many pixels); for optimizing for desktop sizes. if you're optimizing it for mobile use min-height. @mustangbs9897
Do you know what the best things about you, you know what you doing & you explain it while coding, that the things I was looking for. Thank you so much!!.
Hey man , great tutorial . Just wondering do you know that the option HTML : 5 under the boilerplate one that you added with the extension in VSC achieves the same result as what you get at 2:14 and you don't have to delete the comments . A quick shortcut with emmet to activate this is - just type ! and press tab at the start of the html page and you get exactly what you need . Just letting you know . Great tutorial though , helped me a load , thanks . Keep it going 👍
Emmet is an unreal shortcut that comes pre-installed with VSC , you can also make an ordered list with three li a tags very quickly by typing ul>li*3>a and pressing tab and there you go ! :)
Hey, Adam. Thanks for the kind words. I actually found out Emmet come pre-installed after posting this video, but I honestly don't use it much. I need to practice using it more, though.
So your folders will automatically be alphabetized, but if you put a _ in front of the word it will alphabetize those first. So I like to put my main folders with a _ and less important ones without. You can even add another _ to the existing one and it will start over with those alphabetized first. Kinda like this: __a __b __c _a _b _c a b c
⚠️ October Updates (Code reflected in course files) • Mobile navigation added to all examples (in-depth example here: th-cam.com/video/WxQZsN6LICM/w-d-xo.html • Imported the Google Fonts in the head section of the index.html file instead of the CSS file • Removed the button that was being wrapped by the a tag and moved the button styles into .cta class styles • Removed the global background color (sorry for the confusion, this was a bad idea in hindsight) and moved it into the header styles
Tutorial on how to make this navbar mobile friendly: th-cam.com/video/WxQZsN6LICM/w-d-xo.html Updates [ Aug 2019 ] It's not best practice to wrap a button with an a tag. Instead, just give the a tag a class and style the link to look like the button. Also not a good idea to set background color on all elements like I did because you'd more than likely run into some unexpected styling if you were using this for your website.
Im going to tell you straight up I bought a udemy course and the website they made couldn't even match this, and of out of all the youtube videos I watched this is the least confusing. Im pretty sure this website works even when downsized because how how it is designed but for some other nav designs I see on youtube, it uses static values which creates a mess when opened on mobile.
15 min video and I stayed all day long doing this. Thank you! For sure helped a lot.
Glad it helped!
Great tutorial. Loved the pacing. Perfect I think for someone that already understands a bit about CSS and HTML, no BS, just content, looks great too.
Glad you enjoyed it!
Bro...u could have just used Emmet abbreviation ! for boilerplate
Yup! Pace is perfect! End result is amazing. And I love that he explains what the code is doing.
in visual studio code, you don't have to select a line to copy it, just place your cursor at the end of the line without selecting the content there, and hit CTRL C (or x for cut) and it'll be copied. Or, in your case whatever the key is on mac.
wow just figured that, thank you
ty
Wooow thank you I will try it out
Or shift+alt+down/up arrow to copy from above or below
This channel should be rearward!
They post tutorial videos for free and without any advertisements! 😍😍😍😍
Rewarded*
Scrolling down my feed and found this video today. One of the videos that helped me back then when I was a beginner. Thank you.
Thank you for the tutorial man before waching this i was not knowing what does
1 inline-block
2 display: flex
3 justify-content
etc......
i was really searching this type of content
thank you so much
Inlineblock means left and right both side we can handle in margin padding etc
The moviment of the cursor with that blur is amaizing!
It's because he's using a high refresh-rate monitor
YOU JUST SAVED A LIFE MAN !!!!!!!!!!
Thanks very much mate, this is exactly what I was looking for !!!
this is weird basic stuff that I never knew could be implemented like this, nice.
Thanks for this! Seems so complicated at first but after a few replays I got the gist of the design and now kinda know it myself!
Glad you got the hang of it!
That order property is a godsent! I was banging my head for days trying to create a centre logo navbar
It really is. It's almost a magical CSS property.
Very nice mic quality and clear explanation of what did you do in this tut. Looking forward for more!
Thank you!
@@Skillthrivethey're being sarcastic
bro Your helping millions of people around the globe i really appreciate it and i'm actually Learning From your Videos Your have Earned a loyal Subscriber
amazing design and explanation
Thank you!
Thank you so much I appreciate it when people actually explain what they are doing in css!
Happy to help!
Great tutorial! Funnily enough, I use Montserrat too and have used it in past projects, I was just searching around for some good navbar tutorials. Keep up the good work!
Same man, Montserrat just genuinely looks good especially with websites!
Im making a portfolio and i was having trouble in the navigation bar
this tutorial is exactly what i needed.
I'm glad I'm not the only one.
Just found this tutorial. Thank you. I love the modern look, and this helped me solidify my knowledge in creating navbars.
You're very welcome!
does he actually memorize all those hexa.. color codes
With time you learn
He may use those colors frequently so he memorized it already. There's a million of hex codes and no one in the world has memorized them.
Nah pretty sure you can hear his voice shif to a reading tone rather than recalling naturally from memory!
Nope
You surely remember you favorite colors
Thank you sir ❤
I am from India 🇮🇳
Just finished with the tutorial. Simple yet effective. Thank you sir!
Glad you enjoyed it!
Wow your videos are so good definitely better that those with music, love your content keep it up👍♥️
Thanks, Amir!
Finally a header without 20 div tags!
Thank you for this tutorial! I made all three and changed the CSS to have variables at the top to make it more customizable and put the navbar into a div element. I also make the image a link! So if I ever need this for a project I can just insert the code to my page.
truly clear explanation and straight to the point. Looking forward getting this good at coding.
Amazing video, in 15 minutes taught me more than cod*cad*my css course!
THANK YOU so much!
That’s awesome to hear, Venca!
@@Skillthrive If i may, can I have one question?
How to make fixed navbar while scroling? i used position: fixed, and then all 3 sections came together. Somehow it overwrites justify-content
Thanks for help :))
@@vencalysek7847 It's actually pretty easy using position: sticky. Checkout this link with the code: codesandbox.io/embed/static-72sod
I added comments in the css of what I changed.
@@Skillthrive Thank you very much! :)
Short, Crisp and to the point. Thanks for this video. Keep it up :)
It also reminds me why we usually tends to use different CSS framework/s just to avoid writing so many lines of code just for a simple nav bar design.
In the html why did he put the img inside the header? Why can't we put img under nav.
@@contraspower6302 because we want the header to be divided into 3 parts, basically (logo, links and button). So if u include the img under nav, you can't have the logo set anywhere far from the nav elements.
@@sidrashawaj Thanku brother 🙏
Thanks dude, I was looking for this kind of structure!
Thanks bro, i know it seems simple, and I'm pretty proficient with all else html and css, but navbars have just given me hell for some reason. Thanks, you've cleared it up for me.
Keeping things nice without any bootstrap related stuff! Noce tutorial mate
Glad you liked it!
i've searched for 2 weeks! Thanks man.
Great content. I was able to follow along and even correct my mistakes when it didn't turn out like yours. I'm a complete beginner so I can't say it is beginner friendly (for my level at least) since I was just following along and didn't understand what I was putting in. But that's because I'm a level 1 out of 3 beginner. If you're in the mid-range beginner (if that makes sense) I think you'll be able to pick up on this really well since I did with my complete lack of knowledge. But this was great to learn. Once I get the hand of the basics, I think I'll be able to follow along and understand more completely. Thank you for this content.
How's it going for you? :D
if@@sugoish9461if u want i can help u both with code
i learnt more from this then i did from an hour long tutorial on css thanks
Just what I needed, keep em coming!
Will do 👌
You have an extremely effective way of explaining stuff. You got a new sub! :)
Does everyone knows why can't I set the logo to the right side? with margin-right:auto; I don't understand
EDIT: If this happened to you, in my case, I've put the logo into a tag, you have to put the margin-rigtht to that class and not for the logo.
Thanks really helpful I understood all the code and now I know how to create menus and buttons
It's so simple stylings and HTML formatting for header class building.. thank u so much the maker! Really helped. And video ending Subscribe button neon effect u make so cool✔️✨
Great tutorial, now I am starting to understand Flexbox.
I kind of wish we got to see more of how this looks on multiple browsers. Such as mobile, tablet, etc. I can make great NAV bars, but designing something that works on other things is hard to do for me.
why not check in inspect
use media queries (@media) set max-width: (however many pixels); for optimizing for desktop sizes. if you're optimizing it for mobile use min-height. @mustangbs9897
You can also adjust paddings, margins, positions, etc...based proportionally instead of by pixel as well
who cares about those platforms?
@@atlantic_love some do.
Thank you so much for this, just started learning and I was so stuck trying to make a navbar.
bro you actually saved my ass
U mak learning very easy for some of us...
So the "li:nth-child(1)" value it's used to give a style only to the first , right?
Yep! 🙂
You could also use "first-child". I forget the specific syntax. I think it's first-child, but you'll want to verify that.
I learned many new things in this video, especially, order...
Great tutorial! Simple to follow and to the point. Very helpful.
Glad you found it helpful! Be sure to check out my new stuff, too. 😊
Amazing video. I was frustrated so much but this video helped me
On point! just what I needed, keep it up 🤘🏼
These navbars look awesome...sephora uses such
great job mate :)...i know all that stuff but i forget detail :) nice to fresh memories...
Thanks! It’s crazy how fast we can forget things. 😅 Refreshers are always nice.
Do you know what the best things about you, you know what you doing & you explain it while coding, that the things I was looking for. Thank you so much!!.
Wow, thank you!
Exactly what I needed 😃
Wonderful. I learnt new ways of doing the Nav bar.
Wow this was presented very clear and concise - wonderful video - I learned a lot, thank you :D
Glad you enjoyed it! ☺️
Did not know about the order property, thanks
Damn awesome. To the point, clear and explained what you are doing. Thank you so much!
Thank you! Glad you enjoyed it.
very smooth and smart way of coding . i like it too much and very helpful for me .
Great professional tutorial. Thank you!
You’re welcome Eugene! Be sure to check out the new one I posted today about how to make the navbar mobile friendly.
Skillthrive trying to find this video.
nice tutorial bro
ive been struggling for a while trying to learn css flexbox
I feel like joe rogan is teaching me flexbox
I am Joe Rogan.
you're so good you make it look so easy
Thanks, I try! 😆
Wow! Such an awesome nav with such simple code.. Why I don't think that way -_-
Holy, man. Thanks, i've just learned that i can order elements in a flex container. Awesome, ty again man.
Hey man , great tutorial . Just wondering do you know that the option HTML : 5 under the boilerplate one that you added with the extension in VSC achieves the same result as what you get at 2:14 and you don't have to delete the comments . A quick shortcut with emmet to activate this is - just type ! and press tab at the start of the html page and you get exactly what you need . Just letting you know . Great tutorial though , helped me a load , thanks . Keep it going 👍
Emmet is an unreal shortcut that comes pre-installed with VSC , you can also make an ordered list with three li a tags very quickly by typing ul>li*3>a and pressing tab and there you go ! :)
Hey, Adam. Thanks for the kind words. I actually found out Emmet come pre-installed after posting this video, but I honestly don't use it much. I need to practice using it more, though.
@@Skillthrive good thought
I love this tutorial. I think the Joe Rogan voice definitely helped
Lol these Joe Rogan comments get me 😂
Thanks for making this tutorial 🙂
You're welcome! LMK if you have any questions. 😁
@@Skillthrive can u make this responsive?
It’s possible, I just didn’t do it in this course bc I thought it would make the video too long.
Keep an eye out for a video on how to create a responsive menu though. I might do it this week.
Hey, I just published a video on how to make this design mobile friendly: th-cam.com/video/WxQZsN6LICM/w-d-xo.html
So simple, unbelievable, how could I even struggle with this. Thanks for your help!
In the html why did he put the img inside the header? Why can't we put img under nav
@@contraspower6302 If he would've, the Logo would be directly next to the Listend Items (Services, Projects, About).
@@twicegamerlive Thanks for replying brother. But i have one doubt why it is like that?
my logo kind of appears ontop of the navbar? how do I make it be next to it?
edit:
my logo img was inside . it was fixed when I placed it before
great
Ahhhhhhh the last example was so helpful!!!! Thank you
Thank you so much!!!
Thank you so much! This really helped me for my major project
Glad I could help!
Great video, thanks. Newbie question - Right at the beginning, why did you name your folders with an underscore.
So your folders will automatically be alphabetized, but if you put a _ in front of the word it will alphabetize those first. So I like to put my main folders with a _ and less important ones without. You can even add another _ to the existing one and it will start over with those alphabetized first. Kinda like this:
__a
__b
__c
_a
_b
_c
a
b
c
New to creating websites ... Really helpful
I’m glad to hear it! 🙂
Good tutorial, thanks! But there is a slight correction. Button and link are different entities, it makes no sense to place a button inside a link.
This is excellent. Clear and concise
it's really nice, thank you
You’re welcome 🤗
This is golden content.
How to make responsive bro please tell me
Bruh did you even watch the video
@@Klrfl101 lmao
Expert skill, straight to the point. Subscribed! Will be supporting soon
Thank you! Glad to have you!
note to self: use this
😄
Thank you so much! I’ve been trying to figure this out for awhile. No one else made it click for me.
⚠️ October Updates (Code reflected in course files)
• Mobile navigation added to all examples (in-depth example here: th-cam.com/video/WxQZsN6LICM/w-d-xo.html
• Imported the Google Fonts in the head section of the index.html file instead of the CSS file
• Removed the button that was being wrapped by the a tag and moved the button styles into .cta class styles
• Removed the global background color (sorry for the confusion, this was a bad idea in hindsight) and moved it into the header styles
@Woohui Kim Just updated. Thanks for letting me know.
Very Helpful demo, bro. Thanks a lot!
Tutorial on how to make this navbar mobile friendly: th-cam.com/video/WxQZsN6LICM/w-d-xo.html
Updates [ Aug 2019 ]
It's not best practice to wrap a button with an a tag. Instead, just give the a tag a class and style the link to look like the button.
Also not a good idea to set background color on all elements like I did because you'd more than likely run into some unexpected styling if you were using this for your website.
instead of setting margin to auto , cant we also set justify-item to flex-start ?? for the logo i meant, soo it goes to left all the way
@@sougataghar1179 but you will have that use the property flex-direction: row-reverse and back to same
What color theme is installed in your VS code?
thanks for boosting my confidence
This video is really helpful for me thanku sooooo much channel owner❤️
Thanks man, very clean and simple!
You bet!
Thank you, you did not miss anything and took into account.
cheers been using this as a reference for a much more complicated header and its dumb helpful
Found this in my feed after making the exact same thing yesterday! 😮
Very nice video man, thanks. It was so simple mannn!
you really a great teacher!Thank you!
Glad you think so!
You Are A Treasure We Should Save You
This sounds like something Nicolas Cage would say in National Treasure, but thanks!
@@Skillthrive oh you remeber
Beautifully designed and edited video, thanks for the tutorial.
Thank you very much!
Nice video bro,
greetings from Argentina 💙🤍💙
Hello 👋
THANK YOU IVE BEEN LOOKING SOOO MUCH ON HOW TO DO THISSS
Very very helpful man.........
Thanks for sharing this content.
Great video and very helpful for beginner 💯
Thank you!
Im going to tell you straight up I bought a udemy course and the website they made couldn't even match this, and of out of all the youtube videos I watched this is the least confusing. Im pretty sure this website works even when downsized because how how it is designed but for some other nav designs I see on youtube, it uses static values which creates a mess when opened on mobile.
Thanks, Sander!