1
00:00:01,140 --> 00:00:01,740
‫Hey, there.

2
00:00:01,800 --> 00:00:02,490
‫Welcome back.

3
00:00:02,700 --> 00:00:06,060
‫Now let us start our journey with our current Spotify project.

4
00:00:06,810 --> 00:00:10,470
‫First thing, I've included all these file indie resources.

5
00:00:10,510 --> 00:00:16,170
‫There will be certain logos we have icon and then we have background.

6
00:00:16,710 --> 00:00:19,110
‫And then also we have our IDs.

7
00:00:19,680 --> 00:00:22,110
‫Remember, our website does respond to.

8
00:00:22,170 --> 00:00:27,780
‫That means if we try to decrease the size here and there, it should work fine.

9
00:00:28,930 --> 00:00:35,560
‫Now, if you scroll down, everything is going to work fine, and if I try to minimize more, you will

10
00:00:35,560 --> 00:00:37,630
‫see it is going to work fine.

11
00:00:41,500 --> 00:00:46,120
‫And we are going to delay certain settings with our own media queries.

12
00:00:46,570 --> 00:00:48,730
‫That means everything is responsive.

13
00:00:49,060 --> 00:00:54,620
‫So for that, we are utilizing our responsive, Garcia says, all type of media queries.

14
00:00:54,640 --> 00:00:55,920
‫We are going to add it here.

15
00:00:56,380 --> 00:01:03,580
‫The second thing is we are adding all our courts into stylus pieces and then we have all these content

16
00:01:03,580 --> 00:01:05,200
‫that are related to images.

17
00:01:05,410 --> 00:01:11,560
‫So our Typekit icon, our background, as well as our favicon and few other things.

18
00:01:11,890 --> 00:01:13,660
‫So that will be inside media.

19
00:01:14,380 --> 00:01:14,900
‫That's it.

20
00:01:14,920 --> 00:01:17,380
‫That's the whole basic description.

21
00:01:17,530 --> 00:01:20,290
‫Now let's jump back and start adding content.

22
00:01:20,800 --> 00:01:23,260
‫Now, first thing is, I'm going to give us structure.

23
00:01:23,410 --> 00:01:26,920
‫So basically inside our body, I'm going to create that first.

24
00:01:28,600 --> 00:01:34,870
‫And this hurdle is going to contain an image that is this image, and then we are going to have our

25
00:01:34,880 --> 00:01:37,000
‫navigation that should be fine.

26
00:01:37,330 --> 00:01:42,850
‫So I'm going to create our div and inside this, I'm going to add an image that looks fine.

27
00:01:43,450 --> 00:01:45,820
‫And then here I'm going to add a now.

28
00:01:46,770 --> 00:01:49,680
‫And this now is going to have all these menus.

29
00:01:50,100 --> 00:01:56,160
‫So what I'm going to do is I'm going to create an order list that is going to have all these menus.

30
00:01:56,700 --> 00:02:03,420
‫And so we have five and tag inside that are on our list that is on our list.

31
00:02:03,690 --> 00:02:06,060
‫And you can utilize the shortcut use.

32
00:02:06,550 --> 00:02:10,020
‫And I, if I do that, it will add one and light.

33
00:02:10,530 --> 00:02:17,250
‫But what I can do is I can utilize you were greater than someone and I multiply by five.

34
00:02:17,700 --> 00:02:21,180
‫Then what are those going to do is it is going to add five allies.

35
00:02:22,110 --> 00:02:23,010
‫This looks fine.

36
00:02:23,820 --> 00:02:26,580
‫All I need to do is add these list item.

37
00:02:27,120 --> 00:02:31,350
‫So let me get back here and let me quickly add these list item.

38
00:02:33,360 --> 00:02:35,280
‫That's done now.

39
00:02:35,310 --> 00:02:38,850
‫This completes our navigation for now.

40
00:02:39,570 --> 00:02:43,140
‫The next thing we are going to do is you are going to create a mean dog.

41
00:02:43,350 --> 00:02:47,910
‫And inside this, I'm going to add everything that means my multiple section.

42
00:02:48,450 --> 00:02:55,350
‫So at this point of time, we are going to have only one section which is on all learning is everything.

43
00:02:55,590 --> 00:02:56,430
‫This section?

44
00:02:58,160 --> 00:03:04,730
‫Now that our chances that you might have another section which includes different music, maybe another

