Original subtitles

1 1

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.