1
00:00:01,320 --> 00:00:01,880
‫Hey, there.

2
00:00:02,100 --> 00:00:02,820
‫Welcome back.

3
00:00:03,210 --> 00:00:03,840
‫On the side.

4
00:00:04,440 --> 00:00:12,180
‫Now let us discuss about how we are going to work with our elements in terms of display as well as position.

5
00:00:12,750 --> 00:00:14,220
‫So we have this web page.

6
00:00:15,060 --> 00:00:19,200
‫We are going to control their display setting as a list, their position.

7
00:00:19,470 --> 00:00:23,820
‫Maybe I want this to be 10 percent down 10 percent, right?

8
00:00:23,820 --> 00:00:24,660
‫Or something else.

9
00:00:25,440 --> 00:00:29,520
‫So in the next two lectures, we are going to do that now with elements.

10
00:00:29,520 --> 00:00:36,510
‫When I I referred, I referred to paragraph as well as dim as well as image as well as links everything.

11
00:00:36,930 --> 00:00:41,460
‫So we are going to work with the display as well as the position setting.

12
00:00:42,280 --> 00:00:45,780
‫Now, if you remember, we discussed about two important points.

13
00:00:46,110 --> 00:00:51,600
‫That is how block work, as well as how in line what if you remember, it's great.

14
00:00:51,600 --> 00:00:53,790
‫If not, let's do a quick revision.

15
00:00:54,850 --> 00:01:02,320
‫So there are basically two types of displays sitting by default, if you work with maybe section, maybe

16
00:01:02,320 --> 00:01:09,280
‫do headings paragraph form for header, all of them are block.

17
00:01:09,520 --> 00:01:12,760
‫That means they are block level element if you just jump.

18
00:01:12,970 --> 00:01:14,530
‫Or how about all this feedback?

19
00:01:14,770 --> 00:01:16,060
‫It's a complete block.

20
00:01:16,100 --> 00:01:18,410
‫It's you jumping on P-Dog.

21
00:01:18,460 --> 00:01:19,570
‫It's a complete block.

22
00:01:19,840 --> 00:01:22,630
‫If you want to work on this section, it's a complete block.

23
00:01:22,930 --> 00:01:25,480
‫That means they're taking 100 percent of the.

24
00:01:26,470 --> 00:01:28,210
‫Maybe I do something small.

25
00:01:28,210 --> 00:01:30,040
‫Maybe I extended it with C.

26
00:01:30,340 --> 00:01:32,140
‫Section is taking 100 percent.

27
00:01:33,360 --> 00:01:35,130
‫Paragraph is big 100 percent.

28
00:01:35,430 --> 00:01:40,080
‫So these are all are block level elements, then we have in 911.

29
00:01:40,110 --> 00:01:45,910
‫That means they only take space, which is required if I went over to this Eatock.

30
00:01:46,950 --> 00:01:50,550
‫You can see it's only taking the space, which is required.

31
00:01:50,970 --> 00:01:55,920
‫But if I hover over to dispute that it's taking the full weight, you see the blue line.

32
00:01:56,670 --> 00:01:58,290
‫That's how this is going to work.

33
00:01:58,710 --> 00:02:02,790
‫So these are the two type of display, actually, and these are default setting.

34
00:02:02,790 --> 00:02:09,480
‫If you click on the speaker and if you try to scroll here, you can see the display is blocked by default

35
00:02:09,690 --> 00:02:11,970
‫as well as there is some margin.

36
00:02:12,930 --> 00:02:15,210
‫So I hope you got the best idea.

37
00:02:15,960 --> 00:02:17,940
‫Now let's understand how we are going to work.

38
00:02:18,160 --> 00:02:19,810
‫So there is two values.

39
00:02:19,830 --> 00:02:22,320
‫Now you understand that it's displayed this block.

40
00:02:22,680 --> 00:02:24,180
‫Then there are few other values.

41
00:02:24,360 --> 00:02:25,260
‫There is none.

42
00:02:25,410 --> 00:02:27,900
‫That means you are going to just remove this.

43
00:02:28,110 --> 00:02:29,490
‫It will not be visible.

44
00:02:29,940 --> 00:02:35,850
‫Then there is a line block that means a combination of block as well as combination of a line.

