Voiceover: Hi there. 2 2
Let's build the third section of our website, 3 3
the favorite meals section. 4 4
For this section, we will use beautiful photography 5 5
and a nice transition effect 6 6
to show the favorite meals of Omnifood's users. 7 7
I planned the section, like you can see on that sketch 8 8
that I did on the left side. 9 9
And on the right side, we see how it will look like. 10 10
Notice that this section has no title 11 11
and uses 100% of the browser's width. 12 12
So, no row class here. 13 13
I choose this design so that those beautiful images 14 14
have a bigger impact. 15 15
In this lecture, you will learn 16 16
how to make a grid of beautiful images 17 17
and how to make a nice "zoom-in" transition 18 18
just using CSS. 19 19
This is really powerful CSS3 stuff. 20 20
And we'll also learn a way to make <img> elements darker. 21 21
It's all super easy and fun. 22 22
So, back to our html file. 23 23
Now, how are we gonna build this grid? 24 24
First of all, we need to make a new section. 25 25
So, section, 26 26
and again I will call this "section," 27 27
and this time, it's "meals." 28 28
Now, we want two rows 29 29
with four images in each row. 30 30
As I said before, we will not use the row class here 31 31
because we don't want a centered row with some images. 32 32
No, we want the images 33 33
to occupy 100% of the browser's width. 34 34
And it is actually a good practice to use an unordered list 35 35
to do that; in fact, two unordered lists. 36 36
We will use one for each line. 37 37
Just as I did in the navigation, 38 38
it's better to put some stuff in unordered lists; 39 39
for example, those four links in the navigation, 40 40
or these images that we're gonna use now, 41 41
than just throw the images onto that website. 42 42
So this is what we're gonna do now. 43 43
<ul> class, and I will call this "meals-showcase". 44 44
Alright, and, you remembered it: 45 45
we will have that <li> element inside of that. 46 46
Now, inside of this list we can put anything we want. 47 47
In the navigation, we put links in here. 48 48
Now we will see a new html element called <figure>. 49 49
And <figure> is also like a container 50 50
which can contain an image 51 51
and also a caption for that image. 52 52
In this case, we will only put 53 53
an image inside of this container, and no caption. 54 54
Because I don't wanna make things all too complicated here. 55 55
But, just so you know, 56 56
there is an element called <figcaption> and you can use that 57 57
to put some caption in here. 58 58
So, image. 59 59
As you remember, we have to specify the source attribute. 60 60
And now, where is our image? 61 61
It is probably in /resources/img/ 62 62
and now let's better check what's inside of that folder 63 63
so that we're completely sure. 64 64
So, resources, img, and yeah, you'll see here 65 65
these are our meals. 66 66
So, one, two, three, four, five, six, seven, eight. 67 67
This is the order of the images. 68 68
And actually, in the text file, 69 69
we have the name of the meals, 70 70
and we can put 71 71
those names 72 72
in the alt description of the image. 73 73
So here, we just want this image. 74 74
Let me paste those names here, again, 75 75
with a comment, 76 76
as I showed you before, 77 77
and close this comment. 78 78
Okay, so this is the alternative text, 79 79
as you already know, in case that the image 80 80
cannot be displayed for some reason. 81 81
And that's it. 82 82
So I will copy this three more times, 83 83
so that we have four images here. 84 84
So this is number two, number three, and number four. 85 85
And just copy these alt texts. 86 86
"Chicken breast steak," 87 87
and "Autumn pumpkin soup." 88 88
Wow, this sounds really good. 89 89
Makes you feel hungry, right? 90 90
Okay, this is the first four images. 91 91
The first row of images, and now the second row. 92 92
So, we will format all of this in a second 93 93
in CSS, don't worry. 94 94
And number six, number seven, and number eight. 95 95
And now, the descriptions. 96 96
So it's really important that you 97 97
fill out this alt attribute 98 98
in order to make your website valid html. 99 99
We will see later in the course how we can check 100 100
if we actually have valid or invalid html code. 101 101
So this is really important. 102 102
Alright. 103 103
So, let's see what it looks like on our webpage. 104 104
Of course, these images are so big, 105 105
and look nothing like we want so far. 106 106
But we're gonna fix that with CSS right now. 107 107
So, remember, this is called "meals-showcase." 108 108
I will just copy this 109 109
so you don't have to write it all again. 110 110
So, meals-showcase. 111 111
We copy this. 112 112
Again, I'm really worried about the structure here, 113 113
so this is to Meals. 114 114
As before, since this is a list 115 115
and we don't want that bullet point, 116 116
we say list-style: none; 117 117
and another thing, since we want this 118 118
to be the entire browser width, 119 119
I will say width: 100%; 120 120
So I hope you are already getting familiar with all of that 121 121
and that you can follow exactly what I'm doing here. 122 122
Now the next thing is to format the <li> elements 123 123
inside of the unordered list. 124 124
So, .meals-showcase li, 125 125
as we already know. 126 126
So, we want to display them as a block. 127 127
So you see, this display property here 128 128
is a really important one. 129 129
I'm using it all the time, and you will, too, 130 130
once you develop your first websites. 131 131
And the next thing is that I want to float 132 132
these elements to the left, 133 133
so instead of showing one-after-one, 134 134
I want them side-by-side. 135 135
And another very important thing is their width. 136 136
So, I'm having a list with 100% width 137 137
and I want four elements inside of this 138 138
to show side-by-side with the full width. 139 139
So, I have four <li> elements, and therefore, 140 140
each of them has to be 25% wide, right? 141 141
Because four times 25 makes the 100%. 142 142
Now, let me just do one thing, here, 143 143
and let me 144 144
give this <figure> element a class. 145 145
I will call this "meal-photo." 146 146
And I will do this with all of these eight figures. 147 147
And 148 148
one, two, three, four. 149 149
What I want to do now is to format these. 150 150
So, it's .meal-photo 151 151
and what I gotta do now is to say this: 152 152
width: 100%; 153 153
Now, saying that this element with the class "meal-photo" 154 154
has a width of 100%, means just 155 155
that it has the exact width of its parent, 156 156
which is .meals-showcase li. 157 157
And we have also to say that it has a margin: zero. 158 158
I know that we already did this in the beginning, here, 159 159
so maybe what you are wondering, 160 160
what is with the <h1> element? 161 161
This "normalize" file 162 162
defines some margin for that element 163 163
and so we have to overwrite that specifically. 164 164
And now, I need to format the actual photo, 165 165
the actual image inside of the photo container. 166 166
And the most important thing I have to do is, 167 167
again, width equals 100%. 168 168
And this will do exactly the same thing as before: 169 169
it will assure that the image 170 170
is exactly as wide as its container, 171 171
which is this element. 172 172
And the height will then be set automatically. 173 173
So, what does it look like? 174 174
Alright, this is exactly what we want, right? 175 175
This looks great! 176 176
The images are already here, 177 177
but we're not quite done with this, 178 178
because, as I said in the introduction of this lecture, 179 179
We want to add some cool transitions here. 180 180
And that's what we're gonna do 181 181
in Part Two: Building the Meal Section. 182 182
See you there!