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.