0
1
00:00:00,390 --> 00:00:00,690
All right.
1

2
00:00:00,690 --> 00:00:03,630
So how did you manage on that mini challenge?
2

3
00:00:03,630 --> 00:00:09,400
Well, if you haven't given it a go, then this is a good time to pause the video and just give it a try
3

4
00:00:09,480 --> 00:00:15,970
before I go through the solution with you. It’s really really important that you try and do this yourself,
4

5
00:00:16,020 --> 00:00:19,530
because I can't be here with you every single time you try to make a web site,
5

6
00:00:19,590 --> 00:00:23,690
so it's really really important that you pick up on these skills by yourself.
6

7
00:00:23,820 --> 00:00:29,660
And remember, I'm watching you, but not in a creepy way, just like, I haven't hacked your web cam or anything,
7

8
00:00:29,670 --> 00:00:33,890
I'm just, you know, saying like metaphorically, you know.
8

9
00:00:34,170 --> 00:00:35,670
Anyways, moving on.
9

10
00:00:35,940 --> 00:00:42,810
So, I presume that you've already given it a go and you've struggled, and maybe you failed, maybe you succeeded.
10

11
00:00:42,870 --> 00:00:45,600
So we're going to run through the solution now.
11

12
00:00:45,600 --> 00:00:48,870
So essentially what we're trying to achieve is this outcome.
12

13
00:00:48,870 --> 00:00:55,650
We've got three features which each have a Font Awesome icon above them, and they are responsive,
13

14
00:00:55,650 --> 00:01:02,340
so when we're in the iPad and the iPhone sizes, there's only one feature per row and they take up 100
14

15
00:01:02,340 --> 00:01:03,590
percent of the width.
15

16
00:01:03,630 --> 00:01:07,900
Plus there's also the fonts and the colors,
16

17
00:01:07,950 --> 00:01:11,840
and also when you roll over these icons they change color.
17

18
00:01:11,970 --> 00:01:15,280
So, we've learned how to do all of this before,
18

19
00:01:15,340 --> 00:01:19,940
and it's a matter of remembering it, giving it a go, and searching Google
19

20
00:01:19,950 --> 00:01:21,300
if we get stuck.
20

21
00:01:21,660 --> 00:01:23,780
So let's get started.
21

22
00:01:24,000 --> 00:01:27,740
So I'm going to keep the final piece over here just to compare,
22

23
00:01:27,960 --> 00:01:35,150
but the site as we have it up to now looks much less interesting and a bit more like this.
23

24
00:01:35,160 --> 00:01:41,490
So, the first thing I'm going to do is, I want to give each of these features their own div, because as
24

25
00:01:41,490 --> 00:01:48,660
you can see, at the moment, if we scroll down to the right section, I've got these three sets of features
25

26
00:01:48,750 --> 00:01:54,230
and they each have an h3 title, and a paragraph just explaining the feature.
26

27
00:01:54,330 --> 00:01:59,700
And, in order to get the responsiveness and to style each feature individually, I'm going to need to
27

28
00:01:59,700 --> 00:02:08,020
give them some form of identification, and that, in HTML and CSS, is going to end up being a div.
28

29
00:02:08,300 --> 00:02:14,880
So I'm going to create three new divs, and I'm going to give each div a custom class name.
29

30
00:02:14,880 --> 00:02:19,470
So I'm going to call them feature-box, which seems to make sense to me.
30

31
00:02:19,560 --> 00:02:23,220
It doesn’t really matter what you call them, as long as they are the same,
31

32
00:02:23,220 --> 00:02:26,470
because we're going to apply the same style to each feature-box.
32

33
00:02:26,520 --> 00:02:30,190
So let's create another div, feature-box.
33

34
00:02:30,480 --> 00:02:40,980
And I'm just going to copy this and paste it and we can now transplant these lines over to here.
34

35
00:02:41,010 --> 00:02:41,290
All right.
35

36
00:02:41,290 --> 00:02:41,640
Great.
36

37
00:02:41,700 --> 00:02:48,780
So now we have our feature boxes and each set of features belongs in its own div which we can style
37

