1 00:00:00,220 --> 00:00:01,600 Back in the project 2 00:00:01,600 --> 00:00:05,240 with our newly gained knowledge about Flexbox, 3 00:00:05,240 --> 00:00:07,710 so that's the last state of our project, 4 00:00:07,710 --> 00:00:11,250 now is the time to apply this new knowledge right here. 5 00:00:11,250 --> 00:00:14,240 And I want to get started in our header, 6 00:00:14,240 --> 00:00:17,570 so this part of our code here, 7 00:00:17,570 --> 00:00:20,180 and I won't use a separate ID, 8 00:00:20,180 --> 00:00:22,500 it's not required at this stage, 9 00:00:22,500 --> 00:00:27,500 therefore, I'll just go with our header type selector 10 00:00:28,320 --> 00:00:33,320 and I'll begin with setting the display property to flex, 11 00:00:34,160 --> 00:00:37,220 so exactly what we learned in the last lectures. 12 00:00:37,220 --> 00:00:42,220 With that, our nav and our div are next to each other, 13 00:00:43,820 --> 00:00:46,620 and by clicking onto this flex button 14 00:00:46,620 --> 00:00:49,300 we also get the flex container 15 00:00:49,300 --> 00:00:52,953 as a visual helper, here, for our entire header. 16 00:00:53,920 --> 00:00:55,560 So, this was step one. 17 00:00:55,560 --> 00:00:58,750 We, again, have this unused space, here to the right, 18 00:00:58,750 --> 00:01:01,600 and the space should be used as a separator 19 00:01:01,600 --> 00:01:05,060 between our div and the nav element, 20 00:01:05,060 --> 00:01:09,370 therefore, what we'll do now, again, in our flex container, 21 00:01:09,370 --> 00:01:11,716 we will use which property? 22 00:01:11,716 --> 00:01:15,410 The justify-content property, and, here, 23 00:01:15,410 --> 00:01:19,250 we'll go with a value of space-between. 24 00:01:19,250 --> 00:01:22,080 So, again, with that, we also achieve this, 25 00:01:22,080 --> 00:01:23,343 looks nice already. 26 00:01:24,580 --> 00:01:27,010 Besides that, we, again, have the problem 27 00:01:27,010 --> 00:01:31,120 that our items, here, are not aligned correctly. 28 00:01:31,120 --> 00:01:35,530 So the logo, here, is aligned in the center, here, 29 00:01:35,530 --> 00:01:38,900 whereas our nav elements are aligned to the top. 30 00:01:38,900 --> 00:01:40,160 We can quickly solve this 31 00:01:40,160 --> 00:01:43,810 with align-items: center; like this. 32 00:01:43,810 --> 00:01:48,240 With that, the items are now aligned as they should be. 33 00:01:48,240 --> 00:01:50,810 With that, our header looks better already. 34 00:01:50,810 --> 00:01:53,330 The problem still is the positioning 35 00:01:53,330 --> 00:01:56,280 of our two list items here. 36 00:01:56,280 --> 00:01:58,900 We also learned how we can solve this issue. 37 00:01:58,900 --> 00:02:01,770 We will turn the unordered list, here, 38 00:02:01,770 --> 00:02:03,460 into a flex container. 39 00:02:03,460 --> 00:02:06,310 And, with that, we have to control about the children, 40 00:02:06,310 --> 00:02:10,060 the flex items, here, therefore, in our code, 41 00:02:10,060 --> 00:02:13,470 and now not change the unordered list, here, 42 00:02:13,470 --> 00:02:16,660 so this type selector because there might be additional 43 00:02:16,660 --> 00:02:20,060 lists in here, but I will create a separate selector 44 00:02:20,060 --> 00:02:24,080 to select this specific list that we have inside our header. 45 00:02:24,080 --> 00:02:28,030 And, for this, I will use the descendant combinator, 46 00:02:28,030 --> 00:02:30,263 we learned about earlier in the course, 47 00:02:31,290 --> 00:02:34,160 and this combinator will just work like this. 48 00:02:34,160 --> 00:02:37,570 We go to the header, and then we say in the header 49 00:02:37,570 --> 00:02:41,200 we want to access the unordered lists 50 00:02:41,200 --> 00:02:43,160 that are part of this header, 51 00:02:43,160 --> 00:02:47,650 and, by the way, I will put this generic style 52 00:02:47,650 --> 00:02:50,430 for unordered lists above here, a bit, 53 00:02:50,430 --> 00:02:51,810 just to keep the structure. 54 00:02:51,810 --> 00:02:54,300 So we have some generic styles, up here, 55 00:02:54,300 --> 00:02:55,970 for the body and unordered list, 56 00:02:55,970 --> 00:02:59,520 then we have the header, and now we have unordered lists, 57 00:02:59,520 --> 00:03:01,410 which are part of the header, 58 00:03:01,410 --> 00:03:04,680 and then, here, I'll again add the display property 59 00:03:04,680 --> 00:03:06,620 and set it equal to flex, 60 00:03:06,620 --> 00:03:08,430 with the flex direction of row 61 00:03:08,430 --> 00:03:11,420 and the flex wrap being set to no wrap. 62 00:03:11,420 --> 00:03:14,130 With that, this is positioned correctly. 63 00:03:14,130 --> 00:03:16,000 Some margin is still missing, of course, 64 00:03:16,000 --> 00:03:18,110 but we'll work on this in a few seconds. 65 00:03:18,110 --> 00:03:20,120 But, generally, we are coming closer 66 00:03:20,120 --> 00:03:25,030 towards a header with a navigation bar in it. 67 00:03:25,030 --> 00:03:28,290 Let's, maybe, immediately fix this margin issue though. 68 00:03:28,290 --> 00:03:31,340 Here, I'll again use the descendant combinator, 69 00:03:31,340 --> 00:03:33,690 but this time not for the unordered list, 70 00:03:33,690 --> 00:03:35,520 but for the list items. 71 00:03:35,520 --> 00:03:36,923 And, for each list item, 72 00:03:38,070 --> 00:03:43,070 I will add a slight left margin of maybe 20 pixels. 73 00:03:43,160 --> 00:03:45,950 This will improve the look, yeah, I think this looks fine. 74 00:03:45,950 --> 00:03:48,400 We have to work on the padding, maybe, in a few minutes 75 00:03:48,400 --> 00:03:52,810 to keep a bit more distance between the second list item 76 00:03:52,810 --> 00:03:54,600 and the right border, here, 77 00:03:54,600 --> 00:03:56,550 but that's something we can fix easily. 78 00:03:58,520 --> 00:04:01,100 To do this, we go back to the code. 79 00:04:01,100 --> 00:04:05,040 Now, in our header, I will add some padding 80 00:04:05,040 --> 00:04:07,650 and we will add padding for the top, 81 00:04:07,650 --> 00:04:09,610 and to the left, and to the right. 82 00:04:09,610 --> 00:04:13,070 I will add a bit of padding to the top and to the bottom, 83 00:04:13,070 --> 00:04:14,470 don't need to be too much, 84 00:04:14,470 --> 00:04:17,459 and a bit more padding to the left and to the right, 85 00:04:17,459 --> 00:04:22,460 therefore, let's go for 15 pixels top and bottom 86 00:04:22,810 --> 00:04:25,360 and 60 pixels left, right. 87 00:04:25,360 --> 00:04:29,093 So let's see, yeah, now this looks a lot better already. 88 00:04:30,120 --> 00:04:33,430 And if we unselect this flex helper, here, 89 00:04:33,430 --> 00:04:35,300 you'll see this is what it looks like, 90 00:04:35,300 --> 00:04:38,113 still not perfect yet, but we are coming closer. 91 00:04:39,130 --> 00:04:41,643 And, by the way, again, in the code, 92 00:04:41,643 --> 00:04:44,470 to keep things organized, 93 00:04:44,470 --> 00:04:48,260 let's maybe move our logo code 94 00:04:48,260 --> 00:04:52,330 above our code for the unordered list, 95 00:04:52,330 --> 00:04:55,100 so we have the flow of the generic styles, 96 00:04:55,100 --> 00:04:57,920 then our header, then the logo in the header, 97 00:04:57,920 --> 00:05:00,413 and then the list in the header. 98 00:05:03,410 --> 00:05:06,940 With that, I think our header doesn't look too bad already. 99 00:05:06,940 --> 00:05:08,130 If we increase the width 100 00:05:08,130 --> 00:05:09,870 you see this is what it would look like, 101 00:05:09,870 --> 00:05:11,140 I think this is fine. 102 00:05:11,140 --> 00:05:15,930 So we will not finish it completely at this stage, 103 00:05:15,930 --> 00:05:18,540 but if you think back about the project page 104 00:05:18,540 --> 00:05:20,980 with this huge hero image, 105 00:05:20,980 --> 00:05:23,800 which is kind of behind the header, 106 00:05:23,800 --> 00:05:26,950 this will be our next thing to tackle now. 107 00:05:26,950 --> 00:05:30,300 How can we add such an image, and how can we make sure 108 00:05:30,300 --> 00:05:33,283 that it is visible behind our header?