Voiceover: Hello. Excited for a new lesson? 2 2
I hope so because this is going 3 3
to be a long one. 4 4
Now that we know how the box model works, 5 5
let's build a simple layout for 6 6
our blog page. 7 7
This is where all the fun begins. 8 8
We want a layout just like this one. 9 9
So we want a box with our main content, 10 10
the box for the author info and the 11 11
box to show what other blog posts 12 12
are on our blog. 13 13
We will start by putting all the 14 14
content we have so far inside a container 15 15
and center that container on the web page 16 16
like most of the websites you use every day do. 17 17
We will do that by using the div element, 18 18
which we have not talked about yet. 19 19
The div element is one of the most used elements. 20 20
Div stands for divide, and so we use it simply 21 21
to divide our page into sections by creating 22 22
boxes where we put our contents in. 23 23
So let's wrap all the content we have 24 24
so far inside a div element. 25 25
Starting right here. 26 26
Just write div. 27 27
Some space and I'll copy everything, 28 28
all the content we have so far, 29 29
I will cut it and paste it right here. 30 30
Now I need to indent this code by 31 31
using the tab key. 32 32
I will show you in a second. 33 33
So that the code looks much better. 34 34
And it's easier to read with these indents. 35 35
Html is the first level, that is the second level, 36 36
that's the third level, and everything 37 37
inside of the div is the fourth level. 38 38
And then third level, second level, first level. 39 39
So now let's call this div container. 40 40
So call it container. 41 41
And like I showed you before, we will 42 42
use Command E, this time with the cursor 43 43
on this class name. 44 44
Command E and then we will make 45 45
a new rule for this class. 46 46
So the class selector and the 47 47
name of the class container 48 48
and now we can write our styles 49 49
for this class. 50 50
First, I will define the width 51 51
of this and I will use 1140 pixels 52 52
as the width. 53 53
The standard width has been 960 pixels 54 54
for a long time but as screens start 55 55
getting larger and larger, 56 56
we can also make wider web pages. 57 57
So let me just make these windows bigger 58 58
so we can see what's happening here. 59 59
Now, we want this container to be centered 60 60
in the window, not all the way to the left. 61 61
So let's go back to brackets to do that. 62 62
And it's actually easier than it sounds. 63 63
In order to do that, we have to define 64 64
left and right margin of the container 65 65
to be auto. 66 66
Margin left, auto, and margin right, auto. 67 67
And the auto means that the left 68 68
and right margin are adjusted automatically 69 69
according to the context of the element, 70 70
which is the browser window in this case. 71 71
So let's see what happened. 72 72
So, like magic, the website is centered. 73 73
But even if I adjust the browser window, 74 74
our content always stays centered, you see? 75 75
Now let's go back and create those three boxes 76 76
that we saw earlier. 77 77
Again, we use the div element to do that. 78 78
Div, and I will call the first one "blog post". 79 79
So instead of copying all the content, 80 80
I'll just delete this closing tag 81 81
and put it where we want it to be. 82 82
And it's down here, you see? 83 83
Because here is the part where the author begins 84 84
and everything above it is the blog post. 85 85
And brackets automatically close that for us. 86 86
Now again, let's indent this code 87 87
so it's easier to read. 88 88
Just like this. 89 89
Now, below this, I'll create the container 90 90
for the other blog post which will 91 91
be the green blog post, if you remember it. 92 92
So div, class, other posts. 93 93
That's a great name for this, I think. 94 94
And I'll just put some dummy text here for now. 95 95
And finally, the box for the author. 96 96
We have class, author box. 97 97
We'll move this here. 98 98
Now, indent and code. 99 99
And save it, never forget to save. 100 100
So let's just give them different 101 101
background colors so we can see 102 102
on the web page what's going on. 103 103
Again, I will hit command E because 104 104
it's the easiest way instead of switching 105 105
back and forth between HTML and CSS files. 106 106
So in order to specify a background color, 107 107
it's very easy, just write background color 108 108
and then chose a color. 109 109
If you remember from our color lecture, 110 110
blue is...red 0, green 0 and blue ff. 111 111
Okay, let's close this post and now 112 112
the other posts. For this one and now, 113 113
again, background color. 114 114
This one is green so, it will be 115 115
0 for red, ff for green and 0 for blue. 116 116
If you put this cursor on this color 117 117
we can actually see it. Yeah, it's 118 118
green as we wanted. 119 119
And now the author box, we must 120 120
find a style for this one. 121 121
Background color, we want it yellow. 122 122
So it's ff for red, ff for green and 0 for blue. 123 123
So, yellow. 124 124
We'll close these ones and let's check 125 125
our web page again. 126 126
So blue is the first box, green is 127 127
the second box and yellow is the third box. 128 128
Now, I want the width of the actual blog post 129 129
to be 75 percent of the container and the 130 130
other blog posts sectioned to be 25 percent. 131 131
And that's very easy. 132 132
So the blog posts, we just need to say 133 133
width 75 percent, and the other posts 134 134
Command E, width, 25 percent. 135 135
So you see, we can not use only pixels 136 136
to define measures but also percentages 137 137
which will become very handy later on. 138 138
Now it's 75 percent and that's just 25 percent 139 139
here in the green box. 140 140
Now, to put the green box beside the blue box, 141 141
as we want it for our layout, we need to use 142 142
a new property called float. 143 143
And this is very important. 144 144
With float, an element can be pushed 145 145
to the left or to the right, allowing 146 146
other elements to wrap around it. 147 147
So if we define a float property 148 148
for the blue and for the green box as left, 149 149
the two boxes will be side by side. 150 150
So let's do that. 151 151
We'll start down here. 152 152
Float, left. 153 153
And the blue box also. 154 154
Float, left. 155 155
So let's see what this looks like. 156 156
Great, these two boxes are side by side now. 157 157
Now the problem is the yellow box is 158 158
also up here where we don't want it. 159 159
To avoid this, we have to use a clear property 160 160
which is like the counterpart to float. 161 161
I am actually going to do this in a very specific way. 162 162
So please just copy the CSS code 163 163
that I'm going to write here because 164 164
it's not important that you understand 165 165
it at this point. 166 166
I'll use a very usual clear fix class. 167 167
So write clear fix after. 168 168
Again, it's not important that you understand 169 169
what I'm writing here right now. 170 170
We'll just use this class and clear. Save. 171 171
So after the green box, let's just add 172 172
an empty div with a clear fix class. 173 173
This may look a little strange to you now 174 174
but don't worry. 175 175
We will see how to use this later. 176 176
Clear fix. 177 177
Okay now it should work. 178 178
Yeah, that's it. 179 179
Now, we see that the yellow class is down here 180 180
as we want it so we have these 181 181
two boxes side by side with the 182 182
float property, then we use the 183 183
clear property in the strange clear fix class 184 184
to clear the float so that this box 185 185
can be right under these two boxes. 186 186
Now, let's just add some margins and paddings. 187 187
You see, the blue box and the green box here 188 188
are way too close together so we 189 189
can add paddings to those boxes. 190 190
And I will just go back and 191 191
I will actually use a CSS file here again 192 192
so you can see all those class we created 193 193
inside the html file. 194 194
Brackets put those down here at the 195 195
end of the CSS document. 196 196
The container, the blog posts, 197 197
the other posts and the author box. 198 198
Now let's just add the padding 199 199
to the right side of the blog post. 200 200
If you remember padding, just like 201 201
a wide space inside the box. 202 202
We will just say padding right, 203 203
and say 30 pixels. 204 204
Okay, let's see. 205 205
You'll see this space here, but still 206 206
inside the box so it's still blue. 207 207
And that will give us a nice space 208 208
between those two boxes. 209 209
Now we should also put a little margin 210 210
between the top of the container 211 211
and the browser window. 212 212
So to give it a nice spacing between 213 213
the beginning of the browser window here 214 214
and the beginning of the content. 215 215
And that's easy, the easiest way may be 216 216
in the container element. 217 217
If we set margin top of the container 218 218
to let's say 20 pixels. 219 219
Then, we have this nice spacing 220 220
all the way up here. 221 221
Okay, now let's just get rid of those 222 222
ugly background colors. 223 223
We just use them so we could see the boxes 224 224
while we were working on them. 225 225
Now, maybe see here in the container 226 226
declaration block that we have these 3 margins. 227 227
Margin left, margin right and margin top. 228 228
There's actually a cleaner way of doing this. 229 229
I'll just show you how. 230 230
You can just write margin, then we specify 231 231
the four possible margins in 232 232
this shorthand property. 233 233
So this goes like the top margin is first, 234 234
we'll just write it here so you can see it, 235 235
it's top is the first, then the right, 236 236
then bottom, and then left. 237 237
So the top button, we want to be 20 pixels, right? 238 238
And the right is auto, the bottom is 0 239 239
because we don't have any margin at the bottom, 240 240
and left is auto again. 241 241
So this short declaration here does 242 242
the exact same thing as this. 243 243
Just remember it's margin top, right, bottom and left. 244 244
So I can just delete it and things look 245 245
exactly the same. 246 246
All the margins are still there and as you see, 247 247
the ugly background colors are also gone. 248 248
Another cool thing we can do is add like 249 249
a gray line here to separate the author box 250 250
from the two boxes above them. 251 251
So let's go back to the author box 252 252
and we'll use a border property. 253 253
This border property allows you 254 254
to do three things. 255 255
The border width, the line type and the color. 256 256
So just write border and top, because 257 257
we want it to be at the top of the box, 258 258
and then say 1 pixel width and 259 259
we want it to be solid so just 260 260
a normal solid line and then a nice gray color. 261 261
Remember how to do a gray color? 262 262
You just have to put the same value 263 263
on the three r, g and b channels. 264 264
Let's see 333. 265 265
And then with our color picker, Command E, 266 266
and we can just adjust it. 267 267
We can use another different gray. 268 268
So maybe this one here, I don't know. 269 269
Alright, save it. 270 270
And here we go, here we have this nice gray line. 271 271
And we probably also want some padding here, 272 272
so that all this content is not just glued 273 273
right to the top of this div element. 274 274
So let's also define some padding 275 275
at the top, let's say 20 pixels. 276 276
These numbers are not important 277 277
at this stage because we are just 278 278
trying out some things here. 279 279
Alright, so you see now we have 280 280
this nice padding here. 281 281
So alright, I think we are 282 282
pretty much done with our layout here. 283 283
So we used float and clear in order 284 284
to put all our layout boxes where we wanted them 285 285
and we used padding and margin to create 286 286
some distances between the boxes 287 287
and that's essentially all you need 288 288
in order to build some layouts. 289 289
So in the next lecture, we'll just 290 290
improve some things here on our website 291 291
in order to make it look a little bit better 292 292
and to teach you some more techniques 293 293
that you can use. 294 294
Alright, so see you there.