WEBVTT

00:00:07.710 --> 00:00:12.360
In this video we are going to build the skeleton and the creation of our up.

00:00:12.360 --> 00:00:18.540
So first of all let's create our products folder in FY FCB.

00:00:18.960 --> 00:00:29.890
Go to the Web sites folder and create a new folder there and call it this is between cities up OK.

00:00:30.150 --> 00:00:42.510
So inside this folder It's create our files we're going to create a file called index those BHB another

00:00:42.510 --> 00:00:51.150
file for the decoration and this called styling thoughts yes and another file for the demo gives code

00:00:51.450 --> 00:00:56.730
and let's call it javascript's tortas.

00:00:56.820 --> 00:01:05.110
So let's open these files using brackets control.

00:01:09.670 --> 00:01:16.720
The last one they just click writes and open with brackets.

00:01:19.290 --> 00:01:19.780
OK.

00:01:20.070 --> 00:01:26.550
Now let's open the index file.

00:01:26.550 --> 00:01:27.180
So we're going to

00:01:33.720 --> 00:01:38.800
go to the root directory file and just copy this.

00:01:39.000 --> 00:01:40.260
OK.

00:01:40.470 --> 00:01:46.020
Now we should learn in the index file.

00:01:47.040 --> 00:01:48.070
OK.

00:01:48.330 --> 00:01:48.960
All right.

00:01:48.960 --> 00:01:53.970
Now since we're going to be using bootstrap Let's gets a bootstrap templates from the bootstrap website

00:01:59.640 --> 00:02:03.130
let's click on getting started.

00:02:03.570 --> 00:02:05.950
And this is the template from the

00:02:19.480 --> 00:02:24.800
list into the title.

00:02:25.420 --> 00:02:31.840
The distance between cities up gay

00:02:41.140 --> 00:02:42.200
rights to start.

00:02:42.240 --> 00:02:45.980
Let's get a nice background picture for our website.

00:02:46.230 --> 00:02:50.410
OK so you can use the pics of A-Rods com web sites as we've done before.

00:02:50.850 --> 00:02:57.090
And once you get your picture you can place it in your FCB.

00:03:00.100 --> 00:03:04.620
So what is going to drag the picture in my of TB like that's

00:03:08.990 --> 00:03:10.260
OK.

00:03:11.430 --> 00:03:14.730
And that changes the name of the picture to

00:03:18.540 --> 00:03:21.500
road trip.

00:03:22.980 --> 00:03:23.430
OK.

00:03:23.560 --> 00:03:27.000
Now if I go to the CSSA file

00:03:29.900 --> 00:03:37.860
and said the background using this picture that is accessed the body image.

00:03:40.410 --> 00:03:40.930
OK.

00:03:41.020 --> 00:03:48.630
And let's change the background using the background property.

00:03:48.630 --> 00:03:55.050
So you know you use the aerial function you're going to set this using the name of our beach which is

00:03:55.130 --> 00:03:57.760
a road those pick.

00:03:59.280 --> 00:04:02.800
So that sensor are picture horizontally and vertically.

00:04:03.180 --> 00:04:08.390
And let's make it fixed so that if we scroll down it doesn't move.

00:04:09.780 --> 00:04:11.590
OK.

00:04:11.730 --> 00:04:18.020
Now let's also says the background size to cover.

00:04:18.120 --> 00:04:25.890
Now let's link our indexed page file to the signing sheet adding a new link elements.

00:04:27.290 --> 00:04:38.080
So this is an age going into the series as file and also give it a relationship attributes style sheets

00:04:38.110 --> 00:04:38.470
.

00:04:38.950 --> 00:04:43.510
So it's save and refresh.

00:04:45.300 --> 00:04:48.330
And then we can see our nice background picture.

00:04:49.380 --> 00:04:51.090
OK.

00:04:52.350 --> 00:04:59.080
Now one is the bit more seining to the body element so we want all the text to be white color.

00:04:59.240 --> 00:05:05.330
Said the color property to a white color.

00:05:06.530 --> 00:05:07.000
OK.

00:05:07.080 --> 00:05:11.180
And also it says the font family is going to be using arvo.

00:05:11.300 --> 00:05:13.470
OK.

00:05:15.600 --> 00:05:20.230
And as a fallback go for save.

00:05:20.620 --> 00:05:29.310
So this is a Google funds who would need to go to the Google font's website

