WEBVTT 00:00:06.730 --> 00:00:10.630 All right now we are ready to add a nice photo for our Web site. 00:00:10.710 --> 00:00:12.200 OK. 00:00:13.500 --> 00:00:23.850 So let's go to our index of HMO file and before creating our future we're just going to add a div of 00:00:25.650 --> 00:00:27.700 glass clear. 00:00:28.130 --> 00:00:28.870 OK. 00:00:29.370 --> 00:00:34.460 Following the floating elements the left side bar on the right side. 00:00:34.500 --> 00:00:35.270 OK. 00:00:35.930 --> 00:00:38.020 Now let's add our future. 00:00:38.270 --> 00:00:40.810 So I'm going to use the food stock for this. 00:00:41.190 --> 00:00:42.380 OK. 00:00:43.290 --> 00:00:50.130 And we're going to give it a class photo that we are going to be styling in a bit. 00:00:50.130 --> 00:00:51.030 OK. 00:00:51.040 --> 00:00:58.290 And inside the future we are going to place a diff. 00:00:59.360 --> 00:01:04.470 OK I can put a paragraph inside is. 00:01:04.890 --> 00:01:06.510 We're going to be writing some text. 00:01:06.800 --> 00:01:07.480 OK. 00:01:07.910 --> 00:01:14.070 What's the company name. 00:01:19.740 --> 00:01:21.330 OK. 00:01:22.530 --> 00:01:25.800 And then copyright 00:01:30.430 --> 00:01:32.470 to create this symbol. 00:01:32.580 --> 00:01:38.220 I'm going to use an image editing going to make it using a sound 00:01:42.070 --> 00:01:43.200 copy. 00:01:43.210 --> 00:01:44.990 OK. 00:01:45.300 --> 00:01:58.330 And then after that you don't write 2000 ten thousand fifteen. 00:01:59.090 --> 00:01:59.400 All right. 00:01:59.400 --> 00:02:02.260 Now let's dial our photo. 00:02:03.150 --> 00:02:08.520 So let's go to the styling sheet and 00:02:12.180 --> 00:02:13.140 create a new line 00:02:18.510 --> 00:02:20.170 for the food sackless. 00:02:20.540 --> 00:02:23.160 OK. 00:02:23.250 --> 00:02:29.090 So let's give it a height of 50 pixels 00:02:33.020 --> 00:02:35.700 or 60. 00:02:37.970 --> 00:02:39.640 OK. 00:02:40.320 --> 00:02:43.900 So let's get some background color. 00:02:44.010 --> 00:02:44.890 We're going to use background. 00:02:44.910 --> 00:02:54.870 We're going to be using the linear gradient so linear gradients and then the first color is going to 00:02:54.870 --> 00:02:55.820 be the top one 00:03:01.410 --> 00:03:06.840 and the second one is going to be the bottom one. 00:03:08.730 --> 00:03:12.650 OK here we go. 00:03:12.740 --> 00:03:13.740 That looks nice. 00:03:13.870 --> 00:03:15.890 No going to need to add some padding. 00:03:16.140 --> 00:03:21.780 OK. 00:03:21.780 --> 00:03:35.510 So when he's only two values over the top and what somebody is go for some pixels on the left and right 00:03:35.510 --> 00:03:38.160 hand sides let's go for 20 00:03:42.000 --> 00:03:46.470 or 30 pixels but expensive. 00:03:46.980 --> 00:03:49.280 OK. 00:03:51.270 --> 00:03:58.140 And also there's some money in there to create a gap between the foot and the other elements before 00:03:58.150 --> 00:03:58.650 . 00:03:59.160 --> 00:04:11.190 So we're going to use Margene top only and listed that to 10 pixels or even 15 pixels. 00:04:12.720 --> 00:04:14.910 OK. 00:04:14.910 --> 00:04:17.190 One last point before we finish. 00:04:17.310 --> 00:04:25.440 If we go back to our Tick's inputs there we can see that the border is darker than the target's one 00:04:25.470 --> 00:04:25.570 . 00:04:25.650 --> 00:04:26.760 OK. 00:04:26.790 --> 00:04:29.850 Now the reason why is because there is actually some styling for this model. 00:04:30.120 --> 00:04:30.440 OK. 00:04:30.460 --> 00:04:31.690 But we need to use. 00:04:31.830 --> 00:04:36.770 So let's get the color of the board first. 00:04:36.810 --> 00:04:37.830 So actually this one. 00:04:38.070 --> 00:04:38.790 OK. 00:04:39.230 --> 00:04:52.600 And let's go back to our text input styling art a border property they're going to sit there with two 00:04:52.700 --> 00:04:58.220 one pixel two solid styling and paste the color. 00:04:58.760 --> 00:05:03.260 And you can see that our water looks best. 00:05:03.400 --> 00:05:04.790 OK. 00:05:04.870 --> 00:05:07.580 And just one more point before we finish. 00:05:07.630 --> 00:05:10.660 Let's just set the font properties to our page. 00:05:10.660 --> 00:05:21.790 So let's go to the beginning of our his file and selects the body and then sets the font property. 00:05:22.070 --> 00:05:22.520 OK. 00:05:22.630 --> 00:05:28.390 So there we're going to go we're going to start with Ariel if it doesn't work we are going to move to 00:05:28.810 --> 00:05:30.160 the Vatican. 00:05:30.160 --> 00:05:35.230 And finally we are going to move to Sunseri. 00:05:36.070 --> 00:05:40.520 OK. 00:05:43.390 --> 00:05:47.740 Just one comment before we finish regarding cross-browser compatibility. 00:05:48.070 --> 00:05:55.540 Whenever we use a gradings function like Linnea gradients we need to add a few more lines to make sure 00:05:55.630 --> 00:05:58.130 that this is going to work in all browsers. 00:05:58.450 --> 00:06:03.220 So the other lines are going to be similar to the first line we are just going to be adding something 00:06:03.430 --> 00:06:05.530 at the beginning of the function. 00:06:05.530 --> 00:06:13.810 So for the first one we're going to add web gets or minus sine wave case minus sign for very and then 00:06:13.870 --> 00:06:23.920 minus sign minus sign for Oprah and then minus sign was minus sign for Firefox and we're going to do 00:06:23.920 --> 00:06:26.530 the same thing whenever we have a gradient function 00:06:26.530 --> 00:07:02.460 . 00:07:02.460 --> 00:07:02.850 All right. 00:07:02.860 --> 00:07:08.750 Now let's save all our files and then upload our Web site to the server. 00:07:08.980 --> 00:07:11.680 So we're going to open fire FCP. 00:07:11.680 --> 00:07:18.640 You can use the free accounts we have created earlier in the H.M.S. of the scores or any other accounts 00:07:18.640 --> 00:07:19.360 you want. 00:07:19.360 --> 00:07:23.160 I'm going to use my complete web development course web sites for this. 00:07:23.170 --> 00:07:28.200 So we have created a folder Web site inside the root directory of the Web sites. 00:07:28.350 --> 00:07:28.860 OK. 00:07:29.140 --> 00:07:35.730 And I'm going to copy the months Web site's products folder in there using the upload. 00:07:37.930 --> 00:07:41.750 OK so now of course my projects folder in there. 00:07:41.830 --> 00:07:42.330 OK. 00:07:42.550 --> 00:07:48.820 So to access the index that's a sample file I would need to type the address of the Web site followed 00:07:48.820 --> 00:07:53.670 by fossilise Web site and then fossilise the name of the folder. 00:07:53.950 --> 00:08:04.630 Let's change the name of this folder OK and take out all the spaces so that is easy to type in the address 00:08:04.630 --> 00:08:07.060 bar. 00:08:09.100 --> 00:08:11.800 OK. 00:08:16.190 --> 00:08:28.030 All right so now if we type the Web site's name for fall by the web folder and then the other file that 00:08:28.190 --> 00:08:32.770 we're going to land in the index was a symbol file here and we can see a whole web site. 00:08:33.050 --> 00:08:35.580 All right. 00:08:35.650 --> 00:08:39.830 Now let's make sure that's our Web site is S.M. complaints. 00:08:39.930 --> 00:08:47.290 SML is more or less Strix a shemale and it means that we are following all the districts ASML rules 00:08:47.290 --> 00:08:47.620 . 00:08:47.620 --> 00:08:54.030 For example we need all the type names to be in lowercase and also we want our documents to be well 00:08:54.190 --> 00:08:57.850 structured tags closed and so on. 00:08:57.850 --> 00:08:58.990 OK. 00:08:58.990 --> 00:09:03.110 So what we're going to do going to use a web site for this. 00:09:03.220 --> 00:09:06.700 It's going to be in the W3 dot org Web sites. 00:09:06.700 --> 00:09:07.720 OK. 00:09:07.720 --> 00:09:10.100 So you typed the address of our Web site there 00:09:13.390 --> 00:09:14.380 and let's check 00:09:17.530 --> 00:09:21.250 and you can see that's the document checking is completed. 00:09:21.250 --> 00:09:23.260 And we have no errors or warnings. 00:09:23.260 --> 00:09:24.830 OK. 00:09:25.090 --> 00:09:27.930 All right. 00:09:29.980 --> 00:09:31.040 Congratulations. 00:09:31.060 --> 00:09:36.710 You have just created a nice web site from scratch using ASML and CSX. 00:09:36.880 --> 00:09:42.490 And you had the opportunity to review and proxies many of the skills that you have learned in the email 00:09:42.550 --> 00:09:44.730 and see autopsies of the schools. 00:09:44.920 --> 00:09:50.230 If you have made something different or if you have changed the design then I would be very interested 00:09:50.230 --> 00:09:57.220 in seeing what you have done so please post the results in the forum of the schools and share with me 00:09:57.220 --> 00:09:58.310 and other students. 00:09:58.360 --> 00:10:03.880 I look forward to seeing you finishing other projects and becoming a highly skilled and professional 00:10:04.000 --> 00:10:04.660 web developer 00:10:04.670 --> 00:10:12.100 .