No video :(

Flexbox Navbar Tutorial | Only HTML & CSS

Подписаться 47 тыс.

Просмотров 68 тыс.

50% 1

New to CSS Grid? Watch the full Crash Course here: • CSS Grid Crash Course ...
In this video I go over how to create a Navigation Bar using Flexbox. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use Flexbox for the layout and then add hover effects.
CodePen: codepen.io/ang...
In this video I show you:
0:27 - Starting HTML Code
0:53 - HTML Code
2:11 - CSS Body Code
2:28 - Navbar CSS
3:15 - How to use Flexbox
4:01 - Nav-item CSS
4:43 - How to use :first-child
5:42 - How to add CSS styling to a button
7:22 - How to add a CSS hover effects
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: www.youtube.co....
Let's Connect
Dribbble: dribbble.com/a...
Blog: / angeladelise

Опубликовано:

3 май 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 123

@borgestheborg 3 года назад

Hands down the best tutorial I've come across on RU-vid for making navbars, simple and straight to the point. Subbed!

@je9625 3 года назад

This is one of the best channels for frontend development on youtube.

@johnborron1059 2 года назад

One thing I really learned from this video was how to use comments in my code effectively. I tried following on, but it wasn't sinking in, so I went back, and every time you would do something new I would comment your verbal explanations in my code before the actual code itself. The way you described what you were going to do was just delightful. I've just read back through the code and realised I've constructed for myself a very useful resource.

@thomasdemeersman7384 2 года назад

You're a life saver , I couldn't figure out how to actually do this and every tutorial made it seem very complicated

@AnhTran-kk6li 2 года назад

right, simple and straightforward. that's all we need after scrolling and watching tons of tutorials on this platform. Ty!

@hamzaijaz6850 4 года назад

its not just a tutorial it was a lesson and a great one. Angela did a great job explaining everything.

@angeladesign737 4 года назад

Thanks so much!

@souldej Год назад

Hello Angela, thanks for the tuts. Far too kind. Now I can build on what I have learnt here... PS: You ref nav-item a:hover ref's --clr-primary-dark instead if dark green.

@dogonwall6680 2 года назад

i've checked out so many navbar videos but this is so much beginner friendly and clean thankyou so much.

@charlestoneoyoo 6 месяцев назад

Wooow, this is so super...you cleared my doubts on this. Thank you for the new knowledge imparted. Looking forward to utilizing it fully

@Cocodrillo3011 8 месяцев назад

Great vid! Easy to follow. Found the error in my code and made some adjustments after watching this video.

@elliotbladen1324 3 года назад

Best tut video I've watched. Easy step by step process with clear demonstration on how and why things were used

@nicolapascal6379 Год назад

THANK YOU!!! I am struggling in school and this tutorial eased my stress.

@owusubossman4792 2 года назад

You've got a new subscriber. You made it look so simple, thanks!

@user-nt2tm4yq5t 6 месяцев назад

the best channel no joke, i understand easy what u are saying!! Why u are quit??

@flyetimadtravel2157 3 года назад

For making gap between flex items its better to use gap property. Nice tutorial for many newbies.

@minimumviablepizza 10 месяцев назад

Simple and easy to follow. I tried a few and this was easily the best tutorial.

@user-ik1dv3dq5p Год назад

this is the best tutorial for a nav bar thanks for helping me

@OrlandoLoredo Год назад

Great work! I love the concise, clear directions that you give. Thank you!

@hananfadah Год назад

Thank God I came across your brilliant video. Well done!

@babysudhirs9205 4 года назад

continue this path and make great content without worrying about views and all, you'll reach a great level of success.

@angeladesign737 4 года назад

Thank you for the nice comment!

@babysudhirs9205 4 года назад

Wc :)

@kahlschlag17 2 года назад

Great thank you very much for this fast paced tutorial.

@kabyleartiste3548 2 года назад

that's the tutorial i was searching for . thank you so much , new sub!!

@photoinshot1355 9 месяцев назад

Brilliant tutorial, very well explained and demonstrated. Thanks!

@PaoPaw098 3 года назад

Very underrated content. Keep it up!

@angeladesign737 3 года назад

Thank you!

@devmarboy4045 2 года назад

how do I change transition color help

@OasisFinder Год назад

Nicely done, I have one question, How can we remove the gaps which we see around the navbar ? like navbar is not sticking to the end and upper side

@brooklyninja 2 месяца назад

So so, good. Thank you.

@kennw3244 2 года назад

thanks, worked well. Now just to make it responsive

