Build Your First: HTML & CSS

Loading the player…


Planning and creating markup for containers:

Next up, let’s look at containers. The overall layout contains a series of containers inside the main rows. Now these containers are different widths and they’re used to help center the layout in the viewport. You can see we have some of our containers are wide and some of them are medium and we also have a container-narrow. So as described before there’s no module here. So these aren’t modifiers. We’re going to use three distinct classes, container-narrow, medium, and wide. Let’s go into our exercise. Let’s open up our index file again, and this time we’re going to go and add in all of our containers. So under our banner we’re going to write our first one. And the classes we’re going to write are row, and then container-wide. So we have a header element with a class of row container-wide. Now we can copy these and change it to a section. And change it to a row with a container-medium. So this is our banner area, we have a header with row container-wide and a section with row container-medium. Let’s copy that and move further down the page. And we’re looking under features. Now, in this case, we’re going to change this to a div. And in this case, we want this to be medium still. So, row container-medium, and I’m giving it a label of medium just so we can see what’s going on. Now if we scroll down a bit further, you’ll see that photos actually doesn’t need a container. But there will be one under testimonials, so we can paste in here again. Now this one’s going to be a section again, and it’s going to be narrow. Then, under facts, we’re going to use a section again. And this one’s also going to be narrow. And then for press, I’m going to do section again, and this one’s going to be wide. And then finally for footer, we need to change this to footer. And we need it to be set to wide.

Styling containers:

Now let’s go and style our containers. Let’s scroll up under our containers. And we’re going to write our first rule in here. We’re going to actually write container-narrow, medium, and wide. So setting all of them to a padding left and padding right of 1.5em, which is just a little bit of a when we’re in small screen. We’re also setting them to margin 0 auto, which means that I’ll have auto margins on the left and right. Which means they’ll be centered inside our rows. And now what we want to do is to style each of these individually. So container-narrow, max-width 34em, background yellow. This is setting the maximum width to 34em,which means it can go smaller but never wider than 34em. And we’re putting a fake background color on there, just so we can see it when we look at it. Now we’re going to copy this twice. For the medium, we want to change this to 52 and green. And then 58 and lime. And the one other thing we need to do is to copy these three. And we’re going to put them down below inside our media query, but we’re going to change, take out that margin, and we’re going to change these to 2em. So there’s a bit more gutter when we’re at widescreen. And now it’s time to go and look at it in a browser. And if we reload, you’ll see straight away that we now have container-wide,container-medium, and container-narrow. So we’re getting closer now to being able to put our content inside these. And if we reduce the width the down, you’ll see we’ve got a nice little gutter going on, which is stopping them from butting right up against the page. Keep in mind that we’re going to get rid of these very soon.