Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: New releases

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


Talk Python's Mastodon Michael Kennedy's Mastodon