Hey, welcome back. In this video we're gonna look at creating these  boxes down the bottom here. We'll start with this thing here. This is generally called the hero box,  sometimes the jumbotron, uh, yeah. Okay, so it is, first thing we need to do is we need  to add a bit of structure to our main, um, part,  something called rows and columns. Now, what is a row and column?

Um, it's the kind of underlying structure  of pretty much all responsive  websites and we kind of need it. It's pretty easy though. Um, just like Excel. Think Excel. This thing here is one row, one column. This thing here is one row, uh, three columns, one row,  three columns, okay?

So that's what we need to know. So what we're gonna do is we're gonna jump down into our  Dreamweaver and get the rows and columns in. Great. So we're gonna jump to our source code  and we've got our header there he is there. Hello Heart four header. And then there's our main.

And we're gonna put some returns in between it  and some spacing in there. Okay? Um, and I'm gonna tab across  and what I wanna do is put in some rows. So we're gonna use this thing called a div tag. Now, diviv tags are divisions of space, okay? It's easy way to remember them.

And so what we need  to do is we need to create a div tag. So we're gonna say, uh,  we're gonna create something called a div class. And we're gonna give this a name  and we're gonna call this one row, okay? Then we're gonna close it off, okay? And then we're gonna close this diviv tag by angle brackets. So just like we did for our H ones.

Okay? So, um, we close it off with the angle brackets  and then the backslash and during wave fills the rest in. So I've got one row inside that row. I would like a column. Okay? So I'm gonna go exact same thing again.

So I'm gonna put in a div and a class. Great. I'm gonna call this one Cole. Okay? Close it off, open up the ending bit  backslash and it finishes it off. Okay?

And that is gonna be my column inside. Great. So that's the first one. Um,  let's make sure we do the other ones. So, and we're gonna use, uh,  I'm gonna show you some cool stuff. Now.

Um, instead of having the type di k class equals  and all that sort of stuff, it's pretty good with  how code help, um, hinting there to make it easier,  but they make it even easier using this thing  in the background called Emmett. And all it does is means, which is if I put in, um, dot, uh,  row, okay? So remember a.in front of it means it's,  um, something called a class. Okay? If there's a hash in front of it,  we learned earlier, it is an id. So we're gonna do, um, a class.

So you just put that in instead of having return. Return does nothing hit tab, remember from earlier on. And look, it just guesses because it's such a common thing. It knows that if you put in a class in a tab,  it just assumes you want a div tag. Okay? So div class row, awesome.

Return that. And we've got, um, 1, 2, 3. Okay? Now in this case, what we are gonna do is just  because of the layout that I wanna do, I want this  to be 1, 2, 3 here. So there's kind of like two rows of three columns. But what I'm gonna do is when it gets down to here, uh,  tablet, okay, if I had them, um, two separate rows,  it means that I'd have 1, 2, 3 here  and then I'd have 1, 2, 3, and they'd look pretty weird.

So what we are gonna do is actually we're gonna put in just  one row, okay? And we're gonna put in six columns  and it just means that, um, these collapse nicely. Okay? It means that if I get down to here, okay, um,  they all kind of like stack next to each other  and flow into the box 'cause they're all part  of the same row and they all kind  of flow up next to each other. You'll have to experiment with your design. If you've got four and four, you could definitely have, um,  you know, uh, two co two rows with four columns.

That would work. But  you'll just have to play around with it. I know when you have these multiples of three  and you want it to do this, okay? Otherwise this guy is in a separate row and gets pushed down  and you have this kind of weird break. So they're all gonna be the same gang, trust me. Okay?

And so how many columns I want, I want a tow three. So it's gonna take me forever, not it's forever. I could just go Cole and copy and paste it  and gets even cleverer though. So I'm gonna just type in Cole and  before I hit tab, I'm gonna hit in times  and I'm gonna put in six. So times is just the asterisk. Okay?

