WEBVTT

0
00:00.450 --> 00:02.970
All right, so let's go ahead and run through the solution.

1
00:03.270 --> 00:05.940
The first thing I'm going to do is to head over

2
00:05.940 --> 00:08.310
to the website and download the template.

3
00:09.270 --> 00:11.040
Once I've downloaded the template,

4
00:11.070 --> 00:16.070
I'm going to unzip the file and get access to all the files inside.

5
00:17.490 --> 00:20.370
Now I've already set up my Flask server

6
00:20.400 --> 00:23.760
which is pretty simple by now. I've created my app,

7
00:24.090 --> 00:29.090
I've set up the home routes and I've set my app to run on debug mode.

8
00:30.270 --> 00:34.230
Now I have to create the necessary directories.

9
00:34.260 --> 00:37.020
So I'm going to need a directory called templates,

10
00:37.560 --> 00:41.100
and I'm also going to need one called static.

11
00:42.750 --> 00:44.880
With those two folders in place

12
00:44.880 --> 00:49.880
I can now start moving over the relevant parts of these files; index.html

13
00:51.390 --> 00:55.080
goes into templates, assets

14
00:55.170 --> 00:57.150
and images go into static.

15
00:59.510 --> 01:00.343
<v 1>Right</v>

16
01:00.470 --> 01:00.740
<v 0>Now,</v>

17
01:00.740 --> 01:05.740
one of the first things we're going to try and do is just to see if this works.

18
01:06.290 --> 01:11.090
So we're gonna start up our server and try to render that index.html.

19
01:12.080 --> 01:15.530
And if you've got another project running in the background

20
01:15.530 --> 01:18.230
which is using our server address,

21
01:18.470 --> 01:21.740
then you are going to get an error that says address already in use.

22
01:21.980 --> 01:26.210
So just make sure you stop any other files from running and then run this again.

23
01:28.250 --> 01:32.540
So here's our webpage with just the HTML. It's very,

24
01:32.540 --> 01:36.290
very simple, and it doesn't have any of the styling or the images.

25
01:36.710 --> 01:41.240
So we're going to have to fix that by going into the index.html and figuring

26
01:41.240 --> 01:44.300
out which parts of it need to be changed.

27
01:44.900 --> 01:48.860
Now notice that in the download, we got two folders;

28
01:48.950 --> 01:52.370
assets and images which are now both inside static.

29
01:52.700 --> 01:57.700
So we're going to have to find and replace anything that is assets and change

30
02:00.170 --> 02:03.350
that to static/assets,

31
02:03.770 --> 02:04.603
<v 1>...</v>

32
02:06.560 --> 02:09.170
<v 0>and also do the same with images,</v>

33
02:14.510 --> 02:14.870
<v 1>right?</v>

34
02:14.870 --> 02:17.300
<v 0>There's actually not a lot of code in here.</v>

35
02:17.330 --> 02:21.080
You can pretty much scroll from the top to the bottom and you can see there's

36
02:21.080 --> 02:23.090
not a lot of stuff here.

37
02:23.750 --> 02:26.660
So now that we've fixed those paths,

38
02:26.720 --> 02:30.920
let's see if we can hit save and go back to refresh our website.

39
02:31.880 --> 02:34.310
Now, if you are getting what I'm seeing here

40
02:34.310 --> 02:39.310
which is the CSS file being rendered from the previous project where we got hold

41
02:40.640 --> 02:45.640
of the portfolio site, that remember is because the CSS file is a static file and

42
02:46.730 --> 02:50.660
it's being cached by the Chrome browser. So as I mentioned before,

43
02:50.660 --> 02:55.660
you have to hold down shift and hit refresh in order to get the new static files

44
02:56.090 --> 03:00.040
to come over. So now that we've got all of this,

45
03:00.160 --> 03:05.160
it's time to actually edit the text and the links. Going into here,

46
03:05.890 --> 03:10.360
we can see that here is the h1 which we can change quite easily,

47
03:10.410 --> 03:11.243
<v 1>...</v>

48
03:13.440 --> 03:18.210
<v 0>and you can of course add your hrefs to these links for Twitter,</v>

49
03:18.210 --> 03:19.650
Instagram, Facebook,

50
03:20.190 --> 03:25.190
copy your Twitter URL and change the Href here to that

51
03:26.670 --> 03:27.503
if you wish.

52
03:28.350 --> 03:32.010
And you can change the footer as well. Now,

53
03:32.040 --> 03:36.360
remember because we didn't buy these templates and we're using it for personal

54
03:36.360 --> 03:40.560
use, we should really attribute the source where we got it from.

55
03:40.590 --> 03:45.570
So I'll just leave that as it is. Now, if I hit save,

