Adding project images to our portfolio

- [Instructor] And now what we've got is our header, got our tag line. The next thing we want to do is add these projects in. Now at the moment, we don't have the project assets as part of our code, so we can't add any images to our site, we've only got the logo in here. So the first thing that I'm gonna do is actually export these images from here directly. So the first thing, is I'm gonna select each image, and I'm gonna export, I'm gonna export at PNG or JPG.

It's kind of up to you which one you pick, I'm gonna pick PNG, but I'm also gonna do it at 2x and the reason for this is I want it to be retina friendly. So if I'm on a iPhone or even a retina MacBook let's say, then it'll still look good and not pixelated. So I'm gonna do this for every single one but I'm also gonna give it a name as well. So I'm just gonna take it here and also call it lost and found, "Lost-and-Found" and I'm gonna do this for every single one. So what I've just done, is exported them all out into here, I'm including the headshot as well as PNGs and then I've just renamed them so they have no spaces and they're all lower case.

This is generally a good practice for web stuff, so generally have them all lowercase any dashes instead of spaces in here. So the first thing we're gonna do is add these to our project and again, if you've just uploaded something from Unsplash, just make sure it's re-sized and not like, 5,000 pixels wide. Notice how most of the sizes here around about below 2,000 pixels wide, just so it's nice and quick on the site to load.

So notice there's nothing too large in terms of pixels down here. So what we're gonna do is start adding these things to the site itself. So, what do we wanna do? So if we look back at the project, what we have in here is basically an area called "portfolio-1" and in here we've kind of got two things online to the grid. We have this image and this text area instead, so what we wanna do is add this image and then the text area in here.

So, that's what we're gonna do. So here what we're gonna say is in our Index.html we have Project 1, I'm just gonna replace this with an image. So image, again, is a single tag in here, we're just gonna do a space after the angle bracket and we're gonna pull in the src, of which one? Well this one is gonna be the first one, which one is this? This is the yellow one lost and found, "lost-and-found.png".

And what we'll see on the site now is hopefully, a tiny little image. Now the reason there's a tiny little image is obviously that this is trying to take up one column and what we wanna do is basically size this up for each of these projects. So how do I know the difference between this area, and this area? 'Cause both at the moment are sections, section, section, section, section, section. Now what I can do, is similar to pulling in an image in a different way, so this is the site logo, this is "lost-and-found.png", these links are all different, I can add something called a CSS class.

A CSS class is basically like a CSS hook, I can say "You are very different than other things," so for instance, what I can say here on my section tag rather than this one being the tag line I can say "this one, has a class of project." Now what's that actually mean? Well if we look at our project right now, nothing's changed, but what we can do, is use this label in our star sheet and say "Well sections, with this particular label on it, "or this particular class on it, "will do something a little bit different," and I can add this class of project to each one of the projects.

I can make this word up, it could be called "Rick's Project" it could be called whatever I want. As long as it's on the start opening one, so the first of these boxes, each time. How do I select this and make something change as part of this? Well again, nothing's changed at the moment. What I'm gonna do is in my style lot CSS, I'm gonna lay this out. So, I'm gonna do this between section h1 and footer and I'm gonna say the sections, there's currently five, but I only want the four of them, how do I pick that? Well I'm gonna pick it using a dot.

A dot just means a section, with the label of a class, of the thing you want. What is the thing that I want? Project. So the section with the classes of project and then I'm gonna do something with them. Now, just to give you a quick example, I'm gonna make the background color red, just to show you how it looks, background color of red just for the projects. And what this will do, is this one's still as a section, but this one doesn't have the class of project on them, it's just these three, So why is this useful? Well this gives us the ability to select things in a certain way.

Now obviously I don't wanna do section.project background-color red, I'm gonna get rid of background-color red, but in here, what I wanna do is pick the image in a section with the project. So, in here, I'm also gonna add a space for the image. So pick the sections with a class of project, then a space, then the images inside those and what do I wanna do? I wanna do the grid, column, this is starting in the first column and it's gonna span eight columns.

So let's see how that looks. There we go, we've got the first one in here. Now what this will do, because I've added this in place for every single one right now, it will do it for every single image in a class project. So, all right, go into my Project 2 and add this image in here. Which image do I want? Let's add in image number, well, let's pick "far-away" might be the wrong way, I'll change them later, if not, we'll add an image of the src.

Let's pick another one, I've already got "lost-and-found", "you-know-me" let's try that. And Project 4, and this one is gonna be, oop, missed the end bit there. This one is be "fierce" the last one. So let's see how this looks. So we have one, going down the page, two and then three and then four. So this is kind of starting to style this up as expected, but I might wanna add some text as part of this as well.

So in the next video, what we're gonna do is talk about how we add the text in here, on top of this.