Now I hit tab. Hey, hey, cool, aim. Okay? And these are the tricks that make you go fast when you're  being a a front end web designer. Okay, let's it save. So we've got our rows, got one row, got with one column.

I've got another row with six columns  and that's gonna be my start. 'cause I want this, um, header to go in here,  this hero to go inside this one. So let's do that. So to create a hero box,  what we're gonna do is we're gonna put a  return in here, okay? So inside this column we're gonna make another one called  Hero, okay? And we're gonna hit tab, but in this case,  so just like we did for Row  and Cole, this one here, we're actually gonna go and style.

Now, at the moment, these just kind  of like our overall structure, though we don't,  we haven't styled them at all, but this guy Hero,  we go into style. So what we're gonna do is we're gonna go to our CSS styles. Okay? We're gonna do it for our heading, okay? Or global, um, more returns. Love my returns, okay?

And we're gonna say dot hero, okay? Remember, classes have our period in front of it, brackets,  and we are gonna do a couple of things. Let's do the background image. So background,  uh, hyen image. Great, uh, great. It's URL and you're dealing with background images, okay?

And click browse. Great. Now I'll go off and find. Now this is member looking at my files  that I've downloaded, okay? For the exercise files, you can use your own. Here's my hero background, kind of this background thing.

I've gotten Photoshop  and I've just kind of like turned the opacity down  so it looks kind of washed out. So I can put text at the top. Great. Uh, hit save. And remember, close it off at the end, semicolon just  to finish it and let's go and check it in the browser. And nothing happens.

Why? Because he's there, but  because he's got no substance, there's a background image,  but the background image doesn't hold it open. Okay? So what we need to do is give it some height. Now it's really uncommon to give it height. Why?

Because we want the content inside  of it to define the height. So when you're working, we just often add some padding, um,  to the top and bottom, just to kind of get things going. Okay? So padding, it's going to be 52 pixels  by zero pixels, okay? Four. Yep.

Zero pixels for the right  and 72 for the bottom,  and 72 for the left. Okay? Head save. And as I look at it,  and you'll see now it's just got some padding from the top  and the bottom and the left. And I've left it on the right just to zero. And that's why we can see the image now, okay?

But the image is not doing what we wanted it to do, right? So if I explain this out, okay,  it's just kind of, it's repeating. You can see the repeating in there. But we want this, we want it to be responsive basically. So what we're gonna do is we're gonna go into here  and we're gonna use this thing, we're gonna use this  background and we're gonna use background  and it's going to be size, okay? And we're gonna use this one called cover.

Okay? Cover's a really handy one. If I had save, check it out. It's the one that kind of stretches out to fit. Watch this. It gets smaller, it gets smaller, it gets smaller,  so it's gonna work on all sizes, okay?

It doesn't look perfect now  because it's all kind of squished in,  but as we add content, it's gonna look nice. So often background covers the one you want  to make the background, um, of boxes. Yeah, responsive. So next up is let's, uh,  put in our text and style it. Okay? Uh, so yeah, jump into Dreamweaver  and what we're gonna do is we're gonna move  to our source code and  inside our HA box, gonna put a return in.

And the first bit of text in there is this,  but this says I'm a and then digital designer. So obviously this is gonna change for  what you're gonna do, but let's play along. Let's get the idea of it. So normal body text,  we did headings before. Remember H ones they're important  and you should only really have a heading an H  one one per page. Okay?

So all the rest of the text often is a  PT tag called paragraph. Okay? So we're just going to use a P tag, okay? And let is, um, look, what was it? It was Im a I, okay? And they're gonna close off that PT tag  with a slash pre fills it in, save it,  let's check it in the browser, okay?

And look at the right one. And there's this little, okay,  so let's go and style that one. Now I could style the PT tag. The problem is if I style a PT tag, um,  and I'm gonna use this on lots of different pages. I'm kind of like, if I make it like it is in my mockup,  which is big and bold, every bit  of text's gonna be a big and bold. So what we're gonna do is make a little specific class  for this guy, okay?

