4.56 out of 5
4.56
330 reviews on Udemy

Responsive Design HTML CSS Web design – Dreamweaver CC

Learn HTML5 & CSS3 web design skills. Build beautiful responsive design websites in Dreamweaver CC
Instructor:
Daniel Walter Scott
34 students enrolled
English [Auto-generated]
39 lectures 3+ hours of well-structured content!
You'll learn to build a responsive portfolio website from scratch.
Learn how to take a design from Illustrator & create a professional website.
How to use templates in Dreamweaver.
Create mobile, tablet & desktop versions of the website.
Build our own custom responsive navigation with burger menu.
Introduction to JavaScript & jQuery.
How to publish your website to the internet.
Ways to preview your designs straight to your mobile device.
How to get the most from your portfolio Images.
How to use beautiful web fonts in your designs.
You will get the finished files so you never fall behind.
Downloadable exercise files & cheat sheet.
Forum support from me and the rest of the BYOL crew.
All the techniques used by professional website designers.

Hi there, my name is Dan and together we’re going to build a portfolio website using Adobe Dreamweaver.

We’ll use Dreamweaver’s handy templating tools to make updates to our site super easy. We’ll create our very own mobile 『burger menu』 from scratch learning some basic JavaScript & jQuery.

I am an Adobe Certified Instructor and better yet I work closely with Adobe themselves to develop their own online help videos. I am also a Dreamweaver speaker at the huge Adobe Max conference in Las Vegas. I’m even inside your version of Dreamweaver right now… go on try it… open Dreamweaver > Go to Help > quick tutorial – I’m right there!

This course is for beginners. You do not need any previous knowledge in Dreamweaver or web design. We will use Dreamweaver ‘split’ view so we can use all the good visual tools as well as doing some simple amends down here in the code as well. 

In this series we will take this static design from either Illustrator or Photoshop and together, step by step, build everything in HTML5, CSS3 & JavaScript. We will make our own responsive design navigation. We will make adjustments so that everything looks great on different mobile devices. 

We will work with beautiful fonts & colours & even add Google Analytics to our site to get amazing information about exactly who visits your site. 

Now web design can sometimes be tricky so I am here to help – just message me if you get stuck. There are also exercise files so you can follow along. I even save a full copy of the website at the end of every video so that you can check yours again mine if you’re is not working quite right.

Let’s get excited about finally being able to build a website like a professional web designer. See you in class.

Overview

1
Introduction

Hi there, my name is Dan. And in this video series we're going to make this Responsive Portfolio Website using Dreamweaver. Now we're going to go through this course step by step learning everything we need to know to make a website.

2
What we'll be building & resources for this course

Hi, so what are we going to be making in this course and what are the resources? We're going to be taking a design that we've made in a previous completely different class. It was for Web & UI Design using Illustrator. You don't have to have done that course, it's quite handy if you do want to do the Design process as well as the Build. So you can go do that. But we’ll be taking that design and turning it into a fully Responsive Website using Dreamweaver.

Creating an HTML Website in Dreamweaver

1
Setting up Adobe Dreamweaver to create websites

Hi there, in this video we're going to set up our Work Space so that we can design amazing websites. Now this particular course is going to focus mainly on the Live view, or the kind of more design visual side of using Dreamweaver. You can totally do this course in the Code side if you prefer, but if you want to follow along exactly, we are going to do this in the Visual view.

2
How to create a new website in Dreamweaver

Hey there, in this video we are going to create our Site Definition. We need to do this for every single brand new site we're going to make in Dreamweaver. It's super easy. You can see out over here, I've got a folder, and inside, it's got an Images folder. It's all we need to do. Let's go and do that now.

3
How to create a new HTML page in Dreamweaver & put in your logo

In this tutorial we're going to create a brand new page. We're going to call it Index. We're going to bring in a Logo. We're going to link it to our Home Page. We're going to add some Alt Text. All the good stuff to start any good website. Let's go and do that now.

