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: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.