Original subtitles

1 1

Welcome back to building the header. 2

2

This is part three, let's continue. 3

3

So this already looks very good. 4

4

Now what's missing here is the logo image here, 5

5

we want the logo image here and we want 6

6

some simple navigation to show right here. 7

7

But first of that, we see that our code has grown 8

8

a little bit and if we keep adding more and more code, 9

9

we will at some point get completely lost in here. 10

10

So let's make a nice code structure here so that 11

11

we organize everything into logical pieces of code. 12

12

And for that we will use CSS comments, and comments 13

13

are like code that will not be seen by the browser. 14

14

It's like invisible code it's just for us to write something 15

15

here which will not affect any of our web page. 16

16

So I will just show you how. 17

17

Comments in CSS are using / and *. 18

18

And you see everything down here got gray 19

19

now because I opened a comment. 20

20

Now I can write something here but then close it again. 21

21

And now the rest of the CSS code is back to normal. 22

22

So I usually like to do it like this, 23

23

I put some lines here to separate some stuff. 24

24

Then I write what this code section is all about. 25

25

Here I will say basic setup. 26

26

Then I close this, but then another line like this here. 27

27

Alright. 28

28

I will copy this so that we can put 29

29

it in our styles as well. 30

30

So down here I can say like 31

31

these are reusable components and this 32

32

is because we will use those all over the website. 33

33

But then we have things like this one 34

34

which should go into a different place. 35

35

Let me just cut them and put them down here. 36

36

So I will put one of the sections for each of 37

37

the sections that we will build on our website. 38

38

So when we later browse our code, 39

39

we know exactly where to look like for different stuff. 40

40

So, header. 41

41

So all the code for our header goes here. 42

42

Now the buttons that we are going to reuse may be in 43

43

different places can stay right here. 44

44

Now we'll just say that these are buttons. 45

45

Those are buttons and these are headings. 46

46

Because you know we will maybe 47

47

use some of them again later. 48

48

Headings. 49

49

And we can keep adding more comments 50

50

like that later down the road. 51

51

So everything is nicely separated and then we know exactly 52

52

where to look for our CSS code. 53

53

So we already learned a lot of stuff in this lecture 54

54

but we will go even further because we will now 55

55

put a logo and a navigation bar on top of this page. 56

56

So we formatted this, everything inside of this content, 57

57

and now let's add a nav element, 58

58

where the navigation and the button will go. 59

59

And now to center everything inside of that 60

60

navigation I will use a row. 61

61

Do you remember we said that row will always be centered. 62

62

So this will be a row. 63

63

Yes, alright. 64

64

Now we want the logo to be here and for that let me just 65

65

first put the logo inside our folder. 66

66

So I will go back to our contents folder, 67

67

and this is the content Omni Foot provided us. 68

68

And actually most of these are images, 69

69

so I will just put all of them, we'll copy them, 70

70

and put all of them inside our images. 71

71

Now I'll paste them here, okay. 72

72

Except for maybe the text, I will delete the text here. 73

73

And alright, great. 74

74

So we want the white logo. 75

75

They actually gave us two logos a black one and a white one. 76

76

And we want the white logo here because the background 77

77

is so dark that the best thing to do 78

78

is to use the white logo here. 79

79

Now the best way to put an image, 80

80

you probably remember how to do that. 81

81

It's image, then source, and we already 82

82

know how it is, where it is right? 83

83

So we go to resources, image, and now 84

84

it should be down here somewhere. 85

85

It is logo white. 86

86

Alright, and now the alternative text, 87

87

which we will say is just Omni Foot logo. 88

88

And of course we have to give it a class 89

89

so that we can format it. 90

90

The logo should be just right for this. 91

91

Alright. 92

92

And now for the navigation. 93

93

Now the navigation is usually done 94

94

using a so called unordered list. 95

95

Unordered lists is just like some bullet points 96

96

where each bullet point will be 97

97

an element of the navigation. 98

98

So how do we do that? 99

99

Ul stands for an ordered list, 100

100

and let's just call it main nav. 101

101

And now for each of the elements inside 102

102

of an ordered list, we say le. 103

103

Which means like list element. 104

104

And now each of the list elements will be a link 105

105

because that's what a navigation is all about, right? 106

106

Navigation is like a collection of links. 107

107

So let's see what Omni Foot had in mind 108

108

for this navigation, what they want there. 109

109

So they want, let me just copy this so it's easier. 110

110

Just down here, I will delete it after this. 111

111

So these will be links. 112

112

So, a element, hrev, 113

113

hrev will be again it will point nowhere for now. 114

114

So it will be like an empty link 115

115

so I'll use the hash sign again. 116

116

And this is here, food delivery. 117

117

Alright? 118

118

And as before I will just duplicate this with command d. 119

119

We have four, so duplicate it three times. 120

120

The next one is how it works 121

121

and our cities, and sign up. 122

122

Alright. 123

123

Let's see. 124

124

Now the image is huge, it's way too big so 125

125

let's start by formatting the image. 126

126

I don't know why the unordered list isn't showing up here 127

127

but we'll, ah okay it's actually here. 128

128

So you see these bullet points and you see those blue links. 129

129

We will just format this in a minute, 130

130

let's start with the logo. 131

131

So the class is called logo. 132

132

So it's in the header so I will put it right here. 133

133

So logo, so logo I think the height, 134

134

the optimal height will be 100 pixels 135

135

and then the width should be determined automatically 136

136

so as before we'll say auto here. 137

137

Okay now we want this to be floated all to the left side. 138

138

So we can use the float property here 139

139

and say it should be on the left side. 140

140

