1
00:00:08,889 --> 00:00:09,650
Hi, everyone.

2
00:00:09,650 --> 00:00:12,270
Welcome back to another code review.

3
00:00:12,270 --> 00:00:16,768
Earlier, I created a navigation
bar that worked vertically.

4
00:00:16,768 --> 00:00:17,770
It went up and down.

5
00:00:17,770 --> 00:00:22,260
Today, I just want to show you how
you can use the same HTML code but

6
00:00:22,260 --> 00:00:25,500
create a horizontal navigation bar,
instead.

7
00:00:25,500 --> 00:00:26,860
So, let's take a look.

8
00:00:26,860 --> 00:00:29,760
I want to go to something that
looks a little bit more like this.

9
00:00:29,760 --> 00:00:34,540
And, not only have I gone to a horizontal
navigation bar, I want to show you

10
00:00:34,540 --> 00:00:39,050
an example of showing which page is
the one we're currently looking at.

11
00:00:39,050 --> 00:00:41,220
So, if you notice, in the navigation bar,

12
00:00:41,220 --> 00:00:44,740
the photos link looks a little
bit different from the others.

13
00:00:44,740 --> 00:00:48,230
It's very common to do this
to kinda indicate to people

14
00:00:48,230 --> 00:00:51,130
this is the page that you're
looking at right now.

15
00:00:51,130 --> 00:00:55,710
So let's take a look at the CSS and
see how I've taken plain HTML and

16
00:00:55,710 --> 00:00:59,070
turned it into something where I
have a nicely styled navigation bar.

17
00:01:02,082 --> 00:01:05,220
All right, we start off by saying,
you know what?

18
00:01:05,220 --> 00:01:09,270
We want to style all the links
that are in the navigation bar.

19
00:01:09,270 --> 00:01:12,208
I don't want to style all the links,
instead,

20
00:01:12,208 --> 00:01:15,525
I want to indicate just
the links that are inside nav.

21
00:01:15,525 --> 00:01:20,082
And once we do that, it was fairly simple
for me to go ahead and put in that I want

22
00:01:20,082 --> 00:01:24,668
a certain height, a certain background
color, a certain text decoration.

23
00:01:24,668 --> 00:01:28,320
One of the things I added
here is a border radius.

24
00:01:28,320 --> 00:01:30,700
Border radius curves the boxes, so

25
00:01:30,700 --> 00:01:34,840
if you look, everything's a little
bit curved over here along the side.

26
00:01:34,840 --> 00:01:37,000
Nothing too important right there.

27
00:01:37,000 --> 00:01:38,270
The next thing I have,

28
00:01:38,270 --> 00:01:43,060
the new one, is this idea of
having a class called current.

29
00:01:43,060 --> 00:01:46,989
What the current class does,
is it basically is a way of tagging.

30
00:01:46,989 --> 00:01:51,600
Hey, you know all the different
links that are on my page?

31
00:01:51,600 --> 00:01:54,597
I wanna show you which one
I'm looking at right now.

32
00:01:54,597 --> 00:01:56,940
And all I did here was I went and
I set it so

33
00:01:56,940 --> 00:02:00,390
that I have a different background color.

34
00:02:00,390 --> 00:02:00,990
All right.

35
00:02:00,990 --> 00:02:05,460
So, it was fairly straightforward
to create this horizontal

36
00:02:05,460 --> 00:02:10,680
navigation bar as long as you're very
careful about spacing things out.

37
00:02:10,680 --> 00:02:14,500
So once again, I just wanna show
you that things like padding and

38
00:02:14,500 --> 00:02:17,970
margin are very important and
they're very additive.

39
00:02:17,970 --> 00:02:22,830
So, when you use percents, instead of
pixels, it's going to keep it from being

40
00:02:22,830 --> 00:02:27,280
that it looks fine on a big screen and
then really bad on a small screen.

41
00:02:27,280 --> 00:02:30,210
The last thing, I kind of put in
here just to have some fun and

42
00:02:30,210 --> 00:02:34,270
to help show you again some of
the different things you can do with CSS,

43
00:02:34,270 --> 00:02:38,220
is I added a hover state for
any of my navigation links.

44
00:02:38,220 --> 00:02:40,250
So if you take a look,
I've gone in here and

45
00:02:40,250 --> 00:02:45,330
I've said when somebody hovers over the
page, I wanna change the color of the text

46
00:02:45,330 --> 00:02:47,960
and I wanna get rid of that
whole border radius thing.

47
00:02:47,960 --> 00:02:48,690
So let's take a look.

48
00:02:50,060 --> 00:02:52,770
Go over here,
I'm gonna hover over recipes and

49
00:02:52,770 --> 00:02:57,520
the text is turned from white to black,
and it's gone from circle to square.

50
00:02:57,520 --> 00:03:01,590
Now again, as I go over all these
different examples with you, it's really

51
00:03:01,590 --> 00:03:05,670
important that you realize, I am not
an artist, and I am not very artistic.

52
00:03:05,670 --> 00:03:08,770
And I'm hoping that you can
take these snippets of code and

53
00:03:08,770 --> 00:03:12,030
turn it into something that looks
really great and customized for

54
00:03:12,030 --> 00:03:14,530
the page that you are trying to create.

55
00:03:14,530 --> 00:03:18,900
So go ahead, have some fun, and
now try to make a navigation bar

56
00:03:18,900 --> 00:03:24,080
that goes in all different ways, up and
down, sideways, or even combinations.

57
00:03:24,080 --> 00:03:24,580
Good luck.