Voiceover: Hi, there. 2 2
This is Part Two of Building the how-it-works section 3 3
and this is what we're gonna format in this lecture. 4 4
So let's start with these two step boxes 5 5
and of course make this image here smaller. 6 6
Okay, so right back to the CSS file. 7 7
Let me grab a copy of this. 8 8
And how it works. 9 9
So, I'll start with the steps box 10 10
cause as you remember 11 11
those are 12 12
the two boxes 13 13
the left one and the right one. 14 14
Okay? 15 15
So let's first put a margin between them 16 16
and the h2 title 17 17
somewhere at the top of let's say 30 pixels. 18 18
And now we need to select each of the boxes individually 19 19
and in order to do that I will show you a new 20 20
very, very useful selector 21 21
and it's this one. 22 22
It's actually a zero class 23 23
and it's this one. 24 24
First-child. 25 25
So this will select the first of 26 26
these step boxes. 27 27
Which is, in our case, the left one. 28 28
And there's also a similar one 29 29
which is the last-child. 30 30
So these are two very useful zero classes 31 31
and actually in the course e-book you can find 32 32
a link to an article which has, I think, 33 33
30 very useful selectors such as this one. 34 34
Alright, so in the first box we want the text 35 35
align to be to the right side. 36 36
Now you may ask, "We don't have any text there." 37 37
And that's actually right. 38 38
But the text align property doesn't work only for text 39 39
it actually does work for all in line, or 40 40
in line block elements and the image is one of 41 41
those inline block elements. 42 42
And so, it will then be aligned to the 43 43
right side of this box. 44 44
And I also want to add a heading to the right side 45 45
of three percent. 46 46
And now you maybe feel a little confused 47 47
why I'm adding this heading with a percentage 48 48
instead of adding pixels, and there's a simple reason 49 49
for that and it has to do with responsive web design 50 50
where we want our layout to be fluid, 51 51
and as I explained to you before, 52 52
fluid means that we have all our layout properties 53 53
defined in percentages instead of ridged pixels. 54 54
So let's do the same thing with the other box 55 55
and here we will say that we want a padding 56 56
to the left side of three percent as well. 57 57
And now let's take 58 58
what else we have, so the image, 59 59
I want the image. 60 60
And it's called app-screen, so we already have a 61 61
class name here. 62 62
So let's say app-screen 63 63
and let's say width 64 64
let's say 40 percent. 65 65
And again on defining the width 66 66
with a percentage of the box. 67 67
So let's see what it looks like now. 68 68
Alright, this looks quite good, right? 69 69
So we have a nice distance between the image and the text 70 70
and I think the image size is okay now. 71 71
So the next thing is we want to format 72 72
those numbers here. 73 73
As you remember, we want this to be a circle 74 74
with a number inside of the circle, 75 75
and we also want some distance, some space, 76 76
of course, between each of these work steps elements. 77 77
So let's start doing this. 78 78
Works-step. 79 79
And margin to the bottom, I would say 50 pixels. 80 80
And again, let's take our HTML file 81 81
so we want to select the div element 82 82
inside of a work-steps, 83 83
because that will be our number. 84 84
So, 85 85
works-step div. 86 86
And what are we gonna do? 87 87
First let's set its color to orange. 88 88
And we already know where that is. 89 89
It's 90 90
up here. 91 91
Then we also want a border 92 92
and I will use two pixels here 93 93
such as in other elements on the website, 94 94
so it'll keep some consistency here. 95 95
And here with the same color as well. 96 96
And I want to display it as an in-line box, so 97 97
this very much used property display, 98 98
and I want the inline-blocks because that way 99 99
we can ensure that the element doesn't force a line break 100 100
and so the number can be side by side with the text. 101 101
So let's just check that out. 102 102
Okay, great. 103 103
So we have some distance here now and 104 104
so now let's 105 105
continue formatting this. 106 106
It's now a square and we want it to be a circle. 107 107
And you probably remember how to do it. 108 108
That's border-radius 50 percent. 109 109
And we can now define the height 110 110
of that element, let's say 50 pixel. 111 111
And the width. 112 112
Of course, if we want it to be a circle 113 113
it has to be as high as it's wide. 114 114
And inside of this box, 115 115
the number should be centered. 116 116
So, text-align center. 117 117
So let's check this out. 118 118
Alright, it's already circular. 119 119
We will now increase the font size of this 120 120
and give it some padding. 121 121
So, you see this is now really 122 122
designing in the browser. 123 123
One thing that is also left to do is 124 124
to make this text 125 125
appear here on the side, 126 126
and in order to do that we need to define 127 127
a float property for that element. 128 128
So some padding, as I said, 129 129
I would say like five pixels 130 130
and then let's make it float to the left. 131 131
So you see we have a whole lot of properties here 132 132
for this little element. 133 133
The other thing is the font-size. 134 134
Let's say 150 percent. 135 135
Alright. 136 136
Okay this looks already quite good, right? 137 137
Now what I would do now is to 138 138
define some margin to the right here 139 139
and maybe increase the size of those circles. 140 140
So, a margin to the left 141 141
of 25 pixels. 142 142
It then increases here to let's say 143 143
54. 144 144
Or 55 actually. 145 145
It really doesn't matter for one pixel. 146 146
Okay, this is obviously margin to the right 147 147
not to the left. 148 148
Okay. 149 149
So, this looks cool. 150 150
Now we probably should add some more space 151 151
between this and here at the h2 element 152 152
because it doesn't look quite aligned right now. 153 153
We want the phone to be more aligned 154 154
with this text here. 155 155
And so let's increase the margin for 156 156
this box on the right side. 157 157
So we already defined that there is a margin-top 30 158 158
but we actually want this 159 159
second box to have a larger margin. 160 160
So let's say maybe 70 pixels. 161 161
And so we can cut this and put it here. 162 162
So the first one will have 30 and 163 163
the second will have 70 pixels. 164 164
And so I don't need this one anymore. 165 165
And, alright. 166 166
Great. 167 167
And now one thing left to do is to format 168 168
these buttons here. 169 169
You want them of course to be the same size 170 170
and this one is way too big. 171 171
So let's do that as well. 172 172
We can just say, 173 173
well I better check the HTML because 174 174
I don't remember exactly. 175 175
Okay, so we have the button-app 176 176
and now we want to style the image inside 177 177
of the button-app class. 178 178
So buttom-app img. 179 179
And we want to set height for them. 180 180
Let's say 50 pixels so that they 181 181
look the same. 182 182
So the width is then defined automatically, of course. 183 183
And let's set a margin between them. 184 184
So set a margin to the right side 185 185
of ten pixels. 186 186
And let's check it out. 187 187
Great, now they look quite similar. 188 188
Now it's time to add some margin here. 189 189
So that these two are not so close to the text. 190 190
We want them to be more like here at the 191 191
bottom of the phone. 192 192
So in order to do that I ill actually show you 193 193
a new selector 194 194
cause what I want to do here is to add 195 195
a space to the left work-steps. 196 196
So I'll do that here, and I'll say 197 197
works-step 198 198
and then I'll say, last-of-type. 199 199
This is quite similar to last-child but so 200 200
in order that you get to know last-of-type 201 201
as well I'll show you this too. 202 202
So now I say that I want a larger margin here to the bottom. 203 203
And in this case I will say 80 pixels 204 204
instead of those 50. 205 205
So the work-steps all have 50 pixels, but now 206 206
I stated the last one will have 80 pixels. 207 207
Okay, right. 208 208
For now this looks very good. 209 209
Don't you think so? 210 210
But there is however a problem now, 211 211
which is this. 212 212
You see, that even though we defined 213 213
that a section should have 80 percent padding 214 214
there seems to be no padding here between this 215 215
section and this one, right? 216 216
And there's actually a good reason for that 217 217
and I will use the Chrome developer tools to 218 218
show you that. 219 219
So let's start by inspecting this element. 220 220
It's right here. 221 221
So the section steps which is the selected one 222 222
is the blue one, and we will see that the section 223 223
starts right here. 224 224
So the steps section starts where the meal section 225 225
should start 226 226
and you actually see the green area 227 227
is those 80 pixels padding 228 228
and it starts at a weird place, right? 229 229
But there is actually a good reason for that 230 230
and it has to do with clearing the floats. 231 231
Maybe you remember that from the introductory lectures? 232 232
Where I told you that, when you define some floats 233 233
you then later have to clear those floats 234 234
and we didn't do any of those here. 235 235
So the section meals actually has 236 236
as you can see up there, zero pixels height. 237 237
That's because we didn't clear the floats. 238 238
So we need to take care of that right now. 239 239
And so we go back here. 240 240
And yeah. 241 241
The LivePreview was canceled because, as I told you before 242 242
when you open the Google Chrome developer tools 243 243
in this live window then the connection gets lost. 244 244
Now clearing those floats, 245 245
I will now show you a new class 246 246
which is very used in web design. 247 247
In web development. 248 248
And it's called a clearfix class. 249 249
And I will define it now 250 250
but don't worry about understanding 251 251
exactly what I'm gonna do here. 252 252
We just use this class to clear the floats. 253 253
And the actual clearing happens right here. 254 254
So let me just complete this. 255 255
So again, don't worry so much about 256 256
understanding this. 257 257
Visibility is hidden. 258 258
Okay, what this class will do, 259 259
it will clear the float after an element. 260 260
So we will actually add this class 261 261
here in the ul. 262 262
And I will explain to you why. 263 263
This is because the child elements of this class 264 264
which are the li elements, are the one who have 265 265
the float property, and so we say that the parent 266 266
has this clearfix class and then that float 267 267
will be cleared right after the ul element. 268 268
And we do that here and we do that here. 269 269
And now the problem should be solved. 270 270
So let's open up the connection again. 271 271
And close the old one. 272 272
And here we are. 273 273
So this works, now we have our space here 274 274
such as we want to. 275 275
We can confirm this. 276 276
This section meals. 277 277
And now the section meals no longer has zero pixels height 278 278
but it has its actual 546 pixels height. 279 279
And everything works just right. 280 280
So one other thing to do that I 281 281
told you at the beginning of this lecture, 282 282
is to create a good way to 283 283
separate between different sections. 284 284
And what I want to do here 285 285
is to add a very, very subtle background color 286 286
to this section. 287 287
So it's section-steps. 288 288
And background-color. 289 289
And I will start with white. 290 290
And so as I said, I want a very subtle effect here. 291 291
So such as this one. 292 292
And you will not notice it right now. 293 293
The live connection was lost again, 294 294
I don't know why. 295 295
So this one is white, 296 296
and this has a very subtle grey color. 297 297
And you will not notice it so much now, 298 298
but you will notice the difference once we design 299 299
out next section and it will have a greyed effect. 300 300
So now we have four sections designed, 301 301
and it's already starting to look very promising I think. 302 302
And so in the next lecture we're starting with 303 303
our city section. 304 304
So, feel free to review this lecture or 305 305
to even ask some questions in the course forums 306 306
if you have some and then after that 307 307
see you in the next lecture.