Building data-driven web apps with Flask and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: Home page HTML
0:00 The next thing that we need to do
0:01 is we need to get our HTML elements in here.
0:03 Before we can style them
0:05 we need to get this basic design in.
0:07 Now, sure I could go view source on this
0:09 and just copy it over, but let's build it out
0:11 so you can see how the process might go.
0:14 So in this hero section
0:16 we're going to define basically a div
0:18 that represents all of that
0:19 and this is going to be an h1
0:21 this is going to be an input box
0:24 and then here, obviously just some simple text.
0:27 Then here's going to be another little slice
0:28 with some values
0:30 you could use some grid layout on that potentially.
0:32 Before we get to that
0:33 let me just put a little bit of clean up in here
0:35 to set the colors to almost black, background white.
0:39 Things like that should really not have much effect
0:42 but yeah, there we go, just sets that to be really clear.
0:46 Now let's start by working with this piece here.
0:49 So we go over, and the layout is going to drop
0:52 it right there into our main content
0:54 and our main content we need to have margin
0:59 and padding set to zero.
1:01 That's going to mess up our hero thing if we don't do that.
1:03 Okay so in this, we want to have a div
1:05 I'm going to call it hero
1:07 and we're going to have our h1 inside there, so that's cool
1:11 and the text is going to be this
1:14 which I just borrowed directly from there.
1:17 Let's see how this looks.
1:18 It's not going to be so impressive yet.
1:21 Getting there, sort of, slowly.
1:23 So the next thing that we need to do, in here
1:25 is that we're going to have an input of type equals text
1:28 with a placeholder.
1:30 Let's see what we had before.
1:32 Search projects, the space, search projects
1:36 and it's going to have a class of form-control.
1:40 Okay? Good, sort of.
1:43 The next one we had, below here, is down here we had
1:46 a Or browse projects, something like that
1:53 yep, coming along
1:54 so the HTML is flowing, we're getting this in place
1:57 the next thing we had is this section here
2:00 and I want to put some styles on this
2:01 so it's really easy to get to.
2:03 So what I want to do is I'm going to have another div
2:05 and it's going to have a class called pypi-stats
2:09 and then within there we're going to put three things
2:10 called stat.
2:12 Now of course I could type it all out
2:13 or we could use Z encoding, so I'll say
2:15 PyPI-Stats contains a div with stat times three.
2:22 Perfect, and what goes in the first one
2:25 let's just say minus one projects
2:28 next one was the releases, so minus one release
2:31 I'll put minus one rather than zero so that we can
2:33 tell when it's actually getting real data
2:35 even if it's empty. Minus one users.
2:38 How's this looking? Oops, this one; how's it looking?
2:41 Not exactly what we were hoping for
2:43 it's not a horizontal slice, but remember
2:45 CSS can do that.
2:47 This next one we want to set up a little bit of
2:49 a grid layout, so we're going to have a div
2:50 which is a container, remember, that's how it goes
2:53 and it has a div, and it has a row
2:54 and then it has a div, then it has a column
2:57 let's go with medium, and I'll say four
3:00 cause we want three of them, expand that out
3:03 and then what I actually really wanted
3:05 was not to have it equal value here
3:08 I'm going to set this to be three, that to six
3:11 and that to three, because that adds to twelve, remember?
3:14 And then here, we're going to have an H2
3:19 which will be new releases, like that
3:21 let's just see how that's coming along.
3:23 Mmhmm, looking pretty good, pretty good
3:26 and the last thing in here is we want to have
3:28 remember, over here, we want to have or have
3:31 hot off the presses, we can add that
3:33 and then we want some of these little blocks for each one
3:36 we're going to do a repeat on that, so here we can
3:38 have a SPAN, maybe a div, with that hot off the presses
3:42 and then in here, what we want is we're going to have a div
3:45 that's going to represent each project or package.
3:49 So I'll say project, contains a div with a title
3:52 which contains an a, hyperlink
3:56 I'll just put that like that, can just be proj for a moment.
3:59 Okay that's good, and then also, in here
4:01 we want a div that has a description
4:04 and we'll put description.
4:06 All right how's it looking?
4:08 Looks good over there, well that's okay
4:10 but remember what we wanted before
4:12 is we had a really cool loop here
4:15 and I'll just show you a cool trick
4:16 I could obviously just type it in, but this is kind of fun
4:18 I could go over to the local history
4:20 and say, what was our loop?
4:25 Remember we had this, here?
4:28 So if we wanted to mimic that, of course we could come in
4:32 and say for each one of these projects
4:37 like that, and now we should have it three times
4:40 and if we actually go in, we could say
4:43 p.name, p.version, just the description until we have
4:49 more details.
4:50 Woohoo, look at that, we got our releases sort of back
4:53 of course did not get them from the database
4:55 but it's all coming in.
4:56 So, how are we doing?
4:58 Well, they don't look at all the same.
5:00 But in fact, I think we basically have the HTML in place
5:04 we might need to tweak and add a style
5:06 or class or something here or there
5:07 but I think that pretty much defines the homepage
5:10 without the CSS.