Real time preview on phone and tablet

Okay, welcome back. And, up until now, what we've been doing is, we've just been living with the whole toggling between Dreamweaver, back into the browser, and sliding things around mobile, and this one. And this one works okay for mobile, but it's not a mobile phone. It's not the same size. It's longer than it should be, so, what you need to do is, actually preview it in your actual devices, and it's really easy with Dreamweaver. Dreamweaver has got some sneaky tricks to do that.

So, when I'm working, this is how I typically work. I've got two screens. I obviously can't for this tutorial, because you can only see one of them. But what I'll do is, I'll have this set up like a desktop up here. I've got a big nice Mac screen over here. And then I have Dreamweaver down, this video, sorry, this screen. That means that when I'm editing in this, this adjusts. We see that happens at the same time. So if I make changes, they instantly display on the browser, which is great. So that gives me my desktop one always there. So I'd only have to toggle back and forth.

Now, for the devices, say your tablet, and your mobile phone, what you can do is-- I'll show you down the bottom here. I'm going to make it full screen. See this thing down here. There's this little QR code reader, no, QR code. And what you need to do is, you need to jump to your phone, and use your QR code reader. So let's go-- Let me grab my phone now. So, I got my QR code reader here. I'm going to open it up. And down here, bottom of Dreamweaver, I'm going to go here, click, and get my QR code reader close to it. I'm going to wait till it angles on my desktop. Good work, phone! Jumps out.

Might ask you for your user name, and your password. It does. Can you see it while I'm typing it? You totally can. So you know it begins with 'T', but I'm going to cut this out so you can't see the rest of it. Okay! Look at us. We have got it on our phone. Cool ways. You just take a photo with a QR code reader. 

You have to download a QR code reader. They are free from Apple store, or from Android, like my one. And then, you just kind of set this next to you, so I'm going to set it down there, and watch this. As I make changes, so let's go to our 'styles.css'. And what can we see on mobile? Not a lot at the moment. So let me decide. What can we see? I got an image here. So I'm going to, do what with the image? I'm going to make it smaller. So I'm going to give it a width. I'm going to give this guy a ‘width’, of, what? 100 pixels '100px'. And you can see, it got smaller. If I make him 50 pixels '50px', he's tiny. Yeah, you get the idea, 10 pixels. 

So it means that while you're working, and you're like-- say you're doing something on your desktop view, you kind of realize, it affects something in the tablet, or the mobile device. If you have them up around you while you're working, it just means that as you're making changes, you realize the ramifications of that. And probably the best reason for having them up, is that you'll impress the heck out of anybody walking past. 

If you work from home, your flat mates, or your wife will look at you, and you will look like you're in Minority Report, lots of devices all around. And at work, you will look like a hard core coder, with all sorts of things flying around.

So, that is real time browser preview, and you can do it on your device as well.