1 00:00:00,260 --> 00:00:01,310 Hey, welcome back. 2 00:00:01,340 --> 00:00:06,650 Our website has two pages currently the home page and also the about page. 3 00:00:06,980 --> 00:00:15,200 However, it's not easy to access those pages because you should know the exact URLs in order to visit 4 00:00:15,200 --> 00:00:16,700 those pages as a user. 5 00:00:16,700 --> 00:00:17,690 As a visitor. 6 00:00:17,870 --> 00:00:19,790 That's not user friendly, of course. 7 00:00:19,790 --> 00:00:29,030 So we need to have a navigation bar here on top where we show the links to all the important pages on 8 00:00:29,030 --> 00:00:29,870 our website. 9 00:00:29,900 --> 00:00:30,830 Let's do that. 10 00:00:31,100 --> 00:00:38,240 So in the previous video we set up a base dot HTML file and also an about.html file and we modify the 11 00:00:38,240 --> 00:00:39,890 index.html file. 12 00:00:39,890 --> 00:00:46,460 So now to add a navigation bar, can you guess where we should work? 13 00:00:46,610 --> 00:00:50,930 So should we add it to a boat to base or index? 14 00:00:51,170 --> 00:00:59,000 Of course we should add it to base dot html so that we can write it once and all the other pages will 15 00:00:59,000 --> 00:01:01,770 inherit that navigation bar. 16 00:01:02,010 --> 00:01:10,130 So the code for the navigation bar goes above the contents of the web page, right? 17 00:01:10,140 --> 00:01:13,950 So the content of the web page is this correct? 18 00:01:14,160 --> 00:01:18,180 So the navigation bar goes above this, right? 19 00:01:18,180 --> 00:01:19,770 Which is in here. 20 00:01:19,770 --> 00:01:24,660 So between the body tag and the first div tag. 21 00:01:25,800 --> 00:01:33,360 So in here we have to type in all that code, but I will not type it in because there's so many bootstrap 22 00:01:33,360 --> 00:01:37,830 classes and it will be a bit too boring perhaps to type those in. 23 00:01:37,830 --> 00:01:40,170 So I'm just copying them. 24 00:01:41,280 --> 00:01:42,870 And pasting it here. 25 00:01:42,870 --> 00:01:45,570 And you can you can also find the code. 26 00:01:45,570 --> 00:01:46,560 I'll copy here. 27 00:01:46,600 --> 00:01:48,600 Attached in the lecture resources. 28 00:01:48,600 --> 00:01:51,390 So please copy that in your clipboard. 29 00:01:51,930 --> 00:01:54,090 Place the cursor. 30 00:01:55,640 --> 00:02:00,440 Somewhere in here, so indent under body and paste. 31 00:02:01,840 --> 00:02:04,520 So this is what I pasted. 32 00:02:04,540 --> 00:02:07,890 Let me select everything that I pasted. 33 00:02:07,900 --> 00:02:15,320 So it starts with an opening nav tag and it ends with a closing nav tag. 34 00:02:15,340 --> 00:02:16,090 Right. 35 00:02:16,120 --> 00:02:25,960 Let me unindented this here and I'll select it again and press tab to indent it under the body tag. 36 00:02:25,970 --> 00:02:27,130 So that's the code. 37 00:02:27,280 --> 00:02:30,340 Let me explain what this code is now. 38 00:02:30,760 --> 00:02:36,310 But before we do that, I want to go to the page and reload. 39 00:02:37,530 --> 00:02:39,240 And there's the sides. 40 00:02:39,810 --> 00:02:42,010 So it's working. 41 00:02:42,030 --> 00:02:45,390 That's the about page we can go to about we can go to Python. 42 00:02:45,390 --> 00:02:53,520 How this contact page has not been implemented, but you can implement, you can add contact dot HTML 43 00:02:53,730 --> 00:02:58,110 file in your templates directory and connect it to this if you like. 44 00:02:58,110 --> 00:02:59,490 So it's up to you. 45 00:02:59,670 --> 00:03:02,010 And now let's me let me explain the code. 46 00:03:02,580 --> 00:03:06,570 So we start with nav tags here and here. 47 00:03:06,570 --> 00:03:11,190 Those nav tags are specialized to create this bar. 48 00:03:11,550 --> 00:03:15,510 Then we continue with a div tag. 49 00:03:15,540 --> 00:03:23,340 It opens here and it closes here so that div tags contains all the contents of the nav bar. 50 00:03:23,340 --> 00:03:28,170 So it's like a wrapper and that's a bootstrap class. 51 00:03:28,170 --> 00:03:30,390 Then we have a elements. 52 00:03:30,390 --> 00:03:38,650 So with an opening, a tag and a closing, a tag and an a element, create, it's a link. 53 00:03:38,650 --> 00:03:40,030 So Python, how. 54 00:03:40,720 --> 00:03:43,960 Is the first a element, right? 55 00:03:43,990 --> 00:03:47,410 You see, the content of the link is Python. 56 00:03:47,410 --> 00:03:47,970 How? 57 00:03:47,980 --> 00:03:58,410 And then we have this class Navbar brand, how you want to stylize the the link based on bootstrap. 58 00:03:58,420 --> 00:04:00,580 Then we have h.r.f. 59 00:04:00,610 --> 00:04:04,840 This defines the link where python. 60 00:04:04,840 --> 00:04:08,350 How should bring the user when python how is clicked. 61 00:04:08,530 --> 00:04:11,770 So the link here is a dynamic link. 62 00:04:11,770 --> 00:04:15,580 So meaning that we are using jinja. 63 00:04:15,580 --> 00:04:19,750 So you have this quotes and inside quotes you have the jinja code. 64 00:04:19,779 --> 00:04:25,780 So we use the URL keyword followed by the name of the URL. 65 00:04:25,780 --> 00:04:27,520 What is the name of the URL? 66 00:04:27,520 --> 00:04:33,940 Well, if you go to job applications and your URLs. 67 00:04:34,740 --> 00:04:41,220 So the URLs of your app, you'll see that we have two URLs and each of them have a name. 68 00:04:41,220 --> 00:04:46,240 So a name is equal to index and name is equal to a boat. 69 00:04:46,260 --> 00:04:53,250 So this string index is what we're using in here. 70 00:04:53,910 --> 00:04:55,830 So URL for index. 71 00:04:55,830 --> 00:05:01,590 So when this is clicked, take me to the URL of the index. 72 00:05:02,420 --> 00:05:03,230 Path. 73 00:05:03,630 --> 00:05:04,160 Right? 74 00:05:04,160 --> 00:05:05,900 So then we have this button. 75 00:05:05,930 --> 00:05:14,570 The button is this thing here, which shows up when we make the window smaller so we can click that. 76 00:05:15,400 --> 00:05:18,250 To show up the menu items. 77 00:05:19,880 --> 00:05:24,950 So we have some classes there that define how that button should look like. 78 00:05:26,250 --> 00:05:29,030 Then we have the other elements, right? 79 00:05:29,030 --> 00:05:31,100 So it starts with this div. 80 00:05:31,970 --> 00:05:33,710 Which closes in here. 81 00:05:34,040 --> 00:05:41,840 So this div has a UL element which defines a list. 82 00:05:41,990 --> 00:05:46,180 So that UL contains several li elements. 83 00:05:46,190 --> 00:05:50,120 One li element here, one li element in here. 84 00:05:50,120 --> 00:05:55,070 And each li element contains an a element. 85 00:05:55,070 --> 00:05:56,120 So there we go. 86 00:05:56,120 --> 00:05:58,520 We have the about page. 87 00:05:58,910 --> 00:06:03,560 The URL points to the about name, which I showed you in Urls.py. 88 00:06:05,460 --> 00:06:09,660 And then we have the other list elements. 89 00:06:09,660 --> 00:06:16,170 And so we have the contact item, which is this one here contacts. 90 00:06:16,170 --> 00:06:21,300 And the link for H.r.f has not been implemented. 91 00:06:21,300 --> 00:06:26,250 So in that case, we simply pass quotes and a hash tag. 92 00:06:26,550 --> 00:06:30,210 You can implement this later if you like, as I mentioned. 93 00:06:30,390 --> 00:06:35,520 So then we have the closing text and that's makes a navigation bar. 94 00:06:35,530 --> 00:06:38,850 So that's our final version of the website. 95 00:06:38,850 --> 00:06:45,810 I hope you like it and I really hope you learned a lot from this so that you have a good start in web 96 00:06:45,810 --> 00:06:46,620 development. 97 00:06:46,650 --> 00:06:50,610 You need more practice, but with practice you'd get better and better. 98 00:06:50,610 --> 00:06:51,720 So thanks a lot for following. 99 00:06:51,810 --> 00:06:52,470 See you later.