#100DaysOfWeb in Python Transcripts
Chapter: Days 37-40: Introduction to Pyramid framework
Lecture: HTML towards details and a better design
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Here's our really simple site that just has our homepage. All right. It welcomes the user. It shows their unpaid bills and their paid bills.
0:08
If we look at it, it looks like this. As what we just saw. Now, what we want, looks really different. Remember up here, there's a big picture
0:14
that sort of welcomes you to the site. And there's some more information down here. On each of these bills there's a button you click and so on.
0:21
So, towards both the design and the ability to have these buttons to navigate to the details let me just drop in some HTML really quick
0:28
and I'll talk you through it. So, we're going to add this thing called a hero. And, doesn't have any style right now. It's going to be nice and big
0:37
take over the top part of our site. It's going to have a background image and it's going to have this text on top of it.
0:43
And then here's just a little welcome. You know, welcomes the user by name. And then we have a couple of things.
0:49
Here's how much they owe in their unpaid bills. I'm going to loop through each one of their open bills and I'm going to have the date that it was for
0:56
how much their total value was how much the pending value is and so on. So, we come over here and refresh this. Get a slightly different look.
1:04
No CSS, no redesign. Just this HTML with these links here. And notice, going on each one of these to like /bill/344. So it'd be /bill/169 and so on.
1:18
So we're going to have to add a route and a view method up here to handle that. That's where we're going to see the details
1:25
and we're going to be able to add a form that we can post how much we paid things like that. Down here, we're just listing out the extra information.
1:33
Nothing super impressive going on here. I think the next thing I wanted to work on is making this look pretty, and then we'll round it out
1:41
with this form input aspect.