Projects Using Figure

[00:00:00]
>> We have two big chunks of this webpage left to go at this point in time. We have the project section and we have the featured section. I'm gonna start here with the project section. Now I'm going to let you code the featured section on your own, and then we'll be ready to assemble this into a homepage for the website.

[00:00:15]
So here is the project section to remind you what this looks like. On the Desktop, we're going to have a big headline here, projects that I am proud of. And behind that, we are going to have the following arrangement of things. So we have one giant picture here.

[00:00:35]
Notice that it has a bar across the bottom here. It's kind of semi-transparent, it has the name of the item, this is the CSS projects course. And then it has the technologies used underneath of that, HTML and CSS. Likewise over here for advanced CSS layouts in the boot camp, we have those as well, okay, next to it stacked up.

[00:00:55]
And then underneath of this we have five individual icons, I guess, for these particular courses down here at the bottom. After that, on the left hand side here, I have the tablet, we're gonna wind up stacking those images there on tablet. Then we're gonna do this crazy thing down here at the bottom where we have three across and two underneath of that, and everything is centered and looks lovely.

[00:01:20]
And then on mobile, basically everything will just stack on top of each other. So that is where we are heading and you have these reference images here to look at as we start coding, make sense? Are we ready? [LAUGH] It's a lot. Okay, so down here, let's start with our desktop layout.

[00:01:41]
Actually, the Codepen button is up here at the top of the screen. So let's start with that. So here at the top of the screen, what we have basically, every single one of these, the first three, these are those three boxes that you saw on the top. So we have an image, a link, a course, title, and skills.

[00:02:09]
That's what these are. So there's your image, there's your link, there's your course title, and there's your skills. So let's go through and markup one of these together. And then I'll turn you loose to markup the other two on your own. Okay, so to get started here in our HTML, let's start by setting up our section just like we have before.

[00:02:34]
This is a section with a class of section-projects. So that is gonna be the section of the webpage, and then somewhere down here at the bottom, we will have a /section. Awesome. Guess what the next thing I'm gonna put in after my section? Div with a class of container.

[00:03:03]
Yep, div class=container, Okay? And then, down here at the bottom, /div, Okay? What's the most important thing inside of this section of projects? What would be the title of the section?
>> Projects that I am proud of.
>> Projects I am proud of, guess what that gets. How about an h2?

[00:03:41]
Here's my h2. Phew, okay, that was very straightforward, yeah? Look how much you're learning. All right? So now comes the next one. We need to have a little box. It's gonna have our picture. It's going to have the word CSS projects and it's gonna have the skills that go with it, okay?

[00:04:06]
So we have a picture associated with some text. What would be a great way to mark this up, quite possibly one of my most favorite HTML constructs? How about a figure? Yeah, how about a figure which associates our image with some text that describes that image? So what I'm going to do here, I'm gonna take out my little comment and let's start our first figure.

[00:04:37]
So it starts with the figure element and it ends with a /figure, okay? That's the first part of the figure. Then inside of the figure, we are going to have an image. And the source for that image is gonna be what?
>> Coffee.
>> Yeah, how about this one right here?

[00:05:03]
In this assets codpen, coffee, blah blah blah, okay? What else should I have here?
>> The alternate
>> Alt text. So my alt attribute will have the following description. Something like, I don't know, CSS projects course, Okay? So that's the image. And then underneath of that, we're gonna have a figure caption, which is figcaption.

[00:05:46]
/figcaption. Okay. So inside of that, we are going to have, somehow we're gonna put this text in there. The CSS projects with HTML and CSS. So CSS projects looks like a headline, doesn't it? It's the name of the course. So how should we mark that up?
>> Paragraph.

[00:06:19]
>> Sorry?
>> Put the p down?
>> It could be a paragraph, but it's actually kind of important, it's the title of the course. So it could be a? How about an h3? Okay, so there we go, there's our h3. That's the name of the course. And then we have HTML and CSS, what would this be?

[00:06:45]
>> H2, h4?
>> Well, they're not really headings, it's kind of like a list of skills, isn't it? So how would we markup a list of skills that go in any particular order.
>> Ul.
>> Ul.
>> How about a ul [LAUGH] /ul. Okay, and then each one of those skills then would get an li.

[00:07:14]
So the important lesson to take away from this, a little bit of text here that I've just put here on the page, is that your clients don't always give you beautifully formatted text. They just said CSS projects-HTML, CSS. And it's up to you to figure out, well, CSS projects, that's the title of the course, HTML and CSS, those are possible skills that are part of a list.

[00:07:36]
And you have to figure out these parts as to how you mark them up. Okay, great. So then the last thing here that we're missing is we need to have, Something that's clickable. And so I have this link here, that's a link to the course. I'm gonna I cut that, the first thing I wanna do is make my image clickable.

[00:08:04]
So a href equals that web address, target= _blank. And then if I put a /a after my image, now I have a clickable image. Yeah, makes sense? And then we may also want to make our text clickable here inside of our figure caption. So let's make our title clickable, a href equal, quote, that same URL, target, =_blank.

[00:08:45]
And then a /a, okay? Great, and if you look at this, it will look kinda like this, CSS PROJECTS. And then HTML and CSS are underneath. But you should be able to click these things and it should open up the course here in another tab, okay? So you can always check and make sure that you've coded your links correctly.

[00:09:15]
>> Yes?
>> For accessibility sake-
>> Yes.
>> It'll be over the image and it's the same link, do you just hide one of the links?
>> We could do that, if you'd prefer, we could take this link out. Would you prefer just not to have this link?

[00:09:32]
>> I think both are fine cuz I think-
>> Okay.
>> Both should be clickable, but I'm just, if a screen reader is reading it out, it would read it twice.
>> Right, this is true. So yeah, you could add that aria-label equals hidden. So you could say, aria, it's aria-label, right?

[00:09:55]
I think that's what we had earlier, right? Aria-label? Yeah. I'm not as fluent in these arias, I have to I have to look them up always. So you could say something like that and then it would be hidden from a screen reader and that's probably an excellent addition so thanks for suggesting that