Voiceover: Let's continue to build our features section 2 2
So the first thing that we're gonna do with this 3 3
is white space, you surely remember that white space 4 4
is a very important thing, and so let's define white space 5 5
between the sections for all sections at the same time. 6 6
So let's format the section, and I will do it here 7 7
right in the reusable competence part of our code. 8 8
And we will put that white space 9 9
between the sections using petting. 10 10
Now you maybe say that to put a space between elements, 11 11
we use margin, and that's actually right, but I will use 12 12
petting because I will later have some-- 13 13
I'm planning to have some sections with background colors, 14 14
and in order to preserve that background color, 15 15
we need to make sure that the space 16 16
is inside of each of the boxes. 17 17
You will see that later. 18 18
So I want a lot of white space, so let me say 80 pixels 19 19
at the top, and on the bottom. 20 20
Zero, so zero at left and right, so no margin. 21 21
Great, so this is a lot of white space, 22 22
and it looks great, right? 23 23
So the next thing is to format the H2 heading here. 24 24
So I want the H2 heading to look quite similar to the H1. 25 25
For example, I want it to have the same text transform, 26 26
the same letter spacing, and the same font white. 27 27
So what do I do in order to achieve that? 28 28
I just group the similar properties 29 29
just as I showed you before. 30 30
So H1 and H2 will have some things in common. 31 31
H1 and H2. 32 32
So this is for H1 only, this is for H1 only, 33 33
and this as well. 34 34
And also this, but the rest, we can leave here for both. 35 35
Now on H2, I want another font size, not so big, of course. 36 36
And I will say maybe 180 percent, so it's not so big. 37 37
And maybe a word spacing of 2 pixels. 38 38
Alright, I also want to align it on the web page 39 39
inside of the row, so I will make center-- 40 40
sorry, I will make text align center. 41 41
Yeah, that looks much better than before. 42 42
Now let's put some space between this. 43 43
So again, we use some margin at the bottom. 44 44
30 pixels should be a good value for this. 45 45
And now, I want a nice, little yellow line 46 46
between the H2 and the text, and as I told you 47 47
in the first lecture, we will learn to put some content 48 48
on a website just with CSS, so we do that 49 49
using the after pseudo-class. 50 50
So after it's just some stuff that will appear after the H2, 51 51
such as the name indicates. 52 52
And now we can style this 53 53
just as if it was a normal element. 54 54
You can say you want it to display as a block element, 55 55
and we want a eight of two pixels, 56 56
so it will be a nice little line with two pixel sides. 57 57
And we want it to be orange, and you already know 58 58
where to find that orange, it's up here. 59 59
Paste it here, and now a very important thing: 60 60
whenever we do a after pseudo-class, we have to specify 61 61
its content, and in this case, we don't want any words 62 62
to appear, so we put a space in there. 63 63
Now the width of that line, of that box will be 64 64
another pixel, and alright, let's see how that looks. 65 65
So somethings is not right here, 66 66
because we want it centered, and of course the reason 67 67
for that is that we have to say that we want it centered, 68 68
and we do that such as we did before. 69 69
So we say we want a margin zero, and bottom zero, 70 70
and left and right auto, and now this should work. 71 71
And also we need to specify some margin 72 72
between this and the bottom. 73 73
Three pixels as well, such as we have it here. 74 74
So let's take a look at this, alright, 75 75
but we still don't have the margin that we want, and-- 76 76
yeah, the reason's because this has to be margin top. 77 77
So there's a margin between DH2 after, so this block, 78 78
and the actual H2, and then 30 pixels after 79 79
that orange block we inserted, 80 80
and this is exactly what we want. 81 81
Now next up, we have this text here. 82 82
So let's define a nice paragraph style for this. 83 83
So this can also go here into the reusable competence 84 84
that will make a little sub-section here for paragraphs. 85 85
So this is called long copy, and one thing we will do 86 86
is to change the line height, which is one thing 87 87
that we learned in the typography lecture. 88 88
So line height should be between 120 and 145 percent, 89 89
and I will actually use the highest of the values, 90 90
because I really like some line height. 91 91
Now one thing that you notice is that this line 92 92
is very long, because another rule of typography 93 93
was that this line should have at most two 94 94
complete alphabets, and this is way more, 95 95
so let's make this paragraph a little less wide, 96 96
so I will say that the width of this paragraph 97 97
should be 70 percent. 98 98
Now the problem is that it will no longer be centered, 99 99
so a good idea for this problem is that instead of trying 100 100
to centering it, is to do another thing, which is this: 101 101
we say that the margin left should be 15 percent. 102 102
And why 15? 103 103
Because the total width would be 100 percent, 104 104
so if we want to center it, the remaining 30 percent 105 105
should be distributed to both sides. 106 106
So 15 percent left, 15 percent right, plus the 70 percent, 107 107
which is our width, makes 100 percent. 108 108
Okay, so let's see what it looks like. 109 109
Okay, and this is way better now. 110 110
Maybe you already noticed that sometimes I have to scroll 111 111
the webpage a little bit in order to make 112 112
our changes appear here, and I actually have no idea 113 113
why this happens, it must be something with the connection 114 114
between bracket and the browser, so don't worry, 115 115
maybe if you also experience this, just scroll your website 116 116
a little bit, and then the change will appear. 117 117
Now the next thing is to format these boxes. 118 118
And the first thing I notice immediately 119 119
is that these columns are a little too close to each other, 120 120
so I should give them some petting here, 121 121
like for example, one percent petting. 122 122
So let's go back to CSS, and now how should we do this? 123 123
So we should never, ever change anything of these classes 124 124
which come from our grid, so what we can do here 125 125
is to add another class, and then format that class, 126 126
and I will call it box, because you know, 127 127
it's like a box where all the features go. 128 128
And I will actually reuse this box probably later, 129 129
so let me just put it here. 130 130
I will call it box, and I just want to 131 131
have it a petting of one percent. 132 132
Alright, and that looks a little bit better now. 133 133
Now, these H3 elements here, they should be similar 134 134
to this one, but a little smaller, so I do 135 135
all the petting elements look similar, so that we maintain 136 136
a similar style all throughout the webpage. 137 137
So I want these three attributes to be always the same 138 138
in all these three pettings, and for the H3 ones 139 139
in specific, it should also be a little bigger 140 140
than the normal font size, but only slightly bigger, 141 141
so maybe 110 percent should be fine, and then also 142 142
some space between the H3 and the paragraph, 143 143
so let me say a margin bottom for instance, 15 pixels. 144 144
Alright, now I really don't like that this text 145 145
doesn't fit in one line, so what can we do about that? 146 146
Let's go back and maybe the reason for that 147 147
is this letter spacing, so if we take that away from the H3, 148 148
and I do this by pasting it here under H1 and in H2 149 149
headings, we will see so now the H3 no longer 150 150
has the letter spacing so let's see what happens. 151 151
Okay, now it fits, just as we wanted it, 152 152
so this is much better. 153 153
Now as for the text in here, I think this 154 154
is a little too big, actually. 155 155
It looks a bit overwhelming, don't you think so? 156 156
So what we can do here is to make the text 157 157
a little bit smaller, and raise its line height. 158 158
So we didn't give it any name because maybe 159 159
we don't need to, but you can see here, that it's a simple 160 160
paragraph inside of the box, so you already can guess 161 161
what I'm gonna do now, right? 162 162
I'm writing box and then I'm selecting 163 163
all the paragraphs inside a box, very easy. 164 164
So as I said a smaller font size, I will choose 165 165
90 percent here, and again I'm going 166 166
with a line height of 145 percent. 167 167
That will look much better. 168 168
So I think that's way more pleasant to look at. 169 169
And this section already looks great, don't you think so? 170 170
The only thing that we need to do now 171 171
is to change these icons, so let's do that. 172 172
And in order to do that, I will actually define 173 173
a new class for all those icons, and I will call this 174 174
icon big, because we will use some other icons 175 175
down the road, and they will probably not be as big 176 176
as these, so let's just call these icons big icons. 177 177
Makes sense right? 178 178
So, I can just say I want paragraphs, and here I want 179 179
some icons, so you see I'm really worried 180 180
with keeping this code organized, and you will see 181 181
when you have bigger projects, 182 182
this becomes incredibly important. 183 183
So in order to make you get used to this, 184 184
is why I'm doing this. 185 185
So let's define the icon big class, and as you notice, 186 186
it's an icon font, so it's really a font, so you can set 187 187
its font size, for instance, and I will make it really big. 188 188
I will start with 400 percent, and if it's too big, 189 189
we can always reduce that. 190 190
And I also want this icon to display as a block... 191 191
display block, so that it forces a line break, 192 192
as you already know. 193 193
I want it to be orange, so again as if it was a real font, 194 194
we can set its color, because color really means font color, 195 195
so I will again copy this orange color 196 196
that we're already used to and put it right here. 197 197
It may be a little margin between the icon and the heading, 198 198
so margin bottom, of course, and let's say 10 pixels. 199 199
And, okay, I think we can see how this looks like. 200 200
Okay, great. 201 201
Well the icons are probably a little too big, right? 202 202
So I think I'll maybe 350 percent, and let's check it again. 203 203
Yeah, that's better. 204 204
So this is really designing in the browser, 205 205
that's what I meant when I said-- when I told you 206 206
what designing in a browser was all about. 207 207
It's trying, tweaking the CSS codes, and see what 208 208
looks best and what works best in order 209 209
to make our website as good as we can. 210 210
So I think this section is ready, it looks great, right? 211 211
And see you in the next section.