WEBVTT

00:00:07.050 --> 00:00:12.560
Now we're going to create our projects folder and place a shemale NCSA files inside.

00:00:12.990 --> 00:00:22.590
So let's go to our Web sites folder and create a new folder there and let's call it our lovely course

00:00:26.330 --> 00:00:28.780
then bootstrap.

00:00:28.860 --> 00:00:33.340
We're going to be merely processing bootstrapping in these products.

00:00:33.510 --> 00:00:40.470
So we really need to use a bootstrap templates so we can download that in the bush wrap Web sites.

00:00:40.530 --> 00:00:50.770
Otherwise we can just copy the files from the company web site projects where we used Bush up OK and

00:00:50.990 --> 00:00:54.730
then we'll customize the files for our new products.

00:00:54.840 --> 00:00:57.150
So let's open this projects in brackets

00:00:57.180 --> 00:01:03.380
.

00:01:08.370 --> 00:01:11.790
OK.

00:01:12.580 --> 00:01:16.340
OK so let's go to the index that's a shame file

00:01:19.780 --> 00:01:26.840
and change the title to our lovely projects.

00:01:27.360 --> 00:01:33.670
And also let's empty the body elements from all a simple elements in a cube.

00:01:33.690 --> 00:01:36.990
Only the script and script elements are the end

00:01:40.380 --> 00:01:44.550
.

00:01:44.850 --> 00:01:45.760
OK.

00:01:45.890 --> 00:01:52.120
So let's open our citizens file and let's empty it.

00:01:54.010 --> 00:01:59.670
OK let's just change the title to our lovely course.

00:02:00.280 --> 00:02:01.490
That's best.

00:02:02.300 --> 00:02:03.040
OK.

00:02:03.600 --> 00:02:09.360
Now we are going to understand the structure of our work which means that we're going to plan the different

00:02:09.360 --> 00:02:13.800
steps we're going to go through to build our Web.

00:02:14.070 --> 00:02:14.990
OK so it's open.

00:02:15.030 --> 00:02:18.920
Our web page or the final web page.

00:02:20.280 --> 00:02:26.880
So first of all we are going to build the skeleton of the web page which corresponds to the female components

00:02:26.880 --> 00:02:27.270
.

00:02:27.660 --> 00:02:35.720
And then we're going to style these elements using siestas So inside the index was a HMO File.

00:02:35.850 --> 00:02:38.760
We're going to create all these simple components.

00:02:38.760 --> 00:02:45.930
So we're going to start by creating a video which correspond to the video you can see in the background

00:02:45.950 --> 00:02:46.430
.

00:02:46.860 --> 00:02:48.470
OK.

00:02:48.620 --> 00:02:49.100
So

00:02:52.530 --> 00:02:59.120
odd video to the very elements.

00:02:59.340 --> 00:02:59.930
OK.

00:03:00.030 --> 00:03:02.980
And then we're going to move to the navigation bar.

00:03:03.230 --> 00:03:09.070
And again it creates this collapsible navigation bar the same way we have learned in the bootstrapped

00:03:09.100 --> 00:03:14.040
up.

00:03:18.780 --> 00:03:27.990
So this time the publication bar is connected to the different sections of the Web site.

00:03:28.200 --> 00:03:34.700
So if we click on any of the links it will take us to the corresponding section.

00:03:34.860 --> 00:03:45.120
Also if you scroll down you will notice that the links are going to get updated depending on which section

00:03:45.150 --> 00:03:46.510
is active.

00:03:46.530 --> 00:03:52.680
So if you move to the About section the about link is active and if you move to the prosection the promised

00:03:52.680 --> 00:03:53.850
link is active.

00:03:53.940 --> 00:03:54.440
OK.

00:03:54.720 --> 00:04:00.840
So to create this we can use the bootstrap scroll plug in as we have done in the bootstrap chapter.

00:04:01.240 --> 00:04:01.730
OK.

00:04:01.800 --> 00:04:06.300
So it creates the location bar with scroll spine.

00:04:07.030 --> 00:04:08.110
OK.

00:04:08.520 --> 00:04:15.840
Next we are going to start creating the sections so going to start with the help section which includes

00:04:15.840 --> 00:04:20.200
the title The goal of the Join us.

00:04:20.470 --> 00:04:21.210
OK.

00:04:21.810 --> 00:04:32.800
So create the whole section with title goal and toilet's Muslim.

00:04:33.030 --> 00:04:43.080
Next we are going to create the About section hay which consists of these elements showing icons or

00:04:43.080 --> 00:04:47.660
pictures with some text a heading and a paragraph.

