0
1
00:00:01,230 --> 00:00:08,160
Now, the next step is applying what we learned here to our TinDog web site.
1

2
00:00:08,350 --> 00:00:13,940
And we need to make this section a six unit column, so that it takes up half of the screen,
2

3
00:00:14,160 --> 00:00:20,580
and this image to be another six unit column, so it takes up the right side 50 percent of the screen.
3

4
00:00:20,640 --> 00:00:26,880
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

5
00:00:27,150 --> 00:00:31,670
so that we can see the image and the text and the buttons more easily.
5

6
00:00:31,770 --> 00:00:34,050
So let's go ahead and do that now.
6

7
00:00:34,050 --> 00:00:40,680
So, the first thing that I'm going to do is, I want to add a background color to our first section, just
7

8
00:00:40,680 --> 00:00:46,530
so that we can see it more easily, and visually divide it from the rest of the content, so that we know
8

9
00:00:46,530 --> 00:00:48,560
exactly what we're working on.
9

10
00:00:48,570 --> 00:00:53,540
So, in order to do that, you can see that we've got a number of these sections inside our body,
10

11
00:00:53,550 --> 00:00:54,200
right?
11

12
00:00:54,270 --> 00:01:00,720
And the first section includes the navigation bar as well as the title section, and this section has
12

13
00:01:00,720 --> 00:01:02,970
an id called title.
13

14
00:01:02,970 --> 00:01:09,980
So let's go ahead into our styles.css and target that title section.
14

15
00:01:10,080 --> 00:01:16,800
I want you to see if you remember what the selector was in order to change the background color of that
15

16
00:01:16,800 --> 00:01:23,070
title section. And the background color is going to be the hash tag or the pound sign and then followed
16

17
00:01:23,070 --> 00:01:26,200
by ff4c68.
17

18
00:01:26,200 --> 00:01:35,030
So, see if you can change the background color of this title section by using the right selector.
18

19
00:01:35,040 --> 00:01:36,930
So, pause the video and give that a go.
19

20
00:01:40,720 --> 00:01:48,310
What you should remember from our CSS section is that in order to target the actual elements, we simply
20

21
00:01:48,310 --> 00:01:50,650
add in the name of the element,
21

22
00:01:50,650 --> 00:01:52,600
so for example body.
22

23
00:01:52,600 --> 00:01:58,740
Now, in order to target classes, we simply add a dot in front of the class name.
23

24
00:01:58,990 --> 00:02:06,880
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

25
00:02:06,880 --> 00:02:15,700
So we have to say #title, which is the name of that id, and then we can start specifying our background
25

26
00:02:15,700 --> 00:02:24,760
color property, and we're going to change it to #ff4c68, and let's check to make sure if
26

27
00:02:24,760 --> 00:02:26,050
that works.
27

28
00:02:26,200 --> 00:02:26,710
Brilliant.
28

29
00:02:26,710 --> 00:02:33,520
So that first section now has this kind of reddish color, which means that it's working exactly as we
29

30
00:02:33,520 --> 00:02:34,290
want it to.
30

31
00:02:34,540 --> 00:02:39,560
Now I want this navigation bar to not have its own color.
31

32
00:02:39,730 --> 00:02:44,400
I want it to just be a light colored navigation bar.
32

33
00:02:44,650 --> 00:02:51,040
So we can go ahead and remove the Bootstrap class that gives this background a dark color, which is of
33

34
00:02:51,040 --> 00:02:54,400
course the bg-dark class.
34

35
00:02:54,400 --> 00:02:57,390
So now let's hit save and refresh.
35

36
00:02:57,490 --> 00:02:59,880
And you can see that our nav bar
36

37
00:03:00,070 --> 00:03:04,570
now looks like it's a part of that first header title section.
37

38
00:03:04,570 --> 00:03:06,320
Now here comes a challenge.
38

39
00:03:06,430 --> 00:03:13,330
I want you to use what you learned just now about the Bootstrap grid system to make the title and the
39

40
00:03:13,330 --> 00:03:19,870
download buttons take up 50 percent of the width on the left, and the image of the phone take up 50 percent
40

