1
00:00:00,180 --> 00:00:01,810
Hello and welcome back.

2
00:00:02,100 --> 00:00:08,310
You know, previous video, we successfully show our product name, right, so we successfully displayed

3
00:00:08,310 --> 00:00:10,710
in our home what a symbol that means.

4
00:00:10,710 --> 00:00:12,550
Here you can see it's not perfectly visible.

5
00:00:12,990 --> 00:00:17,000
So now one to do and actually customize it and also to the product area.

6
00:00:17,010 --> 00:00:18,560
I have some of that other field.

7
00:00:18,810 --> 00:00:22,100
I also want to visible all that feed with the images.

8
00:00:22,440 --> 00:00:25,860
So before doing this, I wanted to insert some of the product.

9
00:00:25,900 --> 00:00:28,470
Then it'll be better if we go to our admin.

10
00:00:28,490 --> 00:00:34,380
So I just put that email address and the password, click on the logging and now go to our products

11
00:00:35,880 --> 00:00:36,740
and order the products.

12
00:00:36,750 --> 00:00:42,100
Right now I have only one product at the best t shirts that I wanted to do and to add multiple product.

13
00:00:42,100 --> 00:00:43,090
Then it should be better.

14
00:00:43,470 --> 00:00:48,030
So first of all, I just choose the emails and go to your exercise folder.

15
00:00:48,030 --> 00:00:51,160
And here I have already created the folder as a product demo.

16
00:00:51,180 --> 00:00:54,290
So now I just simply defined some of the t shirt.

17
00:00:54,300 --> 00:00:57,670
So just open that t shirt and I just put that name.

18
00:00:57,690 --> 00:01:00,120
So now I want to do and we use this name.

19
00:01:00,180 --> 00:01:02,510
I just simply copy it.

20
00:01:03,150 --> 00:01:09,900
And now here I define as a name and also category I define as the t shirt category.

21
00:01:10,230 --> 00:01:13,110
And here I define some of the short description.

22
00:01:13,170 --> 00:01:18,550
OK, so just no different on the job description and it will be our long description.

23
00:01:19,680 --> 00:01:23,240
So here are defining it and then there is a price.

24
00:01:23,340 --> 00:01:25,670
It is defined as a 20.

25
00:01:25,860 --> 00:01:28,500
And before that world price was actually twenty five.

26
00:01:28,560 --> 00:01:30,530
OK, so just simple defining it.

27
00:01:30,540 --> 00:01:34,080
And now the do to save this say just simply save this product.

28
00:01:36,120 --> 00:01:41,850
And you can see the sport is don't save, so now I also want to add another one so that it will be our

29
00:01:41,850 --> 00:01:44,970
title so better I just simply copy it.

30
00:01:46,080 --> 00:01:50,770
So but I just got beat and here I just name it and choose the email.

31
00:01:50,800 --> 00:01:52,550
So I, I choose this one.

32
00:01:53,160 --> 00:01:56,970
And here that is all for a different purposes actually using it.

33
00:01:57,750 --> 00:02:00,120
So here that is description will be needed.

34
00:02:00,120 --> 00:02:02,850
And also here a defense of the text.

35
00:02:03,330 --> 00:02:05,010
So that shall be our text preview.

36
00:02:05,100 --> 00:02:13,950
OK, so better I just put that as this one and then also defend the price as a 25 year old price at

37
00:02:13,970 --> 00:02:15,610
35 or 30.

38
00:02:16,290 --> 00:02:18,500
So now I'll check it.

39
00:02:18,510 --> 00:02:23,070
And also you have to be able to say like a category and now I just save it.

40
00:02:23,940 --> 00:02:25,100
So that is a true product.

41
00:02:25,110 --> 00:02:26,550
I also want to add another one.

42
00:02:27,030 --> 00:02:29,010
I just simply another one.

43
00:02:29,010 --> 00:02:31,110
I just simply choose The Sims.

