WEBVTT 00:00:07.080 --> 00:00:11.470 Now we are going to start building our web sites before diving into code. 00:00:11.520 --> 00:00:16.020 We are going to create a new product folder like we did with other projects. 00:00:16.020 --> 00:00:25.470 So first of all we're going to go to our Web sites for and creates a new product for them there and 00:00:25.470 --> 00:00:28.860 call it up learning page 00:00:31.900 --> 00:00:36.990 and then penances and book shop. 00:00:39.010 --> 00:00:39.310 OK. 00:00:39.330 --> 00:00:51.520 Now let's open brackets and open this folder using rockets. 00:00:56.130 --> 00:00:59.400 OK now we're going to create our index does a single file 00:01:04.770 --> 00:01:11.370 and starts writing out a shameful code or writes says we're going to be using bootstrap a good practice 00:01:11.370 --> 00:01:16.150 would be to get a bootstrap template from the bootstrap web page. 00:01:16.170 --> 00:01:29.690 So if you go to the Bush wrap Web sites which is gets put up those come then go to getting started. 00:01:29.760 --> 00:01:40.560 Then if we scroll down you'll find the templates right there so we can copy these email templates and 00:01:40.560 --> 00:01:44.040 paste is inside our index those a simple file. 00:01:44.880 --> 00:01:50.650 Ok so if we look at the links you'll see that we are using here local files. 00:01:50.780 --> 00:01:54.340 So I will need to include these files inside our projects folder. 00:01:54.540 --> 00:02:02.390 To do that we can either download the files from the bush drop Web sites using the download bootstrap 00:02:02.490 --> 00:02:03.660 link. 00:02:03.840 --> 00:02:07.620 Otherwise we can go back to our drop folder 00:02:11.850 --> 00:02:19.090 and get these links or these folders from there. 00:02:19.360 --> 00:02:20.720 So we need this VSS folder. 00:02:20.760 --> 00:02:23.930 The phone's folder on the day as well. 00:02:24.200 --> 00:02:35.270 So I'm going to copy them and I'm going to paste them inside our properties folder. 00:02:36.890 --> 00:02:37.580 OK. 00:02:38.120 --> 00:02:47.660 Now let's change the title of our web page to up landing page. 00:02:47.790 --> 00:02:53.030 Let's go for the life review. 00:02:56.380 --> 00:02:57.750 OK. 00:02:58.680 --> 00:03:05.370 Now let's get rid of the contents inside the body elements. 00:03:05.700 --> 00:03:09.200 Now we are starting from a blank page. 00:03:09.240 --> 00:03:09.510 All right. 00:03:09.510 --> 00:03:15.220 Now let's create our CSSA file where we can replace all our styling. 00:03:15.420 --> 00:03:18.570 They're going to call it styling CSSA. 00:03:20.220 --> 00:03:24.020 And let's link it to our index does a serial file. 00:03:24.480 --> 00:03:26.130 So it deletes these comments 00:03:28.740 --> 00:03:31.300 . 00:03:31.350 --> 00:03:33.330 Copy this link 00:03:36.150 --> 00:03:45.270 and just change the ref to styling those yesus. 00:03:45.350 --> 00:03:45.840 OK. 00:03:46.020 --> 00:03:53.330 So if we look at our final Web sites we can see that you've got a logo. 00:03:53.490 --> 00:04:00.450 And then of course our featured content so our featured content is going to go inside a dumbass trone 00:04:00.470 --> 00:04:01.310 . 00:04:02.490 --> 00:04:09.420 And since we are signing the jumbotron with this nice background image we can replace our logo inside 00:04:09.420 --> 00:04:11.510 the Jumbotron as well. 00:04:11.610 --> 00:04:14.470 So we are going to do it creates a div of class. 00:04:14.470 --> 00:04:22.530 Don't much rhône I'm going to place all these elements inside these so I'm going to go to the body element 00:04:28.620 --> 00:04:36.750 and create a div of class demarche on. 00:04:38.170 --> 00:04:39.070 OK. 00:04:40.750 --> 00:04:47.770 Now if you go to our Web page we will see our Jumbotron that is called by default a gray background 00:04:47.770 --> 00:04:48.740 color. 00:04:49.000 --> 00:04:55.160 So we would like to use tiles using this nice background image so to do that we're going to use a Web 00:04:55.170 --> 00:05:05.650 site called free nature soc dot com where we can find royalty free pictures so you can pick up any picture 00:05:05.650 --> 00:05:07.420 you want from there. 00:05:07.990 --> 00:05:09.230 They're all free. 00:05:09.670 --> 00:05:16.750 And if you click on an image you will see the real the top. 00:05:16.750 --> 00:05:22.870 So if you want to use this image for example you just copy the URL and use it in the styling of our 00:05:22.870 --> 00:05:23.810 Jumbotron. 00:05:24.370 --> 00:05:28.330 So the image I'm using has got a number there. 00:05:28.570 --> 00:05:30.520 Hundred sixty six. 00:05:31.090 --> 00:05:32.300 That's the picture I'm using. 00:05:32.460 --> 00:05:32.990 OK. 00:05:33.160 --> 00:05:35.650 So I'm going to copy that's your whole 00:05:38.380 --> 00:05:48.010 then I'm going to go back to files and go to the CSSA file and are going to style our Jumbotron which 00:05:48.010 --> 00:05:50.580 has got the Jumbotron close. 00:05:50.710 --> 00:05:53.120 So restyling the Jumbotron close. 00:05:53.220 --> 00:06:03.310 It us not the name of our class which is somewhat drawn and we are adding a background image so the 00:06:03.310 --> 00:06:10.430 property is background and we're going to use your real parenthesis. 00:06:10.480 --> 00:06:16.080 And inside the pens we're going to base our Jarrell. 00:06:16.090 --> 00:06:25.000 So now if we look at our page you can see the image there. 00:06:25.030 --> 00:06:26.730 We don't see the full image. 00:06:26.740 --> 00:06:33.760 And the reason why is because the height of our JumboTron is too small. 00:06:34.120 --> 00:06:36.220 So we're going to go for a fixed height 00:06:39.220 --> 00:06:44.810 and then go for 600 big cells. 00:06:44.900 --> 00:06:45.490 All right. 00:06:45.520 --> 00:06:55.330 Now our picture has got the right height for large screens but it's still too big for smaller screens 00:06:56.330 --> 00:06:58.600 and that's something that we're going to take care of later. 00:06:58.810 --> 00:07:06.090 OK so now let's take care of the large screens so all who is cause the right height. 00:07:06.370 --> 00:07:09.530 We don't see all the elements of our picture. 00:07:09.730 --> 00:07:13.020 And the reason why is because we need to scale our picture. 00:07:13.330 --> 00:07:17.910 So first of all we're going to take care of the with elements. 00:07:18.250 --> 00:07:25.610 So we want the original width of our picture to adjust to the width of our page. 00:07:25.630 --> 00:07:32.560 So to do this we are going to use another property I'm going to place it just before the height this 00:07:32.560 --> 00:07:36.200 property is going to be background size. 00:07:36.340 --> 00:07:40.100 So the value going to go for is cover. 00:07:41.350 --> 00:07:50.070 And by doing that the original width of our picture is going to adjust to the width of our screen. 00:07:50.440 --> 00:07:59.280 We are seeing this vertical line there because I am still inside the dome which one glass that's why 00:07:59.270 --> 00:08:00.240 we saw it. 00:08:00.870 --> 00:08:01.910 OK. 00:08:02.530 --> 00:08:10.240 Now we've got another issue in large device sizes although the width of our picture is fine as it's 00:08:10.270 --> 00:08:15.550 adjusting to the width of our screen the heights is not fine. 00:08:15.970 --> 00:08:22.800 And we can tell that's a fraction of the picture is cropped at the bottom. 00:08:23.200 --> 00:08:30.610 If we have a look at small device sizes and we start with really small ones we can see that the height 00:08:32.020 --> 00:08:43.570 adjusts to the heights property of 600 pixels but we can only see a fraction of the width of the image 00:08:43.570 --> 00:08:45.040 . 00:08:45.040 --> 00:08:52.400 If we increase the width of our screen our window then we can see more with. 00:08:52.870 --> 00:09:02.350 But once we reach the original width of the picture and we go beyond that then the picture starts stretching 00:09:04.360 --> 00:09:14.260 so the width of the picture gets bigger to adjusts to the width of our window and at the same time the 00:09:14.260 --> 00:09:21.190 height is stretching as well because the picture is keeping the same ratio. 00:09:22.570 --> 00:09:24.790 But we can see that it was ever 00:09:29.650 --> 00:09:37.170 additional Heights is added to the picture is going to be hidden. 00:09:38.320 --> 00:09:46.780 And the reason why is because the picture by default starts from the top left of our Jumbotron. 00:09:47.710 --> 00:10:01.150 So to fix this well we can do we can censor the picture using two additional values that we can add 00:10:01.480 --> 00:10:03.740 to the background property. 00:10:03.790 --> 00:10:13.630 So the first value we're going to go for Senza this value is going to censor the picture horizontally 00:10:13.650 --> 00:10:14.130 . 00:10:14.680 --> 00:10:19.300 And the second one is going to censor the picture vertically. 00:10:19.300 --> 00:10:28.000 So now if we start from small devices we can see that we're always looking at the picture from the sensor 00:10:29.090 --> 00:10:30.620 horizontally. 00:10:31.540 --> 00:10:32.780 OK. 00:10:33.010 --> 00:10:42.430 And once we go beyond the original width of our picture and the heights starts stretching as well then 00:10:42.880 --> 00:10:49.040 we look at the picture also from the sensor vertically. 00:10:50.110 --> 00:10:51.290 OK. 00:10:51.910 --> 00:10:58.780 So now we have finished styling our jumbotron and we are ready to start adding elements inside these 00:10:59.470 --> 00:11:04.990 measures are a little Commons just before the signing or the Jumbotron so what we have done so far we 00:11:05.350 --> 00:11:11.160 added a color background picture for the featured parts of our Web sites. 00:11:11.190 --> 00:11:12.190 OK. 00:11:12.910 --> 00:11:19.510 And we fixed the height of those elements are the moments we can see as he's working for large screens 00:11:19.530 --> 00:11:20.010 . 00:11:20.470 --> 00:11:27.970 OK we will see later how to adjust these heights for small screens like that. 00:11:27.970 --> 00:11:28.490 OK. 00:11:28.750 --> 00:11:36.310 So now we're going to go back to our index those e-mail file and start adding components inside our 00:11:36.310 --> 00:11:37.950 Jumbotron. 00:11:38.860 --> 00:11:43.590 So the first components is going to be the logo. 00:11:43.750 --> 00:11:47.630 So we're going to do going to creates a Dave. 00:11:49.240 --> 00:11:49.650 OK. 00:11:49.660 --> 00:11:53.620 And inside this Dave we're going to get a picture 00:11:53.620 --> 00:12:00.880 . 00:12:01.300 --> 00:12:05.860 We're going to create this picture using the logo to make our Web site. 00:12:06.550 --> 00:12:06.910 OK 00:12:06.910 --> 00:12:14.460 . 00:12:17.440 --> 00:12:21.180 So I'm going to look for plane. 00:12:23.050 --> 00:12:24.220 Let's go for 00:12:28.150 --> 00:12:34.820 this one and change the background color to white. 00:12:35.470 --> 00:12:37.870 Let's save it. 00:12:37.870 --> 00:12:44.380 Just remember to copy the credits using this button and place them somewhere on your website or in another 00:12:44.380 --> 00:12:48.430 page and give a link to that page on your web sites. 00:12:48.430 --> 00:12:48.820 So 00:12:52.810 --> 00:13:04.620 let's change the name of the file to plain and create a new folder in our products folder and call quality 00:13:04.740 --> 00:13:05.360 images 00:13:09.390 --> 00:13:15.110 where we're going to drag the picture. 00:13:15.630 --> 00:13:20.670 Right. 00:13:21.550 --> 00:13:25.540 Now let's go back to our Dave and art and image there 00:13:28.390 --> 00:13:36.540 and give it a source as to be its images and then play those P.A.. 00:13:37.270 --> 00:13:40.790 OK so we're going to give it a class so that we can style it. 00:13:41.760 --> 00:13:43.450 It's called it's logo. 00:13:43.630 --> 00:13:51.450 And let's go to the siestas file and syle our class. 00:13:51.520 --> 00:14:02.660 So we are going to be sitting here the size of the logo. 00:14:04.630 --> 00:14:10.440 So the syntax is not followed by the name of the class which is logo. 00:14:12.310 --> 00:14:14.050 And we can change the 00:14:18.100 --> 00:14:21.310 width and height. 00:14:21.490 --> 00:14:26.200 OK so let's go for a ways of 75 pixels 00:14:28.820 --> 00:14:29.980 and a height 00:14:33.940 --> 00:14:34.870 of 35 as well 00:14:35.270 --> 00:14:41.170 . 00:14:46.930 --> 00:14:48.490 Let's refresh our life preview 00:14:57.230 --> 00:14:59.000 and then we can see that picture. 00:14:59.780 --> 00:15:00.000 OK 00:15:00.020 --> 00:15:09.280 .