4
How best to preview your website in Adobe Dreamweaver

Hey there, we're at super extreme close-up version. So I can show you how to best preview your website using Dreamweaver and real time browser preview. Let's go check it out.

5
Moving tags around in Dreamweaver

In this video we're going to put Tags inside other Tags and introduce you to this DOM panel. Let's go and do that now.

Using CSS in Dreamweaver

1
How to create, edit & style your first CSS style sheet in using Dreamweaver

Hi there, in this tutorial we’re going to create our very first css sheet. You can see in there. We're actually going to Style our Header. Don't worry, it's not going to always stay this awful green. And we're going to add some Padding and some awesome css-ness. So get ready to make your very first css sheet.

2
How to change or adjust the CSS styles in your Dreamweaver website

Hey, awesome people. In this video we're going to transform this ugly green box and edit our css into this lovely gray box. So now we're going to go and adjust our css sheet.

3
How to centre your website in Dreamweaver using a container

Hey, in this video we're going to take our website, which currently stretches on to infinity, we are going to do this to it, where it's now all centered in and only has a maximum width of about 1200 pixels. And when I re-size it, it's always in the center. So let's go and do that now using Adobe Dreamweaver.

Responsive Websites

1
How to make a website change for mobile cell phones & tablets using Dreamweaver

Hey there, in this tutorial we're going to look at adjusting our site for the different tablet sizes, and mobile phone sizes. They're called Media Queries, you can kind of seem them up the top here. So our website's a desktop, the Header there is gray. And if I get down to Tablet size, hey presto, it's red, and I get down again to Mobile, and it's green. I know those are ugly colors, they're just there as place holders to test our Media Queries. Let's go and do that now in Dreamweaver.

2
How to test your Dreamweaver website on a mobile phone or tablet

Hi there, in this tutorial we're going to look at previewing our website from Dreamweaver directly on to our mobile phone. And it's going to appear here. See that green background, and then watch this. It's red background. The nice thing about it is we don't have to host it on a website, and we can just make adjustments on Dreamweaver directly, and it automatically updates on a mobile phone, it's really cool.

Mobile Navigation Menu

1
How to create a hamburger mobile drop down menu in Dreamweaver

In this video we're going to create an ugly looking desktop menu which we'll Style in the next video, but when it gets down to Tablet, and Mobile, it turns into a Nav Sandwich. So let's go and do that now in Dreamweaver.

2
Using Javascript jQuery to make a mobile dropdown burger menu in Dreamweaver

Hi there, in this video we're going to look at adding some JavaScript to take this ugly looking Desktop Menu, and when it switches to Mobile, then you clicked them all out, it shows you the ugly Desktop version. This little toggle clicked on and off. I realize the styling's not great and there's a few little problems with layout. We'll do that in the video after this one. What you really need to do is pay attention to the magic, clicking, showing thing. We're going to do it in JavaScript. So let's go and do that now.

3
Styling our hamburger menu & getting our ul menu to stack side by side

Hello, lovely Dreamweaver people. In this tutorial we're going to transform these ugly bullet point navigation buttons into these good looking red and green ones. Ignore the font, the fonts were ugly. We'll do that in the following video. But let's do the buttons now.

4
How to add different fonts to a website in Dreamweaver

Hi there, in this video we're going to change this ugly Times New Roman font to this lovely Open Sans Condensed font. And we're also going to have to change the spelling of this. I've just noticed that. You've probably been in this whole course, going, "Wow, change it." I'll change it before the end of this course, I promise. So let's go and add fonts using Dreamweaver.

5
Fixing the style of the mobile burger drop down menu in Dreamweaver

So the first thing we're going to do is a Desktop, it looks kind of fine. At Tablet, needs some work, but it has some real problems down here at Mobile. The biggest one is that, you can see, there's not enough physical room to fit. Kind of okay at the 400, but you can see, when it gets close to here, ended up just trying to occupy the same space. So what I'm going to do is try and shrink this Logo.

