Python-powered chat apps with Twilio and SendGrid Transcripts
Chapter: Creating the Flask Python web app
Lecture: Adding the static web design

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 I think applications are more inspiring when they're beautiful and feel a little more realistic.
0:05 And yet this whole horse is not at all about Web design,
0:10 and this application is really not even about Web design at all.
0:13 But let's just take one minute and quickly move in a design that I've already created
0:18 so that we can feel a little more at home when we're working with our Web
0:21 app. So over here, let's go and create a directory called home.
0:27 What we like to do it is each module and the views gets a folder,
0:30 and then each method within that module gets a file.
0:35 Well, come over here and stay home.
0:36 Then inside home, we have index.
0:39 We have an HTML file called Index, like this.
0:43 Let's call this cloud city
0:46 We'll just keep it static for just a moment.
0:48 But let's get flask to use that file so we can come over here,
0:52 and instead of this, we can say and flashed that render template,
0:57 and we can give it a template name, so we could say home and check that
1:01 out as I type H because I set that up as a template folder pycharm
1:05 like Oh yeah, so I can help you find the files in there.
1:08 Which one you want to render?
1:09 Home/index. How cool is that PyCharm Auto completed that I didn't cut
1:15 out typing that in. And then once it's here,
1:17 notice I can click on this to jump back and forth where it's used,
1:21 and then where it's consumed. That's pretty awesome,
1:23 right? So here we're rendering that template and let's just run it one more time
1:27 and make sure we have slightly different Hello world.
1:31 Welcome to Cloud City. And if we view page source selection by the whole page
1:34 you can see that is that simple page over there.
1:39 So, like I said, this is how we're going to set it up.
1:41 But I don't want to use this design.
1:42 Let me, but in a better design,
1:45 copy something I've already created and just look at it.
1:49 So now we've got two views over here.
1:51 We've got an index which extends this shared layout that the entire site is going to
1:56 use, and it's got this big Hero section,
1:58 a big image banner at the top and then some information about you know how you
2:03 can get started with a WhatsApp message or something like that.
2:07 You already saw this design when we played with it earlier.
2:10 This is close. The other thing that we're going to need if we're going to
2:13 need to have a static folder blask already uses this blask static as the place to
2:21 serve static files. We don't have to do anything to make it do it.
2:24 It just has to be present.
2:25 And then we're just going to copy those static assets over here.
2:28 We've got the CSS files, some image files and so on.
2:33 And now, when we gave all of that and we re render it after we
2:36 started, of course. Now look at that.
2:38 We've got our beautiful design Cloud City cake company.
2:41 We've got our link that I'll just fire open WhatsApp message to the right location,
2:46 and we have a link, although no destination or admin site.
2:50 All right, so now we've got a little bit better design and a little bit
2:53 organization with our CSS images in our shared template, again not required for this course or
3:00 really for this app. But I do think it feels nicer to have something that looks good.