1
00:00:04,340 --> 00:00:17,150
Welcome to brand new section and that is CSX layout in or CSX positioning, meaning how we can position

2
00:00:17,150 --> 00:00:22,520
or layout content on a web page the way we want it.

3
00:00:22,730 --> 00:00:29,840
Well, before we continue, let's look at the final project that we are going to build to reinforce

4
00:00:29,840 --> 00:00:33,740
our knowledge when it comes to CSS positioning.

5
00:00:34,040 --> 00:00:41,870
And we'll be using what is called relative, absolute and fixed positioning to achieve this.

6
00:00:42,140 --> 00:00:51,050
So the main objective for this project is to be familiar with how to use these CSS positioning properties.

7
00:00:51,170 --> 00:00:54,380
So let's look at the layout for this project.

8
00:00:54,800 --> 00:01:00,770
You can see that we have three sections, the first one being the header.

9
00:01:00,950 --> 00:01:05,180
And for the body it has been divided into two.

10
00:01:05,209 --> 00:01:10,560
One on the right side and then the other on the left side.

11
00:01:10,580 --> 00:01:18,640
And if you scroll down, you can see that for each section we have its own content as that.

12
00:01:18,650 --> 00:01:26,480
And for this button I also used what is called the absolute positioning to achieve this effect.

13
00:01:26,720 --> 00:01:33,290
And if you scroll down, you can see that this particular element is not movable.

14
00:01:33,560 --> 00:01:40,910
Irrespective, the way I move around or I scroll my application is still remains where it is, and I

15
00:01:40,910 --> 00:01:43,520
use what is called fixed positioning.

16
00:01:43,760 --> 00:01:44,560
All right.

17
00:01:44,570 --> 00:01:50,300
This project is not responsive because we haven't talked about responsive design.

18
00:01:50,300 --> 00:01:56,570
And you can improve this application after we talk about responsive design.

19
00:01:56,570 --> 00:02:03,380
But the main objective is to be familiar with these CSS positioning properties.

20
00:02:03,410 --> 00:02:04,220
All right.

21
00:02:04,220 --> 00:02:06,920
So let's get into that in the next video.