45
00:02:36,360 --> 00:02:42,240
‫Then there are certain things related to Flexbox that we are going to discuss as a separate section.

46
00:02:42,480 --> 00:02:46,530
‫There is something like great we're going to discuss as a separate section.

47
00:02:46,920 --> 00:02:49,710
‫So you have to understand these face value.

48
00:02:50,160 --> 00:02:55,770
‫The best thing you can do right now after completing this lecture is just jump onto the thesis reference

49
00:02:56,130 --> 00:02:57,600
‫and then go on to display.

50
00:02:57,960 --> 00:02:59,790
‫Maybe you can take any other website.

51
00:02:59,790 --> 00:03:02,100
‫Just read about display after this lecture.

52
00:03:02,820 --> 00:03:06,000
‫So we are going to perform all of them in a practical way.

53
00:03:06,840 --> 00:03:08,550
‫So there is something like Babel also.

54
00:03:08,550 --> 00:03:09,720
‫We don't use that.

55
00:03:09,720 --> 00:03:15,510
‫Then Flexbox has said we are going to discuss it in our separate section grid separate section.

56
00:03:15,960 --> 00:03:20,100
‫So these are the values that you are going to work with.

57
00:03:20,670 --> 00:03:20,970
‫Great.

58
00:03:21,420 --> 00:03:22,440
‫Let me get back here.

59
00:03:23,490 --> 00:03:25,470
‫Here, I have prepared a quick example.

60
00:03:25,470 --> 00:03:28,290
‫I have a section with our last name as container.

61
00:03:28,590 --> 00:03:33,420
‫Then I have these three dogs which must be done and with their separate classes.

62
00:03:34,230 --> 00:03:35,490
‫That's a simple goal.

63
00:03:35,790 --> 00:03:38,760
‫And then we have a dog, which is an inline block.

64
00:03:39,240 --> 00:03:40,050
‫This looks fine.

65
00:03:40,530 --> 00:03:41,610
‫So let me jump here.

66
00:03:42,000 --> 00:03:47,550
‫I cannot this dog in a different manner so we can spot it directly.

67
00:03:48,560 --> 00:03:48,980
‫OK.

68
00:03:49,010 --> 00:03:54,860
‫Everything looks fine for now, I took this example with 16 pixels, so it's easy for us in a visual

69
00:03:54,860 --> 00:03:55,280
‫manner.

70
00:03:55,730 --> 00:03:57,860
‫OK, let's understand everything is done.

71
00:03:58,370 --> 00:04:01,760
‫So by default, the display is block, right?

72
00:04:02,120 --> 00:04:05,390
‫If I try to use displays in name, what will happen?

73
00:04:05,640 --> 00:04:11,270
‫So here if I use display as in line for all three of them.

74
00:04:15,430 --> 00:04:21,340
‫Now, if I save this one, get back here, you can see they are all jumbled up quiet because now they

75
00:04:21,340 --> 00:04:23,380
‫are working in an inline form.

76
00:04:23,650 --> 00:04:28,840
‫Here you can see this is be done as soon as the requirement of their space is done.

77
00:04:29,560 --> 00:04:32,170
‫The next bag starts now.

78
00:04:32,180 --> 00:04:39,400
‫These are two lines basically from here to at the next FedEx start from here to here.

79
00:04:40,410 --> 00:04:47,250
‫So if I just extended a bit hard one, you see, it's only taking this space that is required.

80
00:04:48,060 --> 00:04:49,470
‫That's how this is going to work.

81
00:04:49,500 --> 00:04:52,980
‫This looks like double, but it's taking space from here to here.

82
00:04:54,220 --> 00:04:55,570
‫So that's pretty important.

83
00:04:55,960 --> 00:05:00,220
‫Now, the best thing we can do is add some background color to understand more about them.

84
00:05:00,580 --> 00:05:07,540
‫So here if I use background color now remember background is a specific property that has multiple values.

85
00:05:07,930 --> 00:05:10,120
‫Background color is an individual value.

86
00:05:10,630 --> 00:05:14,500
‫Here, let me use control less space to get all the ideas.

87
00:05:14,920 --> 00:05:22,270
‫It's recommended to use hash value or IGB value, but it's easy for them because I'm using these names.

88
00:05:23,050 --> 00:05:25,090
‫So let me use this one.

