1
00:00:00,450 --> 00:00:02,969
All right, so let's go ahead and run through the solution.

2
00:00:03,270 --> 00:00:05,939
The first thing I'm going to do is to head over

3
00:00:05,939 --> 00:00:08,310
to the website and download the template.

4
00:00:09,270 --> 00:00:11,040
Once I've downloaded the template,

5
00:00:11,070 --> 00:00:16,070
I'm going to unzip the file and get access to all the files inside.

6
00:00:17,490 --> 00:00:20,370
Now I've already set up my Flask server

7
00:00:20,400 --> 00:00:23,760
which is pretty simple by now. I've created my app,

8
00:00:24,090 --> 00:00:29,090
I've set up the home routes and I've set my app to run on debug mode.

9
00:00:30,270 --> 00:00:34,230
Now I have to create the necessary directories.

10
00:00:34,260 --> 00:00:37,020
So I'm going to need a directory called templates,

11
00:00:37,560 --> 00:00:41,100
and I'm also going to need one called static.

12
00:00:42,750 --> 00:00:44,880
With those two folders in place

13
00:00:44,880 --> 00:00:49,880
I can now start moving over the relevant parts of these files; index.html

14
00:00:51,390 --> 00:00:55,080
goes into templates, assets

15
00:00:55,170 --> 00:00:57,150
and images go into static.

16
00:00:59,510 --> 00:01:00,343
Right

17
00:01:00,470 --> 00:01:00,740
Now,

18
00:01:00,740 --> 00:01:05,740
one of the first things we're going to try and do is just to see if this works.

19
00:01:06,290 --> 00:01:11,090
So we're gonna start up our server and try to render that index.html.

20
00:01:12,080 --> 00:01:15,530
And if you've got another project running in the background

21
00:01:15,530 --> 00:01:18,230
which is using our server address,

22
00:01:18,470 --> 00:01:21,740
then you are going to get an error that says address already in use.

23
00:01:21,980 --> 00:01:26,210
So just make sure you stop any other files from running and then run this again.

24
00:01:28,250 --> 00:01:32,540
So here's our webpage with just the HTML. It's very,

25
00:01:32,540 --> 00:01:36,290
very simple, and it doesn't have any of the styling or the images.

26
00:01:36,710 --> 00:01:41,240
So we're going to have to fix that by going into the index.html and figuring

27
00:01:41,240 --> 00:01:44,300
out which parts of it need to be changed.

28
00:01:44,900 --> 00:01:48,860
Now notice that in the download, we got two folders;

29
00:01:48,950 --> 00:01:52,370
assets and images which are now both inside static.

30
00:01:52,700 --> 00:01:57,700
So we're going to have to find and replace anything that is assets and change

31
00:02:00,170 --> 00:02:03,350
that to static/assets,

32
00:02:03,770 --> 00:02:04,603
...

33
00:02:06,560 --> 00:02:09,169
and also do the same with images,

34
00:02:14,510 --> 00:02:14,870
right?

35
00:02:14,870 --> 00:02:17,300
There's actually not a lot of code in here.

36
00:02:17,330 --> 00:02:21,080
You can pretty much scroll from the top to the bottom and you can see there's

37
00:02:21,080 --> 00:02:23,090
not a lot of stuff here.

38
00:02:23,750 --> 00:02:26,660
So now that we've fixed those paths,

39
00:02:26,720 --> 00:02:30,920
let's see if we can hit save and go back to refresh our website.

40
00:02:31,880 --> 00:02:34,310
Now, if you are getting what I'm seeing here

41
00:02:34,310 --> 00:02:39,310
which is the CSS file being rendered from the previous project where we got hold

42
00:02:40,640 --> 00:02:45,640
of the portfolio site, that remember is because the CSS file is a static file and

43
00:02:46,730 --> 00:02:50,660
it's being cached by the Chrome browser. So as I mentioned before,

44
00:02:50,660 --> 00:02:55,660
you have to hold down shift and hit refresh in order to get the new static files

45
00:02:56,090 --> 00:03:00,040
to come over. So now that we've got all of this,

46
00:03:00,160 --> 00:03:05,160
it's time to actually edit the text and the links. Going into here,

47
00:03:05,890 --> 00:03:10,360
we can see that here is the h1 which we can change quite easily,

48
00:03:10,410 --> 00:03:11,243
...

49
00:03:13,440 --> 00:03:18,210
and you can of course add your hrefs to these links for Twitter,

50
00:03:18,210 --> 00:03:19,650
Instagram, Facebook,

51
00:03:20,190 --> 00:03:25,190
copy your Twitter URL and change the Href here to that

52
00:03:26,670 --> 00:03:27,503
if you wish.

53
00:03:28,350 --> 00:03:32,010
And you can change the footer as well. Now,

54
00:03:32,040 --> 00:03:36,360
remember because we didn't buy these templates and we're using it for personal

55
00:03:36,360 --> 00:03:40,560
use, we should really attribute the source where we got it from.

56
00:03:40,590 --> 00:03:45,570
So I'll just leave that as it is. Now, if I hit save,

