1
00:00:00,840 --> 00:00:01,530
Hello, everyone.

2
00:00:01,830 --> 00:00:02,550
Welcome back.

3
00:00:03,690 --> 00:00:10,270
In today's video, we will learn how to modify an item related properties to design complex levels.

4
00:00:11,060 --> 00:00:16,830
Say you have to design this layout so you've got a header site run on the left.

5
00:00:17,010 --> 00:00:22,770
On the right, a space for some are in the same dose and space for the main content.

6
00:00:22,860 --> 00:00:26,520
And at the bottom of footprint, I'm on tablet screens.

7
00:00:27,220 --> 00:00:28,560
This right odd section.

8
00:00:28,560 --> 00:00:30,840
If it goes below you mean and menu.

9
00:00:32,030 --> 00:00:36,320
On mobile screens, even the main component comes in the next line, often menu.

10
00:00:36,890 --> 00:00:40,730
So, as you can see, it is very responsive, loud on different screen sizes.

11
00:00:41,630 --> 00:00:43,040
It renders differently.

12
00:00:43,340 --> 00:00:45,370
So let's try creating this right now.

13
00:00:45,410 --> 00:00:51,680
What we have is we have these a couple of divisions with different colors and which represent different

14
00:00:52,190 --> 00:00:56,030
part of our with each one working with complex levels.

15
00:00:56,570 --> 00:01:03,140
The best way is to split your screen with in2 twelve columns or six columns based on the different number

16
00:01:03,140 --> 00:01:04,760
of components inside your depth.

17
00:01:05,740 --> 00:01:13,660
So if you see here, we've got a one, two, three toes and one, two, three columns.

18
00:01:14,260 --> 00:01:15,910
So I guess we can go with six.

19
00:01:16,570 --> 00:01:17,920
We can go with three orderlies.

20
00:01:17,980 --> 00:01:23,980
Giving this extra weight to some confidence and giving a smaller leg to some comments would be difficult.

21
00:01:24,730 --> 00:01:26,830
So going with takes makes more sense.

22
00:01:27,520 --> 00:01:32,260
So what we're looking at is six columns on Titos inside the green.

23
00:01:33,350 --> 00:01:33,590
All right.

24
00:01:34,370 --> 00:01:35,380
So coming back here.

25
00:01:36,560 --> 00:01:37,590
All right, let's begin.

26
00:01:37,610 --> 00:01:39,190
Let's bring about good and do.

27
00:01:40,660 --> 00:01:46,290
And as you can see here, this division of drugs, all her other competence, and it has got an I.D.

28
00:01:46,290 --> 00:01:47,300
grid container.

29
00:01:47,640 --> 00:01:48,830
So let's add some Stine's.

30
00:01:50,350 --> 00:01:51,890
So harsh, good.

31
00:01:52,160 --> 00:01:55,850
And Dana, let's start making a display grid.

32
00:01:56,240 --> 00:01:57,710
So this big grid.

33
00:01:59,120 --> 00:02:06,120
And now to design the structure of entire now great delight us with a property called grid template

34
00:02:06,240 --> 00:02:06,870
areas.

35
00:02:07,590 --> 00:02:14,340
So here you can specify the exact number of tools and qualities which competence with Occupy Michal's

36
00:02:14,340 --> 00:02:15,150
and columns.

37
00:02:16,430 --> 00:02:17,480
So let's say.

38
00:02:19,410 --> 00:02:21,180
Grid template areas.

39
00:02:23,400 --> 00:02:30,800
And before we could specify rows and columns, we have to give names to all of these components.

40
00:02:31,230 --> 00:02:34,860
So for that, it gives us another property called grid area.

41
00:02:36,920 --> 00:02:37,520
So let's see.

42
00:02:37,630 --> 00:02:38,520
This is headers.

43
00:02:39,590 --> 00:02:40,100
Header.

44
00:02:42,010 --> 00:02:42,840
Similarly.

45
00:02:45,700 --> 00:02:46,640
Well, that's good.

