Original subtitles

1 1

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.