41
00:03:19,960 --> 00:03:22,090
of the width on the right.
41

42
00:03:22,240 --> 00:03:24,550
And this is on the large desk top size.
42

43
00:03:24,580 --> 00:03:30,940
When we get to the tablet sized, then they should each take up 100 percent of the width of the screen,
43

44
00:03:31,120 --> 00:03:33,730
and the same for the mobile sized.
44

45
00:03:34,060 --> 00:03:37,570
So pause the video, and see if you can complete this challenge.
45

46
00:03:40,760 --> 00:03:41,110
All right.
46

47
00:03:41,120 --> 00:03:43,240
So how did that go?
47

48
00:03:43,610 --> 00:03:50,240
Well, the first thing that we need in order to use the Bootstrap grid system is to have that div that
48

49
00:03:50,240 --> 00:03:54,500
encloses the entire row that we're going to use the grid system on.
49

50
00:03:54,530 --> 00:04:02,870
So, we've got this div here already which includes the heading, the buttons, as well as the images, so we
50

51
00:04:02,870 --> 00:04:06,820
can simply give that one a class of row.
51

52
00:04:07,160 --> 00:04:13,460
Now the next thing that we need is to separate the other parts of the content into two separate divs.
52

53
00:04:13,640 --> 00:04:20,810
So that means that our h1 and buttons will have a div and the image will have a div.
53

54
00:04:20,990 --> 00:04:26,960
So let's create a div here and put our heading and button inside.
54

55
00:04:27,380 --> 00:04:36,590
And now we should have two divs that are going to help us separate out the content using the grids.
55

56
00:04:36,910 --> 00:04:45,640
So the first one we're going to give a class of col-lg-6, which means that on any size
56

57
00:04:45,640 --> 00:04:50,200
that's the large size, which means the laptop size or bigger,
57

58
00:04:50,200 --> 00:04:52,750
so a laptop or desktop,
58

59
00:04:52,750 --> 00:04:59,860
then we're going have a six unit column that's going to contain this content, but any size smaller than
59

60
00:04:59,860 --> 00:05:04,450
that will take up 100 percent of the width of the screen,
60

61
00:05:04,450 --> 00:05:07,050
so that's tablet and mobile.
61

62
00:05:07,060 --> 00:05:13,090
So we're going to do the same thing over here to the div that contains the image.
62

63
00:05:13,210 --> 00:05:19,800
So it's also going to take up 50 percent on the large sizes and 100 percent on the smaller sizes.
63

64
00:05:19,840 --> 00:05:21,150
So let's hit save.
64

65
00:05:21,190 --> 00:05:26,070
And once you refresh your page you should have something that looks like this.
65

66
00:05:26,070 --> 00:05:35,170
Now, remember, from our previous code, that you don't have to specify the medium 12 unit or the small 12
66

67
00:05:35,170 --> 00:05:43,360
unit, because it's by default 100 percent, and you should read this code as on any screen size that's
67

68
00:05:43,420 --> 00:05:46,370
on the large size or bigger,
68

69
00:05:46,480 --> 00:05:54,340
so laptop or bigger, it should be a six unit column, and anything smaller than that will take up the full
69

70
00:05:54,340 --> 00:05:55,330
width of the row.
70

71
00:05:55,420 --> 00:06:05,170
And now we have this responsive title section, where we're using the screen real estate with the maximum
71

72
00:06:05,230 --> 00:06:06,060
efficiency.
72

73
00:06:06,100 --> 00:06:11,950
So the last thing that I want to do before we finish off this lesson is, I want to add some text styling,
73

74
00:06:12,280 --> 00:06:15,150
namely to change our fonts here.
74

75
00:06:15,280 --> 00:06:24,280
So, I want you to go over to the Google fonts and to embed the Ubuntu and the Montserrat typefaces into
75

76
00:06:24,280 --> 00:06:25,300
our web site.
76

77
00:06:25,600 --> 00:06:28,140
So pause the video and do that now.
77

78
00:06:29,870 --> 00:06:33,010
All right. So, you've done this before, so it shouldn't be too difficult.
78

