1
00:00:06,320 --> 00:00:07,370
In this video.

2
00:00:07,370 --> 00:00:09,800
Let's work on the layout.

3
00:00:09,800 --> 00:00:12,800
So we are going to design for mobile first.

4
00:00:12,800 --> 00:00:18,050
So let's go ahead and then reduce the browser size to something like this.

5
00:00:18,140 --> 00:00:22,130
And if you scroll, you can see that everything has been skirted.

6
00:00:22,130 --> 00:00:25,580
So let's get started inside the CSS.

7
00:00:25,580 --> 00:00:29,600
We are going to add a global style to all the images.

8
00:00:29,720 --> 00:00:38,570
So inside the CSS, before we continue the layout, let's come up here for the global CSS and let's

9
00:00:38,570 --> 00:00:41,660
add the property called image.

10
00:00:41,660 --> 00:00:48,560
And for the image you want to have a width of 100%, meaning that it should fit to it container.

11
00:00:48,560 --> 00:00:50,750
So with this one now have a look.

12
00:00:50,780 --> 00:00:56,150
You can see that everything has been fixed inside a container on last grain.

13
00:00:56,150 --> 00:01:00,650
You can see that everything is perfectly fit inside a container.

14
00:01:00,650 --> 00:01:02,240
That is it about that.

15
00:01:02,390 --> 00:01:06,770
So let's go ahead and then work on the layout and so on.

16
00:01:06,770 --> 00:01:11,930
Mobile, this is what we want, but we can add some starting to it to make it more beautiful.

17
00:01:11,930 --> 00:01:14,060
So how are we going to style it?

18
00:01:14,060 --> 00:01:22,700
So after the header here or before the media query, let's add a comment and call this one as the layout.

19
00:01:24,950 --> 00:01:32,900
So first step is less target the flex container, which is this because this container wrapped the main

20
00:01:32,900 --> 00:01:34,100
and then the sidebar.

21
00:01:34,100 --> 00:01:35,850
So let me collapse the sidebar.

22
00:01:35,870 --> 00:01:44,180
Now we have two elements or two children inside the main, so I can control this one by using this flex

23
00:01:44,180 --> 00:01:45,370
on the container.

24
00:01:45,380 --> 00:01:49,910
So back to the CSS, let's see how we are going to add that.

25
00:01:49,910 --> 00:01:51,290
So here we go.

26
00:01:51,290 --> 00:02:00,950
So the container flex, that flex and let's give it display as flex.

27
00:02:01,280 --> 00:02:08,070
And then the maximum weight for that one is going to be 1900 x.

28
00:02:08,120 --> 00:02:09,800
So have a look.

29
00:02:09,800 --> 00:02:15,170
And now this is what we have, but we want them to be on top of each other.

30
00:02:15,170 --> 00:02:21,200
So we're going to use flex direction to column because by default it is row two.

31
00:02:21,200 --> 00:02:23,630
Now this is what we have.

32
00:02:23,750 --> 00:02:31,790
The next step is that we can align everything at the center using this property zero and then the order.

33
00:02:31,850 --> 00:02:34,520
So this one also get the job done.

34
00:02:34,520 --> 00:02:37,820
So now we are done with the parent container.

35
00:02:38,090 --> 00:02:45,920
So let's add a background color to the container as hash tag F even though we have it.

36
00:02:45,920 --> 00:02:47,870
But let's bring it here also.

37
00:02:48,770 --> 00:02:49,400
Okay, good.

38
00:02:49,400 --> 00:02:51,560
So now this is what we have.

39
00:02:51,590 --> 00:02:52,190
Great.

40
00:02:52,220 --> 00:02:57,140
The next step is let's work on the main, which is this one.

41
00:02:57,230 --> 00:02:59,780
And so let's target the main.

42
00:02:59,780 --> 00:03:07,280
So after the container, let's target the main and let's I'm going to do let's give it a pattern of