Adding Content

1
Planning for our Dreamweaver template

Hi there, in this video we're going to talk about Templates. So we're not going to actually design the Template in this particular video, we're going to do it a little bit later on, but it's about this time that we really need to consider what is going to be part of the Template, and what is not

2
Add a background image that is outside our main container in Dreamweaver

In this video, we're going to add this background image. And it gets all stretchy, and has a specific height, and then gets a bit smaller when it gets down to Mobile. All right, let's go and do that in this video.

3
How to use the HTML5 main tag in Dreamweaver

Hi there, in this tutorial we're going to add this main HTML5 tag here. It's where most of the copy goes for the website. We're going to make it nice and big, we're going to give it a minimum height, and we're going to make it green, just so that you can see it. I don't like that green, it's not going to stay around. All right, let's get on and make it.

4
How to add the HTML5 footer tag to a website using Adobe Dreamweaver

Hi there, in this tutorial we're going to add our Footer. There's our Top, there's our nice little Footer. It's going to have two little Divs inside of it, to float. Our Social Icons to this side, we're going to get the Copyright to go to the right hand side. We're also going to add Links to all of these. And this one's going to be kind of cool. When you click it, it's going to open up your email account and send us an email. So let's go do that now in Dreamweaver.

Templates in Dreamweaver

1
How do I make a template in Adobe Dreamweaver

Hello, lovely Dreamweaver people, it's time to make a Template. In this video we're going to make this thing here. It looks exactly the same as the last video but now it's called a '.dwt', and we have this thing called an editable region. 

2
How to create new pages based on a Dreamweaver template

Hey there, in this tutorial we're going to create a new page based on our Template we've made, and when we go and make a change like this, look, it's going to update all the other pages, connected to the Template, and voilà, our Template awesomeness is complete. 

Adding Content 2

1
How to create a responsive hero box for our website in Dreamweaver

Hi there, in this video we're going to start our Responsive Hero Box. That's inside of our Template. You might be looking, and going, "I can only see two things." And yes, we only create two things in this one but there's a bit of underlined structure that we need to create, we need to create a Hero Content Box. And we're going to create some re-usable floating Classes. All sorts of other awesomeness. So, let's go and do that now.

2
Fix problems with div tags when you float left in Dreamweaver aka clearing the f

Hi there, this video is here to save the day. Now you've got a website where you've used Float, and it's applied to something and now the object underneath is trying to sneak underneath it, and generally just behave badly. So we're going to fix this using something called 'Clearing the Float'. And it will magically push the H1 down, like this. Awesome! Let's go and learn how to do that now in Dreamweaver.

3
How to add and change the styling of a horizontal rule HR in Dreamweaver

Hi there, in this tutorial we're going to make this white line. It's got a horizontal rule, it's not hard, but there are some default styling that we want to go and change afterwards. So let's go do that now in Dreamweaver.

4
How to create a button in Adobe Dreamweaver CC

Hi there, in this tutorial we're going to make this Red Button. We're going to do cool things where we borrow existing CSS from other Classes and we re-use some Classes, get more fancy. All right, let's go and do that now.

Responsive Content

1
Change fonts & spacing of a website for Tablet & Mobile sizes using Dreamweaver

In this video, we want to take our Desktop view, which we've got here, but when it gets down to Tablet we're going to adjust this Hero Content here. So we're going to play with the Padding, change the Font size down on Mobile, even more. We'll change the Font size even smaller, adjust the Line Height, and we'll make everything centered. 

2
How to turn off parts of a website in different views like mobile or desktop

In this video we're going to disable this Ruler here when it gets down to Mobile because that's what I've done in my design, so let's go and do that.

3
How to create a responsive image grid in Dreamweaver

Hi there, in this tutorial we're going to take our design from Illustrator here where we've got 3 columns, about 6 images, and this one's only got 2 columns, when it gets down to Tablet, and then down to Mobile, it's got 1 column and we turn a couple of the Images off. So 6, down to only 4 of them. It will end up looking something like this.