00:05:33.600 --> 00:05:34.040
a

00:05:41.310 --> 00:05:41.790
look for

00:05:51.950 --> 00:05:55.410
it copy the link

00:05:59.770 --> 00:06:05.550
in place it's in the elements.

00:06:06.380 --> 00:06:07.440
OK.

00:06:07.910 --> 00:06:11.490
Now this creates the title and subtitle

00:06:15.510 --> 00:06:19.780
so you can replace everything inside a jumbotron.

00:06:20.940 --> 00:06:28.490
So this creates a div of class demo.

00:06:31.290 --> 00:06:32.160
Inside the Jumbotron.

00:06:32.160 --> 00:06:36.060
We need a container.

00:06:36.150 --> 00:06:37.600
OK.

00:06:39.070 --> 00:06:44.550
This is going to be a day of class container or container if you're going to go for container fluid

00:06:44.870 --> 00:06:46.460
for it.

00:06:47.320 --> 00:06:48.130
OK.

00:06:48.690 --> 00:06:53.720
And then our sites are always going to be a heading.

00:06:53.790 --> 00:06:58.170
I'm going to go for H-1 and let's copy this text

00:07:02.120 --> 00:07:06.650
and then we can have a paragraph.

00:07:07.100 --> 00:07:09.820
Let's copy that text.

00:07:11.440 --> 00:07:13.450
OK.

00:07:14.700 --> 00:07:20.930
So let's save this and refresh the page.

00:07:21.100 --> 00:07:26.240
Now I've got a heading and paragraph.

00:07:26.370 --> 00:07:32.050
Now let's some styling.

00:07:36.110 --> 00:07:37.630
OK.

00:07:38.720 --> 00:07:40.560
This other comment just before the body

00:07:44.410 --> 00:07:51.760
of the font family there and the background image.

00:07:52.220 --> 00:07:52.510
OK.

00:07:52.530 --> 00:08:01.140
Now if we look at our index file the bootstrap template is referring to local bootstrap folders and

00:08:01.140 --> 00:08:01.780
files.

00:08:01.980 --> 00:08:09.090
So we need to upload these to our products folder so we can just go to one of our previous projects

00:08:09.090 --> 00:08:10.140
where we use bootstrap

00:08:13.550 --> 00:08:19.140
OK and get the Shrub files from there

00:08:19.150 --> 00:08:37.480
.

00:08:56.760 --> 00:08:57.410
OK.

00:08:57.900 --> 00:08:59.040
Now if we

00:09:02.310 --> 00:09:08.770
go back to our approaches for the page.

00:09:09.880 --> 00:09:10.750
OK.

00:09:10.800 --> 00:09:16.620
Now we can see that's the background of our demo Tron is by default gray.

00:09:16.680 --> 00:09:19.610
So let's go ahead and change that.

00:09:21.000 --> 00:09:29.820
So we're going to give it a transparence background so you can access it using the Jumbotron clus and

00:09:30.030 --> 00:09:35.350
then tenue the background color to transparence.

00:09:36.620 --> 00:09:38.810
OK.

00:09:38.880 --> 00:09:47.100
We save and refresh and it's also going to change the letter spacing.

00:09:48.870 --> 00:09:50.630
So as for the heading.

00:09:50.700 --> 00:09:52.620
So it's access to the heading.

00:09:52.890 --> 00:09:59.460
My accessing the Jumbotron first and then the heading and let's change the letters spacing to something

00:09:59.460 --> 00:10:02.610
like 2.5 pixels.

00:10:04.290 --> 00:10:05.350
OK.

00:10:05.760 --> 00:10:08.010
That looks better.

00:10:08.180 --> 00:10:12.630
Also let's align the heading and the paragraph

00:10:15.720 --> 00:10:17.450
so has access them

00:10:21.020 --> 00:10:29.420
like this and use the text align property and send it to Santa.

00:10:31.370 --> 00:10:35.860
OK that was good.

00:10:35.900 --> 00:10:38.480
Now we need to take out any margins.

00:10:38.690 --> 00:10:42.570
OK so that's how text is spread.

00:10:42.590 --> 00:10:43.760
Just like that.

00:10:44.420 --> 00:10:51.520
So we go back to the jumbotron and says managing to zero.

00:10:51.680 --> 00:10:53.500
No.

