Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,391 --> 00:00:02,656 Hi there. 2 2 00:00:02,656 --> 00:00:05,741 Let's build the third section of our website, 3 3 00:00:05,741 --> 00:00:07,991 the favorite meals section. 4 4 00:00:09,152 --> 00:00:12,500 For this section, we will use beautiful photography 5 5 00:00:12,500 --> 00:00:14,368 and a nice transition effect 6 6 00:00:14,368 --> 00:00:18,346 to show the favorite meals of Omnifood's users. 7 7 00:00:18,346 --> 00:00:21,768 I planned the section, like you can see on that sketch 8 8 00:00:21,768 --> 00:00:23,749 that I did on the left side. 9 9 00:00:23,749 --> 00:00:27,740 And on the right side, we see how it will look like. 10 10 00:00:27,740 --> 00:00:30,263 Notice that this section has no title 11 11 00:00:30,263 --> 00:00:33,953 and uses 100% of the browser's width. 12 12 00:00:33,953 --> 00:00:35,786 So, no row class here. 13 13 00:00:37,040 --> 00:00:40,309 I choose this design so that those beautiful images 14 14 00:00:40,309 --> 00:00:42,059 have a bigger impact. 15 15 00:00:44,072 --> 00:00:45,745 In this lecture, you will learn 16 16 00:00:45,745 --> 00:00:48,564 how to make a grid of beautiful images 17 17 00:00:48,564 --> 00:00:51,383 and how to make a nice "zoom-in" transition 18 18 00:00:51,383 --> 00:00:52,633 just using CSS. 19 19 00:00:53,852 --> 00:00:56,769 This is really powerful CSS3 stuff. 20 20 00:00:57,856 --> 00:01:02,023 And we'll also learn a way to make <img> elements darker. 21 21 00:01:02,916 --> 00:01:05,249 It's all super easy and fun. 22 22 00:01:06,299 --> 00:01:08,466 So, back to our html file. 23 23 00:01:09,343 --> 00:01:12,510 Now, how are we gonna build this grid? 24 24 00:01:13,875 --> 00:01:17,542 First of all, we need to make a new section. 25 25 00:01:20,489 --> 00:01:21,489 So, section, 26 26 00:01:24,082 --> 00:01:26,955 and again I will call this "section," 27 27 00:01:26,955 --> 00:01:29,288 and this time, it's "meals." 28 28 00:01:31,653 --> 00:01:33,403 Now, we want two rows 29 29 00:01:34,557 --> 00:01:36,974 with four images in each row. 30 30 00:01:37,835 --> 00:01:42,404 As I said before, we will not use the row class here 31 31 00:01:42,404 --> 00:01:45,284 because we don't want a centered row with some images. 32 32 00:01:45,284 --> 00:01:46,550 No, we want the images 33 33 00:01:46,550 --> 00:01:50,480 to occupy 100% of the browser's width. 34 34 00:01:50,480 --> 00:01:54,679 And it is actually a good practice to use an unordered list 35 35 00:01:54,679 --> 00:01:58,383 to do that; in fact, two unordered lists. 36 36 00:01:58,383 --> 00:02:00,883 We will use one for each line. 37 37 00:02:02,879 --> 00:02:04,970 Just as I did in the navigation, 38 38 00:02:04,970 --> 00:02:09,284 it's better to put some stuff in unordered lists; 39 39 00:02:09,284 --> 00:02:12,507 for example, those four links in the navigation, 40 40 00:02:12,507 --> 00:02:15,464 or these images that we're gonna use now, 41 41 00:02:15,464 --> 00:02:19,214 than just throw the images onto that website. 42 42 00:02:20,683 --> 00:02:24,246 So this is what we're gonna do now. 43 43 00:02:24,246 --> 00:02:28,413 <ul> class, and I will call this "meals-showcase". 44 44 00:02:33,325 --> 00:02:36,637 Alright, and, you remembered it: 45 45 00:02:36,637 --> 00:02:40,478 we will have that <li> element inside of that. 46 46 00:02:40,478 --> 00:02:43,935 Now, inside of this list we can put anything we want. 47 47 00:02:43,935 --> 00:02:46,035 In the navigation, we put links in here. 48 48 00:02:46,035 --> 00:02:50,202 Now we will see a new html element called <figure>. 49 49 00:02:53,048 --> 00:02:55,648 And <figure> is also like a container 50 50 00:02:55,648 --> 00:02:57,815 which can contain an image 51 51 00:02:58,784 --> 00:03:01,585 and also a caption for that image. 52 52 00:03:01,585 --> 00:03:03,411 In this case, we will only put 53 53 00:03:03,411 --> 00:03:07,728 an image inside of this container, and no caption. 54 54 00:03:07,728 --> 00:03:12,437 Because I don't wanna make things all too complicated here. 55 55 00:03:12,437 --> 00:03:14,270 But, just so you know, 56 56 00:03:15,999 --> 00:03:19,720 there is an element called <figcaption> and you can use that 57 57 00:03:19,720 --> 00:03:22,053 to put some caption in here. 58 58 00:03:24,926 --> 00:03:26,129 So, image. 59 59 00:03:26,129 --> 00:03:30,296 As you remember, we have to specify the source attribute. 60 60 00:03:31,510 --> 00:03:33,843 And now, where is our image? 61 61 00:03:34,810 --> 00:03:38,977 It is probably in /resources/img/ 62 62 00:03:40,664 --> 00:03:44,884 and now let's better check what's inside of that folder 63 63 00:03:44,884 --> 00:03:46,801 so that we're completely sure. 64 64 00:03:46,801 --> 00:03:50,551 So, resources, img, and yeah, you'll see here 65 65 00:03:51,688 --> 00:03:53,587 these are our meals. 66 66 00:03:53,587 --> 00:03:57,985 So, one, two, three, four, five, six, seven, eight. 67 67 00:03:57,985 --> 00:04:00,652 This is the order of the images. 68 68 00:04:02,763 --> 00:04:05,346 And actually, in the text file, 69 69 00:04:06,997 --> 00:04:08,979 we have the name of the meals, 70 70 00:04:08,979 --> 00:04:10,146 and we can put 71 71 00:04:11,998 --> 00:04:12,915 those names 72 72 00:04:14,736 --> 00:04:17,736 in the alt description of the image. 73 73 00:04:19,511 --> 00:04:22,261 So here, we just want this image. 74 74 00:04:23,901 --> 00:04:26,984 Let me paste those names here, again, 75 75 00:04:28,239 --> 00:04:29,555 with a comment, 76 76 00:04:29,555 --> 00:04:31,472 as I showed you before, 77 77 00:04:32,502 --> 00:04:34,419 and close this comment. 78 78 00:04:37,683 --> 00:04:40,850 Okay, so this is the alternative text, 79 79 00:04:42,319 --> 00:04:44,182 as you already know, in case that the image 80 80 00:04:44,182 --> 00:04:46,911 cannot be displayed for some reason. 81 81 00:04:46,911 --> 00:04:48,078 And that's it. 82 82 00:04:49,811 --> 00:04:53,545 So I will copy this three more times, 83 83 00:04:53,545 --> 00:04:56,295 so that we have four images here. 84 84 00:04:58,055 --> 00:05:02,222 So this is number two, number three, and number four. 85 85 00:05:07,747 --> 00:05:10,247 And just copy these alt texts. 86 86 00:05:14,152 --> 00:05:16,069 "Chicken breast steak," 87 87 00:05:20,337 --> 00:05:22,504 and "Autumn pumpkin soup." 88 88 00:05:23,944 --> 00:05:27,098 Wow, this sounds really good. 89 89 00:05:27,098 --> 00:05:30,336 Makes you feel hungry, right? 90 90 00:05:30,336 --> 00:05:33,336 Okay, this is the first four images. 91 91 00:05:35,161 --> 00:05:38,767 The first row of images, and now the second row. 92 92 00:05:38,767 --> 00:05:41,037 So, we will format all of this in a second 93 93 00:05:41,037 --> 00:05:42,704 in CSS, don't worry. 94 94 00:05:44,255 --> 00:05:48,172 And number six, number seven, and number eight. 95 95 00:05:51,867 --> 00:05:54,034 And now, the descriptions. 96 96 00:05:58,343 --> 00:06:01,093 So it's really important that you 97 97 00:06:02,167 --> 00:06:04,417 fill out this alt attribute 98 98 00:06:07,325 --> 00:06:10,742 in order to make your website valid html. 99 99 00:06:14,991 --> 00:06:17,824 We will see later in the course how we can check 100 100 00:06:17,824 --> 00:06:21,741 if we actually have valid or invalid html code. 101 101 00:06:22,822 --> 00:06:25,155 So this is really important. 102 102 00:06:26,430 --> 00:06:27,263 Alright. 103 103 00:06:32,305 --> 00:06:36,305 So, let's see what it looks like on our webpage. 104 104 00:06:40,230 --> 00:06:43,750 Of course, these images are so big, 105 105 00:06:43,750 --> 00:06:46,833 and look nothing like we want so far. 106 106 00:06:51,976 --> 00:06:55,643 But we're gonna fix that with CSS right now. 107 107 00:07:01,050 --> 00:07:04,883 So, remember, this is called "meals-showcase." 108 108 00:07:06,125 --> 00:07:08,394 I will just copy this 109 109 00:07:08,394 --> 00:07:11,478 so you don't have to write it all again. 110 110 00:07:11,478 --> 00:07:13,061 So, meals-showcase. 111 111 00:07:14,001 --> 00:07:15,663 We copy this. 112 112 00:07:15,663 --> 00:07:20,396 Again, I'm really worried about the structure here, 113 113 00:07:20,396 --> 00:07:22,063 so this is to Meals. 114 114 00:07:29,386 --> 00:07:31,969 As before, since this is a list 115 115 00:07:33,180 --> 00:07:36,172 and we don't want that bullet point, 116 116 00:07:36,172 --> 00:07:38,172 we say list-style: none; 117 117 00:07:40,331 --> 00:07:43,414 and another thing, since we want this 118 118 00:07:44,515 --> 00:07:47,098 to be the entire browser width, 119 119 00:07:48,358 --> 00:07:50,691 I will say width: 100%; 120 120 00:07:53,367 --> 00:07:56,536 So I hope you are already getting familiar with all of that 121 121 00:07:56,536 --> 00:08:00,997 and that you can follow exactly what I'm doing here. 122 122 00:08:00,997 --> 00:08:05,008 Now the next thing is to format the <li> elements 123 123 00:08:05,008 --> 00:08:07,425 inside of the unordered list. 124 124 00:08:09,043 --> 00:08:10,960 So, .meals-showcase li, 125 125 00:08:14,284 --> 00:08:15,867 as we already know. 126 126 00:08:18,627 --> 00:08:21,877 So, we want to display them as a block. 127 127 00:08:23,867 --> 00:08:27,283 So you see, this display property here 128 128 00:08:27,283 --> 00:08:29,488 is a really important one. 129 129 00:08:29,488 --> 00:08:32,716 I'm using it all the time, and you will, too, 130 130 00:08:32,716 --> 00:08:35,799 once you develop your first websites. 131 131 00:08:37,996 --> 00:08:41,496 And the next thing is that I want to float 132 132 00:08:42,972 --> 00:08:45,871 these elements to the left, 133 133 00:08:45,871 --> 00:08:49,135 so instead of showing one-after-one, 134 134 00:08:49,135 --> 00:08:51,218 I want them side-by-side. 135 135 00:08:53,411 --> 00:08:58,073 And another very important thing is their width. 136 136 00:08:58,073 --> 00:09:02,114 So, I'm having a list with 100% width 137 137 00:09:02,114 --> 00:09:05,364 and I want four elements inside of this 138 138 00:09:06,450 --> 00:09:09,618 to show side-by-side with the full width. 139 139 00:09:09,618 --> 00:09:13,264 So, I have four <li> elements, and therefore, 140 140 00:09:13,264 --> 00:09:16,931 each of them has to be 25% wide, right? 141 141 00:09:19,097 --> 00:09:22,597 Because four times 25 makes the 100%. 142 142 00:09:29,341 --> 00:09:32,341 Now, let me just do one thing, here, 143 143 00:09:36,476 --> 00:09:37,309 and let me 144 144 00:09:38,379 --> 00:09:40,753 give this <figure> element a class. 145 145 00:09:40,753 --> 00:09:43,253 I will call this "meal-photo." 146 146 00:09:48,639 --> 00:09:52,806 And I will do this with all of these eight figures. 147 147 00:09:57,283 --> 00:09:58,116 And 148 148 00:09:59,475 --> 00:10:01,308 one, two, three, four. 149 149 00:10:07,916 --> 00:10:11,333 What I want to do now is to format these. 150 150 00:10:12,843 --> 00:10:14,510 So, it's .meal-photo 151 151 00:10:20,700 --> 00:10:23,903 and what I gotta do now is to say this: 152 152 00:10:23,903 --> 00:10:25,320 width: 100%; 153 153 00:10:26,398 --> 00:10:30,281 Now, saying that this element with the class "meal-photo" 154 154 00:10:30,281 --> 00:10:33,392 has a width of 100%, means just 155 155 00:10:33,392 --> 00:10:37,256 that it has the exact width of its parent, 156 156 00:10:37,256 --> 00:10:39,589 which is .meals-showcase li. 157 157 00:10:41,674 --> 00:10:45,841 And we have also to say that it has a margin: zero. 158 158 00:10:47,336 --> 00:10:51,097 I know that we already did this in the beginning, here, 159 159 00:10:51,097 --> 00:10:53,267 so maybe what you are wondering, 160 160 00:10:53,267 --> 00:10:55,767 what is with the <h1> element? 161 161 00:10:57,461 --> 00:10:59,211 This "normalize" file 162 162 00:11:02,299 --> 00:11:05,299 defines some margin for that element 163 163 00:11:06,510 --> 00:11:10,440 and so we have to overwrite that specifically. 164 164 00:11:10,440 --> 00:11:14,023 And now, I need to format the actual photo, 165 165 00:11:15,531 --> 00:11:19,508 the actual image inside of the photo container. 166 166 00:11:19,508 --> 00:11:22,433 And the most important thing I have to do is, 167 167 00:11:22,433 --> 00:11:24,933 again, width equals 100%. 168 168 00:11:27,683 --> 00:11:31,452 And this will do exactly the same thing as before: 169 169 00:11:31,452 --> 00:11:33,304 it will assure that the image 170 170 00:11:33,304 --> 00:11:36,304 is exactly as wide as its container, 171 171 00:11:37,209 --> 00:11:39,042 which is this element. 172 172 00:11:39,905 --> 00:11:43,738 And the height will then be set automatically. 173 173 00:11:46,604 --> 00:11:48,854 So, what does it look like? 174 174 00:11:51,867 --> 00:11:56,338 Alright, this is exactly what we want, right? 175 175 00:11:56,338 --> 00:11:58,415 This looks great! 176 176 00:11:58,415 --> 00:12:00,570 The images are already here, 177 177 00:12:00,570 --> 00:12:02,671 but we're not quite done with this, 178 178 00:12:02,671 --> 00:12:06,232 because, as I said in the introduction of this lecture, 179 179 00:12:06,232 --> 00:12:09,381 We want to add some cool transitions here. 180 180 00:12:09,381 --> 00:12:11,064 And that's what we're gonna do 181 181 00:12:11,064 --> 00:12:14,940 in Part Two: Building the Meal Section. 182 182 00:12:14,940 --> 00:12:16,107 See you there! 15179