Original subtitles

1 1

Hi there. Let's build the first section 2

2

of our project, the header. 3

3

So this is the sketch for the header, 4

4

as I've showed you before, and on the right side 5

5

is the final result that we'll get after this lecture. 6

6

So we have a nice headline and two buttons in the middle, 7

7

and at the upper part we have the Omnifood logo, 8

8

and the Navigation on the right side. 9

9

It looks really great, right? 10

10

So, this is what we'll learn in this section. 11

11

I think it is a good idea to tell you in each 12

12

of the following lectures, all the new things that 13

13

you're going to learn in that lecture. 14

14

This way when you want to review these lectures someday, 15

15

it will be easier for you to find what you're looking for. 16

16

Also, you'll get a feeling of what you will achieve 17

17

after each lecture. 18

18

Now, this is the first lecture in which we will actually 19

19

build our website, and there is already so much to learn. 20

20

We'll meet new HTML elements such as 21

21

header, nav, ul, and li. 22

22

We'll learn how to make a background image darker in CSS 23

23

so that we can put text on it. 24

24

We will learn how to make that image exactly as high as 25

25

the browser viewport, and then we'll make 26

26

a vertically and horizontally centered box, 27

27

with some text and buttons in it. 28

28

And we'll actually design those buttons as well. 29

29

Then we'll learn the best way to style links in CSS. 30

30

And we'll even make a simple CSS3 animation 31

31

with these buttons. 32

32

And finally, we'll make a simple navigation. 33

33

So let's waste no more time, and go straight back 34

34

to brackets. 35

35

And so, this is how we left our HTML document 36

36

after the last lecture. 37

37

We'll delete this, you don't need it anymore. 38

38

And now we want to start building our header. 39

39

And HTML actually has a nice element for us, 40

40

called exactly header, and this is where we will put 41

41

the logo, the navigation, the hero image, 42

42

the main heading, and those buttons 43

43

that I showed you in the images before. 44

44

Now the header element works basically like 45

45

a usual div element, which means that it's 46

46

a container, to put some content. 47

47

There are other elements like that, 48

48

like nav for navigation, 49

49

the footer element for the footer, 50

50

the main element for the main content, et cetera. 51

51

By using the header element instead of a simple div, 52

52

we tell search engines such as Google 53

53

this is our header and not some div element with no meaning, 54

54

so this gives our container a meaning. 55

55

So let's start by create the HTML 56

56

that we will then later style with CSS, 57

57

and for that we need our content. 58

58

I hope you already downloaded it, 59

59

I have it here on my desktop, so let's 60

60

just put it here, and unzip it. 61

61

Alright, down here we have the content. 62

62

I made three files which have exactly the same content, 63

63

one for Microsoft Word, one for the Mac app Pages, 64

64

and if you don't have any of those just use this file. 65

65

I will open this one, and so this is the content 66

66

that we will put on our webpage. 67

67

And we're here at Section 0 which is 68

68

the header with hero image and navigation. 69

69

And that's our headline, and I will just copy it 70

70

because we will need it in a minute. 71

71

So back here. 72

72

As I told you, we will have a vertically and horizontally 73

73

centered container, where that headline will be. 74

74

So let's first make a div element for that container, 75

75

and I will call it hero-text-box because 76

76

this is a text box which floats over the hero image, 77

77

which is the big background image. 78

78

Alright, so this will be the box that we will center 79

79

in a minute, using some CSS. 80

80

Now that, my heading that we just copied, and here it is. 81

81

And now we want some buttons, 82

82

and for buttons we use the link element 83

83

that we will then style with CSS 84

84

to make them look like nice designed buttons. 85

85

So we need the href attribute, and since we don't have 86

86

anywhere to point at this moment, 87

87

so we have no document where we want to link to, 88

88

we put a dummy link, and that's usually made 89

89

using this hash symbol. 90

90

So this link points nowhere right now. 91

91

So let me just get this text, it is I'm hungry, 92

92

and this button will later take us all the way down 93

93

to the sign up section. 94

94

And the second button will be Show me more. 95

95

So in this one, I'm just copying it here, is I'm hungry, 96

96

and now I duplicate it as I've showed you before 97

97

with Command + D, or Ctrl + D, 98

98

and in here goes Show me more. 99

99

Alright, so now let's style the whole thing using CSS. 100

100

But first, let's see what it looks like. 101

101

Alright, so this is what we just put on our HTML file. 102

102

So let's style it here. 103

103

Add a new rule here for the header, 104

104

and the first thing that we're going to do 105

105

is to set the background image, 106

106

and in order to do that let's go back to our folder. 107

107

And we have the Omnifood contents, 108

108

and the background image that Omnifood gave us 109

109

is called hero, this hero image. 110

110

So this is the image that we will use 111

111

as our background image. 112

112

