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

Course contents
SECTION: 1
Overview 7:24
SECTION: 2
Understanding Dreamweaver & Bootstrap 17:03
SECTION: 3
Creating our first page 9:17
SECTION: 4
CSS & Bootstrap 46:16
SECTION: 5
Testing your website 6:16
SECTION: 6
Bootstrap Containers 18:40
SECTION: 7
Text in Dreamweaver 34:31
SECTION: 8
Creating and styling links 10:09
SECTION: 9
How to backup 4:44
SECTION: 10
Navigation bar 21:24
SECTION: 11
Advanced CSS 19:30
SECTION: 12
Mobile website 41:41
SECTION: 13
Uploading your website 17:00
SECTION: 14
New pages & general tidy up. 39:51
SECTION: 15
Embedding is awesome. 13:02
SECTION: 16
Extras 19:50
SECTION: 17
Finished 1:58

Questions

0
You are not following this thread
0
You are not following this thread
0
You are not following this thread
0
You are not following this thread

Course info

53 lessons / 5 hours

Overview

NOTE: this course uses Bootstrap 3. Dreamweaver has recently updated to Bootstrap version 4. You can change it back to 3 using the ‘New Document > Bootstrap > Preferences'. Please do this before starting the course.

Some versions of Dreamweaver will require you to download the specific Bootstrap version you want to use and link it within the site. You can download Bootstrap 3 here: http://getbootstrap.com/docs/3.3/

Hi - my name is Dan and I’ll be leading you through this course on how to Make money building mobile friendly websites using Dreamweaver.

I built this course for the visual person, the right brained person. We won't hide from code but we'll use all the visual tools that makes Dreamweaver so amazing.

These are the skills you’ll need to become a professional web designer. You’ll learn how to make responsive websites in Dreamweaver as well as learning what to charge and how to manage a website project.

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. During the course we’ll create a website for a mock creative agency - creating mobile and desktop versions. See our example here:

I’m a Dreamweaver Certified Instructor and an Adobe Certified Web Specialist.

With exercise files you can download and work along with me. At the end of each video I have a downloadable version of where we are in the process so you can compare your project with mine making it easy to see where you might have a problem.

I’ll be showing you how to work with Dreamweaver to easily create HTML & CSS websites. How to create mobile and tablet versions of your design and how to test your website on your phone.

I’ll be teaching you how to create navigation bars, how to work with responsive images and favicons.

We’ll work with Dreamweaver’s new Bootstrap integration to easily add carousels, tabbed menu’s and accordions. Even easier you’ll learn to impress clients by embedding videos, calendars, maps, event ticketing & social sharing options. 
 
 Know that I’ll be around to help - if you get lost you can message in the forum and together we’ll get you back on track.

Now it’s time to upgrade your skills, get that better job and impress your clients.

What are the requirements?

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

  • No previous Dreamweaver or web design experience is necessary.

  • If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.

What am I going to get from this course?

  • 60 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

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

  • Firm understanding of responsive web design.

  • 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. For people who prefer not to work in code. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary. People with knowledge of previous versions of Dreamweaver CC 2014 and below will also get great value from this course as the software has changed so much.

  • NO: This course is NOT suited to people experienced in using HTML & CSS. If you prefer to work in code only then this course isn’t right for you.

Course duration 5.5 hours + your own study.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief 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, welcome to this video. And what we're gonna do now is create our own  custom CSS sheet. Now, um, when we installed Bootstrap a little earlier,  it made this style sheet, okay,  this CSS sheet called Bootstrap css. Now, his job here is to style all the pre-made things  that Bootstrap do for us. Say it's the nav bar, there's a styling in here,  and this big long list here that styles the nav bar,  gives it its color, what fonts to use,  what font sizes, all pre-made for you. Now, what we wanna do now is go  and say, override some of that bootstrap stuff,  or just create our own styles.

Now we don't wanna be editing the Bootstrap css. Why? Because it becomes a big mess, okay? Um, and Dream Mover doesn't let you by. Um, default you can make it writeable,  but it's best to leave it alone. The case, um, it keeps your CSS separate  so you know what's been overwritten.

Yeah. And you just kind of like override the styles  and it becomes a not a lot cleaner having your own style  sheet rather than going in through  and adding this really large version. Okay? So to create your own custom CSS sheet,  and we're gonna move to our CSS designer panel,  and if yours is stuck to current, go to all,  okay, that'll look a little nicer. Mine one's being reset. Um, I'm gonna drag mine around a little bit just  so you can see the bits and pieces.

So there he is. There, there we are. Great. Okay, so the, you are there,  we've only got our bootstrap CSS. Um, so what we need to do is see this little plus button  here, we're gonna create a new CSS style. Um, what are we're gonna call it?

You can call it anything you like. We're gonna call ours main css. You don't have to write the dot CSS in there. You can if you want. Um,  it will add it to there for you though. So it type main CSS click.

Okay. And hey Presto, we have our own CSS sheet. Let's check it out. So let's jump to my desktop. Um, let's have a look. And there's one called Bootstrap website.

And under CSS there's the one that Bootstrap made. Okay? It's a lock file. And this is one we've got. Now, if we have a look at it up here in my app bar,  there's the bootstrap CSS. I'm gonna go to full code view, okay?

This is the big, um, unwieldy bootstrap one. Okay? But look at my CSS nice and pretty and empty. Okay? So what we're allowed to do now is go through  and override the bootstrap, create our own CSS  and our nice tidy little sheet. Okay?

So let's leave it for there,  or let's move into the next video.
Bring Your Own Laptop
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • Cookie policy
  • © Bring your Own Laptop Ltd 2026