Hello and welcome back.
You know, previous video, we successfully show our product name, right, so we successfully displayed
in our home what a symbol that means.
Here you can see it's not perfectly visible.
So now one to do and actually customize it and also to the product area.
I have some of that other field.
I also want to visible all that feed with the images.
So before doing this, I wanted to insert some of the product.
Then it'll be better if we go to our admin.
So I just put that email address and the password, click on the logging and now go to our products
and order the products.
Right now I have only one product at the best t shirts that I wanted to do and to add multiple product.
Then it should be better.
So first of all, I just choose the emails and go to your exercise folder.
And here I have already created the folder as a product demo.
So now I just simply defined some of the t shirt.
So just open that t shirt and I just put that name.
So now I want to do and we use this name.
I just simply copy it.
And now here I define as a name and also category I define as the t shirt category.
And here I define some of the short description.
OK, so just no different on the job description and it will be our long description.
So here are defining it and then there is a price.
It is defined as a 20.
And before that world price was actually twenty five.
OK, so just simple defining it.
And now the do to save this say just simply save this product.
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
title so better I just simply copy it.
So but I just got beat and here I just name it and choose the email.
So I, I choose this one.
And here that is all for a different purposes actually using it.
So here that is description will be needed.
And also here a defense of the text.
So that shall be our text preview.
OK, so better I just put that as this one and then also defend the price as a 25 year old price at
35 or 30.
So now I'll check it.
And also you have to be able to say like a category and now I just save it.
So that is a true product.
I also want to add another one.
I just simply another one.
I just simply choose The Sims.
And here I have already take it, so I just simply copy it.
And now here I name it as I'm just a programmer, I used to find the T-shirt and Prevue, so here I
just simply defined find that prevue.
And also hear that description and the price at the front of the 15 and all prices of 20, and also
I define that category perfect.
Now I just look at the safe.
So here the result, just program.
I can't do it.
Can't work imagination.
Hmm.
So here I take it imagination also take it my thinking which I want to take another one.
So it was two to add product to the maze.
I see like this one I named meet the category here.
So the description I just simply defined the description and that will be our main description.
OK, and then here after that I define the price, so I just define the price of that and sixty, sixty
dollars and all of the sixty five dollar perfect for that.
So now just as I save this right now I have some of the product.
Right.
So now I have to do all the visible, all the product details in our home base.
That means here.
OK, first of all here and the visibility and after that I will create another space for the product
details.
So step by step will do that works.
Now, we don't need this.
I added some demo products and I want the visibility to front divisibility.
First of all, here we have to do we have to work in particular homepage right in our app shop and that
is our home address HTML.
And here I want to do and actually design it.
So if you want to design like the resource for loop into the Falu before I have all on this display
I want filled so better, I want to do the first of all define some of the success of the style.
OK, so here I am.
I want to learn to use the boot straps on the court.
So here I, DiFonzo Dave and into the Dave.
I want to do all the use of the container bootstrap plus as a container.
OK, container and then am I the best of my five.
So I just really with this my five and here after this I take our actual attack and here also for hours
to take out the front of the class I defense on the class and I just define the class as the same as
a m five.
OK.
And then here will be display as a feature product feature product.
OK, just name it as a feature product.
And now here I want to take another Dave.
So here I take another Dave and that is defined as the rule.
So in particular this so area I want to do and define another Dave, in particular that area.
And here I want to do under the rule plus.
So that is a call that is also one of the bootstrap class.
As a call employee, I want to define it six and then call s.m.
So just somebody will call s.M 12 and then call L.G..
So here I define the the three different that's all actually bootstrap class.
So if you already know about that bootstrap then I think it's very much f it should be very much familiar
to you.
Right.
So no one to do undertake another figure.
So I just simply defined as a figure that is one of the standard tag.
And here I want to do an attack on the class.
So here I define that class and by that position I want to do I want to display our image for the display
that emails I want to create some of the specific class for a specific space.
So right now I define that figure and then the Dave, I take another one.
And here in particular, that area on the show, that image is that the image tag and the image area.
So here I want to display our image.
So that is the image tag I want to display.
And also after this.
OK, after this, Dave, I want to talk I want to take another figure caption.
So here I define the figure.
So here a define the figure caption and the figure caption area.
I want to also define some of the class we have to actually create some of the class for that is look
at as per our demand.
OK, so this simply depends on the class.
And here so here I wanted to show our product names.
So here we are trying to define the eight six today is six area and to display our product name.
And also we have to do we have to display our price.
That means our world price, our recent price.
So for doing this after this six year, I to do undertake another day.
OK, just take another Dave.
Sorry.
Here I want to do and define another Dave.
See the Davidia.
We have to also create another class for this one right now actually define all the deb.
OK, so let me use some of the as far as specific every.
So now I have to do and defend this pen, OK, just simply expand into this pen area, I want to display
our prize.
So here so here I want to display our prize in particular that area.
And also I take another one.
I take another one.
And here also I want to display our all prize and then that's all there.
So it will be needed actually to know what to do and to make the things a little bit a little bit closer.
So that is all Dave and then all Fieger Fieger ception and then actually the figure and then the tape.
So that's all that our tape.
OK, so now we have to do we have to segment it like here.
That is also the reason for it.
So into the for area, we already get all the raw data.
Right.
So now we just simply got it.
And after this rule, after this draw here, I just simply passed it.
OK, so that the two Dave.
So before that too, they want to to finish out this and that means and for so before to at assembly
and it and no one to do and the visible all product names.
I just simply cut it and here that is our figure class and here are the images and that is eight six.
So here I want to do and display our product name and also with this product on display at every field.
So here there is with this product I want to do and to display our if you go to our model that we see
in our app shop, it is a model area.
I have defined all that or feel right.
So therefore the price, I have defined that filename as a price.
So now I want to do on display that price.
And also I want to display our all price so our old price will be visible on here.
And also after that there is our emails.
So now I also want to do and will display that image.
So if you want to display it.
So here, here in our media, OK, into the media here, we have to defining it.
So that is our product.
So with this product, I want to display our image within our image filename.
I have defined as a mainly meseta, simply copied, and now here I just simply refining it.
OK, so that's all.
So now it should be display all the details.
Now let's check this out.
If you click on this table and now if you refresh it.
Yes, you can see every product is now visible with the images, so now I want to do I want to actually
put on the white hat for our this image.
So that is actually done where he makes it here.
After that, I want to develop this style, OK?
If I don't get this time, sorry, I definitely style and the disaster I just defined as white.
OK, so the blood deepti it so white will be a hundred percent.
So I just make that as 100 percent.
And also I want to defend that height.
Height will be as a 300 300 pixel.
So now let's check this out.
Now if you click on the Save All and now if you refresh it.
Yeah, you can see it perfect.
So now because he's just showing us the hourglass, so far, the results here have defined that class,
as you call them, the six, 12 and the three.
That means right now, if you actually minimize it, like I just make that instead of zooming, you
can see noin, which will be zoom, then also be sure as a with the two and it will still be at the
200, then it will be sure with the one that is very much responsible for the agency considers the bootstrap
of the class I have defined.
So you will be connected with our call sik's which will be connected with the call twelve and then call
three.
OK, so now it's perfect.
So now that is 100 percent.
And now we're showing our full product and there are five product perfect.
And also it's not showing our product.
Ismay's our product name, so that is our product price and also here showing our product and all price.
Right.
And here you can see still showing us our decimal.
Correct.
So if you want to reduce this decimal to correct, then you can also reduce it.
So that is our old price.
So that is our price.
So in particular, that position I want to do on the final of the filter so that I have also one of
the building filter.
You can use it as a flawed, flawed format and the Flautre material would define the two decimal.
Correct, totally visible.
And also I want to do the same things for our old price.
So I just simply refining it.
And now if you look at the Savol and now if you refresh it.
Yeah, you can see it's not showing as our decimal character as a zero zero zero zero.
Perfect.
And that is our title.
That means our product titles we get down to to defend the head.
If that means here I defend the head.
If I need the heavy Feria, I want to add our product.
OK.
So here I just simply add our product name because here also we have to define that with the product
details page.
Right.
So you can see that now perfectly getting our product link.
So now I to do I want to define this on the class for make the things a little bit more interactive.
OK, so for doing this, I like that is our figure that for the images here I want to do a hundred different
class.
OK, so here I want to do an update on the class as a card scarred and then card product for this type
of class we have to actually create so that the card and the card product and for the images I want
to the front of the class name of the maze of images and then form and also that is our product name.
So in the product name area and what to do and define also another class.
So you know our figure caption area and the creator of the class of the info and then Whump I OK, so
whatever he wants right now actually I'm using it.
And then also there is also that is a six of the six I want to define of the class and here I define
the class as a title because that is a clever title.
Right.
So for the business here, I define the title and then our another two of these for our prize and our
old price.
So here also we have to define some of the class class action action romp and also we have to define
another one side dec define another one.
Is the prize as one OK, round and five.
So that's actually all that work for funding.
If you already know about that bootstrap evolved, you know what, that casesa whatever you want, you
can actually design it for right now I'm actually make that things have spart my view, OK.
So here in our expanding to this area, I also want to define one of the class class and here I define
that name as a prize and the new OK, that will be as a prize new and also here here down to define
another one as a prize old.
So this type of one of the class C, every class I have to do, I have to create it.
Every class we have to do, we have to create it, you know, are better.
I want to learn to create it in our basis.
HTML cost basis to.
Well, actually, I already loaded every page just right, so you can say have already loaded the pages
to see the basics.
Jammal I want to create all the stylesheet.
So if you write this is still on here, then you can access it for every page is right, because every
page is I have already included our pages, HTML.
So now in particular here.
So before that head here, I want to learn to define all of this style style.
So I just simplified restyle.
So here I need this, I simply remove it.
So now I the one to work, you know.
This is tell area.
So here I have already defined the class.
So now we have to do we have to create every class and we have to define every siestas class in particular
that position so you can make your side locative so better trying to continue this process.
In your next video, I will show you that things with the live example.
So thanks for watching.
I'll see you the next video.