WEBVTT 00:00:07.540 --> 00:00:12.750 In this video we are going to create our projects folder and starts building the skeleton of our web 00:00:12.750 --> 00:00:14.990 sites using a symbol. 00:00:15.210 --> 00:00:21.870 So first of all let's go to the same folder we used earlier for our months Web sites and create a new 00:00:21.870 --> 00:00:32.190 folder there for our game and it's to that month's game and then days for jackscrews. 00:00:32.680 --> 00:00:33.440 OK. 00:00:33.840 --> 00:00:40.680 So let's open this folder using brackets. 00:00:40.740 --> 00:00:41.700 OK. 00:00:41.820 --> 00:00:45.910 Let's create a new file inside the folder of quality index. 00:00:46.200 --> 00:00:49.420 Those ASML. 00:00:50.640 --> 00:00:50.910 All right. 00:00:50.910 --> 00:00:53.910 Now that starts the writing ASML code from scratch. 00:00:53.910 --> 00:00:58.020 So at the beginning we're going to have a doctype 00:01:02.040 --> 00:01:05.340 and we're going to set it to a symbol for a team of five. 00:01:05.850 --> 00:01:06.420 OK. 00:01:06.750 --> 00:01:13.890 And then we're going to have our ASML elements and then inside the elements we're going to have our 00:01:14.130 --> 00:01:19.680 head elements and then our body elements. 00:01:21.150 --> 00:01:30.480 OK so I'm going to add an attribute to the female elements is going to be the language and I'm going 00:01:30.480 --> 00:01:31.820 to say it's English. 00:01:32.580 --> 00:01:33.320 OK. 00:01:33.510 --> 00:01:36.070 In the head elements we start with the title. 00:01:37.230 --> 00:01:42.170 And we're going to say that two months game. 00:01:42.330 --> 00:01:47.020 Let's see our preview. 00:01:49.440 --> 00:01:51.230 You can already see the title there. 00:01:51.330 --> 00:01:53.130 OK. 00:01:53.460 --> 00:02:01.440 And then we're going to set our character encoding using the meta elements character sets and we'll 00:02:01.470 --> 00:02:04.640 say that to UTF 8. 00:02:06.510 --> 00:02:07.940 OK. 00:02:09.300 --> 00:02:19.340 Now let's move to the body element all before doing that let's add the viewport elements. 00:02:19.490 --> 00:02:29.490 There's going to be a META element and going to give it a name viewport and let's set some properties 00:02:29.490 --> 00:02:30.610 to our viewport. 00:02:30.690 --> 00:02:39.600 So we're going to set the width of the viewport to the device with like we did earlier in the first 00:02:39.600 --> 00:02:41.870 products. 00:02:43.680 --> 00:02:47.910 OK. 00:02:51.270 --> 00:02:56.580 And let's set the initial scale again 00:03:00.150 --> 00:03:02.400 to 1. 00:03:02.400 --> 00:03:05.130 So this means that the initial zoom level is going to be 1. 00:03:05.370 --> 00:03:14.860 And also this allow the user to zoom zoom out by setting the user scaleable property to Yes. 00:03:15.990 --> 00:03:19.160 And let's close our. 00:03:19.320 --> 00:03:22.570 OK. 00:03:22.620 --> 00:03:22.900 All right. 00:03:22.910 --> 00:03:29.850 Now before moving to the body elements we are going to create our external CIRCE's file and link it 00:03:29.850 --> 00:03:31.900 to our indexers ASML file. 00:03:32.270 --> 00:03:34.730 Ok so I'm going to call it styling. 00:03:35.090 --> 00:03:36.910 That's yes that's. 00:03:37.390 --> 00:03:44.820 And we're going to be putting all the declaration of our Web sites and we're going to need to link this 00:03:44.820 --> 00:03:50.880 file to our HMO file by adding a link elements inside the head elements. 00:03:50.910 --> 00:03:51.570 OK. 00:03:51.870 --> 00:04:03.210 So the relationship is going to be styling sheets or style sheets and the ref is going to go to styling 00:04:03.230 --> 00:04:04.750 duchesses. 00:04:05.080 --> 00:04:06.220 OK. 00:04:07.240 --> 00:04:08.020 Cornets. 00:04:08.190 --> 00:04:11.250 Now let's move to the body. 00:04:11.790 --> 00:04:16.650 So first of all we are going to just tile the background of our page. 00:04:16.890 --> 00:04:17.540 OK. 00:04:17.550 --> 00:04:19.680 We're going to go to our scissors File. 00:04:19.680 --> 00:04:21.860 We're going to select the ASML elements. 00:04:22.320 --> 00:04:23.110 OK. 00:04:23.120 --> 00:04:25.010 The style of the whole page. 00:04:25.650 --> 00:04:33.780 And then we are going to use the background property that we are going to set using the radial gradient 00:04:33.870 --> 00:04:36.690 function. 00:04:36.690 --> 00:04:42.210 So inside this function we're going to use three promises so the first one is going to be the shape 00:04:42.680 --> 00:04:44.790 on I way to go full circle. 00:04:45.300 --> 00:04:48.150 Then a couple of colors. 00:04:48.180 --> 00:04:53.280 So the first one is going to be the sensor color and they're going to choose a white color for this 00:04:53.290 --> 00:04:54.480 . 00:04:55.110 --> 00:04:57.270 And then a great color 00:05:00.730 --> 00:05:09.340 OK so you can see that's the gradings goes from a white collar in the middle to a great color in the 00:05:09.340 --> 00:05:10.280 edges. 00:05:10.480 --> 00:05:15.080 But the problem is we don't see the circle shape or the movements to fix that. 00:05:15.220 --> 00:05:21.090 We're going to need to give our HMO elements a height of 100 percent. 00:05:22.150 --> 00:05:26.580 OK now we can see the radio greetings. 00:05:26.770 --> 00:05:29.470 This is not going to work with the body elements. 00:05:29.470 --> 00:05:29.920 OK. 00:05:30.130 --> 00:05:33.860 So we need to use the female elements for the signing. 00:05:34.510 --> 00:05:35.220 OK. 00:05:35.770 --> 00:05:40.980 All right now let's move through the body elements and start adding a simple component in that. 00:05:41.260 --> 00:05:45.810 So you will notice that all the elements are wrapped inside this blue box. 00:05:45.970 --> 00:05:47.030 OK. 00:05:47.260 --> 00:05:50.140 So this is behaving as a container. 00:05:50.140 --> 00:05:58.450 So we're going to do going to create a div inside our body elements and we're going to give it an ID 00:05:58.750 --> 00:06:03.590 container and then we'll place all the other elements inside it. 00:06:03.940 --> 00:06:04.510 OK. 00:06:04.540 --> 00:06:07.890 So that's style this container using its ID. 00:06:08.120 --> 00:06:08.540 So 00:06:12.880 --> 00:06:16.440 using number sign followed by the name of the ID. 00:06:16.450 --> 00:06:29.370 So first of all let's give it a height of 300 pixels for example and a width of wandered example. 00:06:29.800 --> 00:06:31.810 And also it gives a background color 00:06:34.480 --> 00:06:37.710 using the this nice blue color. 00:06:37.750 --> 00:06:40.190 So let's pick this up using colors yellow. 00:06:40.930 --> 00:06:44.770 OK. 00:06:45.250 --> 00:06:51.560 Now if we look at our books this how it looks like let's centuries in the middle of the page we can 00:06:51.560 --> 00:06:52.950 show you the images later. 00:06:53.170 --> 00:06:57.150 So two centuries we're going to use the margin property. 00:06:57.540 --> 00:07:05.260 So we're going to said the top and bottom margins to one epix else the left and right margins to OKto 00:07:06.340 --> 00:07:08.510 so that the margin keeps getting bigger and bigger. 00:07:08.650 --> 00:07:13.820 Well the left and right hand sides until our elements a sense in the page just like this. 00:07:14.040 --> 00:07:14.910 OK. 00:07:15.430 --> 00:07:18.380 Now let's change the images slightly. 00:07:18.590 --> 00:07:22.090 Four hundred and five hundred 00:07:24.760 --> 00:07:25.090 fifty 00:07:27.720 --> 00:07:28.900 right. 00:07:29.020 --> 00:07:30.190 We're going to add some putting later. 00:07:30.190 --> 00:07:32.350 So it's going to become a little bit bigger. 00:07:32.500 --> 00:07:33.680 OK so let's do it now. 00:07:33.910 --> 00:07:36.560 So putting. 00:07:37.180 --> 00:07:43.150 So we need the padding to create this space between the border and the elements inside. 00:07:43.210 --> 00:07:45.660 OK so let's go for pixels 00:07:52.850 --> 00:07:56.830 or 20 pixels. 00:07:59.510 --> 00:08:02.060 OK. 00:08:04.120 --> 00:08:08.250 Now let's tile the cone is using the border radius poverty. 00:08:08.350 --> 00:08:09.940 OK so 00:08:14.680 --> 00:08:16.720 let's say that to 10 pixels 00:08:20.760 --> 00:08:22.700 OK looks fine. 00:08:22.960 --> 00:08:28.030 Now let's add this books shadow using the box Chido property. 00:08:29.120 --> 00:08:29.990 OK. 00:08:30.760 --> 00:08:32.600 So the syntax is as following. 00:08:32.800 --> 00:08:38.920 OK first we're going to have the horizontal offset and if that's positive that's me that's our shadow 00:08:38.920 --> 00:08:41.450 is going to be on the right of our box. 00:08:41.560 --> 00:08:42.130 OK. 00:08:42.520 --> 00:08:45.580 And then the vertical offsets. 00:08:45.590 --> 00:08:52.400 And again if that's positive this means that we're going to have our shadow at the bottom of the box 00:08:52.390 --> 00:08:52.430 . 00:08:52.450 --> 00:08:52.860 OK. 00:08:52.960 --> 00:08:56.580 If it's negative then it's going to be the opposite of a top. 00:08:56.600 --> 00:09:02.190 All right then we're going to have the blur radius. 00:09:02.260 --> 00:09:02.980 OK. 00:09:02.990 --> 00:09:09.030 So if you said that to zero pixels then our shadow is going to be sharp like that. 00:09:09.250 --> 00:09:13.780 If we increase that it's going to become more and more blurry. 00:09:14.300 --> 00:09:23.010 OK so let's leave is zero pixels for now then we can have the spread radius which is optional. 00:09:23.120 --> 00:09:26.740 It really does control the size of our shadow. 00:09:26.840 --> 00:09:32.420 So if we say to 20 pixels for example and see how eye shadow becomes bigger. 00:09:32.650 --> 00:09:37.270 OK let's leave it at zero OK for now. 00:09:37.610 --> 00:09:41.960 And this odd a color for our shadow. 00:09:42.080 --> 00:09:47.370 I'm going to use this color which corresponds to this code. 00:09:47.920 --> 00:09:51.480 Ok so now we got a shot over there. 00:09:51.640 --> 00:09:55.190 We only want our shadow to appear at the bottom of the box. 00:09:55.300 --> 00:10:01.420 So we are going to set the horizontal offset to zero. 00:10:01.780 --> 00:10:03.180 And that looks fine though. 00:10:03.240 --> 00:10:04.940 All right. 00:10:05.290 --> 00:10:05.560 All right. 00:10:05.570 --> 00:10:09.080 Now let's move to our school books. 00:10:09.190 --> 00:10:12.510 So we're going to do going to create a div inside our container. 00:10:12.700 --> 00:10:13.000 OK. 00:10:13.000 --> 00:10:17.610 And then you get a stylus using some background and Volksraad. 00:10:18.110 --> 00:10:24.770 So these guys are indexed as a symbol file and creates a div inside the container. 00:10:25.510 --> 00:10:26.690 OK. 00:10:28.750 --> 00:10:32.260 You're going to give it an ID school. 00:10:32.520 --> 00:10:33.610 OK. 00:10:33.670 --> 00:10:35.880 And inside are Dave. 00:10:36.630 --> 00:10:37.470 That's right. 00:10:37.500 --> 00:10:38.100 Score 00:10:41.090 --> 00:10:43.810 one on space zero. 00:10:44.360 --> 00:10:44.810 OK. 00:10:45.060 --> 00:10:47.430 So when are you playing the game. 00:10:47.430 --> 00:10:49.970 The score is going to change. 00:10:50.830 --> 00:10:51.510 OK. 00:10:51.630 --> 00:10:55.220 Where we get correct answers so we can to do. 00:10:55.230 --> 00:11:01.770 We're going to place the school value inside a span and we're going to give you some ideas so that we 00:11:01.770 --> 00:11:04.750 can manipulate it later using javascript. 00:11:04.770 --> 00:11:05.530 OK. 00:11:05.750 --> 00:11:12.690 So rather than writing 0 just like that's I'm going to copy that and paste it inside a span. 00:11:13.620 --> 00:11:14.290 OK. 00:11:14.760 --> 00:11:19.930 And I'm going to give it a spin and Id score badly. 00:11:20.380 --> 00:11:20.930 OK. 00:11:21.030 --> 00:11:27.080 So later on when we are writing javascript we're going to refer to this number using the ID score value 00:11:27.100 --> 00:11:27.340 . 00:11:27.570 --> 00:11:29.350 OK. 00:11:30.450 --> 00:11:33.090 Now let's add some styling to our schoolbooks. 00:11:33.380 --> 00:11:33.910 OK. 00:11:34.050 --> 00:11:39.510 So we're going to create a new line you referred to this square box using its ID score. 00:11:39.600 --> 00:11:48.280 So first of all let's give it a background color and let's get the color. 00:11:48.300 --> 00:11:52.020 Using the colors yellow from that. 00:11:52.440 --> 00:11:55.000 OK. 00:11:55.830 --> 00:12:02.620 And then let's change the text color using the color property. 00:12:02.620 --> 00:12:12.370 OK so let's pick the text color from here. 00:12:16.620 --> 00:12:26.740 OK so then let's add some padding to the text. 00:12:27.840 --> 00:12:34.690 OK let's go for five pixels. 00:12:36.730 --> 00:12:41.160 It's a bit more putting pixels. 00:12:42.290 --> 00:12:44.850 OK. 00:12:45.180 --> 00:12:45.770 All right. 00:12:46.030 --> 00:12:53.970 And let's position our box so we're going to give it a position absolute. 00:12:54.120 --> 00:12:58.920 OK so that we can position it's relative to the container. 00:12:59.240 --> 00:13:06.500 Ok but first of all let's give our container a position as views of relative. 00:13:06.800 --> 00:13:10.520 OK we need to do this. 00:13:10.590 --> 00:13:11.180 OK. 00:13:11.400 --> 00:13:18.510 Before we give the absolute position to the score box. 00:13:19.440 --> 00:13:20.800 OK. 00:13:21.620 --> 00:13:24.400 Now we can see our schoolbooks position there. 00:13:24.580 --> 00:13:25.150 OK. 00:13:25.290 --> 00:13:29.790 So that's going to be top 0 and left zero OK. 00:13:29.860 --> 00:13:34.160 And what we want we want our books to be positioned right there. 00:13:34.410 --> 00:13:49.200 So you can change the Left property OK to 400 for example or 500. 00:13:49.620 --> 00:13:50.720 That looks all right. 00:13:50.760 --> 00:13:51.550 OK. 00:13:51.690 --> 00:13:56.760 The space we have there is because of the padding of our container. 00:13:57.030 --> 00:13:59.580 OK. 00:13:59.580 --> 00:14:01.080 So the position looks fine. 00:14:01.120 --> 00:14:05.370 Let's a little bit more flooding the links. 00:14:05.460 --> 00:14:06.200 OK. 00:14:06.240 --> 00:14:09.540 And notice at some box shadow. 00:14:10.970 --> 00:14:11.880 OK. 00:14:11.880 --> 00:14:12.330 So 00:14:15.690 --> 00:14:17.830 you can see the shadow at the bottom only. 00:14:18.000 --> 00:14:23.040 OK so the first value the horizontal value is going to be 0 pixels. 00:14:23.400 --> 00:14:27.860 And then let's give the vertical one for pixels. 00:14:29.580 --> 00:14:30.290 OK. 00:14:30.330 --> 00:14:33.480 And let's change the color 00:14:36.390 --> 00:14:39.130 to this one. 00:14:39.560 --> 00:14:41.760 OK. 00:14:41.860 --> 00:14:45.250 If we don't say the blur radius it's going to be 0 by default. 00:14:45.270 --> 00:14:49.590 So this is similar to having zero pixels for the clarities. 00:14:49.770 --> 00:14:50.550 OK. 00:14:51.000 --> 00:14:51.330 All right. 00:14:51.330 --> 00:14:54.570 Now let's move to the feedback messages. 00:14:54.930 --> 00:14:55.910 OK. 00:14:55.980 --> 00:15:02.180 So we're going to be creating the correct box and the toy again box. 00:15:02.310 --> 00:15:02.820 OK. 00:15:02.820 --> 00:15:06.770 And then we're going to decorate them and position them inside our container. 00:15:06.960 --> 00:15:14.800 So first of all let's go to our index of ACBL file and create a couple of days. 00:15:15.450 --> 00:15:15.870 OK. 00:15:15.930 --> 00:15:18.760 Following the score Dave. 00:15:19.740 --> 00:15:22.390 So the first one is going to be for the correct message. 00:15:22.390 --> 00:15:25.060 Are you going to give us an ID of. 00:15:25.080 --> 00:15:25.930 Correct. 00:15:26.170 --> 00:15:26.810 OK. 00:15:27.100 --> 00:15:29.550 And you know right. 00:15:29.560 --> 00:15:30.090 Correct. 00:15:32.580 --> 00:15:38.890 The second one we're going to give it's an ID. 00:15:40.870 --> 00:15:41.830 Wrong. 00:15:42.620 --> 00:15:46.040 We're going to right inside try again. 00:15:47.900 --> 00:15:48.130 OK 00:15:54.870 --> 00:15:56.010 OK. 00:15:57.330 --> 00:16:04.010 All right now let's style these boxes and position them inside our container. 00:16:04.650 --> 00:16:10.630 So we're going to add a new line splits us with the correct books. 00:16:10.650 --> 00:16:16.080 So first of all we're going to position these boxes the same way we have positioned our school books 00:16:16.500 --> 00:16:21.580 which means that we're going to be giving them both of them a position property of absolutes. 00:16:21.720 --> 00:16:22.480 OK. 00:16:22.500 --> 00:16:28.910 So we are going to position them relative to the container box so remember that in order to do that 00:16:29.310 --> 00:16:32.850 we had to the relative position to our container. 00:16:33.060 --> 00:16:38.640 If we didn't have this then the relative positioning of these elements was going to be according to 00:16:38.640 --> 00:16:39.750 the body elements. 00:16:39.810 --> 00:16:40.590 OK. 00:16:40.600 --> 00:16:44.270 So we'd be looking for the first pair in spots. 00:16:44.310 --> 00:16:47.090 Is having a relative position. 00:16:47.160 --> 00:16:48.410 OK. 00:16:49.120 --> 00:16:49.380 OK. 00:16:49.390 --> 00:17:04.300 So position absolute's and then let's give it a left property of 20 pixels. 00:17:05.880 --> 00:17:13.550 OK we're going to come back to this later and let's change the background color. 00:17:16.620 --> 00:17:17.590 OK. 00:17:17.940 --> 00:17:19.650 I'm going to send it to this card. 00:17:19.890 --> 00:17:20.650 OK. 00:17:21.190 --> 00:17:22.490 Nice green color. 00:17:22.500 --> 00:17:24.390 You can change it if you want. 00:17:24.420 --> 00:17:25.110 OK. 00:17:25.120 --> 00:17:32.100 And then I'm going to change the text color to white 00:17:37.010 --> 00:17:39.540 which is. 00:17:40.440 --> 00:17:43.330 OK. 00:17:43.500 --> 00:17:46.530 Let's add some padding. 00:17:46.570 --> 00:17:49.020 We're going to have some space between the text and the boards. 00:17:49.030 --> 00:17:53.760 So we're going to go for 11 big cells just like we did with the schoolbooks. 00:17:54.510 --> 00:17:56.520 That looks fine. 00:17:57.670 --> 00:18:03.340 Now let's adjust our left prophecies so that this is positioned in the middle of the container. 00:18:03.550 --> 00:18:11.010 So destroy 2050 or 2060 and then it looks fine. 00:18:11.280 --> 00:18:11.860 OK. 00:18:11.880 --> 00:18:16.730 Now let's move to the other books. 00:18:17.600 --> 00:18:20.700 So it's going to be wrong. 00:18:21.370 --> 00:18:23.900 So the position is going to be absolute. 00:18:24.120 --> 00:18:24.660 OK 00:18:27.820 --> 00:18:34.540 let's change the Left position to 100 until we finish the styling. 00:18:34.920 --> 00:18:37.610 So it change the background color. 00:18:37.800 --> 00:18:39.770 I'm going to go for this nice red color. 00:18:39.940 --> 00:18:42.740 OK and. 00:18:43.220 --> 00:18:43.760 OK. 00:18:43.800 --> 00:18:44.570 Exclaims fine. 00:18:44.590 --> 00:18:45.430 And the painting is fine. 00:18:45.450 --> 00:18:46.060 OK. 00:18:46.360 --> 00:18:51.780 So now we want to position our box in the middle as well. 00:18:51.780 --> 00:18:53.640 So we're going to do. 00:18:53.820 --> 00:18:57.870 I'm going to hide the correct box. 00:18:57.880 --> 00:18:59.290 Anyway we're going to need to do this. 00:18:59.380 --> 00:18:59.850 OK. 00:19:00.010 --> 00:19:06.020 By using the display property and then later on using javascript's when we have a correct answer. 00:19:06.180 --> 00:19:06.860 OK. 00:19:06.880 --> 00:19:12.930 We are going to show the correct message for a short while OK and then hide it. 00:19:13.260 --> 00:19:15.560 OK. 00:19:15.570 --> 00:19:19.860 So now I'm going to set the display property to none. 00:19:20.840 --> 00:19:24.250 And no we can't see it now list position. 00:19:24.280 --> 00:19:27.750 The wrong message. 00:19:28.440 --> 00:19:34.350 Let's go for 250. 00:19:34.420 --> 00:19:35.430 OK looks fine. 00:19:35.460 --> 00:19:45.600 See mentally we are going to set the display property to none and we only show it when we get a wrong 00:19:45.630 --> 00:19:46.760 answer. 00:19:47.550 --> 00:19:52.670 OK.