2.1 The Markup

So let's jump into our code editor. I'm gonna be using Visual Studio Code here, the page that we're gonna build, I just have it opened right here in Chrome. And for the structure of the actual menu, as you saw, we have a simple a menu with a logo on the left and a navigation on the right. And the structure, I actually stole a bunch of links from the Tuts+ website. And I have, A notes file here, so this is the structure that we're gonna be using. As you see, we have a couple of level 1 links, and then level 2, And level 3, all right. So let's begin by creating a header with a class of navbar. Now, inside this header, we're gonna have our logo that's first, so we're gonna create an anchor tag with a class of logo. And we're gonna point to index.html, and then inside the link, we are going to use an image that I have actually right here, let me show you. I have two images here, this one is for testing purposes. But we're going to be using logo-tuts+.svg. So I'm gonna say img/, logo-tutsplus.svg and of course, we're gonna put some alt ext, all right? Next up is the actual menu, so for that, we're gonna use a nav. And we'll give it a class of menu so we can grab this later in CSS and style it accordingly. And then, our navigation will be made up of a series of lists, basically. It's currently the easiest method of creating navigation, especially one that has submenus. So we're gonna use nested, unordered lists, you can use ordered lists as well, it doesn't really make a difference. But for this demo, we're gonna be using ULs, or unordered lists. So, we're gonna start with a ul, and this will contain the first level navigation, or the links that you see first in the menu, the horizontal links. So we're gonna do a li, and inside an anchor tag, currently we'll put the hrefs to just a # sign because they don't go anywhere, and we're gonna start, By populating these lists. So, How To Tutorials, and I'm just gonna open the notes and the notes md on my right here so I can see what I'm doing. All right, so we have the first link, and then right below that I'm gonna create another unordered list for the nested submenu, which is this one right here. So I'm gonna say ul, And inside a li, this will be for this link right here, Design & Illustration. So actually we're gonna put an anchor tag inside Design & Illustration. And then under that, we have another submenu, so we're gonna be using yet another nested list. So again, ul, li, but this time, because we did not have nested list inside this one, the markup is a little bit simpler. So I'm gonna create an anchor tag and in here, we're gonna say Adobe Photoshop, and then li times two, let's speed this up a little bit. All I'm doing basically is copying the contents from my notes there, all right. Let me just make this a little bigger let's see if I can do that, yeah, there we go. All right, so, we created this first submenu, now let's move on to the second one. We're going to say, li again, and then inside a that says code, all right. So we're building this one exactly, and then another ul, and we are gonna have four list items with anchor text all of them. And then it is just a matter of copying these bits, so we have Web Development here, and then we have WordPress here, and then followed by CMS. All right, let's take a quick look at our page, just to make sure we have the structure laid out correctly, okay? Sounds good, or actually looks good, it doesn't sound good, let's move on. And we're gonna create the list item for web design, which is this next category. And actually just to speed things up a little bit, I'm gonna copy and paste. So here we have Web Design, Let's see, we have CSS, and what is that? JavaScript, that's the last one. Okay, next we have yet another submenu just like that. This time it's for Photo and Video excuse my typos. And in here we have Shooting, Post-Processing, Photo Critique and How-to and another one, Lighting. Okay, so, once we wrote all of these, we're basically finished with this list which corresponds to the sub menu for How To Tutorials, right? So we finish with these bits, next we have to write the submenu for this one for Courses, and this will actually start as a list item at the same level as this one. So I'm actually going to collapse this so it's easier for me to see, so I'm gonna say li, and then again, a href apparently goes to nothing. I'm gonna say Courses, and then another nested list for the actual submenu. So here we have, how many? One, two, three, four, five, six. So, we have six list items, each one containing an anchor tag with the href going to nothing basically. And the text for those submenu items, is Design & Illustration, Code, Web Design, what else? Photo and Video, Listings and Music and Audio. Okay, and finally, the last or actually it's not the last but it's the last menu item that has a submenu, right? This is for eBooks, and we have for Design & Illustration Code, Web Design, Photo and Video, Business, Music and Audio. Thankfully the keys were all the same. And finally, we have a list item right here with an anchor tag that doesn't actually have a submenu, it's just a simple link that leads to another page. So in here, I'm gonna say Pricing, all right. So I think we got everything here, let's actually take a quick look in Chrome. And see if our structure is correct, so we have the very first menu item. It has a submenu, and that submenu, or each menu item from that submenu also has a submenu. So, we can think of these like level one links, level two, and level three. And then we have another level one link which only has a submenu. Same goes for eBooks and finally Pricing is, well just a simple link. So with that we've actually finished the markup part, and what we have to do next is start styling the whole thing. Now before we move on, we're actually going to take some questions. So if you have any questions, please leave them in the Livestream chat, let's see. Okay, so here's a question, when should you use the nav tags? Well, the nav tags, you should use them to make your markup more semantic, really. They don't do anything special, right they don't style differently and they don't have a specific functionality. You just use them to make your code more readable, more semantic. And to you know inform who ever is reading the code or even yourself if you're going over the code later that, that particular element should be treated as a navigation, and that's all there is to it really. So it seems that's all for this section, let's move on to the next section, which is the styling of this menu.