WEBVTT

00:00:07.130 --> 00:00:11.840
In this video we are going to build the skeleton and decoration of our up.

00:00:11.940 --> 00:00:19.110
So to get started we're going to go back through the jacquard immobile chapter and use the last file

00:00:19.650 --> 00:00:21.400
where we had three pages.

00:00:21.810 --> 00:00:25.820
So our components are going to go in the home page.

00:00:26.110 --> 00:00:26.640
OK.

00:00:26.790 --> 00:00:38.970
So I'm going to copy this code and then you're going to create a new file on a new folder inside our

00:00:38.970 --> 00:00:41.700
Web sites folder.

00:00:41.700 --> 00:00:42.780
And let's call it

00:00:48.600 --> 00:00:52.210
speed reader.

00:00:54.580 --> 00:00:54.850
OK

00:00:55.040 --> 00:01:01.680
.

00:01:01.970 --> 00:01:04.230
And let's open this folder using brackets

00:01:23.070 --> 00:01:28.320
now creates a new file there and coleus index those C.M..

00:01:29.820 --> 00:01:32.110
And let's base our code.

00:01:32.790 --> 00:01:43.830
OK so let's change the title to speed reader up.

00:01:44.100 --> 00:01:44.680
OK.

00:01:44.850 --> 00:01:53.270
And also this deletes the scripts contents must be had at the end.

00:01:53.280 --> 00:01:55.290
We don't need that for now.

00:01:56.340 --> 00:01:57.230
OK.

00:01:57.530 --> 00:01:58.730
And let's go for like previous

00:02:11.460 --> 00:02:14.070
case I don't see the image there.

00:02:14.890 --> 00:02:18.120
OK so they just place the image in our product folder

00:02:21.480 --> 00:02:26.760
.

00:02:29.830 --> 00:02:33.190
Now notice refresh

00:02:35.880 --> 00:02:39.510
and that's OK.

00:02:40.320 --> 00:02:42.960
Now let's empty the contents of page number one

00:02:48.270 --> 00:02:51.360
which is the.

00:02:53.850 --> 00:02:55.470
OK.

00:02:56.430 --> 00:03:01.380
And now we are ready to start loading components to our home page.

00:03:01.380 --> 00:03:03.900
So let's have a quick look at the final op

00:03:04.140 --> 00:03:09.370
.

00:03:09.570 --> 00:03:11.270
OK so that's how it looks like.

00:03:11.430 --> 00:03:18.550
OK so first of all you can notice that the number is placed in the footer rather than the head.

00:03:18.750 --> 00:03:19.850
OK.

00:03:20.820 --> 00:03:28.650
So let's go ahead and do that first.

00:03:28.700 --> 00:03:33.990
So what is going to copy the number from the header

00:03:36.740 --> 00:03:38.500
and place it in the future

00:03:41.990 --> 00:03:48.720
save and refresh.

00:03:48.720 --> 00:03:51.580
Can it do that to the other pages as well.

00:03:51.900 --> 00:03:54.720
OK so Page 2

00:03:57.760 --> 00:03:58.900
that's about.

00:03:59.070 --> 00:04:07.390
And they just copied and and places in the future.

00:04:09.060 --> 00:04:16.330
And these are the same for page 3.

00:04:21.030 --> 00:04:23.570
Hey it's save and refresh

00:04:23.600 --> 00:04:31.450
.

00:04:32.450 --> 00:04:33.360
OK.

00:04:34.050 --> 00:04:37.650
All it.

00:04:37.980 --> 00:04:42.300
Now let's add a background image to our up.

00:04:42.360 --> 00:04:47.690
So I'm going to create a CSSA file where we're going to place all our signing.

00:04:48.180 --> 00:04:50.040
And then of course index those CSX

00:04:52.680 --> 00:04:56.220
and let's link our H.M.S. file to the signing file.

00:04:56.220 --> 00:04:58.440
So we're going to go to the head section

00:05:01.840 --> 00:05:15.990
and remove this site and they create a link element and give it's a relationship style sheet.

00:05:16.880 --> 00:05:17.720
OK.

00:05:17.890 --> 00:05:23.610
And then if going to the state is fine.

00:05:24.910 --> 00:05:25.540
OK.

00:05:25.540 --> 00:05:28.330
Now let's go to this yesses file.

00:05:28.600 --> 00:05:39.840
So to add a background picture to our page we are going to use the ID of the page which is page 1.

00:05:40.940 --> 00:05:43.600
OK.

00:05:47.890 --> 00:05:52.750
And we're going to use the background property.

00:05:53.110 --> 00:05:53.670
OK.