46
00:02:47,020 --> 00:02:49,230
See sidebar.

47
00:02:53,720 --> 00:02:59,740
For this to be good, call it mean similarly for a sighted.

48
00:03:02,270 --> 00:03:03,200
We could call it.

49
00:03:04,460 --> 00:03:04,830
So.

50
00:03:07,360 --> 00:03:09,900
Until further, we can call it Futter.

51
00:03:12,610 --> 00:03:17,290
So not coming here, so to define how many columns are going to come in a row.

52
00:03:17,980 --> 00:03:19,590
We have to define six to eight, right.

53
00:03:19,750 --> 00:03:23,530
So that tells our grid that we're looking at six columns.

54
00:03:24,310 --> 00:03:27,930
So let's say on the dot, we want all the six to be given by hand.

55
00:03:28,810 --> 00:03:30,850
So we could do something like this.

56
00:03:36,170 --> 00:03:38,540
So do the specified eight or six times.

57
00:03:38,900 --> 00:03:44,600
So what this does is it's going to give them dire first header.

58
00:03:46,040 --> 00:03:47,150
Let's bring it down here.

59
00:03:49,370 --> 00:03:51,800
Now, if you see here.

60
00:03:52,720 --> 00:03:59,840
So now what we want to do is we want to have this menu on the left, on this side, on the right and

61
00:03:59,840 --> 00:04:01,290
the guandong in the middle.

62
00:04:03,400 --> 00:04:05,170
So first we get a menu.

63
00:04:07,550 --> 00:04:16,260
Then at the end, we can have a sign in between, we can out all the mean so we can put forward mean

64
00:04:16,280 --> 00:04:16,870
guidance.

65
00:04:18,020 --> 00:04:21,730
And after that, we'll just have a footnote and one deputy then Dyer.

66
00:04:22,540 --> 00:04:26,500
So a guy just like Heather, you could do like this.

67
00:04:32,170 --> 00:04:34,450
Let's say we're coming back here.

68
00:04:35,460 --> 00:04:35,800
All right.

69
00:04:35,830 --> 00:04:37,300
So it's not working.

70
00:04:37,360 --> 00:04:38,830
Let's see what's the issue here.

71
00:04:40,890 --> 00:04:41,120
OK.

72
00:04:41,280 --> 00:04:42,350
This looks fun.

73
00:04:44,380 --> 00:04:45,300
You all right?

74
00:04:45,330 --> 00:04:46,440
So the problem is.

75
00:04:47,380 --> 00:04:52,840
For this credit area, it's given some spring rowlings, which doesn't accepters.

76
00:04:53,690 --> 00:04:58,220
So we don't need to double go to signal goods to our area names.

77
00:04:58,340 --> 00:05:03,690
We could simply give it a value see header or sidebar without dropping them.

78
00:05:03,690 --> 00:05:05,300
And it's in the order of goods.

79
00:05:07,070 --> 00:05:08,900
Sir, remove all this.

80
00:05:09,640 --> 00:05:10,450
And we save it.

81
00:05:12,070 --> 00:05:17,710
We see our grid is just not the menu item as outsiders to see what's the issue here.

82
00:05:18,800 --> 00:05:23,960
So for many, though, we'll do a sidebar and give you a good many of you.

83
00:05:24,080 --> 00:05:26,280
So let's just update the rally.

84
00:05:26,810 --> 00:05:34,190
So coming back, as you can see, we've got the header than many on the left, me in the middle.

85
00:05:34,610 --> 00:05:36,970
On the right hand side, you've got a light on.

86
00:05:37,070 --> 00:05:38,700
At the bottom, you've got four do.

87
00:05:39,210 --> 00:05:39,500
All right.

88
00:05:40,250 --> 00:05:43,670
Now, if we open this on a DOBs screen.

89
00:05:44,690 --> 00:05:45,930
So like this.

90
00:05:46,100 --> 00:05:46,340
That's.

91
00:05:46,620 --> 00:05:51,620
But it still is showing the motion that we had on this dome.

