Hi, my name is Dan  and in this video we're gonna create  our structure for our site. We're gonna start adding the desktop view for our website. So actually gonna start making something feels like, uh,  for the few tutorials. Now we've uh, we've got to all of zero CSS  and nothing on our page, but let's, uh, let's go through  and start making some stuff now. So to do it, we are going to uh,  need to understand two things. There are two kinds of containers you need,  so you need at least one container for your site and,  and there are two versions of it.

So let's check out the design that we've made in Photoshop. So, um, looking at the site here,  there are two kinds of containers. There is this one, okay, that's right  around the outside here. And that goes right to the edges of the page. I want that to expand the contract right to the edges. And there's also this 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's  where that one runs to. Okay? So there's kind of a bit of structure in 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. Okay?

So we're gonna need a bit of both. Now, some websites you can see in my one,  I've got this navigation, which is got a fluid container  that I want to go to the edges, but it's also got this  internal container, so that's great. So it's gonna have a fluid container  and inside of that it's gonna have a regular container. Then the same for here,  there's gonna be a fluid container to start with. And then I want another nested container,  just a regular old container inside. And I'm gonna repeat that for all of them.

Another fluid, another normal container, another fluid,  another normal container all the way down. Okay? Some websites only need one fluid container  and one nested. So let's 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's 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 let's ignore the navigation at the moment  because the navigation is a little bit more work. Um, actually we're gonna use actually some cheap tricks  and use a bit of bootstrap navigation to make that work. So we're just gonna put in the structure  for these containers first  and we'll come back to navigation later on.

So we're gonna work on this first one here. So in Dreamweaver, okay, we have our body selected,  which is kind of everything that's on the page. Uh, I'm gonna go back to source code just  so we can see this side here. And then I'm gonna go to insert  and I'm gonna change it from forms to bootstrap components. Great. You can see here's my container  and there's my container fluid.

Okay? So that's the first one I  wanna add is the container fluid. So I'm gonna add that. Okay? 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 Diviv tag,  which starts all the way up here and it covers up the head  and all sorts of stuff it shouldn't do.

So I'm gonna go to edit Undo, okay? And I'm gonna just gonna be very careful  where I click, okay? So I'm gonna click on body. So I'm gonna click down here  and click on body and try the exact same thing. Awesome. So I worked that time.

So if you run into that problem, just go to edit, undo and  'cause what you wanna do is you want this div, okay, um,  to appear inside the body. Now a div tag is called a dividing tag  or it's just a way of dividing up space, okay? A division of space. So they call 'em div tags. Um, so, and it's called this one Container Fluid. Great.

So it runs right to the edges. Great. So that's our first big division or our first big box. Now what we wanna do is add a little bit of styling  to it just so we can identify what it is  and we don't wanna adjust the container fluid, um, uh,  class we could, but that's gonna be used repetitively on the  page and we want 'em all to be unique. So we're gonna come up with our own class to do that. Go to CSS Designer panel.

I wanna put it in my main css. Make sure you're on all, I am going  to not worry about media queries for the moment. We're gonna look at that later on. And so I'm gonna close that down. Um, just got a bit more space  and I'm going to pick a selector. Okay?

Click on plus  and to be a class, it starts with a full stop  and then we get to make our own, um, word for this. 'cause this is our own custom one. We wanna style this. We wanna add a bit of styling to it. I'm gonna call it band, okay? 'cause it's one of my little bands.

And I'm gonna put a little, uh, hyphen in  and I'm gonna call this one. That's my hero box. Okay? So looking at Photoshop, it's the hero boxes, my kind  of lead bit with my big statement in it. You can call it anything you like. Okay?

So I'll call mine band hyphen Hero. When you're naming your classes,  don't use anything but letters. Okay? You can use hyphens,  but don't use things like question marks or Eand  or hashtags, okay? And it has to start with a full stop. If you leave that off, you need to go  and add it to it, okay?

'cause that identifies  that it's a class and that's what we need. Okay? So we've got this thing called Band Hero over here. I'm gonna add that class. So I'm gonna click plus  hit.click band. You should see it in your little list there.

