Python for the .NET developer Transcripts
Chapter: Web frameworks
Lecture: Guitars HTML

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Well it's time to make this guitar content look good.
0:02 We're providing all the data and the behavior
0:04 that it needs, but it's not so nice.
0:07 So let's go over here and we already have
0:08 a few styles in place.
0:09 So we're going to have a div, and this is going to
0:11 be a top section.
0:13 We'll just go back and look at this now
0:15 notice it's pushing this part down
0:17 just like it should.
0:19 The next thing is we're going to put in this section
0:23 all of that, into a div, and we're going to set
0:25 the class, the text content, and to guitars, like so.
0:33 And then we put that.
0:34 That's looking pretty good, let's see how we're doing now.
0:37 Alright, looking better, notice it's got
0:38 some centering going on, some spacing and whatnot.
0:42 Now the last thing to fix is this.
0:45 That is really a problem right there isn't it?
0:46 So we want to do a lot more than just drop
0:49 the type of guitar here.
0:52 Just going to have a class guitar, singular
0:56 going to have an image, and the image is going to
0:58 be the image URL that the guitar has.
1:00 If we look at the actual data, which is here
1:04 it's /static/image/whatever.
1:07 We want to put that in here, so how do we do it?
1:11 Double angle bracket, g.image.
1:14 Notice the auto complete, that's pretty killer.
1:17 Let's put a br here, I guess we probably
1:19 don't have a style that says that it breaks
1:22 that's a display block, that's fine.
1:24 We'll have a span, and have some classes on it also.
1:28 This'll be a guitar name, and you guessed it
1:31 we want the guitar name here.
1:33 So we put the name of another one
1:37 which is the price, and here we have price
1:41 and let's go ahead and put this like so.
1:44 Now this might be what we want
1:46 but it might not be.
1:47 So we might want to have a slightly
1:49 better representation of the price
1:50 but let's just see the progress that we're making.
1:53 Ready for it? It should be pretty close.
1:56 Boom! Yes, that looks so awesome!
1:58 That is really, really cool, and look at this
2:01 this is it!
2:03 That's all we did, and if you look at the web side
2:06 the data, the server side bits
2:08 look over here, that's all we did.
2:10 This is incredible, and I guess the final bit
2:12 to look at is this all guitars, right?
2:15 Super simple query.
2:17 So this is a really simple app
2:18 but I feel like it looks quite nice
2:20 and yeah there's some CSS, and images
2:21 and that does add a lot to be honest
2:24 but still, pretty nice.
2:26 Let's see if it's actually functional.
2:28 What about just acoustic guitars?
2:30 And electric guitars?
2:31 Notice we have our Acoustic Black
2:32 which shows up at the second one
2:34 when we have all of them, but not when we have electric.
2:37 This is workin' folks, this is really, really nice.