92
00:05:53,060 --> 00:05:55,220
Not change if we can add some mediocrities.

93
00:05:56,050 --> 00:06:02,700
So let's see at the media marks where, say, 900 pixel.

94
00:06:04,830 --> 00:06:08,850
And all we have to do is just a bit this grid template.

95
00:06:09,130 --> 00:06:09,450
US.

96
00:06:10,500 --> 00:06:19,320
So as you can see here on the tablet screen, the right or the outside element is below me, Mindy.

97
00:06:20,400 --> 00:06:21,590
So we could do that.

98
00:06:23,480 --> 00:06:26,930
So instead of waiting outside of there, you can give.

99
00:06:28,590 --> 00:06:30,080
And others will do aside.

100
00:06:33,570 --> 00:06:34,850
Three, four, five.

101
00:06:36,510 --> 00:06:40,830
And we've got given all the columns to a site for the screw on.

102
00:06:40,960 --> 00:06:42,850
We have to increase one for me.

103
00:06:43,280 --> 00:06:44,420
You save it.

104
00:06:45,410 --> 00:06:46,350
And coming back.

105
00:06:48,440 --> 00:06:52,730
And as you can see, we've got many and on the right hand side, you've got me.

106
00:06:54,010 --> 00:06:54,290
All right.

107
00:06:55,920 --> 00:06:58,600
Similarly for small mobile screens.

108
00:06:58,650 --> 00:07:01,970
What we want is this main tool to win the next group.

109
00:07:02,760 --> 00:07:04,670
So for now, we can have another redecorated.

110
00:07:05,130 --> 00:07:06,190
So that's what it is.

111
00:07:07,080 --> 00:07:09,330
So, Max, with could be 400 pixels.

112
00:07:09,420 --> 00:07:11,460
We're talking about small screen sizes.

113
00:07:13,750 --> 00:07:20,130
So in this case, we can just give back Diana to me and add another rule before it for the sidebar.

114
00:07:29,040 --> 00:07:31,090
Let's say the oncoming UCU.

115
00:07:31,750 --> 00:07:34,790
And now, as you can see, you've got to head to the mini main.

116
00:07:34,980 --> 00:07:36,390
Right on foot.

117
00:07:36,910 --> 00:07:39,190
All studd below each other.

118
00:07:40,080 --> 00:07:42,670
If I change the screen size and it's a iPod.

119
00:07:43,500 --> 00:07:44,400
It changes.

120
00:07:44,460 --> 00:07:47,780
Or if you just move it, it goes back to the desktop oge.

121
00:07:48,210 --> 00:07:53,390
So as you can see, this is a pretty low response of the beach or different screen sizes or trying different

122
00:07:53,400 --> 00:07:56,070
components at different positions.

123
00:07:56,550 --> 00:07:58,860
Now, this this might not seem like much.

124
00:07:59,040 --> 00:08:00,840
So this is just the structure of it.

125
00:08:01,070 --> 00:08:07,060
It's instead of this head or you can argue in Dyatlov lover of the design, Delbar, on the left hand

126
00:08:07,060 --> 00:08:08,960
side at the place of the side.

127
00:08:09,060 --> 00:08:15,780
But you can have some menu items on which you can update your main content on this right hand side or

128
00:08:15,840 --> 00:08:16,340
a side.

129
00:08:16,350 --> 00:08:21,990
You can have an Eid section or some such issues that you would like to show your users.

130
00:08:22,460 --> 00:08:25,240
And of course, of the photo you can have notes for the links.

131
00:08:25,800 --> 00:08:26,920
That's all for today, guys.

132
00:08:27,000 --> 00:08:29,460
If there is something that you did not understand.

133
00:08:29,760 --> 00:08:31,510
Feel free to drop a comment on.

134
00:08:31,530 --> 00:08:32,400
We will discuss it.

135
00:08:33,210 --> 00:08:34,240
See you in the next video.

136
00:08:34,670 --> 00:08:34,960
Bye.

137
00:08:35,050 --> 00:08:35,690
And Dick.