And all you do in between here is we're gonna create a class  and we're gonna call this one class  and we're gonna call this one, we're gonna give it a name. I'm gonna call mine. Um, maybe subheading, subheading. Cool, I'm gonna copy that. So now I'm gonna go to define that class subheading. So my styles, I'm going to in my desktop view, okay,  I'm going to in here.

Now, what goes in first before a class? That's right, full stop for a period. Okay? And I'm gonna style it. Now what I wanna style it as,  first of all, I want the color. Remember color just by itself styles the font.

Now there's very few ods. One numbers that I remember and FFF is white. That's the only one I know. Okay? Uh, font weight, it's gonna be that nice big bold color. So you go, it's gonna be 800 pixels.

Nice. And what I might do is change the font size. And remember I'm just pulling these font sizes  from my Photoshop markup. And you can play around trial and error, okay? And I know that the margin at the bottom here needs  to be played around with, okay? Actually we might leave that till  afterwards so we can see all the fonts.

So we'll leave that off. Great. Let's check in the browser. Hey, we've got a font. It's not big and bold. Why not?

Okay? Angel and pixels. It's not pixels, okay? It is just the word 800. Hey, thank you subheading. Okay, let's put in the big pen underneath.

It's the sky head digital designer. So copy the text. Um, and yeah, let's put that in  and that's gonna be the most important word. Okay? So this is gonna be my H one instead of a P tag. Why you need at least one heading per page to tell Google  and the search engines what this page is about.

Okay? If I had the H one as I'm a Google would come  to this page and say, huh, okay, your,  your site's all about this thing called Im a okay,  but I want it to be about digital designer. So let's go in here and back to my source code. So, uh, underneath it,  we'll put it in H one oh H one, okay? And I'm gonna close it off. And what am I gonna call it?

It's digital designer. Okay? Then I'm gonna close it off  with my angle brackets slash okay, this is my H one. I'm not gonna use a class because y I'm gonna have this H  one is every page is gonna use the same title. Okay? So I'm gonna re I'm gonna use H  in here, I'm gonna do H one.

So that style, that H one and create braces. And okay, you'll kind of notice  that we didn't put a period in front of it or a hash. And there are just some things that are pre-made,  like P tags, H ones image tags. They don't head a tags. If they're pre-made in HTL,  we don't need to add anything to them. It's the stuff we make up on our own, okay?

The stuff that never existed before in life either has a  period in front of it or a hash. Okay? And so what we're gonna do is we're going  to give it a color, okay? And remember the one color, I know white, uh, font weight. This one's gonna be the thin one. So font weights, this is gonna be 300.

Don't put px. And let's put in a font size. Font size. And this one is a nice big healthy of 52 pixels. Let's save it. And let's have a look in the browser.

So there's a few things. There's some defaults going on. H ones have by default just come outta the box. Somebody decided long days ago that they have a really big,  um, gap in front of them  and Ptag has a little gap underneath together  they have giant lidding. Okay? So we're gonna use, uh, margins  of the bottom and minus them.

So let's go do that. So, uh,  the subheading, what we're gonna do, um,  you could do the margin off the top of this, off H one  or I like to do space after. So we are going to do H one. We're gonna do margin we bottom. And we'll say you are, um, we'll be using you,  you are gonna be minus 54 pixels, okay? And this is gonna play around with our spacing.

There you go. Nice. Okay. And next bit is let's jump into source code. And we've got the paragraph text underneath. Now I'm gonna put it in here and I'm gonna put in my P tag.

Now I wanna put a new class  'cause I don't wanna use the same one here. So what I'm gonna do is use my trick. Okay? So remember P okay? And if I hit tab, it's gonna put it in. Great.

Um, but I could type in P class, blah, blah, blah. But it's to be really clever. Dreamweaver does this P dot remember dot from my class  and I'm gonna call this one, um, um, heading  body copy, okay? And hit tab. So it's created by p tag  and add the class to it with the,  this thing here called heading body copy. Let's add the P tag.

