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
What is CSS
HTML, you can see, it's really easy to create HTML, right? Super easy to code yourself, super easy to create. CSS, not so much. So, CSS can be really simple or really complicated. We're going to do some really simple stuff, however, I do not recommend that you hand-code CSS, because if you forget one tiny, little thing in CSS, your whole page will break, it won't work at all. HTML is very forgiving. You saw I did HTML all in lowercase, it's tough for beginners, they like to do everything in uppercase. Everything in lowercase when we name stuff. Just trust me, lowercase. And then, CSS is very, very picky. So if you mess up HTML, let's say that you forget a caret, you forget an end caret, or you forget a forward slash, you forget something, the browser's like, "Yeah, it's okay. We've been doing this a long time. We know what you meant," and it displays your page properly. You forget one piece of CSS, it's like, "No , not going to work. I'm not showing nothing until you fix that." And the...
n you're going to sit there and rack your brain and be like, "What did I miss?" So, we're going to let Dreamweaver create all of our CSS for us, and I'm going to show you how to do that using the CSS Designer. We'll do it visually. So what is the difference? What is HTML? What is CSS? I like to use a house analogy. Okay. So, we had a house, we're going to build a house and we're going to use brick, and cement, and nails, and wood, and all that stuff, that's our foundation, right, for our house, required. That's our HTML, required for a web page. You have to have the foundation. It doesn't have to be pretty, but you have to have it. So then, the CSS would be like, the paint, and the curtains, and the carpet, and all the pretty stuff that we add to make everything look really good. So, if I have a curtain and I want to hang it in my house, so my curtain is my CSS, I can't just take the curtain and throw it at the window, right? It's not going to work. I need some sort of hardware. I need some sort of foundation for that curtain. And nail will suffice, that's all I need, just a little, tiny nail. So that little, tiny nail is my HTML, so I have to have a piece of HTML somewhere. And then, I can hang my curtain on my nail. So, I hang my CSS onto my HTML to make it look pretty, okay? CSS cannot exist on its own. It needs HTML. HTML can exist all by itself. It doesn't need to look pretty. It's just there. This is what CSS looks like. You can see that it's a little bit different, right? See , one of those things have popped up, then I'm like, "Quit popping up. Go away." It's talking to me about something. So this is a separate page. My HTML pages are saved as ".html," my CSS pages are saved as ".css." Again, it's just plain text, that's all it is. We've got all these curly brackets and we have... Yeah, those guys, see, brain's not working, these guys, colons and semicolons. That's the words I'm looking for. All right, so, all of those are really important to make sure that they're in the right place, okay? And I am going to have you guys look at this and we are going to talk about it and we're going to see what gets created, because I want you to understand it, okay? You don't have to write it yourself but you absolutely need to understand it and understand how it works. If you don't, you can't troubleshoot. Okay? So you have to be able to understand all this. I have a website I want to show you real quick. And it is... We can get rid of these guys. We don't need those anymore. I believe it's this one. This website is called CSS Zen Garden. It's been around forever. It was updated a while ago to reflect responsive design, which is what we're talking about. And what I want to show you about this is I'm just going to go through a couple pages real quick. So this is the first page. I just want you to take a look at the design, right? So we have this header, we have a sidebar, we have some content on the left side. We come down, it changes color. Great. So, on the right-hand side over here, I have a bunch of links. I'm going to click on one of these links. Completely different look to this website, right? So this one has like some boxes and this cool aesthetic background, and it's totally different. But what I want you to know about these websites is that the foundation, the HTML, is exactly the same. There is no difference. Okay? The only thing that makes these different is the CSS. Okay? Again, this site is designed to help you learn. Look.
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