Alright then we can actually already do some things 141

141

for the main navigation . 142

142

Main navigation. 143

143

Just say that it should float to the right side. 144

144

So this is what it looks like. 145

145

So the food delivery logo is right here on this side 146

146

and the navigation is on the right side, 147

147

just as we specified it before. 148

148

Now we have to format this navigation, 149

149

and I will show you how and this is actually 150

150

the way everyone formats their navigations. 151

151

So the first thing here is in this unordered list, 152

152

because main nav is an unordered list, right, 153

153

is to say that we want to get rid of those bullet points. 154

154

So we say list style none. 155

155

Okay and that should do it for now. 156

156

Now we want to select the li elements inside of this. 157

157

Let me show you it to you, so we want to select this. 158

158

And we already learned how to do that before, right? 159

159

So we say main navigation and we want to 160

160

select all li elements inside of them. 161

161

So this is how we do it: 162

162

main nav and then all li elements inside it. 163

163

And again we want to change the way they are displayed. 164

164

So they are now block elements and we want them 165

165

to be inline blocks so that they can be side by side 166

166

and we want some margin between them. 167

167

Let's say we want a left margin of 40 pixels. 168

168

So each of those blocks will have 169

169

a margin on the left side of 40 pixels. 170

170

And this is what it looks like. 171

171

So the li elements are now nicely aligned 172

172

such as we want them. 173

173

And now it's just time to format 174

174

how the links inside of them look. 175

175

And in order to do that, we can even go further down 176

176

and say main nav then we want to select the li elements 177

177

inside of them and then the a element 178

178

inside of each of the li. 179

179

Easy as that. 180

180

Now we want them to be wide and such as before 181

181

we want to get rid of that text underline, 182

182

so we say text decoration none. 183

183

And I think it will look great if we make them upper case. 184

184

So text transform again, upper case and then 185

185

let's specify the font size as well. 186

186

This shouldn't be too big because as you know 187

187

our base font size is 20 pixels and let's 188

188

say you want it to be 18 pixels. 189

189

But as I said before, we will never use the unit in pixels. 190

190

We want it to be 18 pixels, but expressed in percentage. 191

191

So what do we do? 192

192

We divide that 18 pixels we want by this base, 193

193

base text size. 194

194

So 18 divided by 20 which is 0,9 which is 90 percent. 195

195

So we will just say we want the font size to 90 percent 196

196

and then it will give us 18 pixels. 197

197

And that's how it looks like. 198

198

Not bad, right? 199

199

Now we probably want some distance between the logo 200

200

at the top and then center 201

201

this navigation so that here, 202

202

like here on the middle of this logo. 203

203

And in order to do that, we will specify 204

204

a margin on the top of the logo. 205

205

So margin top, let's say 20 pixels and margin, 206

206

no it's right here. 207

207

So the main nav should have a margin top of, 208

208

I don't know, 60 pixels probably. 209

209

And yeah this looks pretty great, right? 210

210

This may be a little bit too much, 211

211

I will say 55 pixels but it doesn't really matter. 212

212

Okay, now very good. 213

213

One thing is we want some hover effect right here. 214

214

And one beautiful thing that we can 215

215

do that you probably saw on many websites is to, 216

216

once we hover an element, give it some border, okay? 217

217

A two pixel border I think would look great. 218

218

So one thing that we did not yet do here 219

219

is to say that this is a link. 220

220

And after that say that a visited link 221

221

should look exactly the same. 222

222

So this is exactly what we did with the buttons here before. 223

223

So this is the link at the visited state 224

224

and now we want some hover and active states. 225

225

Hover and active states. 226

226

And what we want here is a nice border at the bottom. 227

227

With let's say two pixels, again a solid line, 228

228

and the color can be our orange color that would look great. 229

229

So our orange color is this one here, right? 230

230

And we will probably use this a lot of time, 231

231

so I will just make a comment here and paste it. 232

232

Orange color. 233

233

So each time we want it we know where to find it, okay? 234

234

So we want this to be orange. 235

235

Now in order for this to happen we need this border 236

236

to exist before we actually hover it, 237

237

but since we don't want to see it we make it transparent. 238

238

So now I think we can do in CSS 239

239

is we can say transparent, transparent. 240

240

So it will not be visible until we actually hover it. 241

241

And such as with the buttons, 242

242

we want a nice transition here. 243

243

And you know already how to do this so we say transition 244

244

and then the property we want to emanate. 245

245

So it's border bottom in this case, 246

246

and again 0.2 second interval in between those. 247

247

So how does it look like? 248

248

Okay it works, right? 249

249

Now let's, it doesn't look so good because we want 250

250

some more space between the line and the text, right? 251

251

And there's an easy way to do this and maybe 252

252

you can guess already how we will do this. 253

253

It is to specify a padding for the link. 254

254

And padding is an inside space, so a space inside 255

255

of the box which goes between the content and the border. 256

256

So we'll add some padding to the bottom and also to the top. 257

257

And we can make it for example 8 pixels. 258

258

We put it here. 259

259

So want a padding top and bottom of 8 pixels, 260

260

so we put it here and left and right 0 pixels. 261

261

And I think now everything is perfect. 262

262

Just check it. 263

263

Alright, this looks absolutely fantastic, 264

264

don't you think so? 265

265

So the first section is completely designed. 266

266

We have learned a lot of stuff in this section. 267

267

Congratulations, you just built the first 268

268

section of your real world website! 269

269

Isn't that great? 270

270

This was a lot of stuff to absorb and if you didn't 271

271

understand everything right away, 272

272

don't worry you can always go back if you want. 273

273

So now come with me to the next section.