How to change a website layout size color when at different sizes using media queries

All right, so let's get things set up first. We need to tidy up from our last project. We're no longer doing Project2, we're doing Project 3. So I'm going to go to 'File', 'Open', I'm going to make a folder on my Desktop. 'Project 3'. Click 'Open'. It's the way to get started, we're going to create-- I'm going to close down Welcome. I'll close down the outline, I'm going to make two files. 'File', 'New', let's save this one. You're getting used to this, right? You're like, "I know how to do this." Let's go to 'File', 'Save'. Let's create another one, 'File', 'New', save it. Let's call it 'style.css'. Connect the two, so in here let's put our exclamation mark '!', hit 'Return'. Underneath the title we're going to write 'link'. CSS, style, make sure it's the same name. I'll drag this over here, we're ready to go, except we haven't changed the title, I know we need to, let's do this real quick. 

There's my title, everything's ready to roll, oh, except for you, Word Wrap. That looks nicer. First thing is we need to add something to style. So in your Body tag here I'm going to add just a plain old H1, and inside that H1 just add a bit of text. Over here we're going to style it, so we're going to style our H1. We're going to say, you are a really simple color of, fine crazy color, lime green works. Semicolon. So we've done this loads, let's test in the browser. 

What ends up happening normally is, this doesn't appear if you start a new project. You can just get that going again by right clicking anywhere in your HTML, and go 'Open with Live Server', does the same thing. Where's mine, where is he gone? There he is there. So I've got a big chunk of H1 that is lime green. What I'd like to do now is set up a trigger that says, if the browser is about this big change the color. To do that you add something called a Media Query. So a Media Query at least goes into your CSS, and it looks like this. It says, that sort of Media Query--

Now the weird thing about VS code is, normally it's really helpful with suggesting lots of code. Like I rely on it so much now. It doesn't for Media Queries. It's just something that's not in their feature list at the moment. Hopefully, by the time you get here, it's been updated and it does have lots of helpful stuff, because the syntax is a bit weird, it's not something like we've done before. So this thing triggers it, the Media, and then it's looking for a max width, it's what we're going to use, colon, ':', and then a size, so it's looking for a max width of, we're going to use 768 pixels. It's just a really common tablet size. Tablet and portrait. And then put in curly braces, and put a return in. 

So that's it, it's going to say, I'm looking out. I'm looking out and checking the browser size, from 0 up unto a max width of this. Now we've picked 768, you can use any size you like, whatever you're targeting. If you're watching this in 10 years there is probably no chance, a tablet is still this size, it's probably not even tablets, flying cars hopefully, anyway. So what we're going to say is once this is triggered, so basically this says, when this is all being matched, it's from 0 to 768, trigger all the CSS in here, and the CSS we're going to write is an H1 of color. 

We're going to pick a color. Dark green, dark orange, look at that. Let's give it a test first, let's check in our browser. There he is, this, he's green, but if he gets below 768, you ready? Ready, ready. Hey, cool, huh! That is all a Media Query is. That's the real kind of like structure that we're going to build, the rest of our responsive website on. We're going to turn things on and off, shuffle the sizes around, turn navigations on and off, all based on these Media Queries. If yours is working be very proud of yourself. I mean, when I first worked this out, I was like, "Holy smoke, look at me." Let's go and do a couple of things, one is, let's add some commenting, just so we kind of know what we're doing, and get rid of all your returns and stuff. I was going to use a bad word. Let's not use bad words, Dan, it's a family show. 

So above this Media Query, I'm going to add some comments. So remember, it's 'Command /' on a PC, on a Mac, sorry, 'Ctrl /' on a PC, gives you the commenting, and this is going to be my Tablet view. Now one thing you don't, or make sure you have, if you're like, "Still not working, why isn't it working?" make sure the syntax is all right. Sometimes my students type worth instead of width, it needs the colon there. The size, you need double brackets as well, can you see, curly braces there. They end there. This little H1 has his own little curly braces. You might just do this. All my returns might be just weird-ing you out. Kind of looks a little bit nicer like that. Still works, cool. 

