Building data-driven web apps with Pyramid and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: Home page HTML
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.