1
00:00:00,420 --> 00:00:00,990
All right guys,

2
00:00:00,990 --> 00:00:04,890
it's time for another challenge to review what we learned in the last lesson.

3
00:00:05,520 --> 00:00:10,520
Back when we learned CSS on days 43 and 44, the end project that we created

4
00:00:12,060 --> 00:00:15,990
was a personal site that looks something like this.

5
00:00:15,990 --> 00:00:19,890
It's beautifully designed with CSS styling,

6
00:00:20,220 --> 00:00:24,480
images, gifs, and a whole lot more. Now,

7
00:00:24,480 --> 00:00:29,480
what I want you to do is to take your version of this personal site and get it

8
00:00:29,940 --> 00:00:33,930
to run with your Python server. And in the process,

9
00:00:33,960 --> 00:00:37,170
you'll review what you learned about rendering HTML files

10
00:00:37,560 --> 00:00:39,510
as well as serving up static files.

11
00:00:40,470 --> 00:00:43,860
Hopefully, you've got all your files lying around somewhere in your computer.

12
00:00:44,340 --> 00:00:45,240
If you don't,

13
00:00:45,330 --> 00:00:50,010
you can go ahead and head over to the course resources where I've included a

14
00:00:50,010 --> 00:00:53,940
link to download all of these files as a zip file.

15
00:00:54,810 --> 00:00:57,630
Once you have unzipped that zip file,

16
00:00:57,660 --> 00:01:01,020
you should end up with a folder that looks like this.

17
00:01:01,050 --> 00:01:05,880
We've got our favicon, our CSS folder with our styles.css,

18
00:01:06,270 --> 00:01:09,000
our image folder with all four images,

19
00:01:09,420 --> 00:01:14,420
and you want to move these files to their respective places inside the personal

20
00:01:14,520 --> 00:01:15,353
site.

21
00:01:15,360 --> 00:01:20,360
Feel free to go ahead and delete the index.html and the styles.css

22
00:01:20,850 --> 00:01:25,850
and see if you're able to use the files that you've got here to render it using

23
00:01:27,360 --> 00:01:30,960
your Python server. Pause the video and give that a go.

24
00:01:31,130 --> 00:01:31,963
All right.

25
00:01:35,510 --> 00:01:35,780
All right.

26
00:01:35,780 --> 00:01:40,760
So the first thing we need to do is to move the files in here to their respective

27
00:01:40,790 --> 00:01:45,470
places. The index.html is going to go inside the templates folder,

28
00:01:46,040 --> 00:01:49,730
but pretty much everything else is going to go inside the static folder.

29
00:01:49,970 --> 00:01:54,230
So that includes the CSS, the favicon, as well as the images folder.

30
00:01:57,650 --> 00:01:59,810
Now that we've moved everything in here,

31
00:02:00,500 --> 00:02:04,100
there's actually nothing we need to do inside our server.py

32
00:02:04,130 --> 00:02:08,449
because it's still trying to render a webpage called index.html,

33
00:02:08,780 --> 00:02:13,370
which in our case, it's still called index.html. Now,

34
00:02:13,430 --> 00:02:17,840
the thing that we do have to change though is inside our index.html

35
00:02:18,140 --> 00:02:22,460
it's pointing straight towards css/styles.css,

36
00:02:22,820 --> 00:02:26,600
and also for the favicon, it's pointing straight to the favicon file.

37
00:02:26,960 --> 00:02:31,280
What we need to do is to take into account that it's now living inside a folder

38
00:02:31,340 --> 00:02:32,390
called static.

39
00:02:33,590 --> 00:02:38,060
So we're going to have to add the full file path to anywhere where we have a

40
00:02:38,120 --> 00:02:40,850
local static file being used.

41
00:02:41,150 --> 00:02:43,340
So that includes the CSS,

42
00:02:43,400 --> 00:02:48,400
that includes the favicon, also any of the images that we're using in here.

43
00:02:49,190 --> 00:02:51,860
And if you want for sort of convenience sake,

44
00:02:51,890 --> 00:02:54,680
you can actually just copy this part

45
00:02:54,710 --> 00:02:58,340
which is the source of the images and then you can hold down

46
00:02:58,400 --> 00:03:03,400
Command+ R on Mac or Control + R on Windows to bring up the find and replace.

47
00:03:05,650 --> 00:03:10,650
And we're gonna replace this with static/images/. So we're basically

48
00:03:13,090 --> 00:03:18,090
adding static to this images/. And if we go ahead and replace it in all five

