Now, if you go to the website, you will see no changes and there is no problem with anything refreshments,
although you don't know.
You don't need to refresh the website every time because because.
Like, the server itself refreshes the page and and if you and if you go to the website, you will see
that the server has refreshed the website automatically, so don't need to refresh every time.
So you just have to save the changes which you want to get reflected and that those changes will be
reflected automatically.
You don't need to refresh.
OK, so now that you have RGB, the never inside the router looks good on there.
But again and here we will be using links on the right hand side of the ball.
So let me just.
First of all, let me just import link, which is.
Inside the car, Liberal says, don't forget to do that link.
From the crowd or don't?
As simple as that, you imported the link.
Now I'll explain what is Link?
Let me just use it once, so.
Link.
Then you have to write to this means like where your link will be redirected, like where this link
will go, their destination of the link.
So this will be just home page for us for now.
And of course, this will be this will need a closing tax link, will need a cruise and get this is
not a self-closing.
You need to keep in mind us, so it will name is hope and will name it all.
And we'll make it like three more copies one for contact, one for about us and that search and one
for the menu.
Yeah, but we'll just name it like menu and the next one would be.
About what about us, we can call it anything.
Then you can tell there's one contact.
All right.
So let me just save it.
And let me just go to the website.
OK, so you can see the links, although they are very, very small because of the size of the image,
so we don't need to worry about it.
So all my new content about and contact.
OK, so you can see this right?
So when we go to the school now, we have like created the peace like the peace garden of a nearby basin.
Logo image basin, the links on the right hand side, which we discuss.
So now we need to look.
Look.
Now we need to look closely and we need to make it look beautiful.
So.
I will create another folder here, which will be containing all of our all of our styles style, meaning
all of the CFS files, so I will call it.
Maybe Styles pulled off.
So inside the stalls will look, I will create.
I will create all the success files to all the components, different different components.
I will create different, different CSV file store.
There's no problem with that.
So in the style folder, I will create a file name as nav bar dot CIUSSS.
And hell, we will ride the sea escorted to our offshore never by dogs, so I'm not going to ride like
CSI from scratch because this is not a CSIS thing we are learning.
So yesterday we are more focused on the act and we are more focused on learning that yesterday.
So we'll just be focusing on React and we'll just use the I've already written the CIUSSS earlier for
this and I will be using that CSIS, so I will be explaining what is what, but I will just copy and
paste the systems, which I agreed to earlier for this component.
So let me just start here.
So here it is.
But this is the success or the no.
Don't just fail.
So as you can see, these are the normal things which you do in CSE's, like with and hide and background
color and all of that thing.
So.
That's it for this CSIS file.
Let me just show you in a let me disclose the.
It will not close.
Obviously, we can just minimize.
OK.
So let me just show you from the beginning, these are all the CSIS file, which these are all the CSIS
code, which is hidden inside the now Bardot CSIS or below we we have we have used.
So let me just apply the CSIS to the never let me just take control as they would.
And let's just go to the border.
So and now we go to the browser that we see or why I see it, this is not applied yet.
But this is a question which most of the people on like get and they get confused why it's not showing
up.
Why it's not going up, so everything is as before, so why it's not showing up.
So let me tell you why it's not showing up, so you need to import the cso's file here and inside that
never bothered.
Just find.
If it's not important that Texas will not be applied to the snowboard or just component to how you will
import the it's really, really simple.
So you write import and then you will not provide any name, you will directly provide the location
of the file of the see us file.
So let me just provide a location which is styled slash.
Now, Bond Dart, CSIS.
Court CSIS.
All right, let me provide a simple column and then save it.
I hope now the CSO is applied.
So let's just go to our browser.
And let's just be.
It is fresh.
OK, there's a problem here, module not found tiles now.
OK.
We have misspelled something, we have misspelled the word in there, but that is never not about my.
David, I mean.
And us go to the browser.
Fresh.
Oh, wow, beautiful.
You can see that the robot is rendered here, and all of the styling is applied to the never bought
head, it is the logo.
It has become small and had other links to the pages and the background color and the color of the font
is really, really awesome.
So this is the magic of success.
It's it's applied.
So let's go back to the browser.
And one more thing before going to be a squad is that this is not responsive right now, so like if
we decrease its size, you can see like when we decrease the size.
So did not respond to, you know.
This is coming here, and this is not so much to respond, to see the context as be is getting cut off.
The contract is getting out of the work we need to do to make it responsive.
We need to write mediocrities and the census files.
Now what is media?
Let me just go and expand it to.
And then I two says file media mediocrity is something which gets applied according to the size of the
screen.
For example, if you provide the maximum value of 630 pixels to and then we look at it and you provide
some styling to a class, then that style will be provided to fill the maximum of 16 pixels, only 600
pixels.
Only if the screen size is more than 600 pixels, that screen will not see a suspension be applied.
That's what we're going to do now.
I have already written it.
Let me just commented.
OK, let me just hit controllers now.
Let me explain it now.
This is the syntax of mediocrity.
Now media only screen and this is the size like maximum of 600 pixels, like for the maximum of 600
pixels screen.
This styling will be implemented.
And here it is the media only screen minimum width of 600 pixel, so minimum in the screen with this
minimum 600 pixels.
This styling will be implemented as simple as that.
So when are screen sizes less less than 600 pixels or maximum of 600 pixels?
Like, it should not be more than 600 pixels.
So that means in the browser or tab right for these styling will be.
Implementer.
Well, that's not bad.
Now let's go to robot and.
Now, let me just go to the browser and check if the easterners applied or not noticed.
And let me just try to.
If it is the size so you can see that now the tax is gone.
So now taxes are gone.
That means we need to provide a tax for all the links to the small page right to the small width of
the page.
So to do that, you need to write a different.