Build Your First: HTML & CSS

Loading the player…


Planning and creating HTML elements for testimonials:

Good day and welcome to lesson seven. In this lesson we’re going to be styling the testimonials and the facts modules. If we look at the finished version of our layout and scroll down past the header, and the feature, and the photos area, we come to our testimonials area. And really, the only things we need to focus on are the overall module or the container, which is testimonials. We have the testimonials heading. We also have the testimonials quote, and we also have the source for the quote. And we’ll be looking at those in both wide and narrow screen. As always we’ll we’ll start by styling the small screen version, and then putting media queries so it can style up the widescreen version. For this step we’re going to copy some of our markup out of the finished folder as we did in one of the previous steps. Just because there’s a lot of markup and it saves a bit of typing. So open up finished > index. And I’m going to scroll down to testimonials, and we’re going to copy that whole chunk. And we’re going to go and paste it into our start folder, in the index file. So we’re going to replace testimonials like that. Now, we haven’t really changed much about it. We’ve added a new class here called testimonials and we’ve got some content inside, including a bit of text for the heading, an avatar. And then you’ll see we’ve got a blockquote. And blockquotes are used for block quotations. And that’s a perfect example here. And then we have testimonials quote and testimonials source. So let’s go and give it some styling.

Styling tetimonials:

We’re going to open up our modules and go down to testimonials. And the first thing one we want to do is to set it to text-align center. Then we need to style the testimonials heading. And the first thing we need to do is to set a bit of margin on the bottom. And let’s have a look at the maths behind that. That is actually the equivalent of 25px on 16px. Then we have a font size. And that’s equivalent of 21px on 16px. So that will be the equivalent 21px in font size. Next up, we want to do the quotation. And we want to set that with a margin-top. It’s equivalent of 25px. And the last one you need to do is the actual source. And as it’s a paragraph, we might want to get rid of the margin at the bottom.

Creating tetimonials styles for wide screens:

Now we also need to do some work at widescreen. Again, we have set it to a min-width of 38 em. And what we can do is go and grab our testimonials heading down to our source. I’m going to copy them into our media query. And we’re going to adjust them for widescreen. So the first thing we’re going to change is this is margin-bottom. And we’re going to set this to 1.3225. And we’ll come back and look at this in a second. We’re also going to change the font size to. Now that is equivalent over 18 of 34.34 over 18.So, this should actually be 34. And this is actually 45. So let’s start at the bottom. We’re actually saying the font-size, by default from the body, is now 18px for widescreen layouts. If we set into 34, the calculated value would actually be 1.889. So now the font size is 34 which means that and em is 34. So if we want to be 45, we divide 45 by 34. And the margin bottom to be equivalent 45px is 1.3225. The only thing we need to do is set this to font-weight normal. And down below, we’re going to change this to a font-size value, and copy this one in. And it’s going to be 1.333. And that’s the equivalent of 24px. And we need to do the same for our testimonial. We actually need the font-size, though, to be 1111, which is the equivalent of 20px. And there we have it, the very simple styling of our testimonials. Now we need to go and have a look at it in a browser. Let’s reload and scroll down a bit, and then you can see our testimonials area. And if we pull it in, you can see that’s it still working quite well, that small screen.