What does responsive website design mean

Hey there, buddy, this video is the beginning of our next project. This is Project3, 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. We'll talk about that in a second. 

So the overarching thing 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. We learned loads, and the overarching thing for this first one was introduction. The second one was really the big chunk of it was Flexbox. 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, well, the next project at least, is going to be all about responsive. What does it mean to be Responsive Design? Quite literally, it means your website's going to respond to different device sizes. So on a desktop screen it's going to 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. Screen real estate, this is probably better for a tablet portrait, and the changes are, we're going to go from 3 Across and 3 Down, to this one here, which is 2 Across and 4 Down. 

You'll notice we're missing one, because we had uneven numbers there. So we're going to turn one off to make best use of the screen real estate. We'll also do this, this is what you're waiting for, you're like, "How come we have not done the Burger menu yet?" Okay, Nav sandwich is coming up in this video chunk, Project3, a little bit later on, and we're going to 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 have nine of them, and it's going to scroll down the screen. So that is Responsive Design, let me show you one in practice. Let's look at my website. So bringyourownlaptop.com, this is what it looks like on a giant screen. I got loads of room to play around with, so I can fit loads of these, like little thumbnail, what do you call them? I call them cards. And down the bottom here lots of testimonials, but when it gets down to a smaller size, let's go down, down, down, down, see what happens. So there was a break there, so check out these cards. I can fit six across on a big screen, but when you get down to smaller screen, oh, only four, then you get down even further, three, two, and eventually if you go to mobile, I can't drag it to mobile, I need to right click it, go to 'Inspect', up the top here, I'm going to go-- can you see, there's our word. I'm going to pick iPhone 6, and you see, I've cut it down to one, one of the little cards. 

You can cycle through and one of the little testimonial’s in here. We've changed lots of the font sizing, just to make best use of our screen real estate. Close it down, that is responsive design, just changes. Now to make this happen the two key things we're going to learn in this little section is something called a Media Query. We're going to use Flexbox again, a little bit more, yeah, add to our knowledge of Flexbox, and to a lesser degree responsive images, that are just sizes, but really the big ones are Media Queries and then Flexbox, adjusting the structure, really. 

So we kind of know what Flexbox is, and a Media Query is just where the website asks the browser to say, how big are you, because it needs to ask every time, it needs to say, "How big are you?" and it says, "I am, let's say, 700 pixels across", and then launches some CSS 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, we'll jump in the beginning of this tutorial, I need to make a better image, it's cut off from this one. Good work, Dan. Great web design. 

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. Really it's about adjusting for different device sizes. I felt like I'm just rambling now, I hope you are 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.