Project Exercise

[00:00:00]
>> So now you have two more of these. Can you guys go ahead and mark those up? Okay, so can we take like five minutes? Okay, what I would recommend is just to copy the figure and then make your changes Okay, so hopefully, you were able to set up the other figures with the other information.

[00:00:26]
I did make a mistake in the ARIA item that I have here. And so aria-label="hidden" is nothing, this should be aria-hidden="true". My apologies for that everybody has things that they have to look up, and I am not an expert on the ARIA properties here. So this is aria-hidden="true".

[00:00:55]
So we'll just fix those real quick. Okay, and, so just sort of as a quick kinda check, your page should look kinda like this. You should have really big pictures, and then you should have like the title with the, a bulleted list of skills underneath. So CSS projects, advanced CSS layouts and the bootcamp with HTML, CSS and JavaScript underneath.

[00:01:22]
Okay, the other items that are down here at the bottom, don't worry about those yet. Those are for the tiny icons at the bottom, we're gonna code those separately. But for right now, let's code these first three. Okay, so now that we've got our HTML in place, we're ready to dive into the CSS.

[00:01:44]
I'm going to fold up all of my various layers here, and I'm going to add another layer at layer. And I'm gonna call this one projects, cuz that's what this one is. And then inside of this, we can start to add all of the various styles that are gonna be needed in order to make this work, so first of all section-projects is where everything is located here in our HTML.

[00:02:13]
Remember that this is the section that we have that's gonna encompass. Include everything that you see here in the project section. And that is going to include, First of all, our background color is var black. So immediately we will not be able to read this. Well done everybody.

[00:02:42]
Then we can add a little bit of padding to this. And I've got 6rem 0 4rem 0. So remember again, TRBL, remember the clock. So this is the top is 6rem, 4rem goes on the bottom, and 0 on the left and right. And then of course we need to set our text color to var white so that we can see again.

[00:03:11]
All right, so that sets up our big section here outside of everything. Now, in terms of these images, for the most part, they are roughly the same size. If you are lucky enough to work with images that are the same size, that's really great. Everything will line up beautifully if you are not so lucky to work with images that are the same size.

[00:03:32]
One of the brand new tricks that we can do with images inside of our CSS is to use the object. It property that is going to make these images ultimately the same size. When they appear inside of our grid, they may look a little bit off until we start to apply that styling.

[00:03:52]
But for now, just you'll have to trust my process here. So we're going to start with figure img, so for the images that are inside of figures, what we wanna do is we're going to say object-fit:cover. This is the same kinda concept that we saw with the background image, although the property is slightly different there for background images than it is for regular images on the page like these.

[00:04:22]
The other thing we need to do is add the width of 100% and a height of 100%. Okay, and let's see if these look a little bit off. I don't think they're obviously off at this point. But it's really hard to tell. And ultimately these aren't really the size that we're going to be looking at anyway, so you'll just have to trust me that as we continue to work through this particular problem, this is going to help make our images sort of uniform kind of sizes.

[00:04:56]
Okay, then we can add to this some styling for our figure cap. So let me scroll down here a little bit so you can see our figure captions. And I'm gonna say figure a. We'll make the color white. And we can say text-decoration none. Because we don't want any underlines, so you should now have just words there, okay?

[00:05:30]
And if I wanted to make these words green, how would I set this up? What would be my selector? Figure a:hover, yeah. There we go and then I would say, I wanted to make it green, what would I say next?
>> Var (--green).
>> Var (--green). Awesome, so if we scroll on down here, we should have my screen text.

[00:06:06]
Okay, great. Now, that I've got sort of that basic stuff in place, let's style the actual figure caption itself. So I can just say, big caption, the HTML element, and I can say the background color will be var black. Obviously, that's not really gonna show too well here on the screen at the moment, you'll just have to trust me that that background became black, I'm going to set the opacity to 0.8.

[00:06:44]
Remember that we have a sliding scale for opacity, 1 is completely, the color is completely opaque, 0 is it's completely transparent, so 0.8 means it's gonna be pretty heavy but you can see some stuff through it, all right? And then text align center. So we'll align all of our text in the center.

[00:07:09]
There we go. Okay, and then we can stay with the rest of the text that's here inside of our figure caption. We can say our fig caption h3, we wanted to I turn off the margin on the bottom, so margin-bottom of 0. And then for our figcaption ul.

[00:07:37]
I need to get rid of the bullets, and I need to get rid of the space. Does anybody remember how to do that? How could I get rid of the bullets? And the space that's pushing it over. What do I put in here for that?
>> Something decorate, I'm gonna turn that off.

[00:07:54]
>> So which?
>> It's like turning off like the decorate or decorate none.
>> Yeah, close, very, very close. It is a list style type none, that'll turn off the bullets and then padding: 0 margin: 0. And as soon as I do that, you'll see here that we have projects we have HTML and CSS and see how little space we have between CSS and the next item?

[00:08:28]
So we actually probably really don't want zero on this margin. We want zero in most places. We want zero on the top, zero on the right, but maybe we want like two rem on the bottom and zero on the left. That's better, now we have a little bit of space there.

[00:08:50]
This HTML and CSS may not technically be all that obvious looking at these, but that is the monofont family that we have the Fierra Mano. And so that is the font we need to use there, so let's add that font-family is what? Var, yeah, mono. So that will make our HTML CSS look good.

[00:09:27]
Just in case, like later, especially where I've got my bootcamp down here and I have the full word Javascript, I'd actually like everything to be uppercase. So let's do a text-transform: uppercase. Obviously, that doesn't affect most of these things, HTML, CSS, but it will help with the word JavaScript.

[00:09:50]
And then finally, my font-size can be var(--small), which we created a little bit earlier. Okay, so we are almost All the way there, the last thing we need to do is put HTML, CSS, and Javascript all on the same line, yeah. There are many ways that we could do this.

[00:10:14]
Once again, we could use Flexbox or we could use CSS grid, but there's actually a really simple way of doing it where we always just wanna have these things side by side, and that is if we add the style figcaption li and we just say display: inline-block. And that will in fact put these things on the same line just like that.