@Valentina-kr2gp 4 года назад

thank you!! finally a girl who explains things to me🙏🏼

@_Greenflag_ 2 года назад

Since you put the left element on "margin-right: auto;" the "justify-content: flex-end;" is even superfluous ; )

@jamiemccallum833 3 года назад

pretty damn straight forward , I forgot how to get the text to display inline instead of as a block

@angeladesign737 3 года назад

Happy it helped!

@agustinfernandez8972 2 года назад

Super simple tutorial love it!

@poojamann5394 Год назад

You are awesome. Thank you so much.

@TiPPaZZ 2 года назад

That's just awesome, just the right thing for me, thank you for that

@ke6944 4 года назад

Thanks for such an awesome video, I'm new to web development and this tutorial really helps.

@angeladesign737 4 года назад

Happy it was helpful! Let me know if you would like to see a tutorial on a specific topic!

@ke6944 4 года назад

Just more tutorials on implementing Flexbox would be helpful. I like the flow of your tutorials it's concise and to the point.

@kahlschlag17 2 года назад

I resized an image to use as logo. For some reason it will not move to the right.

@SachinYadav-eh7vg 3 года назад

I was always getting stucked, how to place the logo to the left while keeping everything else to the right now its clear Thank you!!

@angeladesign737 3 года назад

Glad it was helpful!

@rakanhasan6757 3 года назад

@@angeladesign737 can we use self-align to move it?

@otsingul1 Год назад

Thank you so, so much!!!!

@nanda_8 3 года назад

Could you please tell me how did you improve your CSS skill? Nice video :}

@angeladesign737 3 года назад

Thank you! I actually improved a lot by creating my own projects.

@muhammadtalha6870 2 года назад

Great Video you got one more Subscriber 👌👌👍👍

@fernandohawk5833 3 года назад

Wow this was really useful!! Tysm!!

@Aaron-sy5yx 2 года назад

Very nice. Why did you choose to make the donate a button instead of a link?

@omareliotorrescastillo4808 3 года назад

Thank you for your video, What should i do in order to put a search component in the middle of the nav bar using flexbox?

@gevorgsaghatelyan6793 3 года назад

Just amazing. Thank you for your valuable content.

@angeladesign737 3 года назад

Thanks Gevorg!

@frenchmike 2 года назад

great tutorial

@samuelklixe 3 года назад

Easy to learn, thank you!

@angeladesign737 3 года назад

Glad it was helpful!

@nishalamichhane3961 Год назад

nice video: useful thanks

@shreeyadikshit5033 2 года назад

Great video, awesome explanation... can you tell me how can I make it responsive?

@sauronin2058 3 года назад

Дуже дякую)

@zarak5826 3 года назад

Great tutorial. Thanks for this!

@angeladesign737 3 года назад

Thanks Zara!

@habibikushal9738 3 года назад

I love the way you explain the tutorial , very informative. May I make a request , if you can use visual studio code for more amazing videos and tutorials . Thank you🇿🇦

@angeladesign737 3 года назад

Great suggestion! Thanks!

@paulcharman8113 2 года назад

Does this change at all if you add a pre-created image as a logo instead of an icon?

@Xi_Jing_ping 3 года назад

Thank for this precious video its help a lot, i have a quenstion? which code editor are you using ?

@angeladesign737 3 года назад

Glad it was helpful! In this video I am using CodePen, the link to the code is in the description.

@mdzaid3880 2 года назад

Thank you for this awesome content*🔥

@airampg5031 3 года назад

I love this tutorial thanks!

@angeladesign737 3 года назад

Glad it was helpful!

@arunsaklani9890 2 года назад

Is it necessary we use navbar before ul

@enthusefreelancer3440 3 года назад

beautiful

@thiccbeetboi Год назад

How could I further make this responsive by having it become a hamburger menu when on smaller screens

@sandip_bettereveryday 3 года назад

Really good job. It helped.

@angeladesign737 3 года назад

Thanks!

@michaelwiginton8587 4 года назад

Thanks again. These are nice.

@angeladesign737 4 года назад

Happy they have been helpful!

@ibrahimlita66 3 года назад

thanks alot

@pmop1432 Год назад

Good work 🤌

@jackshofner8733 3 года назад

Thanks for the video on a flexbox navigation bar! Can you add some drop down elements as well?

@angeladesign737 3 года назад

You can definitely add a dropdown; thats a good topic for a video. Thanks!

@okbaalla8451 2 года назад