38
00:02:48,780 --> 00:02:52,910
separately or apply the same style to each three.
38

39
00:02:52,920 --> 00:02:59,910
So now the next thing I'm going to do is I'm going to make each div take up a third of the width of
39

40
00:02:59,910 --> 00:03:05,640
the screen on a large desktop or a laptop sized screen,
40

41
00:03:05,730 --> 00:03:12,090
but when it's on an iPad or when it's on an iPhone, I want it to take up 100 percent of the width. So 
41

42
00:03:12,120 --> 00:03:15,910
I can do that by applying some Bootstrap classes.
42

43
00:03:15,990 --> 00:03:22,860
So, we remember that we have to use the column class, and then we specify the size that we want it to be
43

44
00:03:22,860 --> 00:03:24,400
responsive to.
44

45
00:03:24,570 --> 00:03:27,340
So we're going to say column large,
45

46
00:03:27,360 --> 00:03:34,500
so that means laptop size and above, is going to take up a third of the row.
46

47
00:03:34,500 --> 00:03:37,690
And remember each row is split up into 12 units.
47

48
00:03:37,740 --> 00:03:41,340
So a third of 12 is 4 units.
48

49
00:03:41,340 --> 00:03:43,470
So col-lg-4.
49

50
00:03:43,740 --> 00:03:50,370
And let's just go ahead and paste this in the other three places. And if you load up your web site right
50

51
00:03:50,400 --> 00:03:57,840
now, you'll see that nothing has changed, and that is because the Bootstrap grid requires that you nest it
51

52
00:03:57,960 --> 00:04:02,220
inside a class that has the name row.
52

53
00:04:02,370 --> 00:04:10,110
So we can specify which ones should go into the same row essentially, so that your responsiveness can
53

54
00:04:10,110 --> 00:04:11,610
happen across different rows,
54

55
00:04:11,610 --> 00:04:18,540
for example. So something like col-lg-4 in three separate rows will be very different from
55

56
00:04:18,570 --> 00:04:20,050
all of them in the same row.
56

57
00:04:20,070 --> 00:04:24,130
So let's hit save and let's check it out and see if it worked.
57

58
00:04:24,240 --> 00:04:24,770
Ok cool.
58

59
00:04:24,780 --> 00:04:32,120
So they are now laid across the same row and they're taking up a third of the screen each.
59

60
00:04:32,160 --> 00:04:41,010
And if I go into iPad size, you can see they're now taking up 100 percent of the width, as does anything
60

61
00:04:41,010 --> 00:04:45,860
smaller than that, so mobile size still taking up 100 percent of the width.
61

62
00:04:46,230 --> 00:04:53,700
So we have succeeded. Kerching! I was planning on getting our sound designer to create these nice sounds
62

63
00:04:53,820 --> 00:04:55,860
for the video but he is sick,
63

64
00:04:55,980 --> 00:04:59,670
so you will just have to live with my terrible sound effects.
64

65
00:05:00,300 --> 00:05:05,800
So it's like Angela SFX from now on.
65

66
00:05:06,630 --> 00:05:13,290
I've recently been trying to challenge my friends on what is the most realistic lightsaber activation
66

67
00:05:13,290 --> 00:05:19,910
sound you can produce without any instruments other than yourself, your own body.
67

68
00:05:19,950 --> 00:05:26,530
And I have found that many people are very bad at sound effects, myself included.
68

69
00:05:26,550 --> 00:05:27,890
Anyways, let's move on.
69

70
00:05:27,960 --> 00:05:29,580
I think I've had too much coffee today.
70

71
00:05:29,580 --> 00:05:30,840
I really apologize.
71

72
00:05:30,840 --> 00:05:31,040
All right.
72

73
00:05:31,050 --> 00:05:32,800
Let's get back to work.
73

74
00:05:32,820 --> 00:05:37,710
The next thing I need to do is that you can see that at the moment our features are right up to the
74

75
00:05:37,710 --> 00:05:44,340
edge of both edges and they're taking up a bit too much space. In order to get it looking a bit more
75

