FREELessons: 7Length: 47 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 The Finished Layout

Once you have learned how to set up the first section of your web page, you now know everything you need to know to finish up. In this lesson I’ll walk you through laying out the other sections of the page.

2.4 The Finished Layout

Now that we've built out section 1 of our website, you have all of the tools you need to move forward. All we're doing is we're building grids, and then laying out our content within that grid that we've set up. It's actually a very simple process once you've seen it once, you know how to do it. Having said that, I do wanna walk you through the final site, so that you can get a good idea of how we've set everything up. So you'll notice in your project files folder that there is a folder called site-final, and I've opened that up in brackets here, and we can scroll through that and see what the rest of our slide looks like. We've basically just filled out all of our content including a bunch of text, it's not just images. And then in our CSS, I would advise you to look through that very carefully as well to see what's going on there, cuz we have a lot that's going on in each section. So basically the way this works is we have a particular section ID here, so here's section 3 for example where we have our rows and columns set up and you'll notice we also have a margin top. Let's go back up to section 2 to look at this first item, so we have a margin top of -314 pixels. Where did that come from? Okay so section 2, if we look at our site, is the section that starts here with our first block of text, and if we don't put that margin there. Let's just get rid of this line for now and save it, and then refresh our page, you'll see that section 2 shows up naturally below section 1. Also, I would advise you to look at the Photoshop file for section 2 just to get used to how the grid set up is put together for section 2. For example, the only thing in row 1 for this section 2 grid is just the top section of this fall look book image. It's just this top section here that pokes out above our background. So again, take a look at that to see how the grid is set up and then take a look at your CSS to see how everything is layered on top of each other. So again by taking out that negative margin, our second section simply shows up below our first section, which is not what we want. We want it to overlap, and so what we needed to do there was we needed to add a negative top margin, and I just hit Ctrl + Z to undo that. And, This program for some reason, really likes to scroll up when you hit Ctrl + Z. And so I'm just looking for section 2 here. I'll hit Ctrl + Z again, there we go, so now our margin top is back. -314 pixels, I achieved that just by playing around with the number until it looked right. And so for example, let's say we set it to just -100 pixels and we wanted to start from there. So let's save that and refresh your page. Let me show you how I arrived at the exact number I wanted. What I wanted was this image, this background image here, you'll notice there's a big white gap between that image and the image above it. I wanted to move this up until the top of this image was touching the bottom of that image. And one way we can do that in Chrome is by inspecting something, so I'll just take this fall look book and inspect it. Right-click and click on Inspect. And then, when we hover over our items we can see those grid columns, or those grid items, and then we can go over to, let's find section 2, The container for section 2 which is right here. It's the section element with an ID of section 2, and then over here on the right we can see all of the CSS rules for that and here's our margin top of -100. Well the cool thing about Chrome is you can click on that -100 and then use your scroll wheel to change that value as you hover over it. So I'm gonna use my scroll wheel and I'm just gonna keep going until those two images meet up, and I accidentally scrolled the entire section down. You need to make sure you keep hovering over that value there as you scroll. So I'm gonna keep scrolling, keep scrolling until those two sections meet. And we see that they meet right at -314 pixels. So that's what I'm gonna jump back into my CSS file and change it to. So I'll just hit Ctrl + Z again a couple of times until we get that back to -314 pixels. And now when we save and refresh, it should still be where we calculated it to be. So section 2 ends with the bottom of this background image with the lady in the jacket. This other jacket here that's by itself this product image is part of section I'm sorry, that's section 2 down here, section 2 ends at the bottom of that image. Section 3 has this empty jacket at the top of it and so we've moved that up with negative margins as well. And this third section ends at the bottom of this image of the mountains and the next section has these three images in it. So we have a negative top margin on that section as well, so that's how we get everything to overlap. Another thing that I've done here and this won't always work, but in this particular case it does work, is you'll noticed that some of these images have a little orange rectangle next to them, a little orange brown rectangle. This one down here has that same rectangle. Well that's basically just an empty div with a background color. It's an empty grid cell that we've add it with a background color of orange. But we have to do something to get that to work right, because remember when we set up our grid system, we didn't use pixel values for the width of our columns, we used these fractional values. And when you use fractional values like that your images aren't going to fit exactly inside the boundaries that you've created. And for that reason when I first set up these images with these little orange squares next to them, the orange squares did not meet up with the corner of the image, they did not meet up. So what I had to do was I had to go into that particular image and once I set up the image within its columns and rows, I also set the image width and height to a value of 100%. Now, you wanna be careful if you're gonna set the width and the height of an image to 100%. You need to make sure that the image is almost at its original size because if you stretch it too much or squash it too much in one direction or the other, then the image is gonna look really weird. But in this particular instance our calculations were really close on our fractional values there, so it didn't stretch the image very much in order to get it to reach to the edges of its cell that it was placed inside of. It only had to stretch by a couple of pixels in order to get it to do that. And because it only had to stretch by a couple of pixels, it didn't distort the image too much. And you can't really tell that this image has been stretched in any way. But if we go to our CSS and scroll down to one of those sections that has an orange square next to it, and these are gonna be in section 4. You'll notice we have this ice-img and then ice-img-orange this ice-img-orange is the little orange square that touches corners with it. And you'll see that the ice-img width and height have both been set to 100%. Now again, that's something you wanna be really careful with, because you could easily squash or stretch an image to make it look really bad. But if you're only squashing or stretching by a couple of pixels usually that's okay. Now if that isn't an option, if it does end up looking bad when you set the width and height to 100% then, really the only way around that is to go back into your column setups, and use pixel values instead of fractional values. And the only catch with that is that's gonna make your responsiveness a little bit more difficult, because you're gonna have to create more media queries at different browser sizes to make it continue to look good. But those are the basics of how we set up our final site. And again, in order to really learn from this, you're gonna have to dig into the CSS and HTML and compare it to the Photoshop file, as well as to the site itself, to see exactly how all of this was put together. But hopefully, that gives you enough of an idea to how to put together a design like this using a Broken Grid Layout. So thank you for watching and I'll see you in the next video.

Back to the top