All right. 1
So how did you manage on that mini challenge? 2
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
before I go through the solution with you. It’s really really important that you try and do this yourself, 4
because I can't be here with you every single time you try to make a web site, 5
so it's really really important that you pick up on these skills by yourself. 6
And remember, I'm watching you, but not in a creepy way, just like, I haven't hacked your web cam or anything, 7
I'm just, you know, saying like metaphorically, you know. 8
Anyways, moving on. 9
So, I presume that you've already given it a go and you've struggled, and maybe you failed, maybe you succeeded. 10
So we're going to run through the solution now. 11
So essentially what we're trying to achieve is this outcome. 12
We've got three features which each have a Font Awesome icon above them, and they are responsive, 13
so when we're in the iPad and the iPhone sizes, there's only one feature per row and they take up 100 14
percent of the width. 15
Plus there's also the fonts and the colors, 16
and also when you roll over these icons they change color. 17
So, we've learned how to do all of this before, 18
and it's a matter of remembering it, giving it a go, and searching Google 19
if we get stuck. 20
So let's get started. 21
So I'm going to keep the final piece over here just to compare, 22
but the site as we have it up to now looks much less interesting and a bit more like this. 23
So, the first thing I'm going to do is, I want to give each of these features their own div, because as 24
you can see, at the moment, if we scroll down to the right section, I've got these three sets of features 25
and they each have an h3 title, and a paragraph just explaining the feature. 26
And, in order to get the responsiveness and to style each feature individually, I'm going to need to 27
give them some form of identification, and that, in HTML and CSS, is going to end up being a div. 28
So I'm going to create three new divs, and I'm going to give each div a custom class name. 29
So I'm going to call them feature-box, which seems to make sense to me. 30
It doesn’t really matter what you call them, as long as they are the same, 31
because we're going to apply the same style to each feature-box. 32
So let's create another div, feature-box. 33
And I'm just going to copy this and paste it and we can now transplant these lines over to here. 34
All right. 35
Great. 36
So now we have our feature boxes and each set of features belongs in its own div which we can style 37
separately or apply the same style to each three. 38
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
the screen on a large desktop or a laptop sized screen, 40
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
I can do that by applying some Bootstrap classes. 42
So, we remember that we have to use the column class, and then we specify the size that we want it to be 43
responsive to. 44
So we're going to say column large, 45
so that means laptop size and above, is going to take up a third of the row. 46
And remember each row is split up into 12 units. 47
So a third of 12 is 4 units. 48
So col-lg-4. 49
And let's just go ahead and paste this in the other three places. And if you load up your web site right 50
now, you'll see that nothing has changed, and that is because the Bootstrap grid requires that you nest it 51
inside a class that has the name row. 52
So we can specify which ones should go into the same row essentially, so that your responsiveness can 53
happen across different rows, 54
for example. So something like col-lg-4 in three separate rows will be very different from 55
all of them in the same row. 56
So let's hit save and let's check it out and see if it worked. 57
Ok cool. 58
So they are now laid across the same row and they're taking up a third of the screen each. 59
And if I go into iPad size, you can see they're now taking up 100 percent of the width, as does anything 60
smaller than that, so mobile size still taking up 100 percent of the width. 61
So we have succeeded. Kerching! I was planning on getting our sound designer to create these nice sounds 62
for the video but he is sick, 63
so you will just have to live with my terrible sound effects. 64
So it's like Angela SFX from now on. 65
I've recently been trying to challenge my friends on what is the most realistic lightsaber activation 66
sound you can produce without any instruments other than yourself, your own body. 67
And I have found that many people are very bad at sound effects, myself included. 68
Anyways, let's move on. 69
I think I've had too much coffee today. 70
I really apologize. 71
All right. 72
Let's get back to work. 73
The next thing I need to do is that you can see that at the moment our features are right up to the 74
edge of both edges and they're taking up a bit too much space. In order to get it looking a bit more 75
like this, 76
we need to add some padding. 77
So the first bit of padding I'm going to add is to this feature section. 78
So that's this big box here. 79
And you can see the three parts highlighted. 80
So we can go into our CSS and we can select the Features section. 81
So we are now down to title-image and let's add Features Section, and let's just comment that out so 82
we can now target our features. 83
And remember it's an id, 84
so we have to use the hashtag or the pound sign. 85
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
15 percent left and right. 87
So basically almost double the amount of space on the left and right as there is on the top and bottom. 88
So now let's hit refresh and you can see this is looking pretty nice, right? 89
So each of our feature boxes are now centered in the middle of our feature div and you can see that 90
with that little bit more white space it's much easier to read, a lot more organized, and it's getting 91
close to what we want as our final outcome. 92
So the amount of padding that you might have added might differ from mine but as long as you got a similar 93
end outcome then that's absolutely fine. 94
There's many many ways of skinning a cat. 95
It's probably not very vegan friendly. 96
There's many ways to peel a carrot. 97
Maybe let me think on that. 98
Boy this video is going to need a lot of editing. 99
All right. So the next thing we're going to do is, you can see that over here our text is nicely centered 100
inside each feature box, making them feel quite together, 101
but here they look a bit weird, especially when you're using icons like this, 102
you tend to want to have your text centered around the middle of the icon, 103
otherwise, if it's all left aligned, it looks a little bit strange. 104
So let's go ahead and do that. 105
So, remember that previously we added this feature-box class which goes around each and every feature. 106
So now we can target that feature-box class, and we can say something like all the text inside each feature 107
box should be aligned to the center. 108
So let's check it out. 109
Yep looking pretty good. 110
Now each line is still a little bit too long so we can add a bit of padding inside each feature box 111
so that we push it closer together so that the width goes down a little bit and we put all the text 112
onto two lines but it's very easy to glance and read rather than having these long lines. 113
So I'm going to go ahead and add maybe around 5 percent of padding. 114
And now our text is looking a lot shorter and a lot easier to read. 115
Now the next thing we're going to do is we're going to change the fonts of these h3s that we've 116
got over here. 117
So you can see that each of the titles for the features are these h3s, which we can target quite easily 118
up here, so we can say, let’s change the font-family to, 119
I think we can change it to Montserrat-Bold, 120
and this is to establish the visual hierarchy, so that when a user looks at this web site, the first thing 121
the eye is drawn to is usually the blackest, the boldest, the biggest thing, 122
and we want that to be the title first and then the subheading. As a web designer, 123
very often it's kind of like you're a visual tour guide, and you're guiding people through your web site, 124
so you want them to read, for example, the big title first, then maybe your brand, then maybe what all these 125
buttons are about, and you can do that quite easily using the font weights and also the font size. 126
So this is something that you can be aware of the next time you come across a well-designed web site, 127
see how they're establishing visual hierarchy and guiding you through the web site. 128
So I've already made the title very attractive 129
to the eye. I’m going to tone down the subtitle, the feature text, by changing its color to a grey color, so 130
that we make it even lower on the visual hierarchy scale. 131
So the feature text is contained inside some paragraph elements. 132
So I'm going to go ahead and select the paragraph elements and I'm going to change the color to this 133
greyish color which is 8f8f8f. Let's hit save and refresh, and you can see now the visual hierarchy 134
is now unmistakable. 135
There is no way that somebody’s eye is going to be drawn to this line before it is drawn to this one. 136
All right. 137
So that's looking pretty good. 138
Now the next thing is that we need to add some icons, 139
right? 140
And as I told you we're going to get that from Font Awesome. 141
So let's head over and let's search for those images. 142
So I've got the heart one and the target and also the checkmark which is in a circle. 143
So we've got these three icons and we're just going to copy them in there. 144
So it was check, target, heart. 145
So let's just rearrange this a little bit. 146
So the first one is the check circle. 147
So I'm going to copy that and place it inside our HTML inside our feature-box div, so that everything 148
inside each feature is all grouped together. So that one was circle, 149
the next one was bullseye. 150
So that's going to go here. 151
And the last one was the heart, which is going to go here. 152
All right. 153
So now you'll see that we have our tiny icons here. 154
But that's a little bit too small to see, 155
and we need to make it a little bit larger. 156
So, rather helpfully, the Font Awesome icons all come in different sizes. 157
And in order to get a different size, for example, the 3x size, all you have to do is just add the class 158
3x or 5x or 7x into your Font 159
Awesome icon. 160
So in our case I'm going to go for maybe the 4x. So we can go ahead and add, 161
so this is our Font 162
Awesome symbol, Font 163
Awesome check circle and Font Awesome 4x. 164
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
looks like a feature icon rather than just something very small. 166
So let's go ahead and add that to all three other classes. 167
Hit save. 168
And now we have our icons sized and looking pretty good. 169
All right. So now we need to style these icons. 170
We need to give them a color. 171
So, in order to style the icon separately from the title and the feature text, then of course we need to 172
give it a custom class. 173
Now of course you can use any of the classes that has already been applied to it. 174
But, for example, if you pick this class, fa-check-circle, then you'll have to add more styles to these other 175
two. 176
Now, if you pick something that's common between all three, say fas, that means if you use any Font 177
Awesome symbol, then you're going to be applying the same style to that future icon as well. 178
So it’s always always a good idea to apply custom classes when you're trying to style it 179
inside the CSS, unless you're just trying to customize some feature of Font Awesome or Bootstrap. 180
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
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
orangey color, and when we hover over it, 183
it’s going to be the same color as this background. 184
So I've already provided those hex values to you. 185
So the normal color is going to be ef8172. Let’s hit save. 186
And check it out. 187
Looking nice. 188
Right? 189
So it’d be nice if there was a little bit of space between this icon and this title, because at the moment 190
they're a bit too squished together. It’s kind of sitting right on top of that feature and it doesn't 191
look very good, a bit too mushed together. 192
So let's add a margin-bottom to the icon of, maybe, say, just 1rem, and you can see with just that little 193
bit of space it looks a lot nicer. 194
Very often small touches can produce really dramatic effects. 195
So the final final thing that we want to do for our challenge is make it change color when we hover 196
over the icons. And the color is going to be this same red color in our color palette. 197
So do your remember how to change hover states? 198
Well we have to use a pseudo class called hover. 199
So we select the icon, we use a colon and we select one of these pseudo states. And the one that we want 200
is called, I’m never going to get to it, I’m just going to type it in, it’s called hover. 201
And we've seen this previously when we looked at classes and pseudo classes and selectors in CSS, 202
but we're going to put it into action in this case. 203
And when our icon is inside the hover state, I'm going to change the color to ff4c68, which is 204
that pinkish color that we've got at the top. 205
So now, dun dun dun, it's changing color every time we hover over it. 206
And that wasn't even very hard, was it? 207
All right. Looking nice. 208
So how did you get on with this challenge? 209
If there was something that you couldn't implement or something you just found out about then don't 210
worry, go back, change 211
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
pretty good, 213
other than maybe you got slightly different values for the margin or the padding, that doesn't matter, 214
you're guessing by eye, right, 215
so that's not a big deal. But it's all about knowing how to use those Bootstrap classes in order to make 216
our features responsive and also things like, you know, the hover states that we learned before, and knowing 217
how to change the font weight, what to select to change the font color, etc., 218
all of that good stuff. 219
All right. 220
So, in the next lesson, we're going to be looking at another Bootstrap component, which is the carousel. 221
And this is like a slide show that we're going to implement so that we end up with a really really cool 222
testimonial section which allows us to go between all of the different testimonials. 223
So you have all of that to look forward to and more. 224
So I will see you on the next lesson.