Building data-driven web apps with Flask and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: New releases
0:00 Now we're getting to the heart
0:01 of this page.
0:02 What are the new releases?
0:03 At least the heart of the data on the page.
0:05 So here we have these cool little boxes
0:07 and we have a link, and a title
0:09 and a little description there and so on.
0:12 We don't have all that data but
0:13 you did see that here we have at least
0:16 some elements we could stick in there
0:17 and we have this fake data.
0:19 So let's go and convert this
0:22 bland section at the bottom to something more like that.
0:25 Turns out it's pretty easy.
0:27 So I did add a subtitle to this little
0:30 hot off the presses, so we can style that
0:32 and let's just go do that real quick.
0:34 So. The other thing we want to do, actually is
0:37 say that this is not just a container
0:40 but this whole section here is also a project list.
0:44 This is where it contains the
0:46 projects and so on.
0:48 So that way I can say .project-list
0:51 and then all the h2's in there uh h2's
0:54 sorry sub, .subtitles font style to italic.
1:00 There we go, I think if you notice over here
1:02 that it's italicized and now this also is right there.
1:07 Okay, that's a good start.
1:09 Let's work on that big uh subtitle there so
1:13 top project list, h2, let's set the font size to
1:18 24px and the font weight to bold.
1:21 Probably won't make a huge difference, but
1:23 a little bit.
1:24 There we go new releases like that.
1:26 Perfect. Now, we're going to get to the main part
1:30 these little gray boxes here.
1:33 So, if we look over at the CSS layout here
1:36 we have, project, which is contained
1:39 within a project list and then we have
1:41 some titles and descriptions.
1:43 So I'm just going to paste some stuff.
1:44 So for the projects within the project list
1:47 don't have a border, some padding, some color
1:50 minimum height, and uh margins on the top
1:52 to separate them from each other
1:54 and same on the bottom.
1:55 Let's go refresh that and see where it takes us.
1:58 Ooooh, that's pretty good right?
2:00 Already looking quite nice.
2:02 For the next thing let's work on
2:03 the little title here.
2:05 I don't actually know why that that is bold.
2:08 Let's see. Is it bold in the other one?
2:10 No, I don't think so...
2:13 That was from, I think that was from
2:15 us doing the design earlier.
2:16 There we go, that looks a lot better.
2:18 Okay so now, the think we're going to work in
2:19 the project list, top project
2:24 and then let's work on the title there.
2:26 We could have set this as well and it
2:27 would have overwritten it.
2:28 So that'd be font size 20px
2:31 make that a little bit bigger there we go.
2:34 Like that, and then we want to make this
2:36 little subtitle thing there in the description
2:38 to be italicized.
2:43 Go here and set the description
2:45 let's set those back to 16 like so.
2:48 Font weight is normal.
2:51 And font style, this is also italic.
2:56 I mean, how close are we now?
2:57 Okay that's looking better.
2:59 Ooooh, getting pretty close, notice the color
3:01 of the links uh is off for the project.
3:05 So let's go and set that.
3:07 Come over here and install the a's
3:09 better contained in here.
3:12 Here we'll set the color to, 006D
3:17 again just figure that out with some design tools.
3:20 There we go, alright so I feel like we need a
3:22 little margin right there as well.
3:25 Let's do that by putting that on the bottom here
3:29 some margin bottom that's 30, 30px let's say.
3:34 Ooh, alright that. What do you think folks?
3:37 That is a pretty decent homepage, right?
3:40 And it has no NAF yet, granted, but we'll get there.
3:44 But it, you know looks pretty darn close.
3:46 I'm pretty happy the way that came out.