Building data-driven web apps with Flask and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: Our site design

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