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