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