How to add a Jumbotron Model using Bootstrap
Lesson 26 from: Create Websites with DreamweaverMelissa Piccone
How to add a Jumbotron Model using Bootstrap
Lesson 26 from: Create Websites with DreamweaverMelissa Piccone
Lesson Info
26. How to add a Jumbotron Model using Bootstrap
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
How to add a Jumbotron Model using Bootstrap
So I have the main part of everything designed. What I want to do is I'm going to add another jumbotron. And this is a jumbotron. It is. So I'm just going to go ahead and do this one. So we're going to wrap it up with this section. Our original design, we had our header, we had this section with all of our icons, and then we had a pink section and a white section and a tan section and the footer. So those other sections, the pink section, is this jumbotron. The next section, same jumbotron, different CSS. It's just white background. Next jumbotron, same jumbotron copied and pasted with a different color, with a tan background. And then the white one again, and then the footer. I don't think there's another white one. I think then it's just the footer. So I'm going to do this one jumbotron, and literally, you can just go in the code and copy and paste it. Or you can do it in the DOM. Just paste the same thing and just take… We're going to do… I'm breaking my rule. I'm going to call it .
pink because I'm not any cleverer than that. And I would just do a .tan one and a .white one, or .moreinformation or whatever purpose it is. So here I have my jumbotron. I'm going to get rid of this button because we're going to go ahead and install our own. I want the text. I'm going to go ahead and I'm going to leave the text in here, and I'm going to show you actually how to insert a button and stuff in here too since we're going to skip that other section. So I've got jumbotron. I'm going to go to CSS Designer, and I'm going to go ahead and make a new selector, and I'm going to call it .pink. And I'm going to come over here and I'm going to call it .pink. I'm going to apply it. And then over here in .pink… So I've got .pink and I'm going to come to the background color and I'm going to click on pink for my background color. So I've got a pink jumbotron. I can go ahead and I can add a cool title in here. I can select that. I could switch to Design View. I should be able to do that in Live View, it's just being fussy. Let's see. Grab it. Oh, it didn't stick. That might be why. Let's just go ahead and add the button. We want the button to go after this guy. I can insert a button from Bootstrap Components. If I come up here... Where's my buttons? There's buttons. So I click on Buttons, and I want a large button. So I'm just going to go ahead and click Large. And I want it to go after my paragraph, so I'm going to say After and it's going to put a large button in there. So now, I have all that stuff for the buttons, and I'm going to create button as a CSS, as a Selector, in my donut.CSS. So I'm going to click +.btn. And I'm going to go ahead and I'm going to change the background color. So the background color, this should be blue. And I'm going to change the text color. The font color should be tan. And I want everything in here to be centered. So this is pink. So I'm going to go into Pink and I'm going to say Text Center and now everything's centered inside of my jumbotron and it's looking pretty good. And I'm just going to cheat and I'm going to run out here and I'm going to look... Let's take a look at what we got in here. What was I doing? And this is how you work too. You constantly go back and forth to the design that you had in mind. Oh, that's all right. We don't need that. We don't need to fix all that stuff. So I had this pink area and I had the button down here, but because I'm going to skip that part, I wanted to show you how to add the button in there. The image that we are going to place in there, we can place our image in there the exact same way that we placed the images before. I would make a .floatleft and we can do all that fancy stuff in there. Let's see. What else do I want to show you? By the way, you can do a float right too. I know I've left the right side. I've totally ignored it, but you can do a .floatleft. Every time I create those floats, I create one for left and I create one for right just so I have them to call on whenever I need it. Let's create a Descendant Selector for this guy. I'm going to go back into Dreamweaver and I love my purple text but not so much inside of the pink box. So let's go ahead and get a little specific, and I'm going to go ahead and make a new Selector, and this is going to be .pink P. So if you are a paragraph inside of something called .pink, you should be a different color. Let's see. What is my brown color? We haven't used a brown color at all. Let's use that. I'm going to make this color #431a14. There we go. And now it's brown. And I could go ahead and change whatever I wanted to about that. So let's go ahead and see what this guy looks like. Looks pretty cool. You guys want to take a look and see what it looks like on the phone? Actually, you know what? This isn't centered. It's bugging me. Let me show you how to fix this real quick. If I can get this all the way over. See how it's off-center? It's no biggie. I think that's centered. And then we just save, and I think it's okay on all of them. And see, it just gets bigger as the screen gets smaller. It takes up more room. And then we can go into Chrome, resize. It still looks off-center. Actually, it's because my browser is off-center. That looks pretty good in there actually. Let's try again. Let's do…jump this way. There. That's better. So back in Dreamweaver, I'm going to go to my little world button. I'm going to click on my… I'm going to close up all these windows I have open for some reason. All right, click on my little QR Reader. And I clicked on that guy and... Come on. Come on. Come on. Come on. It's slow. There we go. And so that's what it looks like on the phone. So on my phone, everybody's in a single line, it looks pretty good, I got a button. If I turn it sideways, it still looks pretty good. And my menu works because I didn't mess it up because we do that automatically. So my little menu works. So just to show you, to create more jumbotrons in here... I can make that go away. I would come in to my Split View. I've got this jumbotron. So like I said, you can do this inside of the DOM. I got a pink jumbotron here. I can right-click and I can copy it. And then I can right-click and I could paste after. It's not a child. If it was a child, just so you guys know what this is, if it was a child, it would go inside of it. I don't want a child, I want it after. Insert After. But actually, that didn't work because it did not insert everything I wanted to. Okay, fine, so we'll do it the hard way. I can come into… I'm going to get rid of this. I don't need that. That's the stuff that I just put in there. Here's my jumbotron. But sometimes is easier if you select it. Oh, I selected the whole thing. So the good thing is now Dreamweaver selects the whole thing. So I can see the ending div. So I can grab that whole section. So from 100 to 110, I'm going to copy that into my clipboard. And then I want another one to go right after. And I'm going to paste. Don't you love it when it does that? Let's try that again. 100 to 109, right-click, copy, paste. So now, I have another jumbotron, but this jumbotron, I would just come into my CSS Designer and I'm going to… I can actually do it right in here. It doesn't exist, but I'm going to change this to tan. And when I do that, it brings this up. So I haven't showed you guys how to do this yet because sometimes it works and sometimes it doesn't. I don't want it to go into a media query, and I don't want it to go into navbar.css. I do want it to go into donuts.css. And if I hit Return... Yeah, see, sometimes this works. This thing is awkward. Did it work? Nope. So that's why I don't do it that way. So I'm going to do .tan. There it is. There it is. It did work. And then I can come into .tan and I can say Background Color, I'll make it the tan color. And then I would just go through and I would change the content in here. And again, if I wanted, I can keep on creating custom CSS for each section however I want. And then the footer, we would do the same thing in the footer that we did before. The one thing I did not show you how to do is make a link. So I'm just going to type in my email address, melissa@creative-training.com. Making links, adding images, all that stuff is pretty simple. So I've got that selected, and if I come down to my Properties panel... I don't even need to. Look, I got a little link button right there. Now, if I was just entering a link, I would enter the link. So if I was going to my website, I would do http:www.creative-training.com. But because this is an email link, I have to write in "mail to," M-A-I-L T-O:, and then my email address. And then it'll automatically open up. I have too many emails, sorry. There. Now, it'll automatically open up in an email. And then just like we styled the links earlier, we can style these links too. So we can create a regular link state, a visited link state, hover active focus, so we have different colors. And if you want different colored links in different sections, then you use your Descendant Selectors. So if the links inside of my pink are going to be different, I would put pink, space, a link to specify the link colors in there.
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