What an outstanding nav bar I really liked it ... well as a beginner I want to ask you if I could use the following solutions : i create two divs one for the logo and one for the items on right where i use buttons and some css to make theme like yours and i use flexbox with a justify-content: space between to place each item to it side. Is it make sens or not ? Thx

@angeladesign737 2 года назад

That should work!

@sigmiami 4 года назад

Good video , very specific

@angeladesign737 4 года назад

Happy it was helpful!

@nomanhossain8421 3 года назад

this tutorial is too good.....

@angeladesign737 3 года назад

Thanks!

@jecapeca Год назад

I don't know why nobody shrinks viewport to show us responsiveness of it. I can make this too, but, I can't make it to look normal (centered logo, nav under it with links in block) when I shrink it! Every tutorial finishes with the easiest part.

@sahidsk6494 3 года назад

I love 😘 your tutorial ..

@angeladesign737 3 года назад

Thank you!

@user-nt2tm4yq5t 6 месяцев назад

Where is the root in css good for?

@michaelodonovan1908 4 года назад

Thanks this is great. Just wondered how you make it responsive with flexbox?

@michaelodonovan1908 4 года назад

Say with the logo then going over the top of the other nav items?

@angeladesign737 4 года назад

You could change the flex-direction to column for the mobile view. Changing the design to include a toggle icon to reveal the navigation items would require a bit more work than that.

@Ramza-SF 3 года назад

Hey Angela, great video. One question, when I try to set margin-right as auto for the icon to move it to the far left of the nav bar, nothing seems to happen? The margin doesn't update or change when I inspect element in the web-browser box model. I am importing the font from font-awesome using tags if it matters? I tried display it inline and as a block with a fixed width and still nothing. Any ideas?

@Ramza-SF 3 года назад

I figured it out, it was to do with CSS specificity when trying to target the specific first li in question. Why did me using the class seletor for the UL and then first child not target the first li?

@angeladesign737 3 года назад

Did you use something like ul:first-child? That would target the first unordered list element instead of targeting the actual list item. In this demo I targeted the first item in the navigation bar by giving all of the nav items the same class of 'nav-items' and then writing nav-items:first-child to control the placement of the first one. Hope that helps!

@Ramza-SF 3 года назад

@@angeladesign737 Thanks for the reply! Is it a good practice to give each of the list items the same class? Would simply typing "li:first child" achieve the same result? I am assuming the individual classes is a good practice for specificity when you have multiple li elements in different ULs?

@angeladesign737 3 года назад

Writing 'li:first-child' would give you the same result but I agree with your comment about specificity. Another way to approach this would be to add a specific class to each ul in the project and then reference that class with the il. For example '.nav-list li:first-child' and then another list on the site might be '.content-list li:first-child'. In that way not every li would need a class. It just depends on how you want to set up the project.

@EmmanuelNgwandu 3 года назад

Hello, thank you for the video. Kind of wondering if you can help with dropdowns with secondary dropdown on the nav bar!!!

@angeladesign737 3 года назад

Great video suggestion, thank you!

@EmmanuelNgwandu 3 года назад

@@angeladesign737 Thank you very much, Can't wait for it.

@priyanshubhardwaj2158 3 года назад

Use followed by inside of a tag to get the secondary dropdown.

@techxpertpcs 4 года назад

Hi there thank you for the tutorial, i have a request if you don't mind. Could you please do a tutorial on how to close an overlay from a hamburger menu when an anchor tag is clicked. I have searched high and low and cannot find out how to do it. Many thanks in advance.

@angeladesign737 4 года назад

Thanks for the video suggestion!

@Migler1 3 года назад

Why is it that you don’t put your nav inside of a header tag?

@angeladesign737 3 года назад

You can definitely place it inside a header tag, since I only created the nav for this demonstration I did not include it.

@forhadrh 3 года назад

Nice! :)

@angeladesign737 3 года назад

Thanks! 😄

@forhadrh 3 года назад

@@angeladesign737 Wells 😁

@missionmit5645 3 года назад

5:19 it's not working for me!!HELP!!!

@kashmirtechtv2948 3 года назад

Align items centre align vertically

@ecu_fishing 3 года назад

Good job! one things is not a tag, maybe :D no hate

@angeladesign737 3 года назад

Yup, my mistake!

@ankit1yogesh 2 года назад

👍🏻

@ayanarena1273 3 года назад

Is this responsive or not

@ritchiepetithomme7546 10 месяцев назад

it is the kind of video after watching it you just say to yourself Oh Gosh this is what I have been struggling with for so long look how easy it was. thank you for this amazing video