🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.

What we'll be building and resources

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

1
0
0
0
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

Hey there. In this video we're gonna look at  what we'll be creating throughout the site, as well  as all the resources that I've got for you  to help you along with this video series. So here's the website that we'll be building. It's a portfolio site for a creative, um, I'm happy for you  to use this exact same layout for yourself to switch out,  obviously the images and the logo,  and you're probably not gonna use a picture of me. Um, find your own picture  of your lovely self standing next to a pole. Um, and yeah, so it's a, it's a really just kind of easy  site to get build for  yourself when you're building a portfolio.

Now, the big things to note  before we start building this is that it's responsive  and it just means it adapts for tablet screens,  mobile screens, and obviously the desktop here. So, desktop here has some padding on the sides. Um, and there's an image grid in the bottom here  of three by three. Okay. What we want to do is take a look at when I resize it,  so I really resize it and it make it comes responsive. When it gets down to the size,  can you see it's actually stretching.

The images are stretching, the text is wrapping  and the navigation up here. And the top right is adjusting. Now, when it gets down to tablet, watch this. Okay? Can you see the change there between there? That's still my desktop view, kind of squished down  and then it switches to tablet.

Now, the big changes here are probably the most obvious one  is down here is that it stops stacking three  by three and it's two by two. They all kinda stack on top of each unit here. The other thing is check out this navigation menu here. It's stacked on top of each other and tablet,  but when it's a desktop, it's got a bit more room. So it's, you know, spread out this way. Now, when I get down even further to mobile,  check out my mobile view,  you can see the big change here is the navigation.

It turns into this hamburger menu or nav sandwich  or three stripe lines. I love those descriptions of this little icon here. Okay, so that's gonna be a big thing for us to get started  with, is to switch this to here. Okay, we're gonna use a little bit JavaScript. And down the bottom here, the changes are these images  stack on top of each other. Now one by one.

And what I've also done is,  can you see there's only four here? 1, 2, 3, 4. I've turned off a couple of them just  so it's not a really long page, just  that we can turn things on  and off for the different screens  so you get a sense of how it works. Now, that's the final thing there. We're gonna be building that together. What I'll do is there'll be a link up on the screen  here now, Bing.

Okay? Where you can go and check out the live site. It'll always be there and live,  and it'll just help you while you are building to go  and check my version to see how yours compare. 'cause you, yours might not be working as you, uh, you know,  as you thought, and you can go off and check my version. Um, another thing we'll be doing as part  of the course is at the end of every video,  what I'll do is I'll save the files to where 'em up to,  and it just means that, um, if you're working along  and you get a little bit lost, um, you can kind  of just check my version of it right at that time  that you're at, just to see,  and just to compare yours with mine, just to see,  uh, where you might have gone wrong. So that's the final version.

What we'll be building from  and how you'll typically work is you'll  work from a Photoshop comp. So this is what we'll be using as a reference. So we'll go back to this Photoshop  mockup just to check it out. Now, if you want to build your own mockup in Photoshop  before you start designing in Dreamweaver,  it's really common to do this. It's really hard to be creative in Dreamweaver. You're really just building the website based on  a mockup you've done somewhere.

And it's traditionally done in something like Photoshop. If you want to get more into kind of designing  and Photoshop, I've got a whole other course for that. So go check that one. It's designing, um,  websites using Photoshop. This file here will be part of the downloaded exercise files  that are part of this course. So there'll be a link up on the screen here,  and there'll also be a link somewhere on this page.

So you can go and download the exercise files. It'll include all the images we need,  all the finished files, all the production files,  and this PSD, so you can have it open  and work from, just so you can work  along perfectly with the course. The other resources that are part of this course are,  so the exercise files, which are going to be the htm, LCSS,  all the images that we use in this course, any  of the JavaScript that we use to do the menu,  those types of things. Also, the production files. Remember, at the end of every video, I'll save my, uh,  Dreamweaver file with all the code as it stands right there. So you can download that  and check in case you get a little lost.

Um, the other thing you can do if you're a teacher  or a trainer and you want to turn this into your own course,  I've got teacher resources. There'll be a link in the description here,  or there'll be a link on the page here, okay? And what that'll do is it'll take you to a page  where you can, where you can order workbooks. And what you do is you watch this course,  get your skills up, and then you can use that workbook  to work through the class. The other thing is I'd love for you to post your projects. Okay?

So you, you'll adjust it  for your own thing, even if it's not finished. And just where you've got to. I'd love to see a link or a screenshot of where you're at. Post it in the comments on this page. That'd be awesome. Another thing is that once you get to a point  and you're watching this course and you're thinking this is  a very good course, or this is a very terrible course,  I want you to jump out and give me review reviews at any  stage are really helpful for me to develop my course.

And on a lot of platforms, it's the,  it's the way I rank well and they trend. And I'd love a review. 'cause the better this course does, the more students I get  and the better I get paid for my efforts. So, jump out, gimme a review when you're ready. And the last thing I've done is  created a cheat sheet for you. So there's a PDF you can download and print off  and stick next to your computer with all the kind  of handy tips and tricks  and things while you're building a website in Dreamweaver.

There'll also be a video version of  that cheat sheet towards the end of this course,  or there'll be a link on the page here, okay? So that's what we'll be making. Those are the resources available. Let's go off lovely designer  and build your very first website using some scary code.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025