Project Section Semantic Markup Exercise

[00:00:00]
>> Jen Kramer: So welcome everyone to chapter 5. We are flying through this material. We've created our about section of the webpage. We've created the footer section of the webpage. Now we're working in the middle part of the page, which is on our project section. And on the website you'll see that we have screenshots for how that should look, I'm just giving one project.

[00:00:20]
But all the projects will look similar to this. So on mobile, we've got our picture on the top. Underneath we have our text, it should be centered and we have this series of tags down here on the bottom. Notice that we've been consistent with this interesting rounded corner, pointy corner thing that we're doing.

[00:00:38]
So our images have the rounded corner on the top and the pointy corners on the other side of it. We've kept that same kind of feel into our tags, okay? And we kept that into. Look at this little white background we have going on here. So anytime you pick some sort of little style like that, we're gonna round our images, round quarters here, pointy quarters there.

[00:01:03]
We're gonna continue that into some of the other elements on the page too. That's a good design principle. And then after that, we're going to have our projects and we're going to have things next to each other, kind of similar to what you saw with the bio section of the website where we had the image on one side and we had the text on the other.

[00:01:23]
So that is what we're starting with. And you will be shocked to know that the very first part of this process is marking up our things with HTML. So let's take a look at our beginning code pen.
>> Jen Kramer: Here we are. We've got a series of items here on the page that are part of our project portfolio.

[00:01:47]
And once again, I have given you all of the starting text here on the page, okay?
>> Jen Kramer: And your job is. This is the same CSS that we had here before. Your job is going to be to try to mark all of this up. And so let's give you a little bit of time to try marking all of this up.

[00:02:13]
See what you can do with that. And I will go through the answers here momentarily.
>> Jen Kramer: Welcome back, everyone. Hopefully you were had a chance to try a little bit of the markup here for our projects. And I am going to go through some of that with you at this point.

[00:02:35]
We start off our project section with an H2. But because we're eventually going to assemble this all into one page, we have an H1 elsewhere on the page. That was the name of our developer. And so this section would start with an H2. Then the next part of that was the H3, which happens to be the name of each individual project.

[00:02:57]
So that should be an H3 to keep our headings in order. And then we, of course, we have a paragraph. For our different kinds of technologies that we use to build each of these projects. There is an unordered list with each one of those technologies inside of it.

[00:03:14]
We'll style those up to look pretty in a little while, but that's the kind of markup that you're looking for for that. And then there's the image here at the end with the description on it. So all of the other projects are going to be similar to that in terms of their basic markup.

[00:03:31]
Then let's go through how we're going to mark these up a little bit further for purposes of layout and so forth. So first of all, around each group of text. So here we have an H3 and a paragraph and our unordered list. We are going to wrap a div with a class of text.

[00:03:53]
And the purpose of this is just to group together all of our text into a single container for layout purposes. So that's why that's there. We also have an article around each one of these particular items, because, again, each one of these projects could potentially stand alone. It's a self described web page.

[00:04:12]
That's the definition of an article. So I've given that article with a class of project, and that is going around our div with a class of text and all the markup inside of that, plus the image. Then, once we have our series of articles. Make this a little bigger.

[00:04:33]
Once we have our series of articles, then we're going to put a div around the whole thing and I've given that a class of projects. And that will be for layout purposes. So we have individual projects with a class of projects singular. And we have a group of them together with a class of projects plural.

[00:04:50]
All right. I guess I missed one thing here, which was, I put around the entire section here, this element, which is the main HTML element, because this is the main focus of the web pages, all of these projects. So we have an article. That is our about section.

[00:05:08]
We have a footer. That's our footer. And then this section is going to be inside of the main element because it's the main focus of the page.