Flexbox Navbar Tutorial | Only HTML & CSS

preview_player
Показать описание

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
Рекомендации по теме
Комментарии
Автор

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

borgestheborg
Автор

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.

johnborron
Автор

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

je
Автор

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

thomasdemeersman
Автор

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

nicolapascal
Автор

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

dogonwall
Автор

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

hamzaijaz
Автор

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

AnhTran-kkli
Автор

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.

souldej
Автор

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

Cocodrillo
Автор

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

hananfadah
Автор

Brilliant tutorial, very well explained and demonstrated. Thanks!

photoinshot
Автор

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

charlestoneoyoo
Автор

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

minimumviablepizza
Автор

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

elliotbladen
Автор

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

JovanJovanov-rb
Автор

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

OrlandoLoredo
Автор

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

owusubossman
Автор

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

kabyleartiste
Автор

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

flyetimadtravel
join shbcf.ru