1 00:00:01,727 --> 00:00:04,866 line:15% Hi there. Let's build the first section 2 00:00:04,866 --> 00:00:07,116 line:15% of our project, the header. 3 00:00:08,697 --> 00:00:11,398 So this is the sketch for the header, 4 00:00:11,398 --> 00:00:14,658 as I've showed you before, and on the right side 5 00:00:14,658 --> 00:00:19,359 is the final result that we'll get after this lecture. 6 00:00:19,359 --> 00:00:22,698 So we have a nice headline and two buttons in the middle, 7 00:00:22,698 --> 00:00:26,439 and at the upper part we have the Omnifood logo, 8 00:00:26,439 --> 00:00:29,449 and the Navigation on the right side. 9 00:00:29,449 --> 00:00:31,866 It looks really great, right? 10 00:00:33,454 --> 00:00:37,350 So, this is what we'll learn in this section. 11 00:00:37,350 --> 00:00:40,388 I think it is a good idea to tell you in each 12 00:00:40,388 --> 00:00:43,337 of the following lectures, all the new things that 13 00:00:43,337 --> 00:00:46,278 you're going to learn in that lecture. 14 00:00:46,278 --> 00:00:50,258 This way when you want to review these lectures someday, 15 00:00:50,258 --> 00:00:54,759 it will be easier for you to find what you're looking for. 16 00:00:54,759 --> 00:00:58,770 Also, you'll get a feeling of what you will achieve 17 00:00:58,770 --> 00:01:00,979 after each lecture. 18 00:01:00,979 --> 00:01:04,990 Now, this is the first lecture in which we will actually 19 00:01:04,990 --> 00:01:09,157 build our website, and there is already so much to learn. 20 00:01:11,087 --> 00:01:14,078 We'll meet new HTML elements such as 21 00:01:14,078 --> 00:01:16,078 header, nav, ul, and li. 22 00:01:18,804 --> 00:01:22,647 We'll learn how to make a background image darker in CSS 23 00:01:22,647 --> 00:01:25,147 so that we can put text on it. 24 00:01:26,047 --> 00:01:29,738 We will learn how to make that image exactly as high as 25 00:01:29,738 --> 00:01:33,719 the browser viewport, and then we'll make 26 00:01:33,719 --> 00:01:36,786 a vertically and horizontally centered box, 27 00:01:36,786 --> 00:01:39,536 with some text and buttons in it. 28 00:01:40,505 --> 00:01:44,145 And we'll actually design those buttons as well. 29 00:01:44,145 --> 00:01:48,156 Then we'll learn the best way to style links in CSS. 30 00:01:48,156 --> 00:01:51,796 And we'll even make a simple CSS3 animation 31 00:01:51,796 --> 00:01:53,807 with these buttons. 32 00:01:53,807 --> 00:01:57,474 And finally, we'll make a simple navigation. 33 00:01:58,515 --> 00:02:01,577 So let's waste no more time, and go straight back 34 00:02:01,577 --> 00:02:02,577 to brackets. 35 00:02:04,465 --> 00:02:07,675 And so, this is how we left our HTML document 36 00:02:07,675 --> 00:02:09,592 after the last lecture. 37 00:02:10,874 --> 00:02:14,115 We'll delete this, you don't need it anymore. 38 00:02:14,115 --> 00:02:17,954 And now we want to start building our header. 39 00:02:17,954 --> 00:02:22,115 And HTML actually has a nice element for us, 40 00:02:22,115 --> 00:02:26,695 called exactly header, and this is where we will put 41 00:02:26,695 --> 00:02:30,194 the logo, the navigation, the hero image, 42 00:02:30,194 --> 00:02:32,368 the main heading, and those buttons 43 00:02:32,368 --> 00:02:35,618 that I showed you in the images before. 44 00:02:36,856 --> 00:02:39,482 Now the header element works basically like 45 00:02:39,482 --> 00:02:42,414 a usual div element, which means that it's 46 00:02:42,414 --> 00:02:45,734 a container, to put some content. 47 00:02:45,734 --> 00:02:47,882 There are other elements like that, 48 00:02:47,882 --> 00:02:50,311 like nav for navigation, 49 00:02:50,311 --> 00:02:52,641 the footer element for the footer, 50 00:02:52,641 --> 00:02:57,443 the main element for the main content, et cetera. 51 00:02:57,443 --> 00:03:00,490 By using the header element instead of a simple div, 52 00:03:00,490 --> 00:03:03,439 we tell search engines such as Google 53 00:03:03,439 --> 00:03:07,606 this is our header and not some div element with no meaning, 54 00:03:09,180 --> 00:03:12,347 so this gives our container a meaning. 55 00:03:13,499 --> 00:03:16,999 So let's start by create the HTML 56 00:03:16,999 --> 00:03:20,249 that we will then later style with CSS, 57 00:03:21,421 --> 00:03:24,470 and for that we need our content. 58 00:03:24,470 --> 00:03:26,540 I hope you already downloaded it, 59 00:03:26,540 --> 00:03:29,738 I have it here on my desktop, so let's 60 00:03:29,738 --> 00:03:32,321 just put it here, and unzip it. 61 00:03:33,797 --> 00:03:37,342 Alright, down here we have the content. 62 00:03:37,342 --> 00:03:40,739 I made three files which have exactly the same content, 63 00:03:40,739 --> 00:03:44,906 one for Microsoft Word, one for the Mac app Pages, 64 00:03:45,798 --> 00:03:50,229 and if you don't have any of those just use this file. 65 00:03:50,229 --> 00:03:54,229 I will open this one, and so this is the content 66 00:03:55,427 --> 00:03:58,094 that we will put on our webpage. 67 00:03:59,878 --> 00:04:01,840 And we're here at Section 0 which is 68 00:04:01,840 --> 00:04:05,486 the header with hero image and navigation. 69 00:04:05,486 --> 00:04:08,989 And that's our headline, and I will just copy it 70 00:04:08,989 --> 00:04:11,778 because we will need it in a minute. 71 00:04:11,778 --> 00:04:12,861 So back here. 72 00:04:14,525 --> 00:04:19,077 As I told you, we will have a vertically and horizontally 73 00:04:19,077 --> 00:04:23,077 centered container, where that headline will be. 74 00:04:24,009 --> 00:04:28,176 So let's first make a div element for that container, 75 00:04:30,319 --> 00:04:33,652 and I will call it hero-text-box because 76 00:04:37,119 --> 00:04:41,286 this is a text box which floats over the hero image, 77 00:04:43,477 --> 00:04:46,310 which is the big background image. 78 00:04:48,206 --> 00:04:52,373 Alright, so this will be the box that we will center 79 00:04:53,478 --> 00:04:55,811 in a minute, using some CSS. 80 00:04:57,558 --> 00:05:01,725 Now that, my heading that we just copied, and here it is. 81 00:05:05,751 --> 00:05:08,609 And now we want some buttons, 82 00:05:08,609 --> 00:05:11,961 and for buttons we use the link element 83 00:05:11,961 --> 00:05:14,699 that we will then style with CSS 84 00:05:14,699 --> 00:05:18,449 to make them look like nice designed buttons. 85 00:05:19,376 --> 00:05:22,710 So we need the href attribute, and since we don't have 86 00:05:22,710 --> 00:05:25,465 anywhere to point at this moment, 87 00:05:25,465 --> 00:05:30,239 so we have no document where we want to link to, 88 00:05:30,239 --> 00:05:34,639 we put a dummy link, and that's usually made 89 00:05:34,639 --> 00:05:36,556 using this hash symbol. 90 00:05:37,649 --> 00:05:40,816 So this link points nowhere right now. 91 00:05:41,652 --> 00:05:45,569 So let me just get this text, it is I'm hungry, 92 00:05:47,270 --> 00:05:51,849 and this button will later take us all the way down 93 00:05:51,849 --> 00:05:54,291 to the sign up section. 94 00:05:54,291 --> 00:05:58,520 And the second button will be Show me more. 95 00:05:58,520 --> 00:06:02,990 So in this one, I'm just copying it here, is I'm hungry, 96 00:06:02,990 --> 00:06:05,460 and now I duplicate it as I've showed you before 97 00:06:05,460 --> 00:06:08,830 with Command + D, or Ctrl + D, 98 00:06:08,830 --> 00:06:11,330 and in here goes Show me more. 99 00:06:15,510 --> 00:06:19,677 Alright, so now let's style the whole thing using CSS. 100 00:06:21,650 --> 00:06:24,983 But first, let's see what it looks like. 101 00:06:26,512 --> 00:06:30,679 Alright, so this is what we just put on our HTML file. 102 00:06:32,849 --> 00:06:34,766 So let's style it here. 103 00:06:37,755 --> 00:06:41,184 Add a new rule here for the header, 104 00:06:41,184 --> 00:06:43,225 and the first thing that we're going to do 105 00:06:43,225 --> 00:06:46,326 is to set the background image, 106 00:06:46,326 --> 00:06:50,493 and in order to do that let's go back to our folder. 107 00:06:54,677 --> 00:06:56,926 And we have the Omnifood contents, 108 00:06:56,926 --> 00:07:00,759 and the background image that Omnifood gave us 109 00:07:01,623 --> 00:07:04,615 is called hero, this hero image. 110 00:07:04,615 --> 00:07:08,075 So this is the image that we will use 111 00:07:08,075 --> 00:07:10,075 as our background image. 112 00:07:11,856 --> 00:07:16,646 I actually got this image from one of the resources 113 00:07:16,646 --> 00:07:19,896 that you can find in the course e-book. 114 00:07:23,150 --> 00:07:26,856 So you probably already know where to put this, 115 00:07:26,856 --> 00:07:31,302 it's in the resources folder, css, and then images, 116 00:07:31,302 --> 00:07:34,132 because it's a background image, 117 00:07:34,132 --> 00:07:38,299 and we will use it in a CSS file from the CSS file. 118 00:07:42,164 --> 00:07:44,914 So now how do we use this in CSS? 119 00:07:47,615 --> 00:07:49,133 It's quite simple. 120 00:07:49,133 --> 00:07:53,050 Just say background-image, and then we use URL, 121 00:07:58,235 --> 00:08:00,485 img, and then the hero.jpg. 122 00:08:02,783 --> 00:08:04,533 So this is our image. 123 00:08:06,095 --> 00:08:08,762 Very easy to incorporate, right? 124 00:08:12,004 --> 00:08:15,312 We can even see if that's the correct image, 125 00:08:15,312 --> 00:08:17,200 and yeah it is. 126 00:08:17,200 --> 00:08:20,593 So let's see how this looks like. 127 00:08:20,593 --> 00:08:23,913 Alright, now the problem that you see is that 128 00:08:23,913 --> 00:08:28,080 the image only fills the part that has some content here, 129 00:08:29,801 --> 00:08:34,364 so what we want to do now is to make this header 130 00:08:34,364 --> 00:08:37,454 as high as the viewport, which means from here 131 00:08:37,454 --> 00:08:39,793 all the way down here. 132 00:08:39,793 --> 00:08:43,960 So we want to fill the whole viewport with the image. 133 00:08:47,642 --> 00:08:51,809 So we need to set the height of the header element. 134 00:08:53,284 --> 00:08:55,110 And how do we do that? 135 00:08:55,110 --> 00:08:58,772 There's a simple trick which is this one. 136 00:08:58,772 --> 00:09:02,439 We just set it to 100 view H, and this means 137 00:09:05,241 --> 00:09:08,491 it's 100% of the viewport. 138 00:09:08,491 --> 00:09:09,842 Very simple. 139 00:09:09,842 --> 00:09:13,543 So let's see if it worked. Alright. 140 00:09:13,543 --> 00:09:16,543 Now the image looks like we want it. 141 00:09:17,853 --> 00:09:21,411 Now we have some problem here, which is this wide space here 142 00:09:21,411 --> 00:09:23,411 and I will tell you why this happens. 143 00:09:23,411 --> 00:09:27,701 This is pretty annoying, it's because of this h1 element 144 00:09:27,701 --> 00:09:28,784 which has a-- 145 00:09:29,742 --> 00:09:33,909 I will tell you this, using the Chrome Developer Tools 146 00:09:34,833 --> 00:09:37,102 as I've showed you before. 147 00:09:37,102 --> 00:09:39,491 Let me just show this quickly, 148 00:09:39,491 --> 00:09:42,408 so as you see with the orange bars, 149 00:09:43,912 --> 00:09:46,995 this has some margin, top and bottom. 150 00:09:48,103 --> 00:09:52,020 And this is because of the normalized CSS file. 151 00:09:54,422 --> 00:09:57,112 So we have to get rid of that 152 00:09:57,112 --> 00:09:59,695 before we can do anything else. 153 00:10:02,601 --> 00:10:06,601 This is really annoying, so let me just margin 0 154 00:10:10,031 --> 00:10:12,198 and now it should be gone. 155 00:10:14,141 --> 00:10:16,762 Now the image doesn't look quite as we want it right, 156 00:10:16,762 --> 00:10:20,530 because it's way too zoomed in, so we have to tell 157 00:10:20,530 --> 00:10:24,697 the browser in some way that we want to see the whole image 158 00:10:26,282 --> 00:10:29,699 and we do this using the background-size. 159 00:10:32,695 --> 00:10:35,528 Background-size, and we say cover. 160 00:10:39,166 --> 00:10:43,249 And also we want to have the background centered, 161 00:10:45,006 --> 00:10:48,173 so we use background-position: center. 162 00:10:54,511 --> 00:10:57,678 And that's much nicer, very very good. 163 00:10:59,936 --> 00:11:03,333 Now if we would re-size this window, 164 00:11:03,333 --> 00:11:06,586 it will always find a way to let us see 165 00:11:06,586 --> 00:11:07,753 all the image. 166 00:11:10,025 --> 00:11:13,608 So now let's find a way to center this box, 167 00:11:15,392 --> 00:11:18,086 which has this title and those buttons 168 00:11:18,086 --> 00:11:20,503 that we'll style in a minute. 169 00:11:22,886 --> 00:11:26,636 So this is called, let me see, hero-text-box. 170 00:11:29,327 --> 00:11:32,827 We'll copy it actually, and paste it here. 171 00:11:35,245 --> 00:11:37,532 So how do we do this? 172 00:11:37,532 --> 00:11:42,255 We will actually not use the responsive fluid grid 173 00:11:42,255 --> 00:11:45,337 that we set up before, because we want this box 174 00:11:45,337 --> 00:11:48,254 to be an absolutely positioned box. 175 00:11:52,405 --> 00:11:55,177 Because that's the only way we can vertically 176 00:11:55,177 --> 00:11:57,427 and horizontally center it. 177 00:11:59,136 --> 00:12:02,386 And I will assign the width of the row, 178 00:12:04,145 --> 00:12:07,228 which is if you remember 1140 pixels. 179 00:12:09,930 --> 00:12:14,097 So this will look like a row because it has the same width, 180 00:12:15,115 --> 00:12:18,745 but it will be absolutely positioned. 181 00:12:18,745 --> 00:12:21,328 And in order to do that, we say 182 00:12:24,341 --> 00:12:27,091 we want it 50% from the top, 183 00:12:31,127 --> 00:12:33,377 and 50% from the left. 184 00:12:35,957 --> 00:12:38,790 So let's see what this looks like. 185 00:12:41,146 --> 00:12:45,604 So 50% from the left, and 50% from the top, 186 00:12:45,604 --> 00:12:48,945 okay but this looks weird right? 187 00:12:48,945 --> 00:12:52,028 So we have to use a little trick here 188 00:12:56,243 --> 00:12:59,326 which is with the transform property, 189 00:13:01,167 --> 00:13:05,334 and we use translate and then -50%, -50%, 190 00:13:12,484 --> 00:13:16,317 and what this does is to translate the element 191 00:13:17,625 --> 00:13:21,792 half of its width and of its height, up and to the left. 192 00:13:28,552 --> 00:13:32,719 So now it is centered, it's nicely centered as you want. 193 00:13:36,954 --> 00:13:40,121 So it always stays in the middle here. 194 00:13:41,044 --> 00:13:43,006 Now as you can see the contrast between 195 00:13:43,006 --> 00:13:45,984 the text and the image is way too low. 196 00:13:45,984 --> 00:13:49,406 For example right here, we have a very hard time 197 00:13:49,406 --> 00:13:50,715 to see anything. 198 00:13:50,715 --> 00:13:54,514 And that's what we learned right in the first section, 199 00:13:54,514 --> 00:13:58,514 in the web design section, that it is a bad idea 200 00:13:59,591 --> 00:14:01,733 to just put text on image. 201 00:14:01,733 --> 00:14:04,505 And we're gonna use one of the solutions, 202 00:14:04,505 --> 00:14:07,672 which is simply make the image darker, 203 00:14:08,953 --> 00:14:12,173 so let's see how we can do that. 204 00:14:12,173 --> 00:14:14,382 So a little trick that we use here, 205 00:14:14,382 --> 00:14:17,713 looks like we'll put a linear gradient 206 00:14:17,713 --> 00:14:19,380 on top of the image. 207 00:14:21,132 --> 00:14:23,554 So this is like using two background images 208 00:14:23,554 --> 00:14:24,971 at the same time. 209 00:14:25,823 --> 00:14:27,974 So we have this linear gradient, 210 00:14:27,974 --> 00:14:31,641 and the image that we just specified before. 211 00:14:32,734 --> 00:14:35,651 And in here, we can say two colors. 212 00:14:37,564 --> 00:14:41,731 Let me start with black so that you can get the idea, 213 00:14:44,151 --> 00:14:46,210 and since we don't want a gradient actually, 214 00:14:46,210 --> 00:14:50,423 we want just a color, we make it from black to black 215 00:14:50,423 --> 00:14:53,423 so from one color to the same color. 216 00:14:54,731 --> 00:14:57,965 Since we don't want a complete black, 217 00:14:57,965 --> 00:15:00,382 we use the transparency here. 218 00:15:04,306 --> 00:15:07,806 And let's put it to 70% transparency, 219 00:15:11,346 --> 00:15:15,544 so as we saw before when we use transparency 220 00:15:15,544 --> 00:15:18,377 it changes here to this rgba code. 221 00:15:23,292 --> 00:15:26,542 So I will just put the same thing here, 222 00:15:28,983 --> 00:15:33,150 and now we have this nice 70% transparent black color 223 00:15:34,434 --> 00:15:37,267 which is on top of the hero image. 224 00:15:40,410 --> 00:15:43,783 And this is how it looks, much better right? 225 00:15:43,783 --> 00:15:47,614 Okay, so I think the background image here 226 00:15:47,614 --> 00:15:52,113 is now formatted, so let's end the first part 227 00:15:52,113 --> 00:15:55,299 of building our header right here. 228 00:15:55,299 --> 00:15:58,173 In the next video we'll start to format 229 00:15:58,173 --> 00:16:02,006 the main heading here, and these two buttons.