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.