I actually got this image from one of the resources 113

113

that you can find in the course e-book. 114

114

So you probably already know where to put this, 115

115

it's in the resources folder, css, and then images, 116

116

because it's a background image, 117

117

and we will use it in a CSS file from the CSS file. 118

118

So now how do we use this in CSS? 119

119

It's quite simple. 120

120

Just say background-image, and then we use URL, 121

121

img, and then the hero.jpg. 122

122

So this is our image. 123

123

Very easy to incorporate, right? 124

124

We can even see if that's the correct image, 125

125

and yeah it is. 126

126

So let's see how this looks like. 127

127

Alright, now the problem that you see is that 128

128

the image only fills the part that has some content here, 129

129

so what we want to do now is to make this header 130

130

as high as the viewport, which means from here 131

131

all the way down here. 132

132

So we want to fill the whole viewport with the image. 133

133

So we need to set the height of the header element. 134

134

And how do we do that? 135

135

There's a simple trick which is this one. 136

136

We just set it to 100 view H, and this means 137

137

it's 100% of the viewport. 138

138

Very simple. 139

139

So let's see if it worked. Alright. 140

140

Now the image looks like we want it. 141

141

Now we have some problem here, which is this wide space here 142

142

and I will tell you why this happens. 143

143

This is pretty annoying, it's because of this h1 element 144

144

which has a-- 145

145

I will tell you this, using the Chrome Developer Tools 146

146

as I've showed you before. 147

147

Let me just show this quickly, 148

148

so as you see with the orange bars, 149

149

this has some margin, top and bottom. 150

150

And this is because of the normalized CSS file. 151

151

So we have to get rid of that 152

152

before we can do anything else. 153

153

This is really annoying, so let me just margin 0 154

154

and now it should be gone. 155

155

Now the image doesn't look quite as we want it right, 156

156

because it's way too zoomed in, so we have to tell 157

157

the browser in some way that we want to see the whole image 158

158

and we do this using the background-size. 159

159

Background-size, and we say cover. 160

160

And also we want to have the background centered, 161

161

so we use background-position: center. 162

162

And that's much nicer, very very good. 163

163

Now if we would re-size this window, 164

164

it will always find a way to let us see 165

165

all the image. 166

166

So now let's find a way to center this box, 167

167

which has this title and those buttons 168

168

that we'll style in a minute. 169

169

So this is called, let me see, hero-text-box. 170

170

We'll copy it actually, and paste it here. 171

171

So how do we do this? 172

172

We will actually not use the responsive fluid grid 173

173

that we set up before, because we want this box 174

174

to be an absolutely positioned box. 175

175

Because that's the only way we can vertically 176

176

and horizontally center it. 177

177

And I will assign the width of the row, 178

178

which is if you remember 1140 pixels. 179

179

So this will look like a row because it has the same width, 180

180

but it will be absolutely positioned. 181

181

And in order to do that, we say 182

182

we want it 50% from the top, 183

183

and 50% from the left. 184

184

So let's see what this looks like. 185

185

So 50% from the left, and 50% from the top, 186

186

okay but this looks weird right? 187

187

So we have to use a little trick here 188

188

which is with the transform property, 189

189

and we use translate and then -50%, -50%, 190

190

and what this does is to translate the element 191

191

half of its width and of its height, up and to the left. 192

192

So now it is centered, it's nicely centered as you want. 193

193

So it always stays in the middle here. 194

194

Now as you can see the contrast between 195

195

the text and the image is way too low. 196

196

For example right here, we have a very hard time 197

197

to see anything. 198

198

And that's what we learned right in the first section, 199

199

in the web design section, that it is a bad idea 200

200

to just put text on image. 201

201

And we're gonna use one of the solutions, 202

202

which is simply make the image darker, 203

203

so let's see how we can do that. 204

204

So a little trick that we use here, 205

205

looks like we'll put a linear gradient 206

206

on top of the image. 207

207

So this is like using two background images 208

208

at the same time. 209

209

So we have this linear gradient, 210

210

and the image that we just specified before. 211

211

And in here, we can say two colors. 212

212

Let me start with black so that you can get the idea, 213

213

and since we don't want a gradient actually, 214

214

we want just a color, we make it from black to black 215

215

so from one color to the same color. 216

216

Since we don't want a complete black, 217

217

we use the transparency here. 218

218

And let's put it to 70% transparency, 219

219

so as we saw before when we use transparency 220

220

it changes here to this rgba code. 221

221

So I will just put the same thing here, 222

222

and now we have this nice 70% transparent black color 223

223

which is on top of the hero image. 224

224

And this is how it looks, much better right? 225

225

Okay, so I think the background image here 226

226

is now formatted, so let's end the first part 227

227

of building our header right here. 228

228

In the next video we'll start to format 229

229

the main heading here, and these two buttons.