Navbar CSS Tutorial: 3 Ways to Create a Navigation Bar with Flexbox

Рет қаралды 2,603,548

5 жыл бұрын

This free design and web development course will use Flexbox and basic HTML to create 3 different navbar designs. You'll see some examples of how Flexbox properties like 'align-items', 'justify-content', and 'order' can be used to quickly spin up new web designs.
This series is intended as a project-based course and will not go in-depth into HTML, CSS, or Javascript. If you want to learn more about those check out the links at the bottom of the description.
📂 COURSE FILES 📂
🔗 gum.co/QsaXx
⏰ TIMESTAMPS ⏰
Navbar 1: 0:22
Navbar 2: 10:18
Navbar 3: 11:58
✅ USEFUL LINKS ✅
🔗 A Complete Guide to Flexbox: css-tricks.com/snippets/css/a...
🔗 Google Fonts: fonts.google.com/
🌟 TOP RECOMMENDED COURSES 🌟
CSS
(Paid) Build Responsive Real World Websites with HTML5 and CSS3
www.udemy.com/design-and-deve...
(Free) CSS Crash Course For Absolute Beginners
• CSS Crash Course For A...
CSS GRID
(Free) Flexbox CSS In 20 Minutes
• Flexbox CSS In 20 Minutes
(Free) A Complete Guide to CSS Flexbox
css-tricks.com/snippets/css/a...
CSS FLEXBOX
(Free) CSS Grid Tutorial
• CSS Grid Tutorial #1 -...
(Free) A Complete Guide to CSS Grid
css-tricks.com/snippets/css/c...
JAVASCRIPT
(Paid) The Complete JavaScript Course 2019: Build Real Projects!
www.udemy.com/the-complete-ja...
(Free) Learn JavaScript - Full Course for Beginners
• Learn JavaScript - Ful...
🔔 SUBSCRIBE 🔔
/ @skillthrive
👋 FOLLOW US 👋
INSTAGRAM: / skillthrive
FACEBOOK: / skillthrive

Пікірлер: 965

@nehat7924 4 жыл бұрын

Thanks very much mate, this is exactly what I was looking for !!!

@matthewborkowski5313 2 жыл бұрын

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.

@Skillthrive 2 жыл бұрын

Glad you enjoyed it!

@jgappy Жыл бұрын

Bro...u could have just used Emmet abbreviation ! for boilerplate

@d.o.nmuzic3802 Жыл бұрын

Yup! Pace is perfect! End result is amazing. And I love that he explains what the code is doing.

@olawalevictor134 Жыл бұрын

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.

@SpeakDrumz1 Жыл бұрын

15 min video and I stayed all day long doing this. Thank you! For sure helped a lot.

@Skillthrive Жыл бұрын

Glad it helped!

@supportex2228 5 жыл бұрын

Very nice mic quality and clear explanation of what did you do in this tut. Looking forward for more!

@Skillthrive 5 жыл бұрын

Thank you!

@leandrodossantos9160 3 жыл бұрын

Thanks dude, I was looking for this kind of structure!

@gorsama-2190 4 жыл бұрын

Wow your videos are so good definitely better that those with music, love your content keep it up👍♥️

@Skillthrive 4 жыл бұрын

Thanks, Amir!

@manarahmed1917 3 жыл бұрын

Thank you so much I appreciate it when people actually explain what they are doing in css!

@Skillthrive 3 жыл бұрын

Happy to help!

@dannyjdhall 3 жыл бұрын

Just found this tutorial. Thank you. I love the modern look, and this helped me solidify my knowledge in creating navbars.

@Skillthrive 3 жыл бұрын

You're very welcome!

@deadlysilence5511 3 жыл бұрын

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!

@developer2 2 жыл бұрын

Same man, Montserrat just genuinely looks good especially with websites!

@spacelama666 5 жыл бұрын

Just what I needed, keep em coming!

@Skillthrive 5 жыл бұрын

Will do 👌

@FRONTRUS 3 жыл бұрын

This channel should be rearward! They post tutorial videos for free and without any advertisements! 😍😍😍😍

@heslop7103 3 жыл бұрын

Rewarded*

@mrCetus 2 жыл бұрын

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.

@FernandoHernandez-jp4gt Жыл бұрын

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!

@Skillthrive Жыл бұрын

Glad you got the hang of it!

@Skillthrive 4 жыл бұрын