89
00:05:25,330 --> 00:05:26,230
‫Save this one.

90
00:05:26,440 --> 00:05:27,250
‫Get back here.

91
00:05:27,940 --> 00:05:30,350
‫You see, it's taking this deal here.

92
00:05:30,970 --> 00:05:33,970
‫OK, let me try to use background values for all of them.

93
00:05:36,670 --> 00:05:42,550
‫Maybe Aqua and then background values, maybe this same this one.

94
00:05:43,150 --> 00:05:49,060
‫I hope you got the idea from here to here, then head to head and then here to here, that's our days

95
00:05:49,060 --> 00:05:49,540
‫working.

96
00:05:49,930 --> 00:05:52,420
‫But if I remove that inane display?

97
00:05:54,820 --> 00:05:59,170
‫Save this one, you can see now they're taking hundred percent with.

98
00:05:59,800 --> 00:06:02,420
‫And that's where the whole game is with this display.

99
00:06:02,680 --> 00:06:06,780
‫The game of vet, I hope you got the basic idea.

100
00:06:06,780 --> 00:06:11,740
‫I am trying to explain this again and again because it will help you to understand the other part.

101
00:06:12,190 --> 00:06:17,050
‫So when we are in the form of block, we have access to it.

102
00:06:17,680 --> 00:06:19,120
‫We can play with it.

103
00:06:20,550 --> 00:06:26,250
‫I had if I worked maybe 200 pixels, save this one.

104
00:06:26,490 --> 00:06:30,510
‫Get back here, you can see I'm able to apply this change.

105
00:06:30,990 --> 00:06:39,180
‫But if this was an in line that I cannot do this so hard, if I try to use an inline element, maybe

106
00:06:39,180 --> 00:06:47,520
‫let me remove this third one for now and play with these two itself and try to use in line as a display,

107
00:06:48,150 --> 00:06:54,090
‫as a light, as well as this display as line.

108
00:06:55,850 --> 00:06:56,810
‫Save this one.

109
00:06:57,500 --> 00:07:00,500
‫Get back here, you can see my world is not working.

110
00:07:01,320 --> 00:07:03,130
‫Let me try to take it again.

111
00:07:03,140 --> 00:07:03,620
‫Maybe.

112
00:07:04,400 --> 00:07:05,390
‫Same for here.

113
00:07:06,170 --> 00:07:08,000
‫Let me try to speak with us.

114
00:07:08,000 --> 00:07:09,110
‫500 Nixon.

115
00:07:11,840 --> 00:07:12,800
‫Save this one.

116
00:07:13,910 --> 00:07:15,500
‫Say it's not working.

117
00:07:17,370 --> 00:07:17,880
‫Why?

118
00:07:17,970 --> 00:07:25,290
‫Because when we are working with in line these with only work with log elements, so that's the first

119
00:07:25,290 --> 00:07:26,010
‫major change.

120
00:07:26,100 --> 00:07:27,690
‫Now let me try to use height.

121
00:07:31,350 --> 00:07:32,500
‫Let me save this one.

122
00:07:32,520 --> 00:07:38,490
‫Get back here, even high does not working, so that's important for you to understand that when we

123
00:07:38,490 --> 00:07:45,300
‫are working with in line, it is going to work only with this pace that is required now if I try to

124
00:07:45,300 --> 00:07:46,230
‫use Block.

125
00:07:49,370 --> 00:07:55,880
‫It worked fine here, you can see they are taking the exact height, which is 500 mixes that we have

126
00:07:55,880 --> 00:07:56,420
‫provided.

127
00:07:56,840 --> 00:07:58,520
‫Same with height also.

128
00:07:58,910 --> 00:08:03,530
‫Now this is important because now we have a line we have block.

129
00:08:03,770 --> 00:08:05,240
‫We know about their property.

130
00:08:05,420 --> 00:08:07,580
‫But the third one is in lane block.

131
00:08:07,970 --> 00:08:15,860
‫So in block drive to Big Best-Of in line as well as not, that means in line block is a property you

132
00:08:15,860 --> 00:08:17,780
‫can see and line up.

133
00:08:18,290 --> 00:08:19,280
‫What does this mean?

134
00:08:19,280 --> 00:08:25,730
‫Is it is going to take only this piece, which is required, but if it's provided, then it will take,