76
00:05:44,340 --> 00:05:45,270
like this,
76

77
00:05:45,270 --> 00:05:47,520
we need to add some padding.
77

78
00:05:47,610 --> 00:05:52,530
So the first bit of padding I'm going to add is to this feature section.
78

79
00:05:52,530 --> 00:05:55,130
So that's this big box here.
79

80
00:05:55,170 --> 00:05:58,110
And you can see the three parts highlighted.
80

81
00:05:58,500 --> 00:06:03,010
So we can go into our CSS and we can select the Features section.
81

82
00:06:03,150 --> 00:06:13,890
So we are now down to title-image and let's add Features Section, and let's just comment that out so
82

83
00:06:13,890 --> 00:06:16,530
we can now target our features.
83

84
00:06:16,860 --> 00:06:18,750
And remember it's an id,
84

85
00:06:18,780 --> 00:06:23,100
so we have to use the hashtag or the pound sign.
85

86
00:06:23,280 --> 00:06:29,820
And I'm going to add a padding around all four sides and it's going to be 7 percent top and bottom and
86

87
00:06:29,820 --> 00:06:31,550
15 percent left and right.
87

88
00:06:31,710 --> 00:06:39,200
So basically almost double the amount of space on the left and right as there is on the top and bottom.
88

89
00:06:39,210 --> 00:06:44,530
So now let's hit refresh and you can see this is looking pretty nice, right?
89

90
00:06:44,760 --> 00:06:51,870
So each of our feature boxes are now centered in the middle of our feature div and you can see that
90

91
00:06:51,870 --> 00:06:57,780
with that little bit more white space it's much easier to read, a lot more organized, and it's getting
91

92
00:06:57,780 --> 00:07:01,310
close to what we want as our final outcome.
92

93
00:07:01,320 --> 00:07:06,680
So the amount of padding that you might have added might differ from mine but as long as you got a similar
93

94
00:07:06,690 --> 00:07:09,840
end outcome then that's absolutely fine.
94

95
00:07:09,840 --> 00:07:13,600
There's many many ways of skinning a cat.
95

96
00:07:13,770 --> 00:07:15,510
It's probably not very vegan friendly.
96

97
00:07:15,510 --> 00:07:17,130
There's many ways to peel a carrot.
97

98
00:07:17,160 --> 00:07:20,010
Maybe let me think on that.
98

99
00:07:20,170 --> 00:07:22,630
Boy this video is going to need a lot of editing.
99

100
00:07:22,920 --> 00:07:27,720
All right. So the next thing we're going to do is, you can see that over here our text is nicely centered
100

101
00:07:27,780 --> 00:07:31,550
inside each feature box, making them feel quite together,
101

102
00:07:31,560 --> 00:07:36,840
but here they look a bit weird, especially when you're using icons like this,
102

103
00:07:36,840 --> 00:07:42,430
you tend to want to have your text centered around the middle of the icon, 
103

104
00:07:42,450 --> 00:07:46,350
otherwise, if it's all left aligned, it looks a little bit strange.
104

105
00:07:46,890 --> 00:07:49,770
So let's go ahead and do that.
105

106
00:07:49,770 --> 00:07:56,550
So, remember that previously we added this feature-box class which goes around each and every feature.
106

107
00:07:56,760 --> 00:08:05,070
So now we can target that feature-box class, and we can say something like all the text inside each feature
107

108
00:08:05,070 --> 00:08:08,850
box should be aligned to the center.
108

109
00:08:09,060 --> 00:08:09,960
So let's check it out.
109

110
00:08:10,020 --> 00:08:11,810
Yep looking pretty good.
110

111
00:08:11,880 --> 00:08:18,840
Now each line is still a little bit too long so we can add a bit of padding inside each feature box
111

112
00:08:18,990 --> 00:08:23,730
so that we push it closer together so that the width goes down a little bit and we put all the text
112

113
00:08:23,730 --> 00:08:29,330
onto two lines but it's very easy to glance and read rather than having these long lines.
113

