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.