Teaching you how to code Part 5

Teaching you how to code Part 5 Teaching you how to code Part 5 Modern Glass Navbar We are going to be building a modern glass navigation bar from scratch using only HTML, CSS and Javascript. Let's open your file explorer and create a new folder called Nav Bar. Open that folder into your code editor. Inside it create two index.html and style.css. Inside index.html type the exclamation mark and press enter to get an HTML boilerplate. Basically a HTML basic structure. Inside the title element change the text to Nav-Bar. Under the title element link our stylesheet style.css using the link element. Now inside the body tag add a backdrop overlay. This is going to be for our mobile menu. Create a div with the class menu-backdrop. For now it's just an empty div, but we'll style it later to create that nice blurred effect. Under the nav let's build the actual nav. Create a nav element. This tells the browser, hey, this is navigation content. Inside that create a div with the class navbar. This is going to be a container that holds everything together. Inside the nav create a div with the class logo. Use the anchor tag with the class logo inside it. Add your brand name. The href is just a hashtag since we're not linking it anywhere. Now let's add our navigation links. Create an unordered list with the UL tag inside it. Inside it add 5 LI tags with an anchor tag inside each of them. Each href link them to the pages they correspond and add the name of each link. We now need a hamburger menu icon. This is what shows up on mobile devices. Below the UL closing tag create a div with the class hamburger. Inside it add three empty span elements. These are going to be the three lines of our hamburger icon. We'll style them later in the CSS to look like actual menu bars. One more thing, let's add some content to the page so we can actually see how the nav bar looks. Under the nav closing tag create a div with the class content. Add an H1 element with the text Glass Navigation Bar Tutorial and then add a P element inside a paragraph explaining what we're building. Save everything and open it up with Live Server. There it is right now it looks super basic, just plain text, no styling. Everything's just stacked vertically. We've got our logo at the top, all our navigation links and our content below. In the next part we're going to dive into the CSS and make this thing look like an actual navigation bar. Alright make sure to follow to not miss anything. I'll see you in part 2.