00:04:48.120 --> 00:04:52.940
OK.

00:04:52.980 --> 00:05:04.010
So that's going to be the About section create wealth section showing cause details.

00:05:04.620 --> 00:05:05.220
OK.

00:05:05.370 --> 00:05:12.370
So we're going to use the grid system to create this section as we have done in the company web site

00:05:12.390 --> 00:05:13.060
products.

00:05:13.210 --> 00:05:16.050
Okay.

00:05:19.440 --> 00:05:26.780
And then we going to create the next section which shows a carousel slider.

00:05:27.000 --> 00:05:27.570
OK.

00:05:27.900 --> 00:05:29.520
So this is the promise section

00:05:37.570 --> 00:05:39.830
it's going to say creates Carrousel.

00:05:40.590 --> 00:05:44.190
And finally we're going to add a footer for our site

00:05:48.310 --> 00:05:54.510
.

00:05:56.660 --> 00:05:58.540
OK.

00:05:59.220 --> 00:06:04.200
So it says regarding the body elements.

00:06:04.200 --> 00:06:06.150
Now if we move to the CSSA file

00:06:11.700 --> 00:06:14.550
Now let's start with the body elements.

00:06:14.550 --> 00:06:21.540
So we are going to be using these Crawl's by logging to spy on the body elements.

00:06:22.030 --> 00:06:23.380
OK.

00:06:23.740 --> 00:06:33.000
So we will need to make the body positioned relative.

00:06:33.310 --> 00:06:34.010
OK.

00:06:34.320 --> 00:06:39.550
This is going to be important so that the scrolls by blogging works OK.

00:06:39.900 --> 00:06:45.670
And also we're going to add a nice font family to the whole web page.

00:06:45.780 --> 00:06:47.000
OK.

00:06:47.130 --> 00:06:51.060
By adding this font family to the body elements.

00:06:51.060 --> 00:06:53.590
So that's going to be the first step in this yes as vile.

00:06:53.970 --> 00:06:56.820
OK.

00:06:56.820 --> 00:06:59.460
Next we're going to move to the video elements.

00:06:59.820 --> 00:07:06.960
So first we are going to set the video on the background of the web page and begin to make it fixed

00:07:06.980 --> 00:07:07.220
.

00:07:07.410 --> 00:07:08.500
OK.

00:07:09.390 --> 00:07:17.460
Also we are going to make sure that the video spreads across the whole web page.

00:07:18.780 --> 00:07:24.180
And finally we are going to make sure that the video appears behind all the elements.

00:07:24.180 --> 00:07:27.880
OK we're going to use the ad index property for this.

00:07:29.310 --> 00:07:31.490
OK.

00:07:33.120 --> 00:07:37.440
The video is not going to work in small devices.

00:07:37.800 --> 00:07:41.170
So what we're going to do for small devices like an iPhone.

00:07:41.340 --> 00:07:48.340
We are going to hide our video and we can assess the picture OK.

00:07:48.420 --> 00:07:52.540
Or we can choose a picture as the background of our sites.

00:07:52.620 --> 00:07:54.640
So if it is going to use the media queries.

00:07:54.900 --> 00:07:55.460
OK.

00:07:55.890 --> 00:08:01.310
And then we get to make sure that the image spreads across the whole web page.

00:08:01.550 --> 00:08:03.760
OK.

00:08:03.970 --> 00:08:04.230
OK.

00:08:04.260 --> 00:08:10.150
So the next step is going to be to style the navigation bar.

00:08:10.320 --> 00:08:12.450
OK so you get a stylus using.

00:08:12.560 --> 00:08:13.270
Yes that's

00:08:16.430 --> 00:08:17.040
next.

00:08:17.190 --> 00:08:21.410
We are going to style the home section and the elements inside.

00:08:21.720 --> 00:08:28.020
So the elements inside the home section are going to be placed inside a jumbotron.

00:08:28.250 --> 00:08:28.600
OK.

00:08:28.620 --> 00:08:37.150
And by default headings inside a Jumbotron they have some padding or matching bottom.

00:08:37.440 --> 00:08:41.420
So we're going to reduce that margin bottom for these headings.

00:08:41.970 --> 00:08:47.720
And also going to style the button and it's Hovis state.

00:08:48.230 --> 00:08:51.840
Next we are going to move through the about section.

00:08:51.900 --> 00:09:02.790
So first of all we know that's the navigation bar all the about link is going to become active once

00:09:03.420 --> 00:09:06.120
we scroll down enough.

00:09:08.250 --> 00:09:18.210
So that's the start of the about's elements hits the top border of our Web page.

