All language subtitles for 072 Adding Grid Layouts to Our Website.en_US

Now, the next step is applying what we learned here to our TinDog web site.

And we need to make this section a six unit column, so that it takes up half of the screen,

and this image to be another six unit column, so it takes up the right side 50 percent of the screen.

But when it goes on to a smaller size, a tablet or mobile, we want it to take up 100 percent of the width,

so that we can see the image and the text and the buttons more easily.

So let's go ahead and do that now.

So, the first thing that I'm going to do is, I want to add a background color to our first section, just

so that we can see it more easily, and visually divide it from the rest of the content, so that we know

exactly what we're working on.

So, in order to do that, you can see that we've got a number of these sections inside our body,

right?

And the first section includes the navigation bar as well as the title section, and this section has

an id called title.

So let's go ahead into our styles.css and target that title section.

I want you to see if you remember what the selector was in order to change the background color of that

title section. And the background color is going to be the hash tag or the pound sign and then followed

by ff4c68.

So, see if you can change the background color of this title section by using the right selector.

So, pause the video and give that a go.

What you should remember from our CSS section is that in order to target the actual elements, we simply

add in the name of the element,

so for example body.

Now, in order to target classes, we simply add a dot in front of the class name.

But, in order to target ids, as we've got over here, we need to use the pound sign or the hash tag sign.

So we have to say #title, which is the name of that id, and then we can start specifying our background

color property, and we're going to change it to #ff4c68, and let's check to make sure if

that works.

Brilliant.

So that first section now has this kind of reddish color, which means that it's working exactly as we

want it to.

Now I want this navigation bar to not have its own color.

I want it to just be a light colored navigation bar.

So we can go ahead and remove the Bootstrap class that gives this background a dark color, which is of

course the bg-dark class.

So now let's hit save and refresh.

And you can see that our nav bar

now looks like it's a part of that first header title section.

Now here comes a challenge.

I want you to use what you learned just now about the Bootstrap grid system to make the title and the

download buttons take up 50 percent of the width on the left, and the image of the phone take up 50 percent

of the width on the right.

And this is on the large desk top size.

When we get to the tablet sized, then they should each take up 100 percent of the width of the screen,

and the same for the mobile sized.

So pause the video, and see if you can complete this challenge.

All right.

So how did that go?

Well, the first thing that we need in order to use the Bootstrap grid system is to have that div that

encloses the entire row that we're going to use the grid system on.

So, we've got this div here already which includes the heading, the buttons, as well as the images, so we

can simply give that one a class of row.

Now the next thing that we need is to separate the other parts of the content into two separate divs.

So that means that our h1 and buttons will have a div and the image will have a div.

So let's create a div here and put our heading and button inside.

And now we should have two divs that are going to help us separate out the content using the grids.

So the first one we're going to give a class of col-lg-6, which means that on any size

that's the large size, which means the laptop size or bigger,

so a laptop or desktop,

then we're going have a six unit column that's going to contain this content, but any size smaller than

that will take up 100 percent of the width of the screen,

so that's tablet and mobile.

So we're going to do the same thing over here to the div that contains the image.

So it's also going to take up 50 percent on the large sizes and 100 percent on the smaller sizes.

So let's hit save.

And once you refresh your page you should have something that looks like this.

Now, remember, from our previous code, that you don't have to specify the medium 12 unit or the small 12

unit, because it's by default 100 percent, and you should read this code as on any screen size that's

on the large size or bigger,

so laptop or bigger, it should be a six unit column, and anything smaller than that will take up the full

width of the row.

And now we have this responsive title section, where we're using the screen real estate with the maximum

efficiency.

So the last thing that I want to do before we finish off this lesson is, I want to add some text styling,

namely to change our fonts here.

So, I want you to go over to the Google fonts and to embed the Ubuntu and the Montserrat typefaces into

our web site.

So pause the video and do that now.

All right. So, you've done this before, so it shouldn't be too difficult.

So we're just going to go to fonts.google.com, and we're going to search for those two fonts

I mentioned.

So one is the Ubuntu font which we're going to use for our logo,

and the other one is the Montserrat font, which we're going to use for the majority of the body of our

web site.

So now we've got our two families selected, load time is still relatively fast, so we can just copy that

link and head back over to our index.html and add it into our header section.

So now let's hit save and we're going to use some of those font families.

So the thing that I want to change the most is the style of the h1, because it's going to determine

the size of it and that will affect our layout,

so I want to do that as early as possible.

So, I want you to change the font of this heading to a Montserrat-Black.

And I want the font size to be a 3rem

and the line height to be 1.5 so that we get a little bit of space between it and anything else

around it.

So pause the video and try to complete this challenge.

All right.

So the first thing we need to do in order to change this text is figure out what is the element that

we need to target.

So the easiest thing here, is we've already got an h1, and we only have one h1 on the whole page.

So maybe we can just target the h1.

So let's go ahead and target the h1, and then we're going to change its font-family to Montserrat-Black.

So, if you want to see what these fonts look like, you can always click on the font and scroll down to

the different styles, and you can see what those different styles may look like.

So if you wrote Montserrat-Thin, for example, then our text is going to look exactly like the style

specified here.

But in our case we want Montserrat-Black, which is the heaviest weight that this typeface has.

And the other thing we wanted to change was the font size.

We wanted it to be 3rem, so massive.

And then we wanted to change the line height to 1.5. Remember line height

you don't usually specify a unit, because it's two times or one times and you don't actually need to

add pixels or rems or anything like that.

So now let's hit save and let's look at our updated style of our title, and that's looking pretty nice.

So, in this lesson, we've learned about grids and how to use it to make our web site responsive, so that

it uses the available screen real estate to the max.

Now, in the next lesson, we're going to learn about another Bootstrap layout element called the container.

So for all of that and more, I'll see you on the next lesson.