Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:17Length:2.2 hours
  • Overview
  • Transcript

3.1 Code Up the Master Layout

Hello, welcome back to Build a Classic Five Page Website. In the first section of the course we went through the design or the mock-up phase, and we got our overall layout designed. We mapped out the basics of how our responsiveness is gonna work. And we designed and laid out the content of each of our five pages. So now we're ready to start coding up our site. Everything in this site is gonna be pure code except for the JPEG images that we exported in the last lesson. So that's why we didn't have to worry too much about being perfect in the design phase, because it's in the coding phase that the website is really going to be coming together. And we're gonna be following pretty much the same set of steps that we did during the design phase. We're gonna start by creating a master HTML document that's gonna have the same content that we've got here in our master mock up. We're then gonna make that master layout responsive, then we'll go through and we'll create reach one of our five individual pages. Now you can use any code editor that you prefer for this, but I'm gonna be using ATOM editor. So if you wanna do exactly what I'm doing and you don't have this, then you might like to download it from SM.IO. And we're not gonna be using any super special tools. We're not working with CMS's, and we're not gonna be working with buildscript or anything like that. We're just gonna keep things really focused on the fundamentals. However, there are two extensions that I am gonna be using just to add a little bit of convenience. One is the Atom live server plug in. So I'll just show you how to get that. Go to Packages > Settings View > Install packages. And then search for atom live server. So that's this one here. This is just for convenience, because it will set up a live preview of the site that you're working on. And it will just automatically refresh your changes so you don't have to be manually bashing on that refresh button all the time. And the other package that we're gonna be using, that I'm gonna be using at least, is emmett. And this just basically gives you some shortcuts so that you don't have to type out every single character of your HTML as you go. So both of these are optional you don't have to use them if you don't want to, they're just gonna save you a little bit of time. The other thing that you gonna wanna do before we start coding is open up your project folder in the side tab here. So you do that just by going up to file and add project folder. So then, you're gonna be able to see all of the files that we're working on as we create them. All right, so let's get started. The first thing we're gonna need is an HTML file. So just right click in this Project side bar and say New File, and then we're gonna name the file master.html. So that is supposed to be in the top level. Now we're also gonna need a CSS file to hold all our styling. So once again New File, style.CSS. Opps, did it again. That's supposed to be in the top level folder. All right, so now we're good to go. We're just getting the basics of our HTML, with Emmet installed all you need to do is add in an exclamation mark and then press tab. So that gets most of what we need in place right away. Change this title to Our BnB. And now the next thing that we need to do is make our fonts available that we need and also loading our style sheet. We know we're working with the poiret one font and raleway, so we're gonna head to Google Fonts. We'll search for Poiret One, there we go. We're gonna add that to our collection. We're also gonna search for Raleway, add that to our collection too. Now we're gonna customize because we need a couple of different weights of these two fonts. For Raleway, we need the regular font, so I've got already that. We're gonna need also the light font, and we're going to need the bold version as well. And for Poiret One, there is only regular weight so that's automatically taken care of. Now we can copy this link here, this link element, and we can paste it in to our head section. Now we've got access to the fonts that we need. And then we just also need to add in our style sheet, And there we go. Now we've got to go, I'm gonna spin up this Atom live server. So I'm gonna go to Packages atom-live-server and hit Start server, and then it's just gonna open up the server in your default browser. So there's the directory that we've got this pointed at. And now we can view our master HTML file that we're working on. Now we can't see anything yet so let's get some styling in. I'm actually just going to close that down for now and make a little space. And I'm gonna drag this over to the right so we can see both our CSS and our HTML at once, make things a little easier. So let's add in some body styling. We're gonna get rid of the default body margin that's always in the body element, set that to 0. We want a different background color, which we're gonna pull from our design here. So if you recall we set our background color, On each of the pages, so now we can get that in here. The default font family we're using is raleway, so add that. Raleway and we're just gonna add the default sans-serif font as a fallback. We want the normal text throughout the site to have the font weight of 300, so that's gonna be lightweight. And for the color, you'll recall I said that even though in our design we had the text color set to black it can look a little different in the browser. So we're actually gonna set the font color to 222 which is just gonna give a slightly lighter color. It will actually make it look more like it did in the design. Now let's add in this site wrapper, we do that by adding a dev with the class site_wrap. With M installed, you can do that quickly by just typing in .site_wrap and then hitting Tab. Save that, and now we can add in our styling, site wrap. Our background color is white. Now we're actually gonna do a little bit of trickery here with the layout. We know that we want our site wrap here to be 1200 pixels wide. And we're gonna be working with rem values for most of our layout, and to convey our pixel value to rem values you just work off the default font size for most browsers, which is 16 pixels. So then you just divide the pixel value that you want to convert, which is 1200, by 16, which gives us 75 rem. So we want this to be 75 rem width. I'll put a link in the notes below this video to some learning guides where you can learn all about rem and where and why you should use the rem value. So even though we know we want this to be 75 rem in width, we also want it to be fluid so that when we have a narrow screen, the side wrap is always gonna fit inside that narrow screen. So instead of saying width 75 rem, we're gonna say max-width 75rem, so there's lots of room on the screen. It's gonna stick with that 75 rem width, but then we're also, actually just put this on the line above. We're also gonna set the width to 100%. So that means it's gonna try to be 100% width if it can, but never to any greater than 75 rem in width. So that is just some automated responsiveness that you can add in pretty quickly. All right, now we're gonna add our spacing above here, we set this to 32 pixels which is equivalent to 2 rem. So let's set our margin to 2 rem in order, so that's gonna give us vertical margins of 2 rem and it's gonna center. We're gonna set a border as we did in our design which was 1 pixel, that was a solid border. And we'll get our border color. We just copy and paste it from here. There's our border color. Because we've already set a width on our site wrap and we've added a border, we wanna make sure that that border is not stacked on outside of our existing site width. So, we're gonna change the box sizing for this to border box, which will ensure that, that one pixel border is gonna be contained within our 75rem of width, right? Now, let's see what we've got. So far, you can just see that we've got our lighter blue background. And this Is how our site wrap looks. What you're seeing right now is the border, itself. That is gonna expand when we start putting some content inside the site wrapper. So, let's go ahead and do that. First off, we're gonna add our header, which contains our site title and navigation bar. I'm gonna add in a header element. I am just gonna give this a y area role of banner. That helps to let assisted technologies know what the purpose of this particular header is, that this is the banner for the whole site. Now, we need to get our site title in and we are going to do that by adding in an h1 element. With the class site_title. So this is image shorthand here, I'm just putting the element and then the class name and hitting tab. Now it automatically expand that for us. And we're gonna just add in our BnB. So now let's apply some style to the header and to the site title. Add in a header element. You're gonna make sure that this doesn't collapse down lower than we need it to be. So we're gonna give it a minimum height and we're gonna set that to 11 rem. Now we know we're gonna have our site title and a navigation bar. And what I'm gonna do is use a CSS grid to control the layout of these two. So I'm going to set this to display grid. I'm going to use grid-template-columns to determine how wide the site title space is and the navigation space would be. So, the first column is going to contain the site title and I'm going to set that to be 22rem in width. And then the second column I'll just set to be auto which means it'll just fill up the rest of the space. So that's gonna help us keep those two elements nicely laid out. And then we just need to put a border along the bottom, once again conforming with our mock up that we created so we need that to be 1 pixel solid. And we can again reference our design to get the correct color codes. Here we go, now we just get some side title coding in as well. And what I'm actually gonna have to start doing is copying and pasting in some chunks of code because it's gonna take a little bit too long if I type everything out manually. But I will explain everything that's going on in the CSS that we are adding in. So, we've got our site title styling here. So, it's just adding in the correct font styling here with the right weight, font-family, and font-size. Setting the correct font color. Here we're setting the line height to 11rem, so that the height of this site title is going to match the height of the header. And what that will do, is automatically, vertically align our text in that space. And then we're setting the margin to be zero on the three sides, except for the right hand side which will have some space. So because we're using an h1 element, which normally has some margins above and below it. But we don't want that, we want it to be just vertically centered according to this line height that we just adding in. So we zeroing out the top and bottom margins. We always want some space though, in between the title and the navigation bar. So we're adding in a margin on the right of 3rem. All right, so now, let's see what we've got. All right, so it's starting to come together. We've got our site title in there looking just right. Now, let's get our navigation menu in. For this, we're going to use a nav element. And we'll set the y area role to navigation. Now, inside our navigation element, we're just going to add links. Because that menu is fairly simple, we don't really need to worry about working with lists, just straight up links is gonna do the job for us. So I'm just going to copy and paste these ones in. So I've just assumed the names that we're gonna give to each one about five pages. And we just got a link going through to each one of those pages. I've also applied a class named active to one of these link items. And we're gonna use that to add in the active styling we designed as part of our markup phase. Serve that out. Now once again I'm gonna have to copy and paste in this code. Cuz it would just take a little bit too long to make you watch me type everything out. And then we'll quickly run everything. So we want to write a line the text item in that nav element so that we're pushing these items over to the right side of our header. But we're putting some spacing on the right hand side to make sure that it is not flashed with the edges of the page. Here we're just styling the links with the appropriate sizes and colors from their mark up. We're setting the display on these links to inline block so that we can properly control the height of these text items and the margins around them. Here we are setting the height and line height again to 11rem just like we did with the site title. And that's gonna automatically put our link items in the center on the vertical axis in our header. We've got this margin left line here is gonna ensure there is a sufficient amount of space in between each one of the link items. Then this one here is gonna make sense after we take a look at this styling here. This is our active menu item styling. So when we hover over, or when we have an active menu item, it's gonna turn the link to blue, and it's gonna give us that border underneath that we decided on in our markup stage. And this adds four pixels of extra space to the bottom of that link item. So that's why here I've got a matching border along the bottom that's just in white, so it's invisible. Because otherwise when you hover it over the text item it's gonna make the text item jump up a little bit, because it's making the space for that new four pixel border. But if you've already added a border here, then the space is already been allowed for and you won't get a jumping effect. All right so let's save that and see how it's looking. All right, great so there's our active effect. And it's also applying on hover. And the spacing is all working out right. So that is the header done as far as the maximum width layout goes. To finish this section though, we also need to cut up our smaller width friendly menu as well. Now we're doing this whole site without using any JavaScript. So we're gonna use a little bit of CSS trickery to create this mobile menu. I'm just gonna paste in some more code and then I'll explain it all. All right, so first up I'm just gonna explain this code here is SVG code. And this is recreating that burger menu with the three lines. So we've just got three line elements inside this SVG. And that's all we need to create the menu icon. So to go along with that, we're also gonna add in some CSS to style that SVG. So that gives these strokes here that we've just added in a blue color, sets them to be five pixels wide. It puts a space in the right hand side of our SVG, so it doesn't end up squished up against the word menu that we are adding in there. And we're ensuring that our SVG is going to be vertically aligned at the middle This SBG is all contained inside this label element. And this label element is in turn associated with this input check box. So what we're gonna do is add some CSS that makes this check box invisible. But when we click on this label that's associated with it, it's actually gonna be checking and unchecking this check box. Without that thing seen on the screen. Then we're gonna use CSS to detect whether that check box is checked or not, and that will allow us to show or hide our navigation menu, depending on the state of the check box. I'm just gonna save that HTML, and I'm gonna drop in some CSS to start styling this menu. So we've got our class open.menu being targeted here, so that's this checkbox. We want that to be hidden completely, so that's what this code here is doing. Our label has the class burger, and at first we are hiding it, cuz we don't need that burger to be seen unless we're on the thin version of our layout. Then we're just adding some font sizing and layout controls here. Running a border across the top, and making sure that when someone hovers over this burger menu, they know it's interactive. So we're setting the cursor to pointer, which is the one that you get when you hover over a link. Right now in order to active the burger menu, the one that opens and closes, we're gonna need to add in a media query. So we're gonna have this menu kick in whenever the site is at less than that 1,200 pixels width. We're just gonna keep it nice and simple. So we're gonna set our media query to go off at 75 rem. And we're actually gonna do a bunch of stuff at once in this media query. So before we've actually gotten onto the navigation menu, first we're gonna reduce the margin around the site wrapper so we're at a smaller size. We're not gonna have that space above and below. With our header element we're also no longer gonna have two columns in the CSS grid that we set up to put the title on one side and the nav menu on the other. So by just setting grid template columns to 100%, now both of those columns have 100% width and that's gonna force them now to sit one on top of the other. Our site title. Now, instead of having that left aligned we're gonna have it centered and we're going to move that margin that put space on the right hand side. Now, we're going to change our navigation item so that instead of them being aligned over on the right, now they're all gonna be text-aligned on the left. And we've added some padding so that there is a little bit of space on the left and right side of each of the menu items. With this code here we're controlling the height of each one of the menu items. And once this media query kicks in, we're gonna make sure that we show the burger icon. So that, again, is this label here. Now this is where we get into the CSS that makes the burger work. By default, this is saying look for open menu, then burger, then nav. So that finds this, then this, then this. And what it does is, by default, it hides that navigation element. However, then this code here says, but if this open menu item has the status checked, then it changes from applying this CSS to applying this CSS. So now instead of being set to display none and having zero height, it's being sent to display block with height auto. So that then we show the navigation menu and in this code here. And here is just to color and style that menu once it's open. All right, so now let's save what we've done and check out our results. And the way we're gonna check out our result is by pressing Ctrl+Shift+I to open the developer tools. Then we're gonna hit this little bar here, which allows us to control the size of this screen here so, now we can check, we can see that our menu is kicking in exactly when we need it to. It's going from our full width layout design to our smaller layout design. And now if we hit this burger button here. There we go, not our menu is appearing as it should. Just bear in mind, that this is no longer giving you a hover effect just because this is now simulating touch. So whenever you see this little circle in Google Developer Tools, that just means, don't expect it to work in the same way as the mouse. And then if we hit this again, there we go, now that closes down the menu. All right, so that is working perfectly. Now all we need to do is add the last two elements, which is this main section in the middle where our content is gonna go and our footer. All right, so we don't have anything to put to the main section just yet so all we need is just a main element. And that's it, that's that part done. Down the bottom we need a foot element And we're gonna put a paragraph tag inside it, and that's gonna hold our copyright message that we added into our footer before. Which is just a copyright symbol and our copyright message. So you can copy and paste that symbol in directly or if you want you can write ©. And to style what we just added, we go back up here above media query. We don't really need to do any styling on the main section, but just to make it a little bit clearer, exactly what we have going on in our layout, we're just gonna give it a minimum height of 5rem. Just to put a bit of space in there and then we'll add in the styling for our footer. So we've set its height to 7rem. Make sure that there's enough space in there for our text. Got the background color and border color from our site mockup. Aligning the text in the center and setting it to white. And then to style the paragraph itself, we're just getting rid of the margin, the space that's applied above and below a paragraph by default. And we're gonna set its line height to 7rem, so that is matching the height of our footer. And just like we've done with our other text elements, that's just an easy way to get vertical alignment. So now we'll save both of these files, and there we go. So now we've got our complete master layout is in place. And as we shrink this down You can see that the footer is behaving just as we expected it would, so that's all working perfectly. There's just one last thing that we need to tackle and that is making sure that when we get down really small we don't end up with this giant title or with this toggle menu being split onto two lines. So to deal with that, we're gonna add another media query. This time it's gonna be at 22rem so that's fairly narrow, where that's gonna kick off using this code here to target our label. With this toggle menu text inside, it's gonna shrink the font size down to 6vw. The vw sense the v port width and when you say 6vw you mean 6% of the v port width. So that's gonna make that takes shrink to 6% of whatever size the view port is once this media query kicks in. So that's gonna keep it nice and readable no matter what size the view port is. We're reducing the amount of spacing on the left and right of each side of our menu item to make sure they're not too cramped. We're doing the same thing here, setting a view port width based font size. That's really useful when you get down to really small media queries. So that you don't have to keep putting in lots and lots and lots of media queries every time the text becomes unreadable. And then we're doing the same thing with our site title, setting that font size to 20vw. All right, so let's check out the results of that. So now when we shrink down, there we go. Now you can see that that title is shrinking down as we go. Now realistically, nobody is going to go this low on any devices. There are no known devices that are 98 pixels wide, so you don't really have to worry too much about things staying perfect at that size. Generally speaking the smallest you're gonna see an actually device get to is 320 pixels in width. So if you're at that width then you're golden. And if you've got a little bit more leeway either side of that then you're even safer. But realistically as long as the site works at about 320 pixels in width, then you're good to go. All right, ao that completes our master layout. Everything's in including all of the responsive functionality for this master layout. And that means that we're ready to start coding up each of our five pages. We're gonna start on that with the homepage, which we're gonna code up in the next lesson. I'll see you there.

Back to the top