45
00:03:04,730 --> 00:03:10,230
‫section which includes different podcasts or maybe training section or anything else.

46
00:03:10,250 --> 00:03:15,830
‫But at this point of time, we only have one section, so we are going to utilize this section only

47
00:03:16,310 --> 00:03:20,270
‫and this section is going to have this is each tag.

48
00:03:20,510 --> 00:03:26,000
‫And then this is going to be our big dog and this is going to be our button looks and simple for now.

49
00:03:26,360 --> 00:03:29,450
‫So this is going to be a joint dog and that is going to have.

50
00:03:31,410 --> 00:03:33,150
‫Learning is everything.

51
00:03:34,690 --> 00:03:39,820
‫Now, one thing you need to remember that they are breaking here, that means I need to add a break

52
00:03:39,830 --> 00:03:40,480
‫Typekit.

53
00:03:40,840 --> 00:03:43,480
‫So what I can do is I into loft space.

54
00:03:43,480 --> 00:03:46,290
‫I can utilize that is my break tag.

55
00:03:46,870 --> 00:03:52,750
‫So this is going to create clean and then I have a dog which is going to have this content.

56
00:03:53,440 --> 00:03:56,260
‫So I simply added to save this one.

57
00:03:58,790 --> 00:04:05,540
‫The next thing I'm going to have is a button you can utilize any other type of link and then decorate

58
00:04:05,540 --> 00:04:10,670
‫it, or I should say, add border and everything, and it will look like what and you don't need to

59
00:04:10,670 --> 00:04:13,060
‫utilize this button specifically.

60
00:04:13,250 --> 00:04:19,300
‫You can utilize a dog or maybe a paragraph right there and then can change or not think so hard.

61
00:04:19,310 --> 00:04:20,750
‫I just need to get.

62
00:04:23,910 --> 00:04:28,770
‫Save this one that's done, so that's done for our second section.

63
00:04:29,130 --> 00:04:32,730
‫Then we have our photo looks fine to me.

64
00:04:33,120 --> 00:04:37,280
‫All I have to do is after this mean I can directly add water.

65
00:04:38,220 --> 00:04:45,240
‫Now inside this photo, we need to do certain things why because we are going to have multiple section

66
00:04:45,240 --> 00:04:47,100
‫or you can utilize divs here.

67
00:04:47,640 --> 00:04:49,170
‫It's totally depend on you.

68
00:04:49,470 --> 00:04:51,390
‫We can have a whole container for us.

69
00:04:51,810 --> 00:04:55,350
‫And inside this container, we can have this Delphi logo.

70
00:04:55,620 --> 00:04:58,090
‫Then we can have this there for links.

71
00:04:58,140 --> 00:05:00,840
‫Then we can have this deal for social icons.

72
00:05:01,560 --> 00:05:04,110
‫Maybe this dip can be divided into multiple parts.

73
00:05:04,560 --> 00:05:09,630
‫And then this div of OK was this day that will be about our country.

74
00:05:10,110 --> 00:05:12,570
‫Then the last day will be extras.

75
00:05:13,440 --> 00:05:14,580
‫So let's do that.

76
00:05:14,880 --> 00:05:18,570
‫What I'm going to do is add our div and call it container.

77
00:05:19,760 --> 00:05:22,220
‫And inside this, I'm going to add my name.

78
00:05:22,530 --> 00:05:27,380
‫You can regulate section head on actually, OK, fine, but I'm utilizing them for now.

79
00:05:27,950 --> 00:05:31,600
‫So what we can do is we can utilize their fund over.

80
00:05:33,170 --> 00:05:34,040
‫That's fine.

81
00:05:34,340 --> 00:05:36,860
‫The second day will be related to links.

82
00:05:39,470 --> 00:05:42,830
‫That's done in the third level relative to social.

83
00:05:44,730 --> 00:05:46,380
‫And then we have.

84
00:05:47,730 --> 00:05:55,830
‫This country information and then another line will be about us, quantify our other links, so I'm

85
00:05:55,830 --> 00:06:01,240
‫going to life country and then we are going to have extras.

86
00:06:02,600 --> 00:06:03,530
‫This looks fine.

87
00:06:03,620 --> 00:06:08,360
‫No, we are going to divide things again because this section will be divided into multiple parts,