79
00:06:33,050 --> 00:06:38,480
So we're just going to go to fonts.google.com, and we're going to search for those two fonts
79

80
00:06:38,500 --> 00:06:39,280
I mentioned.
80

81
00:06:39,410 --> 00:06:45,320
So one is the Ubuntu font which we're going to use for our logo,
81

82
00:06:45,620 --> 00:06:51,650
and the other one is the Montserrat font, which we're going to use for the majority of the body of our
82

83
00:06:51,650 --> 00:06:52,410
web site.
83

84
00:06:52,700 --> 00:06:59,030
So now we've got our two families selected, load time is still relatively fast, so we can just copy that
84

85
00:06:59,030 --> 00:07:07,550
link and head back over to our index.html and add it into our header section.
85

86
00:07:07,790 --> 00:07:13,230
So now let's hit save and we're going to use some of those font families.
86

87
00:07:13,250 --> 00:07:17,720
So the thing that I want to change the most is the style of the h1, because it's going to determine
87

88
00:07:17,720 --> 00:07:20,260
the size of it and that will affect our layout,
88

89
00:07:20,270 --> 00:07:22,470
so I want to do that as early as possible.
89

90
00:07:22,670 --> 00:07:33,120
So, I want you to change the font of this heading to a Montserrat-Black.
90

91
00:07:33,500 --> 00:07:36,760
And I want the font size to be a 3rem
91

92
00:07:36,790 --> 00:07:43,670
and the line height to be 1.5 so that we get a little bit of space between it and anything else
92

93
00:07:43,670 --> 00:07:44,440
around it.
93

94
00:07:44,690 --> 00:07:48,130
So pause the video and try to complete this challenge.
94

95
00:07:50,630 --> 00:07:50,960
All right.
95

96
00:07:50,970 --> 00:07:57,090
So the first thing we need to do in order to change this text is figure out what is the element that
96

97
00:07:57,090 --> 00:07:58,280
we need to target.
97

98
00:07:58,440 --> 00:08:04,290
So the easiest thing here, is we've already got an h1, and we only have one h1 on the whole page.
98

99
00:08:04,320 --> 00:08:07,560
So maybe we can just target the h1.
99

100
00:08:07,590 --> 00:08:16,060
So let's go ahead and target the h1, and then we're going to change its font-family to Montserrat-Black.
100

101
00:08:16,200 --> 00:08:24,780
So, if you want to see what these fonts look like, you can always click on the font and scroll down to
101

102
00:08:24,780 --> 00:08:30,170
the different styles, and you can see what those different styles may look like.
102

103
00:08:30,180 --> 00:08:40,590
So if you wrote Montserrat-Thin, for example, then our text is going to look exactly like the style
103

104
00:08:40,590 --> 00:08:41,840
specified here.
104

105
00:08:42,150 --> 00:08:49,500
But in our case we want Montserrat-Black, which is the heaviest weight that this typeface has.
105

106
00:08:49,830 --> 00:08:52,810
And the other thing we wanted to change was the font size.
106

107
00:08:52,830 --> 00:08:55,850
We wanted it to be 3rem, so massive.
107

108
00:08:55,950 --> 00:09:00,120
And then we wanted to change the line height to 1.5. Remember line height
108

109
00:09:00,120 --> 00:09:06,390
you don't usually specify a unit, because it's two times or one times and you don't actually need to
109

110
00:09:06,390 --> 00:09:08,900
add pixels or rems or anything like that.
110

111
00:09:09,240 --> 00:09:17,340
So now let's hit save and let's look at our updated style of our title, and that's looking pretty nice.
111

112
00:09:17,460 --> 00:09:24,720
So, in this lesson, we've learned about grids and how to use it to make our web site responsive, so that
112

113
00:09:24,720 --> 00:09:29,580
it uses the available screen real estate to the max.
113

114
00:09:29,580 --> 00:09:35,620
Now, in the next lesson, we're going to learn about another Bootstrap layout element called the container.
114

115
00:09:35,850 --> 00:09:38,690
So for all of that and more, I'll see you on the next lesson.