WEBVTT 00:00.090 --> 00:01.440 Think guys what's up. 00:01.440 --> 00:07.300 Welcome to a brand new lecture that I have decided to record just for you. 00:07.320 --> 00:16.110 This is a free lecture and as you already know we are building a brand B is the design with some advanced 00:16.200 --> 00:17.560 C S S. 00:17.700 --> 00:21.510 So without further ado let's go. 00:27.590 --> 00:36.140 Now if you go to deal lessons number thirty two and forty three if I'm not mistaken you would find the 00:36.140 --> 00:44.290 project blueprint attached file and the advanced project the attached felt introspective lectures. 00:44.330 --> 00:50.660 So go ahead and download DOS to this advanced project is the final project. 00:50.660 --> 00:57.890 The completed code from the brand new Photoshop design and this project blueprint is a template that 00:57.890 --> 01:02.510 you should use whenever you are creating a new Web site. 01:02.540 --> 01:09.050 Or whenever you are starting to code because it has all the necessary things it has DCR says it's ready 01:09.050 --> 01:09.820 for you. 01:09.830 --> 01:11.420 The JSE script is ready for you. 01:11.420 --> 01:18.920 The index is ready for you so go ahead and open a brackets and then we're going to open up these two 01:19.370 --> 01:25.280 Fullers here so go on file open folder and go to desktop. 01:25.280 --> 01:30.570 Click on Project blueprint and select folder is going to be right here. 01:30.650 --> 01:37.760 So open it up open an index and see SS as you can see it's totally empty. 01:37.760 --> 01:45.710 It is the skeleton with these installed as the libraries and some other options and also these use Jay 01:45.710 --> 01:48.250 queery and the main dungeon as an out. 01:48.290 --> 01:56.000 If we go to the advanced project and open up to the exact h t m l inside brackets as well and then the 01:56.600 --> 01:59.600 C S S of that file. 01:59.600 --> 02:05.910 We are now here in the brackets with the index and CSSA of the project blueprint. 02:05.930 --> 02:11.510 The empty file and the index and the sucess of the final advanced project file. 02:12.230 --> 02:18.260 So right now we're going to be coding in their advanced project fell right here inside the project blueprint 02:18.580 --> 02:24.460 and I also what I have open here is the Photoshop with the design. 02:24.590 --> 02:32.150 So we're going to start right in this first lecture to create and write the necessary h DML for this 02:32.150 --> 02:32.590 project. 02:32.600 --> 02:34.840 But before we do that one more thing. 02:35.570 --> 02:38.630 This project blueprint lags and I'm full. 02:38.660 --> 02:45.890 So if we just create an image folder and open up our our address project and copy these. 02:46.010 --> 02:51.380 I am Jees these images that I have took away from this because the. 02:51.470 --> 03:01.330 By the way we learn how to cut away and paste the images from a file to a separate image file like this. 03:01.350 --> 03:07.720 So we have learned that the earlier lessons so if you're not sure how to do it go ahead and rewash that 03:07.760 --> 03:08.990 lectures. 03:09.200 --> 03:10.580 But if you don't feel like it. 03:10.610 --> 03:18.110 I have cut and created all of those for you so you could save some time so I would just copy this whole 03:18.110 --> 03:28.420 folder here and pasted inside my project blueprint and we have the images right there are perfect exit 03:28.420 --> 03:32.410 out of here and now we're basically ready to start. 03:32.410 --> 03:37.500 So as I said in this lecture we are going to be taking care of the index. 03:37.780 --> 03:39.370 H t m l r. 03:39.400 --> 03:45.990 Let's name this title advanced project and now do Photoshop. 03:46.040 --> 03:53.870 The uses very boring font which is merely a pro-wrestler and I really dislike these fonts so I have 03:53.870 --> 04:00.020 decided to use something fun which is called Open sense and open sand's can dance. 04:00.020 --> 04:09.350 Now we've already went through on how to look for fonts on Google so if I just now write open sans Google 04:09.350 --> 04:14.900 fund I can see there is right there and you already know how to do this. 04:15.020 --> 04:20.760 You already know how to implement the fonts some exit out of here and to save time. 04:20.810 --> 04:22.730 I'm willing to leave you do that. 04:22.730 --> 04:25.180 Or if you want to save time as well. 04:25.190 --> 04:31.390 Go to the advanced project which is the final finished project that we were building and copy the forms. 04:31.730 --> 04:36.950 So these two fonts here are present condensed and open Sans. 04:37.010 --> 04:45.200 Notice that I have included the taluk and bold and light options here so this is ultra bold semi bold 04:45.230 --> 04:48.620 and I've included everything just to make sure. 04:48.830 --> 04:54.470 So you go ahead and copy those from the advanced project or go ahead and do that by your own through 04:54.470 --> 04:55.860 Google fonts. 04:55.930 --> 04:58.310 CVN with which we already did. 04:58.310 --> 04:59.720 In some of the earlier lessons. 04:59.720 --> 05:01.680 I'm just going to copy this here. 05:01.720 --> 05:04.130 OK that is perfect. 05:04.130 --> 05:09.090 So the phones are now installed and we are basically ready to build our website. 05:09.100 --> 05:12.350 We try to do side by side comparison with Photoshop. 05:12.360 --> 05:13.540 I'll be back in a second. 05:13.640 --> 05:18.950 So there we have it our Photoshop is on the right side and our brackets is on the left side. 05:19.070 --> 05:27.410 So inside the body image is going to zoom in reasoning to zoom in quite a bit so you can see better. 05:27.410 --> 05:28.420 That's right. 05:29.210 --> 05:33.950 Let's create a div that's going to hold all of these content here. 05:33.960 --> 05:42.040 So the class of wrapper and let's create the first thing first we see here it is a red rectangle or 05:42.040 --> 05:45.410 with some text inside. 05:45.410 --> 05:48.440 So let's do that inside the wrapper. 05:48.440 --> 06:00.540 Just create a div with a class of for example div dash Erard dash rectangle throws at any side. 06:00.640 --> 06:02.440 Ride some lorem ipsum. 06:02.440 --> 06:10.780 So if I now ride lips and press on tab I can get some random Lorem Ipsum here. 06:10.780 --> 06:12.850 I think this is too much for non-sale. 06:12.880 --> 06:14.860 I'm going to save it just like that. 06:15.710 --> 06:22.130 So now this red box is taking care of what now we need to do is the next section here so as can see 06:22.170 --> 06:25.460 when we see the background of the days. 06:25.720 --> 06:31.370 Next section is a bit Quraysh compare to the white background here. 06:31.500 --> 06:41.440 So why not create a div with a class of Quraysh perfect. 06:41.820 --> 06:46.740 And we have here the next one we need do is the paragraphs here. 06:46.740 --> 06:53.370 So this is going to create a div for the content holder here just like that. 06:53.400 --> 06:54.740 And image too. 06:54.760 --> 07:03.150 So let's create a div with a class of for example A.H. Paris which stands for paragraphs and this could 07:03.150 --> 07:07.450 be like three or four I'm just going to write in The Age paragraphs. 07:07.470 --> 07:10.970 Perfect inside of this div. 07:11.650 --> 07:15.750 Let's try to beautify this whole selection. 07:17.330 --> 07:18.660 Ok that's better. 07:19.820 --> 07:21.950 And let's remove these whitespace. 07:23.230 --> 07:23.800 OK. 07:23.970 --> 07:25.100 Perfect. 07:25.170 --> 07:30.990 This is not doing a nice job but right now it is pretty fun. 07:31.040 --> 07:36.740 And inside is and Paris Dave let's first insert this image of our guy here. 07:36.740 --> 07:44.440 So I'm g s r c i m g and go to person Dot be Angey. 07:44.690 --> 07:46.730 Let's create a class with a person. 07:47.090 --> 07:51.630 And because this guy here is on the right we're going to do a line. 07:51.640 --> 07:52.220 All right. 07:52.220 --> 07:57.600 Class which if you remember in our helper class is a line. 07:57.600 --> 07:57.950 Right. 07:57.950 --> 07:58.760 What it does. 07:58.760 --> 08:00.560 It simply floats the elements. 08:00.610 --> 08:01.340 Right. 08:01.470 --> 08:03.190 Burford close this. 08:03.200 --> 08:05.200 Now let's see how does it looks. 08:05.270 --> 08:08.000 So far in our life preview here. 08:08.000 --> 08:09.490 All right good. 08:09.500 --> 08:12.550 Nowhere near close but we're getting there. 08:12.650 --> 08:19.670 And now we have these four paragraphs here with some larm some code and that is pretty self-explanatory. 08:20.120 --> 08:27.050 We can do B Times foreign press on time and we get these four paragraphs here and I can just copy the 08:27.050 --> 08:33.620 code from the Photoshop and insert into the corresponding paragraphs. 08:33.620 --> 08:34.380 Perfect. 08:34.400 --> 08:40.380 We're going to take care of these arrowed next because that is the CSSA three part following. 08:40.760 --> 08:45.440 We have this image of our guy here named John Downey. 08:45.440 --> 08:47.570 So under the grayish div.. 08:47.600 --> 08:52.050 OK because the section is ending here and we have a new section here. 08:52.250 --> 09:00.150 We can create the image source and image is called Person dash 2. 09:00.530 --> 09:04.700 And the class will be as well person dash 2. 09:04.820 --> 09:05.250 All right. 09:05.270 --> 09:08.270 Next up we have the media. 09:08.330 --> 09:14.870 Meet John Downey and these red background here so let's try to create the demo for dance so we're going 09:14.870 --> 09:16.720 to call this heading for. 09:16.820 --> 09:21.710 This is going to be having for glass of call out this I'm going to write. 09:21.710 --> 09:24.350 Meet John Downey. 09:24.420 --> 09:30.900 So far obviously doing anything this is just the markup and what we have here is these three paragraphs 09:31.620 --> 09:41.260 so self-explanatory again type the times three and then press on tab and just copy the code press on 09:41.260 --> 09:45.730 escape click on the d i can click here and copy the code. 09:48.810 --> 09:49.980 Same for this 09:53.240 --> 09:55.330 same for this. 09:55.340 --> 10:03.320 Now what's left to do is this footer here which has some text and a gray background. 10:03.380 --> 10:06.750 So all we can do is let's create this heading 3. 10:06.790 --> 10:11.180 This is going to be heading 3 this next year because it's bigger slightly bigger and is John Downey 10:11.200 --> 10:17.090 silk How do you treat glass of silver hatting. 10:17.180 --> 10:22.640 That's how we're going to close Colet because it is it has a silver background and we're going to add 10:22.640 --> 10:27.950 a class of text Center which basically what it does. 10:27.970 --> 10:29.860 Whoops we don't have that class here. 10:30.200 --> 10:38.450 We can just add it as a helper class which is going to do text center text the line center. 10:38.450 --> 10:39.380 That is all. 10:39.380 --> 10:45.860 So we're going to add a super heading class and text center class and it's going to read the exact Lorem 10:45.950 --> 10:48.220 Ipsum from here. 10:48.230 --> 10:52.650 So those are HD M-L Let's see how it looks. 10:52.650 --> 10:59.210 Our code editor and obviously it looks nowhere near close to what we want to achieve. 10:59.400 --> 11:04.570 So we've compared this to the photoshop file. 11:05.030 --> 11:12.020 Right here you can see how powerful C Ss actually is because these are the next lessons will be about 11:12.350 --> 11:18.620 history and how we can make things ugly looking website to be exact as is. 11:18.620 --> 11:22.570 So make sure you don't miss on those three lectures. 11:22.610 --> 11:26.720 They will be released in the upcoming weeks so stay tuned. 11:26.720 --> 11:28.110 And thank you for watching.