Adding our image grid

Okay, in this video what we're going to do is we're going to add these grids down the bottom here. So, let's go ahead and do that. Let's jump into Dreamweaver. We're going to get inside these columns here, so what we're going to do is, inside this column, we're going to put in 'img', like we did before, then we hit 'tab', and we're going to click 'images'. Go into this folder.  Now, we don't have them in the folder yet, so we're going to click ‘browse’. So we'll go to my desktop, find the downloaded exercise files under images, and here we're going to go to ‘thumbnail1’. Nice. 

Make sure, whenever you put an image in, you put the alt text. Remember it's for the visually impaired, it's for people using screen readers, and also for Google. I can't remember what this image is. ‘Love Image’. Very exciting. And, can we see how we want to do it. Let's check in the browser. Check the right one. Here he is there. I've made mine a little bit bigger. Why? Because I just like that they can resize when they get down to-- can you see when they get down to mobile, and actually gets quite big. So when you're styling these ones, make sure you use-- because we're using these images through all three sizes, and just make it just responsive, so just to make sure your image is big enough for however big it's going to be. 

So, next is, what we might do is, just duplicate that ones. So we're going to delete all these guys. Have my cursor, you can copy and paste it. It works. But a cool shortcut is, put your cursor anywhere in around here. You got 'command-D', or, if you're on a PC, do 'control-D'. And just go, 'control-D, D, D, D'. We got all our little guys. And what we need to do is, switch these out. Now, I can't just go and change the text here, because, remember when we were in here, we were in browser, and actually copied it into my folder. I need to go and move them. Let's go and check this out.  

So, I'm just going to type-- this is the website. and these are the images, and there's the guy to get copied. This is my folder of exercise files. And I'll grab all of these guys. Come on in here, guys. Oops! Can't see you. I hate this about a mac. They're in there somewhere. We need to go to the images folder. Get in there. Great! Okay, so there's all the images. So, now I should be able to get into here. Sometimes you need a-- there's one here, it's got to be ‘thumbnail’. This was thumbnail. Sometimes it just doesn't. Because I've just copied it in the background there. I might have to, it's just not appearing. So, I'm going to hit 'save'. And there is a refresh, so it's up here, 'F5' on both the Mac, and the PC. Getting there. 

Now, one thing you need to do is, I'm just copying these all. Just generally, you should change the alt text for all of these. It's really important. Important enough, but I'm not going to do it now, because I am just doing a tutorial, it's not my actual site. So, go to you guys. Let's check them in the browser. So they're all in. By default, they're all stacked on top of each other, so what we need to do is get them to collapse next to each other, so they stack up. So, we're going to do that, and let's go into Dreamweaver and do that now. 

Okay, so to do it what we're going to do is-- we're going to use-- we're going to 'class'. 'Class', earlier called 'col', where you're just going to say-- free flip all these 'col's to the left, and they will stack next to each other. We did 'float's earlier on, and we floated the navigation, remember to the right. It floats over this way. If we float it to the left, they will keep stacking up next to each other, because by default they stack underneath each other in line. 

So, let's go into our 'styles.css'. It's somewhere at the top here. Doesn't really matter where it goes. I like to put these kind of big things at the top. Now, remember this is the 'class', so I forgot to put the 'dot', curly braces '{ }'. Let's go 'float'. And we're going to go 'left' in our image. Let's have a look. So they float. There's not enough room for them all to get in there, but they get mostly in there, so what we're going to do now is create another class that's going to make them-- we can divide this into three parts, so let's go ahead and do that.  

Now, this bit we're going to do now is, working with something called the 'grid'. That's the kind of overall term of dealing with this positioning where we get them to stack, one way, in the desktop, and then the other way, in tablet, and then we get to mobile, so we're dealing with this thing called a grid. So, what we're going to do to make this thing work is, we're going to create a 'class', and we're going to call this one a 'col-lg', large. And it's pretty typical to call desktop large, tablet medium, and you've got small, and then you can have the extra small as well.  

So we're going to use this guy, and what we're going to say-- this is going to be quite easy, we're going to say, you have a width of-- now, we could do 33.3%. Okay. And 'save'. We thought it's going to work. So, we've created it, but we haven't applied it, so, we've created this thing, and I go over here, and we're going to apply it to this 'class'. So we got one class called 'col’. We're going to apply the second class. You just put it in there, you stick them next to each other. That's how you apply more than one class. You don't have to write out 'class' again, you can, but you just put them in between these quotation marks, with the space in between. Great! I don't want to do-- I want to do it for all of them. So there's a cool little trick that Dreamweaver does.  

If I click here, and hold down the 'option' key on a Mac, or the 'alt' key on a PC, and click and drag. Can you see I got a cursor-- multiple cursors. How cool are they? I love it. 'col-lg'. Let's apply them to all. Great! Now we're getting to where we need to go. It's kind of working. Okay. So, the columns are all the right width. But these images aren't being responsive. So, by default, these images are being their exact size. The columns are the right widths, but the images are kind of squared out over the edges. Let's go and fix the images so that they are at 100%.  

So, to make our images responsive, we're going to go to our 'styles.css'. I'm going to create a 'class'. Where? As long as it's in the global heading-- Where am I going to put it? I'll put in with the columns that I've made. And we're going to do another compound selector. We're going to say, 'images' that are inside my col hyphen large 'col-lg' are going to do this. And we're going to say, this guy is going to have a width of 100%. And what we need just to make things responsive is we need to add our height to it as well, just put it in 'auto'. That will save you some problems later on. This will automatically pick the height. And the other thing that makes it useful is 'display: block'. Why? Just because.  We did responsive images, made the width100%, makes sense. Put the height in display though, and I'll make them-- Yes, it will make that work.  

