Okay, in this video what we're gonna do is we're gonna add  these grids down the bottom here. Okay? So let's go and do that. Let's jump into Journey Weaver. Okay? And they're gonna go inside these columns here.

So what we're gonna do is inside this column,  we're gonna put in IMG like we did before. And member hit tab, okay? And then we're gonna click images, go the images folder. Now we don't have them in the folder yet,  so we're gonna pick browse. We're gonna go to my desktop,  find the downloaded exercise files under images. And here we're gonna go thumbnail one.

Nice. Okay? And make sure whenever you put an image in, put the al text. Remember, it's for the visually impaired, it's  for people using screen readers and also for Google. And, uh, I can't remember what this image is. Love image.

Don't. Very exciting. Um, and okay, we, so we wanna do it. Let's check in the browser. Check the right one. There he is there.

I've made mine a little bit bigger. Why? Because, just so that they can resize when they get down to,  can you see, when they get down to mobile,  it actually gets quite big. So when you're styling these ones, make sure you use,  'cause we can use the same image through all three  sizes and just make it responsive. So just make sure your image is big enough for  however big it's gonna be. Okay?

So next is  what we might do is just duplicate that one. So we're gonna delete all these guys. Have my cursor here. You can copy and paste it. That works. But a cool shortcut is with your cursor,  anywhere in here, go command D.

Okay? Or if you're on a pc, go control D  and just go control D, DD, D, okay? And we've got our little guys. Um, and what we need to do is switch these out. Now, I can't just go  and change the, um, you know the text here. Why?

Because remember we went in here, we went browse it,  actually copied it into my folder. I need to go move them. So let's go check this out. So I, my desktop there is, this is the website, okay? And there's the images and there's the guy that got copied. This is my folder of exercise files.

And I grab all of these guys. Come on in here, guys. Oh, can't see you. Oh, I hate this about a Mac. They're in there somewhere. Okay, you need to go in the images folder.

Get in there. Great. Okay, so there's all my images. So now I should be able to go into here. Sometimes you need a, uh,  so in here it's gonna be thumbnail. Actually this one's thumbnail.

Sometimes it just doesn't  because I've just copied it in the background there. I might have to, so it's not appearing. So I'm gonna hit save. And there is a refresh. So it's a F five on both a Mac and a pc. Getting there, getting there.

Now one thing you need to do is I'm just copying these all,  just jamming them in there. You should change the al text for all of these. It's really important, important enough  that I'm not gonna do it now  because I am just doing a tutorial. It's not my actual site. So got all you  guys, let's check 'em in the browser. So they're all, that's not it.

They're all in by default,  they all stack on top of each other. So what we need to do is get them to kind of collapse next  to each other so they stack up. So we're gonna do that. Um, let's go into dream movement and do that now. Okay? So to do it, what we're gonna do is we're gonna use,  we've got, we created a class class earlier called colon.

We're just gonna say if we float all these coals  to the left, okay? And they will stack into each other. We did float earlier on  and we floated the navigation member to the right. You floats over this way. If you float to the left, they will kind  of like keep stacking up next to each other. 'cause by default they stack underneath each other in line.

Okay? So let's go into our styles. css, somewhere at the top here. Doesn't really matter where it goes. I like to put these kind of like big things at the top. Now remember, this is a class, so I forgot  to put the dot curly braces.

Let's go float and we're gonna go left. Thank you very much. Have a look. Okay. So they float. There's not enough room for them all to get in there,  but most they get mostly in there.

So what we're gonna do now is create another class  that's going to make them,  we're gonna divide this into uh, three parts. So it's gonna do that. Now,  this bit we're gonna do now is working  with something called the grid. Okay? That's the kind of overall term of dealing  with this kind of like positioning where um, we get them  to stack one, you know, one way in the desktop  and another way in tablet and then again on mobile. So we're dealing with this thing called a grid.