49
00:03:19,750 --> 00:03:24,370
places, then we should now be done with all of our refactorings.

50
00:03:25,930 --> 00:03:30,930
Now let's go ahead and restart our file so that it looks at all of these new

51
00:03:32,740 --> 00:03:36,370
image, and let's go to our website

52
00:03:36,400 --> 00:03:38,500
which is being served up by Python

53
00:03:38,890 --> 00:03:42,160
and hopefully you have the same result as I do

54
00:03:42,610 --> 00:03:44,950
which is the same personal site,

55
00:03:45,340 --> 00:03:48,760
but now served up with our Python server.

56
00:03:50,440 --> 00:03:54,040
Now this process has been pretty pain-free

57
00:03:54,040 --> 00:03:58,330
I would say. We simply moved in the required index.html,

58
00:03:58,330 --> 00:04:01,120
the CSS images and the favicons,

59
00:04:01,180 --> 00:04:04,180
so all the files that make up a particular website.

60
00:04:04,630 --> 00:04:08,890
And we simply added it to our Flask project.

61
00:04:09,730 --> 00:04:10,300
Now,

62
00:04:10,300 --> 00:04:15,300
what you can also do is you can get templates of HTML and CSS files from the

63
00:04:16,600 --> 00:04:20,050
internet. For example, a website like html

64
00:04:20,050 --> 00:04:21,700
5up.net,

65
00:04:22,089 --> 00:04:26,800
where they have beautiful free templates that you can tap into.

66
00:04:27,640 --> 00:04:30,370
Now consider if you were creating your own personal site,

67
00:04:30,490 --> 00:04:34,780
then you can pick from all of these beautiful HTML templates

68
00:04:35,080 --> 00:04:40,000
which you can then update and personalize. For example,

69
00:04:40,030 --> 00:04:44,200
if we take this first one, we can go ahead and see it as a live demo.

70
00:04:44,530 --> 00:04:49,120
So we can see this website as it is, and we can see how cool it looks.

71
00:04:49,420 --> 00:04:54,130
It's got buttons, it's got JavaScript, it's got beautiful CSS styling,

72
00:04:54,460 --> 00:04:58,870
and this might be a really good website for say, keeping track of our portfolio,

73
00:04:58,900 --> 00:05:02,560
like the website's that we're building; to have images of the websites,

74
00:05:02,650 --> 00:05:05,500
a link to the website, some brief description.

75
00:05:05,770 --> 00:05:09,670
And then we could just put this up online and whenever we want to get hired as a

76
00:05:09,670 --> 00:05:12,250
web developer, we could point people towards it.

77
00:05:13,000 --> 00:05:16,900
So how do we make this work with Python? Well,

78
00:05:16,900 --> 00:05:19,870
the first thing we have to do is simply hit download,

79
00:05:20,410 --> 00:05:24,460
and it's going to download all of the files that make up this website.

80
00:05:25,180 --> 00:05:28,240
Now remember that because we're getting it for free,

81
00:05:28,480 --> 00:05:32,800
we need to attribute the designer who created this website.

82
00:05:33,310 --> 00:05:37,000
If you don't want to attribute it and you want to use it for commercial use,

83
00:05:37,390 --> 00:05:42,390
then you can pay just $19 and access all of their templates as well as support

84
00:05:43,210 --> 00:05:47,950
from the creator. Now compare that to a service like Squarespace

85
00:05:48,400 --> 00:05:52,690
where you're basically getting the same service templates for your website.

86
00:05:53,080 --> 00:05:54,160
But in this case,

87
00:05:54,340 --> 00:05:58,100
you're going to be paying anywhere between $10 to $30 per month

88
00:05:58,190 --> 00:06:02,480
which is a lot more expensive, but it's great if you don't know web development.

89
00:06:02,870 --> 00:06:05,000
But we're not going to be in that camp anymore.

90
00:06:06,110 --> 00:06:09,410
Let's go ahead and unzip that file that we just downloaded,

91
00:06:09,860 --> 00:06:11,600
which was called paradigm shift.

92
00:06:11,990 --> 00:06:16,990
And we're going to try and transfer these files to our website over here.

93
00:06:18,140 --> 00:06:18,890
So again,

94
00:06:18,890 --> 00:06:22,760
I'm going to go ahead and delete all of the previous files that's inside my

95
00:06:22,760 --> 00:06:24,830
static and templates folders,

96
00:06:24,880 --> 00:06:25,713
...

