Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: The making of the hero

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 So, here's where we want to be
0:02 but here's where we are.
0:04 Little bit of a difference, huh?
0:07 So let's focus on this
0:08 what I'm calling the hero section right here.
0:11 So we go over to our site
0:12 and we're going to have a hero
0:14 notice that PyCharm is finding the classes
0:17 used in HTML, and suggesting them here
0:19 that's pretty awesome.
0:20 And let's start with color.
0:23 Alright, obviously, this is just white and black
0:26 and that one is white fonts on a blue background.
0:31 So let's set the background color
0:33 and I'm going to take a color that I've already grabbed
0:36 from the design over there
0:39 and the color is going to be white.
0:44 Let's see what that does for us.
0:46 Nothing on that page.
0:48 Uh, a little bit better, not 100 percent.
0:51 Okay, so that's a start.
0:54 Let's set the padding, notice over here
0:57 there's a lot of space, and here, not so much.
1:04 We'll do 50 top and bottom and zero left and right.
1:09 Let's set the text align to be center.
1:12 The line height to be 1.0
1:15 and the font size is going to be 18 pixels, okay.
1:23 Little better, we still have some real weirdness
1:26 going on with that that's quite large, so let's fix that.
1:30 So that's going to be the hero eight one.
1:33 Now first of all, notice this going all the way across
1:36 and the font size is really wrong
1:38 so let's go to the font size and say that's 32 pixels
1:40 see what that does.
1:43 I think we need a little bit more to control this here
1:46 let's do starter.
1:54 There we go, that looks like pretty comparable font size.
2:00 Set the font weight to 400, that's a little bit bold.
2:03 And here we'll set the line height to 1.3
2:06 so it's a little bit more space
2:07 again text align is going to be centered just to be safe.
2:11 Here we go, getting a little bit closer.
2:13 Let's also make sure it doesn't change size in a weird way
2:17 so well set the max width, 810 pixels.
2:24 And also let's set the padding.
2:30 And one more thing, now that we set the max width
2:32 it looks like it's off to the left
2:33 so we're going to want to set the margin left to be auto
2:37 and the margin right to be auto
2:39 kind of like we did with our login box.
2:41 Okay, that's looking good.
2:43 Next up, let's just work our way down
2:45 this thing being all the way across
2:46 not so amazing, let's fix that.
2:48 So that is a forum control
2:53 and let's set the max width to be 550px.
2:58 And we also need to change the display style
3:01 cause right now I think it's in line
3:02 which you can't control some of these
3:03 so we'll do inline block, oh I typed minwidth I meant the set.
3:08 So we have the width, that looks pretty good
3:10 let's cycle back and forth.
3:12 Now the rounded edges verses square edges let's work on that.
3:19 We'll set that, we'll set the border radius
3:22 to something like two pixels. Here we go.
3:25 Now it's starting to look pretty close.
3:27 What else we got to do? Let's up the font size to 20 pixels.
3:32 Change the padding to 20 pixels as well.
3:38 See how we're doing. Oh, those look pretty similar.
3:41 Now the nav bar up top is changing the, sort of
3:44 vertical alignment, we haven't worked on that yet
3:46 we're just working on the blue hero
3:47 but boy those are good.
3:49 I notice this one is white and underlined
3:51 and this one is not, so let's go address that.
3:55 So that's going to be a hero
3:56 and there's only one hyperlink so we can just say a
4:00 and the color is going to be white
4:02 and the text decoration is going to be underline.
4:06 Boom, there it is.
4:08 It looks pretty good, the font size is tiny bit different
4:10 than what we're aiming for but that was also just an approximation.
4:13 So I think this hero piece is basically done.
4:17 Now this nap doesn't navigate anywhere
4:19 that's fine, but in terms of modeling
4:22 these two pieces here, I think this first hero slice
4:24 is good enough.