Welcome to brand new section and that is Flexbox and Responsive Design.
Well, before we continue, let's look at the final projects that we are going to build while exploring
Flexbox and Responsive Design.
And here we go.
This is a final project where we are going to use Flexbox to lay out the content, as you see on the
page.
And after that, we are going to use responsive design technique to make it more responsive.
So let's look at the layout for this project.
We have a number and inside the number we have logo and length, as you see.
And we also have a hero banner here with text on an image.
And if you scroll down for the body, we have divided into two sections, one being the article or sidebar
and then the main content.
And for each blog post, you can see that we have the image and then the author description and link
and add the photo to.
We are going to use Flexbox technique to lay out the content as you see on the page.
The cool part is that it is responsive.
So let me reduce the browser window and let's see how responsive it is.
As soon as I reduce the browser, we see that everything has been aligned perfectly as you see on the
screen.
If you scroll to the footer tool, you can see that everything is being aligned perfectly.
So this is what we are going to build by the end of Flexbox and Responsive Design.
Let's get started in the next video.