What does responsive website design mean
Hey there buddy. This video is the beginning of our next project. Okay, this is Project three. We're going to build a real quick really just kind of simple portfolio site and the big overarching thing for this one is going to be about this thing called responsive design and we'll talk about that in a second. So the overarching theme for our first one was this was just getting us started. It was real simple. I made it real simple so that we could kind of just get the basics in. Then we learned a real ton in this second project. Okay. We learned loads. And the overarching theme for this first one was introduction. The second one was really the big, the big chunk of it was flex box. Okay, so getting you used to that and we threw in so many different parts that kind of the nitty gritty of foundation. Html and CSS this next tutorial is, well the next project at least is going to be all about responsive. Okay. And what does it mean to be responsive design? Quite literally. It means your webs...
ite is going to respond to different device sizes so on a desktop screen it's gonna look like this. But when it's loaded up on a tablet, it's going to make best use of the screen real estate. Yes, that's the word we use. Okay. Screen real estate. This is probably better for a tablet. Portrait and the changes. Are we gonna go from three across and three down to this one here, which is two across and four down. You'll notice we're missing one. Okay, because we had uneven numbers there so we're gonna turn one off to make best use of the screen. Real estate will also do this. This is what you waiting for you. Like How can we have know how we've not done the bigger menu yet. Okay. Now have sandwiches coming up in this video chunk. Okay. Project three a little bit later on. Okay. And when we're gonna we're gonna design this one for mobile and it's just going to go into a stream of one. We'll turn that guy we turned off back on we're gonna have nine of them. Okay? And it's gonna score on the screen. Okay? So that is a responsive design. Let me show you one in practice. Let's look at my website. So bring your laptop dot com. This is what it looks like on a giant screen. I've got loads of room to play around with so I can get loads of these like little thumbnail, what do you call them? I call them cards. Okay so and down the bottom here, lots of testimonials. Okay? But when it gets down to a smaller size, let's go down down down down. That's what happens. So there was a break there. So check out these cards. Okay? Can fit six across on a big screen when you get down to a smaller screen only four. Okay? Then you get down even further 32 and eventually if you go to mobile, I can't drag it to mobile. Okay. I need to right click it, go to inspect At the top here. I'm gonna go see there's our word getting a pick IPhone six. Okay. And you see I've cut it down to 11 of the little cards that you can cycle through and one of the little testimonials in here, we've changed lots of the font sizing is just to make best use of our screen real estate. Close it down. That is responsive design. Just changes now to make this happen. Okay. The two key things we're going to learn in this little section is something called a media query and we're going to use flex box again and a little bit more add to our knowledge of flex box and to a lesser degree responsive images that are just sizes but really the big ones are media queries and then flex box. Okay, adjusting the structure really. So we kind of know what flex boxes and a media query is just where the website asks the browser to say how big are you? Okay Because it needs to ask every time it needs to say how about you? And it says I am let's say 700 pixels across and then launches some CSS Okay. Based on how wide it is and that's called a media query. If that wasn't a great explanation. It's a little bit easier actually just to do it and that's what we'll do, jump in the beginning of this tutorial. I need to make a better image. It's cut off from this one. Go with dan great web design. Alright, so we're going to go build this one, This handsome portfolio website for a logo designer. We'll do some other cool stuff. You can see background repeats, but really it's about adjusting for different device sizes. I feel like I'm just rambling now. I hope you're excited. I'm excited. It's nice to get into a new website. I'm sick of the pink one. Let's get in and build ourselves a logo portfolio website.