Okay? Or my paragraph text. Let's check it in a browser. Oh, does this sometimes, sometimes you need  to go back into Dreamweaver and just hit save all. Okay? Oh, save.

Okay. And back into here. And it's back to life. Great. So do it. We now, now we need to apply some stuff,  a style to that PT tag.

So let's go to our CS s styles. Up here in my global  or my desktop, I'm gonna type in the class. It was header heading. Ooh, I can't remember. Let's guess it, let's see if it works. Okay.

And we wanna do font. Uh, let's do actually color. Remember color by itself is for the font. And remember, FFF is for white. And actually that's about it for it. Let's check.

Have a look. Okay? What we might do is play around with this  'cause it's, um, the spacing after this is not great. So we'll do it for, now you notice  that I didn't put a font size in. If you leave a font size alone,  it's gonna pick 16 pixels by default. Okay?

And that's a really common size. Try not to go too small, okay? Might look cool, but there's penalties from Google  for having fonts that are really hard for people with, um,  disabilities to read. And yeah. Anyway, uh, so, uh, what we're gonna do is,  um, play around the margin for this one. And we are going to, um, we'll do margin bottom  minus five pixels.

Great. Let's have a look. Yeah, it's getting to how I want it. Um, it's stretching a bit big. And one of the things you can see here is that, um,  I didn't put any padding on the right hand side here. Why?

Because there's something that I want to do. I wanna, mm, it's a little bit Trixie,  but it's not that hard. Okay? Is this guy here,  I wanna put a right margin on him, okay? So margin, uh, would do, right? And we're gonna use a percentage instead of a fixed number.

It just means that, um, the percentage can be nice  and big when it's at a big size, okay? And so, you know, if we use say 20%, it can be quite,  you know, it's quite wide when it's a 20% off such a wide  screen, but when it gets smaller, it starts  progressively getting smaller as a percentage as well. Okay? So, uh, yeah,  so you could totally just use a actual, um,  they call it an absolute size when you use pixels,  but this one here is a relative size. So padding, make sure margin right? Okay?

And it's going to be, uh, 20 pixels, 20, sorry,  20%, okay? And that's relative to the,  the size of the box that it's in. Great. So it means that I've got a bit of padding here,  but you notice that it's, it's quite big here,  but when I get down to the smaller sizes,  it begets progressively smaller. Okay? So it's not being too destructive when it gets down.

Great. So that's the fonts. Uh, let's look at adding our button. It's this guy here, okay? This licks talks button. You can click on it and goes off  to maybe our contact desk page.

Let's go and do that. So now when we are putting in a  button, really what's happening is we're gonna put some  text, we're gonna put some padding around it  and fill that padding with a color  and it's gonna look like a button. Okay? So, and let's go and do that. So in my source code, okay, we're gonna go down here  and underneath my PT tag here, I'm gonna put in a link now. So I want it to be a link as well.

So I want it to be clickable. So  we're gonna start with an A tag. Now we've kind of half looked at a tags, um,  but we haven't created one of our own. Now to write an AAG takes forever. Okay? So if we're right, a, it's a hrif, okay?

And then you put in, um, where you want it to go  and it's, it is quite a long process, okay? So when you are doing any sort of link, um,  a tags also normally called um, just hyperlinks. Okay? So, um, a and you put in the tab  and it puts in the hrif and all the junk in there. Lovely. We're gonna be even cleverer and we're gonna do a  and add a class to it at the same time.

And we'll call this one the, let's talk, let's talk hit tab. So can you see all that lovely stuff done for us? Okay, so we've got an uh, a hyperlink,  let's got a class already applied to a call. Let's talk and let's put in here, let's talk. Okay? Save it.

Now we need to go and style this guy here. So jump into our CSS. Now remember, where are we at to, let's put a few returns in  and let's make in, let's talk dot, let's  talk curly braces. First up, let's put in a background color  because ah, we can start background color. Okay? And this one is hash  and it is a background color of F1 47.

