Web design for visual people - not coders: Using Dreamweaver

We'll use the awesome new responsive bootstrap features in Dreamweaver CC 2015 to build your very first website.
4.6 (56 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
218 students enrolled
$19
$95
80% off
Take This Course
  • Lectures 61
  • Length 6 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2016 English

Course Description

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.

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.
  • 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?

  • Build responsive websites using Dreamweaver.
  • Create mobile friendly websites.
  • Understand HTML & CSS.
  • Create their own website.

What is the target audience?

  • 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.
  • 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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Overview
01:52

In this Dreamweaver tutorial your trainer Daniel Walter Scott will be introduction how to use Bootstrap

02:33

In this Dreamweaver tutorial we'll look at how to download the complete web design project.

Section 2: Understanding Dreamweaver & Bootstrap
03:20

In this Dreamweaver tutorial we'll look at exactly what is Adobe Dreamweaver

01:12

In this Dreamweaver tutorial we'll look at exactly what responsive web design is with examples

What is BootStrap?
Preview
01:58
09:04

In this Dreamweaver tutorial we'll look at bootstrap and how it can quicken up your workflow

01:28

In this Dreamweaver tutorial we'll look at bootstraps grid layout and how to use it to your advantage

Section 3: Creating our first page
04:50

In this Dreamweaver tutorial we'll look at how to create a new Bootstrap document for our project

04:04

In this Dreamweaver tutorial we'll look at how to add basic page meta details such as title, meta description and meta keywords

Section 4: CSS & Bootstrap
02:14

In this video you'll learn how to create you own CSS sheet. We'll use this sheet to amend the Bootstrap.CSS. We'll also use this sheet to create our own class styles. 

04:38

In this Dreamweaver tutorial we'll look at how to override bootstrap classes

10:33

In this Dreamweaver tutorial we'll look at how add containers for desktop views with Bootstrap 

02:59

In this Dreamweaver tutorial we'll look at how add containers using Dreamweaver's nest, wrap, before and after options

05:09

In this Dreamweaver tutorial we'll look at how add full width containers, also known as 'fluid' containers in our Bootstrap document

18:54

In this Dreamweaver tutorial we'll look at how add rows and columns to add structure to our bootstrap page

01:47

In this Dreamweaver tutorial we'll finish off our rows and columns to complete the basic frame of our page

Section 5: Testing your website
06:16

In this Dreamweaver tutorial we'll look at how to test our site, we'll try in dreamweaver and also in browsers 

Section 6: Bootstrap Containers
05:44

In this Dreamweaver tutorial we'll look at nesting containers in bootstrap for responsive purposes 

04:30

In this Dreamweaver tutorial we'll look at centring images and text  and also how to make images responsive 

08:24

In this Dreamweaver production video we'll look at completing nesting containers in our site, 

Section 7: Text in Dreamweaver
02:17

In this Dreamweaver tutorial we'll look at how to add text in Dreamweaver, editing it and styling it properly

07:21

In this Dreamweaver tutorial we'll look at the difference between tags and classes and when to use each one

02:21

In this Dreamweaver tutorial we'll look at how to edit CSS Rules, when and why you would want to do this

13:54

In this Dreamweaver tutorial we'll look at adding fonts using hosted fonts like adobe web edge fonts or google fonts

08:36

In this Dreamweaver production video we're going to implement all of our fonts found in the previous video 

Section 8: Creating and styling links
03:52

In this Dreamweaver tutorial we'll look at hyperlinks and how they're used to link to other pages and sites

04:12

In this Dreamweaver tutorial we'll look at styling hyperlinks and how pseudo-classes  are used

02:04

In this Dreamweaver tutorial we'll look at how to make an email link in dreamweaver so that people can send you emails from your site

Section 9: How to backup
04:44

In this Dreamweaver tutorial we'll look at how anyone can backup their site, simply and usefully

Section 10: Navigation bar
11:47

In this Dreamweaver tutorial we'll look at how to add a navigation bar that is fixed to the top and looks stunning on almost any site

08:15

In this Dreamweaver tutorial we'll look at how to add a navigation bar that is fixed to the top and looks stunning on almost any site

01:21

In this Dreamweaver tutorial we'll fix the issues we ran into in the last video, it's good to fixing things are big parts of web design and learning these skills are important

Section 11: Advanced CSS
03:45

In this Dreamweaver tutorial we'll look at when compound selectors can and should be used for efficiency purposes and when they can be removed.

03:55

In this Dreamweaver tutorial we'll look at background images and how they effect the SEO and usability of your page. We'll also look at their beneficial components.

07:33

In this Dreamweaver tutorial we'll look at absolute positioning and how it's best used in positioning of the web pages. 

04:15

In this Dreamweaver tutorial we'll be continuing with the previous video and completing a band in our design. 

Section 12: Mobile website
03:11

In this Dreamweaver tutorial we'll look at creating the mobile version of our website and making sure that the result keeps to our previous design. We'll be suing bootstrap and media queries to do so.

08:38

In this Dreamweaver tutorial we'll look at adjusting column widths depending on our screen size as to make sure that viewers have the best browsing experience possible

06:31

In this Dreamweaver tutorial we'll look at how CSS styles can change fonts at certain sizes, using Media Queries and bootstrap

06:17

In this Dreamweaver tutorial we'll look at how to apply column widths for different screen sizes using Bootstrap, we'll also look at how to change the structure at certain widths.

03:23

In this Dreamweaver tutorial we'll look at how to disable and enable components at different browser sizes.

13:38

In this Dreamweaver tutorial we'll look at how to make fonts smaller as we scale down our sizes of screen.

Section 13: Uploading your website
10:26

In this Dreamweaver tutorial we'll look at how to upload your dreamweaver site and have it hosted on your domain, we'll use GoDaddy

06:32

In this Dreamweaver tutorial we'll look at possible issues that come with uploading your site and using FTP, we'll look at 5 things to try if you have issues

Section 14: New pages & general tidy up.
14:39

In this Dreamweaver tutorial we'll go back over our site and tidy up any little things and make sure we get closer to our final design at all browser sizes

15:31

In this Dreamweaver tutorial we'll look at making new pages for our site. We'll recycle our last design and duplicate it to save ourselves time

09:40

In this Dreamweaver tutorial we'll look at touching up the contact us page to complete it in full. We'll look at editing our past pages styles to make this page unique

Section 15: Embedding is awesome.
03:36

In this Dreamweaver tutorial we'll look at embedding code from other sites and sources and taking advantage of other peoples work to increase our efficiency. In this video we'll use google maps

09:25

In this Dreamweaver tutorial we'll look at embedding youtube, addthis, Disqus and Eventbrite, these services are important for most sites that require media or payment. 

Section 16: Extras
02:07

In this Dreamweaver tutorial we'll look at Dreamweavers starter templates, whether you should use them and how to edit them if you do choose to use them

05:48

In this Dreamweaver tutorial we'll look at how to add Favicons, or favourite icons. It's important that you have a favicon because no site is truly complete without one! 

11:52

In this Dreamweaver tutorial we'll look at how to add bootstrap components, arguably one of the best parts of bootstrap, allowing you to add things to your site that would usually take hours to build

Section 17: Finished
01:57

In this Dreamweaver tutorial we'll look at what to do after completing this tutorial. Your web development careers has just begun and there's more to learn!

Section 18: What to charge for web design.
02:58

In this Dreamweaver tutorial we'll look at what to charge when doing a web design job in the freelance world. Advice given by an ex designer from the industry itself. We'll look at your skill level and then what to charge in your market

03:17

In this Dreamweaver tutorial we'll look at whether you should discount your web design or not. There are many clients that either won't be able to afford it or don't want to pay that much. We'll discuss what to do.

03:08

In this Dreamweaver tutorial we'll look at whether you should discount your web design or not. There are many clients that either won't be able to afford it or don't want to pay that much. We'll discuss what to do.

01:36

In this Dreamweaver tutorial we'll look at whether you're a designer  or a developer and what to do when you figure out which one you are. 

02:32

In this Dreamweaver tutorial we'll look at time budgeting and how to communicate with your client how long things will take or how long you'd like things to take

03:26

In this Dreamweaver tutorial we'll look at job creep and how to avoid it, how to deal with it (because it will happen).  

02:56

In this Dreamweaver tutorial we'll look at how to make sure you get paid. Sometimes there is clients that will try to get out of paying you, not on. This is how approach customers and weed out the bad ones

00:40

In this Dreamweaver tutorial we'll conclude our course

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Daniel Walter Scott, Media Designer, UX Designer, Adobe Certified Instructor

Sharing is who I am, and teaching is where I am at my best, because I've been on both sides of that equation, and getting to deliver useful training is my meaningful way to be a part of the creative community.

I've spent a long time watching others learn, and teach, to refine how I work with you to be efficient, useful and, most importantly, memorable. I want you to carry what I've shown you into a bright future.

I have a wife (a lovely Irish girl) and kids. I have lived and worked in many places (as Kiwis tend to do) – but most of my 14+ years of creating and teaching has had one overriding theme: bringing others along for the ride as we all try to change the world with our stories, our labours of love and our art.

I'm a certified Adobe instructor (ACI) in Ireland. I'm also an Adobe Certified Expert (ACE) and have completed the Adobe Certified Associate training (ACA). And I don't just do Adobe. Remember, media is a very broad term – digital blew out the borders, so we are all constantly learning.

I've been teaching for 14+ years. I come from being a media designer and content creator – so I understand exactly where you're at now. I've been there. I love this stuff. Print, digital publishing, web and video. I can see how it all connects. And I can see how we can share those connections.

I built Bring Your Own Laptop in Ireland, New Zealand, Australia & online. I have a great team working with me to keep BYOL at the top of Adobe and digital media training. I understand business, I have one – so I know how important it is to get it right and make it work for you.

Now my focus is on Udemy. It's my mission to bring you the best training for digital media on Udemy.

Daniel Walter Scott

Ready to start learning?
Take This Course