OK, guys, now we can quit our project for the Web business, which is the final project for this year,
us here I have created in depth and also the title as and I have connected between them.
The first thing we will do and also I have copied the grid system I content and align items from the
As folder.
And now the first thing we will do here is to add some classes to the style that leads us to make everything
responsive.
I'm going to show you an example right here.
Let's make each one and then we can type where business
when we go here, safer reloads.
OK, let's open the inspect.
Let's make it clear this is not responsive, and if I make it larger, these are not be responsive.
There's something which is cold here.
We can make web design business, OK?
We can say this is not responsive.
We need to edit the font size of each one in order to make it responsive.
Here we can go to the and we will also add some Placide, which we will use and they will help us to
make the website responsive.
The first thing we will do right here is to type that one.
And of the project there's a property which is called calculation here, return type, font size.
And then we can make calc calculation and then we can type one three seven five dot art plus four W
for the W.
So the font size of this part, which just something here, the font size of each one will be taking
one point three seven five plus the four of the width of any screen and then we can create a medium
for this one.
We can create the medium of minimum width of one, two or three words.
You were pixels.
And if anything, this part we can type each one to be having the font size of 2.5 RTM, which is the
original size of this one.
We can go here and reload.
Now we got the 2.5 larger Buddhistic here.
This is responsive.
Had the same screen tested before.
OK, that's good.
It and after this part we can go here can we can create for a class which is called display one, display
one.
We'll be having a larger font size but different font weight here.
We can get over the display, one up in the print and this to be having the font size of all the calculation
to make the responsive.
And then we can make one point six, two, five, three and plus four point five three w the names are
from the bootstrap website.
And then after this party we can make font weight of three hundred.
We can just go here and try to do something with the display one.
We can come this far off again, but this to be having the class of displaying one and here we will
see the difference.
But let's add something here for the media of this display, one we can make here media of minimum width,
or we can just make it here.
We can cut this part here.
And for the class of displaying one, I want to be having the font of five of them.
We can now go and let's see what we have right here.
Now, we got this larger but smaller than in twenty eighteen.
When we up in the inspect, it's very good.
Just the s.
But this is not a problem.
OK, that's good.
After this part, what we can do is to add for the display too.
We can go to the as best we will be having this play.
Uh one, two, three, four, five, eight six.
Here we can make after this one display, but instead of one, it will be to open the bracket and inside
we can type the font size and we will use the same calculation method, which is calculation.
And then inside we can make one point five seven five are plus three point nine the W.
And then after this part, we can also make a font weight to be the same as the one hundred.
And then inside here we can copy this part paste.
This could be for the display too.
And here I can make or we can make this to be having the four point five.
Ah.
Let's see if it is good right now.
We can copy this part to be here, this P2 instead of.
OK, so now we've got this and also when we up expect.
It's also responsive.
OK, as it is part, if he was to prevent this exact scrolling, you can you can decrease here the font
size or we can go to the house and add overflow into heaven and activist that display to we can make
for the display screen display up at the Prickett and inside we will type the font size.
We can copy this part actually pasted here.
And instead of this number, we can make one point five to five and for which we can make a three point
three.
We can now copy this part.
And the goal here is to be three.
We can go here and up and inspect.
It's already opened.
So now we got this display three.
But I think we can add font weight.
We can copy this point from here and post OK, that could add to this one.
We can make for the media quite of the display.
The three, we can give it the phone to fight off four point five RTM, I think.
Yes.
No, no, no, no.
Just this past for the display too.
It would gather display three.
We can just give it the font size of four them.
They will be all changing when we go to the one to zero zero.
Not yet.
Not that we will inspect.
So now we've got this perfect and after this part, we can close the screen again and up and inspect,
you will not find any screen that is having that one five zero pixels.
So this actually scrolling will be making no problem.
And then after display this to be three activities like three, we can apply the same spot for the display
for we can just copy this place three based again, if to be for and for the calculation.
We can just set this one to be four one four point seven five plus two point seven W and the same font
weight.
We can go here, copy this part.
Pasted this before.
OK, that's good.
And now we can apply for the display five or the media acquired first.
We can copy this one here.
There's to be four and concerning the font size we can make it to three point five are M and then we
can apply for the display five.
Display five.
OK, and here we can make this to be two and this one to be two point one, and after this part, me
give me the phone.
One of the hundred.
We can go now to the media inquiry and make it font size of we are about.
We can now go to the part and test this one here.
We need this Angad bracket and this to be five.
We can now go and reload the page.
So now we got the display five.
The last one we can do for the display is the display.
This to be five.
We can go to the top, copied this part and pasted this to be six.
And for the six, we can just make it one, two, three, seven, five plus one point.
Just ok, ok.
I think we can make it something different.
No, let's make it one point five.
OK, we just need to make the major query copy this part here with to be displayed six.
OK, and then we can make this to be for two point five, go to the temple out and copy this part pasted
here.
This to be six.
So now we got the display six and this is perfect.
And after this part we can work on the etch one.
We can go here.
Do we have X one here?
Yes, we have.
It's OK.
We can't compete from.
OK, ok, ok, ok.
We can make it something different.
This to for one point five we w I think this would be better.
OK, so now we get this when, when it was four it was bigger.
Let's just make it to one point five and this will be better.
And after this part we can add for the media quirino of each one.
I think we did it so we don't add more after the edge one.
We can apply for the edge too.
We can just go to.
Yes, this is s and add edge to you to to be having the font size of one point three to five.
We forgot the calculation about one point three to five plus O point nine we w.
And then actually this part we would set the media query for the Edge to, we can just cover this part
and go here
and here.
We can set the font size of our and just to up.
And eventually this part, we can go and apply for the edge that we actually need to be having.
The font size of calculation.
One point.
Uh, yes, three are and plus oh point six, we w and then after this part we can set the.
Why are we for this part.
That's three.
We can copy the font size here and this one we can make it to one point seventy five or.
We can start before that.
That's one, that's two and then three,
OK?
I we got the edge two and three.
They are different in the size.
And now we can test for the edge for we can just go to the safest file where we're at four to be having
the phone the size of one point two seven five.
The calculation of game one point two seven five plus the O point three W we can copy a spark or we
can just copy from here, copy this to be four and this one we can just set it to one point five are.
Yeah.
Let's test for the four, we can cover the spark and go there again.
This be it's four and then we can go to the web page and see what we did.
OK, so it's four, let's make four.
That's five and the six for the edge.
Five and six.
We can make it to here.
That's five.
This to be having the font size of one point two, five
and six to be having the font size of uh.
One hour again, OK, that's good.
I don't think we need to add media coverage for the next five and six, we can just test again now because
they are very small to be quoted for the response side and here to be five and six.
They are very small.
OK, and that's good.
After this part, we can try to add something for the paragraph.
We can go here at P rather than large on top of zero and and put one out of them because we will need
it.
And then after this part we can actually add another class classes, which is called F s f f f meaning
the font size here we can make up that we want this to be having the font size of Calc one point three
seven five RTM plus one point five the W.
We can just go to this part and be with class of one and we can copy this text we have here EFS one,
two, three, four and five.
We can copy this part.
Could be four, two, three, four, five, and then we can go to the style.
S an example here we have the F.
S one after the first one we can try for the first two.
We can cover this part and then based this to be having one point three to five plus all point nine,
we w we can save and go back to our Parousia.
This is the second one.
And after this part, we can try for no start.
But there's something wrong with us too.
So this is the second one.
Now we can try for the F.
S. three
and here we can set up three to be having the calculation of one point three RTM plus all point six.
We w we can go back to our web browser, this one, OK, and now we can make for the F.
S four, we can copy this part and then paste this before and for the calculation we can set here at
one point two seven five plus O point three.
Are we w we can go back to the Web browser and see what we have right now.
OK, and the last one will be for the F F five, and now we can just copy and paste this one to be five
and instead of calculation with it calculation, it will be very small font size.
We can just make it to one point, one point to five, Artan, and then we can make for the phone by
the three of six, which will be just one hour each time.
And eventually the closest we can add for the lead class, we can make leap to be having the font size
of one point two five are in them.
And then after this part we can get within the width font weight of three hundred.
And now this could add to this part what we can do.
We can up and this choose first the line items or great.
First we can copy all what's inside and pasted where here we can pasted the game paste.
We don't need the margin job and we don't need all that.
We can add some space here to separate between then and then.
Now we knew we don't need the margin put in and we also need the background colors.
OK, that's good.
We can save it, ok.
Good.
And here we can we can just add a container to be having left and left, one point three are empty and
also pending right off.
One more point.
So we are RTM.
We will need it.
And now we can go to the green dot.
You know, we already get it for the allied items.
We can just copy what we want and delete what we don't want.
We can copy this part, go back to the title boxes and placed it after the great system.
Here.
We don't need a so we can delete it.
OK, that's good.
And now we can make for the justified content, we can just keep what they want and delete what we don't
want, we can't start from here.
OK, that's good.
And they have to part and now we can apply for we get food.
I like items, grid system and justify content.
Where is the war.
OK.
It's OK.
And now what about now?
OK.
Yes, let's test let's make sure that everything is OK.
Yes, I think we got the problem now.
OK, OK.
OK, that's good.
Now from the next video, we will start cutting our project for this is actually I have some estimate
we will add the home page, which is shown in the demo screen right here.
We can go to Web business this month or demo, I think.
Yes.
Where is the index?
This one here, this is the home page that inspiration came from Bootstrap made dotcom and the responsive
design here of the font size are from bootstrap.
So good luck and have fun.