57
00:03:45,600 --> 00:03:49,710
you can see I've pretty much updated all the text to what I want.

58
00:03:50,670 --> 00:03:53,760
And you can see that this avatar image has disappeared

59
00:03:54,210 --> 00:03:57,660
and the reason is because when I was doing the finding and replacing,

60
00:03:57,960 --> 00:03:59,520
I wasn't careful enough

61
00:03:59,550 --> 00:04:02,970
and I didn't add in the final trailing slash

62
00:04:03,240 --> 00:04:06,960
which should in fact be right here.

63
00:04:07,980 --> 00:04:12,390
So this is going to now render the avatar image.

64
00:04:12,600 --> 00:04:14,070
But of course at the moment,

65
00:04:14,070 --> 00:04:18,390
it's just this blank gradient image inside the images folder.

66
00:04:19,019 --> 00:04:23,610
So what we can do is we can simply replace it with our own image.

67
00:04:25,290 --> 00:04:29,490
So, here in my downloads folder, I've got an image called angela.png.

68
00:04:29,970 --> 00:04:34,970
So I'm going to move my own image into the images folder and refactor that.

69
00:04:36,120 --> 00:04:38,610
And then back in our index.html,

70
00:04:38,670 --> 00:04:43,410
I'm going to point towards that image by changing this file path.

71
00:04:43,860 --> 00:04:47,070
So now I can go ahead and delete this avatar image.

72
00:04:47,640 --> 00:04:51,120
And if I hit save and go back to my website,

73
00:04:51,420 --> 00:04:55,320
you can see my photo now shows up inside the image.

74
00:04:56,670 --> 00:05:01,110
The next thing I want to add is a background image under this gradient here.

75
00:05:01,590 --> 00:05:06,590
So one of the best places to find great images for commercial use is a website

76
00:05:07,530 --> 00:05:08,760
called Unsplash.

77
00:05:09,150 --> 00:05:13,860
So if we look for some sort of image that we could put as the background,

78
00:05:14,250 --> 00:05:17,280
maybe a beach or a sea,

79
00:05:18,360 --> 00:05:22,290
you can see there's thousands of images that you can choose from.

80
00:05:22,560 --> 00:05:26,700
And they all look incredibly beautiful, and they're all large, all HD.

81
00:05:27,630 --> 00:05:30,870
I've decided to go with this picture of the seashore.

82
00:05:31,020 --> 00:05:33,390
And if I go ahead and click on download free,

83
00:05:33,720 --> 00:05:38,460
it should download the large JPEG image onto my computer.

84
00:05:39,090 --> 00:05:43,920
So now I'm going to go ahead and rename that image to

85
00:05:44,010 --> 00:05:46,950
the same name as the original background image

86
00:05:46,980 --> 00:05:49,290
which is just a bg.jpeg.

87
00:05:50,130 --> 00:05:50,963
Right.

88
00:05:52,740 --> 00:05:53,573
Like that.

89
00:05:53,730 --> 00:05:58,730
And now I can delete this file and replace it with my own background.

90
00:05:59,870 --> 00:06:04,870
So remember that the background image here it is actually being rendered from

91
00:06:04,880 --> 00:06:06,080
the CSS files.

92
00:06:06,380 --> 00:06:10,640
And if you look inside the main.css you can see here where it sets the

93
00:06:10,640 --> 00:06:11,690
background image,

94
00:06:12,020 --> 00:06:17,020
it's actually generating a gradient and it's overlaying that on top of something

95
00:06:18,080 --> 00:06:21,260
inside the images folder called bg.jpeg.

96
00:06:21,530 --> 00:06:23,930
So instead of changing it all over here,

97
00:06:24,230 --> 00:06:29,230
all we just did is just name our image the same as what they had before.

98
00:06:29,870 --> 00:06:33,290
Now, if we go ahead and rerun our website,

99
00:06:33,980 --> 00:06:37,730
go back to our website and hard reload,

100
00:06:37,730 --> 00:06:41,300
remember by holding down shift and clicking on the reload button,

101
00:06:41,660 --> 00:06:45,770
you can see that image has now been brought in behind this gradient.

102
00:06:46,820 --> 00:06:51,820
Now the last step is to change that title so that it says our name instead of a

103
00:06:53,750 --> 00:06:57,200
placeholder text. So let's go ahead and change the title

104
00:07:01,450 --> 00:07:02,110
...

105
00:07:02,110 --> 00:07:04,960
to our name and there we have it.

106
00:07:05,410 --> 00:07:07,960
We're now serving up this beautiful website

107
00:07:08,140 --> 00:07:12,880
which we got completely from a template that somebody else's developed.

108
00:07:13,300 --> 00:07:17,770
And all we needed to do was to have enough understanding of HTML,

109
00:07:17,770 --> 00:07:22,770
CSS and how Python servers work in order to customize it for our own purposes.

110
00:07:24,340 --> 00:07:25,990
I hope you enjoyed building this with me

111
00:07:26,080 --> 00:07:29,950
and I hope you'll look through some of the other templates and start messing

112
00:07:29,950 --> 00:07:33,910
around with some of them to create your own custom websites.