135
00:08:26,090 --> 00:08:29,480
‫for example, here, let me take this in line block.

136
00:08:30,630 --> 00:08:31,480
‫Save this one.

137
00:08:31,500 --> 00:08:32,330
‫Get back here.

138
00:08:34,700 --> 00:08:40,580
‫You can see the work here is only the required one, but the high does whatever we have provided.

139
00:08:40,970 --> 00:08:43,850
‫So this is important in line lock.

140
00:08:44,150 --> 00:08:48,110
‫We can provide and edit according to our self in block.

141
00:08:48,140 --> 00:08:51,020
‫It is 100 percent red and an in-line.

142
00:08:51,410 --> 00:08:54,560
‫It is just a required space that we are going to walk.

143
00:08:55,620 --> 00:08:59,790
‫Now there is none with just delayed the element from my Web page itself.

144
00:09:01,140 --> 00:09:06,870
‫If I use none or the first, you can see the element is not visible, but the second one is visible,

145
00:09:06,870 --> 00:09:08,100
‫first is not visible.

146
00:09:08,520 --> 00:09:10,350
‫I hope you got the idea about none.

147
00:09:10,740 --> 00:09:17,550
‫That means the cord is there, but we don't want to use it right now and we said it as none.

148
00:09:17,970 --> 00:09:19,400
‫This basically works.

149
00:09:19,410 --> 00:09:23,740
‫Maybe we have some images that we want to display on a laptop.

150
00:09:23,760 --> 00:09:25,080
‫That means bigger screen.

151
00:09:25,110 --> 00:09:26,880
‫But then they are using on phone.

152
00:09:26,880 --> 00:09:32,970
‫We want to hide them, or maybe something that we want to show on phone, but hide on the bigger screen.

153
00:09:33,150 --> 00:09:35,700
‫That's where this nun comes into the picture.

154
00:09:36,790 --> 00:09:42,970
‫So that's all, I hope you got the idea there is one other type, which is known as, I guess, a list

155
00:09:42,970 --> 00:09:43,450
‫item.

156
00:09:44,200 --> 00:09:45,540
‫It is just the blog.

157
00:09:45,550 --> 00:09:48,040
‫It is just the blog, but have a bullet point.

158
00:09:49,060 --> 00:09:50,350
‫We don't use it, actually.

159
00:09:51,450 --> 00:09:52,770
‫I hope you got the idea.

160
00:09:52,830 --> 00:09:55,410
‫No, let me know how quickly we can display none.

161
00:09:55,410 --> 00:09:59,130
‫That means the element is completely removed, as discussed.

162
00:09:59,580 --> 00:10:03,870
‫Then there is a line that means the element is done in Berlin.

163
00:10:03,870 --> 00:10:05,220
‫It behave like simple.

164
00:10:05,580 --> 00:10:08,010
‫That means only the required spaces allowed.

165
00:10:08,580 --> 00:10:11,220
‫Any height and weight applied will have no effect.

166
00:10:11,590 --> 00:10:11,960
‫Great.

167
00:10:11,970 --> 00:10:13,260
‫I hope you got the idea.

168
00:10:14,360 --> 00:10:17,810
‫Then we have block elements down into a block element.

169
00:10:18,200 --> 00:10:21,530
‫It start on a new line and takes up the whole space.

170
00:10:21,560 --> 00:10:21,860
‫Yup.

171
00:10:22,190 --> 00:10:28,910
‫Like if you have multiple beers, we know they start from new line, then we are in line block the elements

172
00:10:28,910 --> 00:10:35,660
‫shared property of both an inmate and a block element in line because the element of simple text and

173
00:10:35,660 --> 00:10:41,840
‫insert itself in a block of text and block because we can apply height as well as weight value.

174
00:10:42,290 --> 00:10:42,860
‫That's it.

175
00:10:43,160 --> 00:10:44,470
‫That's how they are going to work.

176
00:10:45,080 --> 00:10:47,300
‫Now this table is not utilized much.

177
00:10:47,930 --> 00:10:51,140
‫This flex pork is itself a different section.

178
00:10:51,410 --> 00:10:55,350
‫And this crater itself is a different section at this point of time.

