1
00:00:06,630 --> 00:00:14,670
Welcome to brand new section and that is Flexbox and Responsive Design.

2
00:00:15,060 --> 00:00:23,520
Well, before we continue, let's look at the final projects that we are going to build while exploring

3
00:00:23,550 --> 00:00:26,970
Flexbox and Responsive Design.

4
00:00:27,240 --> 00:00:29,440
And here we go.

5
00:00:29,460 --> 00:00:38,940
This is a final project where we are going to use Flexbox to lay out the content, as you see on the

6
00:00:38,940 --> 00:00:39,600
page.

7
00:00:39,870 --> 00:00:47,220
And after that, we are going to use responsive design technique to make it more responsive.

8
00:00:47,250 --> 00:00:50,440
So let's look at the layout for this project.

9
00:00:50,460 --> 00:00:57,480
We have a number and inside the number we have logo and length, as you see.

10
00:00:57,600 --> 00:01:04,110
And we also have a hero banner here with text on an image.

11
00:01:04,319 --> 00:01:14,100
And if you scroll down for the body, we have divided into two sections, one being the article or sidebar

12
00:01:14,100 --> 00:01:16,920
and then the main content.

13
00:01:17,040 --> 00:01:25,410
And for each blog post, you can see that we have the image and then the author description and link

14
00:01:25,410 --> 00:01:27,230
and add the photo to.

15
00:01:27,240 --> 00:01:33,690
We are going to use Flexbox technique to lay out the content as you see on the page.

16
00:01:33,930 --> 00:01:37,010
The cool part is that it is responsive.

17
00:01:37,020 --> 00:01:43,200
So let me reduce the browser window and let's see how responsive it is.

18
00:01:43,410 --> 00:01:52,470
As soon as I reduce the browser, we see that everything has been aligned perfectly as you see on the

19
00:01:52,470 --> 00:01:53,130
screen.

20
00:01:53,190 --> 00:01:59,460
If you scroll to the footer tool, you can see that everything is being aligned perfectly.

21
00:01:59,670 --> 00:02:06,510
So this is what we are going to build by the end of Flexbox and Responsive Design.

22
00:02:06,540 --> 00:02:09,090
Let's get started in the next video.