56
03:45.600 --> 03:49.710
you can see I've pretty much updated all the text to what I want.

57
03:50.670 --> 03:53.760
And you can see that this avatar image has disappeared

58
03:54.210 --> 03:57.660
and the reason is because when I was doing the finding and replacing,

59
03:57.960 --> 03:59.520
I wasn't careful enough

60
03:59.550 --> 04:02.970
and I didn't add in the final trailing slash

61
04:03.240 --> 04:06.960
which should in fact be right here.

62
04:07.980 --> 04:12.390
So this is going to now render the avatar image.

63
04:12.600 --> 04:14.070
But of course at the moment,

64
04:14.070 --> 04:18.390
it's just this blank gradient image inside the images folder.

65
04:19.020 --> 04:23.610
So what we can do is we can simply replace it with our own image.

66
04:25.290 --> 04:29.490
So, here in my downloads folder, I've got an image called angela.png.

67
04:29.970 --> 04:34.970
So I'm going to move my own image into the images folder and refactor that.

68
04:36.120 --> 04:38.610
And then back in our index.html,

69
04:38.670 --> 04:43.410
I'm going to point towards that image by changing this file path.

70
04:43.860 --> 04:47.070
So now I can go ahead and delete this avatar image.

71
04:47.640 --> 04:51.120
And if I hit save and go back to my website,

72
04:51.420 --> 04:55.320
you can see my photo now shows up inside the image.

73
04:56.670 --> 05:01.110
The next thing I want to add is a background image under this gradient here.

74
05:01.590 --> 05:06.590
So one of the best places to find great images for commercial use is a website

75
05:07.530 --> 05:08.760
called Unsplash.

76
05:09.150 --> 05:13.860
So if we look for some sort of image that we could put as the background,

77
05:14.250 --> 05:17.280
maybe a beach or a sea,

78
05:18.360 --> 05:22.290
you can see there's thousands of images that you can choose from.

79
05:22.560 --> 05:26.700
And they all look incredibly beautiful, and they're all large, all HD.

80
05:27.630 --> 05:30.870
I've decided to go with this picture of the seashore.

81
05:31.020 --> 05:33.390
And if I go ahead and click on download free,

82
05:33.720 --> 05:38.460
it should download the large JPEG image onto my computer.

83
05:39.090 --> 05:43.920
So now I'm going to go ahead and rename that image to

84
05:44.010 --> 05:46.950
the same name as the original background image

85
05:46.980 --> 05:49.290
which is just a bg.jpeg.

86
05:50.130 --> 05:50.963
<v 1>Right.</v>

87
05:52.740 --> 05:53.573
<v 0>Like that.</v>

88
05:53.730 --> 05:58.730
And now I can delete this file and replace it with my own background.

89
05:59.870 --> 06:04.870
So remember that the background image here it is actually being rendered from

90
06:04.880 --> 06:06.080
the CSS files.

91
06:06.380 --> 06:10.640
And if you look inside the main.css you can see here where it sets the

92
06:10.640 --> 06:11.690
background image,

93
06:12.020 --> 06:17.020
it's actually generating a gradient and it's overlaying that on top of something

94
06:18.080 --> 06:21.260
inside the images folder called bg.jpeg.

95
06:21.530 --> 06:23.930
So instead of changing it all over here,

96
06:24.230 --> 06:29.230
all we just did is just name our image the same as what they had before.

97
06:29.870 --> 06:33.290
Now, if we go ahead and rerun our website,

98
06:33.980 --> 06:37.730
go back to our website and hard reload,

99
06:37.730 --> 06:41.300
remember by holding down shift and clicking on the reload button,

100
06:41.660 --> 06:45.770
you can see that image has now been brought in behind this gradient.

101
06:46.820 --> 06:51.820
Now the last step is to change that title so that it says our name instead of a

102
06:53.750 --> 06:57.200
placeholder text. So let's go ahead and change the title

103
07:01.450 --> 07:02.110
<v 1>...</v>

104
07:02.110 --> 07:04.960
<v 0>to our name and there we have it.</v>

105
07:05.410 --> 07:07.960
We're now serving up this beautiful website

106
07:08.140 --> 07:12.880
which we got completely from a template that somebody else's developed.

107
07:13.300 --> 07:17.770
And all we needed to do was to have enough understanding of HTML,

108
07:17.770 --> 07:22.770
CSS and how Python servers work in order to customize it for our own purposes.

109
07:24.340 --> 07:25.990
I hope you enjoyed building this with me

110
07:26.080 --> 07:29.950
and I hope you'll look through some of the other templates and start messing

111
07:29.950 --> 07:33.910
around with some of them to create your own custom websites.