And let's just go to Ed and let's create now a home component.
To the home component will be the landing page, so the landing page will be the home component and
we will create that component inside an adult photo here.
Will create another folder and source that will call it.
It will be called pages.
Inside the pages will create a home page rank who will write Home Dart, yes, we'll say it again will
use our trick to import the boilerplate code that is autopsy.
OK.
You know how it will operate for the home dog?
Just fine.
So now we'll write the code for the home dog.
Yes.
File.
For now, we will create new lives.
That is who will create the new district and one will be the home do.
Bonnie, and why this auto report some dumps home homeless and another one will be end up going in.
You can call it whatever you want.
I'm calling this because of the CSIS.
We've used these glasses only so inside the home container, inside the home component.
We'll provide an image, some text and a button.
OK, so there will be an image, a background image, so let me just first provide background image.
So I need to import that image.
So let me import, import, let's call banner from.
Again, we need to go to the assets folder.
Asserts then that would it be in the cold?
Then.
Yeah, it's been there, WPLG.
But we do call it or GP.
Mr.
Or to some, I call on him.
So now this image is important.
Now we want to use it in our main content, right?
The main container, we want to use this image.
So how you lose it?
So we'll provide in line CSO styling for this and we'll give you all of the image like the source of
the image and then it will be rendered.
So we'll provide as this.
This will provide the style that my bag.
And inside the state AG, we are going to provide the thoughts, right?
We're going to provide the source of the image.
So first of all, we write background image.
I can only meet.
And will provide a colon, and here we will provide the source for that we will use tactics.
Then you will write you are an.
And then bring it forward fantasies and say that we will provide a dollar sign and then we'll provide
the name of the image so that this banner.
Right?
And we just say it.
OK, now when we go to our browser.
And we just refresh.
We don't see anything.
Now, can you tell me what the reason because we have not imported our own dogs file inside the app,
which is abroad?
Yes.
So that means we need to import.
We need to import home instead of abroad.
Yes.
Otherwise, it will not be rendered.
Let me import home from.
Not component in security pages, slash.
OK, so I have to import it here, and I will provide ah, I provide router how the routing needs to
be provided because we will be navigating to work and we will be like going to the home page by creating
the home link.
So for that, you need the router right for so that we have the complete routing.
So now I will provide a full stack switch to.
And this will be also on this be needing a closing bag as well.
Now will provide about.
Why I'm messing up things.
No doubt.
And now we have to provide a part to the like what will be that you are on to this part.
So it will be home slash means home and then we'll provide exact.
Component.
And this means the exact component, which we want to render ongoing to this, you are on this issue
of for that which provide equal sign and then provide the name of the company.
That's it.
This is a service going back and when we close it and then we say it.
And now we go back to a browser.
And we refresh it.
Still, we don't see an image.
Do you have any idea why this is happening?
Because we have not provided anything inside the device and we provided the texture and now it's not
showing up.
So I think that is something wrong with the Abdel-Aziz.
OK, here is the mistake.
We wrote powder instead of out, so we just right around here.
This is the road actually touted as the outer part and rounder than a box.
So let me just save it and just go back to the browser.
It's already in the browser, so you can see that is the image is also there, and that is the home
is also there.
So when we go back to the, we escort.
This is what we have done, we have changed the culture and we have changed the name.
It was an outrage and we are changed to rout.
So what is that, OK?
So this is what we have done.
Now we need to do some more styling here in the home, just so we have to provide.
We have to provide each H1 tag and then we have to provide data in which we'll write some text and then
we provide a button.
So as simple as that?
So let me just provide an H1 bag.
It is already there, which will say, like old Ghana, maybe.
Yeah.
Then we'll provide a feedback.
Maybe you can I just be.
Yeah.
So will I like Indian food and all these items caps that will be more attractive Indian food, a like.
Alright, then we'll provide a button.
Turn over here, which will see.
Order now.
And we should see.
And this is what we need to do and will also provide a link to this button, like when we create when
we click on this button, so where we'll go.
So let me just quote Link first import.
Important link from Bali from the air cargo line, obviously.
And then we just.
Rabbit, the Spartan.
Cross.
Only.
All right.
Can we just wrap this?
OK, and when I say it, so and then I go back to the browser.
And refreshing.
We crowd does not contain any.
OK, I made a mistake.
Let me just show you what a mistake I make.
Can you guess?
So this link should always be in curly braces.
They want these mistakes and making just to, like, make you aware that you don't need to make these
mistakes like this are important like small things, but they sometimes like ports are in trouble.
So when you go here, OK, we have a button.
We have this right feed that we have this, but it doesn't look beautiful, isn't it?
So because we have not applied any styling so far?
So let me just go back to the way it scored, and let's just import let us create the style for the
home.
Yet so again, in the style styles for love will create a file, which will be.
Home, dark east and inside this home, Nazi SS, I will be a star.
So USO's, which I've written earlier for this androgynous component.
Let me just be.
And let me assure you from the beginning, we have some idiot here, OK, I don't need this.
From the beginning.
So these are the normal things, like I've configured some font and all, and there's nothing to be
like surprised.
You can take a look at how you can take a look at it from the beginning that they have used this style
start this dot CSIS for the map for the home, dirtiest file for let's just save it.
And this will not be reflected because we have not imported it so far.
So let me just important, but let me just import import.
And then we knew the right location.
That is.
The styles and by the name of the five letters home to get us and my column, and then we say, and
I hope now things will look beautiful and let me take, let me take you to the.
And here we are on the browser, you can see the things look beautiful, but that is a little bit of.
This thing should be on the left hand side, so we'll make it using Cecil, but now the outside looks
more beautiful.
It looks more attractive than before.
Oh, no, maybe this looks in the same because we have no ability to abduct CSIS file for the memo you
need.
Remember when we were cleaning cleaning up the things, so we deleted some of the things to abduct scissors,
what not and was not deleted.
So we deleted.
We not actually deleted.
We didn't just delete the thing here, and we'll provide some small piece of CSIS here and we'll save
it.
And then when we go back to our browser, you can see this looks so beautiful and this is what we were
trying to create.
Now the next thing we need to create a photo like a photo is very, very much needed for our website.
So let's just quickly go and create a few dozen photo will be in the components.
Let's just create dot footer dot g's file here.
Let's just use our trick, which is the snippet to our app.
See?
And this will give us the boilerplate code.
So I will delete this here and will create another layer which the with the idea of filter.
So we'll provide water.
And then again, we'll provide another one, which another day, which I do with the class name of social.
Media.
Media, OK.
And in the photo, we'll be providing some icons.
You already know what the icons are.
So we are going to use material way for the icons.
Let me take you to the website of material way, and let's just go back and we'll search here for maybe.
You click on this and we will copy this right to.
And.
The.
We'll go back to our escort and then we pasted.
Then the.
Use Instagram.
We'll get some important all the icons.
And now let's just use them, so we use them.
It's like really, really simple.
You need to just put the render the component which is there so like in star and guitar icon.
I don't know my or to suggest is not working properly, so.
Bear with that post will be Instagram's second will be.
Water.
And it could be a set if it will be a self-closing tag.
Next, we will be having Facebook.
Facebook, I can.
Next, we'll be having Lyndon.
Lyndon.
And we just saved.
Now we need to go to Agadez and import this water, so we'll provide the name as.
Fulton.
And probably it gives an option to or been caught, but it's not giving us so.
I think now it's ordering important.
We save it and then we go back to our browser.
OK.
We have we have done this and we have imported food out here.
We we imported this all of the icons here.
Are you really sorry if you're not even able to see that coating part?
So we have done this.
We have imported these icons and then we have imported this on air and then we ran to abductees and
then we just we just imported this water and this rendered it inside help.
So that's what we have done and we see an error here that is a confused look in this icon is not foreign
to let me go to photo.
It is online and what Facebook I can.
Facebook account is the problem here.
We imported all of the icons and we were under no deal.
So let us go to the browser and see how this looks.
And let me just go across, OK?
We have the icons here, but they are not so well.
So we'll do it.
We'll do it, as does not a problem with that.
So we go back to we escort and then we just provide something upbeat.
I also hear it will contain.
Copyright information have been tight, though.
And.
Poppy, this is for the copyright symbol, and we'll try.
Maybe the name of the upside Indian food or.
Copyright.
Printed on day one.
OK, save it, and now we are going to create and other styles are a scissors file for this.
Odds, yes, we'll call it for CIUSSS, but they're not so yeses and.
We'll be importing this inside, are that dogs and.
A thesis file for this is also like similar, but it's like really, really simple, so I'll pass this.
The others, like very small and then we close it, and the important thing inside our portrait audience
will be this import.
And we do try to go back to the.
Go back to the styles.
With the style and then you need to import.
Well, to start CSIS, that's it, and then we say what?
And then when we go to the website and the browser.
OK, you see, a photo is being rendered, so that's a really, really important thing, and we have
the board, we have the home page that is the language we have the photo.
Let me just make the size of the icon little bit smaller.
By going to the footage or CSIS, let me just get me the depictions.
Peter Egg here is also not coming in the sand.
So let me just make that in center, so the beat shouldn't be outside of this tape.
So let me just bring it and then save it.
And now, if you go to the website, now we see, OK, this looks neat and this looks so beautiful and
neat.
This is the message is the corporate message.
These are the links and these are the icons of our social media handles.
So that said, we have covered a lot.
We have created a number, a homepage or we can call it landing page with this image, this button and
everything else.
And we have created a photo.
So in the next part, we'll be creating this menu page right here and we'll be adding links to this
website and these buttons like menu and this all.
So that said, thank you, we'll see you in the next part.