⚠️ October Updates (Code reflected in course files) • Mobile navigation added to all examples (in-depth example here: kzfaq.info/get/bejne/jd6BjdZ_m7Ktc4E.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

@Skillthrive 4 жыл бұрын

@Woohui Kim Just updated. Thanks for letting me know.

@brunopeselli3662 4 жыл бұрын

On point! just what I needed, keep it up 🤘🏼

@saurabhdaswant7833 3 жыл бұрын

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

@rathernotdisclose8064 3 жыл бұрын

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.

@gustidimas5910 Жыл бұрын

wow just figured that, thank you

@tharindusandaruwan2295 Жыл бұрын

@mbonisimtunzi Жыл бұрын

Wooow thank you I will try it out

@leaky3955 8 ай бұрын

Or shift+alt+down/up arrow to copy from above or below

@zero0bb 2 жыл бұрын

this is weird basic stuff that I never knew could be implemented like this, nice.

@andrillaf 3 жыл бұрын

Thank you so much! I’ve been trying to figure this out for awhile. No one else made it click for me.

@mohamedsuhailirfankhazi6628 Жыл бұрын

Great tutorial! Simple to follow and to the point. Very helpful.

@Skillthrive Жыл бұрын

Glad you found it helpful! Be sure to check out my new stuff, too. 😊

@usama57926 4 жыл бұрын

amazing design and explanation

@Skillthrive 4 жыл бұрын

Thank you!

@maxsaparaliev4027 3 жыл бұрын

Holy, man. Thanks, i've just learned that i can order elements in a flex container. Awesome, ty again man.

@alvarezgamers Жыл бұрын

You have an extremely effective way of explaining stuff. You got a new sub! :)

@jaydenmoon1165 3 жыл бұрын

Wow this was presented very clear and concise - wonderful video - I learned a lot, thank you :D

@Skillthrive 3 жыл бұрын

Glad you enjoyed it! ☺️

@Floriskoek 4 жыл бұрын

Damn awesome. To the point, clear and explained what you are doing. Thank you so much!

@Skillthrive 4 жыл бұрын

Thank you! Glad you enjoyed it.

@teched7467 4 жыл бұрын

Thanks really helpful I understood all the code and now I know how to create menus and buttons

@BTFezzer 3 жыл бұрын

i learnt more from this then i did from an hour long tutorial on css thanks

@dimtodim 5 жыл бұрын

great job mate :)...i know all that stuff but i forget detail :) nice to fresh memories...

@Skillthrive 5 жыл бұрын

Thanks! It’s crazy how fast we can forget things. 😅 Refreshers are always nice.

@jackroses1064 3 жыл бұрын

Exactly what I needed 😃

@solme8577 Жыл бұрын

Just finished with the tutorial. Simple yet effective. Thank you sir!

@Skillthrive Жыл бұрын

Glad you enjoyed it!

@sananshaikh7511 3 жыл бұрын

finally a worthy video. thank you so much for making it!

@rjc4200 2 жыл бұрын

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 2 жыл бұрын

In the html why did he put the img inside the header? Why can't we put img under nav.

@sidrashawaj 2 жыл бұрын

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

@contraspower6302 2 жыл бұрын

@@sidrashawaj Thanku brother 🙏

@skully8767 3 жыл бұрын

does he actually memorize all those hexa.. color codes

@hassansiddiqui428 3 жыл бұрын

With time you learn

@jer461 3 жыл бұрын

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.

@PhilBot4OOO 3 жыл бұрын

Nah pretty sure you can hear his voice shif to a reading tone rather than recalling naturally from memory!

@j._rom4597 Жыл бұрын

Nope

@mbonisimtunzi Жыл бұрын

You surely remember you favorite colors

@kwokashley2000 2 жыл бұрын

Thank you so much! Simple steps and clear explanation!

@byzeezus 3 жыл бұрын

THANK YOU IVE BEEN LOOKING SOOO MUCH ON HOW TO DO THISSS

@mshimanshu1000 3 жыл бұрын

YOU JUST SAVED A LIFE MAN !!!!!!!!!!

@Skillthrive 5 жыл бұрын

Tutorial on how to make this navbar mobile friendly: kzfaq.info/get/bejne/jd6BjdZ_m7Ktc4E.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.

@sougataghar1179 4 жыл бұрын

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

@erickhilario6217 4 жыл бұрын

@@sougataghar1179 but you will have that use the property flex-direction: row-reverse and back to same

@gandalfshandle 4 жыл бұрын

What color theme is installed in your VS code?

@Narceologist 2 жыл бұрын

Thank you so much for this, just started learning and I was so stuck trying to make a navbar.