97
00:06:28,480 --> 00:06:33,130
and I'm going to try and move the relevant parts of this new website over.

98
00:06:33,880 --> 00:06:36,760
So here, they've got an index.html,

99
00:06:36,850 --> 00:06:39,280
a read me text and a license text.

100
00:06:39,730 --> 00:06:43,930
So all we need is to move our index.html to the templates

101
00:06:45,670 --> 00:06:49,600
and the images and assets over to the static folder.

102
00:06:50,200 --> 00:06:51,033
Right.

103
00:06:52,360 --> 00:06:55,330
Now, one of the things to note is when you're looking at the demo,

104
00:06:55,330 --> 00:06:57,100
there's all of these beautiful pictures,

105
00:06:57,430 --> 00:07:01,660
but of course the designer doesn't have the rights to these pictures to

106
00:07:01,660 --> 00:07:06,430
distribute. So you'll notice that all the images inside the images folder

107
00:07:06,700 --> 00:07:08,620
are these sort of gradients.

108
00:07:08,770 --> 00:07:11,920
So don't be worried if when you run your website,

109
00:07:11,950 --> 00:07:15,610
you just see a bunch of blurry gradients. It's not a problem.

110
00:07:16,930 --> 00:07:21,580
Now what we want to do is we want to see if we can get this index.html to

111
00:07:21,580 --> 00:07:25,270
work when it's being served up by our server. Now,

112
00:07:25,300 --> 00:07:29,410
the first thing we can do is simply just restart our project,

113
00:07:29,440 --> 00:07:31,900
rerun it and see what it looks like.

114
00:07:32,350 --> 00:07:37,350
So let's refresh this static page and you can see it's got all of the HTML,

115
00:07:38,020 --> 00:07:40,210
but no styling and no images.

116
00:07:40,660 --> 00:07:45,660
So that is probably because we're not specifying the static folder in the path.

117
00:07:47,290 --> 00:07:49,360
So here we've got our assets,

118
00:07:51,070 --> 00:07:55,570
and here we've got an image, but they're both inside the static folder.

119
00:07:56,260 --> 00:08:00,700
So we can do that quick trick with find and replace.

120
00:08:01,210 --> 00:08:04,210
So for anything that's inside the images folder,

121
00:08:04,240 --> 00:08:09,100
we're going to replace it with static/images and for anything that's

122
00:08:09,100 --> 00:08:10,750
inside the assets folder,

123
00:08:11,050 --> 00:08:14,230
we're going to replace it with static/assets.

124
00:08:14,950 --> 00:08:15,783
Right?

125
00:08:17,140 --> 00:08:21,370
And now if we go ahead and hit save and refresh this page,

126
00:08:21,700 --> 00:08:25,750
you can see it's now rendering the images as these sort of gradients

127
00:08:26,170 --> 00:08:30,910
and it also rendering the styling and CSS. Now,

128
00:08:30,940 --> 00:08:34,059
how would you edit this? Well, the easiest way is of course,

129
00:08:34,090 --> 00:08:36,820
to actually just edit this raw HTML.

130
00:08:37,299 --> 00:08:42,250
So you can take any of this HTML and you already understand what most of it

131
00:08:42,280 --> 00:08:46,480
does. You've got tables, you've got headings, you got h1s,

132
00:08:46,750 --> 00:08:48,190
all sorts of tags in here.

133
00:08:49,930 --> 00:08:53,650
And you can edit it just like that. For example,

134
00:08:53,650 --> 00:08:55,890
if we scroll up to very top,

135
00:08:56,130 --> 00:09:00,900
we can change the title to a name for example,

136
00:09:00,900 --> 00:09:05,580
Angela's portfolio. And we can change the h1 

137
00:09:05,610 --> 00:09:10,050
which says paradigm shift to our own name for example.

138
00:09:10,560 --> 00:09:13,410
And now when I hit save and I refresh over here,

139
00:09:13,710 --> 00:09:15,840
you can see all of that being reflected.

140
00:09:16,560 --> 00:09:20,670
Now there's an even better way of editing HTML in Chrome.

141
00:09:21,330 --> 00:09:23,520
All thanks to the Chrome developer tools.

142
00:09:24,000 --> 00:09:27,120
If we open up the Chrome developer tools and go to the console,

143
00:09:27,180 --> 00:09:32,180
we can actually type a little bit of JavaScript to make anything on our webpage

144
00:09:32,400 --> 00:09:37,050
editable. So to write this, we tap into the document