114
00:08:29,370 --> 00:08:34,630
So I'm going to go ahead and add maybe around 5 percent of padding.
114

115
00:08:34,800 --> 00:08:40,230
And now our text is looking a lot shorter and a lot easier to read.
115

116
00:08:40,590 --> 00:08:47,700
Now the next thing we're going to do is we're going to change the fonts of these h3s that we've
116

117
00:08:47,700 --> 00:08:48,910
got over here.
117

118
00:08:49,080 --> 00:08:55,830
So you can see that each of the titles for the features are these h3s, which we can target quite easily
118

119
00:08:55,830 --> 00:09:05,470
up here, so we can say, let’s change the font-family to,
119

120
00:09:05,570 --> 00:09:08,540
I think we can change it to Montserrat-Bold,
120

121
00:09:08,700 --> 00:09:15,090
and this is to establish the visual hierarchy, so that when a user looks at this web site, the first thing
121

122
00:09:15,130 --> 00:09:19,730
the eye is drawn to is usually the blackest, the boldest, the biggest thing, 
122

123
00:09:19,740 --> 00:09:24,570
and we want that to be the title first and then the subheading. As a web designer,
123

124
00:09:24,570 --> 00:09:29,920
very often it's kind of like you're a visual tour guide, and you're guiding people through your web site,
124

125
00:09:29,940 --> 00:09:36,810
so you want them to read, for example, the big title first, then maybe your brand, then maybe what all these
125

126
00:09:36,870 --> 00:09:43,340
buttons are about, and you can do that quite easily using the font weights and also the font size.
126

127
00:09:43,350 --> 00:09:48,150
So this is something that you can be aware of the next time you come across a well-designed web site,
127

128
00:09:48,420 --> 00:09:52,680
see how they're establishing visual hierarchy and guiding you through the web site.
128

129
00:09:52,780 --> 00:09:55,270
So I've already made the title very attractive
129

130
00:09:55,270 --> 00:10:04,200
to the eye. I’m going to tone down the subtitle, the feature text, by changing its color to a grey color, so
130

131
00:10:04,200 --> 00:10:07,210
that we make it even lower on the visual hierarchy scale.
131

132
00:10:07,350 --> 00:10:10,880
So the feature text is contained inside some paragraph elements.
132

133
00:10:11,010 --> 00:10:17,010
So I'm going to go ahead and select the paragraph elements and I'm going to change the color to this
133

134
00:10:17,130 --> 00:10:26,250
greyish color which is 8f8f8f. Let's hit save and refresh, and you can see now the visual hierarchy
134

135
00:10:26,250 --> 00:10:27,820
is now unmistakable.
135

136
00:10:27,870 --> 00:10:33,110
There is no way that somebody’s eye is going to be drawn to this line before it is drawn to this one.
136

137
00:10:33,120 --> 00:10:33,360
All right.
137

138
00:10:33,360 --> 00:10:35,520
So that's looking pretty good.
138

139
00:10:35,580 --> 00:10:39,260
Now the next thing is that we need to add some icons,
139

140
00:10:39,270 --> 00:10:40,120
right?
140

141
00:10:40,170 --> 00:10:43,890
And as I told you we're going to get that from Font Awesome.
141

142
00:10:43,890 --> 00:10:47,370
So let's head over and let's search for those images.
142

143
00:10:47,550 --> 00:10:58,840
So I've got the heart one and the target and also the checkmark which is in a circle.
143

144
00:10:59,070 --> 00:11:04,160
So we've got these three icons and we're just going to copy them in there.
144

145
00:11:04,170 --> 00:11:07,300
So it was check, target, heart.
145

146
00:11:07,320 --> 00:11:10,870
So let's just rearrange this a little bit.
146

147
00:11:10,980 --> 00:11:13,220
So the first one is the check circle.
147

148
00:11:13,220 --> 00:11:21,420
So I'm going to copy that and place it inside our HTML inside our feature-box div, so that everything
148

149
00:11:21,450 --> 00:11:25,850
inside each feature is all grouped together. So that one was circle,
149

