Original subtitles

1 1

I hope you're excited for yet another lecture 2

2

on our killer website project. 3

3

In this lecture, we'll build a section 4

4

where the user can see in which cities OmniFoot works. 5

5

And here is a simple way of showing exactly that. 6

6

Just an image of each city with some details below them, 7

7

beautifully side by side. 8

8

And in this lecture, we'll practice some of our new skills. 9

9

We'll also learn how to use small icons 10

10

aligned with some text. 11

11

This is a little trickier than the big icons we used before. 12

12

And finally, we'll learn how to best style generic links. 13

13

Which are the normal text links you usually see 14

14

on all kind of websites. 15

15

So let's start this, right now. 16

16

Okay, back in brackets. 17

17

Now, as you are already used to, 18

18

we will start in your section and name it. 19

19

This one is called section 20

20

cities, 21

21

because we're showing our cities here. 22

22

And now we do the exact same thing 23

23

as we did here. 24

24

So I can actually copy it, to save us some time. 25

25

So that's the title, with some text in it. 26

26

And again, we will get our text from the text document. 27

27

Copy all of it, 28

28

and 29

29

paste it down here with comments. 30

30

So, copy this 31

31

and 32

32

paste it here. 33

33

Of course we don't need this, 34

34

so the title is already here. 35

35

And now, as you remember we have those four 36

36

columns with the photos and the details below. 37

37

The photos. 38

38

So, what are we gonna do? 39

39

Maybe I will give you some time to practice this, 40

40

because I hope you already know how to do this by now. 41

41

So just pause this, 42

42

and 43

43

continue to code by yourself. 44

44

Alright, so I hope that you managed to 45

45

write some code here 46

46

and now I will show you how I would do it. 47

47

So of course, we need a new row. 48

48

A new row 49

49

and then 50

50

some columns inside of it. 51

51

So class column, col, 52

52

and then, since we have four image 53

53

span one of 54

54

four. 55

55

Alright, 56

56

now we need our text in here. 57

57

So let me see what we got here. 58

58

So we have the number of happy eaters. 59

59

We have the number of chefs, 60

60

and we have the Twitter username 61

61

of OmniFoot in this city. 62

62

So what I will do here, 63

63

is to use an icon for each of those, 64

64

and then write the text. 65

65

So an icon for the eaters, one icon for the top chefs, 66

66

and one icon for the Twitter username. 67

67

So let's get those icons from ionicons, 68

68

such as we did before. 69

69

And open their website, ionicons. 70

70

It's already here. 71

71

So for the first one, 72

72

I will chose a user. 73

73

And again I'm going down here to the part of the iOS like 74

74

icons. 75

75

And I want to choose a user. 76

76

Let me see if I can find one, 'kay this looks great to me. 77

77

So I'm going to copy this. 78

78

And let's go back, 79

79

and just 80

80

insert 81

81

an icon, right here. 82

82

So the class, 83

83

paste it, I hope you remember that, 84

84

and that's it. 85

85

And now I can just, 86

86

copy the text here. 87

87

1000 88

88

happy eaters. 89

89

Okay, but before moving on... 90

90

Oh! Actually add 91

91

the image here, 92

92

to this column and 93

93

the title. 94

94

So it is 95

95

an IMG 96

96

and the source is inside of our resource and images. 97

97

Well by now you will 98

98

already know exactly how we should do that, right? 99

99

So this is the image for Lisbon, which is our first city. 100

100

And the alt can just be Lisbon. 101

101

And then again we use our H3 element, 102

102

such as we did in the other box, 103

103

up here, do you remember? 104

104

So we had 105

105

these four boxes, 106

106

it actually had the class box, 107

107

and then an H3 108

108

title. 109

109

And I will now, also reuse this class down here. 110

110

So that those boxes looks quite of similar. 111

111

So I want this column here to be a box as well. 112

112

So right now you start to see 113

113

that we're starting to reuse some of the classes 114