@you39tubeable 4 жыл бұрын

Did not know about the order property, thanks

@dariomasip 4 жыл бұрын

The moviment of the cursor with that blur is amaizing!

@JulianColeman03 4 жыл бұрын

It's because he's using a high refresh-rate monitor

@vencalysek7847 4 жыл бұрын

Amazing video, in 15 minutes taught me more than cod*cad*my css course! THANK YOU so much!

@Skillthrive 4 жыл бұрын

That’s awesome to hear, Venca!

@vencalysek7847 4 жыл бұрын

@@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 :))

@Skillthrive 4 жыл бұрын

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

@vencalysek7847 4 жыл бұрын

@@Skillthrive Thank you very much! :)

@tomc0240 2 жыл бұрын

This is excellent. Clear and concise

@ankitpal7793 4 жыл бұрын

thanks for boosting my confidence

@velocikitty9300 Жыл бұрын

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.

@sugoish9461 Жыл бұрын

How's it going for you? :D

@DrEggCake 8 ай бұрын

if@@sugoish9461if u want i can help u both with code

@naitikkathiriya 3 жыл бұрын

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✔️✨

@TheChosen0791 3 жыл бұрын

Great tutorial, now I am starting to understand Flexbox.

@colinabel4051 3 жыл бұрын

cheers been using this as a reference for a much more complicated header and its dumb helpful

@eugenechernov837 5 жыл бұрын

Great professional tutorial. Thank you!

@Skillthrive 5 жыл бұрын

You’re welcome Eugene! Be sure to check out the new one I posted today about how to make the navbar mobile friendly.

@zReeMaKe 3 жыл бұрын

Skillthrive trying to find this video.

@nandhinianand2786 4 жыл бұрын

Thank you so much!!!

@user-bm9tq5qf3n 2 жыл бұрын

Thank you, you did not miss anything and took into account.

@betgani 3 жыл бұрын

Amazing video, and the explanation was FENOMENAL.

@trungphan3504 4 жыл бұрын

it's really nice, thank you

@Skillthrive 4 жыл бұрын

You’re welcome 🤗

@aalayer2834 3 жыл бұрын

Keeping things nice without any bootstrap related stuff! Noce tutorial mate

@Skillthrive 3 жыл бұрын

Glad you liked it!

@akashgillella 3 жыл бұрын

Very nice video man, thanks. It was so simple mannn!

@manosanti Жыл бұрын

Thanks a lot! Great Tutorial!

@pederrudi6352 4 жыл бұрын

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

@darshshah7155 3 ай бұрын

great

@christiancolewan 2 жыл бұрын

Im making a portfolio and i was having trouble in the navigation bar this tutorial is exactly what i needed.

@user-nj3lg7wi5r 2 жыл бұрын

I'm glad I'm not the only one.

@torrance007 Жыл бұрын

I love this tutorial, it was exactly what I was looking for.

@Skillthrive Жыл бұрын

Glad it was helpful!

@adamoceallaigh2267 4 жыл бұрын

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 👍

@adamoceallaigh2267 4 жыл бұрын

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 ! :)

@Skillthrive 4 жыл бұрын

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.

@hellohell143 Жыл бұрын

@@Skillthrive good thought

@MartinoxxHD 4 жыл бұрын

So the "li:nth-child(1)" value it's used to give a style only to the first , right?

@Skillthrive 4 жыл бұрын

Yep! 🙂

@sciencecompliance235 4 жыл бұрын

You could also use "first-child". I forget the specific syntax. I think it's first-child, but you'll want to verify that.

@Joel.Invictus 3 жыл бұрын

Very Helpful demo, bro. Thanks a lot!

@theheroofthevirgins1487 Жыл бұрын

Thank you so much I thought it was going to be hard and seem pretty easy good detail video makes it so easy to understand ❤

@anuj7286 5 жыл бұрын

Thanks for making this tutorial 🙂

@Skillthrive 5 жыл бұрын

You're welcome! LMK if you have any questions. 😁

@anuj7286 5 жыл бұрын

@@Skillthrive can u make this responsive?

@Skillthrive 5 жыл бұрын

It’s possible, I just didn’t do it in this course bc I thought it would make the video too long.

@Skillthrive 5 жыл бұрын

Keep an eye out for a video on how to create a responsive menu though. I might do it this week.

@Skillthrive 5 жыл бұрын

Hey, I just published a video on how to make this design mobile friendly: kzfaq.info/get/bejne/jd6BjdZ_m7Ktc4E.html

