Real time preview on phone and tablet

This lesson is exclusive to members

Course contents
SECTION: 2
Building our first mobile friendly web page 21:02
SECTION: 4
Creating the content for our website 41:11
SECTION: 5
Publishing 4:59
SECTION: 6
Conclusion 4:12
SECTION: 7
Cheat sheet & shortcuts 14:54

Questions

0
0
0
0
0
0
0

Course info

13 lessons / 2 hours

Overview

Do you want to earn more as a designer? Then stop telling everyone you’re ‘a designer, not a coder!’ It’s time you stopped missing out on a huge chunk of the income surrounding web design. If you’re a freelance, it’s time you stopped having to navigate the waters of finding and working with a coder. If you’re on staff, wouldn’t you like to be worth a lot more, and paid accordingly, because you bring more value to the company?

So before you start excusing yourself as a ‘visual’ kind of person, how about using Adobe Dreamweaver 2017 to learn, develop and deploy code within your web designs. You already know a lot about Dreamweaver, so I’d like to show you how to use the other half that you sometimes ignore because it’s hidden from view.

I’m Dan, a very experienced designer and teacher. I know design and code from years of work in the trenches as a freelance. I know how to get you to do it because I’ve spent the last few years teaching people just like you, with no previous knowledge, how to code.

You’ll learn by creating a portfolio website with the layout, graphics and code you need to sell your new skills. Or, finish your own website. To real world standards.

The new Dreamweaver 2017 has been specially redesigned to make code easier to see, easier to work with, and most importantly, easier to understand. And being an Adobe Certified Expert, I know what you can do with the new tools. I know exactly how to get you up to speed with enjoyable hands-on training that shows you how to use code and Dreamweaver 2017 the way they work best. Together.

If you’re a designer working on websites, it’s time you gained the other half of the skills it takes to get your designs online and working properly – without being at the mercy of someone else.

Upskill, take control, and create a lifelong foundation in understanding and creating code. You’ll not only be better as a designer; you’ll be far more valuable to your clients or employers.

It’s time you stopped avoiding half of your potential. It’s time you made yourself more in demand. It’s time you let me teach you code, from a designer’s perspective, with Dreamweaver 2017. Contact me now, and I’ll take you from zero to hero.

What are the requirements?

  • You'll need a copy of Dreamweaver CC 2017 or above. A free trial can be download from Adobe here.

  • No previous Dreamweaver or web design experience is necessary.

What am I going to get from this course?

  • 13 lectures 2 Hours 11 minutes of content!

  • You'll learn to build a portfolio website.

  • Download exercise files & cheat sheet.

  • Create mobile, tablet & desktop versions of the website.

  • Build a responsive navigation with burger menu.

  • How to get the most from your portfolio Images.

  • How to use beautiful web fonts in your designs.

  • How to publish your website.

  • How much to charge for your work.

  • How to get paid.

  • Getting up & running your first web job.

  • Forum support from me.

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Professional workflows and shortcuts.

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary.

  • NO: This course is NOT suited to people experienced in using HTML & CSS.

Course duration 2 hours + your own study.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

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.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025