All language subtitles for 10. Adding Grid Layouts to Our Website

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

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

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

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

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

So let's go ahead and do that now.
6

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

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

exactly what we're working on.
9

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

right?
11

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

an id called title.
13

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

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

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

by ff4c68.
17

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

So, pause the video and give that a go.
19

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

add in the name of the element,
21

so for example body.
22

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

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

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

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

that works.
27

Brilliant.
28

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

want it to.
30

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

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

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

course the bg-dark class.
34

So now let's hit save and refresh.
35

And you can see that our nav bar
36

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

Now here comes a challenge.
38

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

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

of the width on the right.
41

And this is on the large desk top size.
42

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

and the same for the mobile sized.
44

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

All right.
46

So how did that go?
47

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

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

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

can simply give that one a class of row.
51

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

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

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

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

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

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

so a laptop or desktop,
58

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

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

so that's tablet and mobile.
61

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

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

So let's hit save.
64

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

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

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

on the large size or bigger,
68

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

width of the row.
70

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

efficiency.
72

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

namely to change our fonts here.
74

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

our web site.
76

So pause the video and do that now.
77

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

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

I mentioned.
80

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

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

web site.
83

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

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

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

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

the size of it and that will affect our layout,
88

so I want to do that as early as possible.
89

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

And I want the font size to be a 3rem
91

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

around it.
93

So pause the video and try to complete this challenge.
94

All right.
95

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

we need to target.
97

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

So maybe we can just target the h1.
99

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

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

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

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

specified here.
104

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

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

We wanted it to be 3rem, so massive.
107

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

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

add pixels or rems or anything like that.
110

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

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

it uses the available screen real estate to the max.
113

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

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