Building data-driven web apps with Pyramid 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
Alright, let's put the basic HTML structure
0:02
in place for this page.
0:04
We're not going to do the navigation yet.
0:05
That's part of the overall site look and feel, right?
0:08
We want to go over here, that sticks around, but
0:11
from basically here downward.
0:13
And that's going to be an index.pt.
0:15
Okay so it's nice and room to work here and we'll just
0:17
type this out real quick.
0:18
These sections at the top
0:20
if you look over here, at freemongodbcourse.com
0:22
for example, there's a big, sort of bold
0:25
called to action section
0:26
is often referred to as a hero, or a jumbo-tron.
0:30
I'm going to call it a hero, but it can be whatever.
0:31
So we want to have a div with a class hero.
0:36
And that's going to be that big section.
0:38
Then in here, we're going to have an h1, which is the main header.
0:42
And of course you should always have one and only one h1.
0:46
This is really important for SEO on your site.
0:50
Let's go over here, and so we find, install and publish.
0:54
This is taken straight from their site.
0:56
So let's see where we get into so far.
0:58
Oops, that stays like it is.
1:01
Alright, that looks amazing, doesn't it?
1:03
No, not all. We're going to fix it.
1:04
We're just going to get the HTML here
1:05
and then we're going to fix it.
1:07
Now remember, on the real one, we have a little search box
1:12
or browse projects. So let's work on that next.
1:18
We get a text input with a form-control
1:20
and have a placeholder. Search projects.
1:25
And down here we'll have a few br.
1:30
And over, browse projects. How are we doing now?
1:35
Oh yeah, it's lookin' just like the real thing, isn't it?
1:40
It's comin' along though, it's comin' along.
1:42
So now we have our little hero section.
1:44
And we can tighten this up.
1:46
Let's go ahead and collapse that bit. So, good.
1:48
We're going to leave that alone for a minute.
1:50
The next thing that we have to work on
1:53
is this little slice right here.
1:55
We're going to make another div for that section
1:57
and give it a class, so we can style it.
2:00
So we're going to say, we have a div.pypistats.
2:03
And in there, we're going to have a div with the stat value.
2:06
And we want 3 of those.
2:08
One for the projects, one for the releases
2:10
and one for the users. Okay, great.
2:13
Now let's just say, something really simple for now:
2:14
0 projects, 0 releases, 0 users.
2:19
Now if I was actually doing this from scratch, I'd
2:22
probably just start focusing on designing the hero bit.
2:25
And then this.
2:26
But there's really only a few tiny pieces of HTML left.
2:29
So let's go ahead and do that.
2:30
The final part that we need to work on is
2:33
this new releases stuff, right here.
2:36
So we have this h2 thing and then h3 maybe it is
2:39
I'm not sure, it's a subheader.
2:40
Hot of the presses, the newest project releases
2:43
and then we're going to repeat this in a data driven way.
2:45
So remember, we're going to have a div with a container.
2:48
It's going to be the grid layout stuff.
2:50
It's going to have a div with a row.
2:51
And then, we're going to have three divs.
2:56
Now for this one, we actually want to put, project-list
3:00
So in addition to being a container, it's the container
3:03
that contains the projects, great.
3:07
Now let's do a medium sized grid.
3:10
And we'll use this blank one here, just to do
3:12
a little offset. This line is going to be 50% of the screen width.
3:17
And it's going to be roughly in the middle.
3:20
And then that's eight, we need four left.
3:22
I guess if we really wanted it right in the center
3:23
we could do three and three; however we want.
3:28
Let's see how that's looking. Here's are little section
3:33
the 50% in the middle that we're going to have.
3:36
Alright, so the last thing to do is, this is where we want
3:39
our projects to be listed.
3:42
So we're going to have a div, that is a project.
3:45
It's going to contain a div, that has a title.
3:47
That's going to contain a hyperlink, okay.
3:52
Now we're also gonna have a div, that's a description.
3:56
So there's going to be a title that clickable
3:58
and there's going to be some sort of description.
4:00
And this block of code we repeat for every package.
4:04
So remember this.
4:08
And here, lets just put, p, the package id.
4:17
Don't even remember that we better check and see
4:18
what those values are.
4:19
It's been a long time since we looked at that.
4:24
So it has a name and a version.
4:26
I'll just drop the version in here because
4:31
so if somethin' happens, alright. Ready! Boom.
4:34
There are three things.
4:35
Now of course, the styling isn't there.
4:38
And I guess we should put the version up there.
4:42
Let's put the version up here like this and I'll
4:43
just put the description. There we go.
4:49
That looks exactly like what we were hoping for.
4:52
Remember when I said that blank page seems scary.
4:56
Scary because it was a blank page not 'cause
4:58
it only had Bootstrap.
5:00
Go from this to that, that's pretty far.
5:05
But it turns out the CSS that we need is actually
5:08
not that bad, but just conceptually
5:09
those look really, really different.
5:12
The next thing that we need to do is actually
5:14
put the CSS in place to make this
5:17
amazing transformation happen right here.