So, um, what we're gonna do  to make this thing work is we're gonna create a class  and we're gonna call this one called LG Large. Um, it's really typical to call desktop large,  um, tablet medium. And you've got small  and then you can have extra small as well. So we're gonna use this guy  and what we're gonna say, it's gonna be quite easy. We're gonna say you have a width of,  of now, uh, you know,  we could do 33.3%, okay? And let's save.

I think it's gonna work, okay,  because we've created it, but we haven't applied it. So we've created this thing. Now go over here  and we're gonna apply it to this class. So we've got one class called Cole. We're gonna apply the second class. Now I wanna, you just put it in there.

You sneak them next to each other. Okay? That's how you apply more than one class. You don't have to write our class again. You can, but you just put them in between these, uh,  quotation marks, okay? With the space in between.

Great. Now I don't wanna do, I wanna do it for all of them. So there's a cool little trick that Drew Weaver does, right? Is if I click here  and hold down the option, key on a, on a Mac  or alt key on a PC and click and drag. Can you see? I get a cursor, multiple cursors.

How cool is that? Hey, I love it. Cole hyphen algae. Okay? And it's applied them to all. Great.

Now we're gonna check it out. It's kind of working. Okay? So the columns are all the right width, okay? But these images aren't being responsive, okay? So by default, these images are being their exact size,  the columns are the right widths,  but the images kind of squared out over the edges.

So let's go and fix the images  so that they're a hundred percent. So to make our images responsive, we're gonna go  to our styles css. We're gonna create a class where as long  as it's in the global heading, um, where am I gonna put it? I'll put it in with the columns that I've made. And we're gonna do another compound selector. We're gonna say images that are inside  my coal hyphen large, uh, are going to do this.

Okay? And we're gonna say these guys are gonna have a width  of 100%. 100% great. And what we need just to make things responsive is we need  to add a height to it as well and just put it auto, okay? That'll save you some problems later on. It just automatically pick the height.

And the other thing that makes it useful is display block. Why? Just 'cause, okay, we need to do responsive images. Make the width a hundred percent. Make sense? Put the height and display though in there  and it'll make them, yeah, it'll make it work.

So let's have a look in the browser, okay? Get in there. Nice. So the widths are right. Um, and yeah, so the widths are 33.3%  and they all stack next to each other. What I'd like to do and the images are responding.

Okay? So what we need to do now, 'cause you can see as,  see 33% is great  because it sques down when it gets down to tablet. Um, next thing I wanna do is actually, um, my, um,  mockup has padding in between these. So let's add a little bit of padding to it. So how I've done the padding in this case, um, I have,  instead of using this 33,  there's not enough room for padding. So we need to put this down a little bit.

So I've taken like two, um, you know, 2% off,  um, the overall size. And what I'm gonna do is I'm gonna use it for here  and I'm gonna do, um, some padding  and we're gonna put padding all the way around  and we're gonna do 1%. Okay? We'll use that percent around here  and it just means that, yeah, let's have a little look. So there's 1% around it. Great.

So 1% either side, okay. Left, right up and down around these columns  and the rest, okay? If you leave a, I guess just  to make my point here is if you leave it at 33, okay,  there's not enough room, okay? So 33 plus 1% in between kind of pushes this guy off. So what we wanna do is make sure there's enough room here. So when you're doing yours, yours might be, say it's four,  you're gonna be using 25%.

If you've got four across here, um, you're gonna play  with different percentage to whatever works for you. Um, and yeah, you're gonna have to minus it,  whatever you use for padding, minus it off the widths here. And yeah, do a bit of playing back and forth. Great. So we've made a responsive grid. Okay?

It looks good there. It looks when we get down to tablet though, what I'd like it  to do is I want it to switch from this is  our, is this one here? This is our working version. Okay? So when it gets down to tablet,  I wanna switch into these two columns here. Our, at the moment, ours doesn't, it stays like this.

