1 00:00:01,389 --> 00:00:04,492 I hope you're excited for yet another lecture 2 00:00:04,492 --> 00:00:07,234 on our killer website project. 3 00:00:07,234 --> 00:00:09,924 In this lecture, we'll build a section 4 00:00:09,924 --> 00:00:14,450 where the user can see in which cities OmniFoot works. 5 00:00:14,450 --> 00:00:18,267 And here is a simple way of showing exactly that. 6 00:00:18,267 --> 00:00:22,303 Just an image of each city with some details below them, 7 00:00:22,303 --> 00:00:24,386 beautifully side by side. 8 00:00:25,414 --> 00:00:29,925 And in this lecture, we'll practice some of our new skills. 9 00:00:29,925 --> 00:00:32,201 We'll also learn how to use small icons 10 00:00:32,201 --> 00:00:34,546 aligned with some text. 11 00:00:34,546 --> 00:00:38,771 This is a little trickier than the big icons we used before. 12 00:00:38,771 --> 00:00:43,021 And finally, we'll learn how to best style generic links. 13 00:00:43,021 --> 00:00:46,884 Which are the normal text links you usually see 14 00:00:46,884 --> 00:00:49,491 on all kind of websites. 15 00:00:49,491 --> 00:00:52,521 So let's start this, right now. 16 00:00:52,521 --> 00:00:54,438 Okay, back in brackets. 17 00:00:55,272 --> 00:00:57,939 Now, as you are already used to, 18 00:00:58,930 --> 00:01:02,430 we will start in your section and name it. 19 00:01:03,468 --> 00:01:06,374 This one is called section 20 00:01:06,374 --> 00:01:07,580 cities, 21 00:01:07,580 --> 00:01:11,063 because we're showing our cities here. 22 00:01:11,063 --> 00:01:13,482 And now we do the exact same thing 23 00:01:13,482 --> 00:01:15,146 as we did here. 24 00:01:15,146 --> 00:01:19,414 So I can actually copy it, to save us some time. 25 00:01:19,414 --> 00:01:22,852 So that's the title, with some text in it. 26 00:01:22,852 --> 00:01:27,019 And again, we will get our text from the text document. 27 00:01:28,980 --> 00:01:30,230 Copy all of it, 28 00:01:33,241 --> 00:01:34,074 and 29 00:01:35,680 --> 00:01:38,430 paste it down here with comments. 30 00:01:43,586 --> 00:01:44,669 So, copy this 31 00:01:46,048 --> 00:01:46,881 and 32 00:01:47,905 --> 00:01:49,072 paste it here. 33 00:01:53,008 --> 00:01:55,377 Of course we don't need this, 34 00:01:55,377 --> 00:01:58,558 so the title is already here. 35 00:01:58,558 --> 00:02:02,372 And now, as you remember we have those four 36 00:02:02,372 --> 00:02:05,637 columns with the photos and the details below. 37 00:02:05,637 --> 00:02:07,109 The photos. 38 00:02:07,109 --> 00:02:09,442 So, what are we gonna do? 39 00:02:09,442 --> 00:02:11,509 Maybe I will give you some time to practice this, 40 00:02:11,509 --> 00:02:14,862 because I hope you already know how to do this by now. 41 00:02:14,862 --> 00:02:17,034 So just pause this, 42 00:02:17,034 --> 00:02:18,447 and 43 00:02:18,447 --> 00:02:20,864 continue to code by yourself. 44 00:02:25,101 --> 00:02:28,970 Alright, so I hope that you managed to 45 00:02:28,970 --> 00:02:30,473 write some code here 46 00:02:30,473 --> 00:02:33,973 and now I will show you how I would do it. 47 00:02:36,163 --> 00:02:38,830 So of course, we need a new row. 48 00:02:41,076 --> 00:02:42,631 A new row 49 00:02:42,631 --> 00:02:43,464 and then 50 00:02:45,359 --> 00:02:47,499 some columns inside of it. 51 00:02:47,499 --> 00:02:49,249 So class column, col, 52 00:02:50,253 --> 00:02:52,463 and then, since we have four image 53 00:02:52,463 --> 00:02:53,380 span one of 54 00:02:54,219 --> 00:02:55,052 four. 55 00:02:58,848 --> 00:03:00,467 Alright, 56 00:03:00,467 --> 00:03:02,884 now we need our text in here. 57 00:03:03,983 --> 00:03:06,566 So let me see what we got here. 58 00:03:07,485 --> 00:03:10,774 So we have the number of happy eaters. 59 00:03:10,774 --> 00:03:12,797 We have the number of chefs, 60 00:03:12,797 --> 00:03:15,547 and we have the Twitter username 61 00:03:16,988 --> 00:03:19,071 of OmniFoot in this city. 62 00:03:20,929 --> 00:03:22,756 So what I will do here, 63 00:03:22,756 --> 00:03:25,756 is to use an icon for each of those, 64 00:03:26,677 --> 00:03:29,109 and then write the text. 65 00:03:29,109 --> 00:03:32,941 So an icon for the eaters, one icon for the top chefs, 66 00:03:32,941 --> 00:03:36,108 and one icon for the Twitter username. 67 00:03:38,118 --> 00:03:41,526 So let's get those icons from ionicons, 68 00:03:41,526 --> 00:03:43,359 such as we did before. 69 00:03:45,786 --> 00:03:48,283 And open their website, ionicons. 70 00:03:48,283 --> 00:03:49,171 It's already here. 71 00:03:49,171 --> 00:03:50,921 So for the first one, 72 00:03:51,818 --> 00:03:53,485 I will chose a user. 73 00:03:55,366 --> 00:03:59,533 And again I'm going down here to the part of the iOS like 74 00:04:01,125 --> 00:04:01,958 icons. 75 00:04:03,194 --> 00:04:05,527 And I want to choose a user. 76 00:04:06,788 --> 00:04:11,497 Let me see if I can find one, 'kay this looks great to me. 77 00:04:11,497 --> 00:04:13,664 So I'm going to copy this. 78 00:04:16,235 --> 00:04:17,735 And let's go back, 79 00:04:18,649 --> 00:04:19,914 and just 80 00:04:19,914 --> 00:04:21,307 insert 81 00:04:21,307 --> 00:04:22,974 an icon, right here. 82 00:04:23,978 --> 00:04:25,061 So the class, 83 00:04:26,351 --> 00:04:29,035 paste it, I hope you remember that, 84 00:04:29,035 --> 00:04:30,202 and that's it. 85 00:04:31,971 --> 00:04:33,554 And now I can just, 86 00:04:35,955 --> 00:04:37,538 copy the text here. 87 00:04:39,019 --> 00:04:40,367 1000 88 00:04:40,367 --> 00:04:41,450 happy eaters. 89 00:04:45,428 --> 00:04:48,454 Okay, but before moving on... 90 00:04:48,454 --> 00:04:49,787 Oh! Actually add 91 00:04:50,793 --> 00:04:52,043 the image here, 92 00:04:53,093 --> 00:04:55,185 to this column and 93 00:04:55,185 --> 00:04:56,018 the title. 94 00:04:57,333 --> 00:04:58,268 So it is 95 00:04:58,268 --> 00:04:59,101 an IMG 96 00:05:01,333 --> 00:05:05,772 and the source is inside of our resource and images. 97 00:05:05,772 --> 00:05:07,439 Well by now you will 98 00:05:08,860 --> 00:05:12,695 already know exactly how we should do that, right? 99 00:05:12,695 --> 00:05:16,678 So this is the image for Lisbon, which is our first city. 100 00:05:16,678 --> 00:05:19,261 And the alt can just be Lisbon. 101 00:05:22,883 --> 00:05:25,966 And then again we use our H3 element, 102 00:05:26,905 --> 00:05:29,572 such as we did in the other box, 103 00:05:30,758 --> 00:05:33,616 up here, do you remember? 104 00:05:33,616 --> 00:05:35,083 So we had 105 00:05:35,083 --> 00:05:36,500 these four boxes, 106 00:05:37,997 --> 00:05:39,968 it actually had the class box, 107 00:05:39,968 --> 00:05:41,218 and then an H3 108 00:05:42,922 --> 00:05:43,755 title. 109 00:05:45,504 --> 00:05:50,331 And I will now, also reuse this class down here. 110 00:05:50,331 --> 00:05:53,751 So that those boxes looks quite of similar. 111 00:05:53,751 --> 00:05:57,612 So I want this column here to be a box as well. 112 00:05:57,612 --> 00:06:00,832 So right now you start to see 113 00:06:00,832 --> 00:06:03,931 that we're starting to reuse some of the classes 114 00:06:03,931 --> 00:06:05,098 on our website 115 00:06:06,274 --> 00:06:08,150 and that's really nice, 116 00:06:08,150 --> 00:06:11,233 because that saves us time formatting 117 00:06:12,265 --> 00:06:17,234 and at the same time it allows us to have some consistency 118 00:06:17,234 --> 00:06:19,151 throughout our webpage. 119 00:06:20,619 --> 00:06:24,786 So now we have the image here and we have the title. 120 00:06:26,280 --> 00:06:31,134 And I guess the best idea is to put each of these icons 121 00:06:31,134 --> 00:06:32,892 together with the text 122 00:06:32,892 --> 00:06:34,044 inside 123 00:06:34,044 --> 00:06:35,217 a 124 00:06:35,217 --> 00:06:38,071 container, so a div element. 125 00:06:38,071 --> 00:06:39,988 And we can call them... 126 00:06:41,558 --> 00:06:42,391 city 127 00:06:44,129 --> 00:06:44,962 future. 128 00:06:49,574 --> 00:06:51,324 Don't need this here. 129 00:06:54,318 --> 00:06:55,151 Great. 130 00:06:58,103 --> 00:07:01,287 So we have the image, the title, and now we will have 131 00:07:01,287 --> 00:07:02,954 one little container 132 00:07:03,970 --> 00:07:06,470 for each of the three details. 133 00:07:07,498 --> 00:07:09,331 So we have the eaters, 134 00:07:10,558 --> 00:07:11,891 then we have the 135 00:07:14,204 --> 00:07:15,287 the top chefs 136 00:07:17,129 --> 00:07:19,879 and we have the Twitter username. 137 00:07:22,110 --> 00:07:26,239 And now let's just choose an icon for the top chefs 138 00:07:26,239 --> 00:07:27,539 and for 139 00:07:27,539 --> 00:07:28,956 the Twitter name. 140 00:07:31,092 --> 00:07:34,296 So back in the ionicons library here, 141 00:07:34,296 --> 00:07:38,483 let's choose a cool icon for the top chefs. 142 00:07:38,483 --> 00:07:41,640 Maybe a star would be a good idea. 143 00:07:41,640 --> 00:07:46,041 So let's see if we can find something like that. 144 00:07:46,041 --> 00:07:48,624 There's really a huge amount of 145 00:07:49,465 --> 00:07:51,195 icons here. 146 00:07:51,195 --> 00:07:53,028 Okay, let me copy this 147 00:07:55,746 --> 00:07:58,163 and then paste it right here. 148 00:08:00,041 --> 00:08:02,425 So staring now for the Twitter username, 149 00:08:02,425 --> 00:08:06,008 we have a couple of social icons down here, 150 00:08:07,034 --> 00:08:09,420 like all kinds of icons that you can imagine: 151 00:08:09,420 --> 00:08:11,784 Twitter, Facebook, Googleplus, 152 00:08:11,784 --> 00:08:12,617 Dribbble, 153 00:08:13,564 --> 00:08:14,755 Instagram, 154 00:08:14,755 --> 00:08:19,050 Snapchat, really everything you can imagine. 155 00:08:19,050 --> 00:08:22,161 And we will actually use them later, 156 00:08:22,161 --> 00:08:25,744 but for now we just need this Twitter icon. 157 00:08:27,468 --> 00:08:29,018 Alright, 158 00:08:29,018 --> 00:08:33,185 let me just check how this looks like on our website. 159 00:08:36,941 --> 00:08:38,295 Okay. 160 00:08:38,295 --> 00:08:40,485 So of course the image is way too big now 161 00:08:40,485 --> 00:08:43,060 and that's because we didn't format it yet, 162 00:08:43,060 --> 00:08:46,239 but our H3 title already looks good 163 00:08:46,239 --> 00:08:48,656 and this H2 title, of course, 164 00:08:49,668 --> 00:08:52,106 is also good looking already 165 00:08:52,106 --> 00:08:54,190 and the icons are showing up here. 166 00:08:54,190 --> 00:08:55,864 So let's continue 167 00:08:55,864 --> 00:08:58,447 adding the other three columns. 168 00:09:01,369 --> 00:09:03,725 And instead of rewriting all of it, 169 00:09:03,725 --> 00:09:06,062 I will just copy it one, 170 00:09:06,062 --> 00:09:07,312 two, and three. 171 00:09:11,860 --> 00:09:14,027 And, so the second one is, 172 00:09:15,608 --> 00:09:16,775 San Francisco. 173 00:09:21,024 --> 00:09:22,188 So, 174 00:09:22,188 --> 00:09:23,021 Lisbon, 175 00:09:24,904 --> 00:09:26,071 San Francisco. 176 00:09:31,403 --> 00:09:33,399 Let me look for the image. 177 00:09:33,399 --> 00:09:34,232 Lisbon... 178 00:09:35,185 --> 00:09:37,852 San Francisco, oh, the last one. 179 00:09:39,333 --> 00:09:41,416 Now it's just a matter of 180 00:09:43,792 --> 00:09:45,709 changing all the stuff. 181 00:09:48,017 --> 00:09:49,434 So, instead of... 182 00:09:51,427 --> 00:09:52,770 we have 183 00:09:52,770 --> 00:09:54,161 3700 184 00:09:54,161 --> 00:09:56,328 and 160, and here it's SF. 185 00:09:59,181 --> 00:10:00,848 San Francisco, so... 186 00:10:02,205 --> 00:10:03,538 Here we have 160 187 00:10:05,269 --> 00:10:06,102 in SF. 188 00:10:08,498 --> 00:10:09,435 Yeah, that's right. 189 00:10:09,435 --> 00:10:11,685 So the next city is Berlin. 190 00:10:13,593 --> 00:10:16,705 San Francisco and, here we go, Berlin. 191 00:10:16,705 --> 00:10:17,622 And Berlin. 192 00:10:22,173 --> 00:10:23,481 Do we have here? 193 00:10:23,481 --> 00:10:25,231 Alright, it's Berlin. 194 00:10:30,115 --> 00:10:31,532 And here we have, 195 00:10:32,420 --> 00:10:33,253 1300 and 196 00:10:34,536 --> 00:10:35,369 110. 197 00:10:41,177 --> 00:10:42,010 And 198 00:10:42,942 --> 00:10:44,162 Berlin. 199 00:10:44,162 --> 00:10:46,329 And the last on is London. 200 00:11:02,216 --> 00:11:03,466 And here it is. 201 00:11:06,153 --> 00:11:06,986 So, 202 00:11:08,504 --> 00:11:09,337 1200 203 00:11:11,326 --> 00:11:12,638 50 204 00:11:12,638 --> 00:11:13,909 and 205 00:11:13,909 --> 00:11:14,742 London. 206 00:11:16,278 --> 00:11:17,528 Alright, great. 207 00:11:18,669 --> 00:11:19,668 Don't need this. 208 00:11:19,668 --> 00:11:22,918 I'll actually leave the comments there. 209 00:11:24,741 --> 00:11:25,574 So, right. 210 00:11:26,594 --> 00:11:30,261 I think the mark up is here, let's check it. 211 00:11:31,203 --> 00:11:34,435 Great, so it's not formatted, 212 00:11:34,435 --> 00:11:35,685 as you can see, 213 00:11:37,000 --> 00:11:38,643 but the content is here 214 00:11:38,643 --> 00:11:42,039 and all we need to do next is to format it. 215 00:11:42,039 --> 00:11:43,639 Actually, 216 00:11:43,639 --> 00:11:46,107 I want to show you this. 217 00:11:46,107 --> 00:11:48,603 Remember in the last section, 218 00:11:48,603 --> 00:11:51,186 we defined this gray color here 219 00:11:51,186 --> 00:11:55,144 and as I had told you it is a great way of separating 220 00:11:55,144 --> 00:11:57,454 sections from one another. 221 00:11:57,454 --> 00:11:59,121 Now we can see that. 222 00:12:00,003 --> 00:12:03,424 So you come down here and it's beautifully separated 223 00:12:03,424 --> 00:12:08,417 just by this color and by this white space of course. 224 00:12:08,417 --> 00:12:10,396 So we have lots of white space, 225 00:12:10,396 --> 00:12:13,030 which gives our website 226 00:12:13,030 --> 00:12:14,363 visual hierarchy 227 00:12:15,221 --> 00:12:16,703 and it actually looks designed, 228 00:12:16,703 --> 00:12:19,123 but all this white space here and here 229 00:12:19,123 --> 00:12:22,815 and between the images and the title, 230 00:12:22,815 --> 00:12:25,898 I think it really looks great so far. 231 00:12:26,863 --> 00:12:29,691 And, yeah, see you in the next lecture 232 00:12:29,691 --> 00:12:31,700 where we will then use 233 00:12:31,700 --> 00:12:34,117 CSS to format the thing here. 234 00:12:35,380 --> 00:12:37,047 Okay, see you there.