00:10:54.770 --> 00:10:57.480
OK let's take notes.

00:10:57.890 --> 00:11:02.970
Putting all the planning some something small like 10 pixels because the Jumbotron has got some sun

00:11:02.970 --> 00:11:04.690
and padding.

00:11:05.690 --> 00:11:06.920
OK I know what to expect.

00:11:07.180 --> 00:11:07.450
OK.

00:11:07.490 --> 00:11:10.880
That's exactly what we want.

00:11:10.880 --> 00:11:11.170
All right.

00:11:11.180 --> 00:11:13.400
Now let's move to the phone

00:11:16.850 --> 00:11:23.310
screen that creates the form right after the paragraph.

00:11:23.310 --> 00:11:24.040
OK.

00:11:24.590 --> 00:11:30.960
So our form is going to be a horizontal form as we have covered in the bootstrap chapter.

00:11:31.100 --> 00:11:32.280
The horizontal forms.

00:11:32.300 --> 00:11:41.300
They have both labels and inputs are located a set number of columns out of the 12 columns of the bootstrap

00:11:41.300 --> 00:11:42.800
grid system.

00:11:42.830 --> 00:11:43.570
OK.

00:11:43.790 --> 00:11:48.500
So to create a horizontal form we are going to create a form

00:11:51.350 --> 00:11:59.970
and give it a class form horizontal OK.

00:12:00.740 --> 00:12:08.200
Then each of the inputs is going to be placed inside a div with the label.

00:12:08.300 --> 00:12:12.840
So this div is going to be of class form group.

00:12:14.180 --> 00:12:14.850
OK

00:12:18.290 --> 00:12:23.170
so let's create the inputs first and then we'll put the label just before the inputs.

00:12:23.360 --> 00:12:33.500
So the input is going to be placed inside a div which will tell the number of columns that the input

00:12:34.130 --> 00:12:35.210
is going to take.

00:12:35.210 --> 00:12:40.490
So in our case we're talking 10 columns for small devices.

00:12:40.520 --> 00:12:41.200
OK.

00:12:41.400 --> 00:12:50.190
So extra small devices we use the plus column X as k and we are looking at 10 columns.

00:12:50.210 --> 00:12:51.680
Then when the place the input inside

00:12:55.600 --> 00:12:58.810
so is an input of type text.

00:12:59.710 --> 00:13:03.780
OK let's give it an ID.

00:13:03.830 --> 00:13:09.040
I was going to use later in the code and also to link it to the label and let's place a placeholder

00:13:11.420 --> 00:13:15.090
inside the inputs saying origin.

00:13:16.490 --> 00:13:17.350
OK.

00:13:17.900 --> 00:13:24.620
And finally every inputs needs to be of class form control.

00:13:25.280 --> 00:13:25.980
OK.

00:13:26.330 --> 00:13:28.750
Now this creates a label for these inputs.

00:13:28.760 --> 00:13:31.970
So just before the Dave

00:13:35.190 --> 00:13:39.170
we're going to create a label and give it's a four attribute

00:13:43.040 --> 00:13:46.290
which will link the label to the inputs.

00:13:46.400 --> 00:13:49.480
OK we're using the idea of the inputs.

00:13:49.670 --> 00:13:57.380
Also we need to give the label a clause which will tell the number of columns occupied by the label

00:13:57.440 --> 00:13:59.820
and we're talking we're looking at two columns here.

00:13:59.870 --> 00:14:09.090
So column X as to and also the label takes a class called control label.

00:14:10.130 --> 00:14:11.370
OK.

00:14:11.930 --> 00:14:17.440
Now let's duplicate this and creates the second inputs and it's labeled

00:14:19.910 --> 00:14:23.040
we're going to change from 2 to

00:14:27.210 --> 00:14:32.540
and origin to destination.

00:14:34.350 --> 00:14:40.280
OK so that save and refresh.

00:14:41.090 --> 00:14:44.670
OK so we need to play some text inside the labels so that we can see them.

00:14:45.200 --> 00:14:54.080
So the first one is going to say from the second one to

00:14:57.470 --> 00:15:01.310
know save and refresh.

00:15:02.150 --> 00:15:06.460
Perfect no one has created the button.

00:15:06.720 --> 00:15:07.320
OK.