44
00:02:31,380 --> 00:02:36,510
And here I have already take it, so I just simply copy it.

45
00:02:39,010 --> 00:02:47,530
And now here I name it as I'm just a programmer, I used to find the T-shirt and Prevue, so here I

46
00:02:47,530 --> 00:02:49,270
just simply defined find that prevue.

47
00:02:51,590 --> 00:03:02,720
And also hear that description and the price at the front of the 15 and all prices of 20, and also

48
00:03:02,720 --> 00:03:04,670
I define that category perfect.

49
00:03:04,700 --> 00:03:06,080
Now I just look at the safe.

50
00:03:06,860 --> 00:03:08,600
So here the result, just program.

51
00:03:08,600 --> 00:03:10,190
I can't do it.

52
00:03:10,730 --> 00:03:12,890
Can't work imagination.

53
00:03:13,240 --> 00:03:13,860
Hmm.

54
00:03:15,200 --> 00:03:21,940
So here I take it imagination also take it my thinking which I want to take another one.

55
00:03:22,850 --> 00:03:27,740
So it was two to add product to the maze.

56
00:03:28,370 --> 00:03:34,100
I see like this one I named meet the category here.

57
00:03:34,640 --> 00:03:41,090
So the description I just simply defined the description and that will be our main description.

58
00:03:41,330 --> 00:03:49,650
OK, and then here after that I define the price, so I just define the price of that and sixty, sixty

59
00:03:49,700 --> 00:03:55,070
dollars and all of the sixty five dollar perfect for that.

60
00:03:55,100 --> 00:03:58,520
So now just as I save this right now I have some of the product.

61
00:03:58,520 --> 00:03:58,810
Right.

62
00:03:59,030 --> 00:04:03,310
So now I have to do all the visible, all the product details in our home base.

63
00:04:03,320 --> 00:04:04,140
That means here.

64
00:04:04,190 --> 00:04:09,710
OK, first of all here and the visibility and after that I will create another space for the product

65
00:04:09,710 --> 00:04:10,130
details.

66
00:04:10,520 --> 00:04:12,100
So step by step will do that works.

67
00:04:12,320 --> 00:04:13,490
Now, we don't need this.

68
00:04:14,210 --> 00:04:18,940
I added some demo products and I want the visibility to front divisibility.

69
00:04:18,950 --> 00:04:24,980
First of all, here we have to do we have to work in particular homepage right in our app shop and that

70
00:04:24,980 --> 00:04:26,240
is our home address HTML.

71
00:04:26,570 --> 00:04:29,150
And here I want to do and actually design it.

72
00:04:29,160 --> 00:04:35,780
So if you want to design like the resource for loop into the Falu before I have all on this display

73
00:04:35,780 --> 00:04:42,470
I want filled so better, I want to do the first of all define some of the success of the style.

74
00:04:42,530 --> 00:04:43,270
OK, so here I am.

75
00:04:43,370 --> 00:04:46,240
I want to learn to use the boot straps on the court.

76
00:04:46,250 --> 00:04:49,400
So here I, DiFonzo Dave and into the Dave.

77
00:04:49,400 --> 00:04:53,600
I want to do all the use of the container bootstrap plus as a container.

78
00:04:55,100 --> 00:04:58,840
OK, container and then am I the best of my five.

79
00:04:59,300 --> 00:05:07,010
So I just really with this my five and here after this I take our actual attack and here also for hours

80
00:05:07,010 --> 00:05:14,610
to take out the front of the class I defense on the class and I just define the class as the same as

81
00:05:14,630 --> 00:05:15,460
a m five.

82
00:05:15,830 --> 00:05:16,180
OK.

83
00:05:16,280 --> 00:05:22,280
And then here will be display as a feature product feature product.

84
00:05:24,260 --> 00:05:26,210
OK, just name it as a feature product.

85
00:05:26,490 --> 00:05:29,920
And now here I want to take another Dave.

86
00:05:29,930 --> 00:05:32,950
So here I take another Dave and that is defined as the rule.