145
00:09:37,080 --> 00:09:41,490
which is this entire HTML document, and then we tap into the body

146
00:09:41,790 --> 00:09:45,690
which has everything inside the body tag, which is the content of the website.

147
00:09:46,230 --> 00:09:51,230
And then we can call on a property called contentEditable,

148
00:09:52,830 --> 00:09:57,300
and we can set that to true. Now note here that in JavaScript,

149
00:09:57,630 --> 00:10:02,630
the true booelan is spelled out with a lower t, not capital T like in Python.

150
00:10:04,320 --> 00:10:06,480
But the rest of it is pretty standard code

151
00:10:06,510 --> 00:10:11,340
and we can all understand that. Now once I hit enter and that goes through,

152
00:10:11,700 --> 00:10:14,640
I can close down this pane and now watch this.

153
00:10:15,210 --> 00:10:17,820
I can now edit anything that's on this website.

154
00:10:18,380 --> 00:10:19,213
Cool.

155
00:10:21,590 --> 00:10:26,590
All of these paragraphs or any bits of text is now completely editable.

156
00:10:27,890 --> 00:10:30,530
Now, what if you want to delete some of these elements,

157
00:10:30,560 --> 00:10:33,440
what would be the easiest way to do that? Well,

158
00:10:33,440 --> 00:10:36,860
you can simply open up the Chrome developer tools,

159
00:10:37,340 --> 00:10:41,960
and then we can use this little button here to select any element.

160
00:10:42,380 --> 00:10:46,160
So maybe we want to get rid of this paragraph here, select it,

161
00:10:46,520 --> 00:10:51,520
it locates it in the HTML and I can just hit backspace. So I can select any part

162
00:10:53,270 --> 00:10:56,450
of the HTML elements that I don't like for example,

163
00:10:56,450 --> 00:11:00,020
if I want to get rid of this whole section well I would select it and then

164
00:11:00,020 --> 00:11:00,853
delete it.

165
00:11:01,130 --> 00:11:05,180
Maybe I could delete some more sections and make this a lot simpler.

166
00:11:05,420 --> 00:11:08,780
Now you can see this website just has two sections,

167
00:11:08,810 --> 00:11:10,550
my name and my contact details.

168
00:11:12,560 --> 00:11:14,210
One of the unfortunate things though,

169
00:11:14,300 --> 00:11:18,440
is that all of the changes that you're making here, even though you can see it

170
00:11:18,440 --> 00:11:21,290
and it's great, as soon as you hit refresh,

171
00:11:21,740 --> 00:11:23,840
all of those changes will disappear.

172
00:11:24,350 --> 00:11:26,810
And the reason is because when you hit refresh,

173
00:11:27,110 --> 00:11:31,790
what's happening is your browser is going to your server at this address and

174
00:11:31,790 --> 00:11:34,940
requesting all of the HTML and CSS files,

175
00:11:35,480 --> 00:11:37,760
which of course comes from over here.

176
00:11:38,330 --> 00:11:41,810
So this is unchanged by what we've done just now,

177
00:11:41,900 --> 00:11:44,540
it's completely not changed at all.

178
00:11:45,020 --> 00:11:48,380
So if you want all of these changes that you've made in the HTML,

179
00:11:48,470 --> 00:11:53,470
then what you have to do is actually save this webpage as it is.

180
00:11:54,670 --> 00:11:58,480
And then you can move this HTML into your templates

181
00:11:58,930 --> 00:12:03,930
and you can see that this is now a lot shorter with all of the changes that we

182
00:12:04,900 --> 00:12:06,280
made previously.

183
00:12:06,880 --> 00:12:10,720
And you can replace this with what's inside your index.html.

184
00:12:11,530 --> 00:12:16,530
This is probably one of the easiest ways of modifying a prebuilt template.

185
00:12:18,910 --> 00:12:23,320
And you can see that there's plenty of templates for you to play around with.

186
00:12:23,890 --> 00:12:28,270
In fact, in the next lesson, when we're creating our final project,

187
00:12:28,690 --> 00:12:33,310
you're going to be editing this identity template completely from scratch.

188
00:12:33,820 --> 00:12:36,940
And you are going to be creating a digital name card.

189
00:12:37,660 --> 00:12:39,070
So have a play around.

190
00:12:39,580 --> 00:12:42,940
And once you're done, head over to the next lesson and complete the final

191
00:12:42,940 --> 00:12:43,510
project.