In this video.
Let's work on the layout.
So inside the HTML, let's collapse.
The one that we have done that is the number and then the header.
The next step is going to be the actual contents here.
So for that one, I'm going to wrap everything inside a tag section.
And for every page we're going to have one section.
So here we go.
And for this section I want to give it a class, say container flex.
So with this going to be a flex container.
And after that, we're going to add two items.
That is the main content and then the sidebar that is this one and then this one.
So here we go.
I'm going to make use of the main for the main content and for sidebar, I'm going to use a side.
So we have these two tags.
So inside the main here, we can give it a comment as right now or main as that.
So here is going to be the side.
So let's start with the main.
So for the main, we are going to have individual items.
And for the first one I want to give it as an article and inside I want to give it each one as what
one man stock is on.
Hot Kick.
Good.
So for the article here, let's give it a class called post content as post content.
Now after the H one, let's add the image for the post.
So going to be as I g and the first image I use is called post two, which is this one.
And the class for the image is going to be as post image and for the of make it as post dash image.
Great.
The next one is going to be the actual info of the post.
So now we are done with the title and then the image.
The next step going to be the info about the post.
So I'm going to wrap this one inside it on Container Corp.
So after the image, let's add P here and for the P, let's give it a class as post dash info and inside
we're going to have some font awesome icons and some links.
So the first one is let's put inside this pan tag here.
And inside this pan we are going to add the icons from font.
Awesome.
So I here and the class for that from font awesome is going to be f e s dash a dash user.
You can copy any font of your choice.
And for the author, I put them inside the h ref as John du great.
So this pan for this one is going to be the post dash author so going to be as that and next is going
to be the details about the post that is the date it was created and the icon.
So I can select or copy and paste, I can make use of shifts and then option down arrow key and I would
change this one to post date and inside I'm going to change the icon to f a r.
And then the icon is f a does calendar and then does not.
Then this one going to be the time.
So I remove this one and use the time tag.
Going to be as time.
Einstein going to be?
The date time is equal to 2022.
Does.
Nine Dias one it can be anything and provide us generally.
First 2022 or make it as December.
It can be any date of your choice.
Great.
So let's save it.
And now let's have a look.
And this is what we have.
We can see that the image is too big.
Don't worry, we will control it.
So the next step going to be the actual contents.
So here I put the content inside p tag and give it a class as the host does body.
Great.
So here I'm going to add some random text here inside the post.
So after the P, let me collapse this one and let's add the read more or continue.
So I use what is called continue reading.
Continue reading.
Three dots and then a class going to be eyes.
Post dash read dash more and going to be the home page.
So that is it.
So if I refresh this one, we are going to see this one down here.
Great.
So what I split is about the CSS part of it.
So what has legs is about the sidebar, but we can see that for the final one.
For the sidebar, we have a specific element which is for the author and then the rest of it is going
to be the list of posts.
So which means that we are going to add an element for the author and then we can copy and paste this
post here inside of the sidebar.
So let's work with the author element so inside the outside, or let me collapse the main because we
are done with that and for the outside let's add these properties for the author.
So I'll give it a class as a sidebar.
So class is going to be outside.
Ball and inside I'm going to have one day that's going to drop the other elements.
So they're going to be asked about me.
And inside that I'm going to add H to going to be as about the author.
And after that, I'm going to add the image of the author and for this one.
And next is let's add the image for the author.
And the image I use is picture two as pic two.
And then the off is let's give it as the author image.
Good.
So after that, let's go ahead and add the full name about the author.
So here are going to be the H two.
And the class is going to be as about name or full name here and here, you can use any name.
And after that, I want to add the row about this author.
So I'll use a small tag and say full stock.
Web developer.
Great.
And last step is going to be the actual description about the author.
Wouldn't it be as class about me dash bio and let me add some dummy text inside and here we go.
So now I'm done with the author here as the author and then the last one going to be the actual posts.
So like I said, we are going to use the same post for the main contents.
So inside here select this one and collapse and then copy and then inside the sidebar here.
So after the author, which is this one, we can collapse it and now have some space and now let's paste
it.
So save it.
Let's check it out in the browser and this is what we have.
Everything is big and not all that readable.
So the next video, let's go ahead and start this one to have something like this.