4.2 Add Unstyled Content: HTML and JavaScript

Hello, and welcome back to Responsive Web Design Revisited. In this lesson, you're going to learn how to add all the required HTML for each of your content elements. And we're then going to get all of the responsive functionality, layout, and topography in place, before we add the visual styling that you created earlier in your style tiles. And we're creating this vanilla version of your site as a separate stage before adding styling, so that A, you can focus on function over form to begin with. And B, so it becomes much easier to produce multiple versions of your site, with different styles, should you need to. This is particularly useful for things like producing client revisions and multiple versions to show for approval. Now this is your basic code shell from the last lesson, and all we've done is just delete that original placeholder content that we did our first round of testing with. All right, now let's jump into adding the markup. We're gonna add just the HTML for each one of your content elements. Now it's always a good idea to start by just focusing on your HTML, to make sure you get that right, before you worry about any of your CSS. So you wanna make sure you've got really light, clean, semantic markup, that you've got your schema.org markup in place, and that you've also got all of your accessibility requirements covered. So the central process that you wanna follow in this stage is to refer to your content plan, and build in the HTML for each one of these blocks, as I like to call them, and each one of these content elements, basically just one at a time. And as you go ahead and build each one of these in, then you can refer to the text content that you've assembled, and fill in the content for each, as you go along. And the first of our blocks that we want to code in is the header and menu block, and that's going to contain the logo, the business name and the nav menu. So let's go ahead and code that out. So we know that's all gonna be happening inside a header, so we will use the HTML5 header element for that. And I'm just going to add a little bit of extra markup to this opening header tag. So that gives us our wrap class that we created earlier, which will make sure that this block never goes too wide; but that always takes up the maximum amount of space on anything that's smaller than 75 rem. We've added our clearfix class, because we know we're going to have floated elements inside the header area here, and we know that we need to clear after them. And this is our ARIA landmark role, and this is our schema markup. And I'll provide links where you can have more of a, a read in detail, about what these things do. Now we can add our logo and business name. Right, so we've wrapped the logo and business name in a div that will just allow us to control their alignment and their positioning, a bit better than if they were just sitting out by themselves. We're loading in our logo. I had dropped the logo image file into our images folder earlier on. And we've added the business name inside a set of h1 tags. Now I've also added this project to Prepros, just like we did earlier, so that we have our local host server running a preview of this site that will live reload every time we make a change. So we'll save that, and check out what we have so far. Okay, so there's our logo, and there's our business name. Now that has no CSS applied to it just yet, because that's what we'll be doing a little bit later. First, let's just get that straight markup in place. Next up, we're gonna add our nav menu, and for that, we need an HTML5 nav element. So again, we've got our schema markup in place, and we're using the correct role for accessibility purposes. Now because of the way HTML5 works, a nav element actually needs to have a heading inside it, and I'll show you why shortly. So this heading, Main Navigation, is for functional purposes, it doesn't really need to be seen, so we'll also apply the class, hidden, to it. Now we know that we are gonna be using both an expanded menu, and our collapse menu, that is gonna have a little opening and closing icon. So before we actually put in the menu itself, we will add the icon that will be used for our collapse version of our menu. And now we can go ahead and add the menu itself. And we'll just be creating this by way of an unordered list. So what we've done here is, we've just grabbed all of the menu items from our assembled content. And each one of them has been added as an individual list item that's linked. And you'll notice, also, where we have a child menu item, we just included a little span at the end of the parent menu item's link. And this is what we're gonna add functionality to later, that will allow the menu to be opened and closed with that touch interactivity that you saw in an earlier video. Okay, let's check this out now. All right, so there is our menu. And now let me show you why we added that hidden, heading on the nav element. This is an HTML5 outlining plugin. And you can see that that has now given the nav menu a, a marker in this little outlining it's like a table of contents, basically. Just for contrast, I'll show you what that would look like if we didn't have this heading. Now without that heading, you get this, Untitled NAV. So by including that heading, it just makes sure that we get a good solid HTML5 outline. So that is the first block of our site. And that's also the end of our HTML5 header section. We're gonna have a footer at the very end of the site, but in between that HTML5 header and HTML5 footer, we're gonna need a main section and that's gonna hold all of our other blocks. All right, so referring back to our content plan, next we've got our hero unit. So for that, we're going to add a section. We've added a class name to that section, so that we can, we can style the background color, as we had planned in our style tiles. So even though you're going to be only creating vanilla CSS right now, when you know that there are going to be styling requirements based on what you've done in your style tiles, you can still lay down that foundation. So you can still add classes that you can latch onto in the later stage. And then we've also dropped in the content from our assembled content. So we have our headline, our subheadline, our Buy button text, and our More Info button text. So those are all in place right away. And while we're at it, let's also add our other main area sections. Now you'll actually go through and do these, one at a time. But rather than going through each individual element too slowly, we'll just go through this relatively quickly, so we can move on to making this all responsive. So we've got a section for each one of these areas, each one has the appropriate heading tag applied. And we have some preparatory classes again. And then the other thing that you'll see is, you'll see some of these classes in place, fa, fa-cogs, fa, fa-line-chart. And what these do is, they place icons from the Font Awesome library. And I'll show you that in a bit more detail shortly, but first we'll just save that, and check out our progress. So that's all coming together nicely, we're getting all of our content in place. And that is almost ready for styling. And the last place that we need to add content is at the footer. So we'll just drop in the code for that. [BLANK_AUDIO] So we've got our HTML5 footer. Again we've got our ARIA roles, our correct classes, schema.org markup, and we have our copyright notice, and our icons. Now you, you'll get this code as part of your download. So you'll be able to go through all of this in a bit more detail, if you'd like to examine the HTML more closely. So that is now all of our content in place. Okay. Next, we're going to enable our Font Awesome icons. Now I mentioned just a moment ago, that you will have spotted these funny looking little classes. Now they are Font Awesome icons, and to make those work, we're gonna jump over to the Font Awesome website. Now if you go to the Getting Started, or Get Started page, rather, they'll provide you with this little snippet that will let you load Font Awesome directly off their CDN. Now you can download the whole font yourself, and serve it up from your server, but I prefer to go with this option, because it's more likely for people to have a cached version of the Font Awesome library already on their machine. So we'll drop that into our HTML. And now, this is really cool. That immediately makes all of the Font Awesome icons available to your site. So all you need to do is, just grab a copy of the code that they provide you with here, and just add it as a class, just like you saw us do. Just let me find one. Here. So you just add fa, for Font Awesome, and then you just paste in the specific code for whatever icon it is that you've chosen. And I had already chosen the icons that I wanted to use, earlier, as part of the content plan. So I was able to then just drop those little snippets into the, the classes for each one of the places that I wanted to add one of these icons. So all those classes are already in place in our HTML. So now, just by adding in the link to Font Awesome off the CDN, that will just instantly make all of these icons appear. So we'll have another look at our site. And there are all our Font Awesome icons, so that's really cool. And there's just one more thing that we need to do in our HTML to get ready to start producing the CSS, and that is to add support or add access to the Google font that we want to use. And I just add the link in, and this is just the link that's been provided via the Google Fonts website. We'll save that. And now when we go ahead and produce our CSS, we will be able to use the Lotto font that we have been incorporating in our style tiles. And we have one last step before we move on to the CSS, and that is, to add some Java Script that's going to enable our touch interaction on our menus. Now again, I won't go into the Java Script too heavily here, but what this does is, it just looks up that little span tag, that I pointed out earlier, that has our little plus icon in it. So it looks up wherever there's one of those span tags in your navigation menu, and it turns that span tag into a switch that will allow people to open and close that child menu as they need to. And then the second part of this code allows the navigation icon to work, that's going to open and close our collapsed menu, our compact menu. And you'll remember that from the earlier video, where we demonstrated everything that you'll be using. So if you're into JavaScript, feel free to have a close read of this this code, and if not, just feel free to use the code as is. You don't necessarily have to go through it line by line and understand it. You can just use it, and as long as you're comfortable with writing up the CSS that has to go along with it, that's really all you need to do. And that's what we'll be covering in the next lesson. In the next lesson, you'll get your vanilla CSS in place, so all of your functionality is fully operational, your essential layout is in place, and then everything will be working beautifully, and ready to have styles applied to it.