150
00:11:25,860 --> 00:11:28,600
the next one was bullseye.
150

151
00:11:28,750 --> 00:11:30,260
So that's going to go here.
151

152
00:11:30,270 --> 00:11:34,500
And the last one was the heart, which is going to go here.
152

153
00:11:34,590 --> 00:11:35,340
All right.
153

154
00:11:35,340 --> 00:11:40,100
So now you'll see that we have our tiny icons here.
154

155
00:11:40,290 --> 00:11:43,290
But that's a little bit too small to see,
155

156
00:11:43,290 --> 00:11:45,350
and we need to make it a little bit larger.
156

157
00:11:45,360 --> 00:11:50,930
So, rather helpfully, the Font Awesome icons all come in different sizes.
157

158
00:11:51,240 --> 00:11:56,640
And in order to get a different size, for example, the 3x size, all you have to do is just add the class
158

159
00:11:56,740 --> 00:12:00,600
3x or 5x or 7x into your Font
159

160
00:12:00,600 --> 00:12:01,830
Awesome icon.
160

161
00:12:01,860 --> 00:12:07,080
So in our case I'm going to go for maybe the 4x. So we can go ahead and add,
161

162
00:12:07,140 --> 00:12:08,380
so this is our Font 
162

163
00:12:08,400 --> 00:12:09,870
Awesome symbol, Font
163

164
00:12:09,990 --> 00:12:14,340
Awesome check circle and Font Awesome 4x.
164

165
00:12:14,340 --> 00:12:23,100
Now if you refresh you can see that is now a much larger size and it's a lot easier to see and actually
165

166
00:12:23,100 --> 00:12:27,240
looks like a feature icon rather than just something very small.
166

167
00:12:27,240 --> 00:12:32,600
So let's go ahead and add that to all three other classes.
167

168
00:12:35,280 --> 00:12:36,340
Hit save.
168

169
00:12:36,370 --> 00:12:40,980
And now we have our icons sized and looking pretty good.
169

170
00:12:40,990 --> 00:12:43,260
All right. So now we need to style these icons.
170

171
00:12:43,270 --> 00:12:44,860
We need to give them a color.
171

172
00:12:44,860 --> 00:12:51,280
So, in order to style the icon separately from the title and the feature text, then of course we need to
172

173
00:12:51,280 --> 00:12:53,610
give it a custom class.
173

174
00:12:53,620 --> 00:12:58,210
Now of course you can use any of the classes that has already been applied to it.
174

175
00:12:58,210 --> 00:13:06,100
But, for example, if you pick this class, fa-check-circle, then you'll have to add more styles to these other
175

176
00:13:06,100 --> 00:13:06,820
two.
176

177
00:13:06,820 --> 00:13:12,840
Now, if you pick something that's common between all three, say fas, that means if you use any Font
177

178
00:13:12,870 --> 00:13:17,540
Awesome symbol, then you're going to be applying the same style to that future icon as well.
178

179
00:13:17,650 --> 00:13:22,450
So it’s always always a good idea to apply custom classes when you're trying to style it
179

180
00:13:22,460 --> 00:13:29,300
inside the CSS, unless you're just trying to customize some feature of Font Awesome or Bootstrap.
180

181
00:13:29,320 --> 00:13:36,540
So in this case I'm just going to give it a class of icon and I'm going to paste it in all three places
181

182
00:13:36,760 --> 00:13:48,750
and that allows us to now go into our CSS and style our icon. So our icon is going to be colored in this
182

183
00:13:48,810 --> 00:13:51,090
orangey color, and when we hover over it,
183

184
00:13:51,090 --> 00:13:53,860
it’s going to be the same color as this background.
184

185
00:13:53,970 --> 00:13:57,680
So I've already provided those hex values to you.
185

186
00:13:57,870 --> 00:14:07,340
So the normal color is going to be ef8172. Let’s hit save.
186

187
00:14:07,380 --> 00:14:08,870
And check it out.
187

188
00:14:09,000 --> 00:14:10,250
Looking nice.
188