43
00:03:07,280 --> 00:03:09,320
ten works with this one.

44
00:03:09,320 --> 00:03:10,250
Let's have a look.

45
00:03:10,250 --> 00:03:13,970
You can see that we have some padding around the main.

46
00:03:13,970 --> 00:03:18,530
But for the sidebar, no, but we come back to it, which is this one.

47
00:03:18,530 --> 00:03:23,480
So the next step is that let's add some padding to the post contents.

48
00:03:23,480 --> 00:03:25,400
And this is a post content.

49
00:03:25,400 --> 00:03:27,080
It's supposed to be post here.

50
00:03:27,080 --> 00:03:34,760
So we guys so have to change inside the site here to to post, which is this one.

51
00:03:35,810 --> 00:03:36,620
Okay, good.

52
00:03:36,620 --> 00:03:38,870
So let's target that one too.

53
00:03:38,900 --> 00:03:48,590
So we inside the CSS, let's go ahead and select the post dash content and then let's give it padding

54
00:03:48,620 --> 00:03:52,190
also to be ten, let's save it.

55
00:03:52,190 --> 00:03:53,810
And now let's check it out.

56
00:03:53,810 --> 00:03:55,580
And this is what we have.

57
00:03:55,820 --> 00:04:02,330
The next step is that let's go ahead and then style the post info that is this one.

58
00:04:02,450 --> 00:04:06,230
So inside the CSS, let's get that one done.

59
00:04:06,250 --> 00:04:09,080
Going to be as post dash info.

60
00:04:15,520 --> 00:04:26,110
Give it display flex and then just file contain to be flex start and then align items to be center.

61
00:04:26,200 --> 00:04:27,370
Let's save it.

62
00:04:27,370 --> 00:04:29,090
And now let's check it out.

63
00:04:29,110 --> 00:04:30,700
This is what we have.

64
00:04:30,730 --> 00:04:33,670
Let's have some spacing between this one and that.

65
00:04:33,670 --> 00:04:37,960
Remember, this is the author and this is the date about the post.

66
00:04:37,960 --> 00:04:40,930
So we can target the post dot author.

67
00:04:42,010 --> 00:04:42,760
Posts.

68
00:04:43,860 --> 00:04:45,480
Dash author.

69
00:04:46,550 --> 00:04:50,910
And for this, let's give it a margin of ten parsecs.

70
00:04:51,410 --> 00:04:52,940
So let's have a look.

71
00:04:53,030 --> 00:04:56,830
And indeed, we have some space in between them.

72
00:04:56,840 --> 00:05:01,050
But let's change the colour for this one to let's a grey colour.

73
00:05:01,070 --> 00:05:06,110
So a colour here is going to be as grey colour.

74
00:05:09,050 --> 00:05:11,900
Now this one looks good for my likeness.

75
00:05:11,900 --> 00:05:14,360
So the next step is less tile.

76
00:05:14,390 --> 00:05:20,480
The h one here so we can target the post content and then the h one.

77
00:05:20,480 --> 00:05:22,880
So here we go.

78
00:05:23,230 --> 00:05:28,010
Going to be as dot post content and then we target the h one.

79
00:05:28,340 --> 00:05:40,280
So for this one, let's give it a font size of 2.8 ram and then the font weight to be bold and then

80
00:05:40,280 --> 00:05:41,660
margin button.

81
00:05:42,740 --> 00:05:44,780
To be $20.

82
00:05:44,780 --> 00:05:55,130
And then the color for the H one is going to be hashtag 14213 dx save it.

83
00:05:55,130 --> 00:05:56,680
And now let's have a look.

84
00:05:56,690 --> 00:06:00,680
And this is what we have as compared to the final one.

85
00:06:00,920 --> 00:06:01,560
Great.

86
00:06:01,610 --> 00:06:06,680
So the next step is let's work on the other side, which is this one?

87
00:06:07,340 --> 00:06:08,090
This one.

