Build Your First: HTML & CSS

Loading the player…


Good day and welcome to Lesson 6.

Planning content and styles for features area:

For this lesson, we’re going to be styling the Features and the Photos Modules. If you look at the finished layout and we scroll down, we’ll come to the features area. The first thing is, the whole module is called Features. Inside that there are a bunch of rows with a class of row, but they also have a class of features __row. And the only difference between a normal row, is that they have a bit of extra margin to give it a bit of space between these things. Inside each row we have features __heading and features __text. Now generally speaking the text just needs to have its margins turned off. And the heading we’re going to set a little bit of margin underneath it. We’re going to set the font size etc. And then we have the features, large graphics. We have features bikes, features phone, and features safe. Now we’re going to be styling it for small screen first, so initially they’re all going to sit one on top of each other, and gradually when we go up to big screen we’ll be increasing things like the margins and spacing, et cetera. Let’s get into it.

Creating HTML elements for features:

Just like before, we’re not going to actually handwrite a lot of the HTML. So we’re going to open up our finished folder. And this time, we’re going to scroll down to our features area, then we’re going to copy that whole container. And we can replace it in our start folder. So we’re taking from the finished and putting in to the start. Scroll down the features and replace that whole container. And just saves a lot of typing. So all this stuff was in here before. The only difference is now, we’ve got a little bit of content inside here. So we have our headings and our dummy text.

Styling feature areas:

So let’s now go and style these feature areas. We’re going to start with features. Text-align center. The next thing we want to style is the features_row. And we’re going to give it a margin-bottom. That’s the equivalent of 35px on 16px. Next up, features_heading. And we’re going to set it to a margin of 0 0.75 em. It’s a tiny bit of margin on the bottom only and that can be extrapolated out to the equivalent of 12px. Just a small amount of margin at the bottom. And the font-size. It’s the equivalent of 18px. Now the feature_text is a paragraph and then has a default margin at the bottom. Now we can take that off by just doing the following. And now we’re going to style the three decorative containers. And they are. Now in each of these cases, what we want to do is actually give them a background image. So in each case you want to give it a height. Next up we need background. And we can use a shorthand property. So we’re setting our height, the background image, which is icon bike. Setting it to no repeat in the center. And this time, background-size contain, which means it forces it to stay inside the cont, constraints of the parent container. And we can copy that twice and we’ll modify it slightly. In our first example for phone, we’re going to use a height of 149px. And it’s going to be a phone. And for the next one, it’s going to be 80px and it’s a safe image.

Creating Feature styles for wide screens:

And now that we’ve done all the narrow screen versions, we used to, we just need to do a media query and do the wide screen ones. And what we might do is to copy some things because we’re going to need features, row and heading. And I’ll copy them down. I’m going to add some more in here as well. But we’ll paste these in. And features becomes text-align left. So when we get to widescreen. We want to change it from center to left. The rows are going to have a much wider, wider margin. They’re going to be 4.1667, which is the equivalent of 75px on 18, and now we need to put in. And last will be here, new rule here which is. And that means it wanted to margin to the right and break the layout. There’s a new rule I’m going to put in here which is. And 4em is actually the equivalent of 72px. Now for our heading, we just want to change the font-size to 1.556. And that’s the equivalent of 75 px on 18. And we want to set it to font-weight normal. Now, we’re going to do one extra media query here when it’s a bit wider than normal. And this one’s going to be media. So in this case, we’re going to do min-width 50 em. And what we’re going to do is we’re going to take out three bike, three icons area. The bike, the phone, and the safe. Copy them down. Put them inside here. And all we need is their heights, because we’re going to change their heights. The bike height is now going to become 154. The phone is going to become 296, and 141. And now it’s time to go and have a look in a browser and see what’s happening. If we reload and go down below, you can see we have our feature headings and text on our rows and the images have come in nicely. And you’ll see that if we drag them in, they drop down in size. And eventually we get standard content. And that’s because we’re styling. And right at the top here, the text-align center, and then we’ll change it to text-align left. So our images are small, text is centered, and then they jump up. It’s looking good.