@polartitangaming1887 3 жыл бұрын

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.

@sarfarazstark Жыл бұрын

why not check in inspect

@mustangbs9897 Жыл бұрын

it's not looking good on phone, this is not a responsive design.

@ahlisunnah8167 Жыл бұрын

@@mustangbs9897 use the @media

@edris9664 8 ай бұрын

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

@billzade8158 8 ай бұрын

You can also adjust paddings, margins, positions, etc...based proportionally instead of by pixel as well

@dragos_r4du 4 жыл бұрын

Such a great job. Keep the good work!

@Skillthrive 4 жыл бұрын

Thank you! Will do!

@sejutybarman9870 3 жыл бұрын

Thanks a lot..now navbar is clear to me.

@gurulovearthi 3 жыл бұрын

How to make responsive bro please tell me

@Klrfl101 2 жыл бұрын

Bruh did you even watch the video

@anugerahcahayautama6472 2 жыл бұрын

@@Klrfl101 lmao

@TheSpiralnotizblock 3 жыл бұрын

bro you actually saved my ass

@punnybunny7043 4 жыл бұрын

So useful, Thank you! :)

@bhoot1702 3 жыл бұрын

Amazing video. I was frustrated so much but this video helped me

@forhadrh 3 жыл бұрын

Wow! Such an awesome nav with such simple code.. Why I don't think that way -_-

@AllyG1967 4 жыл бұрын

Great video, thanks. Newbie question - Right at the beginning, why did you name your folders with an underscore.

@Skillthrive 4 жыл бұрын

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

@Simon555 2 жыл бұрын

straight to the point thx

@chalepeaddict Жыл бұрын

Incredibly helpful tutorial - good job !

@adamvalli6233 Жыл бұрын

I feel like joe rogan is teaching me flexbox

@Skillthrive Жыл бұрын

I am Joe Rogan.

@TheTonyMan 2 жыл бұрын

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.

@umangternate 2 жыл бұрын

I learned many new things in this video, especially, order...

@simash9197 2 ай бұрын

loved it so much thank you

@onion_____ 4 жыл бұрын

note to self: use this

@Skillthrive 4 жыл бұрын

😄

@aryvidot2252 3 жыл бұрын

Excellent content! So easy to follow!

@OrincyWhyteDesigns 2 жыл бұрын

Ahhhhhhh the last example was so helpful!!!! Thank you

@liverpoolkelly7 2 жыл бұрын

That order property is a godsent! I was banging my head for days trying to create a centre logo navbar

@Skillthrive 2 жыл бұрын

It really is. It's almost a magical CSS property.

@eliudiaz7469 2 жыл бұрын

Thank you, this video has been really instructive.

@adamlonewolf1563 2 жыл бұрын

Thanks for your tutorial ! Simple to understand, well explained !

@twicegamerlive 2 жыл бұрын

So simple, unbelievable, how could I even struggle with this. Thanks for your help!

@contraspower6302 2 жыл бұрын

In the html why did he put the img inside the header? Why can't we put img under nav

@twicegamerlive 2 жыл бұрын

@@contraspower6302 If he would've, the Logo would be directly next to the Listend Items (Services, Projects, About).

@contraspower6302 2 жыл бұрын

@@twicegamerlive Thanks for replying brother. But i have one doubt why it is like that?

@muhammadzafar2470 4 жыл бұрын

very smooth and smart way of coding . i like it too much and very helpful for me .

@kasuniversity Жыл бұрын

Wonderful. I learnt new ways of doing the Nav bar.

@shamgar5573 2 жыл бұрын

you explain and break things down extremely well. thank you!

@knowledge5608 3 жыл бұрын

Thanks for such an amazing Video, I just Loved and wanted to me the second kind of navbar.

@ogabogabrian7884 4 жыл бұрын

very helpful thanks you looking forward for more contents

@rostyslavlevder6821 2 жыл бұрын

Beautifully designed and edited video, thanks for the tutorial.

@Skillthrive 2 жыл бұрын

Thank you very much!

@muhammadtalha9834 4 жыл бұрын

Simply Awesome!!

@PedroAugusto-yu8yc 9 ай бұрын

This helped me A LOT!!

@qqwertyzzxcvb1921 Жыл бұрын

Just what i need , need to do this. Thanks for tutorial.

@ronnelmacompas1647 Жыл бұрын

This is great navbar. Thank you!

@jackfrost8969 2 жыл бұрын

This is golden content.

@Loki_Dokie 2 жыл бұрын

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.