1 00:00:08,772 --> 00:00:09,880 Hi, everybody. 2 00:00:09,880 --> 00:00:11,150 Welcome back. 3 00:00:11,150 --> 00:00:12,220 Since it's week four and 4 00:00:12,220 --> 00:00:16,170 you're working on your final project, what I want to do is kind of show you 5 00:00:16,170 --> 00:00:19,850 some of the different options that you can use when you're styling your pages. 6 00:00:19,850 --> 00:00:20,870 And in this video, 7 00:00:20,870 --> 00:00:25,600 I want to show you what happens when you try to make a vertical navigation bar. 8 00:00:25,600 --> 00:00:27,130 So over here in my browser, 9 00:00:27,130 --> 00:00:29,790 I have what the page is going to look like when we're done. 10 00:00:29,790 --> 00:00:34,870 But let's go ahead and I'll hit refresh and first see what it would look like 11 00:00:34,870 --> 00:00:39,580 if I tried to make a navigation bar using four simple links. 12 00:00:39,580 --> 00:00:42,320 Again, links are inline, so they go next to each other. 13 00:00:42,320 --> 00:00:43,090 There's no color. 14 00:00:43,090 --> 00:00:44,120 There's nothing going on. 15 00:00:44,120 --> 00:00:45,870 And it's really horrible. 16 00:00:45,870 --> 00:00:48,565 So let me put that style back in. 17 00:00:51,526 --> 00:00:52,570 Refresh the page. 18 00:00:52,570 --> 00:00:55,800 And I’m going to show you how I created this navigation bar. 19 00:00:57,950 --> 00:01:00,020 Let’s start by talking about the body. 20 00:01:00,020 --> 00:01:03,040 I just put in some background color, padding, and margin. 21 00:01:03,040 --> 00:01:04,880 That’s not really important here. 22 00:01:04,880 --> 00:01:08,980 What’s important is talking about our navigation section. 23 00:01:08,980 --> 00:01:11,560 One of the things I wanted to do is to show you the idea of 24 00:01:11,560 --> 00:01:14,100 using that box-sizing border-box. 25 00:01:14,100 --> 00:01:16,940 What this is going to do is it takes away the need for 26 00:01:16,940 --> 00:01:21,710 you to count up how much width, how much padding, how much border. 27 00:01:21,710 --> 00:01:22,910 You don't have to do the math. 28 00:01:22,910 --> 00:01:24,910 The browser will do it for you. 29 00:01:24,910 --> 00:01:30,060 I put in some simple border, color, background color, etc. 30 00:01:30,060 --> 00:01:32,870 The first thing I did, though, is I made it inline-block, 31 00:01:32,870 --> 00:01:37,560 because I want my navigation to be next to the other parts of my page. 32 00:01:37,560 --> 00:01:41,690 And since nav is block, it won't happen unless I kind of throw it in there. 33 00:01:41,690 --> 00:01:46,390 So I said I wanted it to be about 20% of the page and then added some margin. 34 00:01:46,390 --> 00:01:49,730 Now, something new you may not have seen before is this idea of height 35 00:01:49,730 --> 00:01:50,560 equals 100vh. 36 00:01:51,650 --> 00:01:53,750 That's your viewport height. 37 00:01:53,750 --> 00:01:58,288 So this means I want the navigation to take up the whole height of your page. 38 00:01:58,288 --> 00:02:00,555 I'm not hard-coating it to 400 pixels or 200 pixels, 39 00:02:00,555 --> 00:02:05,680 cuz I don't know how big the screen is that you're looking at. 40 00:02:05,680 --> 00:02:09,300 Next, let's talk about the actual lengths themselves. 41 00:02:09,300 --> 00:02:13,090 What I've gone in and done is I've taken away the regular boring links and 42 00:02:13,090 --> 00:02:16,440 I've really styled them to make them something a little more original. 43 00:02:16,440 --> 00:02:21,430 So I put in a height of how high I want each one of my links to be. 44 00:02:21,430 --> 00:02:23,520 And then I put in a little bit of a trick and 45 00:02:23,520 --> 00:02:26,650 I said I want the line height to be 45 pixels. 46 00:02:26,650 --> 00:02:27,940 So why would I do that? 47 00:02:28,950 --> 00:02:33,280 The reason would be I want to center home photos or 48 00:02:33,280 --> 00:02:36,860 I want to center the words within it and this is how I can do it. 49 00:02:36,860 --> 00:02:40,265 The next kind of cool thing I've done is I've added a background image. 50 00:02:40,265 --> 00:02:42,400 I added these little arrows. 51 00:02:42,400 --> 00:02:46,480 And the cool thing that I had to do that I want to really point out to you is 52 00:02:46,480 --> 00:02:50,460 I couldn't just link to the folder and then the file. 53 00:02:50,460 --> 00:02:56,450 Because of the way I set up my code, first I need to say, oh, I know I'm in the CSS 54 00:02:56,450 --> 00:03:01,280 folder right now, so I'm going to go back up to my main folder and then find images. 55 00:03:01,280 --> 00:03:03,588 If this is confusing for you, don't worry. 56 00:03:03,588 --> 00:03:06,710 It's a brand-new concept, but it's something that a lot of you are going to 57 00:03:06,710 --> 00:03:10,810 run into as you try to link images from your style sheet. 58 00:03:10,810 --> 00:03:11,390 All right. 59 00:03:11,390 --> 00:03:15,640 The last thing I did was just add in a little padding, so there's room for 60 00:03:15,640 --> 00:03:18,310 the picture, and then add some margin. 61 00:03:18,310 --> 00:03:23,615 So using these different things we've already talked about, position, sorry, 62 00:03:23,615 --> 00:03:28,285 display, line height, background URLs, we were able to make something 63 00:03:28,285 --> 00:03:32,885 that I think looks really cool for a simple, vertical navigation bar. 64 00:03:32,885 --> 00:03:34,175 Go ahead and try it. 65 00:03:34,175 --> 00:03:34,675 Good luck.