1 00:00:02,130 --> 00:00:05,550 Let's add our navigation items now. 2 00:00:05,550 --> 00:00:10,340 For this we go back to the code, into the index HTML file. 3 00:00:10,340 --> 00:00:14,420 And down here, we work on the NAV element. 4 00:00:14,420 --> 00:00:17,600 Now if we think about our navigation items, 5 00:00:17,600 --> 00:00:20,610 we know that we need two elements in the end. 6 00:00:20,610 --> 00:00:22,820 One being named Destinations, 7 00:00:22,820 --> 00:00:24,780 which redirects us to a new page. 8 00:00:24,780 --> 00:00:26,930 We have to create the Places page. 9 00:00:26,930 --> 00:00:30,080 And the second one could be a link to an About page, 10 00:00:30,080 --> 00:00:33,650 where we add information about ourselves, for example. 11 00:00:33,650 --> 00:00:35,820 Now if we have such information 12 00:00:35,820 --> 00:00:37,630 which can be grouped together, 13 00:00:37,630 --> 00:00:38,963 what comes to your mind? 14 00:00:40,050 --> 00:00:42,550 Well, hopefully a list, right? 15 00:00:42,550 --> 00:00:44,690 This is something we learned in the last module. 16 00:00:44,690 --> 00:00:47,600 And here the order is not that important. 17 00:00:47,600 --> 00:00:49,640 Doesn't matter if we add destinations 18 00:00:49,640 --> 00:00:51,020 and about or about 19 00:00:51,020 --> 00:00:52,380 and then destinations. 20 00:00:52,380 --> 00:00:56,280 Therefore an unordered list would be our choice here. 21 00:00:56,280 --> 00:01:00,150 Let's create such an unordered list with the UL element 22 00:01:00,150 --> 00:01:02,210 and a list consists of what? 23 00:01:02,210 --> 00:01:03,920 Well of list items. 24 00:01:03,920 --> 00:01:08,440 So we need two list items for two navigation items. 25 00:01:08,440 --> 00:01:12,480 And as I said, these two items should be links again. 26 00:01:12,480 --> 00:01:14,490 One link to Destinations page. 27 00:01:14,490 --> 00:01:17,290 The other link to the About us page. 28 00:01:17,290 --> 00:01:19,440 Therefore we add an anchor tag here 29 00:01:20,600 --> 00:01:25,070 with a reference to another page on our website. 30 00:01:25,070 --> 00:01:26,560 We could quickly create this page. 31 00:01:26,560 --> 00:01:30,780 So let's do this and let's call this Places HTML. 32 00:01:32,750 --> 00:01:34,900 We will ignore this page for the moment though, 33 00:01:34,900 --> 00:01:36,560 and work on it a bit later, 34 00:01:36,560 --> 00:01:39,810 which has created here to be able to refer to it. 35 00:01:39,810 --> 00:01:43,200 So we can now add this link to Places HTML 36 00:01:43,200 --> 00:01:46,337 and this link should be named Destinations. 37 00:01:49,350 --> 00:01:51,190 And then the second link here 38 00:01:51,190 --> 00:01:53,480 also with an anchor tag, 39 00:01:53,480 --> 00:01:55,770 is an empty link at the moment, 40 00:01:55,770 --> 00:01:58,100 as we will not create an About page 41 00:01:58,100 --> 00:02:00,810 as part of this project here in the course. 42 00:02:00,810 --> 00:02:03,270 But it's of course a nice challenge for you later on 43 00:02:03,270 --> 00:02:05,290 to create such an About page. 44 00:02:05,290 --> 00:02:07,440 Therefore this link is empty here 45 00:02:07,440 --> 00:02:09,193 but it will be named About. 46 00:02:10,180 --> 00:02:11,150 That's it. 47 00:02:11,150 --> 00:02:12,050 If we go back, 48 00:02:12,050 --> 00:02:13,740 we see we have our logo 49 00:02:13,740 --> 00:02:15,705 and the two navigation links here. 50 00:02:15,705 --> 00:02:18,550 Both are part of our header. 51 00:02:18,550 --> 00:02:19,900 So this is working fine 52 00:02:19,900 --> 00:02:21,320 but the positioning, 53 00:02:21,320 --> 00:02:23,806 the layout is not perfect yet. 54 00:02:23,806 --> 00:02:26,800 Destinations should be here for example, 55 00:02:26,800 --> 00:02:29,310 and About should be next to it right there. 56 00:02:29,310 --> 00:02:30,430 So logo to the left, 57 00:02:30,430 --> 00:02:32,193 navigation items to the right. 58 00:02:33,630 --> 00:02:35,270 Therefore what we need here is, 59 00:02:35,270 --> 00:02:36,910 we need to go back to our code 60 00:02:36,910 --> 00:02:39,820 and here again into the shared CSS file. 61 00:02:39,820 --> 00:02:42,730 Again as navigation items will be displayed 62 00:02:42,730 --> 00:02:45,450 on both pages of our website. 63 00:02:45,450 --> 00:02:47,510 Here I first want to get rid 64 00:02:47,510 --> 00:02:49,440 of these bullet points. 65 00:02:49,440 --> 00:02:53,450 For this we use our UL type selector here 66 00:02:53,450 --> 00:02:56,070 and use the list, 67 00:02:56,070 --> 00:02:56,903 style, 68 00:02:56,903 --> 00:02:57,736 property. 69 00:02:57,736 --> 00:02:58,569 Hope you remembered that 70 00:02:58,569 --> 00:03:00,820 and set to non. 71 00:03:00,820 --> 00:03:03,490 This removes the bullet points from our list. 72 00:03:03,490 --> 00:03:04,510 If we go back, 73 00:03:04,510 --> 00:03:05,613 you can see this here. 74 00:03:07,040 --> 00:03:11,100 And if we check out our list here. 75 00:03:11,100 --> 00:03:13,840 You also see that the list has some default 76 00:03:13,840 --> 00:03:16,520 margin and padding applied right here. 77 00:03:16,520 --> 00:03:18,050 I also want to get rid of this, 78 00:03:18,050 --> 00:03:20,660 to have the full control of our styling. 79 00:03:20,660 --> 00:03:23,280 So let's set the default margin to zero 80 00:03:23,280 --> 00:03:27,030 and the default padding to zero too. 81 00:03:27,030 --> 00:03:29,810 This now it's a bit far to the left, 82 00:03:29,810 --> 00:03:31,610 I would say but that's okay. 83 00:03:31,610 --> 00:03:34,193 As we will tackle the styling now together. 84 00:03:35,310 --> 00:03:37,140 Before we tackle the styling, though, 85 00:03:37,140 --> 00:03:40,110 we have a general problem, right. 86 00:03:40,110 --> 00:03:43,230 Because at the moment we have our logo 87 00:03:43,230 --> 00:03:45,440 and then we have the unordered list, 88 00:03:45,440 --> 00:03:46,650 both block elements, 89 00:03:46,650 --> 00:03:49,400 therefore displayed one after another 90 00:03:49,400 --> 00:03:52,130 but here we actually want these to be displayed 91 00:03:52,130 --> 00:03:53,880 well, next to each other, 92 00:03:53,880 --> 00:03:55,670 as I explained. 93 00:03:55,670 --> 00:03:58,150 We could of course find workarounds here. 94 00:03:58,150 --> 00:04:00,410 And in earlier days of CSS, 95 00:04:00,410 --> 00:04:02,030 this was a bit tricky, 96 00:04:02,030 --> 00:04:05,810 but thankfully nowadays we have a very nice technology 97 00:04:05,810 --> 00:04:09,240 which helps us to easily create such nice headers 98 00:04:09,240 --> 00:04:12,240 with such nice logos and navigation bar. 99 00:04:12,240 --> 00:04:13,590 So let's now dive a bit deeper 100 00:04:13,590 --> 00:04:17,233 into the layout with CSS Flexbox.