So in this video, we'll see how to start creating the header of our website.
So the final hurdle will look like this, though, e-shop tighten the search bar signing for logging
and authentication and your basket item where you can find the checkout items in the checkout amount.
So this hair dark part we're going to build in this video.
So basically, we are going to build this complete.
It.
So now we are going to divide the divide this header into three divisions.
So the first division is Heather.
The second division will be held search by.
And the third division will be had that navigation, so inside the head, that navigation will be having
another three divisions.
One is for the signing and one is for the yacht shop icon and the other one is red basket icon and Belmont.
So basically, this is what we are going to be.
OK.
So.
Here we are now in Sarah Clark's name app, deaf, so internet app, we are going to create the header
component, so as you know, in the act, will be dealing with components, so we interpret the whole
website into components.
For example, this header will be one component and then the home page will be component.
And this individual product will be a component.
So how to parse data from one component to other as props and also use the reducer hooks for that purpose
using the React Context API with celebrity?
So this is how the page will look like.
So first, when going to header.
So we are going to create the first, that is the law.
So let me create the first two.
So I created the first hurdle over, so the shortcut, I'll be using it, I'll be using a Mac, and
that is a tool that will be helping us easily to create divisions with class names.
For example, I want to create a class name called temporary.
So don't I have to use Dart Temple Ready and then click Enter so it will automatically created division
with the class name temporary.
So to enable this, we have to follow three steps.
So you have to follow these three steps.
You have to open the scoring after you click control plus comma.
If you are in, windows are commonplace, combine Mac cycle control plus comma.
You will see this window opening and insert settings search for a Mac.
So when you go item, you'll find I might include languages you have to click on add item and item,
plus add JavaScript and in the value place.
Add JavaScript react as mentioned already.
So when you apply these rules and then click Control Shift Copy and then reload your window.
Once you're in on your window, you can you can use dynamic shortcuts for willingness.
So, OK, now I have created love for her that Laura.
Now, I'll created the first search by so as you can see, we have to create for her to search, but
technically it.
Doc had that search.
So there is a rear window positioning, yeah.
So I have to one search for the sitting still.
Let me go to Settings once again, follow these three steps that I show doing it.
Light item, it is JavaScript.
So as you can see, I lost the Settings related order, so I will have JavaScript and JavaScript react
in that value so that I can use the shortcut.
Click on OK, and then you have to close this in advance of the pitch.
Now you can see you can use that shortcuts, and I'll be creating a of such do not further.
Search and then click Continue.
We are getting a deal that is automatically created.
So we are to this.
Now I want to create a navigation order to create this.
As I showed you advocating this, do not.
So that will be hard enough.
And not now.
Now in Senator, now we are going to create three divisions.
OK.
That will be item division today.
So.
Now, I don't know, I'll be creating these three lives, but three items.
So now in each item, as you can see in each item, we're having two lines.
One is the longest sign in your shop and then your basket and then integer value.
So we have to again create both banks, right?
So I'll be creating a span watch band that is its default inline block, which will take the exact amount
of space that the content within it has.
So I instead now double data span the class names.
Now.
Item Lane one.
OK.
And then I'll give it a name like hello against.
In August.
And then again, the same procedure I'll be doing now, Item Line two.
Simon.
So this will be the first item, the same, I'll copy the rest of their lives as well.
Have to change this thing.
I try to be creating your and then here will be shot.
So you going to be a basket?
And then this in, for example, let me say zero.
So now what we'll do is instead of basket will be using a basket image.
So we want this image right?
We'll be using this image basket image.
So I'll go get basket image, but this will be using material you like.
So let me throw the material away.
So immediately, I have and started using this come in so many ways react to technology or framework
and call where we can get our icons and images like stuff.
So now how to install it?
I'll be going to the terminal.
I'll be in the folder.
Like since there is no we are running the app in the terminal.
I'll be using another terminal and we're going to new terminal.
And my Deidre will be going to the shop.
So now I have to follow these two commands of code, as you can see.
NPM install material you code.
And then once it gets into early afternoon style icon material, the icon.
So long as you install a material, you know, we have been stuck and you've been, I mean, since you've
read material.
You write icons, Venezuelan style icons, and now you have to search for icons.
So I will be searching for icons.
Yeah.
And then you can search over four icons, components, box, live inputs, navigation services, feedback,
data display.
So can you go through the documentation style system?
Everything.
So now here I'll be searching for we want a basket on.
All right.
Shopping basket in the materialI concession shall be taken on Dec. two, so you can see you can find
many Bousquet items like you are getting this item, search for icons or here.
So I've got two icons on its sports basket, and every shopping basket will be using this shopping basket
icon.
So as you can see, we can import the shopping basket with the line of with this one single line.
So this is the beauty of materials, right?
You can import whatever icons we want with the single line.
So as you can see, it can also add attributes when we are using this, we can use props such as font
size, large font size, medium on foreign text one.
But let me put this first.
So my installation service was like a now, including I have to import adaptogens.
No.
So I can use this shopping basket icon or instead of basket.
I'll be using it here in here.
Shopping basket icon.
Outside of Beijing, Foreign Secretary calls to large.
That's it, so with this.
We can.
Create a shopping basket icon, and then I've created the three items and then let us see how upset
it's looking like, so you can see everything is created, but it is not in the correct styling manner.
So now we have to access to the components.
And also in the logo, in the aisles, I'll be using a, you know, a lot like this symbol that I am
using the store symbol, so and search for the stored symbol.
So you can see there are so many stalled foreign fronts, I would be using this thing.
This copy this.
And then you can paste your over here.
And in the header logo, you can directly call this.
Shopping storefront icon.
So that's it with this week, and we'll be done with now, but that's HTML coding, but now we have
to do with it, do the serious part.
So here I'll give this a class name.
As that little boy image.
And font size will be large.
He had no need to use funds as large because it is a it is an item, we'll never know what should be
allowed and the remaining should remain in our country or not or what shareholders funds you give this
and then I'll give a hedge to attack of it.
Class name.
As I said that, I don't know what I did, I.
And the title issue.
When you say when you look at the website, you can see, like we have got everything the content we
need in the header.
As you can see, but we have to style it, OK?
So annoying search in search.
What I do is we need a bomb, right?
Like that that's such a controlled Echo Input, but what it.
And Typekit protection class name will be.
Her that searching.
You can do any classroom next time I prefer, I prefer to use these kind of classrooms because it will
give me more detail about what I am doing.
And then I need this search, I can write it, president, any of this search I can, I'll work on.
I just find the search icon.
OK.
I prefer it here.
You can see the search icon where you can directly imported.
Like this and then use the icon over here.
But.
Class names, I'll give this class name so that we can style this at the.
Search icon.
Yeah.
So now we are done with the family, but now we have no stylist.
All the all the classes we have to file, we have to target them inside the boxes.
So as I said before, we will deal with components.
So we have to use the header thing in a computer and try to create the header component.
And that Dodger and Dodgers.
€13 hydrologists.
And then Alligator did not see us as well.
I'm using the snippets of Visual Studio code for.
Is the creation of the function and export default that the remaining can import?
And Port react and react and.
Another CSIS.
So once we're done, we can copy the copy and paste the whole cultivated, for example, the header
from the header thing.
We can create a new class here with.
With the title, had that OK, and then we can patch the whole code that is present over there from
the logo to and.
Had other guests.
So that's good enough.
So we've completed this.
We can just call the over here.
And then important.
Import from abroad slash.
And then this icons will be using hadrosaur, so I'll be importing these icons already.
Further, OK.
There is no added, so they've completed the successful creation of the company, and now we'll see
the styling part.
In the head of CSIS, what I need to do is I have to fight each and every element so that to give the
look like this, so to be so something that isn't so this is a risk project will be dealing mostly with
react concepts, other then styling.
So I'll give you what styles like these styles will be telling that are like the position that are in
the display, the border, the padding we have to you have to basically trilateral, which suits the
best way possible and you have to do that.
So I already prepared this project.
I will be using the scissors first already that I have been used and then expand what is happening.
This is the same with our concentration will be more on the React pack.
But I can see to her part.
So we have what we have to do is we have to give that last names to the basket icons and the count that
we are using over there.
So this class will be item basket.
So that we can strike it properly.
And then here and here in the line, too, it is also in the future when we are shackled, when we are
doing checkout page, we have to update this dynamically version of the item line.
We have to give it another class.
So that is basket.
App Basket conflict can we can name it anything, but we have to make sure that the class that you use
them to get.
You have to use the same class and introductions and I want will take a look at the case file, so I
have to style the elements over here.
So basically, the hitter will be height of 16 display flex.
So what does display Flex will be doing this?
So I'll explain this to you.
So as you can see, we are done with the header.
So basically, when we don't use display flags, the elements inside the dome will be getting stacked
in a column like in a column basic thing like one below the other.
But when we use this display flags, all items will be beside each at one another like this.
So this is what the Flaxmere makes.
If you use the Flex Directioners column, this is what happens if you use the Flex that if you use the
display flex and don't mention any flex direction, this will block the stacking order will be OK.
So now I display Flex here.
So that all that in the inside the header, plus all the divisions will be stacked one beside the other.
So everything the all the divisions are one beside the other, OK, in the air that nobody gave a color,
I gave this prayer flags, so I gave this flex because if you go to had that.
There are two divisions and there are two items.
One is logo and one other is hedged.
So we want both of them beside each other.
So if you give, they will be beside one another.
If you don't give flexibility, see what happened.
And then if I comment this out now, as you can see, they both are one below the other.
So the Flex is very important.
We'll be using it multiple times.
So and then the global image I gave a margin global title.
I delivered the next decoration as an unknown border.
Such display, Flex and then Flex will be one, this is the index that you can give as a factor alone
items, centered border areas, searching posture.
These are all day for like the trial and error thing you have to search and do.
That's why I didn't even have item now item I gave Flex because there are two things inside the NAB
item I have to give Flex and I have to mention the Flex Directioners Column C because if I don't give
this year's column or let me come this line out.
They will be one beside down to that, but we don't want one, we surrounded, we want like both of
them, one will also have to give flex direction as column, so that will get one below the another.
So and then the item line one foreign says Item Line two, there will be a foreign state and foreign
trade item basket, as you can see a display, flags, satellite items and these are reading margin
left and right.
These are colors.
It will be on the stylistic choice that you make.
So.
So this is basically the implementation of the header using react components and as well as the ambulance
cases.
So in the next medium and see how to design the home page and up products, each product component and
the home component, I'll go get this image was going to be made over here and the product component
how to parse data from one component to another using proximity in the fridge.
So that's it for the.