88
00:06:08,720 --> 00:06:12,500
‫but that we will do later when we are on that specific lecture.

89
00:06:13,190 --> 00:06:15,920
‫So here is our base ready.

90
00:06:17,310 --> 00:06:25,350
‫Or I should say a basic structure is ready if I jump back to our main website, you can see that's done.

91
00:06:25,980 --> 00:06:28,620
‫That's the current look of our website now.

92
00:06:29,640 --> 00:06:35,400
‫So what I'm going to do is the first thing is I'm going to jump on to the CSIS part and I'm going to

93
00:06:35,400 --> 00:06:38,700
‫add 13 properties with our HDMI little.

94
00:06:39,790 --> 00:06:42,010
‫So here I'm going to jump on to a game of.

95
00:06:43,280 --> 00:06:48,830
‫And the first thing I'm going to change is are foreign size, so I'm going to utilize one size and head,

96
00:06:48,830 --> 00:06:50,410
‫I'm going to extend because.

97
00:06:51,480 --> 00:06:56,460
‫The next thing I'm going to do is I'm going to change the color, the default color to white.

98
00:06:59,290 --> 00:07:05,110
‫And the third thing is about our foreign family, you should jump onto, we will find and here we are

99
00:07:05,110 --> 00:07:10,540
‫going to utilize Bob Bennett because that's the only point which is closest to Spotify.

100
00:07:11,020 --> 00:07:13,730
‫So I just click on Poppins and hit.

101
00:07:13,750 --> 00:07:18,520
‫Either you can import it directly, but that will import only one part of it.

102
00:07:18,970 --> 00:07:21,970
‫What you have to do is select all type of style.

103
00:07:29,500 --> 00:07:34,330
‫Once that is done, you can click on to this import option and how you will get the gold.

104
00:07:34,660 --> 00:07:38,140
‫So what I'm going to do is I'm going to copy the import code itself.

105
00:07:38,320 --> 00:07:42,390
‫Get back here and add this at the top of my CSIS.

106
00:07:43,300 --> 00:07:47,110
‫So that is going to include everything related to this Poppins.

107
00:07:48,430 --> 00:07:55,540
‫All I have to do is now change my font family, so had I'm going to release one family and now I need

108
00:07:55,540 --> 00:08:01,720
‫to pass Poppins, or you can jump onto Google itself, that is Google font, and here you will have

109
00:08:01,720 --> 00:08:06,310
‫option how to realize this so you can copy this one and add it had.

110
00:08:08,030 --> 00:08:09,890
‫That's it, that's the base setting.

111
00:08:10,100 --> 00:08:12,830
‫Now there are few other comments adding that I usually do.

112
00:08:12,830 --> 00:08:19,100
‫The first thing is about a dog and I'm going to remove the tax declaration, though none because I don't

113
00:08:19,100 --> 00:08:20,330
‫want the underlying thing.

114
00:08:21,140 --> 00:08:27,470
‫Also, I'm going to legalize the dog and I'm going to remove the listing and I'm going to set it to

115
00:08:27,470 --> 00:08:30,740
‫none because I don't want these bullet points.

116
00:08:31,490 --> 00:08:32,010
‫So that's it.

117
00:08:32,030 --> 00:08:33,890
‫That's the basic thing.

118
00:08:34,070 --> 00:08:36,710
‫And this is not going to affect much, except the color.

119
00:08:36,720 --> 00:08:41,600
‫So that debate setting and here are eggs which are not visible right now.

120
00:08:42,140 --> 00:08:42,890
‫This is great.

121
00:08:43,580 --> 00:08:46,940
‫The next thing we are going to do is walk on to this head up park.

122
00:08:47,240 --> 00:08:48,680
‫So we have this hurdle.

123
00:08:48,710 --> 00:08:51,950
‫We need to add a background color, add these images.

124
00:08:52,190 --> 00:08:58,970
‫And also we are going to utilize Flexbox so that we can divide this whole content according to our justified

125
00:08:58,970 --> 00:08:59,510
‫content.

126
00:09:00,200 --> 00:09:05,090
‫So what I'm going to do is jump here and I'm going to select this header for us.

127
00:09:05,630 --> 00:09:07,180
‫So just scroll down a bit.

128
00:09:07,190 --> 00:09:10,040
‫And the first thing is, I'm going to utilize this header.

