Build Your First: HTML & CSS

Loading the player…


Planning and creating HTML elements for facts area:

If we scroll down past the header and the features area. Past the photos area and the testimonials. We’ll get to the facts area. And for this area we need to focus on a range of different areas. The first one is the actual facts container or the facts module. Inside there we have the facts intro heading. And the facts intro text. Then we have a series of list items. And in here we have list heading, list text, and list icon. And inside this we have an ID, and eye, a timer, and a chart. And as always, we’ll be focusing on narrow screen first and then wide screen version. Let’s get into it. As before, we’re going to copy and paste some of the markup out of the finished folder. So go to index. And we’re going to stroke, scroll down and look at facts. And copy that whole container. Then we open up start, index, and we’re going to push in our facts into here. And let’s have a quick look. So we have our section with a heading, and some dummy text, and then we’ve got our four containers. And inside our four containers, you can see we have facts-list, facts-list_icons and then id, eye, timer and chart. We have headings and text in each case. So then what we’re going to be focusing on when we’re styling them.

Styling facts intro area:

Let’s open up our modules.css. And we’re going to work under facts. So first off we’re going to set our facts to text-align center, at least in small screen. Now, we’re going to work on facts-intro stuff, and facts-list stuff. So first of all, facts-intro__heading. And I’m going to set our margin and font size. So, how do we calculate this? It’s actually 25px on 16px, which gives us our value. Next up is facts-intro__text. And, when you set it with a margin. And that’s the equivalent of 32 on 16. So that’s it for facts intro. And now we’re going to work on facts list.

Styling facts lists area:

I’m going to set the margin. And that’s equivalent of 4px on 16px. Then we need a font size 24 px. And then we need font weight bold. Now for facts list, we also need text. And this is just going to be margin: 0. Put that back up into one line. And now I need to style our icons.

Styling facts icons area:

So we need to set our first one, which is the, in some ways the parent, and then work off that. And I’m going to set this to display block. We’re going to set it to a width of 70. And a height of 44 px. And we’re going to set the margin too. And we’re setting the margin to naught, or 0, auto left and right and then bottom of 1.3333. And that’s the equivalent of 24px. Now what we want to do here is we also want to set the background repeat and background image. So that set our icons. And now what we need to do is to set the background position for the four different icons and they are. We can copy that three more times. And we’re going to change that to eye, and timer. And the last one is a chart icon. And then we just need to set their positions. So the next one down is 44 px minus. And it’s going to be minus 88 px. And then it’s going to be minus 132 px. Now what we need to do is to set how these will operate in wide screen.

Creating facts styles for wide screens:

So I need another media query. So we’re going to go up here and grab our facts intro heading. And facts-intro_text. And facts-list_heading. Again pasting down inside here. And we’re going to indent them. And fix intro_heading. We need to change the font-size from 1.5625 to 889. And that is equivalent of 34 on 18. We also need to set the font weight. And, for text. It’s going to be .25. And we’ll come back and fix that, because we need to look at the font size next. And that is equivalent of 20 px on 18 px. So now that we know that is 20 px here .50 px. And then for our facts list heading, we just need to change the font size to 1.556 and that’s on 18. That’s the equivalent of 28 px. Now, we’re going to have to go back up here a bit and we’re going to change that value. For this particular one, instead of being 38, we’re going to change this to 45em because we want this to occur at a much wider size. Now let’s go and have a look at a browser. And if we scroll down below, I hit reload. Straight away you’ll see all of our little fact areas and icons are now working.