4
How to make your images responsive in Dreamweaver to match the page size

Hi there, in this tutorial we're going to take our empty Div Tags and fill them with Responsive Images. Hey presto, like this. The cool thing about them is that they re-size as well. Responsiveness. Let's go and do that now in Dreamweaver.

5
How to make different columns for desktop, tablet & mobile websites, Dreamweaver

Hi there, in this tutorial we're going to take our Desktop view which just has 3 columns, and when we get it down to 2 columns, when it gets down to Tablet, and then, when it gets down to Mobile, hey, just 1 column. Super easy to do, let's do it in this tutorial.

6
How to create a clearfix pseudo after class in Adobe Dreamweaver

Hello, and welcome to this scary title video. It's all about Clearfixes and Pseudo Classes. It sounds scary, it's not that hard. We are doing it, for what reason? It's because I want to add a little bit of Padding between this Box here, which is called. Image Group, this Div Tag, and my Footer, but I can't, because these guys are all Floated left and it causes problems when there is Boxes underneath Float, like this Footer here. 

Other Pages

1
How to create & link new pages in Dreamweaver using templates

Hi there, in this video we're going to go through and start building our second page which is our Portfolio page. And this will be indicative of how to create any new pages. We're going to go and change out the Heading here and these image chunk down the bottom. Let's go and do that now in Dreamweaver.

Hosting & Analytics

1
How to upload your website to the internet hosting via Dreamweaver

In this video we're going to sign up for our Host. In our case we're going to use Bluehost, because they're awesome, but you could sign up for any hosting, whichever you prefer, and then jump to the next video after this where we actually connect our FTP details to Dreamweaver, and upload our site. So, if you're looking to host, go to bluehost/track/byol.

2
How to add Google Analytics to your Dreamweaver website

In this video we're going to sign up for Google Analytics. Why? Because it gives you all of this information about who comes to your site, it's free, you can see, in my case, how many people have paid for courses on bringyourownlaptop.com in the last seven days, how many people are currently on the site, six of you, what times of the day they are, what countries they're from, all sorts of goodness. 

What Next

1
What next in the Dreamweaver course

Okay, so what to do next? You've built the site in Dreamweaver, so we've got a working website but you might not have done the design side, you might have skipped that, and just worked from my Illustrator file. So, Illustrator was done in a separate course, check out the link here. That's where we picked the colors, the images, and the fonts, and all those types of things. And then we built them in this course in Dreamweaver, so go do that.

2
Dreamweaver class exercise

All right, it is Class Exercise time. So, there are two options. The first one is to continue on with this course and build us a Contact Us and About Us page. So, put content in there, link it to the Home page, and then either upload it to our host, so I can see it, or test it locally and send me a screenshot. I'd like to see what you've done with it.

Faq Content 1
Faq Content 2
4.6
4.6 out of 5
330 Ratings

Detailed Rating

Stars 5
234
Stars 4
69
Stars 3
15
Stars 2
7
Stars 1
5
7ce8b393a8e10f54efe8f54baba73b33
30-Day Money-Back Guarantee

Includes

4 hours on-demand video
Full lifetime access
Access on mobile and TV
Certificate of Completion

Archive

Working hours

Monday 9:30 am - 6.00 pm
Tuesday 9:30 am - 6.00 pm
Wednesday 9:30 am - 6.00 pm
Thursday 9:30 am - 6.00 pm
Friday 9:30 am - 5.00 pm
Saturday Closed
Sunday Closed

Archive

Working hours

Monday 9:30 am - 6.00 pm
Tuesday 9:30 am - 6.00 pm
Wednesday 9:30 am - 6.00 pm
Thursday 9:30 am - 6.00 pm
Friday 9:30 am - 5.00 pm
Saturday Closed
Sunday Closed
略過工具列