Okay, welcome back. And up until now what we've been doing is we've just been living with the whole toggling between Dreamweaver and back and the browser and sliding things around mobile. And this one, and this one works okay for mobile, but it's not a mobile phone. Okay? It's not the same size. It's longer than it should be.
So what you need to do is actually preview in your actual devices and it's really easy with Dreamweaver Dream. We've got some sneaky tricks to do that. Okay? So, um, when I'm working, okay, this is how I typically work is I've got two screens, okay? I obviously can't for this tutorial 'cause you can only see one of them. But what I'll do is I'll have this set up on a, like a desktop up here, okay?
I've got a big nice Mac screen over here and then I have Dreamweaver down in this video, uh, sorry, this screen. And it means that when I'm editing in this, this adjusts and we see it happens at the same time, right? So if I make changes, um, you know, they instantly display in the browser, which is great. So that gives me my desktop one always there so I don't 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, okay? Um, I'm gonna make a full screen.
Um, so this thing down here, there's this little QR code reader, okay? Or 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's lemme grab my phone now. Okay, so I got my QR code reader here, okay? I'm gonna open it up and down here, bottom of Dreamweaver.
Okay? I'm gonna go, you click e click and get my QR code reader close to it. I've got a weird little angle on my, uh, desktop. Good work phone jumps out. Might ask you for your username and 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 gonna cut this out so you can't see the rest of it. Okay? Look at us. We have got it on our phone. Cool.
A so you just take a photo with the QR code reader. Um, you have to download a QR code reader free from the Apple Store or from Android, like my one. And then you just kind of sit this next to you. And so I'm gonna sit it down there and watch this as I make changes. So let's go to our styles css. Um, and what can we see on mobile?
Not a lot at the moment. Uh, so let me decide what can we see? I've got an image here, so I'm going to do what with a image. I'm gonna make it smaller. Okay? So I'm gonna give it a width.
So you, you, I'm gonna give this guy a width, um, of what? 100 pixels. Okay. And you can see he got smaller. If I make him 50 pixels, he's tiny. Um, uh, yeah, you get the idea.
10 pixels. Okay? So it means that while you're working and you are like, say you're doing something on a desktop view and you don't really realize it affects something in the tablet or mobile device. If you have them up around you while you're working, it just means as you're doing changes, you're like, oh, I didn't realize that. The ramifications of that. Okay?
And probably the best reason for having them up is that you'll impress the heck out of anybody walking past, okay? If you work from home, your flatmates or your wife will look at you and you will look like you're in minority report, right? Lots of devices all around, okay? And at work you will look like a hardcore coder with all sorts of things flying around. Okay? So, yep, that is, uh, real time, uh, browser preview and you can do it on your device as well.