00:15:07.550 --> 00:15:14.690
So when you place the button outside the form because for some reason the Google Maps API doesn't like

00:15:14.690 --> 00:15:17.940
it when we place the button inside.

00:15:17.990 --> 00:15:24.230
OK so when I placed the button outside and then later on in the code we're going to write some code

00:15:24.230 --> 00:15:29.860
so that when we click on the button we executed the code rather than when we said most of all.

00:15:30.050 --> 00:15:41.390
So the button we're going to place is inside a div and we are going to skip two columns and then creates

00:15:41.420 --> 00:15:45.230
the button in the remaining 10 columns.

00:15:45.230 --> 00:15:54.290
So we're going to use the glass column X as offsets to skip two columns.

00:15:54.650 --> 00:16:03.170
That's going to be offset to for two columns and then we are using the 10 remaining columns for the

00:16:03.170 --> 00:16:05.010
button.

00:16:06.530 --> 00:16:07.960
Okay.

00:16:09.170 --> 00:16:16.420
And then inside Dave we're going to place our button going to use the button tag.

00:16:16.670 --> 00:16:17.310
And

00:16:20.350 --> 00:16:26.030
let's give it a few classes to stylist's So we're going to use the button class also for this color

00:16:26.030 --> 00:16:26.090
.

00:16:26.090 --> 00:16:28.400
We're going to use button info.

00:16:29.270 --> 00:16:30.110
OK.

00:16:30.620 --> 00:16:33.920
And also let's make it bigger.

00:16:33.920 --> 00:16:39.070
So if we save like this is how the money is going to look like.

00:16:39.170 --> 00:16:41.510
Well we don't have any sex at the moment.

00:16:42.110 --> 00:16:49.780
Let's play some text inside our Watson So it's OK.

00:16:49.820 --> 00:16:53.410
So let's make it bigger using the button large glass

00:16:59.460 --> 00:17:01.270
kind that's better.

00:17:01.370 --> 00:17:04.100
Also does give us an idea as we're going to use later in the code.

00:17:04.100 --> 00:17:12.720
So let's call its summits Otherwise if we don't want to use an ID we can just specify the on click attributes

00:17:13.020 --> 00:17:15.710
OK using a function.

00:17:15.710 --> 00:17:20.230
So for example we can define a function calc calculate root.

00:17:21.420 --> 00:17:29.210
OK as we said before in the activities in the Google Maps chapter and we don't need the ID.

00:17:29.390 --> 00:17:35.490
If we use that OK OK just save and refresh.

00:17:36.320 --> 00:17:38.000
OK.

00:17:39.020 --> 00:17:42.040
Now let's create the map container.

00:17:42.440 --> 00:17:44.180
OK so

00:17:49.700 --> 00:17:51.710
we can create a div

00:17:58.580 --> 00:18:02.210
class contain a float.

00:18:04.760 --> 00:18:05.030
OK.

00:18:05.030 --> 00:18:14.390
And then inside the container we're going to have our map container and let's give you an ID that we

00:18:14.390 --> 00:18:19.060
can use lasing the code Google map.

00:18:20.070 --> 00:18:21.680
OK.

00:18:22.490 --> 00:18:27.260
So let's add some styling.

00:18:34.730 --> 00:18:41.140
So let's give it a width of hundred percent.

00:18:41.830 --> 00:18:45.530
OK so that we're using the full width of the page for the heights.

00:18:45.530 --> 00:18:48.950
Let's go for a fixed height of 200 pixels.

00:18:49.180 --> 00:18:49.590
OK.

00:18:49.620 --> 00:18:50.830
I think that's.

00:18:51.030 --> 00:18:58.360
And let's add some much in top and bottom of 10 pixels.

00:18:58.680 --> 00:19:06.400
OK for the left hand side left hand side on the right hand side let's go for auto.

00:19:08.180 --> 00:19:13.060
And finally let's just add a box for the outputs.

00:19:13.700 --> 00:19:18.100
OK.

00:19:20.600 --> 00:19:24.360
So he's going to create a div and give it an ID output

00:19:26.550 --> 00:19:29.400
.

00:19:31.600 --> 00:19:38.000
So we come back to this later when we write the code.

00:19:38.150 --> 00:19:42.200
Now we have finished the skeleton and the creation of our up and we are ready to move.

00:19:42.200 --> 00:19:43.940
So the logic of the OP