Click it and apply it. So you can see I've got this Diviv tag. It opens there, okay, there it opens. And then it closes here with a slash div  and it's got two classes applied to it,  the container fluid, okay? And that means that it's gonna 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 in my main CSS there he is. Band Hero is Open, coolly Braces,  the closed clear braces, but he doesn't do anything. I'm gonna go to File save all. It's a good habit to get into, okay? 'cause it saves, uh, the HTML, the CSS, the JavaScript,  everything that's being used at once.

So I'm gonna go back to Source Code. Great. So to style it, um, main CSS Band Hero. And down here you can see there's  no properties we can style. It's 'cause we've left a show set on. So it's showing you all the things  that we have already applied to it, which is nothing.

So I'm gonna turn that off so we can see the big long list  of things we can do, right? The first thing I wanna do with this band is  give it a background color. We're gonna put in the image later on. Okay? So remember in Photoshop we've got this big image in here. We'll do him later on in the images section.

So at the moment we'll just put in a big background color. Um, 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, color. I'm going to set the background color. I'm dragging this little circle to the left hand side there. And it's made a background color of gray. I'll replace that with an image later on. Now, um, 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 to,  because I, I wanna kind of see it as I'm building it. I've got two options. What you don't wanna do right at the  top here is one called height. Do not add a physical height. Okay? A physical height is good.

Um, but the problem with it is it's very specific. Okay? If I say B 200 pixels  and I add images, um, in it that are 300 pixels,  it's gonna freak out a bit. It's um, it's kind of contradicting itself. So when you are dealing with heights, a good idea is 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 at the moment is  that if I add a minimum height to this say of 200 pixels,  it doesn't work in Dreamweaver. Okay? It does actually work when it goes out  and works on every browser, but doesn't work in Dreamweaver. I feel like this is a bug  and your version that you are using might do it just fine. Okay? Um, but I'm gonna go file save all  and I'm gonna preview on a browser just to check it.

So I'm gonna go down here, gonna preview in,  I'm gonna preview in Chrome, okay? You might have different options down here. You might just have Safari or  you might have Internet Explorer. I'm gonna preview in Chrome  and you'll notice that voila,  it's got a minimum height of 200. So the nice thing about that is that if I add text to it  and it's lots of text, it will get bigger but no smaller. What I'm gonna do in this class is  I'm not gonna do minimum height.

I'm gonna delete it. I'm gonna do what's called padding. Okay? Padding I really like, okay, so  padding allows me to put, um,  the content's always gonna be in the middle. Okay? So I can put 100 at the top pixels,  100 at the bottom, okay?

And any content within this. So let me add just a little bit of text, okay? I'm using the source code view just  to add text in the middle of the div there. I'm gonna hit refresh if it needs to. And you can see there's a bit of text,  but there's a hundred in front of it  and a hundred, um, below it. The nice thing about that is  that the content is always gonna stay centered  and there's gonna be a bit of text there, uh, sorry, a bit  of padding above it and a bit of padding below it.

I quite like using padding rather than using minimum height. Now before I move on, there's two options  and they look like they do the same thing. Okay? If I've got, um,  so main CSS I'm gonna do it with brand hero. I've got, um, 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, um, usage. If I had no background color here,  you wouldn't notice a difference between the two  and that's what gets people confused. But padding, think of padding as on the inside  of the DIB tag, okay? And margin is on the outside. So if I put a hundred pixels on the outside  of the DIB tag, let's have a look. So I, I'm gonna see this one here, this turns disables.

The CSS property temporarily, I can turn it back on  so if essentially deleted it,  but I can easily turn it back on  by using these little crosses here. Okay? So, um, so it's full intents, purses, it's off. But watch this, if I do padding 100,  the texts will move down a hundred pixels still,  but you can see it's the outside of the Diviv tag. Okay? And you can see  how people get confused if I had no background color  and if I turn off him, if I had no background color,  it looks no different than if I had padding up here  or margin, okay?

But when there is a background color, it's very important  because I'll have a white space with margin  and a big gray space if it was padding. So I'm gonna go and turn off, um,  where we go up to the top here. I'm gonna go turn off, I'm gonna delete the margin  and I'm gonna re-enable the a hundred a hundred, okay. To do with the padding, right? So we're gonna go through now and add all the extra bands. So you can see I'm gonna need, uh,  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're gonna go through and add all the rest of them. Let's go do that in the next video.