Building Data-Driven Web Apps with Flask 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
When I was new to web development this would have been a scary proposition to be given this and said yeah make it look like that one
0:08
because to me they don't look at all the same. However, you'll see we can do some really cool CSS tricks to get there, quite quickly.
0:16
So, I want to focus on this big blue section, in this video to get this hero section all designed. Let's go back over here and we're going to say .hero
0:25
and notice how cool that PyCharm finds this anywhere you use a class in HTML, it's like oh, you probably want to style that
0:32
so, we're going to auto-complete that, here. And the first thing I want to do is set the background color.
0:39
I'm just going to paste the value I got from before. I've just grabbed it with some design tools. Here, you can see we can go find it.
0:46
That's in hex and it's going to go and set the background there. Good start, right, good start. Color's not so amazing, so let's do that.
0:56
Color is white. Here we go. Hey, that's even starting to look like it, right? We also notice here this hyperlink was supposed to be white
1:05
so, let's style that, so we can say, .hero a color is white. Here we go. Do we want underlines? I think we do, so let's add a text-decoration
1:20
to be underline. Here we go. Which are good. font-size is not quite there so, we want to change the font-size a little bit.
1:32
So, let's go and make the font-size let's put 14. There you go. I feel like those are pretty good. The font-size of that thing is much, much too big.
1:42
So, let' style that really quick here. Let's put 28. Here we go, close. They're not exactly the same fonts
1:52
that's why there's a little bit of a discrepancy I think that's okay. We'll get to the font. We also have our search box
1:58
but the thing I think we need to do next is focus on getting it to be big and airy like the space that we have here this is nice.
2:06
Just cram it up there like that not nice. Let's do that next. So, here we can set the padding to be 50px and 0px see if that was the way I want it
2:17
yes, perfect. So, padding on the top and bottom not on the side. Let's say text-align center. Closer. Yeah, I think this does it more or less for that
2:30
except for, notice how this is much smaller and so is this. So, let's go set some styles on those things. Maybe we could do a little better
2:40
by actually putting them into a container. Lets call it hero-inner or something like that and we'll just go set the style of that sucker here.
2:57
So, come down here and say hero-inner and what do we want to set it to? Let's say max-width not really sure what we want. Let's put 500
3:09
or make the font smaller. Yeah, let's make the font smaller. So here, let's put 24. There we go. Feel like we're close, we're close
3:19
and we also need that stuff to be in the center. So, let's do that again and then we'll say margin-left is auto
3:29
margin-right is auto now, it's in the center. There's a little more space around each piece, right? So, browse projects it's got more room below it.
3:38
Let's say margin-bottom is going to be 30px. That's pretty good and maybe let's say hero h1 we'll say margin-bottom is also 30px
3:52
to put some space between the search box. All right, pretty close. Let's un-highlight you got to remember that bar at the top
4:01
that's not, that's not there and this other one I guess we can go and add that really, really quick just as a placeholder. How large is it? Let's see.
4:14
It's 85 high, so we could just add a go back and add our nav up here at the top I guess. Let's go to our nav and set the height to be 85px
4:30
and just see where we get with that on terms of the other one. Think it's a little bit high because it has padding. Let's put that 65. There we go.
4:48
I think they're basically the same size but the color is wrong. So, let's just set the color real quick.
4:55
I don't think we actually want it to stay this color. There you go. Looking pretty good don't you think?
5:04
All right, so our hero is more or less in place. We need to change the fonts and maybe change the border-radius on those
5:11
so they look a little bit more like what they do on PyPI and less like standard bootstrap but I feel like we're quite close
5:18
close enough in terms of calling our hero done for our first pass.