Flexbox Navbar Tutorial | Only HTML & CSS

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.

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

Let's Connect

[borgestheborg]

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

[johnborron]

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.

[je]

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

[thomasdemeersman]

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

[nicolapascal]

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

[dogonwall]

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

[hamzaijaz]

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

[AnhTran-kkli]

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

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

[Cocodrillo]

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

[hananfadah]

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

[photoinshot]

Brilliant tutorial, very well explained and demonstrated. Thanks!

[charlestoneoyoo]

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

[minimumviablepizza]

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

[elliotbladen]

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

[JovanJovanov-rb]

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!

[owusubossman]

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

[kabyleartiste]

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

[flyetimadtravel]

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