WEBVTT 00:05.850 --> 00:09.930 In this video you're going to build the skeleton and the creation of your app. 00:10.380 --> 00:17.190 So this means that you're gonna be building the front page showing the contents of a specific folder. 00:17.250 --> 00:20.070 So let's go ahead and build this page. 00:20.070 --> 00:24.560 So you're gonna use bootstrap for to build the page. 00:24.700 --> 00:30.340 So if you go to get a mouse mousetrap dot com then click on get started and then scroll down. 00:31.350 --> 00:33.990 You'll find the template right there. 00:34.590 --> 00:39.800 So just bear in mind that we're using version four point one. 00:39.880 --> 00:42.180 Okay so it is copy the template. 00:42.540 --> 00:51.190 Now let's create a file inside our new projects folder and call it index was a schedule. 00:51.190 --> 00:58.050 Now let's create another file style that CSX where we can put some styling. 00:58.470 --> 01:01.470 So inside index those ACM. 01:01.500 --> 01:05.560 This copy our template and then make a few changes. 01:05.730 --> 01:09.600 So it's Eisele I'm going to just write page title for now. 01:10.560 --> 01:18.390 And then later on using JavaScript you can't change this page title for each folder. 01:18.420 --> 01:27.200 So basically when you go to a folder the title of the page is going to march the name of the folder. 01:27.210 --> 01:27.670 Okay. 01:29.740 --> 01:30.110 All right. 01:30.110 --> 01:35.830 So now we're gonna need a few things inside our page. 01:36.410 --> 01:39.000 So let's start with these elements. 01:40.400 --> 01:42.990 So that's called a breadcrumb. 01:43.160 --> 01:45.440 And you can build this easily using Bootstrap. 01:45.920 --> 01:54.310 So if you go to the blues wrap page and then search breadcrumb in the components then here it is. 01:54.320 --> 01:57.360 So you just need to copy the code from that. 01:57.380 --> 02:03.260 So let's copy this one and let's place it right there. 02:09.870 --> 02:12.870 Now let's use the Live preview to see the results. 02:14.610 --> 02:17.960 So here is our breadcrumb. 02:18.240 --> 02:24.750 We just need to add some styling suites some background color and size of the links. 02:24.750 --> 02:26.310 So let's go ahead and do this. 02:28.290 --> 02:32.530 So to make things clear I'm going to split the screen to two House 02:36.140 --> 02:37.100 like bullets 02:48.240 --> 02:51.210 so we're not gonna need the terminal for now. 02:52.530 --> 02:56.750 So we can hide its all right. 02:56.780 --> 03:02.060 So let's go to our style that says his file and add some styling before doing that. 03:02.120 --> 03:17.960 Let's link this file to the CEOs as filed by adding a link element. 03:18.510 --> 03:18.770 Okay 03:21.600 --> 03:24.630 so in the styling we're gonna start here with the breadcrumb 03:28.760 --> 03:35.590 and the first thing we're going to be styling is the red chrome glass 03:38.730 --> 03:40.890 like that's OK. 03:41.010 --> 03:42.990 So let's add a background color 03:46.450 --> 03:49.090 so let's pick the color from the final page 03:57.450 --> 03:58.400 and we want this color 04:05.140 --> 04:05.370 okay. 04:05.380 --> 04:06.760 Perfect. 04:06.790 --> 04:11.500 Also we can see that the border is rounded right there. 04:11.500 --> 04:21.800 So let's delete that by setting the border radius to zero okay. 04:21.800 --> 04:22.280 Perfect. 04:23.000 --> 04:24.890 Now let's try on the links 04:29.990 --> 04:31.280 so we want 04:34.270 --> 04:34.990 this color. 04:35.080 --> 04:41.380 So to save time I'm going to stop using the color picker and use the color straightaway. 04:41.920 --> 04:46.060 So I'm gonna set it to 04:48.760 --> 04:51.780 a e BD 38 04:54.600 --> 04:54.990 okay. 04:57.370 --> 05:01.060 Now when you hover on the link it still shows the old color. 05:01.060 --> 05:02.770 So it just needs is timeless as well. 05:02.770 --> 05:04.680 So a hover 05:07.620 --> 05:07.960 there. 05:07.960 --> 05:09.180 Here we go. 05:09.450 --> 05:10.210 It works. 05:10.250 --> 05:19.290 Now if you check the breadcrumb elements when the page becomes scroll all you can see that it sees fixed 05:19.310 --> 05:20.630 at the top. 05:20.630 --> 05:22.380 Just like the footer. 05:22.490 --> 05:25.520 So we're going to need to add that to our CIA says 05:28.420 --> 05:37.310 by the way this elements is inside the nerve elements so you can style the nerve inside so it's on that 05:37.390 --> 05:40.680 other top. 05:40.830 --> 05:43.350 So we will just sense the position too fixed 05:45.900 --> 05:54.650 and we will says the top property to zero so that it stays fixed at the top. 05:54.650 --> 05:58.130 Now you can see that's the with us changed. 05:58.190 --> 06:01.940 You just need to set that to 100 percent 06:05.340 --> 06:09.550 OK so that's the styling for the breadcrumb. 06:09.570 --> 06:12.300 Now we need to move to the next elements 06:20.530 --> 06:35.870 which is the table that you see that. 06:37.260 --> 06:44.220 OK so let's go back to the bootstrap web size and get a table elements to save time. 06:48.360 --> 06:50.040 So I'm going to copy this one 06:56.440 --> 06:56.830 okay. 07:00.460 --> 07:11.090 Now just to avoid changing tabs all the time I'm going to open this in the same browser here. 07:11.270 --> 07:17.620 Okay all right so we're gonna need to style our tables so let's go back to the style does. 07:17.660 --> 07:18.180 Says while 07:23.450 --> 07:30.760 and start styling our table so it selects the table using the HMO tag. 07:31.010 --> 07:38.560 And first of all let's add the color and see that we've got blue texts inside the table. 07:40.380 --> 07:46.530 So the color we're using the is this one 07:54.920 --> 07:56.110 okay perfect. 07:56.110 --> 08:00.180 Now let's add some margin top and bottom to our table. 08:00.310 --> 08:10.800 So I'm gonna go for 100 pixels and for the lives and rights margins let's go for 10. 08:10.800 --> 08:19.630 For now okay now if you compare with the final page you can see that we still have some margin there. 08:19.800 --> 08:24.180 And that's because the table is placed inside a container. 08:24.870 --> 08:37.910 So let's go ahead and do this so we'll place our table inside a div of class container. 08:38.080 --> 08:44.080 So the container class in bootstrap will add the margins or the extra margins for us 08:57.630 --> 08:57.870 okay. 08:57.870 --> 09:00.810 So this looks better. 09:00.810 --> 09:01.440 So let's go back. 09:01.440 --> 09:06.190 So I see it file and add some more styling. 09:06.450 --> 09:06.900 So 09:12.700 --> 09:20.000 now if we look after the table head we can see some background color there and the color is said to 09:20.030 --> 09:21.530 white. 09:21.530 --> 09:23.780 So it is go ahead and do this. 09:23.840 --> 09:30.290 So in 0 8 Samuel we have a quartz table head 09:33.430 --> 09:33.890 right there. 09:35.200 --> 09:40.110 So it doesn't have any glass so let's just use the a symbol tag 09:43.040 --> 09:51.370 so the background color is actually the same as the text color inside the table 09:54.330 --> 10:02.010 and the text color is White's. 10:02.260 --> 10:03.000 Okay perfect. 10:04.440 --> 10:12.360 Now if you hover on the table head in the final website you'll see that the cursor becomes a pointer. 10:12.540 --> 10:18.730 So to do this we're going to sets the cursor property to point 10:22.740 --> 10:23.140 right now. 10:23.280 --> 10:31.260 I'm going to pause the video and fill our table with some dummy data and then we'll see afterwards how 10:31.260 --> 10:44.830 to add these icons to icons for folders and icons for files all right now we've got some dummy data 10:44.980 --> 10:46.770 inside the table. 10:47.350 --> 10:55.210 Now you will notice that the name in the final table is actually a link which will take us somewhere. 10:55.210 --> 10:56.020 If we click on it. 10:56.380 --> 10:58.540 So let's change the text. 10:58.720 --> 11:03.010 Let's be placed inside these cells to a link. 11:03.010 --> 11:13.190 So I'm gonna place a vast text inside an anchor tag like that and it says the ADF to something like 11:13.430 --> 11:13.760 this. 11:13.760 --> 11:16.020 No. 11:16.170 --> 11:30.370 Let's do the same thing for this one. 11:30.510 --> 11:30.850 All right. 11:30.900 --> 11:34.320 Now we need to add these icons. 11:34.320 --> 11:37.400 So we need an icon for the folder. 11:37.470 --> 11:39.520 And another one for files. 11:40.290 --> 11:44.940 So there are plenty of ways to get icons. 11:44.940 --> 11:53.280 I'm going to use a Web site called Icon icons dot com so the usage is pretty straightforward. 11:53.370 --> 12:05.190 So if you click on use it and then scroll down all you need to do is install the script of the end of 12:05.190 --> 12:06.050 the body tag 12:12.490 --> 12:17.530 going to place it right there and then to use an icon 12:21.230 --> 12:27.930 you copy this a civil code and then you replace the name with the name of the icon. 12:27.990 --> 12:29.790 So let's go ahead and do this 12:33.050 --> 12:41.770 we're gonna place one right there before folder and another one right there before the name of the file. 12:42.130 --> 12:44.410 So if I save and check. 12:44.440 --> 12:46.570 So at the moment it's a heart. 12:46.570 --> 12:47.800 So I would just look for 12:52.870 --> 12:53.350 folder 12:56.750 --> 12:58.450 so this one. 12:58.460 --> 12:59.570 So the name is folder 13:07.640 --> 13:12.820 and let's look for file this one there. 13:13.070 --> 13:17.370 It says documents. 13:18.080 --> 13:18.820 OK. 13:19.020 --> 13:20.380 So if I refresh. 13:20.430 --> 13:23.200 Here we go now. 13:23.210 --> 13:28.210 Let's sign our icons and make them bigger and also change their color. 13:28.310 --> 13:32.000 So let's go back to the CSF file 13:37.310 --> 13:42.050 so you select the icon using its 13:47.060 --> 13:55.330 a symbol tag. 13:55.470 --> 14:00.460 So I will just change the font size to 16 pixels for example 14:08.900 --> 14:09.700 or 24 14:13.260 --> 14:15.190 K that's better. 14:15.190 --> 14:19.810 The color is actually the same color. 14:19.810 --> 14:20.230 We've got the 14:24.140 --> 14:24.500 OK. 14:24.570 --> 14:25.050 Perfect 14:27.890 --> 14:28.150 all right. 14:28.160 --> 14:36.340 Now we want to make our table scroll like that and we want to limit the height of the table. 14:37.280 --> 14:40.690 So the table is scroll all the time. 14:41.590 --> 14:52.640 OK even if you quotes only a few items or elements inside your folder you can always see this scroll 14:52.640 --> 14:53.280 bar. 14:53.750 --> 14:56.110 So let's go ahead and do this. 14:56.330 --> 14:58.790 So we'll need to select the table body 15:01.720 --> 15:04.890 which is thus elements 15:10.780 --> 15:17.410 and we're going to set its heights first to a fixed height so I'm going to go for 300 pixels 15:20.170 --> 15:25.050 OK and also I'm going to 15:28.670 --> 15:34.140 sets the overflow why to scroll. 15:34.330 --> 15:36.350 So that's it becomes Scrabble. 15:36.370 --> 15:44.070 Now what I'm gonna do I'm gonna add more content to the body of the table just to see what happens 15:53.160 --> 15:53.410 okay. 15:53.410 --> 15:57.420 We can still see all the contents there. 15:57.420 --> 16:00.360 So let's go back so I see this file and 16:04.000 --> 16:04.750 something else. 16:05.260 --> 16:12.070 So you will need here a display property which you will set to block 16:15.310 --> 16:16.360 so if you do this 16:21.820 --> 16:30.100 the table body is going to be treated as a block element inside your table. 16:30.250 --> 16:31.380 And now we've got a problem. 16:31.390 --> 16:34.700 The table head is not aligned anymore with the table lobby. 16:34.810 --> 16:38.950 So to fix this you can select the table head 16:41.950 --> 16:45.900 as well as the table rows. 16:45.980 --> 16:48.460 Okay. 16:48.650 --> 16:58.840 And or just select the table rows inside the table body like that's okay. 16:59.210 --> 17:05.940 And then you can sense the display to table like this. 17:06.000 --> 17:09.390 So now it looks better but it's still not aligned. 17:09.450 --> 17:20.730 So what you need to do you need to add a table layout option was that you said to fixed and then you 17:20.730 --> 17:28.160 add with and he says it to 100 percent okay. 17:28.180 --> 17:33.790 Now you can see that the table head and be table body are aligned. 17:33.880 --> 17:36.250 Now we are missing only the footer. 17:36.520 --> 17:44.990 So to get the footer I'm gonna go back to the booth trap websites and then look for footer and then 17:44.990 --> 17:50.090 inside components I'm going to click on sticking with the so 17:53.390 --> 17:58.140 if you take that one and see the set right there. 17:58.200 --> 18:05.280 So if you inspect elements you can just select the whole foods like this. 18:05.280 --> 18:24.130 Copy it and then use it inside your Ishmael. 18:24.330 --> 18:32.000 I'm just gonna change this text to this one and take this using 18:34.850 --> 18:42.930 an HMO entity which is Ampersand copy now to style the footer. 18:42.960 --> 18:46.640 You just go back to the same page and you look up the styling 18:58.830 --> 18:59.200 okay. 18:59.240 --> 19:01.680 So this is how off with a looks like. 19:01.760 --> 19:04.970 So I'm going to change the background color to that one 19:08.070 --> 19:08.610 instead. 19:08.610 --> 19:12.680 It's actually the same background color as the Red crumb. 19:12.790 --> 19:16.480 And here we go. 19:16.590 --> 19:21.400 All right in the next video you're going to go through the logic of the app and then you're gonna be 19:21.400 --> 19:23.890 ready to build your code structure.