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