Portfolio Projects Section Markup

[00:00:00]
>> We are ready to do the hard part of this portfolio, so this is now going to be the actual portfolio section of the homepage. And why do I say it's the hard part, it's actually not all that hard, but it does look intimidating. We have some crazy design stuff going on here, where we've got text overlapping images and all kinds of other things.

[00:00:20]
But as you have seen already to this point in the course, the methodology for working through these problems remains the same. We are gonna start with semantic meaningful markup, then we're gonna work on styling little bits and pieces at a time. And eventually we're going to get to that overlap problem, it's easier than you think here in the projects next Chapter Five.

[00:00:43]
This is how this is going to look on desktop and how this is gonna look on mobile. So remember the phrase mobile first, mobile first means that this is the default styling for the page. In other words, no media queries involved in that particular layout. And then we'll also have the desktop dimension which will be inside of media queries that will override that default mobile styling which occurs outside the media queries.

[00:01:10]
So, that will be something that we'll be looking into as part of this particular project. So we're gonna start here then basically building this portion of the page first, see how this looks. We have our text up on top, we have our image underneath and that's where we're going to start building that first mark it up, and then apply all the pretty styling.

[00:01:34]
And then we'll make it look like this was the very last part of the whole thing, all right, so, the first place that we start then again is with that semantic HTML. And I've given you of course, your starting code pen here, things that you want to think about as you start working through this particular problem.

[00:01:54]
So, I've given you the image and I've given you the text that's here. What is the most important part about this series of, portfolio projects, so we have a title for this whole section called projects that I'm proud of. Then we're gonna have a series of the individual projects, what is the most important part of information here was that sort of headline, part of that latest project?

[00:02:19]
Is that latest project is it wall of wonder, is it the project description, you're gonna have to think about that? And line your headings elements in the appropriate way. You're gonna need to identify what it's a paragraph, maybe you have a list of things here like the technologies that you were used to include them.

[00:02:37]
And then I've given you the image as a freebie there at the end. In code pen you have to have the Pro version, which is the paid version, in order to host images. So I've done that part for you and given you that image tag there at the end.

[00:02:51]
Take a look at this particular problem in terms of just the HTML, do not worry about how it looks, don't try to group any of these elements. Just mark this up appropriately and I will tell you the way that I marked it up for our project section. All right, so we are back again, let's take a look at how you did with marking up the HTML for our project section.

[00:03:21]
This is really important, as always, we start with a semantic HTML what is the meaning that you're trying to communicate? And then we can always throw in all of the dives and all the spans that you want later. As needed that's what we've been doing the whole way through this is no exception.

[00:03:37]
So let's start here with our HTML, so here's the way that I did it. All right, so first of all, as we have been doing the whole way through, we started with a section element because this is yet another section of that homepage. So section and then the idea of projects we put in that link in our nav bar to projects and so we need something to connect it to.

[00:04:03]
So that idea projects is important, you can call it anything you want. But whatever the ID is here in the section needs to match the H ref attribute for the project's link in your navigation, so we'll skip down to the page there to the appropriate point. Then I have a native H2 for the whole section, projects I'm proud of that is the H2 for that whole entire section.

[00:04:27]
Then after that I've sort of grouped everything together here in an article and that is because this is sort of its own little self included story. This is something that we could syndicate that you would be able to get meaning from, just by looking at what happens to be here.

[00:04:46]
So that's why I chose the article element for doing this and then inside of this, we already have an H2 for the entire section with H1 is your name and the navbar. H2 for the whole section is projects I'm proud of. So we're on to H3 as our next element remember you can make these any size you want, but you need to make sure that these headings are not skipped and that they are go one after the other.

[00:05:12]
So the important part here in this article is wall of wonder that is the name of the project. The latest project even though it comes first, is descriptive, it's not necessarily the most important thing that's here on the page. So I've set that to be an H4, then we have a paragraph that has the description of that particular project.

[00:05:34]
And the technologies used include a mark that up as an H4, it's part of the article, but if the article title is the h3, then the h4 becomes sort of the next level information. So the technologies that we used include, in this case, HTML, CSS, and SVG, that's a list of technologies.

[00:05:52]
So that's an unordered list and then at the very end, we have our image which is still part of our article, and then we end our section