129
00:09:12,070 --> 00:09:18,040
‫And I'm going to add a background color so you can directly analyze background color or background itself

130
00:09:18,580 --> 00:09:20,980
‫because this is a short term property.

131
00:09:21,400 --> 00:09:24,820
‫And then inside my background color, I'm going to go with black.

132
00:09:26,090 --> 00:09:32,120
‫Once that is done, I'm also going to add some height for now, and for now, I'm going big, maybe

133
00:09:32,120 --> 00:09:36,680
‫200 pixels just for visible pop was get back here.

134
00:09:37,370 --> 00:09:39,870
‫OK, so this is our current halo.

135
00:09:40,520 --> 00:09:42,320
‫Let me also add image here.

136
00:09:42,470 --> 00:09:44,520
‫So this is our IMG.

137
00:09:44,900 --> 00:09:51,980
‫I'm going to get inside my media and inside that I have laboratory and save this one.

138
00:09:52,490 --> 00:09:53,300
‫Get back here.

139
00:09:53,780 --> 00:09:57,350
‫OK, so this is the current view if I right click here.

140
00:09:59,320 --> 00:10:04,750
‫So this is our day, which is about our logo and this is our navigation bar.

141
00:10:04,840 --> 00:10:08,440
‫And since our head, that is pretty obvious, we are going to have the size.

142
00:10:09,130 --> 00:10:14,680
‫The first thing I'm going to do is here, I'm going to add our size to my head.

143
00:10:14,890 --> 00:10:22,930
‫So the most common sizes around a pixel on, you can take it rim and this is somewhat similar.

144
00:10:23,170 --> 00:10:23,680
‫OK.

145
00:10:24,370 --> 00:10:29,350
‫So this is going to be a trim or atypical whatever you want later on.

146
00:10:29,350 --> 00:10:33,650
‫What we are going to do is we are going to change this height because of the responsiveness.

147
00:10:33,650 --> 00:10:37,870
‫So what we are going to do is we are mobile with a laptop, with our tablet.

148
00:10:38,110 --> 00:10:43,630
‫Every time we are going to change the size, we are going to add or I should say or what I this height.

149
00:10:44,730 --> 00:10:51,210
‫Now ahead, I'm going to go with a dream, but for a visual purpose, I'm taking 2010 just for the visual

150
00:10:51,210 --> 00:10:55,590
‫purpose so we can edit stuff, but our atrium is final.

151
00:10:56,010 --> 00:10:58,320
‫Nick may get back here now, head.

152
00:10:58,470 --> 00:11:03,510
‫The problem is, since both of these items are lying, I need to do something.

153
00:11:03,510 --> 00:11:06,690
‫What I can do is I can create a container and add a size.

154
00:11:07,320 --> 00:11:09,060
‫So that means what I mean by that is.

155
00:11:10,210 --> 00:11:12,910
‫First thing is here, let me add a container.

156
00:11:14,840 --> 00:11:18,140
‫And I can keep both of these items inside them.

157
00:11:18,560 --> 00:11:20,300
‫That means inside my container.

158
00:11:20,480 --> 00:11:21,590
‫So this is not a hater.

159
00:11:21,710 --> 00:11:24,980
‫This is a container and a container includes both of them.

160
00:11:25,370 --> 00:11:31,160
‫So that means I can see this container as display flex and both of them will be its item.

161
00:11:31,700 --> 00:11:32,870
‫This is going to be great.

162
00:11:33,170 --> 00:11:38,390
‫The other thing is, I'm going to add a class here so I can refer this class according to the local

163
00:11:38,450 --> 00:11:38,720
‫art.

164
00:11:40,460 --> 00:11:42,050
‫OK, this looks great.

165
00:11:43,070 --> 00:11:46,160
‫Now, all I have to do is just play with the container.

166
00:11:46,610 --> 00:11:48,890
‫So here I'm going to go with my header.

167
00:11:51,520 --> 00:11:52,690
‫Not container.

168
00:11:54,760 --> 00:12:02,530
‫Now, head, you can also utilize this, but I strongly recommend to have some type of format or structure

169
00:12:02,530 --> 00:12:07,390
‫so you can understand, OK, our head, as it is, is working or whatever it is, it's working.

170
00:12:07,720 --> 00:12:12,730
‫Otherwise you are going to have a container, maybe in your main section, maybe in your photo section

