Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: New releases

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 So first two sites is lookin' great.
0:01 That part, not so much.
0:04 We want it to look like this, right here
0:06 with new releases, hot off the presses
0:07 and then a list formatted like so.
0:10 Alright, so first of all, it seems like I forgot
0:12 the little subtitle there, so let's put that in place.
0:17 So I want to have a little h2 and then a little subtitle.
0:23 Okay, get in there.
0:24 Those need some styling.
0:26 Alright, bolded, smaller, things like that.
0:28 But it's on the right path.
0:29 Come on down here.
0:31 Now if we look at this, it's going to be in the project list.
0:35 So we're going to use that along with h2, the subtitle
0:38 and the project pieces, just file that.
0:41 So do that again over here.
0:44 So the first thing let's target that h2
0:47 and set the font size to 24 pixels.
0:51 Font weight to bold, and the color to almost black
0:57 but not all the way.
1:00 Lookin' good, lookin' good.
1:03 Also our project list, and then we have
1:05 a little subtitle thing.
1:07 That was sort of italics there.
1:09 So we say font style, is that italic? Good guess.
1:14 Hot of the presses, that's in italics.
1:17 Okay great, the last thing to do
1:18 is to put these bits into those nice little boxes
1:22 and give 'em some spacing and borders and so on.
1:25 So these have just the project for the overall section
1:29 and there's a bunch of styles we want to set here.
1:31 I'll just paste those in.
1:34 So we're going to set the border.
1:37 Apparently I had that in there twice.
1:38 Set the border, the padding, and the background
1:40 the minimum height.
1:42 Set a margin at the top and bottom.
1:44 Let's see how that looks.
1:48 Oooh, looking much better, looking much better.
1:50 So the overall box, I think is ready.
1:52 That looks totally good.
1:54 And then the last thing to do
1:55 is to style those little pieces, right there.
1:58 So our project list.
2:00 Now this you can use just the starting characters here.
2:05 project.title.
2:08 In this one, we just want to set the font size to 20 pixels.
2:11 Make that a little bit bigger.
2:13 See how that affected it. Closer, closer.
2:19 While we're at it, let's go ahead and set that hyperlink
2:21 which is going to be project list.project.title
2:26 that contains the hyperlink.
2:28 I'm going to set it's color to be that value.
2:32 There we go. Startin' to look good.
2:34 Well, yeah just got to do a few more things
2:37 and then we're done. So project list.
2:44 The description, that's also italic, but not bold.
2:48 So we'll say normal. The font size is 16 pixels.
2:54 See how that description is comin' along.
2:57 Oh yeah, lookin' like what we're waiting for.
2:59 The last thing to do
3:01 actually I think the version looks okay.
3:03 The version is good.
3:05 So we're not pulling this data from anywhere
3:07 but we're more or less gettin' what we're after.
3:11 Excellent, let's do a quick run through.
3:14 Sure is lookin' really good.
3:16 This part is lookin' really good and this.
3:20 We still have the outer shell to build.
3:22 Right, we've got the navigation up in the top
3:25 and down at the bottom, we've got this footer thing.
3:28 So maybe we'll work on the navigation next.
3:31 But we are almost done with this page.