Hello and welcome to the video.
So now in the previous week, we have seen how to implement the Arab section of the webpage and this
road of NZ, how to implement the home page and the products that are present on the homepage.
So there is one small correction from the last video in the last video I have given this class name,
but that icon.
So basically, we will prefer since the court is a combination of both icon and this basket count.
So we have to give the plus for that division that these both elements are present.
So that's why I've changed the class name from here to here.
I gave the class name for the new and the stylish same as before the item basket and basket count.
What are the same steps?
So this is what the change from the last few days.
No moving on to protest VIDEO.
So now let us take the homepage.
So as I said, we indirectly work with components have completed their component software component.
I'll be having foam component to.
Threaten to create a bomb on current.
So they're going to have to create a component of their own gets.
And then still CSIS.
About the war on drugs, and then I'll be using the snippets.
So you can see.
Now you can import the Jack.
Don't react.
And then import the stylesheet of.
OK, now we are going to go.
And yes, I have to import phone on component.
Now it's done.
So now, instead of on the as you know, like there is an image, but it and then multiple products
like these products are also there are two in one row, three in that one in the other.
OK, so now we can see how we do that.
So first, we have to create a def con.
They've called home.
OK, in fact, this will be having everything.
So inside this are to create another difficult phone container, which contains the imagine the products
now, everything the home contents so dark.
Home.
Container.
So that's creating.
The line said the home container will be having image.
So what image should have?
So imagine with the class name of former image.
So I like the sort of image, as you can see, oh, if I see what sort it out, I'll be using this image
so you can use any image that's up to you.
You can change the height and weight in your KSAZ felt so amazing this image, the source will be this.
And the alternate I will leave it and the class then will be for me, which now subject.
Imagine and then the closing tag is done.
OK, now after the image, I'll be having an.
OK, so.
As you can see it.
This is the first straw where we have to price.
And in the second period, having three products and then the third having one product, so we can have
as many laws as we want.
So now I'll create rules.
Once the image is done.
Country battles are not.
Right.
Yeah.
Not for.
Pro nuclear.
So you can create as many doors as you want.
And we're getting $3.
Yeah, so no, that's fine.
So inside each row, we'll be having multiple products.
So, for example, in the first row, I want, as you can see, I want two products in the first two,
so I'll be using two product components.
And in the second row.
I mean, in the first round, I want to protect side using two product components that similarly contributors
so many products you want.
I want three products here.
And then one product over here.
That will do good for me.
Yeah.
But I've created products, it's got a lot to do as a created the product component, I have to create
the component in my sauce, right?
So I create production product versus.
Let me get to that CSIS.
So.
So in the home, I have to import.
So these imports things like it's manually have to be every time you create components, something which
is basically the stuff you have to do every time.
So let's import product.
Prime time product.
Basically, the snippet.
And then in Pretoria, Tennessee, is a.
OK.
So now, once we are done with technology after that, as you can see how our web page looks like it.
So this is our opinion of tech because as of now, there is nothing in the product.
So we'll go and read this product or just find.
So instead, the largest after a difficult project.
OK.
So fact this started like, as you can see over here.
It consists of three things.
Match the button, the rainfall and also the looting.
So basically this is the project painful product info, which is the product rating.
This is the product image and it is the red basket.
So I'll be creating each and every one of them.
So first thing, we have to create this product for.
Yeah, so inside the product, before we let up, Peter, that is the title of the product.
And then another between the class and the product price.
So let me give some dollars, 30 like that.
So there's going to be the belief that those like, as you can see, the title is this and the product,
I am on business.
After that, we'll be having a product waiting.
OK?
Inside the product in Fort Lee will be adding up, not product creating new.
And the Bible in it.
Yeah.
So inside the product trading, let me give ideas like stats for this purpose.
So let me.
So as you can see.
And that starts off and check.
Not only that, it's not already.
Hmm.
I'm not able to find them.
So you can like can find where those jobs will be.
Here I am not able to find and like, let's join in.
There are no stops.
I got them, so this is the start I'll be using.
Let me use some free stuff so that this stuff will be fine, but it will be a project rating.
So after that product, before we are done with the product being stopped by now, we have to have the
product image.
So after dying for will be having image.
But sort of like, let me use this email as the source only.
And then there you are, like this and then Ali pasting it over it.
So you can like just to be a product.
Imagine like that if you want, but it's not necessary.
So fed up image will be having the button.
So the bottom will be look at the basket.
OK, so this is basically the product we have created for Latasha, so we got see as you can see, tighten
rupees 30, this thing and that product image.
So now as this looks ugly, we have to do this.
These are styling, but says, as I said before the styling part, you need to concentrate on the styling,
but you can just go through what's happening in the styling.
But then you can use the Thailand method to see what that style is suitable for the page or product
or any other component.
That basic model used to learn react content and how to working with React not to see as a swap.
OK.
Try to be doing those you know, to show you.
So as you can see, I've completed the product of of Orthodoxy as an index starts to assist with the
styling part.
So let's see one by one in our thesis for the product.
Do that is flight time should be flex so that one will be decided on it.
So every product should come one after the other right now in a given group.
So the first direction is column.
So you're in the product of the flexitarians column, because in each product, like if you see one
that faces the will be display flex because everything should be one bill other than the products in
the home that already present.
But in the product, it should be one of one below that the Flex Détection, because if you are having
yet the the title below that price should come and then be another place.
We should have the project product rating and then the product image and then at the bottom.
So they should be in a column format and then the justify conflicts.
And you can add all this margin padding to my excitement when this will be playing the clarinet amateur
you, the district, for example, if I can margin as two pixels, you have to see what's happening
to our website.
See, there is no space between 18 and then I need to look.
It looks at me, so I have to give.
Benefits and so that you can see that there is more space between products, they and then the split
product trading should be flex because inside the product there are two elements.
One is that dollars and whether or not that is the price.
So you can see part of this.
I have just one correction and said the product price last brought at this, I gave the dollar sign
a different element that is one and that it will be strong.
Okay, we can use these kinds of elements to make the page look more beautiful.
And then you plug again.
If you follow the suspect, the image will have certain styling.
You can see object.
So what this object, that kind of object for content does is that it will not change the image resolution
if we change the height of the image, so the resolution will be maintained.
So product button has some background at border color will be three of eight different colors.
Price will have a margin branding for reliable height and margin.
That is what the product set and warmed up chances.
We have to add this styling so the Honda elements are in a flex and we may need to have somewhere to
Z next to the Z index minus one means.
As you can see here, the image is underneath the product section.
So if you give, the index is minus one day, the products will appear on the image and margin bottom
minus if you give this as zero.
You can see the products came down a little bit after that image.
The products will appear.
That's where I'll give minus 50 pixels to make the see.
As you can see, the products went up.
So these are the and then mosque image linear gradient like the image will be gradient from top to bottom.
That color gets like $10 you want to here.
So you.
And then.
Home rule, home rule display will be the next one, as I said, the rule should be able to make sure
that stays in the index is one in the margin at the margin.
When the Garcia says you have to add one line that is the background color white.
So in broadcast, yes, if you give the color to the product, says White.
This is not exactly right, giving some greenish type of color, as you can see over here.
So this is what it should look like, basically.
So with this, we can see basically we have a hardcoded, the products we have.
We gave everything the same patent, the same image in the same bottle.
So now in the next few days, we'll see how to get a data dynamically using props like for the same
product component, all the get different data using props that see in the next room.