88
00:06:08,240 --> 00:06:09,160
The side bar.

89
00:06:09,170 --> 00:06:11,000
So let's target that one also.

90
00:06:11,030 --> 00:06:12,710
So here we go.

91
00:06:12,800 --> 00:06:20,190
We bring in the side and let's give it a pattern of ten P6.

92
00:06:20,420 --> 00:06:21,760
Let's see.

93
00:06:21,770 --> 00:06:26,540
And you can see that everything is aligned perfectly on mobile.

94
00:06:26,690 --> 00:06:31,150
So let's work on the about main, which is this one.

95
00:06:31,160 --> 00:06:34,060
So let's go ahead and then select that.

96
00:06:34,070 --> 00:06:42,260
So if you check the structure of the HTML, we have a class called about me and in there we are going

97
00:06:42,260 --> 00:06:44,990
to add some border radius and some padding to it.

98
00:06:44,990 --> 00:06:46,850
So let's get started.

99
00:06:46,880 --> 00:06:54,530
Let's give it a pattern of ten pixels and test align to be center and let's give it some box shadow

100
00:06:54,560 --> 00:06:56,480
around that container.

101
00:06:56,480 --> 00:06:57,800
So here we go.

102
00:06:57,830 --> 00:07:04,490
Box Shadow is going to be our zero P6 one pesos and then one pesos.

103
00:07:04,520 --> 00:07:07,790
The color going to be the RGV zero zero.

104
00:07:07,790 --> 00:07:11,910
And then the opacity is going to be 0.3.

105
00:07:11,930 --> 00:07:12,830
Save it.

106
00:07:12,830 --> 00:07:14,150
And now let's see.

107
00:07:14,150 --> 00:07:16,490
And this is what I'm referring to.

108
00:07:16,520 --> 00:07:21,200
And you can see that we have some box shadow around the container.

109
00:07:21,380 --> 00:07:21,950
Good.

110
00:07:22,190 --> 00:07:27,970
So next step is that let's make the avatar of the author to circle.

111
00:07:27,980 --> 00:07:33,650
So let's see the location of the image of the author inside the HTML.

112
00:07:33,680 --> 00:07:37,400
So for the sidebar, this is the author, right?

113
00:07:37,400 --> 00:07:45,260
So we can target the above me and then the image here, or we can give it a specific class to target

114
00:07:45,260 --> 00:07:48,110
that thing about me and IMG.

115
00:07:48,140 --> 00:07:50,170
We will get the job done also.

116
00:07:50,180 --> 00:08:00,140
So here we go, dot about me and then the IMG and let's give it a weight of 100 pixels and then the

117
00:08:00,140 --> 00:08:07,820
height of $100 and let's give it border radius to be 50 so that it would be a circle.

118
00:08:08,000 --> 00:08:09,350
So save it.

119
00:08:09,350 --> 00:08:11,360
And now let's have a look.

120
00:08:11,360 --> 00:08:19,460
And indeed, this is what we have and we can put them at the center by making this of margin zero or

121
00:08:19,460 --> 00:08:19,880
two.

122
00:08:19,970 --> 00:08:21,860
So I think everything remains the same.

123
00:08:21,860 --> 00:08:24,920
So now everything is perfectly aligned as that.

124
00:08:24,920 --> 00:08:30,020
So we can see that on mobile we are done with the implementation, right?

125
00:08:30,320 --> 00:08:31,310
We are done with it.

126
00:08:31,340 --> 00:08:32,870
So what has left?

127
00:08:32,870 --> 00:08:36,200
Can I be the responsiveness on desktop?

128
00:08:36,200 --> 00:08:37,010
On desktop?

129
00:08:37,010 --> 00:08:40,070
That's where I will divide the layout into two.

130
00:08:40,100 --> 00:08:43,220
One is for the main and one is for the side.

131
00:08:43,220 --> 00:08:46,310
So let's get into that in the next video.