Let's put into practice what you've learned and the Flexbox and Responsive Design to build this website
from scratch.
As we discussed, the first step is what you call planning.
The planning include how you are going to lay out your content, or you can have a look at some pool
project that has been built by different developers.
So we have more tools that you can have sample project and Figma is number one and Figma is a tool for
designers.
So I want to dive in more about Figma, but I want to show you that inside this application you can
see some project or design built by the community.
So if you click on community and files and templates and click on web, you can see that we have some
point design built by other members in the community.
So let's say that you want to build something like this, you click on it and then again click on that
and expand it and increase the zoom level.
And here you can see the kind of color and then the layout of this website as well.
So you can have this one as a roadmap to build your website.
That is the first step.
Well, let's continue to build our application after we finish building this project, you have the
idea to convert any design to your future projects.
So let's get going.
Before we continue for this kind of application.
We can start at any part.
We can start at the photo here or the number here or the body.
The choice is yours.
So let's start with the hero banner here.
So now let's get back to the HTML.
Let's remove everything from here because this one was playground and now inside the HTML too.
Let me remove the h one.
Now let's get started.
The first step is let me have some comments to show me where I am in my code.
So the first one I'm going to give is called the nav bar because that is the first thing we need to
design.
But we are going to start with the header.
So after now bar, we have the header and after header we have the actual body, which is this one.
And lastly, we have the footer down here.
So let's move step by step.
So here is going to be the actual content and down here is going to be the footer, so are going to
fill up with a HTML.
So let's start with the header.
So we are going to use the header tag and inside I'm going to give it a day of class core header content.
Go and inside that have a look.
We see that we have the children inside this container.
So this what we call the header.
Why am I doing so?
Because I want to use Flexbox to control it.
Children, that is why I'm wrapping everything inside a container.
And here I'm going to add each one which states that you write.
We read, you write, we read.
And then after that I added a P tag with some dummy text as that.
Let me reduce the text a little bit.
And after the P tag there is a link or a button, which is this one, and I put it inside a link because
I want to be a link cover.
So after the P, I added a link tag and let me give it hash tag and inside I added span because I want
to style this one like a button.
So creates new post.
Great.
Now I'm done with the semantic for the header if I save it.
This what I have pretty simple.
Right.
So in the next video let's go ahead and style the header.