So we're going to do that, we'll do the Mobile view next. Mobile. So if that's mobile, and that's tablet, what does that make this? This is considered the global view. Oh, what shortcut did I have? I think that one, anyway. This is called the Global view, and in our case, a.k.a, the Desktop view. We'll talk about mobile first versus desktop first in a little while, but everything in here is like the generic stuff, unless it happens to be this, or smaller. 768 is small, do this. Same thing for a mobile, let's cheat and be, it's color deficient-ness. And I'm going to say this, but instead of using - I'm going to get all my tabs nicely - instead of saying 768 we're going to use a really common mobile and portrait size. 400 is what I use, a lot of people use 360. 320, 380, it's hard, because mobile phones are all very different sizes. 

I use 400, in this video though we can't use 400, because of this problem. I can't actually drag my browser shorter, you know, skinny enough to be 400 pixels, it just won't let me anymore. It used to, used to go right in here, but the new Chrome won't. Yours might, and you might be fine, but for the moment we have to just kind of go, I was just going to fake it, and be 500 so that we can test here locally. 

The other thing is that if-- I'll show you in a video coming up in a sec, how to test on mobile devices, but for the moment just make it 500. Pick a new color, something contrasting everything else, what have we got? Let's put in black, there you go, that's very contrasty. Are you ready, ready to do our responsive awesomeness? It's already too small, I pretend you didn't see that. So green, green, green, green, orange, and black. So this is a really simple kind of setup of it. We're going to turn Div tags on and off, we're going to play with the size, but I hope you're proud of your cool little setup. 

Really simple, not terribly complicated on this side, and we're doing three Media Queries, it's up to you. When I'm lazy and I'm just making a site real quickly I'll just do these two. I'll say I don't care about tablet I'll just do global and mobile. That's bad though, that's bad practice, Dan. Good practice, if you're working in a really big, like say a larger company, as a Developer or Designer, you might be expected to do five or seven different sizes, for different-- kind of getting the most out of every single view, but if you're making a quick website for a friend who is paying you in high fives, he's just getting a mobile and a global, and I'm not doing anything else. 

One last thing before I go is, this, will really needs this. See this thing, it says Metaname Viewport, this comes in for us by default, when we're using that fancy exclamation mark, '!', and then Return. There's other ways of doing image shortcuts. You can do html5 and hit 'tab'. Does that work in this? No, html:5 That will do the same thing, and it gets the Viewport, it's slightly different. Not that I can see what, but sometimes this Viewport doesn't get put in by default, where you might be doing in somebody else's tutorial. I'm undoing so it all comes back, there we are. Just make sure this is in there. We need to just tell the browser what the initial view is. So that all this responsiveness will work. 

All right, that's it, I want to explain it just one more time. So the CSS flow goes, all right, everybody's an H1, actually let's do just one last little bit, just to really drive it home. So let's say I said H1 is, going to have a font of - font family, of let's say Korea, oh geez, Korean New. So what ends happening is, it gets, all right, starts here guys, goes, H1, you're a color of lime green, you're a font of Korea. Gets to here and says, hey--

So let's say we move the browser down to html5. That was pulling it up from here. I'll leave this in the Class because you're like, "Hey, doesn't say html5." Turn it off, turn it on again. Hey, that works. So we're saying, be green and Korea, unless the browser's change, and what happens is, it gets to here, says, the browser is less than 768. So it says, I contradict you so I'm going to override you, because I am more specific, and I'm further down the CSS, but gets to H1 and it says, all right, a font family, I am not-- like there's nothing contradicting in here, so it flows through it. So that's not being touched because there's nothing else in here that says font family. It gets down to here and says, "Hey, should I be a different font here?" It says, "No, I'm not going to tell you anything." 

So if it goes at the top, it will flow all the way through , if I had the font family down here, it will do something very different-- need to put my bracket down, squeeze them in there. So having it down here is very different, it's going to start, and this is only going to get triggered when it's at that size, let's have a look. So here, gets to here, and it hasn't been activated yet, because that trigger, that Media Query hasn't been activated. Same with here, but down here, can you see, you can do some really big changes. 

So if you want it to be global on everything, unless told otherwise, do it at this top chunk here. It doesn't need a Media Query. I just added that there to make it a little easier explained. All right, how are we doing? Media Queries, I'm happy, you're happy. If your syntax isn't working have a check of the completed files. They'll be in Exercise Files, just check for the name of this video. There'll be a corresponding bit of code in there that looks exactly like this. All right, on to the next video.