1
00:00:01,380 --> 00:00:02,010
Welcome back.

2
00:00:02,580 --> 00:00:03,730
How was the exercise?

3
00:00:03,930 --> 00:00:10,920
Hopefully it wasn't too difficult, but if it was and you weren't able to finish it, don't worry,

4
00:00:10,920 --> 00:00:12,360
we're going to go over the steps.

5
00:00:12,510 --> 00:00:19,050
And luckily for you, once we do this, you'll have a template that you can use for all your websites,

6
00:00:19,590 --> 00:00:24,900
because what we'll build will be something responsive that you can customize to your own liking.

7
00:00:25,170 --> 00:00:31,830
But you'll at least know the best practices after this video of how to do these common patterns that

8
00:00:31,830 --> 00:00:33,390
we see in a lot of websites.

9
00:00:33,990 --> 00:00:35,210
So let's get started.

10
00:00:36,000 --> 00:00:40,880
The first thing I want to do to convert this page is, well, a few things.

11
00:00:41,070 --> 00:00:46,410
Let's go to the page first and let's start off with the navigation.

12
00:00:46,740 --> 00:00:49,490
That is the header over here.

13
00:00:49,530 --> 00:00:52,460
A lot of websites have some sort of a header of the top.

14
00:00:52,920 --> 00:00:58,830
The first thing I want to do is to actually use semantic HTML and be more descriptive in what we are

15
00:00:59,100 --> 00:00:59,510
doing.

16
00:00:59,850 --> 00:01:06,270
So in our case, instead of DIV, I'm going to use the NAV element and this is something that we've

17
00:01:06,270 --> 00:01:07,110
already talked about.

18
00:01:08,040 --> 00:01:10,290
And instead of just having heter here.

19
00:01:12,080 --> 00:01:20,660
I'm going to have a ULE class or ULE element that will have a class name of Main.

20
00:01:23,670 --> 00:01:27,570
And then here we can just have elai elements.

21
00:01:29,460 --> 00:01:31,950
That will have an anchor tag.

22
00:01:33,450 --> 00:01:38,910
And because we don't really have we won't have any links for this example, we can obviously do whatever

23
00:01:39,600 --> 00:01:43,670
new HTML page that we want to reference, but for now, we can just leave it blank.

24
00:01:44,520 --> 00:01:51,530
So the first one will just be about and we can copy and paste this for the other items as well.

25
00:01:53,620 --> 00:01:56,200
We'll have, let's just say, products.

26
00:01:58,080 --> 00:01:59,970
We'll say our team.

27
00:02:02,480 --> 00:02:03,770
And then finally.

28
00:02:05,050 --> 00:02:07,120
We'll have contact.

29
00:02:08,680 --> 00:02:15,510
If I save this and refresh, there's our navigation doesn't look very good, does it, in real life?

30
00:02:15,520 --> 00:02:23,110
Most of the time we see the navigation at the top and sometimes we also see that there's navigation

31
00:02:23,110 --> 00:02:28,560
links at the top and one all the way to the right that's pushed to the right edge, such as contacts.

32
00:02:29,470 --> 00:02:35,770
So let's try and do that where we have about products in our team at the top over here and then contacts

33
00:02:35,770 --> 00:02:38,050
all the way to the right at the very edge.

34
00:02:38,920 --> 00:02:45,400
So for that, we can create a new class of the very last item that we want to, let's say, push, and

35
00:02:45,400 --> 00:02:47,800
we'll add the six classes now.

36
00:02:48,930 --> 00:02:53,130
If I go to ah, let's save this first, if I go to style CSFs.

37
00:02:55,310 --> 00:02:56,480
We can create our.

38
00:02:57,670 --> 00:02:58,780
Navigation here now.

39
00:03:02,960 --> 00:03:10,520
We have the main NAV class, which we've created, and in here we want to use flex box, so I'm going

40
00:03:10,520 --> 00:03:14,840
to say display flex to activate flex box.

41
00:03:15,230 --> 00:03:15,800
Sounds cool.

42
00:03:15,800 --> 00:03:22,730
When I say activate flex spots, I want to make sure I remove these little dots in front of the name

43
00:03:22,730 --> 00:03:29,600
so I can just say list style none, which will remove these little pointers.

44
00:03:30,110 --> 00:03:37,110
And let's say that we want the font size to be, let's say, zero point seven.

45
00:03:37,250 --> 00:03:37,730
Yeah.

46
00:03:38,860 --> 00:03:40,840
I save and refresh here.

47
00:03:41,820 --> 00:03:49,830
All right, things are a little bit better, but still not a perfect one is we want to remove any margins.

48
00:03:50,010 --> 00:03:52,470
So I'm going to say margin.

49
00:03:55,280 --> 00:04:02,390
If I refresh, all right, we remove some margins, but still not pretty, we want to perhaps add some

50
00:04:02,390 --> 00:04:03,910
spaces in between these things.

51
00:04:04,980 --> 00:04:11,640
I'm going to just have the fly class, which is our navigation items, and I'll just say that we want

52
00:04:11,640 --> 00:04:14,990
the padding to be 20 pixels, I refresh.

53
00:04:15,630 --> 00:04:16,620
That's a lot better.

54
00:04:16,800 --> 00:04:17,250
OK.

