Python for .NET Developers 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. We're providing all the data and the behavior that it needs, but it's not so nice.
0:08
So let's go over here and we already have a few styles in place. So we're going to have a div, and this is going to be a top section.
0:14
We'll just go back and look at this now notice it's pushing this part down just like it should. The next thing is we're going to put in this section
0:24
all of that, into a div, and we're going to set the class, the text content, and to guitars, like so. And then we put that.
0:35
That's looking pretty good, let's see how we're doing now. Alright, looking better, notice it's got some centering going on, some spacing and whatnot.
0:43
Now the last thing to fix is this. That is really a problem right there isn't it? So we want to do a lot more than just drop the type of guitar here.
0:53
Just going to have a class guitar, singular going to have an image, and the image is going to be the image URL that the guitar has.
1:01
If we look at the actual data, which is here it's /static/image/whatever. We want to put that in here, so how do we do it?
1:12
Double angle bracket, g.image. Notice the auto complete, that's pretty killer. Let's put a br here, I guess we probably
1:20
don't have a style that says that it breaks that's a display block, that's fine. We'll have a span, and have some classes on it also.
1:29
This'll be a guitar name, and you guessed it we want the guitar name here. So we put the name of another one which is the price, and here we have price
1:42
and let's go ahead and put this like so. Now this might be what we want but it might not be. So we might want to have a slightly
1:50
better representation of the price but let's just see the progress that we're making. Ready for it? It should be pretty close.
1:57
Boom! Yes, that looks so awesome! That is really, really cool, and look at this this is it! That's all we did, and if you look at the web side
2:07
the data, the server side bits look over here, that's all we did. This is incredible, and I guess the final bit to look at is this all guitars, right?
2:16
Super simple query. So this is a really simple app but I feel like it looks quite nice and yeah there's some CSS, and images
2:22
and that does add a lot to be honest but still, pretty nice. Let's see if it's actually functional. What about just acoustic guitars?
2:31
And electric guitars? Notice we have our Acoustic Black which shows up at the second one when we have all of them, but not when we have electric.
2:38
This is workin' folks, this is really, really nice.