Responsive Design HTML CSS Web design – Dreamweaver CC

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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. 

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. 

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.

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.

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.

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.

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. 

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.

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.

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.

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.

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. 

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.

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.

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. 

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.

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.