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
Creating a Bootstrap Webpage
So just like I did earlier, I'm going to create a brand new root folder in my Finder. So I'm going to hide all this stuff up, I'm going to do this really quickly because you guys already know how to do this. So I'm going to with New Folder and I'm going to call it "bootstrap donuts." Okay? I'm totally cheating. I'm going to be like, "We need..." What do we need? I'm in the wrong thing. We need these images. So I'm going to drag and drop those images. I'm just copying our images folder. We need font-awesome. We're going to have to add that. We need... We don't need any of that. We will need this. So I'm going to bring that over, too. Okay, so I'm not going to worry about any of that right now. So I have bootstrap donuts. I'm going to jump into Dreamweaver. I've got all of my stuff ready to go. Come into Dreamweaver and I'm going to say Site. I need a new site, New Site, and I'm going to call it "bootstrap donuts." And I'm going to do Unnamed Site. Remember the most important part, I'm g...
oing to go ahead and navigate to my desktop. And on my desktop, I'm going to choose bootstrap donuts for my root folder. Choose Save. Okay, now, I've got a new site. I'm going to create a new page. Everything is about to change. CMD or CTRL+N for New, HTML. Framework, I want Bootstrap, actually. I don't want to create it from here. I lied. That would just create a blank one. We want a site template, right? Starter templates, we want a starter template. We want a bootstrap template and we're going to use this Bootstrap - Agency. So earlier I showed you in the Start screen you can see all the different ones. You can come in here and you can click through and find different ones that you like. We're going to do Bootstrap - Agency. I'm going to click Create. I am now going to save this file. I'm going to do File, Save As, and I'm going to save this as "index.html." And I'm going to save it right in that root folder that I created. And where's all my stuff? It should have... There we go. All right, I'm not going to worry about that. We're going to close that up for now. Look at all the stuff it just added to my site. That's what I was waiting to pop up. So just real quick, let's just kind of... So I created this CS... Actually, they created this CSS folder. I didn't create it, right? So we have a CSS folder so I'm actually going to take this social and I'm going to drop it in there. We added the font-awesome, they added the fonts. We added the images, we've got the index, and they added the JS. So to create a Bootstrap site, you get a whole bunch of this stuff that gets added and created for you. The other thing I want you to notice is up here, Source Code, Bootstrap, JQuery, Bootstrap. So we have access to all those files. You're not going to touch them. You're not going to mess with any of that stuff. Right? The bootstrap.css is 6,500 lines of code. You don't want to mess with that, right? And the JavaScript stuff, that's real programming. Well, I'm not doing real programming stuff. So we're just going to... We just know it makes it work, we're good, we're just going to ignore all that stuff. Since it created a CSS folder for me with Bootstrap, and look it's locked. It's like, "You can't touch me anyway even if you wanted to," because you don't want to. I'm going to take my social. I'm going to drop it in there so that we can use it. It's asking me to update the links. It's not actually linked to anything. Go for it, update nothing. You can see in here where we start to get complicated. Look at all the media queries. This is why I wanted you to understand media queries. See? There's a lot of them. What the heck is Bootstrap anyway? Super quick, I'm going to give you a quick overview. Does it matter if you completely understand it? No. You will, working with it. It doesn't matter if you don't totally grasp it right now. This is one of those things, the more you use it and work with it, the more it will start to make sense. So I made you some more little slides inside of Photoshop here. All right, so the way Bootstrap works, it's based on a grid. So just go with it. Don't get too caught up in it. The grid has 12 columns. Doesn't matter what size your screen is. All right? This is not technically correct. I'm just using this to kind of get in your brain. Twelve columns no matter what size screen you're on. If I'm on my phone, it's 12 columns this way, it's 12 columns this way, it's 12 columns this way, It doesn't matter. So the columns just get bigger or smaller. They resize with the screen. You don't get less columns. You always have 12 columns, always, always, always, always, always. So large screen is 12 columns, a medium screen is 12 columns, a small screen is 12 columns, a extra small screen is 12 columns. These, our boards, are sized to match the media queries that Bootstrap creates for you. If I turn these on, let's start with the large, I've labeled them in Bootstrap terms. Col-lg-4? What does that mean? That means that I want three sections across, and they will span four columns each. So this is the template that we're going to be using. So you can just think of these blocks, let's just start and make it nice and big so you can see, all right? So each one of those sections where we have a circle and we have some text, just think of that as each section. Each one of these spans four columns, four columns, four columns. Because they span four columns, they're going to wrap. So it's just going to keep wrapping. If I keep adding more, they're just going to keep wrapping underneath and underneath and underneath. Does that kind of make sense? So now I want to see, well, what it's going to look like on a medium screen, right? On a medium screen, I'm going to do only two across, because if I do three, they're going to be squished, right? So I have to change the CSS to say span six. Same number, three rows vertically now, each one spans six columns instead of four columns. Does that make sense? Okay. This is a really hard concept for me to get. So I try to break it down as simple as possible because I was, "I don't get this." Small, small and medium are very similar. Not a big difference between the two screen sizes. Small is also span six columns. So I'm keeping them two abreast, right? Once we get to extra small, by the way, their extra small is huge, it's 720 pixels or something crazy like that. Once we get to extra small, each column needs to span all... I mean each section needs to span all 12 columns. So that's how I get my single row. So it spans 4, then it spans 6, then it spans 12. So you guys just need to understand how it works, and it's really easy to do. Dreamweaver has a WYSIWYG interface to be able to do all of this. But understanding the concept, I know we didn't talk about it, Bootstrap is mobile first. I'm sure you guy shave heard that term and like, "What is mobile first anyway?" I didn't want to focus on that when we were doing ours. But what that means, so this Bootstrap code is 6500 lines of code. Right? The top part, the main part, so think about our website, we did the main part, we actually did it backwards. Mobile first means that the main part of the CSS will work on a phone. It's in the media queries that you make it for the bigger screens. We did the backwards. It's easier to do it backwards. But because it's designed that way, when I start to go and rearrange these, you'll see I'll start in the middle. I'm sorry, I'll start with extra small screen.
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