Lessons

Lesson Info

How to Create and Edit an About Us and Main Section

- [Melissa] All right. Let's tackle the next section. We have this About Us section. Okay? And I just want to restyle this. So what the heck is thing anyway? Let's take a look. It's a div in a row, in a section. Oh, in a section. We didn't talk about sections. Sections are another HTML5 tag. Right? So you've got main, aside, section, and article, which we haven't talked about. So you can name things sections and you can name things articles, and actually, we're going to do that with these guys. So those little guys in there, they're inside of our section. they're each going to be a separate article inside of that section. So, again, semantics, right? Okay. I'm going to create a new ID because I'm going to use an ID for this. I'm in my donuts.css. I do not want to be in my media query. So I'm going to...I don't know why it doesn't let me deselect. It's awkward in there. I'm going to just go ahead and create a new one, a new piece of CSS and I'm only going to have one About section so I'...

m just going to make it an ID. #About. Okay? And this About, I'm going to apply it to...how am I going to do that? I didn't make a note about that. I'm going to apply it to... Do I want it on the H2? Let's apply it. I'm going to apply it to the row. The section's too big. I'm going to apply it to this row. If that doesn't work, I can move it. Okay. So I'm going to do About. All right. And I'm going to go into that About and we're going to give it some style. So I want to change the color. I want, actually, the background to be purple, so I'm going to go to Color, Background, make that purple. Whoop. And it's purple and so I need to change the text color. I'm go change color, which is my text. I'm going to make it tan and I'm going to change...if we had the fonts and everything set, I would change it to make it a fancy font, but we're going to skip that part. Okay. Cool. So I have an About Us section, right? And this one is actually...I don't think I want it on here. I'm going to take it off of there. I think I want it on the H2. And maybe I'll put it here. I'm going to put it here. I'm going to put it on the div. So we've got the div in here, we'll put it here. All right. So what you're looking at now, because I forgot to tell myself where I actually put it. This is how you really work. Right? You go through and it's like "Oh, where am I going to put that? Oh, that didn't work. Oh, let's try this. Oh, let's see what's going on." Right? So now that it's on there, I need a little more spacing at the top. Right? So then I can come in and I can go ahead and figure out what's going on here. So I've got this big white space and, again, maybe I need a negative margin. Maybe there's some weird margin thing in here in Bootstrap that I need to overwrite, right? I don't know. Let's check it out. So I'm going to go to About and I'm going to go to Layout and I'm going to try Margin, and I'm going to do...hmm, let's see what happens when I slide it to the left. Wow, that worked. Pretty cool. I'm like "Okay, cool. So I can overwrite that." It looks like it's minus 50. I have minus 30 in the book, so I clearly put it some place else when I did it originally, but it's all good. Whatever works. Again, one of those things. Okay. I did it one way the other day, I'm doing it a different way today. Does it matter? No. As long as you get the job done and it works, right? There's no right or wrong way. I would like a little more space above the About between the...in the purple there. So let's go ahead and I'm going to give it a little bit of padding. I say padding zero but I say now, because I did it different, I need a little bit of padding. Yes, I do. Maybe we'll just do, I think five actually works fine. All right. So I've got five pixels of padding. I'm good. It's super quick. Let's test. Yes, please save. Yes. And there it is. About us and it looks good at all sizes. So we're good. We got that one down, right? All right. Let's take a look at the rest of our page. We have a bunch of stuff going on in here that we don't need. So I obviously...I'm going to close this up so we can see. I want all that...wow, I'm still on one. That's okay. But then under here, there's a whole bunch of stuff that I don't need or want, like this whole testimonial section. Do I want that? No. I'm just going to start deleting. I'm going to go...actually, I might leave that one in there because I can restyle that but then I've got this whole section down here. And I can do it in here, I can do it in the dom, wherever you're comfortable grabbing this stuff and deleting it. You can do it in the code. Whatever works, okay? Again, no right or wrong way. I'm going to get rid of that well. Again, a well like a Jumbotron, is just a place to hold stuff. It's just a convention of Bootstrap. Right? I need my footer, so I'm going to leave that in there and that looks pretty good. So the next thing that I want to tackle is this whole About Us section. And I have all these little circles, these little placeholders, and I want to replace them with something. I am going to replace them with something called glyphicons. Glyphicons is a built-in font, built in to Bootstrap, that I can call on. Okay? So just like I said I was using that font, Awesome Font, for our social media stuff, glyphicons...that's a whole separate thing. glyphicons is actually built-in. So we're going to use some glyphicons and...so it's all going to be CSS but there's no glyphicon donut sadly. So we're going to use an image instead, okay? And you'll be able to tell. "Oh, well I remember how she used images and that glyphicons thing was too complicated for me," so just use images. Or, "Oh, that glyphicons thing was awesome. I'm totally using that." Then use glyphicons. Or do a combination, which is what we're going to do now. Okay? So this is just an image and it's a placeholder, and remember that earlier thing that I did that was so cool? That point and shoot thing? I'm going to do it again. So if I go to my files, I've got donut.png because it has a transparent background and I point and shoot. Oh, it's the wrong donut. It's donut.gif. There it is. Okay. So it looks like an icon, right, because it's part of the logo or whatever, but I just made it as an image in Photoshop. Right? So real quick, I'm not going to change. I would come in here and change these guys all around, but I am not going to add that text. So let's start with this guy. There is a cheat sheet on Bootstrap. You can go to Glyphicons and you can just look it up, Glyphicons Cheat Sheet, and it'll show you a page with all of the glyphicons. So you don't have to guess, right, because they're all named weird things. I happen to have them written down here and I'm going to delete my image because I don't need that, but I need to go into my source code because I do want to be in there, because I want to be right above this guy. Sometimes getting in here can be a little tricky. Should probably be working in design view to make it not so tricky. There we go. Now I know where I am, right? So switching back and forth, sometimes it's not always obvious. If you guys are getting frustrated, just think, "Well, maybe I have to switch to design view." Or, "Maybe I have to..." Even I do that, right, because they've made so many updates and stuff to it, it's like "Oh, yeah. This doesn't work in live view. I have to be in design view to make it work." So I've got this guy here, and just to give myself some room, I'm going to do that. I've given myself some room and I want to insert a donut image. Oh, no, no. I already did the donut image. I'm sorry. I'm going to do coffee and I'm going to do a glyphicon, and it's going to be called "Tint." I happen to have an easy way to drop in a glyphicon because I have my Bootstrap components, Insert Menu. And I can come over here and I can say...where are you hiding? Glyphicons. It only gives me five but that's okay. I just pick one like hamburger. Okay. So it gave me a glyphicon. It did an H3. I don't actually want that, though, because I'm going to format it myself. So I'm going to take away this H3, you guys. Okay? I don't want an H3. There's a whole bunch of H3s going on in there because we want that one. Okay. This is one of those thing where I can't see what I'm doing, so I come in here and I force my HTML to make room. I can't see. All right, I can see now. Glyphicon. Glyphicon-menu-hamburger. All right, I don't know what all that is but I do know that it's not hamburger. I do know that I want it to say, this is going to sound weird, "Tint." I want it to be tint. So it's not a hamburger anymore. It's now nothing. Okay, where is it you bugger? Div, class, center. How come it's not showing up? - [Woman] Maybe it got hidden. - It's not hidden. - I'm seeing something... - That's all right. We're going to make some CSS. Let's see if we can make it pop up with our CSS. If not, we'll reinsert it. My span is there. Let's try it again. Let's just do it in here. There's no H3 in our way. I'm in the code. I'm just going to delete that, okay? So I just have...I have my cursor in the code. Let's see if we can make it play nice. It's mad because I yelled at it. There we go. Now it's there. You guys see it? So it's right there. Right? Seriously, it's the exact same code it was two seconds ago. It's just messing with me now. All right, so we have this. I'm going to change it from Hamburger. Oh, I know why. Because there's no menu. It's just glyphicon-tint. That might have been the problem. User error. Always user error. Okay, so we now have got tint. So it looks like a little coffee drip. There is no coffee cup in here, and so if you wanted to do a coffee cup...I'm not going to show you how to do it but there's a coffee cup in Font Awesome. Right? So I could replace this little piece of text with the Font Awesome text. It's the same thing. Instead of glyphicon, glyphicon-tint, it's Font Awesome-coffee cup or something. I don't know. It's very similar, okay, and you can figure out how to do it. It's actually pretty simple. Okay. So I have this going on but it doesn't look anything like the way I want it to look. Right? So what I'm going to do is I'm going to create some new CSS. I'm going to jump over into CSS designer and I'm going to go into our donuts, because this is our own custom CSS, and I'm going to create something new called main icons. And I'm going to have a whole bunch of them so it has to be a class. It cannot be an ID, right? So I'm going to go Selector and I'm going to call it .mainicons. And I'm going to go ahead and I'm going to add it. So I've got my span, glyphicon, glyphicon-tint. I'm going to say Add .mainicons. There it is. No, no, no. Not that one. .main...that one please. Thank you. Okay, cool. Whoops, didn't mean to add that. Stop that. It added a space in there on me... Okay, it didn't really. Nope, we're good. All right, we're good. So I've got my main icons. So what do I want my main icons to look like exactly? Well, I want the text to be white. Don't freak out because as soon as I do this it's going to disappear. Say bye. It's really there, it's just white. So let's give it a background color. So I'm going to go to Background and I'm going to change my background color to purple. Okay? So I've got a purple background and it's ugly and it's square and it's not looking the way I want, and I'm going to change the font size to 60 pixels. So I'm going to come in here under text and I'm going to say, Font Size. Where am I? Okay. I'll just type it in. Stop it. 60px. There, now it's nice and big. It's looking a little bit better. We need a little padding in there, so in my layout, I'm going to go padding and I'm going to do 40 pixels. Whoops. Did I do it? No. 40px. Okay. And actually, I want it to be 40 all the way around. So there's a little lock in there. You guys see that lock? I'll just type it in again and it should add it all the way around. 40px. Yay. Now I got 40 pixels. So now we need to make it round. All right? This is kind of cool. We're going to do border radius. So I'm going to scroll down here and add border radius. And again, this is one of those things. If I don't know what it is, I can just slide. That's cool but it only did one. So I have to turn on my lock and I know what it is. It's actually 50% to get a circle. And I have a circle. How cool is that? Okay. So for the sake of time, I'm going to skip the rest. We're just going to pretend that they're done, okay? And I want to see what this looks like, so we're going to save. We're going to jump out to Chrome. I'm going to hit Save. Yes. There it is. Okay? So the other ones, I would just do the same thing with the others. I would just go through that exact same process. I would insert...I would just insert the menu over and over and over and then I would go in and I would rechange the name. So I've got cutlery, map marker, gift, and sunglasses. Right? Those are the ones that I was using. Again, you can go to Bootstrap and you can get a little cheat sheet and see what's happening and going on in there, okay? I'm going to take some...I'm going to take some text. There's this thing that happens. I wish it was built-in. This is another thing I need to go tell those guys, the developers. Actually, this one doesn't matter too much but this one will. I wish this was built-in. Unfortunately, it's not. These don't line up, so if you don't have the same amount of text in each one, you're like, "Well this is really cool and this is really easy," and then all of a sudden, you start changing your text and it doesn't match the template and you're like, "Well, this really sucks." Right? "How do you fix that?" Right? And it's very frustrating. So let me show you again in a browser because I can't get it to show up in here. It's too small. Okay. So if we go out to the browser...so it actually still looks okay here. Watch, it's not going to do it for me because we don't have two. What happens is they start wrapping weird. Of course, it's not showing up in here but it'll start wrapping weird. So while this line will be nice, it'll be like then there's only two and then there's a big hole and then it doesn't work and then you're like, "Oh, this isn't working for me." So I'm going to show you how to fix that, okay? And, plus, I forgot this by default, when we get smaller, goes to one right away. We're going to fix that so it goes to two. Okay. So let's do that part first and then we will fix it. So let's go back into Dreamweaver and I want to be on...I want the small screen, so I'm going to start there. Extra small is going to be one. Small is going to be two. Medium is going to be two. Large is going to be three. This is mobile first. We start with the smallest one we want to change, which is small. Okay? So I'm in the small media query. It's two. I'm going to come in here to the container part that I can change, right? And that...why is it...? Let me go to the top one here. There we go. So right here, it's set to large four. This is just like when I was explaining, okay, in the Photoshop thing, right? So large, each one spans four columns at large. So you have three across. When we get to small, it spans 12. Okay? All of them. That one is controlling the extra small, the small, and the medium. So I'm going to fix it. I don't want it to span 12 at small. I want it to span six. So I'm going to make it span six. I'm going to make the next one span six. I can't see my controls. Okay. Just to give myself a little more room, let's get rid of this. Let's go into live view only. Okay, so span six. Span six. Span six. Six. And...oh see. Now it's doing it. Now it's funky. What's happening? Okay. So then I go up to the next one. And it's funky. It's not behaving but that's okay because I'm going to show you how to fix it. But I only had to do that one, right? Because now at the medium, it's doing what I wanted it to do. Right? So extra small, single, small, double, medium, double, large, which I can't get over there, it's fine. So I'm going to go back in here. Actually, we don't need this anymore. We're just going to leave that shut. And let's go to Chrome and let's take a look. Okay. See? Now you're like, "But that was so cool and that was all so easy." And now you're like, "Oh, my God, now I don't know what to do." But I'm going to show you what to do, okay? What we're going to do is we're going to add a div. So earlier, we talked about things that are in line and things that are block-level items. Right? A div, a containing box, is a block level item. It's going to take up the entire space that it is within. Yeah? So this set of blocks in here is inside of a thing. That's not helpful is it? It's inside of a row, okay? So it's inside of a row. So what we're going to do is after each section, we're going to insert a div and it's going to make a separation. So that div is going to make sure that these guys don't...it can't overlap it, so it's going to keep them lined up. It's just going to be an empty div. There's not going to be anything in it. We don't need anything in it. We just need that empty div to hold things together. This is what's called a hack. Been doing this since the dawn of web design, right? We used to design web pages in tables. Not really what tables were meant for but you know what? It worked and that's what we did. And so, you know, just because CSS is there and it's great and it works doesn't mean you don't still have to hack stuff together sometimes. So we're going to hack this together and I need to do it two ways. I need to do it one with the three and one with the two, because it messes up both ways, right? So for the three, I have to put a div after the third one. This is why I was going to change the names. So just to change the names so I know where I am, this is going to be donuts, coffee, menu. Okay. And then I've got...so actually I need to know what this one is, too. This is coffee. Coffee. You guys can tell how wonderful I type. Okay. Coffee. Menu. Locations. Rewards. And swag. I need one...one, two, three. One, two. One, two. That's all I need. I think I don't need the other ones. Okay, cool. Okay, so inside of my dom, I have my row. You can see my row and you can see all my divs, right? Well, technically, we've got divs upon divs upon divs upon divs. There's so many divs in here, right? And remember, HTML5 is just like a div. It just has a better name. So why don't I just rename these? I'm going to rename these articles, right? Just so I can distinguish between everything. So I just double-clicked on that div and I'm going to call it article because it's an article. It makes more sense to me that way, right, and it's semantically correct. So I'm just going to rename all these articles just so I'm not fighting with so many divs. An article and a div behave the same way. So does it matter if I change the name? No. Okay? So inside each article, I have an image or, in these cases, a glyphicon, an H3, and a paragraph, right? So the first article is the donut. The second article is coffee. The third article is menu. I know for the three...I want to fix the three, right? So I'm going to come in here to Article, I'm going to right-click, and I can insert in stuff inside of the dom, too. Right? So I'm just showing you guys different ways of doing things. Just like Photoshop, five different ways to do the same thing. Okay? So in here, I'm going to insert after. So after my article, I want a div and it automatically creates it. Okay, cool. That's all I wanted. I don't think I want to do anything to it, right? I think I'm just going to leave it alone. I'm going to call some...I am going to...I'm not placing content in the div. I'm calling on Bootstrap CSS to style the div. Okay? So I'm going to do this thing called clearfix which is...see, it's right there. Okay? This is for mobile stuff. So I've got my clearfix. I'm going to do a space, and I'm going to add another one. And the other one, this is for large, right, because I've got the three right now. So I'm doing large. I'm going to say Visible, because I want it visible in the large block. So it's basically saying behave like a block-level item on a large screen and be visible, even though there's nothing in it. A div doesn't have any styling of its own. It doesn't appear as anything unless you put something in it. It's just a container, okay? So that's done for three. I don't need one after because I don't have a third row. I only have two rows so I only need one for the big one. Right? But I need two for the smaller one because I have two rows. So two rows, it happens after coffee, which is this guy here, so I'm going to say insert after and it gives me a div. I'm going to do the same clearfix. Okay. And I'm going to do the same thing only this is for medium screens and small screens. It's for both, actually. So I'm going to do visible. Let's get it all in there. Visible-small-block visible-medium-block. I'm going to copy and paste this because I need to do it again after the menu one, which is this one. Right? So two more down. Close that up so it's not weird and then...so I got two div, two div, insert after, paste, awesome. Files, Chrome, Save, Preview. It's staying. Oh, I forgot to take the text out. I inserted the div and it's got...but you can see how it works now, right? Because it's in there. We'll go take the text out and then as we go smaller, look, they're all wrapping correctly now. So that fixed it, okay? Is this an easy fix? No. I wracked my brain trying to figure out how to do this. You do butt your heads up against stuff, where you're like, "How do I fix this?" Okay? So I know I'm making it look easy but if you get frustrated, that's part of doing this, right? It just is. It's just how it works. Okay. So I left that text in there somewhere but now you know how to do it, I guess is the whole point out of that. Right? How do you learn how to do it? You watch my class and I teach you how to do it. Okay, cool. I don't know where that text is. I'm not going to worry about it. We know that we need to take it out. I would go in there and take it out.