Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,341 --> 00:00:02,650 Welcome back. 2 2 00:00:02,650 --> 00:00:05,820 Let's now finally learn something new in CSS. 3 3 00:00:05,820 --> 00:00:09,991 Which is exactly why you came to this course, right? 4 4 00:00:09,991 --> 00:00:12,531 Now, as in all my other courses, 5 5 00:00:12,531 --> 00:00:14,034 in all the coding lectures, 6 6 00:00:14,034 --> 00:00:15,736 I always have this slide called 7 7 00:00:15,736 --> 00:00:17,858 What You Will Learn in this Lecture. 8 8 00:00:17,858 --> 00:00:20,535 And I found that students really appreciate 9 9 00:00:20,535 --> 00:00:22,372 this quick lecture summary, 10 10 00:00:22,372 --> 00:00:25,047 so that they can later come back to the lecture 11 11 00:00:25,047 --> 00:00:27,845 and know if it contains exactly what they are looking for 12 12 00:00:27,845 --> 00:00:28,843 or not. 13 13 00:00:28,843 --> 00:00:31,070 And that's why I decided to continue this tradition 14 14 00:00:31,070 --> 00:00:32,373 in this course. 15 15 00:00:32,373 --> 00:00:34,095 In this lecture, you're gonna learn 16 16 00:00:34,095 --> 00:00:36,741 the best way to perform a basic reset 17 17 00:00:36,741 --> 00:00:38,792 using the universal selector. 18 18 00:00:38,792 --> 00:00:42,234 And how to set up project-wide font definitions. 19 19 00:00:42,234 --> 00:00:44,122 This might not be really new to you, 20 20 00:00:44,122 --> 00:00:46,135 but we still have to do this 21 21 00:00:46,135 --> 00:00:48,347 whenever we start a new project. 22 22 00:00:48,347 --> 00:00:51,557 Now, what probably is new to you, is to clip parts 23 23 00:00:51,557 --> 00:00:54,968 of elements using the new clip-path property. 24 24 00:00:54,968 --> 00:00:57,775 And so that's the first real new modern CSS 25 25 00:00:57,775 --> 00:00:58,878 you're gonna learn. 26 26 00:00:58,878 --> 00:01:00,878 Let's do that right now. 27 27 00:01:01,797 --> 00:01:04,114 All right, so we're back in the code editor 28 28 00:01:04,114 --> 00:01:05,370 that I showed you before. 29 29 00:01:05,370 --> 00:01:07,997 In this screen we have always the code editor 30 30 00:01:07,997 --> 00:01:10,174 and then I have here another screen on the side 31 31 00:01:10,174 --> 00:01:12,299 where I keep the webpage open 32 32 00:01:12,299 --> 00:01:14,900 so we can check on the work that we've been doing. 33 33 00:01:14,900 --> 00:01:16,689 Now this here is the final webpage 34 34 00:01:16,689 --> 00:01:19,918 that I also will keep open as a reference 35 35 00:01:19,918 --> 00:01:23,146 so that we can see always what to do next. 36 36 00:01:23,146 --> 00:01:27,227 And so let's now actually open the website document 37 37 00:01:27,227 --> 00:01:28,467 that we're gonna work on. 38 38 00:01:28,467 --> 00:01:32,298 So it's this index.html, of course, in the project folder. 39 39 00:01:32,298 --> 00:01:33,785 So in my case, it's on the desktop, 40 40 00:01:33,785 --> 00:01:35,828 but maybe in your case it's somewhere else, 41 41 00:01:35,828 --> 00:01:39,908 but let's go open this index.html file for now. 42 42 00:01:39,908 --> 00:01:41,389 And of course it's still empty 43 43 00:01:41,389 --> 00:01:44,223 because we didn't write any code yet, right? 44 44 00:01:44,223 --> 00:01:47,089 Now later on we're gonna open this index.html 45 45 00:01:47,089 --> 00:01:48,274 in a slightly different way. 46 46 00:01:48,274 --> 00:01:51,643 We're basically gonna create a small local web server. 47 47 00:01:51,643 --> 00:01:54,023 But for now this works just fine. 48 48 00:01:54,023 --> 00:01:57,275 All right, so let's go back now to the editor. 49 49 00:01:57,275 --> 00:02:01,376 Now to start, let's write the html for the header element. 50 50 00:02:01,376 --> 00:02:05,043 Just for this part. This green, big element. 51 51 00:02:06,369 --> 00:02:08,154 All of this will be our header. 52 52 00:02:08,154 --> 00:02:10,929 For now, we're only gonna concentrate on 53 53 00:02:10,929 --> 00:02:15,563 the background image and on making this shape here, okay? 54 54 00:02:15,563 --> 00:02:19,770 That's what we're gonna focus on in this lecture. 55 55 00:02:19,770 --> 00:02:23,921 We're gonna use the HTML5 header element. 56 56 00:02:23,921 --> 00:02:28,088 And we're also going to give it a class called header. 57 57 00:02:29,728 --> 00:02:32,245 If you're wondering why we're giving it a class name, 58 58 00:02:32,245 --> 00:02:34,743 instead of just selecting it in the CSS 59 59 00:02:34,743 --> 00:02:36,633 using the header element selector, 60 60 00:02:36,633 --> 00:02:38,236 it's because you want a class name 61 61 00:02:38,236 --> 00:02:40,875 on each and every element here in the html. 62 62 00:02:40,875 --> 00:02:44,252 But we're gonna talk a bit more about CSS architecture 63 63 00:02:44,252 --> 00:02:47,313 later in the course, where all of this will make sense. 64 64 00:02:47,313 --> 00:02:49,464 Just for now, let's simply put some text here. 65 65 00:02:49,464 --> 00:02:50,631 So, some text. 66 66 00:02:51,936 --> 00:02:53,980 And that's enough for the html for now. 67 67 00:02:53,980 --> 00:02:57,637 Remember we just want this big box with the background image 68 68 00:02:57,637 --> 00:03:01,955 and the color and then that shape that we just saw, okay? 69 69 00:03:01,955 --> 00:03:04,395 Let's now head over to our CSS file 70 70 00:03:04,395 --> 00:03:07,392 and start writing some CSS. 71 71 00:03:07,392 --> 00:03:08,830 Now the first thing I'm gonna do 72 72 00:03:08,830 --> 00:03:11,266 is to perform a basic reset. 73 73 00:03:11,266 --> 00:03:13,498 And maybe if you took my other CSS course, 74 74 00:03:13,498 --> 00:03:15,464 then you might remember that I used something called 75 75 00:03:15,464 --> 00:03:19,661 Normalize that CSS in order to make a cross browser reset. 76 76 00:03:19,661 --> 00:03:22,624 So in order to make every browser render the page 77 77 00:03:22,624 --> 00:03:24,575 in the exact same way. 78 78 00:03:24,575 --> 00:03:27,627 Now doing so is still valid, but I found that browsers 79 79 00:03:27,627 --> 00:03:29,300 are actually getting better and better 80 80 00:03:29,300 --> 00:03:32,670 and more consistent in the way that they render a website. 81 81 00:03:32,670 --> 00:03:34,827 And so that's no longer really necessary, 82 82 00:03:34,827 --> 00:03:36,475 and so I don't do it anymore. 83 83 00:03:36,475 --> 00:03:40,828 Let's just do a simple reset using the universal selector. 84 84 00:03:40,828 --> 00:03:42,059 Just like this. 85 85 00:03:42,059 --> 00:03:45,299 The universal selector will select each and every element 86 86 00:03:45,299 --> 00:03:48,758 on the page, and then apply these declarations here to it. 87 87 00:03:48,758 --> 00:03:53,218 We want a margin on all of them of zero pixels 88 88 00:03:53,218 --> 00:03:56,495 and of course also a padding of zero. 89 89 00:03:56,495 --> 00:03:59,326 By default, browsers apply a certain margin, 90 90 00:03:59,326 --> 00:04:01,519 or a certain padding, to some elements. 91 91 00:04:01,519 --> 00:04:05,052 For example, an H1 element, so the main heading, 92 92 00:04:05,052 --> 00:04:06,872 there's always some margin in it. 93 93 00:04:06,872 --> 00:04:08,813 And we don't want any of that. 94 94 00:04:08,813 --> 00:04:11,203 This allows us basically to start clean, 95 95 00:04:11,203 --> 00:04:14,313 without the browser adding any margins or paddings, 96 96 00:04:14,313 --> 00:04:16,523 that we don't want, to our elements. 97 97 00:04:16,523 --> 00:04:18,270 Another thing that we're gonna do, 98 98 00:04:18,270 --> 00:04:22,103 is to set a box sizing property to border box. 99 99 00:04:24,587 --> 00:04:26,327 Border. Box. 100 100 00:04:26,327 --> 00:04:29,112 And if you're not familiar with box sizing border box, 101 101 00:04:29,112 --> 00:04:31,900 what this does is to change the box model 102 102 00:04:31,900 --> 00:04:35,400 so that the borders and the paddings are no longer added 103 103 00:04:35,400 --> 00:04:37,857 to the total width or the total height 104 104 00:04:37,857 --> 00:04:39,980 that we specify for a box. 105 105 00:04:39,980 --> 00:04:42,755 Without this, any paddings and borders 106 106 00:04:42,755 --> 00:04:45,997 are added to the height or the width of an element 107 107 00:04:45,997 --> 00:04:47,933 which really isn't helpful for us, 108 108 00:04:47,933 --> 00:04:51,196 and so with this, we're getting rid of that behavior. 109 109 00:04:51,196 --> 00:04:55,346 All right. And next, let's set some overall font properties 110 110 00:04:55,346 --> 00:04:56,695 for the entire webpage. 111 111 00:04:56,695 --> 00:04:58,137 This time, we're not going to do it 112 112 00:04:58,137 --> 00:05:02,502 in the universal selector, but in the body element selector. 113 113 00:05:02,502 --> 00:05:04,193 And why do we do it this way? 114 114 00:05:04,193 --> 00:05:07,097 Well, we do it because the properties related to font 115 115 00:05:07,097 --> 00:05:08,756 are usually inherited, 116 116 00:05:08,756 --> 00:05:11,273 so we're using the power of inheritance here. 117 117 00:05:11,273 --> 00:05:14,005 I'm gonna explain everything there is about inheritance 118 118 00:05:14,005 --> 00:05:15,373 in the next section. 119 119 00:05:15,373 --> 00:05:18,788 We have a whole lecture just about inheritance in CSS. 120 120 00:05:18,788 --> 00:05:20,320 What you need to know for now, 121 121 00:05:20,320 --> 00:05:23,964 is that we set, for example, the font family 122 122 00:05:23,964 --> 00:05:26,941 on the body element, which is basically the parent element 123 123 00:05:26,941 --> 00:05:28,807 of all the other elements. 124 124 00:05:28,807 --> 00:05:31,371 Then this font family will get inherited, 125 125 00:05:31,371 --> 00:05:34,532 but all the child elements of the body. 126 126 00:05:34,532 --> 00:05:37,232 And doing it this way is actually more efficient, 127 127 00:05:37,232 --> 00:05:40,027 and it's a better practice than to just put all of this 128 128 00:05:40,027 --> 00:05:42,291 in the universal selector up here. 129 129 00:05:42,291 --> 00:05:43,520 We never do that. 130 130 00:05:43,520 --> 00:05:44,761 Everything related to font, 131 131 00:05:44,761 --> 00:05:47,426 we always specify it here in the body selector. 132 132 00:05:47,426 --> 00:05:49,914 We set the font family to Lato. 133 133 00:05:49,914 --> 00:05:53,927 And if that's not available, then just some Sans Serif. 134 134 00:05:53,927 --> 00:05:56,659 I can use Lato because I already included it here 135 135 00:05:56,659 --> 00:05:57,982 in the html. 136 136 00:05:57,982 --> 00:06:01,036 As I said in the beginning, this comes from Google fonts, 137 137 00:06:01,036 --> 00:06:03,136 and it's a font that I have already included. 138 138 00:06:03,136 --> 00:06:07,285 If you're not familiar with this, it's really simple. 139 139 00:06:07,285 --> 00:06:09,796 You can just go to Google Fonts and find it out. 140 140 00:06:09,796 --> 00:06:11,738 I included Lato with the font weights of 141 141 00:06:11,738 --> 00:06:13,988 100, 300, 400, 700 and 900. 142 142 00:06:15,010 --> 00:06:18,843 Let's set the overall font weight to just 400. 143 143 00:06:19,679 --> 00:06:21,096 Font weight. 400. 144 144 00:06:22,148 --> 00:06:25,981 Also the overall font size should be 16 pixels 145 145 00:06:27,085 --> 00:06:30,335 and the line height of, let's say, 1.7. 146 146 00:06:32,345 --> 00:06:35,828 So basically line height 1.7 means that 147 147 00:06:35,828 --> 00:06:39,661 it's 1.7 times bigger than the predefined line height, 148 148 00:06:39,661 --> 00:06:41,436 that we would have without this. 149 149 00:06:41,436 --> 00:06:44,035 We're using 16 pixels here for now, 150 150 00:06:44,035 --> 00:06:45,917 but we're actually going to change this later 151 151 00:06:45,917 --> 00:06:47,354 to use a better technique, 152 152 00:06:47,354 --> 00:06:50,588 but for now, let's go with these pixels. 153 153 00:06:50,588 --> 00:06:54,469 Something else we can set here is the overall text color, 154 154 00:06:54,469 --> 00:06:56,830 which I'm sure you also know how to do it. 155 155 00:06:56,830 --> 00:06:58,457 And it's just color. 156 156 00:06:58,457 --> 00:07:01,077 And then the color that I chose for this text 157 157 00:07:01,077 --> 00:07:02,577 is this gray, 777. 158 158 00:07:04,682 --> 00:07:07,623 And here in my text territory actually have 159 159 00:07:07,623 --> 00:07:10,390 an extension, which then nicely highlights the color. 160 160 00:07:10,390 --> 00:07:14,334 This is how the color looks like, this gray 777. 161 161 00:07:14,334 --> 00:07:15,884 It also does it up here in the comments. 162 162 00:07:15,884 --> 00:07:18,289 These are the greens and you can already see 163 163 00:07:18,289 --> 00:07:21,791 how they look like because of what this extension does. 164 164 00:07:21,791 --> 00:07:24,930 And with this code, we just performed a basic reset 165 165 00:07:24,930 --> 00:07:28,390 and we also set the project-wide font definitions 166 166 00:07:28,390 --> 00:07:29,680 here in the body selector 167 167 00:07:29,680 --> 00:07:33,648 because they will all be inherited to their child elements. 168 168 00:07:33,648 --> 00:07:35,310 With that in place, 169 169 00:07:35,310 --> 00:07:37,636 let's start formatting the header element. 170 170 00:07:37,636 --> 00:07:39,353 And remember it has the header class. 171 171 00:07:39,353 --> 00:07:42,687 We use the class selector and then header. 172 172 00:07:42,687 --> 00:07:46,287 Let's just create some space here. 173 173 00:07:46,287 --> 00:07:49,604 Let's start by defining the height, 174 174 00:07:49,604 --> 00:07:52,388 and let's set it to 95vh. 175 175 00:07:52,388 --> 00:07:54,610 In case you're not sure what this does, 176 176 00:07:54,610 --> 00:07:57,266 it's basically we say that at every point, 177 177 00:07:57,266 --> 00:07:59,867 the height of this box, of this element, 178 178 00:07:59,867 --> 00:08:03,105 should be 95% of the viewport height. 179 179 00:08:03,105 --> 00:08:04,727 Now we could put 100 here, 180 180 00:08:04,727 --> 00:08:07,595 then the element would always be exactly the same height 181 181 00:08:07,595 --> 00:08:10,594 as the viewport, but I chose to go with 95 182 182 00:08:10,594 --> 00:08:15,048 to make it not 100%, but only almost 100%. 183 183 00:08:15,048 --> 00:08:17,855 Let's now set the background image. 184 184 00:08:17,855 --> 00:08:19,648 I start typing background, 185 185 00:08:19,648 --> 00:08:22,538 but instead of having to write all the way until background, 186 186 00:08:22,538 --> 00:08:25,891 and then image, I can just start writing image right now, 187 187 00:08:25,891 --> 00:08:28,559 because the text editor will recognize 188 188 00:08:28,559 --> 00:08:31,442 that I'm looking for background image. 189 189 00:08:31,442 --> 00:08:34,154 You see, it already recognized that that's what I want. 190 190 00:08:34,154 --> 00:08:36,896 And this will also work in your text editor. 191 191 00:08:36,896 --> 00:08:39,518 You can just do the same and you don't have to write 192 192 00:08:39,518 --> 00:08:41,675 all the codes, like background image, 193 193 00:08:41,675 --> 00:08:44,520 when instead just back img and then it works. 194 194 00:08:44,520 --> 00:08:47,005 Press enter and that's it. 195 195 00:08:47,005 --> 00:08:48,948 The background image that we want 196 196 00:08:48,948 --> 00:08:51,717 is here in the image folder. 197 197 00:08:51,717 --> 00:08:54,531 It is called hero, I think. 198 198 00:08:54,531 --> 00:08:56,397 Yeah, so that's the one we want, right? 199 199 00:08:56,397 --> 00:08:58,730 You see? It's this one here. 200 200 00:09:01,430 --> 00:09:05,343 And we specify an image by writing url 201 201 00:09:05,343 --> 00:09:08,194 and then specifying the path to the image. 202 202 00:09:08,194 --> 00:09:10,418 Now we're currently in the CSS folder, 203 203 00:09:10,418 --> 00:09:12,914 so we first have to go one folder up 204 204 00:09:12,914 --> 00:09:14,583 to go into the project folder. 205 205 00:09:14,583 --> 00:09:18,500 And so it's ../ then, img, so image, 206 206 00:09:21,516 --> 00:09:24,849 and then the name of the image, hero.jpg 207 207 00:09:26,143 --> 00:09:27,430 And that's it. 208 208 00:09:27,430 --> 00:09:30,594 So again, we were here in the CSS folder 209 209 00:09:30,594 --> 00:09:33,814 and we went one level up to go into the project folder 210 210 00:09:33,814 --> 00:09:35,807 so the Natours folder here, 211 211 00:09:35,807 --> 00:09:37,718 and then from there we went into the image folder, 212 212 00:09:37,718 --> 00:09:39,983 and then hero.jpg. 213 213 00:09:39,983 --> 00:09:41,173 And now something else we should do 214 214 00:09:41,173 --> 00:09:44,198 is to set the background size to cover, 215 215 00:09:44,198 --> 00:09:46,193 which I'm sure you're also familiar with. 216 216 00:09:46,193 --> 00:09:47,279 Again, I do this trick. 217 217 00:09:47,279 --> 00:09:51,396 I just write back, then I start writing size, 218 218 00:09:51,396 --> 00:09:53,263 return, and that's it. 219 219 00:09:53,263 --> 00:09:55,814 And cover is what I want here. 220 220 00:09:55,814 --> 00:09:58,711 And what cover does is that whatever the width of 221 221 00:09:58,711 --> 00:10:01,984 the viewport, or the element, it'll always try to fit 222 222 00:10:01,984 --> 00:10:04,484 the element inside of the box. 223 223 00:10:05,522 --> 00:10:09,156 Let's now take a look on what that looks like. 224 224 00:10:09,156 --> 00:10:12,894 This one is it. Refresh. And here we go. 225 225 00:10:12,894 --> 00:10:16,806 So our background image adapts nicely to the viewport, 226 226 00:10:16,806 --> 00:10:17,837 I hope. 227 227 00:10:17,837 --> 00:10:19,337 And yeah, it does. 228 228 00:10:20,294 --> 00:10:22,770 And you see here this white bar, 229 229 00:10:22,770 --> 00:10:25,759 it's the remaining 5% of the viewport height. 230 230 00:10:25,759 --> 00:10:27,627 100% would fill everything. 231 231 00:10:27,627 --> 00:10:31,250 95 fills just up until this point. 232 232 00:10:31,250 --> 00:10:32,997 And also here you can see the text, 233 233 00:10:32,997 --> 00:10:34,663 the some text the we put 234 234 00:10:34,663 --> 00:10:38,214 and it's already styled with the Lato font family, 235 235 00:10:38,214 --> 00:10:42,231 with the gray color and the 16 pixels in size. 236 236 00:10:42,231 --> 00:10:44,171 Now something else we could do here 237 237 00:10:44,171 --> 00:10:46,678 is to set the background position. 238 238 00:10:46,678 --> 00:10:50,428 Background position and we can set it to top. 239 239 00:10:52,080 --> 00:10:54,163 Let's see what that does. 240 240 00:10:55,596 --> 00:10:58,578 It looks like it did nothing, but actually it does. 241 241 00:10:58,578 --> 00:11:00,829 Because what it does is to ensure that whatever 242 242 00:11:00,829 --> 00:11:04,396 the viewport size is that this top of the image here 243 243 00:11:04,396 --> 00:11:07,813 always stays at the top of the container. 244 244 00:11:09,457 --> 00:11:11,394 So you see now here, as we go up, 245 245 00:11:11,394 --> 00:11:13,570 the bottom of the image gets cropped, 246 246 00:11:13,570 --> 00:11:18,041 but the top of the image stays the same, right? 247 247 00:11:18,041 --> 00:11:19,490 So it's this, what I'm talking about. 248 248 00:11:19,490 --> 00:11:22,316 Now we could change it, so let's actually use the DevTools 249 249 00:11:22,316 --> 00:11:23,911 here right now. 250 250 00:11:23,911 --> 00:11:26,833 Because this is a fundamental part of being a web developer 251 251 00:11:26,833 --> 00:11:29,172 is using these Chrome DevTools. 252 252 00:11:29,172 --> 00:11:33,339 Let's see what it would look like if we set it to bottom. 253 253 00:11:34,655 --> 00:11:39,106 Now what happens is that the bottom stays the same 254 254 00:11:39,106 --> 00:11:41,439 as we change the image size. 255 255 00:11:43,380 --> 00:11:46,827 The bottom stays the same and it changes up there. 256 256 00:11:46,827 --> 00:11:50,744 Now what we also can do is to set it to center. 257 257 00:11:52,095 --> 00:11:55,824 What it will do now is to always stay at the center. 258 258 00:11:55,824 --> 00:12:00,450 It will now probably crop out at the top and at the bottom. 259 259 00:12:00,450 --> 00:12:04,464 So you see. Yeah, that's what happens now. 260 260 00:12:04,464 --> 00:12:06,625 Basically, it's in the middle here now, 261 261 00:12:06,625 --> 00:12:09,858 where it stays the same, but at the bottom and the top 262 262 00:12:09,858 --> 00:12:12,108 it is cropped out. You see? 263 263 00:12:13,825 --> 00:12:17,595 All right, but we of course want it at the top. 264 264 00:12:17,595 --> 00:12:19,946 Next up, we want that nice green gradient 265 265 00:12:19,946 --> 00:12:21,230 all over the image. 266 266 00:12:21,230 --> 00:12:22,510 And how do we do that? 267 267 00:12:22,510 --> 00:12:25,724 We use background image again, because to specify gradients, 268 268 00:12:25,724 --> 00:12:28,849 we always use the background image property. 269 269 00:12:28,849 --> 00:12:32,264 We already have the background image property here 270 270 00:12:32,264 --> 00:12:33,744 with the image. 271 271 00:12:33,744 --> 00:12:35,172 So what can we do? 272 272 00:12:35,172 --> 00:12:37,337 We simply specify a second one. 273 273 00:12:37,337 --> 00:12:40,063 And what we do is to use the comma. 274 274 00:12:40,063 --> 00:12:42,606 Now we want the background to stay on top 275 275 00:12:42,606 --> 00:12:44,300 and so it actually has to be first 276 276 00:12:44,300 --> 00:12:46,387 background image that we specify. 277 277 00:12:46,387 --> 00:12:47,831 We put a gradient here 278 278 00:12:47,831 --> 00:12:51,249 and then comma, the image. Okay? 279 279 00:12:51,249 --> 00:12:55,172 Let's put actually the linear gradient here. 280 280 00:12:55,172 --> 00:12:58,190 Linear gradient and then the colors that we want. 281 281 00:12:58,190 --> 00:13:00,054 And we actually have the colors up here, 282 282 00:13:00,054 --> 00:13:03,804 so we start with the light green on one side. 283 283 00:13:05,146 --> 00:13:06,719 I paste it here. 284 284 00:13:06,719 --> 00:13:10,886 And then comma, and on the other side, the dark green. 285 285 00:13:13,310 --> 00:13:14,760 Okay. Makes sense. 286 286 00:13:14,760 --> 00:13:17,295 We have basically two background images, 287 287 00:13:17,295 --> 00:13:18,716 one on top of the other. 288 288 00:13:18,716 --> 00:13:20,334 The first one is the linear gradient 289 289 00:13:20,334 --> 00:13:22,231 going from this color to this color. 290 290 00:13:22,231 --> 00:13:25,824 And then after that, so basically below that, 291 291 00:13:25,824 --> 00:13:27,986 is this hero image. 292 292 00:13:27,986 --> 00:13:29,788 Now another parameter that we can specify 293 293 00:13:29,788 --> 00:13:32,908 in the linear gradient is basically to where 294 294 00:13:32,908 --> 00:13:34,301 the gradient should go. 295 295 00:13:34,301 --> 00:13:35,968 We can say to right. 296 296 00:13:37,961 --> 00:13:40,657 And so now CSS understands that it should start 297 297 00:13:40,657 --> 00:13:43,077 on the left side and go to the right. 298 298 00:13:43,077 --> 00:13:45,160 Let's see if that worked. 299 299 00:13:46,220 --> 00:13:49,803 Close the DevTools and then reload. 300 300 00:13:49,803 --> 00:13:51,098 And yeah, that's it. 301 301 00:13:51,098 --> 00:13:53,443 So we have the gradient going from the left side. 302 302 00:13:53,443 --> 00:13:56,582 But the first green, lighter one, going to the right side 303 303 00:13:56,582 --> 00:13:58,193 with the darker green. 304 304 00:13:58,193 --> 00:14:02,563 Now we could also say to top or to bottom or to left, 305 305 00:14:02,563 --> 00:14:04,230 and we can also do something else, 306 306 00:14:04,230 --> 00:14:06,478 which is specifying two directions. 307 307 00:14:06,478 --> 00:14:08,645 So we say to right bottom. 308 308 00:14:10,037 --> 00:14:13,284 And so now the gradient will go to the right bottom corner. 309 309 00:14:13,284 --> 00:14:16,650 Starting probably at the left top. Right? 310 310 00:14:16,650 --> 00:14:18,829 Let's see if that's what happens. 311 311 00:14:18,829 --> 00:14:20,396 And yeah, I hope you saw it change. 312 312 00:14:20,396 --> 00:14:23,383 So now it goes from here, all the way there. 313 313 00:14:23,383 --> 00:14:25,263 Only one thing left to do 314 314 00:14:25,263 --> 00:14:27,957 is to actually make the image below it visible, right? 315 315 00:14:27,957 --> 00:14:29,407 And how can we do that? 316 316 00:14:29,407 --> 00:14:34,151 Yeah, we have to change the opacity of these colors. 317 317 00:14:34,151 --> 00:14:37,002 In order to do that, I can actually use the built in 318 318 00:14:37,002 --> 00:14:38,662 color picker that I have here. 319 319 00:14:38,662 --> 00:14:40,448 And I'm sure that your text editor, 320 320 00:14:40,448 --> 00:14:43,031 if you're not using Visual Studio Code, 321 321 00:14:43,031 --> 00:14:44,835 will do the same. 322 322 00:14:44,835 --> 00:14:47,251 I just have to pull down this slider here, 323 323 00:14:47,251 --> 00:14:50,584 then until it gives me an opacity of 08. 324 324 00:14:51,599 --> 00:14:54,852 I'm sure you're familiar with this rgba syntax. 325 325 00:14:54,852 --> 00:14:58,128 Basically, rgba means that we have here the R, G and B, 326 326 00:14:58,128 --> 00:14:59,934 so red, green and blue 327 327 00:14:59,934 --> 00:15:02,822 and then the opacity value in the end. 328 328 00:15:02,822 --> 00:15:06,358 And this color picker does the conversion automatically, 329 329 00:15:06,358 --> 00:15:09,528 so we no longer can use this hexadecimal annotation here, 330 330 00:15:09,528 --> 00:15:13,445 so 28b485, but we have to change to rgba, okay? 331 331 00:15:16,591 --> 00:15:17,817 I'm putting 80 here, 332 332 00:15:17,817 --> 00:15:20,418 so basically 80% of the color is visible. 333 333 00:15:20,418 --> 00:15:23,297 If you went down here to like 10%, 334 334 00:15:23,297 --> 00:15:25,965 it will be almost transparent. 335 335 00:15:25,965 --> 00:15:28,132 But we want 80% here. 336 336 00:15:29,335 --> 00:15:31,331 This looks a bit confusing here, 337 337 00:15:31,331 --> 00:15:35,159 so let's actually clean this up a bit. 338 338 00:15:35,159 --> 00:15:37,826 Each argument has it's own line, 339 339 00:15:40,175 --> 00:15:42,553 and then also this one on a separate line 340 340 00:15:42,553 --> 00:15:46,190 so that it's easier to read a little bit. 341 341 00:15:46,190 --> 00:15:47,668 Again, we have two background images. 342 342 00:15:47,668 --> 00:15:50,892 First is gradient, going to right bottom 343 343 00:15:50,892 --> 00:15:51,966 with these two colors. 344 344 00:15:51,966 --> 00:15:54,491 And then the image below that. 345 345 00:15:54,491 --> 00:15:57,357 So let's see if that's the effect that we want. 346 346 00:15:57,357 --> 00:15:59,868 And yeah. That's pretty much how we want it to look like. 347 347 00:15:59,868 --> 00:16:02,100 Let's check. Yeah. 348 348 00:16:02,100 --> 00:16:04,293 That's actually almost what it looks like. 349 349 00:16:04,293 --> 00:16:07,490 You see this small white thing here, 350 350 00:16:07,490 --> 00:16:09,155 this small white border, 351 351 00:16:09,155 --> 00:16:11,523 that goes around this entire webpage? 352 352 00:16:11,523 --> 00:16:13,614 You see it? It's actually also here. 353 353 00:16:13,614 --> 00:16:15,624 You can see that here it's light gray. 354 354 00:16:15,624 --> 00:16:16,890 But here it's white. 355 355 00:16:16,890 --> 00:16:20,146 This white thing goes around the entire webpage. 356 356 00:16:20,146 --> 00:16:22,883 I think it gives everything a very nice look. 357 357 00:16:22,883 --> 00:16:24,540 Let's do that as well. 358 358 00:16:24,540 --> 00:16:26,237 It's actually really easy. 359 359 00:16:26,237 --> 00:16:28,755 All we have to do is to put a padding 360 360 00:16:28,755 --> 00:16:30,672 around the entire body. 361 361 00:16:31,657 --> 00:16:33,240 Padding, 30 pixels. 362 362 00:16:34,485 --> 00:16:36,559 The body element contains the entire webpage 363 363 00:16:36,559 --> 00:16:38,753 and so if we set a padding here, 364 364 00:16:38,753 --> 00:16:43,167 then this padding will get applied on the entire webpage. 365 365 00:16:43,167 --> 00:16:45,300 Just like this. Here we go. 366 366 00:16:45,300 --> 00:16:49,467 That's our 30 pixel padding here around the webpage. 367 367 00:16:50,599 --> 00:16:53,978 This is not a case of inheritance, like we had here, 368 368 00:16:53,978 --> 00:16:56,218 because the padding is not getting inherited. 369 369 00:16:56,218 --> 00:16:58,569 All that's happening is that it's applying a 30 pixel 370 370 00:16:58,569 --> 00:17:01,152 padding around the entire body. 371 371 00:17:02,456 --> 00:17:04,623 And now the last piece of the styling 372 372 00:17:04,623 --> 00:17:06,995 that we want to do for the header. 373 373 00:17:06,995 --> 00:17:09,547 What we want is now this kind of wedge 374 374 00:17:09,547 --> 00:17:11,149 that we can see here. 375 375 00:17:11,149 --> 00:17:13,004 And what this is, is to simply clip, 376 376 00:17:13,004 --> 00:17:14,821 clip out this part of the image 377 377 00:17:14,821 --> 00:17:16,633 that would otherwise be here. 378 378 00:17:16,633 --> 00:17:19,029 Okay? Let's now do that. 379 379 00:17:19,029 --> 00:17:22,272 And for that, we use the really modern CSS property 380 380 00:17:22,272 --> 00:17:23,689 called clip-path. 381 381 00:17:24,878 --> 00:17:26,082 So, clip-path. 382 382 00:17:26,082 --> 00:17:28,389 And what we're doing here is to specify a polygon 383 383 00:17:28,389 --> 00:17:31,877 in which the image, or the element, will still be visible. 384 384 00:17:31,877 --> 00:17:34,472 We use the polygon function. 385 385 00:17:34,472 --> 00:17:35,849 So polygon. 386 386 00:17:35,849 --> 00:17:38,007 And in here we define a bunch of coordinates 387 387 00:17:38,007 --> 00:17:40,107 which define this polygon. 388 388 00:17:40,107 --> 00:17:42,338 For now, let me just put some place holders here, 389 389 00:17:42,338 --> 00:17:45,125 like X and epsilon. X and epsilon. 390 390 00:17:45,125 --> 00:17:47,464 And we're gonna specify these later on. 391 391 00:17:47,464 --> 00:17:49,131 Okay. X and epsilon. 392 392 00:17:50,045 --> 00:17:52,695 But first, we need to take a look at the image to see 393 393 00:17:52,695 --> 00:17:55,352 how it actually should work. 394 394 00:17:55,352 --> 00:17:57,240 So this is our image, 395 395 00:17:57,240 --> 00:17:59,825 and this is how we want the final version to look. 396 396 00:17:59,825 --> 00:18:02,862 All right, so what are the four coordinates of this polygon 397 397 00:18:02,862 --> 00:18:05,838 where we want the element to still be visible? 398 398 00:18:05,838 --> 00:18:08,836 It's this one here, right? So we're gonna start here. 399 399 00:18:08,836 --> 00:18:11,708 This one. Then here, this coordinate. 400 400 00:18:11,708 --> 00:18:13,594 Then this one, this corner. 401 401 00:18:13,594 --> 00:18:15,242 And then finally, this one. 402 402 00:18:15,242 --> 00:18:19,085 All we need to specify these four corners 403 403 00:18:19,085 --> 00:18:20,937 in order to obtain this polygon. 404 404 00:18:20,937 --> 00:18:23,778 And we're gonna start here at the top left corner 405 405 00:18:23,778 --> 00:18:25,292 and then move clockwise. 406 406 00:18:25,292 --> 00:18:28,130 This one first, then this one, 407 407 00:18:28,130 --> 00:18:31,472 then the third one, and then the final one. 408 408 00:18:31,472 --> 00:18:33,341 In relation to this point here, 409 409 00:18:33,341 --> 00:18:35,761 where do we want the first point to be? 410 410 00:18:35,761 --> 00:18:37,744 We want it to be exactly here, right? 411 411 00:18:37,744 --> 00:18:40,744 So we don't wanna move it anything in the X axis, 412 412 00:18:40,744 --> 00:18:43,453 so it's just like this. This is X. 413 413 00:18:43,453 --> 00:18:46,119 line:15% And we don't want it to move in the epsilon axis, 414 414 00:18:46,119 --> 00:18:48,224 line:15% so also not this way. 415 415 00:18:48,224 --> 00:18:49,913 line:15% It's just zero zero. 416 416 00:18:49,913 --> 00:18:52,191 You want it to stay in the same place. 417 417 00:18:52,191 --> 00:18:54,108 So zero and zero. Okay? 418 418 00:18:54,996 --> 00:18:58,638 In the X direction we don't want it to change. 419 419 00:18:58,638 --> 00:19:00,480 And in the epsilon direction, 420 420 00:19:00,480 --> 00:19:02,208 we also don't want it to change. 421 421 00:19:02,208 --> 00:19:04,542 Let's now take a look at the second point. 422 422 00:19:04,542 --> 00:19:06,310 So this one here. 423 423 00:19:06,310 --> 00:19:08,924 Counting from here, from the left side, 424 424 00:19:08,924 --> 00:19:12,280 we want it to change in the X direction, right? 425 425 00:19:12,280 --> 00:19:14,736 All the way until this point 426 426 00:19:14,736 --> 00:19:16,766 we want the polygon to go, right? 427 427 00:19:16,766 --> 00:19:18,033 And so what is this point here? 428 428 00:19:18,033 --> 00:19:20,344 How far away is it from the left side? 429 429 00:19:20,344 --> 00:19:22,547 We can simply say it's 100%. 430 430 00:19:22,547 --> 00:19:26,215 So it's gonna be 100% of the width of this element 431 431 00:19:26,215 --> 00:19:29,347 away from the left side, from here. 432 432 00:19:29,347 --> 00:19:33,425 We can just say that X should be 100% 433 433 00:19:33,425 --> 00:19:35,875 and our epsilon in the epsilon direction, 434 434 00:19:35,875 --> 00:19:38,040 we don't wanna change it at all, right? 435 435 00:19:38,040 --> 00:19:41,593 Okay. And now the third coordinate is this one. 436 436 00:19:41,593 --> 00:19:44,118 line:15% It's the same in the X direction, right? 437 437 00:19:44,118 --> 00:19:46,877 line:15% So it's still 100% in the X direction, 438 438 00:19:46,877 --> 00:19:49,793 line:15% but now the epsilon is what changes here. 439 439 00:19:49,793 --> 00:19:53,626 line:15% Let's just put some random number there, okay? 440 440 00:19:55,588 --> 00:19:57,794 X is still the same, 100%. 441 441 00:19:57,794 --> 00:20:00,717 And now from the top, we want it to be at some point. 442 442 00:20:00,717 --> 00:20:03,079 Let's just say 50%. 443 443 00:20:03,079 --> 00:20:05,213 Or we could also specify it as in pixels 444 444 00:20:05,213 --> 00:20:07,406 or in any other unit that we want. 445 445 00:20:07,406 --> 00:20:11,017 For example, I can say 200 pixels, okay? 446 446 00:20:11,017 --> 00:20:14,320 All right. And now the last coordinate is this one here, 447 447 00:20:14,320 --> 00:20:15,756 the fourth. 448 448 00:20:15,756 --> 00:20:18,606 In X, we're back to zero here, right? 449 449 00:20:18,606 --> 00:20:20,873 Because remember that this side here is the reference. 450 450 00:20:20,873 --> 00:20:24,705 We don't move anything in the X direction, so this way. 451 451 00:20:24,705 --> 00:20:27,383 We did move, however, in the epsilon direction, 452 452 00:20:27,383 --> 00:20:29,099 so going from here, 453 453 00:20:29,099 --> 00:20:32,504 we did all the way down to the end of the element. 454 454 00:20:32,504 --> 00:20:34,254 So we want 100%. 455 455 00:20:36,495 --> 00:20:40,245 In X it's zero and in epsilon it's 100%. 456 456 00:20:41,662 --> 00:20:42,548 And that's it. 457 457 00:20:42,548 --> 00:20:45,631 So let's see if this actually worked. 458 458 00:20:47,089 --> 00:20:49,573 And now, here it is. 459 459 00:20:49,573 --> 00:20:51,225 All right. Great. 460 460 00:20:51,225 --> 00:20:54,189 These are the 200 pixels that we specified here 461 461 00:20:54,189 --> 00:20:58,266 in this coordinate for the epsilon direction. 462 462 00:20:58,266 --> 00:21:00,849 Let's now inspect this element. 463 463 00:21:01,930 --> 00:21:04,104 And we can now change here some stuff 464 464 00:21:04,104 --> 00:21:06,263 so that you can see how this changes. 465 465 00:21:06,263 --> 00:21:08,881 Imagine that here for the second coordinate, 466 466 00:21:08,881 --> 00:21:12,191 so this one here, we wouldn't put 100 pixels, 467 467 00:21:12,191 --> 00:21:14,347 but let's say, sorry. 468 468 00:21:14,347 --> 00:21:18,514 We wouldn't put 100%, but we would put let's say 500 pixels. 469 469 00:21:20,415 --> 00:21:22,045 Okay, that makes sense, right? 470 470 00:21:22,045 --> 00:21:25,188 Because we have 500 in the X direction 471 471 00:21:25,188 --> 00:21:28,021 and zero in the epsilon direction. 472 472 00:21:29,115 --> 00:21:31,165 Can also change that of course. 473 473 00:21:31,165 --> 00:21:34,280 Let's say we have 100 pixels here, 474 474 00:21:34,280 --> 00:21:35,750 then it look like that. 475 475 00:21:35,750 --> 00:21:36,689 All right. 476 476 00:21:36,689 --> 00:21:37,912 Now what I want you to try here 477 477 00:21:37,912 --> 00:21:39,820 is to make a triangle of this. 478 478 00:21:39,820 --> 00:21:40,989 Okay? 479 479 00:21:40,989 --> 00:21:42,835 I'm pretty sure that after this explanation 480 480 00:21:42,835 --> 00:21:46,388 line:15% you should already understand how it works, right? 481 481 00:21:46,388 --> 00:21:50,555 line:15% Try to pause the video and try to do a triangle here, okay? 482 482 00:21:52,147 --> 00:21:54,264 So, did you manage to make it work? 483 483 00:21:54,264 --> 00:21:56,119 This is how I would do it. 484 484 00:21:56,119 --> 00:21:59,493 Let's just get rid of all of this. 485 485 00:21:59,493 --> 00:22:01,241 And now, the first coordinate 486 486 00:22:01,241 --> 00:22:03,780 should be here in the center, right? 487 487 00:22:03,780 --> 00:22:07,363 We have X 50% and on epsilon, 0%. 488 488 00:22:10,476 --> 00:22:12,603 And now we want this bottom corner here, 489 489 00:22:12,603 --> 00:22:16,770 so X is 100% and epsilon is also 100%, right? 490 490 00:22:18,425 --> 00:22:21,128 And now finally it's this bottom corner here. 491 491 00:22:21,128 --> 00:22:25,295 And so here we have X zero and epsilon is 100%. 492 492 00:22:26,212 --> 00:22:28,045 So zero and 100%. 493 493 00:22:30,019 --> 00:22:32,855 And here we go. So here we have our triangle, right? 494 494 00:22:32,855 --> 00:22:35,151 So if you wanna make a triangle, it's like this. 495 495 00:22:35,151 --> 00:22:37,704 Now you can do lots of different things with this 496 496 00:22:37,704 --> 00:22:39,685 and there's actually a very cool tool 497 497 00:22:39,685 --> 00:22:41,700 which is called Clippy, this one here. 498 498 00:22:41,700 --> 00:22:44,079 And I'm gonna put it on my resource reference page 499 499 00:22:44,079 --> 00:22:46,080 so that you can check it out later. 500 500 00:22:46,080 --> 00:22:48,595 And here you just need to click on one of these. 501 501 00:22:48,595 --> 00:22:51,840 Let's say we want a right arrow, like this. 502 502 00:22:51,840 --> 00:22:53,606 To get a bit crazy. 503 503 00:22:53,606 --> 00:22:58,369 And then all we have to do is to copy this CSS code here. 504 504 00:22:58,369 --> 00:22:59,809 Now let's just copy these numbers 505 505 00:22:59,809 --> 00:23:03,976 because we already have the clip-path property written out. 506 506 00:23:07,026 --> 00:23:10,693 Just to make a final test, final experiment. 507 507 00:23:12,582 --> 00:23:14,083 It works like this. Okay. 508 508 00:23:14,083 --> 00:23:15,545 Now we have an arrow. 509 509 00:23:15,545 --> 00:23:17,421 Okay, but we don't want any arrow. 510 510 00:23:17,421 --> 00:23:21,557 We just want our element to look like in the example page. 511 511 00:23:21,557 --> 00:23:24,860 And so here, what we will do, is not to specify a percentage 512 512 00:23:24,860 --> 00:23:27,000 but a unit of viewport height. 513 513 00:23:27,000 --> 00:23:30,302 Such as we did here for the height of the element. 514 514 00:23:30,302 --> 00:23:35,007 In here, I will say 75% of the viewport height, okay? 515 515 00:23:35,007 --> 00:23:38,464 So let's look how this looks like now. 516 516 00:23:38,464 --> 00:23:39,310 And that's it. 517 517 00:23:39,310 --> 00:23:41,629 Now if we change the viewport height, 518 518 00:23:41,629 --> 00:23:44,621 it will also change dynamically. 519 519 00:23:44,621 --> 00:23:46,802 This little interval here, right? 520 520 00:23:46,802 --> 00:23:49,503 And if I close this completely, then it looks like this. 521 521 00:23:49,503 --> 00:23:53,287 And it looks the exact same way as our original, right? 522 522 00:23:53,287 --> 00:23:55,951 See. That's how it looks like. 523 523 00:23:55,951 --> 00:23:57,247 Awesome. 524 524 00:23:57,247 --> 00:23:59,353 I know this is a bit complicated to understand 525 525 00:23:59,353 --> 00:24:02,231 this clip-path property and the polygon we have to write, 526 526 00:24:02,231 --> 00:24:04,129 but try to wrap your head around it, 527 527 00:24:04,129 --> 00:24:06,398 and then it's actually not so complicated. 528 528 00:24:06,398 --> 00:24:08,214 I hope that this first coding lecture 529 529 00:24:08,214 --> 00:24:09,969 of the course was quite fun 530 530 00:24:09,969 --> 00:24:12,020 and that you already learned something new here. 531 531 00:24:12,020 --> 00:24:13,482 We're already making great progress 532 532 00:24:13,482 --> 00:24:14,920 and to continue with this header, 533 533 00:24:14,920 --> 00:24:17,267 just come with me right to the next lecture. 534 534 00:24:17,267 --> 00:24:18,434 See you there. 46414