Let’s Get Navigating

Hello to whatever time of day it is you’re reading this!!! My name is Aubrie and I am taking coding head-on this year. So while I learn you learn as I share my journey with you. This article is going to show you how to create a navigation bar.

First, we want to wrap our navbar in a <nav> tag. As seen here!

For the next step you'll want to add a unordered list <ul> (a bulleted list) , then inside this tag you'll create line items <li> (text connected to each bullet). Inside of the <li> add a hyperlink tag <a>, here's where you’ll put the title of your navbar sections.

The most important part of the hyperlink element is the href=”” attribute. This is where you’ll put your URL connected to said section. Add a few more list items, and you’re in the making of your navbar.

Here is the by product of above code.

Now we just add a few simple CSS rules, make sure to targeting the nav and ul elements. Don’t forget your curly braces folks, use the list-style property to remove the bullets. If you wanted to keep/change how your bullets look you would use this property as well.

Then to take away the hyper-link decoration simply use the text-decoration property, with a value of none.

And bammmm there you have it, a simple navbar setup. I hope this helps you on your coding adventure. Until next time, happy coding!!!