179
00:10:55,370 --> 00:10:58,000
‫What I will recommend you is just play with it.

180
00:10:59,580 --> 00:11:03,780
‫Now, let me take a quick new example that will help you to clear all your doubt again.

181
00:11:04,110 --> 00:11:09,090
‫So the first thing I'm going to do is I'm going to take three lives and add three different images.

182
00:11:09,750 --> 00:11:12,990
‫So let me use doc and then the class numerically.

183
00:11:14,970 --> 00:11:22,890
‫And presenter, so it will create a day of directly and use, I am due to Android, my image from media

184
00:11:22,890 --> 00:11:25,530
‫and I'm going to utilize my little word selfie time.

185
00:11:26,100 --> 00:11:29,320
‫So let me copy this one here.

186
00:11:29,370 --> 00:11:31,560
‫Let me yours, Vicky.

187
00:11:33,140 --> 00:11:36,500
‫And here, let me use her, save this one.

188
00:11:36,840 --> 00:11:42,710
‫Now remember, this debate follows Block, so that means they will be in three different lines.

189
00:11:42,860 --> 00:11:43,640
‫Get back here.

190
00:11:43,880 --> 00:11:46,490
‫One two three four that in three different plane.

191
00:11:48,240 --> 00:11:54,280
‫Maybe if I change the property of this device into inline, that means they will be single.

192
00:11:54,930 --> 00:12:03,150
‫So if I dig this day and change the display to a line now, there should be a sequence one two three

193
00:12:03,180 --> 00:12:04,130
‫knots walking grid.

194
00:12:04,920 --> 00:12:07,950
‫But what if I want to restrict the space for my display?

195
00:12:08,190 --> 00:12:10,860
‫That means for my do my 50 by 50.

196
00:12:12,510 --> 00:12:14,670
‫If I'm using in line, it will not happen.

197
00:12:14,790 --> 00:12:15,630
‫Get back here.

198
00:12:15,870 --> 00:12:18,520
‫This is not walking in that case, what?

199
00:12:18,520 --> 00:12:19,620
‫I'm going to utilize it.

200
00:12:19,950 --> 00:12:21,930
‫I'm going to use in my block.

201
00:12:22,620 --> 00:12:23,500
‫Save this one.

202
00:12:23,520 --> 00:12:24,300
‫Get back here.

203
00:12:25,170 --> 00:12:29,010
‫Now you can see this is restricted to 50 by 50.

204
00:12:29,370 --> 00:12:33,180
‫Here, the image size is extending because we haven't changed in its size.

205
00:12:33,450 --> 00:12:35,660
‫But now we can also control the image.

206
00:12:35,670 --> 00:12:40,650
‫We can control image, and it can take only the 100 percent.

207
00:12:40,650 --> 00:12:45,390
‫Whatever the availability is a member, they depend on inside the percentage.

208
00:12:45,690 --> 00:12:50,520
‫So if I see how it is handed and where it is and if I save this one.

209
00:12:50,790 --> 00:12:52,340
‫Get back here now.

210
00:12:52,360 --> 00:12:57,780
‫The size of this image is dependent on the day it will not take extra space.

211
00:12:59,330 --> 00:13:01,850
‫Maybe the is hundred by 100.

212
00:13:04,740 --> 00:13:06,860
‫That's how these image sites will depend.

213
00:13:06,930 --> 00:13:08,380
‫And this is important.

214
00:13:08,640 --> 00:13:13,290
‫Suppose if we make this Deb responsive and for the lectures, we will do that.

215
00:13:13,650 --> 00:13:20,340
‫So that means this image will automatically be responsive because as soon as we change the size of this,

216
00:13:20,790 --> 00:13:23,400
‫it changes the size of image you can see.

217
00:13:23,400 --> 00:13:28,860
‫As I'm changing the size of this device, the image size automatically changes.

218
00:13:30,490 --> 00:13:33,700
‫And that's where this whole in block comes in for a chat.

219
00:13:34,390 --> 00:13:36,730
‫Now this was the important example.

220
00:13:38,240 --> 00:13:42,080
‫That's all, I hope this lecture was helpful, and now you understand all of them.

221
00:13:42,560 --> 00:13:43,650
‫Thank you for calling.

222
00:13:43,670 --> 00:13:45,590
‫And I assume this in the next one.