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