00:09:18.210 --> 00:09:28.770
So if the top border of the or if the border of the avows page or the about section is there then we're

00:09:28.770 --> 00:09:34.000
going to have to wait until we get here to oxidase the link.

00:09:34.860 --> 00:09:37.010
But we would like to actually read the link.

00:09:37.140 --> 00:09:39.090
At this stage.

00:09:39.150 --> 00:09:43.150
So we're going to do we going to add some putting it up to these elements.

00:09:43.680 --> 00:09:47.790
OK so that's the elements starts there actually.

00:09:47.880 --> 00:09:48.590
OK.

00:09:48.600 --> 00:09:55.020
And when we score in down the about link gets activated onto the stage.

00:09:55.680 --> 00:09:58.270
OK.

00:09:58.290 --> 00:09:58.560
All right.

00:09:58.560 --> 00:10:12.150
So also we are going to do something about the width of this section so you will notice that in

00:10:14.820 --> 00:10:15.750
small screens

00:10:18.870 --> 00:10:23.230
the about section is taking the whole width.

00:10:23.700 --> 00:10:31.520
Once we go to bigger screens at some points the width is limited.

00:10:31.520 --> 00:10:39.080
OK so we're going to limit the width in big devices to something like 1000 pixels and then we're going

00:10:39.090 --> 00:10:43.140
to make these headings bold.

00:10:43.300 --> 00:10:49.010
And also we're going to assess the image of the icons of pictures.

00:10:50.060 --> 00:10:50.330
OK

00:10:50.330 --> 00:11:00.460
.

00:11:00.460 --> 00:11:01.820
OK.

00:11:02.970 --> 00:11:07.040
Next we're going to move to the promise section.

00:11:09.150 --> 00:11:09.600
So

00:11:13.110 --> 00:11:22.350
we are going to add some putting it up for the same reason we explained for the home section OK that

00:11:22.350 --> 00:11:27.000
we will be the link there and not there.

00:11:27.150 --> 00:11:30.930
OK.

00:11:30.930 --> 00:11:35.640
Also we're going to set the width of the carousel OK.

00:11:36.000 --> 00:11:40.600
By default the carousel spans across the whole width of the page.

00:11:40.860 --> 00:11:42.550
OK so we're going to change that.

00:11:42.570 --> 00:11:44.660
We're going to give it this width.

00:11:45.420 --> 00:11:54.610
And also we're going to change the height of the pictures inside the carousel items.

00:11:55.050 --> 00:12:02.250
And finally we're going to move the text or we call the carousel captions we're going to move them under

00:12:02.370 --> 00:12:02.940
the pictures.

00:12:02.940 --> 00:12:05.140
By default they are inside the pictures.

00:12:05.340 --> 00:12:05.890
OK.

00:12:06.060 --> 00:12:10.850
So I'm going to show you how to move them under the picture.

00:12:10.870 --> 00:12:14.290
Right.

00:12:17.280 --> 00:12:17.610
OK.

00:12:17.610 --> 00:12:28.620
And finally we are going to style the pictures inside the carousel items and different device sizes

00:12:28.620 --> 00:12:28.950
.

00:12:29.130 --> 00:12:36.720
And you can notice that these images they change the day size depending on the width of our screen

00:12:39.200 --> 00:12:40.630
.

00:12:41.730 --> 00:12:50.770
You can see what we're going to do the same thing for the brand.

00:12:51.430 --> 00:12:55.830
So you'll notice that just before

00:13:01.380 --> 00:13:12.000
we touch the text or before the toggle was in touch with the text this text becomes a little bit smaller

00:13:13.030 --> 00:13:15.810
to allow more space between the button and the text.

00:13:16.110 --> 00:13:16.730
OK.

00:13:16.770 --> 00:13:21.190
Otherwise we'd have seen the text appearing under the button.

00:13:21.270 --> 00:13:21.630
OK.

00:13:21.720 --> 00:13:28.890
So you have have seen two lines one line for the top button and one line for the Naveh or the front

00:13:28.920 --> 00:13:29.160
.

00:13:29.370 --> 00:13:29.610
OK

00:13:30.110 --> 00:13:36.600
.

00:13:36.690 --> 00:13:46.550
And the final step is to style the router using a transparent background.

00:13:50.460 --> 00:13:51.120
OK.

00:13:51.420 --> 00:13:56.870
So we understood the structure of our work.

00:13:56.970 --> 00:14:02.730
So now we know exactly the different steps we're going to go through to build our Web sites.

00:14:02.760 --> 00:14:09.210
So in the next video we're going to start building ASML components and solve them using some siestas