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