All righty, so now that you know how to make mock ups, you should have six of them. Ideally, though, you can still do the layout with just one repeated six times as a placeholder. That's what I'm going to do. Alright, so we're going to start in our HTML. We're going to minimize our about section because we're done with that for now, and we're going to go into our project section. We're going to start by creating a div with the class projects.
This is gonna serve as our wrapper. And then inside we're going to create an h1 with the class of project stache title and our title, we're going to type click to view projects. Next, we're going to create two divs here. The first One will be div dot project dash group dash one. And the second you may be able to guess will be div dot project dash group dash two. Okay, so we're going to start working on our first project group, we're actually going to be making two groups of three, this will be easier for our layout.
So inside project group one, we're going to create an article element. This is pretty much the same as a div. But just a different way to identify it. And project dash item class is what we're going to give to this article. And basically, inside of this, this is going to be the parent class for the image inside of this, we're going to have our mock up image which will be wrapped in the link so when you click on the image, it will go to the live version of the project. And the project title will also be a link to that and will also have a link to the GitHub for that project.
Well, inside of our article, we're going to make a div with the class project dash image. And then inside of that we're going to create an element, then is going to be pointed to our live project. In this case, I'm just going to put my website. And inside of that we're going to have an image. And so this is going to point to the mock up in our assets image folder. So project one, and I'm just going to give it an alt of project.
Alright, cool. Now underneath our project, image div, we're going to create another div. And this is going to be a project caption class project dash caption. And inside of this, we're going to make an H four And this is going to have the class project dash title. And then we're going to have an A element inside of that. And again, that's going to link to the same thing as above.
And inside of that, we're actually going to write our project title. In this case, I'm just going to write project title. And next, we're going to create an a six, sorry, h six, h six with the class GitHub dash link. And this is also going to have an element inside of it. And this is going to go to GitHub, but we don't have a GitHub but I'll just type github.com and we're going to type in here Few GitHub repository just to confirm what this link is for. Sorry, we're gonna you know what, let's shorten this.
We'll just leave it as GitHub. But then we're actually going to have a title inside of our link, so that when someone hovers over it, it'll give more of a full explanation. All right, cool. Now that we're done with the HTML, the great thing is we can actually just copy and paste our articles. So we're going to have two more. And you can see that the spacing is off.
So let's fix that. We're gonna have two more in our project group, one class. And then we're gonna go down and inside of our project group to We will also paste three of these already. So obviously, for your purposes, you're going to be changing all of the links, and you're going to be changing the alt tags and the project titles themselves. But in this case, I'm not going to do it because it's just to show you how it's going to work. So let's go out of curiosity.
Let's check that out. See how that looks. Let's go down to our project section. Okay, so you can see that we have our mustard yellow still, and you can see that we just have all these kind of lined up in a row on the left side. Alright, so we're gonna need to add some CSS to kind of fix how this looks. So we can do that in the next video.
I'll see you on that one.