Lessons
Class Introduction
02:51 2Dreamweaver Project Overview
09:33 3Designing Web Page Comps in Photoshop
14:33 4Save Images for Web
19:55 5Getting Started in Dreamweaver
05:47 6What is HTML
17:42 7What is CSS
05:27 8Prepare to Create a Web Page
07:00Add HTML5 Sections to a Web Page
16:06 10Add and Explain CSS
05:21 11The CSS Designer
19:40 12How to insert a CSS Reset
07:18 13Styling Web Page Elements with CSS
08:31 14Styling with Fonts
10:28 15Understanding Floats and Clearing
05:40 16Creating Navigation and Inserting Responsive Images
23:01 17Styling Navigation Links
14:07 18Add Social Media Buttons
10:29 19Media Queries in our Simple Page
13:29 20Creating a Bootstrap Webpage
10:16 21Creating a Bootstrap Navigation Bar
10:29 22How to add Custom CSS to the Bootstrap Framework
03:42 23How to Create a Bootstrap Header Section
15:24 24Create Custom Media Queries in the Bootstrap Framework
05:48 25How to Create and Edit an About Us and Main Section
27:51 26How to add a Jumbotron Model using Bootstrap
13:35Lesson Info
Add and Explain CSS
Let's talk about CSS because now we are going to add some CSS to this to make it look a little pretty. Okay? And what I want to do is I'm going to add some background colors, right. I want to add some background colors in the nav and in the header and in the main section. So I'm going to talk about the different types of CSS and I'm going to head over to the white board over here and write this stuff down for you guys. Okay? Okay. So we have types of CSS. We've been working with HTML tags. Right? So we have tag-based CSS. What does that mean? That means that I can redefine what an HTML tag looks like. Right? So a tag-based CSS would be a "p" or an h1. You saw me do an h1 earlier. That was a header. Some of these tags that we just used we have nav, right, we have main, we have footer. So you get the idea. So any existing HTML tag we can create a specific piece of CSS to change what it looks like. Okay? In addition to tag-based CSS, we also have these things called IDs. An ID starts with...
a pound symbol and you make up the name. So you make up the name and an ID is special. An ID carries a lot of weight. Okay, there's a lot of math that goes on in CSS but the good thing is you don't have to know that. Okay? My kids got the math genes. My dad got the math genes. Totally skipped me. I don't do math. I have to look at numbers and I don't do numbers. But different pieces of CSS carry a different weight. So some things will overwrite other things. So IDs are really heavy, okay? They carry a lot of weight. And one of the rules with an ID is that you can only use one per page. Or one time per page. So we use these sparingly. Okay? I don't use them a whole lot because I can only use them one time per page. Then I have these other things called classes. Classes start with a period and you make up the name. Now how do you make up the names for these things? Well, our HTML is semantic. Right? I'm going to write this up here because this is important. Just so you know, I broke my own rule in this thing, too, but semantic. So what does that mean? That means that the name is self-descriptive. Right? So for an h1, it's a large heading. For a nav it's a navigation bar. So it's semantic. It means something. The footer, it's the footer of the page. So when we create names for IDs and classes, we want to do the same thing. I don't want to name something green because next week I may decide that it's red, but it's called green. But now it's red. So see what I mean? So maybe instead of calling it that, what is that green thing? That green thing is actually call out text or highlight text, so I would call it .callout or .highlight. Something like that. So I'm going to give it names for its purpose so it's semantically correct. Okay? It's going to make it easier for you and it's going to make it easier if you share with other people or if other people look at your stuff. Trust me on this. If you ever get somebody else's stuff you want them to adhere to these rules, too, so everybody can figure everything else out. Okay? So we're going to create tags and IDs and classes. Right? So let's go ahead and get started with that, and then I've got more CSS stuff for you after that. So what I want to do is I'm going to start at the top of my page and I'm going to go down. So I want to take the nav section and I want to give it a background color so I can distinguish it from everybody else. Okay? The cool thing is, remember, I keep telling you guys that I don't want you to write CSS. And Dreamweaver sometimes is helpful, sometimes is not, if we get it right. So let's see if we can get Dreamweaver to help us.
Class Materials
Bonus Materials with Purchase
Ratings and Reviews
lovemydreams
Great Class! Her teaching style is easy to follow and I feel like how excited she is about teaching Dreamweaver. I've taken other classes and by far Melissa class is worth taking because she loves creating websites. She shows coding and explains it in a way that if you are new to it you will understand. Learning Dreamweaver with Melissa is fun and worth it! Thanks, Melissa and creativelive!
Kathleen
I love this, she's great BUT...she's going wayyyyyyy too fast. I'm watching it live and working from scratch along with her but I can not keep up and I'm not a beginner.
Linda Knapp
She did a good job at touching a variety of different parts of Dreamweaver and showing how to use its capabilities. She did go pretty fast and I had to do a lot of rewind and rewatching as I built the sample website along with her. I would have been frustrated if I was in the classroom. All in all though I found the class easy to watch and informative.
Student Work
Related Classes
Web Design