WEBVTT 00:00.170 --> 00:05.150 All right, guys, it's time for another challenge to review what we learn in the last lesson. 00:05.180 --> 00:12.110 Now, what I want you to do is to take your version of this personal site that looks something like 00:12.110 --> 00:12.440 this. 00:12.470 --> 00:20.090 It's beautifully designed with CSS styling, images, GIFs, and a whole lot more. 00:20.090 --> 00:23.300 And get it to run with your Python server. 00:23.300 --> 00:29.120 And in the process, you'll review what you learned about rendering HTML files, as well as serving 00:29.120 --> 00:30.560 up static files. 00:30.830 --> 00:37.880 You can go ahead and head over to the course resources, where I've included a link to download all 00:37.880 --> 00:39.950 of these files as a zip file. 00:40.610 --> 00:46.790 Once you've unzipped that zip file, you should end up with a folder that looks like this. 00:46.790 --> 00:54.950 We've got our favicon, our CSS folder with our styles.css, our image folder with all four images, 00:54.950 --> 01:00.920 and you want to move these files to their respective places inside the personal site. 01:01.010 --> 01:09.670 Feel free to go ahead and delete the index.html and the styles.css and see if you're able to use the 01:09.670 --> 01:14.620 files that you've got here to render it using your Python server. 01:14.890 --> 01:17.110 Pause the video and give that a go. 01:21.010 --> 01:27.490 All right, so the first thing we need to do is to move the files in here to their respective places. 01:27.520 --> 01:33.970 The index.html is going to go inside the templates folder, but pretty much everything else is going 01:34.000 --> 01:35.620 to go inside the static folder. 01:35.620 --> 01:40.360 So that includes the CSS, the favicon, as well as the images folder. 01:43.270 --> 01:49.810 Now that we've moved everything in here, there's actually nothing we need to do inside our server.py 01:49.840 --> 01:56.860 because it's still trying to render a web page called index.html, which in our case it's still called 01:56.860 --> 01:58.600 index.html. 01:58.630 --> 02:05.410 Now, the thing that we do have to change, though, is inside our index.html it's pointing straight 02:05.460 --> 02:12.540 towards CSS Styles.css, and also for the favicon, it's pointing straight to the favicon file. 02:12.540 --> 02:18.390 What we need to do is to take into account that it's now living inside a folder called static. 02:19.110 --> 02:26.190 So we're going to have to add the full file path to anywhere where we have a local static file being 02:26.190 --> 02:26.730 used. 02:26.730 --> 02:31.020 So that includes the CSS that includes the favicon. 02:31.050 --> 02:34.710 Also, any of the images that we're using in here. 02:34.710 --> 02:41.670 And if you want for sort of convenience sake, you can actually just copy this part which is the source 02:41.670 --> 02:42.780 of the images. 02:42.780 --> 02:51.150 And then you can hold down command R on Mac or control R on windows to bring up the find and replace. 02:51.150 --> 02:57.540 And we're going to replace this with static slash images slash. 02:57.540 --> 03:02.430 So we're basically adding static to this images slash. 03:02.580 --> 03:10.510 And if we go ahead and replace it in all five places then we should now be done with all of our refactoring. 03:11.500 --> 03:19.330 Now let's go ahead and restart our file so that it looks at all of these new images. 03:19.360 --> 03:24.430 And let's go to our website which is being served up by Python. 03:24.430 --> 03:32.770 And hopefully you have the same result as I do, which is the same personal site, but now served up 03:32.770 --> 03:34.900 with our Python server. 03:35.950 --> 03:39.820 Now this process has been pretty pain free. 03:39.820 --> 03:46.870 I would say we simply moved in the required index.html, the CSS images and the favicons. 03:46.870 --> 03:55.060 So all the files that make up a particular website and we simply added it to our flask project. 03:55.180 --> 04:03.100 Now what you can also do is you can get templates of HTML and CSS files from the internet. 04:03.100 --> 04:11.700 For example, a website like HTML5, ASP.Net where they have beautiful Feel free templates that you 04:11.700 --> 04:13.020 can tap into. 04:13.140 --> 04:19.530 Now consider if you are creating your own personal site, then you can pick from all of these beautiful 04:19.710 --> 04:24.720 HTML templates, which you can then update and personalize. 04:24.750 --> 04:30.150 For example, if we take this first one, we can go ahead and see it as a live demo. 04:30.150 --> 04:35.010 So we can see this website as it is and we can see how cool it looks. 04:35.040 --> 04:40.050 It's got buttons, it's got JavaScript, it's got beautiful CSS styling. 04:40.050 --> 04:45.600 And this might be a really good website for, say, keeping track of our portfolio, like the websites 04:45.600 --> 04:51.420 that we're building to have images of the websites, a link to the website, some brief description. 04:51.420 --> 04:53.430 And then we could just put this up online. 04:53.430 --> 04:58.440 And whenever we want to get hired as a web developer, we could point people towards it. 04:58.500 --> 05:02.070 So how do we make this work with Python? 05:02.100 --> 05:08.550 Well, the first thing we have to do is simply hit download, and it's going to download all of the 05:08.550 --> 05:10.650 files that make up this website. 05:10.680 --> 05:14.060 Now remember that because we're getting it for free. 05:14.090 --> 05:18.830 We need to attribute the designer who created this website. 05:18.860 --> 05:24.170 If you don't want to attribute it and you want to use it for commercial use, then you can pay just 05:24.170 --> 05:30.470 $19 and access all of their templates as well as support from the creator. 05:30.800 --> 05:37.370 Now compare that to a service like Squarespace, where you're basically getting the same service templates 05:37.370 --> 05:38.630 for your website. 05:38.630 --> 05:45.080 But in this case, you're going to be paying anywhere between 10 to $30 per month, which is a lot more 05:45.080 --> 05:45.920 expensive. 05:45.950 --> 05:51.080 But it's great if you don't know web development, but we're not going to be in that camp anymore. 05:51.680 --> 05:57.500 Let's go ahead and unzip that file that we just downloaded, which was called Paradigmshift. 05:57.500 --> 06:03.500 And we're going to try and transfer these files to our website over here. 06:03.590 --> 06:10.040 So again I'm going to go ahead and delete all of the previous files that's inside my static and templates 06:10.040 --> 06:10.940 folders. 06:13.910 --> 06:19.360 And I'm going to try and move the relevant parts of this new website over. 06:19.390 --> 06:25.270 So here they've got an index.html, a Readme text, and a license text. 06:25.300 --> 06:35.170 So all we need is to move our index.html to the templates and the images and assets over to the static 06:35.170 --> 06:36.100 folder. 06:37.930 --> 06:42.250 Now, one of the things to note is when you're looking at the demo, there's all of these beautiful 06:42.250 --> 06:43.000 pictures. 06:43.000 --> 06:48.340 But of course the designer doesn't have the rights to these pictures to distribute. 06:48.340 --> 06:54.430 So you'll notice that all the images inside the images folder are these sort of gradients. 06:54.430 --> 07:00.880 So don't be worried if when you run your website you just see a bunch of blurry gradients, it's not 07:00.880 --> 07:01.780 a problem. 07:02.440 --> 07:08.770 Now what we want to do is we want to see if we can get this index.html to work when it's being served 07:08.770 --> 07:10.480 up by our server. 07:10.510 --> 07:17.420 Now, the first thing we can do is simply just restart our project, rerun it, and see what it looks 07:17.420 --> 07:17.930 like. 07:17.930 --> 07:26.210 So let's refresh this static page and you can see it's got all of the HTML, but no styling and no images. 07:26.210 --> 07:32.870 So that is probably because we're not specifying the static folder in the path. 07:32.870 --> 07:38.750 So here we've got our assets and here we've got an image. 07:38.750 --> 07:41.750 But they're both inside the static folder. 07:41.750 --> 07:46.700 So we can do that quick trick with find and replace. 07:46.700 --> 07:52.970 So for anything that's inside the images folder we're going to replace it with static images. 07:53.390 --> 08:00.290 And for anything that's inside the assets folder we're going to replace it with static dot assets. 08:02.600 --> 08:09.860 And now if we go ahead and hit save and refresh this page, you can see it's now rendering the images 08:09.860 --> 08:11.690 as these sort of gradients. 08:11.690 --> 08:15.980 And it's also rendering the styling and CSS. 08:15.980 --> 08:18.020 Now how would you edit this. 08:18.020 --> 08:24.970 Well the easiest way is of course, to actually just edit this raw HTML so you can take any of this 08:25.120 --> 08:28.630 HTML and you already understand what most of it does. 08:28.660 --> 08:34.330 You've got tables, you've got headings, you've got H1, all sorts of tags in here. 08:35.290 --> 08:38.530 And you can edit it just like that. 08:38.620 --> 08:47.200 For example, if we scroll up to the very top, we can change the title to a name, for example Angela's 08:47.200 --> 08:48.400 Portfolio. 08:48.430 --> 08:56.080 And we can change the H1 which says Paradigm shift to our own name, for example. 08:56.080 --> 09:01.960 And now when I hit save and I refresh over here, you can see all of that being reflected. 09:02.020 --> 09:09.520 Now there's an even better way of editing HTML in Chrome, all thanks to the Chrome developer tools. 09:09.550 --> 09:14.680 If we open up the Chrome developer tools and go to the console, we can actually type a little bit of 09:14.680 --> 09:19.030 JavaScript to make anything on our web page editable. 09:19.030 --> 09:25.050 So to write this, we tap into to the document, which is this entire HTML document. 09:25.050 --> 09:30.930 And then we tap into the body, which is everything inside the body tag, which is the content of the 09:30.930 --> 09:31.710 website. 09:31.710 --> 09:40.500 And then we can call on a property called Content Editable, and we can set that to true. 09:40.530 --> 09:49.230 Now note here that in JavaScript the true boolean is spelled out with a lower t, not capital T like 09:49.230 --> 09:53.880 in Python, but the rest of it is pretty standard code, and we can all understand that. 09:53.910 --> 09:59.040 Now once I hit enter and that goes through, I can close down this pane. 09:59.040 --> 10:00.690 And now watch this. 10:00.720 --> 10:03.990 I can now edit anything that's on this website. 10:07.230 --> 10:13.230 All of these paragraphs or any bits of text is now completely editable. 10:13.410 --> 10:16.290 Now what if you wanted to delete some of these elements? 10:16.320 --> 10:18.570 What would be the easiest way to do that? 10:18.600 --> 10:25.960 Well, you can simply open up the Chrome developer tools and then we can use this little button here 10:25.960 --> 10:27.940 to select any element. 10:27.940 --> 10:30.790 So maybe we want to get rid of this paragraph here. 10:30.970 --> 10:32.110 I can select it. 10:32.110 --> 10:34.570 It locates it in the HTML. 10:34.570 --> 10:36.580 And I can just hit backspace. 10:36.580 --> 10:41.410 So I can select any part of the HTML elements that I don't like. 10:41.470 --> 10:46.660 For example, if I want to get rid of this whole section, well I would select it and then delete it. 10:46.690 --> 10:51.070 Maybe I could delete some more sections and make this a lot simpler. 10:51.100 --> 10:56.680 Now you can see this website just has two sections my name and my contact details. 10:58.120 --> 11:03.370 One of the unfortunate things, though, is that all of the changes that you're making here, even though 11:03.370 --> 11:09.880 you can see it and it's great, as soon as you hit refresh, all of those changes will disappear. 11:09.880 --> 11:16.090 And the reason is because when you hit refresh, what's happening is your browser is going to your server 11:16.090 --> 11:23.830 at this address and requesting all of the HTML and CSS files, which of course comes from over here. 11:23.860 --> 11:27.660 So this is unchanged by what we've done just now. 11:27.660 --> 11:30.570 It's completely not changed at all. 11:30.600 --> 11:36.690 So if you want all of these changes that you've made in the HTML, then what you have to do is actually 11:36.690 --> 11:46.260 save this web page as it is, and then you can move this HTML into your templates, and you can see 11:46.260 --> 11:52.380 that this is now a lot shorter with all of the changes that we made previously. 11:52.380 --> 11:56.880 And you can replace this with what's inside your index.html. 11:57.030 --> 12:06.270 This is probably one of the easiest ways of modifying a pre-built template, and you can see that there's 12:06.270 --> 12:09.420 plenty of templates for you to play around with. 12:09.450 --> 12:16.020 In fact, in the next lesson, when we're creating our final project, you're going to be editing this 12:16.020 --> 12:22.950 identity template completely from scratch, and you're going to be creating a digital name card. 12:23.370 --> 12:29.490 So have a play around, and once you're done, head over to the next lesson and complete the final project.