Styling Skills List & Project Image

[00:00:00]
>> Jen Kramer: So now what I'm going to do is address those skills. Let's turn those into those interesting little images that we had here. So it's that blue background with the interesting corners and the names of the skills, all next to each other. How do we make that magic happen?

[00:00:18]
So we'll add some styling for that, and this is going to be our .project ul.
>> Jen Kramer: And just as we always do, the very first thing that we do is we turn off our margin, our padding, and our list- style-type: none. We turn all of that off, and now we have our skills just stacked on top of each other.

[00:00:54]
>> Jen Kramer: Then we can style up our li's .project li
>> Jen Kramer: So the first thing we do here is give them a background color,
>> Jen Kramer: Marina and then a text color: var[-white], okay? So we make sure that we have our background color and our text color here. It looks like one giant block because they're all right next to each other, and so it looks like that's a continuous block, but remember, there's actually a background in each one of those li's separately.

[00:01:37]
The text is a little close to the edges of that box. So let's give it a little bit of padding: 0.Srum. That will give us a little bit of space there, and then we can give them a border radius, and a I'm gonna set up a new variable for this.

[00:02:02]
>> Jen Kramer: So we had one here called corners. If we assign corners to these particular items here, they're too small, and that corner is kinda too big. So I'm gonna make a one called corners-small, and this will be 10px 0, which will look a little bitt better.
>> Jen Kramer: And then we can apply it.

[00:02:28]
>> Jen Kramer: Var[ -corners-sum].
>> Jen Kramer: So there we go, now we have our individually styled tags. And it's probably getting a little bit hard to see what's going on here, because these are still all stacked on top of each other. So how do we get them to go horizontally across the page, so that they're next to each other?

[00:02:50]
How would we go about doing that?
>> Speaker 2: Flex.
>> Jen Kramer: Flexbox, right? And we're gonna put that on the ul. So display: flex: flex-flow: row wrap.
>> Jen Kramer: And then we can justify
>> Jen Kramer: Content in the center, and we'll get that a gap of 1ram.
>> Jen Kramer: Boom.
>> Jen Kramer: Okay? If the font looks a little bit big, we can always make that a little bit smaller.

[00:03:32]
We can use our same technique we've been using in this site. We can say our font- size is calc[]. So we'll do a calculation, inside of that calculation, we're gonna do exactly the same thing we did before. We're going to have a [-base-font-size] times 0.85]. Just to make the font a little bit smaller and everything will get a little bit smaller with it, okay?

[00:04:07]
So now, we should have our text here on the top. We've got our little tags here underneath. And as we scroll down, you see that all of the projects have that same technique applied to them, the same styling. So back when we were looking at our individual projects originally, we set this up with a display grid and we sent it up with a single column with a gap of three ram, right?

[00:04:39]
That gave us the space between our tags and our image, but this also gives us the option now, because this is a grid based layout that we can. Using the individual properties, we can now swap these very easily right here inside of our CSS, so that the image is on top and then our text is underneath.

[00:04:59]
And the way we would do that.
>> Jen Kramer: We can just add this style right here in the bottom, .project img. So in other words, the image inside of each project, we are going to say grid- row. So we're witching the rows. The rows are the ones that go across, we're switching one to the other, and our grid row is 1/ 2.

[00:05:28]
So we're moving our image to the first position from the second position where it was, so we're moving that up on a page. The text will automatically shift down, and now we have an image on top of our text.
>> Jen Kramer: Just like the way we wanted it. So we have our image, practical CSS layouts, our text and our tags.

[00:05:54]
One of the things that I've noticed here is that in particular, this one, the ultimate CSS grid and layout techniques, very cool image here with the planets and moons. But it's very hard to see the edges of this particular image, everybody notice that?
>> Jen Kramer: It kinda blends into the background here, because it happens to have a white background as well.

[00:06:16]
So sometimes it's nice to add a little bit of extra styling, when you notice little problems like this. This may not be something that affects you in whatever you show on your portfolio. It didn't affect the original design that the graphic designer gave me using the images that it had, but I have that problem with this particular image.

[00:06:37]
So how would I make the image stand out a little bit more relative to the background? What could I do?
>> Speaker 3: We could border on radius.
>> Jen Kramer: We could put a border on it, right? That would be great. If we put a little black border around it, it would help make the image pop out a little bit.

[00:06:54]
So to do that, let's go to, it's our second project, and I'm gonna go to this image and I give it a class here of image, img-border. So right inside of that image, you can just give it a class, and I've given it a class of image- border, and then in your CSS, you can add .img- border.

[00:07:23]
Then you could say something like border:1px solid var [onyx]
>> Jen Kramer: And then that should give you a lovely little black border right around your image. It makes it pop right off the page. Isn't that better? Looks so much better than it did just sort of blending into the background, are you okay?

[00:07:51]
But it's not on every image. This image here, it's not on, all right? So look for those tiny little enhancements, it doesn't take much. It's a line or two of code, and just improve the look of things overall.
>> Speaker 4: Since this layout is one column, why didn't we just use the order property to order them?

[00:08:12]
>> Jen Kramer: You could do that, if you were using Flexbox, you could use the order property, but here we're using grid. And so since we're using grid, we have to do it this way.
>> Speaker 4: Just some alternate suggestions that you could always use drop shadows or box shadows, making the images stand out too?

[00:08:28]
>> Jen Kramer: Yep, yeah, you could definitely put a drop shadow or a box shadow, which the difference is subtle and slight, but it's a thing. You could try that, you could apply it to all the images, or just the one image. Those would be great things to add as well, in order to make that image come off the page a little bit and make it a little bit clearer.

[00:08:46]
So yeah, those were great suggestions also.