Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: The making of the hero
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.
