OK, guys, in this video, we are going to check about how to make a grid system for our Web site.
The first thing we stuck with right here is to try to have a class a row and we will make the row to
be having the class of display of lights.
We can go to this same type row.
And you're to be having this play off.
Let's.
OK, and then inside, we want to make two columns and a column, I want each column to be having 50
percent of the page.
Let us know how to make it.
We can create that division and give it a class of column
like that.
And then inside we can go to our final.
And just copy the last text, because I think we will need it, we can just go here to learn and now
we can copy this large text our content anyway and go back to the cut and paste.
And then we got this text.
What if we add another dimension from here, but before we do that, we want this to be taking 50 percent
of the beach.
We can go here and just type common sense to be having the width of a 350 and not 40.
See, now this is having 50 percent.
But what if I go and add more?
We got to, but here is the final test for this part.
What if I add more columns right here?
We don't want that to be a habit.
We want that road to be broken.
A great and you know, because here we've got 50 percent of the package and the other 50 percent, we
can just go here and add CLECs, grab to be rap.
And now we can see the line broken here.
We got 50 percent and 50 percent.
Whenever we go, we can just add some martien and borders so we can separate between them.
Margin job of, uh.
No, no.
Just OK.
OK,
but those
margin three border we can get it.
Five pixels solid of.
Right.
The.
OK, now we got this when we make the screen like that, we get a problem because of the margin, I
think.
Yes, because of the width of the.
Let's just leave it up there.
We are having 100 percent of the way.
So when we give it five pixels, we are forcing the column to be broken.
OK, that's good.
But that's not all.
We want to make the page divided to 12 colors.
Seven are to put to jobs.
So we will be having them.
One, two, three, four, five, six, seven, eight, nine, 10, 11 and 12.
Let's start from the beginning, but we will just keep the column one of the column six three.
Let's slow this part and just keep the roll,
OK?
We don't need the margin up here.
We will start with column one Java with class of column one.
And after we learn the design, we will make them responsive.
And then after this part, what we can do is to type the large text.
And now we have just we just need to add the width of the column one.
As I told you before, we want to divide the page into twelve columns, so we will need to calculate
the percentage of one over twelve.
We can calculate one over twelve joined by hundred.
I think it will be yes it will be eight point thirty three percent.
Column one to be having the width of five.
Yes.
Eight point thirty three percent.
OK, that's good when we rely on the page.
Now we got this which let's go and try to add more of the same column, but we got something wrong here.
We will delay this one and also the one from here.
So here we got the column one.
We can try to add more.
We can copy this column.
OK, one and compete for 12 times just to make sure that everything is working right to what about now
three?
For.
Five.
S..
Seven.
Eight.
Nine,
10.
Eleven, and I hope that one will be OK and 12.
Yes, now we got the 12 and one, if I add more.
Never got then you then, you know, so they make it up out in the cold and one we can delete all I
want with it and make the column too.
And very soon we will learn the response to design and make them responsive, which will be similar
to future.
OK, we need to leave this part right here.
Yes, sir.
OK, perfect.
And then at this party, we can tie for the colon to the come to, we will divide two by 12, joined
by 100 to divide it by 12 to 200, which will be sixteen point six, six, six, seven.
We can just go here any division, class of two.
And after this break, we will close it.
And the text, we can get it from here.
We can close this one line and we can't cover this back from here and then go to the good pen and it's
just go back from here.
That's.
We just need to add the styling of the column to we can make this larger colon to be having the way
we can give it a bit of sixteen point.
And yes, we can give it for like me up the tactility retain six, six, six, seven.
What's the problem here?
Yes, keep the 50 percent, so now we got this with let's try to copy and paste the same column to make
sure that everything is working great.
We can copy this column from here
now.
We can just add it inside the page.
One, two,
three.
For.
Five.
And six.
OK, that's good, and now we have this the second thing we will do right now is to try to add more
to make sure that the road will be broken.
And now the road has been broken now again, try for the column three, we will try until you reach
that column 12.
OK, that's good.
After this part, what we can do is try and drive with class for the class.
OK, we got the settings here if we wish to end the edge team or any of that.
But we don't need right now and we can give that class of column three and then give have the closure
at this part.
We can take the text with Johnny the column to we will delete it.
We just need to add here the styling of the column.
Sorry, we can type column three and I want it to be having the width.
Let's calculate it.
We got here three divided by twelve, one time by hundred which is twenty five percent.
Twenty five percent.
And now when we make this we got the twenty five percent of the page.
Let's just make sure that everything is working fine.
We will be having here just four columns for one row.
It would get the first column.
This would be the second.
Third.
The force.
Let's try the last one to make sure that everything is working fine.
So now everything is working perfect and we can set everything back to try to make sure the golden framework
here, we can just try to be in class column for and against the closure of that class and activist
part.
We can just go to the seats and make sure to be having the which four divided by twelve point five hundred,
which will be what, three three point three three three, three, four.
And then we can go to our for our file on your copy the tax or cut it the same.
And they figure for this road we will just be having three cones.
We can't copy this, Devon, also to make sure that everything is working fine.
And here again, this to be the second.
The third.
So now we got only three row, because four multiplied by three is 12.
And what if I wanted more?
OK, so now that rule has been broken and we got no problem with that part after this party.
We came to lead them.
OK, that's good.
And also the latest one and this one and the last one, and maybe that could be golden fun.
We can now go over just couple.
First, we will leave this class and it's closure and now we can go to the killing Kononov five of the
bracket.
And for this part, we can make five divided by 12 time.
Two hundred, which will be forty one point sixty seven width of forty one point sixty six seven.
OK.
Yes, the percentage, this part, the problem and no big job is the one row only we'll be having a
maximum of two columns in case of column five.
We can do this again or we can just cut this part.
OK.
So if I add more, we will just be having two columns for the one row now.
This is good for the column five.
After this part, we can test where they are.
We can test for the reload here.
OK, we can get to the column seven because we already have here the column six.
We can make here Tavurvur with a class of column seven and here to be having exclosure after this part.
We can just go inside and talk to the text from here again, Lauren.
OK, we can capture this text, go back to our editor and based and for this one we will divide seven
by 12 multiplied by hundred, which will be fifty eight point three three three.
We can go here column seven to be having the width
of fifty eight point three three percent.
Let's just copy the column six and make it after the five.
In case you want to make in case if you want to take this page as a reference.
So now we got this column seven, but I will only be able to add one row inside two columns of the story,
one column or Article seven for this.
Well, if I go and add more Java class column seven and a game right here, the closure.
Just one of them is available here to be added or APAL here to be added.
What if I tried to add one dev with a class of column one I will be able to add until I reach the 12.
You can go here.
I type
O one.
I can just copy this one right now.
We got eight.
Nine.
10, 11 and 12.
So now we are able to add 12 columns for each of them.
We can use column for we've got them six if we wish to let this part and try now for that column eight,
or we can just delete the column seven we can make here column eight.
We can go now to this year's Golden Age for the column page.
We will make eight divided by 12.
Let me try to make it eight divided by 12 times 200, which will be six six point sixty seven percent
for just one column.
So here we got eight, nine, 10, 11 and 12 and this will be 13.
So that road will be broken.
And after this one, we can try for the column nine.
We can make this to be column nine.
OK, that's good enough for the column number nine.
We can add here the width to be nine, divided by twelve point two hundred, which will be seventy five
percent.
OK, so now we got nine, 10, 11 and 12.
That's good.
After this part we can just make for the column ten and for the column ten column time.
We will make it divide by twelve times two hundred which will be eighty three point three three three
percent.
OK, so now what about now, what's wrong with that part?
I think we got something.
Yes.
That would probably.
So now we got this when we got here 10, 11 and 12.
OK, that's good.
And we know how to use this, but now we can try for that column 11 and know how we can deal with that,
call an 11.
And now we can go and add the title of the column 11, column 11 I can make them with here.
We will make 11 divide by 12 time to 100, which will be ninety one point six six six seven percent.
The percent who call them 11 and not one.
OK.
I think we got something wrong here.
What's the problem?
I guess so, yes.
What's the problem right here, Colen 11?
We can try to have more sex.
OK?
We got something wrong with this part, so we need to check the problem fit.
Yes, sir.
Call them the line we can search right here.
Yes, it is the same.
But I think we got a problem here, sir.
We need to check it.
We can go to the column one and try to find more recent.
Yes, I think it's only for the numbers or maybe the closure here.
No, that's not the problem.
So we need to search for the problem of this part.
We can make nine to one point to.
You can just make like one, two, three, four, five, seven.
And for the colon one, we can just go here and see what we can do.
OK, we just need to think about it.
We can make it to.
One, two, three, four, five, six, seven, eight, I think this will solve the problem, I hope
so No.
One get a problem with it.
But the problem is just with the percentage.
Yes.
Yeah, we get a problem with part.
We need to make some space here.
Let's think about it.
Wait, what if I make just 91 percent?
No, we still have something here.
Let's make it to 90 percent.
What about 80?
What's the problem with this part?
We got something here.
I think the page is not being reloaded.
Let's just make this to be a nine to one, as we did before.
Yeah, let me think about it.
Ninety one point one, two, three, four, five, six, seven, six, and minus eight, five hundred
to be eight point.
Three three three three three like that, or we can just make it to eight, it's OK.
Eight point three.
I think the page is not being followed.
Peter, let's try to make it 100 percent, make sure that everything is working fine.
No, we get a problem with this part, I think.
Let's try to make it a game.
No, we got no problem with that.
So what is the problem right here?
We got eight point three.
And we can make this one ninety one point seven, so they will be taking 100 percent.
No, let's try to make something like they do, reverse of pattern of zero, margin zero.
We got a problem this part, and we need to check it, OK?
We will see the problem and solve it in the next video.
So good luck and have fun.