Voiceover: 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.