114

on our website 115

115

and that's really nice, 116

116

because that saves us time formatting 117

117

and at the same time it allows us to have some consistency 118

118

throughout our webpage. 119

119

So now we have the image here and we have the title. 120

120

And I guess the best idea is to put each of these icons 121

121

together with the text 122

122

inside 123

123

a 124

124

container, so a div element. 125

125

And we can call them... 126

126

city 127

127

future. 128

128

Don't need this here. 129

129

Great. 130

130

So we have the image, the title, and now we will have 131

131

one little container 132

132

for each of the three details. 133

133

So we have the eaters, 134

134

then we have the 135

135

the top chefs 136

136

and we have the Twitter username. 137

137

And now let's just choose an icon for the top chefs 138

138

and for 139

139

the Twitter name. 140

140

So back in the ionicons library here, 141

141

let's choose a cool icon for the top chefs. 142

142

Maybe a star would be a good idea. 143

143

So let's see if we can find something like that. 144

144

There's really a huge amount of 145

145

icons here. 146

146

Okay, let me copy this 147

147

and then paste it right here. 148

148

So staring now for the Twitter username, 149

149

we have a couple of social icons down here, 150

150

like all kinds of icons that you can imagine: 151

151

Twitter, Facebook, Googleplus, 152

152

Dribbble, 153

153

Instagram, 154

154

Snapchat, really everything you can imagine. 155

155

And we will actually use them later, 156

156

but for now we just need this Twitter icon. 157

157

Alright, 158

158

let me just check how this looks like on our website. 159

159

Okay. 160

160

So of course the image is way too big now 161

161

and that's because we didn't format it yet, 162

162

but our H3 title already looks good 163

163

and this H2 title, of course, 164

164

is also good looking already 165

165

and the icons are showing up here. 166

166

So let's continue 167

167

adding the other three columns. 168

168

And instead of rewriting all of it, 169

169

I will just copy it one, 170

170

two, and three. 171

171

And, so the second one is, 172

172

San Francisco. 173

173

So, 174

174

Lisbon, 175

175

San Francisco. 176

176

Let me look for the image. 177

177

Lisbon... 178

178

San Francisco, oh, the last one. 179

179

Now it's just a matter of 180

180

changing all the stuff. 181

181

So, instead of... 182

182

we have 183

183

3700 184

184

and 160, and here it's SF. 185

185

San Francisco, so... 186

186

Here we have 160 187

187

in SF. 188

188

Yeah, that's right. 189

189

So the next city is Berlin. 190

190

San Francisco and, here we go, Berlin. 191

191

And Berlin. 192

192

Do we have here? 193

193

Alright, it's Berlin. 194

194

And here we have, 195

195

1300 and 196

196

110. 197

197

And 198

198

Berlin. 199

199

And the last on is London. 200

200

And here it is. 201

201

So, 202

202

1200 203

203

50 204

204

and 205

205

London. 206

206

Alright, great. 207

207

Don't need this. 208

208

I'll actually leave the comments there. 209

209

So, right. 210

210

I think the mark up is here, let's check it. 211

211

Great, so it's not formatted, 212

212

as you can see, 213

213

but the content is here 214

214

and all we need to do next is to format it. 215

215

Actually, 216

216

I want to show you this. 217

217

Remember in the last section, 218

218

we defined this gray color here 219

219

and as I had told you it is a great way of separating 220

220

sections from one another. 221

221

Now we can see that. 222

222

So you come down here and it's beautifully separated 223

223

just by this color and by this white space of course. 224

224

So we have lots of white space, 225

225

which gives our website 226

226

visual hierarchy 227

227

and it actually looks designed, 228

228

but all this white space here and here 229

229

and between the images and the title, 230

230

I think it really looks great so far. 231

231

And, yeah, see you in the next lecture 232

232

where we will then use 233

233

CSS to format the thing here. 234

234

Okay, see you there.