87
00:05:33,500 --> 00:05:39,440
So in particular this so area I want to do and define another Dave, in particular that area.

88
00:05:39,690 --> 00:05:42,260
And here I want to do under the rule plus.

89
00:05:42,260 --> 00:05:46,070
So that is a call that is also one of the bootstrap class.

90
00:05:46,070 --> 00:05:50,440
As a call employee, I want to define it six and then call s.m.

91
00:05:50,750 --> 00:05:57,460
So just somebody will call s.M 12 and then call L.G..

92
00:05:58,190 --> 00:06:02,940
So here I define the the three different that's all actually bootstrap class.

93
00:06:02,940 --> 00:06:08,210
So if you already know about that bootstrap then I think it's very much f it should be very much familiar

94
00:06:08,210 --> 00:06:08,540
to you.

95
00:06:08,550 --> 00:06:08,800
Right.

96
00:06:09,140 --> 00:06:11,120
So no one to do undertake another figure.

97
00:06:11,420 --> 00:06:15,230
So I just simply defined as a figure that is one of the standard tag.

98
00:06:15,230 --> 00:06:17,510
And here I want to do an attack on the class.

99
00:06:18,020 --> 00:06:24,500
So here I define that class and by that position I want to do I want to display our image for the display

100
00:06:24,500 --> 00:06:29,430
that emails I want to create some of the specific class for a specific space.

101
00:06:29,440 --> 00:06:33,670
So right now I define that figure and then the Dave, I take another one.

102
00:06:33,680 --> 00:06:40,360
And here in particular, that area on the show, that image is that the image tag and the image area.

103
00:06:40,370 --> 00:06:41,960
So here I want to display our image.

104
00:06:42,050 --> 00:06:44,270
So that is the image tag I want to display.

105
00:06:44,390 --> 00:06:46,390
And also after this.

106
00:06:46,400 --> 00:06:50,690
OK, after this, Dave, I want to talk I want to take another figure caption.

107
00:06:51,410 --> 00:06:53,650
So here I define the figure.

108
00:06:54,110 --> 00:06:57,980
So here a define the figure caption and the figure caption area.

109
00:06:58,370 --> 00:07:04,100
I want to also define some of the class we have to actually create some of the class for that is look

110
00:07:04,100 --> 00:07:05,730
at as per our demand.

111
00:07:05,750 --> 00:07:08,330
OK, so this simply depends on the class.

112
00:07:08,330 --> 00:07:12,180
And here so here I wanted to show our product names.

113
00:07:12,180 --> 00:07:18,530
So here we are trying to define the eight six today is six area and to display our product name.

114
00:07:18,530 --> 00:07:21,910
And also we have to do we have to display our price.

115
00:07:21,920 --> 00:07:25,400
That means our world price, our recent price.

116
00:07:25,880 --> 00:07:30,600
So for doing this after this six year, I to do undertake another day.

117
00:07:31,080 --> 00:07:32,720
OK, just take another Dave.

118
00:07:33,260 --> 00:07:33,860
Sorry.

119
00:07:35,030 --> 00:07:38,300
Here I want to do and define another Dave.

120
00:07:40,310 --> 00:07:41,630
See the Davidia.

121
00:07:41,630 --> 00:07:45,920
We have to also create another class for this one right now actually define all the deb.

122
00:07:46,190 --> 00:07:50,900
OK, so let me use some of the as far as specific every.

123
00:07:51,920 --> 00:07:58,310
So now I have to do and defend this pen, OK, just simply expand into this pen area, I want to display

124
00:07:58,310 --> 00:07:59,180
our prize.

125
00:07:59,180 --> 00:08:04,570
So here so here I want to display our prize in particular that area.

126
00:08:04,580 --> 00:08:06,200
And also I take another one.

127
00:08:06,740 --> 00:08:07,990
I take another one.

128
00:08:08,000 --> 00:08:14,180
And here also I want to display our all prize and then that's all there.

