Build Your First: HTML & CSS

Loading the player…


Planning the columns for the layout:

Good day, and welcome to Lesson Four. This lesson is all about creating columns and cleaning up. First of all, let’s look at our columns. The layout contains a series of columns. And ideally, we want to create a simple grid that can then be used throughout the layout. So you can see we have something like col-wide and col-narrow. And in some cases, they swap around. So, we can also have col-wide and col-narrow, and col-narrow–right for modify, and col-wide–right for another modifier. We’ve also got col-medium, and we’ve even go col-narrow. And at the bottom, we have col-wide and col-narrow–right. So we end up with our class names of col-narrow, col-medium, and col-wide. We also have two modifiers which are col-narrow–right, and col-wide–right.

Creating HTML elements for the columns:

Let’s now mark up our columns. Open up the index file, and we’re going to scroll up near the top, and the first thing we ought to look for is the feature area. And this is where we want to add our first column area. So I’m going to add it in underneath here, and what we need here is a div with a class of row. And inside, we’re going to setup two different divs. The first one is going to have a class of col-narrow–right, and we can put that in there so we can see. And then we can copy that. And this one is going to have a class of col-wide. So there’s our first little module. Now we’re going to paste that, three different times. So let’s do the next one down and again this one has row. But this case, we want that to be narrow and this one to be wide–right. And then we’ll copy the first one again. And now this one again will be narrow–right and wide. And that’s it for our feature area. If we move down further, we’re going to put our next one under facts. And what we’re going to do here, is we’re going to see it, our div, and it’s going to have a class of row, but also container-medium. And inside there, we’re going to see it, four different calls. Let me go up here and steal them from above. Put them in here, and these are going to be called narrow. Two, three, four, now these are for our four little icons. So row, container, then col-narrow, col-narrow, col-narrow, and col-narrow. Now, if we scroll right down to our footer, we’re going to be doing some work in here, as well. So, in here, we’re going to need a class of col-wide, and one underneath of col-narrow–right. Now, there’s one I’ve forgotten further up, so we’re going to scroll back up to our photos, and we’re going to put two new divs in here. And the first one is col-medium. Now these are going to be for those two very large photos. And we’ll do that same for the second one. Let’s have a quick look down our page. Our first set of columns comes in under the features, and there’s actually three rows. We have the narrow over at the right. The narrow over at the left in our second batch. And then our third row, we have the narrow over at the right again. Under our photo, we just have two col-mediums. Under our facts, we have one row with four narrow columns inside of it. And then inside our footer, we have a col-wide and a col-narrow–right. Time to go and style our columns.

Styling the columns:

Open up layout.css. Now let’s scroll up under columns here. And what we need to do is at this point, we are going to set a column just with background colors. Going to copy that a few times. Now the background right is also going to be pink. Then we need to set medium, and we’re going to set that with a value of silver. And these are just arbitrary colors for now. Then we need wide, and wide–right. And then we need narrow. And we’re going to give these ones a margin-bottom of 1.5 em. So what we’re doing here for these ones, we’re just giving them some colors just so we can see what’s going on. And what we’re doing here is, for the narrow and narrow–right, we’re giving it a bit of margin at the bottom. And that’s so that a small screen, those middle images will sit a bit away from the text. Now we also need to add some rules down inside our media query. Now because we are actually style our grid, now things are going to get serious. The first thing we need to do is to float all of our columns. So, narrow, medium, wide set to float left. We can copy that again and we’re going to set this to narrow–right and wide–right, and these will be set to float right. And next up what we’re going to do is set our wide and wide–right to a width of 61%. Our medium, we’re going to set to 50%. And our narrow and narrow–right, we’re going to set to 25%. But we’re also going to add, this is the margin that we’ve added up here, and we’re going to take it off. We’re going to write wide screen. So that should do our styling. Let’s go have a look in the browser. And if we reload, you can see that we have our columns going on here. So we have our column wide and narrow right, column narrow and column wide right, column wide and narrow right. These ones aren’t working so we’re going to have to go and take out that word photo. And then down below we have our narrow columns and our wide and narrow. Let me just pop back in to our HTML file, and we’re going to take out that word photo, because it’s causing us some grief. There we go. And if we reload again, that’s better. So, it’s looking a bit odd at the moment, but we have our container-wide, and down below, we’ve now getting some columns appearing.