WEBVTT 00:01.100 --> 00:06.590 Okay, so we have our application up and running and at the moment we have only a title here. 00:06.590 --> 00:11.750 But in this video what we will do is we will create a layout for our application. 00:11.750 --> 00:18.500 So what we need to do is we need to go into our app.js and we need to prepare something. 00:18.500 --> 00:20.720 So what kind of light would you like to have. 00:20.960 --> 00:23.120 I would like to have a two column layout. 00:23.120 --> 00:29.120 That means I will have a list of the videos or movies on the left hand side, and on the right hand 00:29.120 --> 00:30.170 side I will have details. 00:30.170 --> 00:36.200 So to do that I will need to create a div and inside the div I will. 00:36.200 --> 00:46.880 For now I will put h1 and I will do movie list and then I will also have movie details a second one. 00:46.880 --> 00:49.580 So basically we will have two headings. 00:49.580 --> 00:53.390 And I want to have this on the left hand side and this one on the right hand side. 00:53.420 --> 00:57.290 Normally what I could do is I could create a new class name. 00:57.290 --> 01:00.650 And in my CSS just create that class. 01:00.650 --> 01:03.680 But I will show you one library that I use a lot. 01:03.710 --> 01:06.530 And it's very handy for any development. 01:06.530 --> 01:08.200 So it's called a tailwind. 01:08.200 --> 01:11.530 So we can go here and tailwind CSS. 01:11.530 --> 01:17.320 So basically tailwind give us a an option to specify classes directly here. 01:17.320 --> 01:21.970 And it has predefined classes for almost everything what we need. 01:22.000 --> 01:24.340 And that means you don't need to refer to CSS. 01:24.340 --> 01:27.370 You will just put the classes directly in the HTML. 01:27.400 --> 01:29.200 So we'll click Get Started here. 01:29.200 --> 01:32.230 And you have an instruction on how to install a tailwind. 01:32.230 --> 01:34.510 But this is general instruction here. 01:34.510 --> 01:38.740 If you want to have like a specific framework you can go to Framework Guides here. 01:38.740 --> 01:41.050 And we have a create react here. 01:41.050 --> 01:43.090 So we can use that directly. 01:43.090 --> 01:46.390 So first thing first we need to do we have already project. 01:46.420 --> 01:50.260 We go to the project we need to install this CSS. 01:50.260 --> 01:51.490 So I will copy that. 01:52.270 --> 01:54.490 And I will stop this server for now. 01:54.490 --> 01:55.990 And I will install that here. 01:58.180 --> 02:04.510 Another thing what we need to do is we need to do Npx tailwind CSS in it. 02:04.570 --> 02:12.580 So I will go go here and I will do that basically that in it will create a config file for our tailwind. 02:12.580 --> 02:15.790 So you can see here on the left hand side we have tailwind config.js. 02:15.820 --> 02:16.990 I will open that. 02:16.990 --> 02:19.180 And we need to make some changes here. 02:20.980 --> 02:25.630 So I need to put in the content here. 02:25.660 --> 02:28.390 What kind of files we would like to enable. 02:28.840 --> 02:30.580 Tailwind CSS four. 02:32.500 --> 02:36.070 And going back here I can put that in a context. 02:36.100 --> 02:42.700 So basically what we are doing is in the source folder we will use all the files that are ending with 02:42.730 --> 02:44.710 JS, JSX and TSX. 02:44.710 --> 02:49.270 So all our components will have that tailwind enabled. 02:49.300 --> 02:50.770 I can save it and close it. 02:50.770 --> 02:56.110 And also what I need to do is I will need to load the base styles for CSS. 02:56.590 --> 02:58.120 And so I will copy that. 02:58.120 --> 03:05.800 And in here what I can do is at the beginning of my app CSS I will load it here like this. 03:05.800 --> 03:13.360 So basically I have that one useful thing that you might want to have is if you go to extensions here 03:13.570 --> 03:19.450 sorry extension here you can do install tailwind CSS extension. 03:19.470 --> 03:23.790 So it's intellisense extension that will help you write some classes. 03:23.790 --> 03:26.310 So it will help you to finish. 03:26.490 --> 03:31.980 If you start writing something, it will kind of help you with the existing classes there. 03:31.980 --> 03:33.660 So that will be very handy. 03:33.660 --> 03:36.000 So let's go back here to our application. 03:36.000 --> 03:37.140 We have that div here. 03:37.140 --> 03:41.670 So what we want to do is we want to create that uh layout. 03:41.700 --> 03:45.060 So normally I would do like class name and put it in a CSS. 03:45.060 --> 03:46.110 But I can do it here. 03:46.110 --> 03:50.880 So if I will do class name here I can specify the classes directly here. 03:50.880 --> 03:53.130 So what are the classes I want to have. 03:53.130 --> 03:53.640 Grid. 03:53.640 --> 03:57.510 So you see our typing grid that will enable the the grid. 03:57.510 --> 04:02.730 Even if I will hover over it you see that will be the class that will be applied because tailwind has 04:02.730 --> 04:04.350 already that class display grid. 04:04.380 --> 04:06.600 So I don't need to create that classes. 04:06.600 --> 04:09.450 I can specify it here and I can do it other things. 04:09.450 --> 04:15.210 So I can do grid and you can see here intellisense kind of help me writing this up. 04:15.240 --> 04:17.460 I will want to have grid columns too. 04:17.460 --> 04:23.310 And if I will save it now if I will I need to run an application npm start. 04:25.880 --> 04:31.400 If I will go here and I need to wait until you refresh. 04:31.400 --> 04:33.560 You can see here this is on the left hand side. 04:33.560 --> 04:34.820 This is on the right hand side. 04:34.820 --> 04:37.940 I already have that two column layout there. 04:37.940 --> 04:42.650 So it is working fine for for for now. 04:42.650 --> 04:45.410 And we need to do some cleanup as well. 04:45.410 --> 04:52.100 So if I will go here we at the moment what we want to have is we want to have that up header. 04:52.130 --> 04:55.070 At the moment it's taking the entire space of this. 04:55.070 --> 05:00.830 So what I can do is I can take the background color and put it in here. 05:00.830 --> 05:06.200 So my entire application will be a max height, 100 vertical height. 05:06.230 --> 05:08.510 So it will occupy the whole space. 05:08.510 --> 05:11.000 And then we will put the background color. 05:11.000 --> 05:13.340 We don't need any flex here. 05:13.340 --> 05:15.800 So we can remove all of that. 05:16.280 --> 05:20.240 And I can do text align center I can move it to up header. 05:20.240 --> 05:27.350 So basically I want to have my application background color and that will occupy the entire space. 05:27.350 --> 05:32.120 And I want to have header text align center I can have the font size and color. 05:32.150 --> 05:37.460 Maybe we can have a default color for everything in our application here. 05:37.460 --> 05:43.190 So if I will come back here to our application, you can see this is what I have. 05:43.190 --> 05:44.510 I have the header here. 05:44.510 --> 05:49.820 And I have on the left hand side I have one on the right hand side I have another one. 05:49.820 --> 05:55.220 So if I will go here, you see I don't have any classes for the grid here. 05:55.220 --> 06:00.590 Everything is controlled by this class here that is going from our tailwind and that's very handy. 06:00.590 --> 06:07.970 Instead of writing your own classes, you will use it whatever that tailwind has already prepared. 06:07.970 --> 06:12.200 What I can do is I can add some maybe padding to my heading. 06:12.200 --> 06:18.320 So I will do padding, maybe 20 pixels and and you see how I can mix it up. 06:18.320 --> 06:20.510 I can still have my own classes here. 06:20.510 --> 06:26.900 I don't need to to do everything in tailwind, but I can have like my classes and combination with tailwind 06:26.900 --> 06:27.560 classes. 06:27.560 --> 06:32.660 So if I go here and I will refresh it and this is what we have at the moment. 06:32.660 --> 06:37.640 It's not perfect, but it's a kind of starting layout that we will use later in the course.