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

Talk Python's Mastodon Michael Kennedy's Mastodon