171
00:12:12,730 --> 00:12:14,440
‫as well as in your hideout section.

172
00:12:14,890 --> 00:12:16,810
‫So it's going to create a lot of confusion.

173
00:12:17,470 --> 00:12:20,230
‫This is the naming format that I currently recommend.

174
00:12:21,130 --> 00:12:26,770
‫Once that is done, the first thing I'm going to do is add our display, which is going to be a flex,

175
00:12:27,100 --> 00:12:30,310
‫and by default, there are going to be out in robot.

176
00:12:30,340 --> 00:12:33,160
‫So if I jump here now, you can see they are in row.

177
00:12:34,340 --> 00:12:40,200
‫If I just come in to save this one, you can see now they are in column format.

178
00:12:40,220 --> 00:12:40,600
‫Why?

179
00:12:40,610 --> 00:12:43,130
‫Because they're following them as block.

180
00:12:44,300 --> 00:12:46,670
‫So displays black smoke.

181
00:12:47,840 --> 00:12:51,150
‫Nothing I'm going to do is justify a content again.

182
00:12:51,800 --> 00:12:57,080
‫There are many things that we can do with just a high content, and these two are horizontal elements.

183
00:12:57,860 --> 00:13:01,280
‫I need to add this and this at the end part.

184
00:13:01,550 --> 00:13:05,180
‫So the best thing I can utilize is space between.

185
00:13:05,960 --> 00:13:12,830
‫That means they will be both at the corner and rest of this space will be remain at the Green Park.

186
00:13:13,520 --> 00:13:15,420
‫See it back here.

187
00:13:16,340 --> 00:13:20,480
‫This looks fine, but here you can see we have some space here.

188
00:13:20,480 --> 00:13:22,040
‫We have some space here, right?

189
00:13:23,030 --> 00:13:26,090
‫That's because we can add a weight to our container.

190
00:13:26,240 --> 00:13:33,080
‫That means this is the container and we can say, OK, this container should be, I guess, let's take

191
00:13:33,080 --> 00:13:35,970
‫90 percent only according to the header.

192
00:13:36,290 --> 00:13:41,510
‫And then I can see margin as that means on all of this.

193
00:13:41,720 --> 00:13:46,850
‫There will be some space which will be equal to five percent on the right side and five percent on the

194
00:13:46,850 --> 00:13:47,330
‫left side.

195
00:13:47,360 --> 00:13:50,350
‫Because this is 19 pennies remaining in hand.

196
00:13:51,110 --> 00:13:54,200
‫OK, now you can see we got some structure.

197
00:13:56,390 --> 00:13:57,890
‫This looks fine to me now.

198
00:13:57,920 --> 00:14:04,790
‫The other change we can do is we can convert this fuel into flex so that all these items can arrange

199
00:14:04,790 --> 00:14:07,010
‫according to the direction of route.

200
00:14:07,670 --> 00:14:11,870
‫So what I'm going to do is I'm going to select the hair drag in.

201
00:14:14,260 --> 00:14:16,960
‫Select now and then the U.S. part.

202
00:14:17,830 --> 00:14:22,180
‫And inside this, I'm going to add display property as Lex.

203
00:14:24,630 --> 00:14:30,840
‫And by default, the direction is wrong, so there shouldn't be any problem if I get back here, you

204
00:14:30,840 --> 00:14:32,880
‫can see now they are following the direction.

205
00:14:33,480 --> 00:14:40,070
‫Now, since this is following the flags, we can arrange the navigation in the same boat itself.

206
00:14:40,080 --> 00:14:46,860
‫Because if you remember, align yourself and by these different type of properties, we can arrange

207
00:14:46,860 --> 00:14:49,080
‫these items in the center itself.

208
00:14:50,110 --> 00:14:52,960
‫So I think you got some idea what we are trying to do.

209
00:14:52,990 --> 00:14:58,720
‫Let's continue this part in the next lecture and understand how to arrange them are designed to change

210
00:14:58,720 --> 00:15:05,260
‫their font color, change their font size and see what we can do to add space or maybe decrease the

211
00:15:05,290 --> 00:15:06,490
‫size of this logo.

212
00:15:07,330 --> 00:15:08,300
‫Thank you for calling.

213
00:15:08,320 --> 00:15:10,210
‫And I see you guys in the next one.