189
00:14:10,260 --> 00:14:10,990
Right?
189

190
00:14:11,100 --> 00:14:16,710
So it’d be nice if there was a little bit of space between this icon and this title, because at the moment
190

191
00:14:16,740 --> 00:14:21,480
they're a bit too squished together. It’s kind of sitting right on top of that feature and it doesn't
191

192
00:14:21,480 --> 00:14:24,200
look very good, a bit too mushed together.
192

193
00:14:24,330 --> 00:14:36,480
So let's add a margin-bottom to the icon of, maybe, say, just 1rem, and you can see with just that little
193

194
00:14:36,480 --> 00:14:39,500
bit of space it looks a lot nicer.
194

195
00:14:39,510 --> 00:14:43,600
Very often small touches can produce really dramatic effects.
195

196
00:14:43,650 --> 00:14:49,320
So the final final thing that we want to do for our challenge is make it change color when we hover
196

197
00:14:49,320 --> 00:14:55,680
over the icons. And the color is going to be this same red color in our color palette.
197

198
00:14:55,950 --> 00:14:59,200
So do your remember how to change hover states?
198

199
00:14:59,310 --> 00:15:03,080
Well we have to use a pseudo class called hover.
199

200
00:15:03,120 --> 00:15:10,890
So we select the icon, we use a colon and we select one of these pseudo states. And the one that we want
200

201
00:15:11,430 --> 00:15:17,580
is called, I’m never going to get to it, I’m just going to type it in, it’s called hover.
201

202
00:15:18,450 --> 00:15:25,260
And we've seen this previously when we looked at classes and pseudo classes and selectors in CSS,
202

203
00:15:25,290 --> 00:15:28,430
but we're going to put it into action in this case.
203

204
00:15:28,620 --> 00:15:38,040
And when our icon is inside the hover state, I'm going to change the color to ff4c68, which is
204

205
00:15:38,040 --> 00:15:41,180
that pinkish color that we've got at the top.
205

206
00:15:41,280 --> 00:15:48,550
So now, dun dun dun, it's changing color every time we hover over it.
206

207
00:15:48,690 --> 00:15:51,460
And that wasn't even very hard, was it?
207

208
00:15:51,460 --> 00:15:53,380
All right. Looking nice.
208

209
00:15:53,430 --> 00:15:56,820
So how did you get on with this challenge?
209

210
00:15:56,940 --> 00:16:00,990
If there was something that you couldn't implement or something you just found out about then don't
210

211
00:16:00,990 --> 00:16:02,440
worry, go back, change
211

212
00:16:02,460 --> 00:16:08,880
your CSS code, change your HTML code, in order to make it work. If you got it all right and it's all looking
212

213
00:16:08,880 --> 00:16:09,410
pretty good,
213

214
00:16:09,450 --> 00:16:14,170
other than maybe you got slightly different values for the margin or the padding, that doesn't matter, 
214

215
00:16:14,190 --> 00:16:15,910
you're guessing by eye, right,
215

216
00:16:15,990 --> 00:16:21,810
so that's not a big deal. But it's all about knowing how to use those Bootstrap classes in order to make
216

217
00:16:21,810 --> 00:16:28,770
our features responsive and also things like, you know, the hover states that we learned before, and knowing
217

218
00:16:28,770 --> 00:16:32,870
how to change the font weight, what to select to change the font color, etc.,
218

219
00:16:32,910 --> 00:16:34,310
all of that good stuff.
219

220
00:16:34,530 --> 00:16:34,820
All right.
220

221
00:16:34,830 --> 00:16:42,420
So, in the next lesson, we're going to be looking at another Bootstrap component, which is the carousel.
221

222
00:16:42,810 --> 00:16:48,900
And this is like a slide show that we're going to implement so that we end up with a really really cool
222

223
00:16:48,900 --> 00:16:55,780
testimonial section which allows us to go between all of the different testimonials.
223

224
00:16:55,890 --> 00:16:58,550
So you have all of that to look forward to and more.
224

225
00:16:58,770 --> 00:17:00,900
So I will see you on the next lesson.