55
00:04:18,260 --> 00:04:25,130
And just to clean things up, let's say that our anchor tags, we also want them to be able to have

56
00:04:25,130 --> 00:04:25,880
a color.

57
00:04:27,100 --> 00:04:37,720
Of let's just use a five, five, five, six, five refresh, it's nice and whiteish that looks good

58
00:04:38,350 --> 00:04:39,940
and we don't want those underlying.

59
00:04:39,940 --> 00:04:41,260
So I'm going to say text.

60
00:04:42,640 --> 00:04:44,230
Decoration, not.

61
00:04:45,400 --> 00:04:54,610
Refresh all good now, because I want to start structuring this as a natural Web page, I'm going to

62
00:04:55,240 --> 00:05:03,220
go to our zone class and just remove our padding and margin because we don't really need a refresher.

63
00:05:04,300 --> 00:05:10,690
Things are going to start looking ugly, but at least we've moved all this white space and then finally

64
00:05:11,110 --> 00:05:14,710
our display, we're no longer going to use in line block.

65
00:05:15,160 --> 00:05:18,480
We want to start using our flex box or Scribd.

66
00:05:18,550 --> 00:05:22,150
In our case, our main nav is going to have flex display.

67
00:05:22,450 --> 00:05:24,760
So we don't need our inline block anymore.

68
00:05:25,190 --> 00:05:26,680
We're going to save and refresh.

69
00:05:27,280 --> 00:05:31,930
And that's a lot better because devs are automatically blocked.

70
00:05:32,590 --> 00:05:37,150
Our displays for these bottom ones are now going to just be blocks.

71
00:05:37,450 --> 00:05:42,340
But our top one, our neighbor has flex now, which is great.

72
00:05:43,860 --> 00:05:50,370
But you'll notice here we have a bit of a white gap, and this is very common when you're working with

73
00:05:50,370 --> 00:05:56,010
success, sometimes browser's by default have some sort of success attached to them.

74
00:05:57,100 --> 00:06:00,760
In this case, in Google Chrome are.

75
00:06:01,950 --> 00:06:10,830
Body element already has some predefined excess classes that are pre-built by Chrom, so we can actually

76
00:06:10,830 --> 00:06:18,480
remove those and make sure that our margins are zero by saying margin auto zero.

77
00:06:18,600 --> 00:06:20,550
And this is something I'll make sure I spell that right.

78
00:06:20,850 --> 00:06:26,580
This is something that you'll see a lot of and you'll do a lot of when it comes to just making sure

79
00:06:26,580 --> 00:06:30,700
that the styles or at least the margins are correct when you start off.

80
00:06:31,170 --> 00:06:33,740
So if I refresh here, look at that.

81
00:06:33,900 --> 00:06:37,650
Margins are gone and everything is filled on the page, which is great.

82
00:06:38,580 --> 00:06:42,850
The last thing I want to do is to move contacts all the way up to the right.

83
00:06:44,010 --> 00:06:46,890
And remember the push class that we added?

84
00:06:47,250 --> 00:06:49,830
Well, that's going to be super easy to do.

85
00:06:50,340 --> 00:06:52,470
All we need to do is to add a.

86
00:06:53,970 --> 00:06:58,920
Push CSFs class that says margin left.

87
00:06:59,750 --> 00:07:01,220
To be Otto.

88
00:07:03,460 --> 00:07:06,220
And with this auto, if I refresh.

89
00:07:07,440 --> 00:07:13,920
Contacts goes all the way to the right if I inspect this element, so I just right click and click on

90
00:07:13,920 --> 00:07:17,700
inspect and let's make this a little bit bigger so we can see.

91
00:07:19,280 --> 00:07:22,040
If I hover over Elai pushier.

92
00:07:23,390 --> 00:07:30,860
We see that each allied element has its own box, but because we did margin left Otto.

93
00:07:32,010 --> 00:07:38,040
Our ally element, it's going to get automatically pushed because it has this automatic margin that

94
00:07:38,040 --> 00:07:41,670
it creates to the very end, if I did margin right.

95
00:07:41,670 --> 00:07:43,530
For example, and I refresh here.

96
00:07:46,660 --> 00:07:52,570
Our margin would now actually be all the way to the right to fill up the entire width of the viewport.

97
00:07:54,620 --> 00:07:56,810
But let's go back to left, oops.

98
00:07:57,070 --> 00:08:00,050
Let's go back to left safe and refresh here.

99
00:08:00,500 --> 00:08:09,530
The neat part about this is that with this margin left auto, I can now resize our page and you'll see

100
00:08:09,530 --> 00:08:12,540
that contact is always going to be to our right.

101
00:08:13,070 --> 00:08:15,410
This is something that you'll see in a lot of websites.

102
00:08:15,410 --> 00:08:17,440
And we did that fairly fast.

103
00:08:17,870 --> 00:08:18,690
Not too bad, right?

104
00:08:19,550 --> 00:08:26,480
The last thing that I want to fix here is as will notice, as we get closer and closer, it kind of

105
00:08:26,480 --> 00:08:28,100
overlaps our team.

106
00:08:28,100 --> 00:08:33,410
And well, now we have this weird little context that overflows.

107
00:08:33,650 --> 00:08:34,760
How can we fix this?

108
00:08:35,340 --> 00:08:36,790
Let's tackle that in the next video.