Adding Bootstrap containers & creating our first custom CSS

Hi my name is Dan and in this video we are going to create our structure for our site. We are going to start adding the desktop view for our website. So we are actually going to start making something. It feels like after the few tutorials now, we have got to all of zero css and nothing on our page. But lets go through and start making some stuff now. So, to do it, we are going to need to understand two things. There are two kinds of containers you need. So you need at least one container for your site and then the two versions of it. So lets check out the design that we have made in Photoshop. Looking at this site here, there are two kinds of containers. There is this one, that’s right around the outside here and that goes right to the edges of the page. I want that to expand and contract right to the edges. And then also there’s one on the inside here. This is kind of a fixed width. Okay so if I turn my guides on real quick, you can see that is where that one runs to. So there’s kind of a bit of structure on the inside and then there’s this bit on the outside.

The one on the outside is called a fluid container and the one on the inside is called just a container. So we are going to need a bit of both. Now some websites, you can see on my one, I've got this navigations has got this fluid container which I want to go to the edges but its also got this internal container so that’s great. So its going to have a fluid container and then inside it that’s going to have a regular container. Then the same for here there’s going to be a fluid container to start with and then I want another nested container, just a regular old container, inside. And I'm going to repeat that for all of them. Another fluid, another normal container, another fluid, another normal container all the way down. Some websites only need one fluid container and one nested, so lets look at say, this is my new Zealand business. You can see there is one fluid one on the outside and there is a nice nested container on the inside. And you don’t need to keep repeating it because it is actually just one big fluid and one big container all the way to the bottom. Except for the footer here, the footer has another fluid and another container.

So it depends on your design you start off with. If you're following me, we are going to be building lots of fluids with little containers on the inside. Right, so lets ignore the navigation at the moment because the navigation is a little bit more work. Actually we are going to use some cheap tricks and we are going to use the BootStrap navigation to make that work. So we are just going to put in the structure for these containers first and then we will come back to navigation later on. So we are going to work on this first one here.

So, in Dreamweaver, we have our body selected, which is kind of everything, that’s on the page and I'm going to go back to source code just so we can see this side here. And I'm going to go to insert and I'm going to go from forms to BootStrap components. Great, so you can see there, are my container and my container fluid. So that’s the first one I want to add is my container fluid. So I'm going to add that, and that happens a little bit in Dreamweaver at the moment, it seems to be a bug. I've clicked on body but it’s actually applied the div tag, which starts all the way up here, and it covers up the head and all sorts of stuff it shouldn’t do. I'm going to go to edit, undo, and I'm just going to be very careful where I click. So I'm going to click on body, I'm going to click down here, click on body and try the exact same thing. Awesome, so it worked that time, so if you run into that problem, just go to edit, undo. Because what you want to do, is you want this div to appear inside the body, now a div tag is called a dividing tag or its just a way of diving up space. They call them div tags, and it’s called this one container fluid. So it runs right to the edges. So that’s our first big division, or our first big box.

Now what we are going to do is add a little bit of styling to it so we can identify what it is. And we don’t want to adjust the container fluid class, we could but that’s going to be used repetitively on the page and we want them all to be unique so we are going to come up with our own class. To do that, go to css designer panel, I want to put it in my main.css, make sure you're on all. I’m going to not worry about media queries for the moment; we are going to look at that later on. So I'm going to close that down, just so we have a bit more space. And I'm going to pick a selector, click on plus and to be a class, it starts with a full stop. And then we get to make our own word for this, because this is our own custom one, we want to style this one, we want to add a bit of styling to it, I'm going to call it band because its one of my little bands. I'm going to put a little hyphen in and I'm going to call this one, that’s my hero box. Okay, so looking at Photoshop, it’s the hero box, is my kinda lead bit with my big statement in it.

You can call it anything you like, so I'm going to call mine band-hero. When you are naming your classes, don’t use anything but letters. Okay, you can use hyphens but don’t use things like question marks or ampersands or hash tags. And it has to start with a full stop, if you leave it off, you need to go back and add it to it because that identifies it as a class and that’s what we need. Okay, so we’ve got this thing called band-hero. Over here I'm going to ad that class, I'm going to click plus, dot and, you should see it in your little list there. So, you can see I’ve got this div tag, it opens there, there it opens and then it closes here with the slash div. and its got too classes applied to it, the container fluid and that means its going to stretch to the edge, and we’ve got our band-hero, the thing that we’ve made. At the moment, the band-hero doesn’t do anything. You can see it in my main.css. There he is, band-hero, there’s the open curly brace, the closed curly braces, but he doesn’t do anything. I'm going to go to file, save all, it’s a good habit to get into because it saves the html, the css, the JavaScript, everything that’s being used at once.

