Welcome back.
In this video, let's put into practice what we learned and that is positioning to build this project.
So let's move step by step.
So back to visual seed code.
I have fresh HTML with only one heading here and my CSS file which is empty.
So let me link up my CSS here.
And here we go.
Let me change this one to project the title.
It can be a text of your choice.
So here we go.
Now I have the project, so let's move step by step.
We are going to use this one as a roadmap.
The first step is let's create the header.
So back to the HTML.
Let's look at the structure for the header.
Let me remove this one from here and let me have a comment.
Says header.
And down here I'll make use of end of header to know where my element starts and then end.
So inside I'm going to use head tag or header tag and inside the header tag I'm going to have a Dave
that's going to wrap the element.
And for that Dave, let me give it a class core wrapper.
And then I have each one which says CSIS lay out.
Project as that.
And then I also have P tag which says that using.
Relative absolute.
And fixed.
Positioning as that.
And I have a link tag called Take This Course.
Good.
So let's see what I've achieved.
Now, this is what we have.
There is no CSS, so don't worry about that.
The next section is the actual body here.
And let me show you here.
So I have a parent container which looks like this.
And then inside the parent container are divided into two sections, the first one here, and then the
other one.
And I call this one as the right sidebar and then the left sidebar.
And within each sidebar I have content.
So the first thing to do is we need to create the container.
So let's get back to visual code.
So here we go.
After the end of the header, I'm going to have a comment here and call this one as the container.
Good.
So let's go ahead and create the container.
I'm going to give this one a class called container.
Good.
And then inside the container, I'm going to have the two sidebars.
So the first one is going to be a Dave and it's going to be as the right side bar.
So I call this one, right?
So the first one is the right side bar.
So I'll copy this one and then paste it here.
And this I'm going to be the left side bar and this one going to be as left side bar.
But let's try to reset the browser default by using the asterisk going to be margin.
Of zero and then padding zero and border box, box sizing, sorry, it going to be border box, so save
it.
And now there is no spacing or margin around the element.
So let's continue to fill up the content in it.
Inside the right side bar, I added a dev with a class called Content.
Because I may need this one to create some shadow around the content.
Going to be the content.
Good.
And inside I have.
Inside.
I added each one called Learn.
Node.js.
Okay.
And then I add that image as that.
And for image you can go to Pixabay.com and search for any image of your choice.
If you go to Pixabay, you can use any free lenses image of your choice.
So just copy the URL and you're good to go.
Let's say that you want this one.
Click on that and right click and copy image address or you can download it.
So I'm going to use the image I use for this project.
So I'm going to copy the link here.
So now inside the image, this is the image I use from Pixabay when I save it, and that is it.
And after that, after the image, I added some paragraph with the text we're going to be learning here,
save it.
And now we have it down here.
The last one going to be the link says Read More.
And this is the link which says Read more with home slash and that is it for the right side content
one.
But because of the image, it has taken my space.
So let's comment this one and let's continue.
We bring it back.
I want to show you how I'm going to lay out those contents.
That is the right side bar.
What about the left sidebar is going to be the same content.
So for left sidebar, the content is going to be the same.
So I haven't copy the contents inside the this div so I can copy all of them here and now inside this
one.
I'm going to paste it inside and this one I can change this one to learn HTML because it follows the
same format, the h one image and the paragraph and then link.
But for this one we see that we have this particular button which is called new.
So that's what I'm going to add it here.
So I gave it a def.
With a class called Elect.
And then inside I added a button called New.
Now this is it.
So let's see what we have.
Yes, we see that it is not well laid out.
So let's go ahead and add the layout in concept.
Remember, we are going to move the right side bar to this side.
So which is this property are we going to use?
We are going to use what is called absolute meaning that if I add absolute.
Now I've taken this particular element from the document flow and in that I need to add a position relative
to the parent.
And lucky for us, this is a parent called container, this one.
So now if I get to the CSS part of it, let's select the container.
And let's select the other classes to the right.
And then the left.
So let's fill up the container.
Let's give the container a width of 100 parsecs.
Even though it is.
But we need it to control other elements also.
And let's give it a height of, say, 100 v h.
We want to give it a full height, v port height.
And if we add a background colour, say red.
Now let's see.
We have Henry V H of the V port, as you see.
The next point is that let's add some background color to the left side bar and then the right side
bar.
Copy this one and picture and change this one to, let's say, yellow.
And this is what we have.
This is a parent and this is a children being laid out like that.
So how can you move this one to the right?
So let's get going.
Let's give it a weight of the right of 36.
Now let's see the effect in deed.
So I want to move this one to the side.
So what property are we going to use?
We are going to use absolute meaning.
We want to take this one away from the document flow.
So if I add position called absolute, what would be the effect?
Have a look.
It could see that it has taken from the document flow.
So now I can move this one to this side.
So when I say top zero and then write zero, let's see what is going to happen when I make this of Top
Zero, can we guess what is going to happen based on what you've learned and see that it has positioned
itself to the viewport?
That is, the parent has the HTML.
But what I want is that I want to position this one to be relative to the parent, which is the red
one from top to bottom either.
So I need to add position core relative to the nearest parent and now I have it as that.
So if I want to move this one to this side, I'm going to make use of right to be zero on the right
side, zero this.
And now here we go.
If I want to increase the height to be equal to the parent container, then the same as we did for the
parent.
We are going to use a height of 100 pixels or 100.
VH going to be the same as that.
And here we go.
But you can see that.
The elements have been stuck on that.
So I need to reduce the size of this one.
So we are going to use some simple mathematics here or logic here.
Remember, the weight of the parent container is 100 parsecs and on that I have taken 30 pieces for
the right side bar, meaning that it has leapt with what, 70%?
So I can give this one to the yellow one.
So for the yellow, that is a left side bar.
I'm going to give it a weight of 70%.
So now 70% plus 30 is equal to 100, which is the parent.
Now, let's see.
And indeed, we haven't been laid out like that.
So this is the flow.
So what has left is to add our custom cases to have something like this.
So now it's time to bring up all the images in the mix because I'm going to resize them.
Next is less remove the comment.
I want to see the images because I want to control them using CSS.
Now these are the images.
They are too big.
So now back to CSS.
Let's go ahead and select the image tag and give it a weight of 300 pixels.
And then the height also has 300 pixels and let's give it a pot n around it to be five pages.
Now let's see a there you go.
I think the height let me give it as 200.
Yeah, it's working good.
So now let's go ahead and remove all the background colours.
Doesn't look good.
Right.
So let's remove the background colour for this one.
Likewise this one.
Now we know that our layout is done.
Okay, good.
So let's add some border around this one or we can maintain it.
I think if you do that, it will be more nice.
So on the right side bar, let's give it border lift as one PC solid black.
That has some division around the sidebar here, but the text is so close.
Don't worry, you will fix it.
So let's start working on the header.
So let's get going for the header.
This is how I like to start my element.
I will start from top to bottom.
So now after header, then our container comes.
Right?
So let's add a header with the CSS properties.
Background color here is going to be as hash tag F, F and then a height of give it us for v, h and
then the entire width supposed to be 100%.
So let's save it and now we have it.
But let's add a background color to the entire body so that you're going to have some differentiation
between the background color of the body and then the actual container contents.
So for the body, I added hash tag f five, f five, f five.
I see that when I save it.
Now it looks good.
The next question is how can we move this particular element at the center here?
And we have a section to talk about Flexbox, which is really easy to position element the way we want
for the meantime, let's play around with it and use some CSS technique to get it done.
So back to the CSA, remember we added a wrapper inside the header, so now let's target the wrapper.
So after the header here, let's make a piece of wrapper and in there give it a margin of zero and auto.
And with this one, let's see, nothing seems to be happening.
But if I add maximum width, which is equal to maximum content, let's see, let's refresh it.
Nothing seems to be happening.
And because I made some type of mistake here, a double p, I start nine could see that it has moved
at the center and also I want to position the elements at the center of itself.
So here I'm going to give a text, a line to be center.
Now if we see that the ad center asked that and I want to have some padding to the top here.
So going to be as padding top padding top here as 20 P6, save it.
And now let's see.
Yes, so let's go ahead and style the link and let me copy the CSS here for you to see because we are
done with the actual concept and this is the link.
So for this one, first of all, I selected the header and in the I have a link, let me show you here
we have the header and then the link tag here.
So if I save it, this is the style for that.
And if you see that there is no margin or padding around it and we can get that one done pretty easy.
So let's select the H one comma and P tag and let's give it font size of each of 20 pixels.
And I want to give it a pattern around both sizes as ten x.
So now this is what we have.
The next one going to be the card for the element inside the left side bar.
And here we go.
That one is for the left.
Right.
So this one, if you scroll down here, you see that we have a class called left and I want to style
everything inside here.
So let me go ahead and tie that.
So this is the left side bar here.
So to move faster, let me paste the CSS inside the left and I'll explain to you because this one,
we have talked about it before.
I gave it a background color of white and border of five border radius and book sizing and the margin
if I save it.
And now let's have a look.
This is what we have.
You can see that it is moving towards this one.
Why is it so?
A because I gave it a margin of ten and because I gave it a width of 70 plus 30, which is equal to
100.
And now I have taken away ten pixels.
So now I need to reduce the width of this 1 to 65.
Now I have this effect.
All right.
The next step is going to be this side here.
Which is this for this one?
I didn't add any style to it.
I just made some copy and paste and that is all.
So now what has left is the left here?
And remember, if I want to position this one to the side, unless I add position, core, absolute,
and then for the left side by here, I'm going to give a position called relative.
That way is going to position itself nicely.
So here we go.
So let's look at the class for the new, which is called a left.
So let me go ahead and select that core left.
So let me paste the class for a left and you can see that I have added position called absolute.
When I do that, let me remove the top and bottom and show you what's going to happen.
And you can see the effect down here.
But let me target the button itself.
So I'm going to select the left and then the button and I'm going to have that effect.
Good.
So now I want to put it here.
So what is going to be the logic?
So I have given it a position called absolute.
So I'm going to be top zero and then the right or so zero, save it.
And we have the effect and that is it and that is it.
So I'll go ahead and copy and paste this contents as that.
So now back to the index for the left side bar, which is this one I'm going to copy two or three times.
So select all, let me select and then collapse it and copy.
And then down here paste it as many as you want, save it.
And now this is what we have.
And for the right side, bar two, which is this one, make sure that you select the contents.
Copy that.
And then inside the right container, paste it, paste it, paste it, paste it and save it.
And there we go.
We have it as the final one.
The last one is about the fixed one here, and that one is pretty simple to implement.
So inside the parent or even the body anywhere because of a face, it doesn't take into consideration
any parent.
So I'm going to add, let's say a div co promo and inside let's add a button called a root now.
So inside I have 100% free and root now.
So now if I save it, let's see where it is which is here.
But as soon as I add position fixed to eight, let's look at the effect.
So now I'm back to the CSS and let's select the class.
So let me copy the class for you here and let me explain to you now I have selected the class called
Promo and I gave it a position called Fix because for face is always look up to the viewport and bottom
zero and width of it as what, 500.
So these ones are just for styling.
So let me comment that one and let's see what we have.
We see that it is always at the bottom here because I say that bottom supposed to be zero and the width
is called 500.
And if we want to style the button, you go to the index and there is a button, you toggle the promo
and then the button.
So here we go.
Let me remove the comments and you're going to have the same effects as the final one.
So comparing this one and the final one is the same, just that you can change the images to make your
own.
All right.
Here and the project and relative and fixed positioning.