129
00:08:14,210 --> 00:08:21,270
So it will be needed actually to know what to do and to make the things a little bit a little bit closer.

130
00:08:22,880 --> 00:08:30,640
So that is all Dave and then all Fieger Fieger ception and then actually the figure and then the tape.

131
00:08:31,370 --> 00:08:32,870
So that's all that our tape.

132
00:08:33,400 --> 00:08:37,330
OK, so now we have to do we have to segment it like here.

133
00:08:37,760 --> 00:08:39,180
That is also the reason for it.

134
00:08:39,180 --> 00:08:42,320
So into the for area, we already get all the raw data.

135
00:08:42,320 --> 00:08:42,540
Right.

136
00:08:42,560 --> 00:08:44,000
So now we just simply got it.

137
00:08:44,300 --> 00:08:47,820
And after this rule, after this draw here, I just simply passed it.

138
00:08:47,840 --> 00:08:49,840
OK, so that the two Dave.

139
00:08:49,850 --> 00:08:57,800
So before that too, they want to to finish out this and that means and for so before to at assembly

140
00:08:57,800 --> 00:09:00,700
and it and no one to do and the visible all product names.

141
00:09:00,710 --> 00:09:10,140
I just simply cut it and here that is our figure class and here are the images and that is eight six.

142
00:09:10,140 --> 00:09:16,750
So here I want to do and display our product name and also with this product on display at every field.

143
00:09:17,390 --> 00:09:22,640
So here there is with this product I want to do and to display our if you go to our model that we see

144
00:09:22,640 --> 00:09:25,430
in our app shop, it is a model area.

145
00:09:25,430 --> 00:09:27,070
I have defined all that or feel right.

146
00:09:27,080 --> 00:09:30,120
So therefore the price, I have defined that filename as a price.

147
00:09:30,680 --> 00:09:33,020
So now I want to do on display that price.

148
00:09:33,410 --> 00:09:39,920
And also I want to display our all price so our old price will be visible on here.

149
00:09:40,220 --> 00:09:44,110
And also after that there is our emails.

150
00:09:44,540 --> 00:09:46,970
So now I also want to do and will display that image.

151
00:09:46,970 --> 00:09:48,560
So if you want to display it.

152
00:09:48,560 --> 00:09:55,230
So here, here in our media, OK, into the media here, we have to defining it.

153
00:09:55,250 --> 00:09:56,630
So that is our product.

154
00:09:57,470 --> 00:10:01,970
So with this product, I want to display our image within our image filename.

155
00:10:01,970 --> 00:10:08,460
I have defined as a mainly meseta, simply copied, and now here I just simply refining it.

156
00:10:08,800 --> 00:10:11,660
OK, so that's all.

157
00:10:12,290 --> 00:10:15,350
So now it should be display all the details.

158
00:10:15,380 --> 00:10:16,470
Now let's check this out.

159
00:10:16,490 --> 00:10:21,080
If you click on this table and now if you refresh it.

160
00:10:22,210 --> 00:10:29,950
Yes, you can see every product is now visible with the images, so now I want to do I want to actually

161
00:10:30,400 --> 00:10:32,850
put on the white hat for our this image.

162
00:10:33,400 --> 00:10:36,150
So that is actually done where he makes it here.

163
00:10:36,370 --> 00:10:39,320
After that, I want to develop this style, OK?

164
00:10:39,480 --> 00:10:44,740
If I don't get this time, sorry, I definitely style and the disaster I just defined as white.

165
00:10:45,780 --> 00:10:50,860
OK, so the blood deepti it so white will be a hundred percent.

166
00:10:50,860 --> 00:10:53,140
So I just make that as 100 percent.

167
00:10:53,140 --> 00:10:56,230
And also I want to defend that height.

168
00:10:57,640 --> 00:11:01,250
Height will be as a 300 300 pixel.

169
00:11:01,870 --> 00:11:02,900
So now let's check this out.

