Hey, welcome to this video. Uh, and this one we're going to be learning  what responsive web designers  and how to do it using something called a media query. So what we'd like to do is when the screen adjusts  to different sizes, okay, I'm just gonna drag this  as an example, but what we're trying to do is get it. So when it looks on tablet, it looks like something. And when it's a mobile, it looks different. And when the desktop, it all looks different.

Okay? And that's responsive, okay? It's responding to the screen size. So that's what we are gonna do in this video. So let's jump into Dreamweaver. So in our last video, we just put in some real basic  H one, okay?

In the H TM L, and then we style it in our CSS. Now we need to look at responsiveness. So what we're gonna do is we're gonna do something  called desktop first. Uh, CSS. Now, a lot of people will do mobile first,  so they'll start, um, they'll start styling their mobile,  um, screens first  because it, it can be the hardest screen  to design for 'cause it's so small. And for what we are doing in this course,  and I find what most people do start with.

And what I start with, um, is that I start  with my desktop design  and then I scale it down for my mobile. Um, so it's up to you whether you start designing your  mobile first or desktop first. Just know though that it's sexy to go and do mobile first. People love doing mobile first. Me, I kind of rocked the boat a little bit  by doing desktop first,  but don't worry, it makes no difference to your site  and how it works on mobile or tablet. Okay?

So what we're gonna do is desktop first. It just means that this H one okay is gonna be desktop. And just to make things a little easier,  what we're gonna say is we're gonna put in a comment, okay? The comments are this one here  and this guy here with a slash  and then the asterisk, that's commenting in CSS. Okay? You can see one up there  and it just means anything, uh, anything that I put in, uh,  here, um, is just for people.

It's ignored by the browser. So you can write anything in here just to help yourself. Say you finally crack something  and you wanna leave a note to yourself, um,  you do it in these brackets here  or this little kind of like code snippet here. So what I wanna do is, this is gonna be my desktop  view, okay? And next what I wanna do is I'm gonna copy  and paste that down here. Now returns do meaning thing in code, okay?

This is gonna be my tablet view, okay? So what I wanna do is we're gonna learn how  to switch this out using something called a media query. Now to write in a media query, it's the at symbol,  then you type media, okay? Then you put in brackets,  then you type in max width. Okay? So max width, okay?

Now in terms of media queries,  this is the one thing at the moment that Dreamweaver is, uh,  not super helpful with. It's the only bit of stuff you're gonna have  to write out pretty much all of the syntax for, okay? And, um, this is as hard as it gets. Okay? So, um, if you're following along, you can copy  and paste with the exercise files. You can download those and play  along and just copy and paste it out.

Or like me, you can write it out. Okay? And we're gonna pick our mobile, uh, sorry,  our tablet size now. Now a max width just means we're trying to say what size,  you know, what size should this website change? Um, where, you know, what size is a tablet size. Now the most common at the moment is, uh, 7 6 8 K pixels.

Now that will adjust over time  and some people use some slightly different ones. But that's the most common tablet size at the moment. And then I'm gonna put in curly braces. And so that there is your media query  and it just means that anything inside  of those two curly braces now is going  to be triggered when the browser gets to a width of that. So let's do that. Let's do H one.

Okay? Like we did up above. And  what we're gonna say is don't forget your so H one  brackets return. And what we're gonna do is we're gonna  force the color to change. So we're gonna use color like we did above. I'll use the color picker.

I'm gonna pick green, okay? Don't forget the semicolon at the end. So what's gonna happen now is that,  let's just put some spacing in there  to make it look a little nicer, okay? It just means that desktop view, it's gonna be this color,  but then if the browser happens to be a width of this  or less, okay, it is going to change it to the screen color. Let's go test it out. Let's it safe.

Let's jump to our browser. Okay, here it is. So at desktop view it's red,  but when I get down to, hey, look at that. So at the width of 7, 6, 8, it's gonna switch the color  and that my friends, is how responsive web design has done. Not that hard, huh? Okay.

People get a little freaked out by it. And it just means that at this size do this other thing  and it can be a canal case. We're gonna stack our navigation slightly different. Okay? So we're gonna stack these guys there instead of there. Okay?

And these boxes down the bottom here, instead  of stacking them two by two, um,  or sorry, three by three on desktop. It's gonna be two by two on tablet. Nice. Let's go and do it for mobile as well. Okay? So because we're gonna use all  that stuff again nice and easy.

Okay? So let's go to mobile, mobile  view and the max width for mobile. This one's a bit of a mobile. Phones keep changing. They keep releasing new models of iPhone. And so 400 seems to be really good size.

I find it's really useful. It kind of ties in some  of the bigger phones, the fity ones. Um, and also kind of like real traditional, I think. Um, how big are iPhones at the moment? I think they're 3, 7, 5 or something like that. So I make it just a little bit bigger to cover in some  of the bigger LG Samsung phones.

Okay, so this is, yeah, do 400, it'll be fine. Okay? And what we wanna do is we wanna change the color. So I'm gonna delete all this. If I type in semicolon,  it should gimme my little picker again. Great.

And I'm gonna pick, I'll pick pink or magenta  or purple, whatever this color is. Okay? Remember then semicolon, don't forget him. Save it. Let's jump out to our browser. Wrong browser.

This one here. Okay, so red desktop. You ready? Tablet, green. Dun dun. Here we go.

Pew Mobile. It is a purpley movie color. I'll dispute that color. Okay. And that is responsive web design. Okay, so in here, my CSS,  you can see the nice thing about it.

My HTML is super clean and clear. Okay? There's very little on this page, there's just one new line  that we added, okay? But in our styles, okay, we've done,  it looks quite complicated,  but 'cause you built it with me, right? We are like, actually I know what that does. It's not actually that hard.

Coding isn't as hard as it looks. Okay? So we've got an H one, that's my desktop view. And can you see what's happened here? Um, this flow, okay, this,  it's called a cascading style sheet or a CSS. So it means that this thing here,  say the font family, it flows down.

And because the tablet doesn't argue with it  and the mobile doesn't argue with it,  it stays Gill sends the whole way through, okay? Whether it's mobile, tablet, or desktop. Okay? But color though, there's a bit of a fight going. So what happens is it's desktop  unless this little media query gets triggered  and do that, okay? And then it will flow down to here  and this little media query goes, Hey, I wanna be, uh,  when I get down to mobile size,  I wanna be this green color as well.

Oh, sorry, pinky purpley mo movie color. Okay? So that is a media query. What we need to do now though is switch out our particularly  lame H one and do it with our navigation  where we have though that  nav sandwich and things start working. So let's jump out and start doing that now.