So what we are gonna do is we're gonna create another class. So we'll do it, but instead of putting it in the head here,  we're gonna create it so it only gets triggered  when we're in tablet view. Okay? So anything in this media query only gets  activated at the time. Um, we're at a max, you know, within this width here. So what we're gonna do is we're gonna create a new class  called Call MD for medium.

Okay? And this one here is going to be 25%. And when I say 25%, what I meant is 50%, okay? But we're gonna have the slight problem  and for some reason I just typed 50 by itself. Let's type in the full thing, okay? So it's gonna be a width of 50%, but  because we've got that padding applying,  let's have a little look, okay?

It's not working. Why is it not working? It's 'cause we created it here. We created this coal mid,  but we haven't applied it to anything. I'm gonna pretend like I did that on purpose, okay? Uh, but I just totally forgot.

Okay? And source code here, we've got this thing called  coal lodge, but we also need one in here called Cole Medium. So remember our trick, click in there, hold down the option  or Alki space and let's type in Cole md. Okay? So we've created it, we've made it,  let's go check it and it doesn't work. Remember 50%, but 'cause we've got padding in  there, we need to be a little smaller.

And this is where you can go in and play around with. Um, I know it's 48 because I've already done it. Great. So it fits in there. Watch this. So at desktop it's three across, okay?

When it gets down to here, okay, it's two across. Okay? Now the last one we need to do is when we get down to mobile  as I'd like it to be a hundred percent across. So let's go do that now. So we wanna do two things. Our mockup has, um,  the mobile view, they're all a hundred percent across.

So we're gonna say down here we're gonna create a class  called Cole Small. Okay? And this one's gonna be a width of not a window. We're gonna be a width of a hundred percent. Great. All right.

Syntax is getting a bit wayward. Okay? Let's go apply it, use our cool  trick, okay? And we are gonna be Cole Small. Great. Um, and let's check in the browser  and it's gonna be a little bit broken, okay?

Because, well, it's not broken,  but I wanna get rid of this padding in between, okay? 'cause I want it to be my mockup just has them  all butting up next to each other. So what we are gonna do is in here,  let's go to our styles  and up the top here we said column have a padding. So Cole have a padding of 1%, okay? What we're gonna do down here is we're gonna say  that same class, we're gonna say you Cole have,  oh have a padding of zero, a padding  of zero pixels, a percent doesn't matter. Zero.

Zero. Great. They're all butting up next to each other. Awesome. Look at us. You can start to see um, you know,  we're making responsive stuff  and like when you look at somebody else's CSS  and you kinda look at this for the first time, you're like,  wow, okay, that's pretty complicated.

You go into here, okay, that's not too bad, especially  with the tabs and all the returns. Okay, there's a 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. It's actually uh, you know, I think quite simple. Um, so great. Uh, what else do we need to do? The last thing I think is just the background color.

Okay? Uh, so I don't know, it's not a big deal I guess. So we're gonna do it to the body. Okay? So the background color, let's go background color. And I'm just gonna pick a light gray  'cause that's what was in my mockup.

DDD save. Okay? So background color, you can see it's just kind  of like a slight gray in there. Cool. Alright. Uh, well done.

Us and me and you. Okay? We made a website,  we made the big thing is this navigation here. Okay? It responds  and once we learn that kind of responsive stuff, okay,  with our media queries, it actually became  quite easy to do these. So there's our tab of view down to desktop,  a lovely nav sandwich, and we've got a little images going.

Okay, Bravo. Um, little things that, um,  I would do to touch this up. You can see on, um,  mobile hits the padding's probably a little  bit big for this one. So all you do is you go, you find the class  that does your hero box. Okay? These 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  and finesse all of these things. Maybe the font as well. Okay? It's a bit big 'cause it breaks onto two lines. So get your H one,  make another H one down here in mobile view  and override the font size. Okay?

Lots of those little tweaks is kind of  where I guess you as a graphic designer really shines. Okay? All those little finessing in terms of the spacing  after and the space between lines  and all the font sizes and things. Cool. All right, now muffling, uh, let's go onto  to the next video.