170
00:11:02,920 --> 00:11:07,450
Now if you click on the Save All and now if you refresh it.

171
00:11:08,080 --> 00:11:09,540
Yeah, you can see it perfect.

172
00:11:09,880 --> 00:11:14,620
So now because he's just showing us the hourglass, so far, the results here have defined that class,

173
00:11:14,620 --> 00:11:18,570
as you call them, the six, 12 and the three.

174
00:11:18,820 --> 00:11:25,210
That means right now, if you actually minimize it, like I just make that instead of zooming, you

175
00:11:25,210 --> 00:11:30,430
can see noin, which will be zoom, then also be sure as a with the two and it will still be at the

176
00:11:30,430 --> 00:11:36,220
200, then it will be sure with the one that is very much responsible for the agency considers the bootstrap

177
00:11:36,590 --> 00:11:38,020
of the class I have defined.

178
00:11:38,020 --> 00:11:44,800
So you will be connected with our call sik's which will be connected with the call twelve and then call

179
00:11:44,800 --> 00:11:45,130
three.

180
00:11:45,370 --> 00:11:47,260
OK, so now it's perfect.

181
00:11:47,300 --> 00:11:48,850
So now that is 100 percent.

182
00:11:48,850 --> 00:11:52,330
And now we're showing our full product and there are five product perfect.

183
00:11:52,480 --> 00:11:54,300
And also it's not showing our product.

184
00:11:54,340 --> 00:12:01,780
Ismay's our product name, so that is our product price and also here showing our product and all price.

185
00:12:01,780 --> 00:12:02,080
Right.

186
00:12:02,260 --> 00:12:04,870
And here you can see still showing us our decimal.

187
00:12:04,870 --> 00:12:05,230
Correct.

188
00:12:05,260 --> 00:12:09,180
So if you want to reduce this decimal to correct, then you can also reduce it.

189
00:12:09,670 --> 00:12:11,560
So that is our old price.

190
00:12:11,590 --> 00:12:12,500
So that is our price.

191
00:12:12,520 --> 00:12:17,320
So in particular, that position I want to do on the final of the filter so that I have also one of

192
00:12:17,320 --> 00:12:18,390
the building filter.

193
00:12:18,490 --> 00:12:26,860
You can use it as a flawed, flawed format and the Flautre material would define the two decimal.

194
00:12:26,860 --> 00:12:28,150
Correct, totally visible.

195
00:12:28,300 --> 00:12:31,680
And also I want to do the same things for our old price.

196
00:12:31,690 --> 00:12:33,240
So I just simply refining it.

197
00:12:33,820 --> 00:12:38,980
And now if you look at the Savol and now if you refresh it.

198
00:12:39,340 --> 00:12:44,170
Yeah, you can see it's not showing as our decimal character as a zero zero zero zero.

199
00:12:44,320 --> 00:12:45,010
Perfect.

200
00:12:45,010 --> 00:12:47,050
And that is our title.

201
00:12:47,050 --> 00:12:50,080
That means our product titles we get down to to defend the head.

202
00:12:50,080 --> 00:12:53,140
If that means here I defend the head.

203
00:12:53,140 --> 00:12:57,190
If I need the heavy Feria, I want to add our product.

204
00:12:57,430 --> 00:12:57,740
OK.

205
00:12:57,770 --> 00:13:04,780
So here I just simply add our product name because here also we have to define that with the product

206
00:13:04,780 --> 00:13:05,430
details page.

207
00:13:05,440 --> 00:13:05,700
Right.

208
00:13:05,710 --> 00:13:09,050
So you can see that now perfectly getting our product link.

209
00:13:09,310 --> 00:13:14,380
So now I to do I want to define this on the class for make the things a little bit more interactive.

210
00:13:14,410 --> 00:13:20,530
OK, so for doing this, I like that is our figure that for the images here I want to do a hundred different

211
00:13:21,130 --> 00:13:21,670
class.