So the one I've used that kind of peachy red. Great, let's have a little look. So I've got, ah, there is there. So you can see where we're gonna go from here, right? So we need a bit of padding around it. So let's go do that.

So let's do padding and we'll do,  um, eight pixels. Can you see here? It's defaulted to eight all around. Okay? So top, bottom, left and right if I leave it like that,  but if I put in a second one, okay, which is going to be,  uh, what is it, 2030 pixels. Okay?

Can you see it's done top and bottom at eight pixels,  but left and right at 30 clever CSS Okay? You can fill them all out, but we'd be sneaky  and do just what we need to. Great. So we've got our button, it's clickable, okay? Uh, doesn't go anywhere, okay? And what you tend to do is, um, can you see here, um,  we've got this hrif, I didn't really mention the link.

Okay? So what you'd write in here is you'd write, um,  maybe go to the contact us page, contact us html, okay? So that'd be the page. We don't have that page yet. Okay? So you click it and come up with an error.

So often when you're working as you put in, instead  of leaving a blanket put in this,  you put in a pound sign or a hash key. Okay? And it just means that it works,  but there's no errors that throw up. 'cause if you're sending it to your client and they're  testing and you're just saying, Hey, have a look at,  look at the website, the look and feel,  but not the actual, you know, it's not fully built out yet. If they click on it, they'll come back to you  and say, Hey, the link's broken and it's not working. So you just put in hash, okay?

Just as a placeholder, okay? And make sure you switch that out later on. Great. Uh, so next thing we're gonna do back at our styles  and what we gonna do, we'll do you tick decoration? Okay, that is the underline. Let's get rid of that and let's put it to none.

Great. And let's pick a font that's not font,  it's just color by itself. If, if, if FF, um, so it's hash. Gotta put these syntax in there. You can put capitals or lowercase, it's up to you. Okay, getting there.

Got a button, okay. It needs a little bit of padding maybe, uh,  but let's leave that for the moment. What does that one look there? Yeah. Oh, so we're getting there. Hair box looking good.

Um, one thing we'll do  before we go is that it's kinda stretching on forever, okay? And that's fine on the skies, it's a MacBook Pro,  it's big enough. But you know, if you've got a giant screen like my other one  here or a, an iMac really big screen,  this is gonna stretch off and your menu's gonna be all the  way over there and your logo's gonna go all over there. It's not gonna be great. So we're gonna have some boundaries in terms  of the max width, okay? How big we want it to get.

So what we're gonna do is jump into our dream weaver  and what we are gonna say is that I would like it not  to get, yeah, something called a maxed max width. And what can you do it to? You can do it to our body. 'cause remember our body is everything that's on the page. I wanna say body, that's everything on the page. I'd like you to have a mix width please.

And don't get any big than say 10 24 pixels. That's the size that I had designed in Photoshop. Okay? 10 24 is a common size, okay? And you've gotta say a 10 24, not 1,024. If you say 10 1,024,  they're gonna know you have your newbie and you don't know what you're doing.

It's 10 24 all okay? And so it's, yeah, it's not gonna be bigger than that. You can make it any size. Uh, so let's have a look. Okay? So when it's down here, it's stretching  and doing the cool things, but then it gets  to a certain size and it doesn't get any bigger.

Um, it's either common for 10 24  or say 1200 is another really cool one. Okay? I'm just gonna pick, leave mine here. One of the things though, did you notice that  by default it lifts the lines? Okay, so what we need  to do is when you're aligning anything, okay? You need to do something called margin left  auto okay?

And margin right Auto. So we call it, okay? And it will you make the automatic left and right margins  and it just sits in the middle there. Look at us. Cool. So it gets to a kind of a more manageable size  and you, my friend have started building the content.

Now a lot of the other stuff  that we're gonna do is just kind of repetition of this. So you're gonna build lots of div tags, put content in it,  style it, and you are gonna have, uh,  yourself a handsome little website. Alright? So let's go  and do our boxes that are underneath here in the next video.