Next up in our learning, we'll build this card from scratch. And as you'll see, it gives us a number of Flexbox tips and tricks to learn. Okay, let's get started. Now if I open this in a brand new tab, you'll see it's entirely blank, and that's because we will be starting from scratch. Okay, so if we're creating a card, well, I'm going to show you in two different ways how you can structure the CSS. To begin, we'll use a traditional approach. So we'll give it a class name of Card, and then within here, once again, I will link to an app.css file.

So we'll give it a class name of Card, and then within here, once again, I will link to an app.css file. All right, and let's switch over to that file, and of course, it is blank. Okay, so as always, we're going to begin with the structure. If I switch back to our prototype, we can see, all right, well, this represents the full card, and it looks like it's split into two sections. So you have a side here on the left, and you have a side here on the right. Okay, let's get started with that. Once again, I have two sections here, and we'll say the left side, just temporarily, and the right side.

I'll grab the address right now, and then the difficulty below. All right, so right up here, we'll have our button. It's called php. Next, we have the thumbnail below it, so I will paste that in. Now you'll notice in this case, the SVGs, I don't have them locally, so we're just referencing a different folder in my project. Okay, and then finally, intermediate difficulty at the bottom. All right, and I think that should do it as far as the structure is concerned, but here we go again. We're back in Developers.

So we're going to grab this one ourselves. Let's switch back to Sublime. I'm going to go to my app.css file, and right here, I'll paste this in. Okay, now mostly, you don't need to worry about this too much. It's a fancy box shadow. You can see we have two different shadows. So the first one, we're saying, don't go to the right at all, but put the shadow a little bit below. We want the strength of the shadow to be about eight pixels, and then here's the opacity. So it should be black, but at about 12% opacity, and then we just add a second one there.

A lot of people don't like doing left and right, and that's because, well, if you later decide this should go on the other side, your class name is no longer correct. It's a valid criticism. I find in practice, it's just not much of an issue. If you need to change it, you can. But otherwise, yeah, if you want, you can do something like CardAside, CardSecondary, or whatever you want. I like to keep it simple, though. Okay, so now, I'll be explicit here. CardLeft will have that background gradient.

Next, you'll see that the bulk of the text here is kind of a lightish gray. So this is the same as this, but the heading is a different color. That's okay. Let's come to the card right. We'll do it here. And we'll set a color of about #888. Refresh. Okay, that brings it down a touch. But now for the card title, well, let's give that a class name. Now you'll notice we're using this convention.

But now for the card title, well, let's give that a class name. Now you'll notice we're using this convention. So if our component name is card, then all of the subelements will be card- and then whatever it's called. This is very common. There's also a BEM syntax where maybe you'll name the component card, and then this would then be called card-right or card-primary. This would be card-title. It's just a convention. You can do anything you want here.

I want a little breathing room between these two. So if we take a look, this section is kind of like the meta information for the series. So why don't we do this? Why don't we wrap each one within a div, or a span, you know, whatever you want. Then here, I can apply some margin-right. So let's do that. card-meta, and get that first one, and we'll add a margin-right of about 1em. Okay. Refresh, but now, you know, once again, because we wrapped those within divs, they're going to display as block level elements.

Yeah, notice the text comes to the end of the highlight there, but the clock is a good bit up. All right. Once again, Flexbox to the rescue. So we'll say font-size is 0.8em, and then what I want to do is target each of these. So here, you could say, if you want to give it a class, you can. We could say, card-meta div display of flex, give that a refresh. And now it looks like on the image, we need to add a little bit of space to the right. Now if you're using something like Sass, of course you can use nested selectors, but we can't do that in this case.