Python-powered chat apps with Twilio and SendGrid Transcripts
Chapter: Creating the Flask Python web app
Lecture: Adding the static web design
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:06
And yet this whole horse is not at all about Web design, and this application is really not even about Web design at all.
0:14
But let's just take one minute and quickly move in a design that I've already created
0:19
so that we can feel a little more at home when we're working with our Web app. So over here, let's go and create a directory called home.
0:28
What we like to do it is each module and the views gets a folder, and then each method within that module gets a file.
0:36
Well, come over here and stay home. Then inside home, we have index. We have an HTML file called Index, like this. Let's call this cloud city
0:47
We'll just keep it static for just a moment. But let's get flask to use that file so we can come over here,
0:53
and instead of this, we can say and flashed that render template, and we can give it a template name, so we could say home and check that
1:02
out as I type H because I set that up as a template folder pycharm like Oh yeah, so I can help you find the files in there.
1:09
Which one you want to render? Home/index. How cool is that PyCharm Auto completed that I didn't cut out typing that in. And then once it's here,
1:18
notice I can click on this to jump back and forth where it's used, and then where it's consumed. That's pretty awesome,
1:24
right? So here we're rendering that template and let's just run it one more time and make sure we have slightly different Hello world.
1:32
Welcome to Cloud City. And if we view page source selection by the whole page you can see that is that simple page over there.
1:40
So, like I said, this is how we're going to set it up. But I don't want to use this design. Let me, but in a better design,
1:46
copy something I've already created and just look at it. So now we've got two views over here.
1:52
We've got an index which extends this shared layout that the entire site is going to use, and it's got this big Hero section,
1:59
a big image banner at the top and then some information about you know how you can get started with a WhatsApp message or something like that.
2:08
You already saw this design when we played with it earlier. This is close. The other thing that we're going to need if we're going to
2:14
need to have a static folder blask already uses this blask static as the place to serve static files. We don't have to do anything to make it do it.
2:25
It just has to be present. And then we're just going to copy those static assets over here. We've got the CSS files, some image files and so on.
2:34
And now, when we gave all of that and we re render it after we started, of course. Now look at that.
2:39
We've got our beautiful design Cloud City cake company. We've got our link that I'll just fire open WhatsApp message to the right location,
2:47
and we have a link, although no destination or admin site. All right, so now we've got a little bit better design and a little bit
2:54
organization with our CSS images in our shared template, again not required for this course or
3:01
really for this app. But I do think it feels nicer to have something that looks good.