Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: Our site design
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
We've seen what cool stuff we can build with Bootstrap and how nice we can make our sites look. It's time to actually make our pypi.org site
0:09
our demo site that we're trying to build look like it's supposed to. Well, here's what it looks like now. Let's see how close we are to our goal.
0:16
So, we have some packages listed here that's pretty close, probably. Yeah, no, maybe not. So, see this is running on a localhost
0:23
this is also the Flask final product and what we're going to build. We do have a list of the popular packages so that's kind of in line with it.
0:32
Here we have a login screen and a registry screen. These should look pretty familiar after what we talked about with Bootstrap in forms and buttons.
0:39
And then if we go to one of these you can see we have the details here we have the version we have some instructions on how to install it
0:45
what's going on the licenses it uses and so on. So, this is what we want to build this is what we have and what we're going to do is, basically
0:54
rip the stuff out of here to get started. So, we're just going to go and start applying, step-by-step the designs and elements that we see here
1:04
until we get it actually running together. So, not everything we're going to entirely implement at this point. For example, we don't have a database
1:12
so a lot of the data-driven stuff won't be there. We'll just keep using our fake data but we're going to get the design as close as we can.
1:18
So, we're going to start by just focusing on this page the Homepage here. Try to get this section this big thing up here is typically referred to
1:26
as a Hero Section or a Jumbotron or something like that. Get these little bits here about the number of releases and the stats
1:34
and then these lists of our recent projects. Okay, so our goal, at first, is just to get that in place. Let's go over here
1:41
and do a few things around organization before we actually get started. First of all, we don't want to just have just everything in static.
1:48
So, let's do a little more work here. We're going to say, "Create a directory called images." Or imj for short. Kind of like that.
1:56
And then over here, we'll have a JS. We probably won't even have any JavaScript for real but this is a pretty good organization to start
2:04
and maybe even sub-directories within images and so on. We also have a little site.css we've included that over here and you can see that that's
2:13
doing a little bit of work for us, right? You can see it's basically coloring our nav bar and stuff like that.
2:18
Let's just double check that it's working. I've got a cool little thing that'll work with h1 tags let's see. Yep.
2:26
So, you can see changes to our static-style sheet are doing something there. That's terrifying, isn't it? That you can still do the blank tag.
2:33
And, of course, if we go over to our shared layout here you can see we are including our style sheet. That's good news.
2:40
And we're also just need to work with this. So this is going to get a whole lot simpler we'll just change this to Home for now and all of this stuff
2:48
we can get rid of. Great, that blinking thing is gone and, in fact, we're also are not going to need the nav in the form that is is right now up here.
2:58
So we can just comet that out maybe leave it for an example a little bit. So now we have a nice, simple starter page and what we're going to do
3:05
is we're going to start moving these elements over top to bottom. Well, we're going to skip the nav first then we'll get back to the nav.
3:11
Okay, I think we're about ready to start writing our homepage.