Original subtitles

1 1

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!