Great, so to style it, main.css, and band-hero and down here, you can see there’s no properties we can style. That’s because we have left the show set on so it’s showing you all the things that we have already applied to it, which is nothing. So turn that off so we can see the long list of things we can do. The first thing I want to do with this band is give it a background colour, we are going to put in the image later on, because remember in Photoshop we’ve got this big image inhere, we will do him later on in the images section. So at the moment we will just put in a big background colour, so I've clicked, can you see here, this is actually a big, long list. These little icons on the top just jump through this list to make it a little bit easier for you. They’re not separate pages or anything, they’re actually just jumping up and down this list, it s a really big, long list. They’re all together but this thing here jumps to background, background colour, I'm going to set the background colour, I'm dragging this little circle to the left-hand side here, and its made a background colour of grey. Ill replace that with an image later on.

Now, the height, at the moment, if you’ve given it no height, it will expand and contract depending on what’s in it. But, the height for this one here, I want, because I kinda want to see it as I'm building it, I've got two options, what you don’t want to do, right at the top here, there is one called height. Do not add a physical height. A physical height is good but the problem with it, is that it’s very specific. If I say be 200 pixels and I add images in it that are 300 pixels, its going to freak out a bit, its kind of contradicting itself. So, when you are dealing with heights, a good idea to deal with minimum heights. You can say I want it to be a minimum of 200 so it doesn’t get too small, like it is at the moment, but can potentially get bigger. The only trouble with that t the moment, is if I add a height to this, say 200 pixels, it doesn’t work in Dreamweaver. It does actually work when it goes out, it works on every browser but it doesn’t work in Dreamweaver. I feel like this is a bug and your version that you're using, it might do it just fine. But, I'm going to go file, save all and I'm going to preview it in a browser just to check it. I'm going to preview and I'm going to preview it in chrome.

You might have different options down here, you might just have Safari, you might have Internet Explorer, and I’m going to preview in Chrome. And you will notice that, voila, it’s got a minimum height of 200. Now the nice thing about that is if I add text and its lots of text, it will get bigger but no smaller. What I'm going to do in this class is I'm not going to do minimum height; I'm going to delete it. I'm going to do what’s called padding, padding I really like. Padding allows me to put, the contents is always going to be in the middle, so I can put 100 at the top, pixels, 100 at the bottom. And any content within this, so let me add just a little bit of text, I'm using the source code view just to add text in the middle of the div there. I'm going to refresh if it needs to but you can see that there’s a bit of text but there’s a hundred in front of it and a hundred below it. The nice thing about that is that the content is always going to stay centred an there’s going to be a bit of padding above it and a bit of padding below it. I quite like using padding rather than suing minimum height.

Now before I move on, there are two options and they look like they do the same thing. If I've got, so main.css, I'm going to do brand-hero, I've got padding and margin and sometimes they do the exact same thing. They look like they do at least. So the margin and padding have similar boxes here and they have a kind of a similar but different usage. If I had no background colour, you wouldn’t notice the different between the two, and that’s what gets people confused. But padding, think of padding as on the inside of the div tag and margin is on the outside.

So if I out a hundred pixels on the outside of the div tag, lets have a look, see this one here, this one disables the css property temporarily, I can turn it back on. So I've essentially deleted it but I can easily turn it back on by using these little crosses here. For all intents and purposes its off but watch this, if I do padding one hundred, the text will move down one hundred pixels still but you can see it’s the outside of the div tag. And you can see how people get confused, if I had no background colour; it looks no different than if I had padding up here or margin. But when there is a background colour it is very important because I will have a white space with margin and a big grey space if it was padding. So I'm going to go and turn off, I'm going to the top here, I'm going to go turn off, I'm going to delete the margin and I'm going to re-enable, one hundred, hundred. Okay to do with the padding.

Alright, so we are going to go through now and add all the extra bands, so you can see I'm going to need, I've got my hero band done, I need this one for who we are, I need this one for services, portfolio and the footer. So we are going to go through and add all the rest of them lets go and do that in the next video.