212
00:13:21,700 --> 00:13:30,580
OK, so here I want to do an update on the class as a card scarred and then card product for this type

213
00:13:30,580 --> 00:13:35,950
of class we have to actually create so that the card and the card product and for the images I want

214
00:13:35,950 --> 00:13:44,230
to the front of the class name of the maze of images and then form and also that is our product name.

215
00:13:44,270 --> 00:13:48,750
So in the product name area and what to do and define also another class.

216
00:13:49,150 --> 00:13:56,490
So you know our figure caption area and the creator of the class of the info and then Whump I OK, so

217
00:13:56,500 --> 00:13:58,890
whatever he wants right now actually I'm using it.

218
00:13:59,230 --> 00:14:07,120
And then also there is also that is a six of the six I want to define of the class and here I define

219
00:14:07,270 --> 00:14:11,590
the class as a title because that is a clever title.

220
00:14:11,590 --> 00:14:11,830
Right.

221
00:14:12,190 --> 00:14:17,950
So for the business here, I define the title and then our another two of these for our prize and our

222
00:14:17,950 --> 00:14:18,620
old price.

223
00:14:18,940 --> 00:14:27,550
So here also we have to define some of the class class action action romp and also we have to define

224
00:14:27,910 --> 00:14:30,070
another one side dec define another one.

225
00:14:30,070 --> 00:14:34,890
Is the prize as one OK, round and five.

226
00:14:35,320 --> 00:14:38,380
So that's actually all that work for funding.

227
00:14:38,830 --> 00:14:43,090
If you already know about that bootstrap evolved, you know what, that casesa whatever you want, you

228
00:14:43,090 --> 00:14:48,130
can actually design it for right now I'm actually make that things have spart my view, OK.

229
00:14:48,150 --> 00:14:55,480
So here in our expanding to this area, I also want to define one of the class class and here I define

230
00:14:55,480 --> 00:15:04,420
that name as a prize and the new OK, that will be as a prize new and also here here down to define

231
00:15:04,420 --> 00:15:07,410
another one as a prize old.

232
00:15:08,080 --> 00:15:12,490
So this type of one of the class C, every class I have to do, I have to create it.

233
00:15:12,610 --> 00:15:17,770
Every class we have to do, we have to create it, you know, are better.

234
00:15:17,770 --> 00:15:20,140
I want to learn to create it in our basis.

235
00:15:20,140 --> 00:15:21,410
HTML cost basis to.

236
00:15:21,490 --> 00:15:26,830
Well, actually, I already loaded every page just right, so you can say have already loaded the pages

237
00:15:26,830 --> 00:15:28,210
to see the basics.

238
00:15:28,210 --> 00:15:30,310
Jammal I want to create all the stylesheet.

239
00:15:30,370 --> 00:15:34,990
So if you write this is still on here, then you can access it for every page is right, because every

240
00:15:34,990 --> 00:15:37,760
page is I have already included our pages, HTML.

241
00:15:38,050 --> 00:15:40,260
So now in particular here.

242
00:15:40,360 --> 00:15:44,870
So before that head here, I want to learn to define all of this style style.

243
00:15:45,010 --> 00:15:47,050
So I just simplified restyle.

244
00:15:47,860 --> 00:15:50,240
So here I need this, I simply remove it.

245
00:15:50,710 --> 00:15:52,560
So now I the one to work, you know.

246
00:15:52,650 --> 00:15:53,570
This is tell area.

247
00:15:53,860 --> 00:15:56,150
So here I have already defined the class.

248
00:15:56,170 --> 00:16:02,400
So now we have to do we have to create every class and we have to define every siestas class in particular

249
00:16:02,410 --> 00:16:07,210
that position so you can make your side locative so better trying to continue this process.

250
00:16:07,210 --> 00:16:10,310
In your next video, I will show you that things with the live example.

251
00:16:10,510 --> 00:16:12,010
So thanks for watching.

252
00:16:12,020 --> 00:16:13,720
I'll see you the next video.