00:05:53.790 --> 00:06:02.180
So first of all this gets a free picture so you can use these talks.

00:06:02.430 --> 00:06:04.630
I am Web sites to get some free pictures.

00:06:04.750 --> 00:06:05.540
OK.

00:06:05.680 --> 00:06:15.090
So the picture I'm using is the following one.

00:06:15.680 --> 00:06:17.160
OK.

00:06:17.260 --> 00:06:20.620
So I'm going to use that trial

00:06:25.240 --> 00:06:27.530
in the mail function.

00:06:28.440 --> 00:06:29.280
OK.

00:06:29.380 --> 00:06:38.840
Otherwise we can just download the image OK and link the file to the image.

00:06:38.890 --> 00:06:39.290
OK.

00:06:39.350 --> 00:06:41.350
But for now I'm going to use the URL.

00:06:41.470 --> 00:06:45.760
So then we are going to censor our image

00:06:49.900 --> 00:06:52.070
and change its dimensions.

00:06:52.300 --> 00:06:59.160
So first of all to censor is we're going to use the background position property.

00:07:01.890 --> 00:07:06.490
And I said that to censor and censor.

00:07:06.640 --> 00:07:07.460
OK.

00:07:08.050 --> 00:07:15.210
And then we are going to fix the image so that if we scroll down or scroll up the image doesn't move

00:07:16.660 --> 00:07:21.670
as we've done before the property to use as background attachments.

00:07:21.730 --> 00:07:23.670
I mean I say that too fixed.

00:07:24.400 --> 00:07:24.930
OK.

00:07:25.210 --> 00:07:33.910
And finally for the size of the image when we're using mobile it's better to set the background size

00:07:33.910 --> 00:07:39.790
property to 100 percent and 100 percent.

00:07:40.770 --> 00:07:41.880
OK.

00:07:41.920 --> 00:07:43.060
So you know using the

00:07:45.910 --> 00:07:52.900
cover value and rather than doing that we are setting the horizontal and vertical scaling to 100 percent

00:07:52.930 --> 00:07:54.250
and 100 percent.

00:07:54.430 --> 00:07:56.160
OK.

00:07:56.320 --> 00:07:56.760
All right.

00:07:56.800 --> 00:08:04.030
So for now let's add a header to our page.

00:08:04.270 --> 00:08:10.960
So we're going to go to the index does HMO file go in the content of page 1.

00:08:11.530 --> 00:08:13.060
OK.

00:08:14.120 --> 00:08:16.730
And create a header.

00:08:16.960 --> 00:08:24.220
So that's going to be a div and it's us a class header that we're going to use for signing.

00:08:25.450 --> 00:08:29.470
So we're going to place a heading and paper.

00:08:30.040 --> 00:08:30.280
OK

00:08:30.290 --> 00:08:39.650
.

00:08:48.430 --> 00:08:56.480
All right so now let's style our header elements.

00:08:56.480 --> 00:09:01.790
So we're going to go to our styling sheets.

00:09:02.340 --> 00:09:08.050
It's access the elements using the header class.

00:09:09.760 --> 00:09:10.880
OK.

00:09:10.930 --> 00:09:22.630
So we can change the color and said the color to all the page elements to a white color and we can do

00:09:22.630 --> 00:09:25.140
that straight in the page.

00:09:25.290 --> 00:09:25.700
OK.

00:09:25.780 --> 00:09:30.250
By setting the color attribute to a white color.

00:09:32.210 --> 00:09:34.240
OK that looks better.

00:09:34.270 --> 00:09:36.110
Now let's turn to our x.

00:09:36.130 --> 00:09:42.970
So we'll use the text align property but we can set to sensor says we want all the other elements to

00:09:42.970 --> 00:09:51.070
be censored later on we can just apply this property to the body Edelman's rather than the had a class

00:09:51.080 --> 00:09:51.610
.

00:09:51.990 --> 00:09:52.390
OK.

00:09:52.570 --> 00:09:54.490
So he's going to odd takes.

00:09:54.510 --> 00:09:59.950
Aline said OK.

00:10:00.270 --> 00:10:01.060
All right.

00:10:01.060 --> 00:10:05.430
Now let's move to the other HBL elements.

00:10:05.440 --> 00:10:07.360
So if you look at our file up

00:10:10.300 --> 00:10:16.450
if we click on the start reading button without having enough inputs we're going to have an error message

00:10:16.450 --> 00:10:17.500
.

00:10:17.500 --> 00:10:22.120
So let's create this error message first right after the title

00:10:28.540 --> 00:10:31.800
so it's going to be a div.

00:10:32.570 --> 00:10:39.100
Let's give it a lady air and let's copy this text inside.