So, let's have a look in the browser. Okay, getting there. Nice! So the widths are right, and-- so the widths are 33.3%, and they will stack next to each other. What I'd like to do-- and the images are responding. So what we need to do now-- because you can see, 33.3% is great because it stretches now when it gets down to tablet.  

Next thing I want to do is-- actually my mock-up has padding in between these. Let's add a little bit of padding to it. So I have done the padding in this case, and I have, instead of using this 33, there's not enough room for paddings. We need to put this down a little bit. So I've taken like, 2% off the overall size, and what I'm going to do is, I'm going to use it for here, and I'm going to do some padding. And we're going to put padding all the way around, and we're going to do 1%. We use that 1% around here, and it just means that-- Let's have a little look. So there's 1% around it.  

Great! So, 1% either side, let, right, up, and down, around these columns, and the rest-- if you leave, I guess just to make my point here, if you leave it at 33, there's not enough room, so 33 plus the 1% in between kind of pushes this guy off. What we want to do is make sure there's enough room here, so when you're doing yours, yours might be, say it's 4, you're going to be using 25%. If you got 4 across here, and you're going to apply it with different percentages to whatever works for you. And, you got to have to minus-- whatever you've used for padding, minus it off the width here. Yes, they're a bit of playing back and forth. 

Great! So we've made a responsive grid. Looks good there. It looks-- When we get down to tablet though, what I'd like you to do is, I want you to switch from-- this is our working version. So, when it gets down to tablet, I want to switch into these two columns here. At the moment, it doesn't, it stays like this, so what we're going to do is, we're going to create another class, so we'll do it, but instead of putting it under the head here, we're going to create it, so it only gets triggered when I'm in my tablet view. So anything in this media query only gets activated at the time where I'm maxed in, within this width here.  

So what we're going to do is, we're going to create a new file called 'col-md', for medium. And this one here is going to be 25%. When I say 25%, what I meant is 50%. But we're going to have this slight problem, and there's a reason I just typed 50 by itself. I always type in the full thing. So this is going to be your width of 50%, but because we got that padding applying, let's have a little look. It's not working. Why is it not working? That's because we created it here. We created this 'col-md’ but we haven't applied it to anything. Another routine, I did that on purpose, not that I totally forgot. And source code here, we've got this thing called col large, ‘col-lg’. We also need one in here, called col medium, ‘col-md’. Remember our trick, click in there. Hold down the ‘option all’ key, 'space', and let's type in 'col-md'. Okay, so we've created it, we've made it. Let's go ahead and check it. 

And, it doesn't work. Remember, 50%, but because we got padding in there, we need it to be a little bit smaller.  This is where you can go in, and play around with, and, I'll use '48'. I’ve already done it. Great! So, it fits in there. Watch this. 

So, at desktop, it's three across, and when it gets down to here, it's two across. Now, the last one we need to do, is when we get down to mobile, is, I'd like it to be 100% across. So, let's go ahead and do that now. So, we want to do two things. Our mock-up has the mobile view, they're all 100% across, so we're going to stay down here. We're going to create a class called col small, 'col-sml', and this one's going to be a 'width' of --  not a window-- going to be a width of 100%. Great! Syntax is getting a bit wayward. Let's go apply it using our cool trick. And we're going to be col small, 'col-sm'. Great! Let's check it in the browser. And it's going to be a little bit broken, because-- no it's not broken. But I want to get rid of this padding in between, because I want it to be-- my mock-up just has a little budding up next to each other.  

So what we're going to do is, in here-- Let's go to our 'styles'. And at the top here, we said, column had a padding, so 'col' had a padding of 1%. What we're going to do down here, is I'm going to say-- that same class, we're going to say, you 'col' have-- You have a padding here as well. Padding of '0'.  

Pixels, or percent doesn't matter. '0,0'. Great! They're all budding up next to each other.  

Awesome! Look at us. You can start to see-- We're making responsive stuff. And when you look at somebody else's css, and you kind of look at this for the first time, you're like, 'Wow!'. Okay, that's pretty complicated. You go into here. That was not too bad. Just make sure of all the tabs and all the returns. There's lots going on in here. But you can start to see. If you start chipping away at this thing, one little class at a time, so actually, I think, quite simple.  

What else do we need to do? The last thing I think is just the background color. So, I don't know, not a big deal, I guess. So we're going to do it to the body. So, the background color, let's go 'background-color', and I'm just going to pick a light grey, because that's what was in my mock-up. And ‘DDD’. Save. So, background color, you can see, it's just kind of like a slight grey in there. Cool! 

All right. Well done, us, and me, and you. Okay, we made a website. We made-- the big thing is this navigation here. It responds. Once we learn that kind of responsive stuff, with that media query, it actually became quite easy to do these. So, there's our tablet view, down to desktop, our lovely nav-sandwich, and we've got our little images going. Bravo! 

Little things I would do to touch this up, you can see on mobile here. The paddings probably a little bit big for this one. So what you do is, you find the class that goes into your hero box. It's at the top here somewhere. There’s something called hero. You make another class, and you just change the padding, and override it, and make it smaller, and you go ahead and finesse all of these things. Maybe the fonts as well. It's a bit big, because I broke some into two lines, so, get to your h1. Make another 'h1' down here in mobile view, and override the font size. Lots of those little tweaks is kind of where I guess you as a graphic designer really shines. All those little 'finesse'ing in terms of the spacing after, and the space between the lines, and all the font sizes, and things. Cool! All right. No muffling. Let's go on to the next video.