00:10:40.610 --> 00:10:42.170
OK.

00:10:43.460 --> 00:10:45.340
It's so common so

00:10:48.580 --> 00:10:52.640
we're looking there.

00:10:53.720 --> 00:10:56.040
That's the title.

00:10:57.360 --> 00:10:57.880
OK.

00:10:57.910 --> 00:11:03.580
And then the error message.

00:11:06.710 --> 00:11:08.410
OK.

00:11:10.360 --> 00:11:12.610
Now let's style our error message.

00:11:12.880 --> 00:11:14.180
Let's go to the signing sheets

00:11:14.210 --> 00:11:19.730
.

00:11:20.550 --> 00:11:26.130
So are we going to access the elements using its ID which is error.

00:11:27.830 --> 00:11:32.090
So first of all let's give it a background color

00:11:35.050 --> 00:11:38.990
for this color.

00:11:39.210 --> 00:11:41.520
So this pick is using the color

00:11:45.050 --> 00:11:45.390
because

00:11:52.540 --> 00:11:58.290
and also it is give it a with less is half the width of the screen.

00:11:58.600 --> 00:12:05.890
OK so we can set the width property using a percentage.

00:12:07.490 --> 00:12:08.410
OK.

00:12:08.900 --> 00:12:13.290
And that's going to be relative to the containing elements in our case the bage elements.

00:12:13.390 --> 00:12:14.090
OK.

00:12:14.380 --> 00:12:17.850
Now let's center our elements using the margin property.

00:12:18.100 --> 00:12:25.600
So we're going to say that to 20 pixels or the top and Muslim sites and then also with the left and

00:12:25.690 --> 00:12:28.470
right sides to have it censored.

00:12:28.800 --> 00:12:34.380
And finally let's increase the font size.

00:12:36.160 --> 00:12:39.550
I'm going to go for 20 pixels.

00:12:40.740 --> 00:12:47.630
Well you'll notice that we're using a different fonds family you know file up.

00:12:48.190 --> 00:12:56.410
So that's the lobster font family which is a Google phones so we're going to go to the page that happens

00:12:58.720 --> 00:13:08.480
and says the phone's family or the whole page to lobster as a fallback.

00:13:10.470 --> 00:13:14.860
Though we need to go to the Google fund's Web sites

00:13:18.620 --> 00:13:21.140
.

00:13:21.440 --> 00:13:23.970
Guess the CNS link.

00:13:24.610 --> 00:13:25.700
Well that's fun.

00:13:26.140 --> 00:13:30.290
So let's look for it.

00:13:32.860 --> 00:13:34.600
OK so here it is.

00:13:34.660 --> 00:13:41.470
So when to click on quick use and then copy the link from there

00:13:44.740 --> 00:13:54.190
and misplaced the link inside or indexed those you have a file in the hat.

00:13:56.810 --> 00:13:57.300
OK.

00:13:57.320 --> 00:14:06.340
Now we can see on your phone it or it will hide the error message later using day query on page load

00:14:06.350 --> 00:14:06.690
.

00:14:07.030 --> 00:14:11.750
So for now let's move to the next elements which is the text input.

00:14:12.040 --> 00:14:19.240
So we're going to do going to replace the text inputs as well as this button and other buttons inside

00:14:19.600 --> 00:14:21.470
a div.

00:14:22.540 --> 00:14:23.140
OK.

00:14:23.290 --> 00:14:26.060
So the other buttons are these ones.

00:14:26.450 --> 00:14:30.370
OK the new resume and the pause button.

00:14:30.610 --> 00:14:37.760
So I'm going to place them inside one of them and give it an the inputs.

00:14:38.170 --> 00:14:44.310
So it just creates this Dave right after the error message.

00:14:45.360 --> 00:14:48.120
Let's have a comment there saying use inputs

00:14:51.940 --> 00:14:55.990
.

00:14:56.270 --> 00:14:57.270
OK.

00:14:57.790 --> 00:15:00.850
And this creates a div of ID

00:15:03.520 --> 00:15:04.590
inputs.

00:15:05.620 --> 00:15:06.420
OK.

00:15:07.000 --> 00:15:14.760
And let's start with the text area.

00:15:22.850 --> 00:15:24.140
OK Arctic's area.

00:15:24.430 --> 00:15:27.460
So let's give the user inputs

00:15:30.640 --> 00:15:31.030
and

00:15:33.810 --> 00:15:35.030
have a look first.

00:15:35.440 --> 00:15:36.140
OK.

00:15:36.400 --> 00:15:40.980
So if we save and refresh the page it's supposed to take the whole width of the page.

00:15:41.070 --> 00:15:41.390
OK