Creating our hero box

Hey, welcome back. In this video we're going to look at creating these boxes down the bottom here. We'll start with this thing here. This is generally called the Hero box. Sometimes, a Jumbotron. 

First thing we need to do is, we need to add a bit of structure to our main part, something called rows and columns. Now, what is a row, and a column? It's the kind of underlined structure of pretty much all responsive websites. And we kind of need it. It's pretty easy, though. Just like Excel. Think Excel. This thing here is one row, one column. This thing here is one row, three columns. One row, three columns. So, that's what we need to know. So what we're going to do is, we're going to jump down into our Dreamweaver, and get the rows and columns in. 

Great! So we're going to jump to our ‘Source Code’. We've got our header, here he is there. Hello helpful header. And then, there's our main. We're going to put some returns in between it, and some spacing in there. And I'm going to 'tab' across, and what I want to do is, put in some rows. So, we're going to use this thing called a div tag. Now div tags are divisions of space. So, it's an easy way to remember them. 

So what we need to do is, we need to create a 'div tag'. So what we're going to say-- we're going to create something called a 'div class'. We're going to give this a name, and we're going to call this one 'row'. Then we're going to close it off. And then we're going to close this div tag by angle brackets '< >'. Just like we did for our h1s. We close it off with the angle brackets, and then the backslash '\', and doing it for the rest of them. So I got one row. And inside that row, I would like a column. So, I'm going to go, exact same thing again, so I'm going to put on a 'div class'. Great! I'm going to call this one 'col'. Close it off. Open up the ending bit, backslash '\', and that finishes it off. And that is going to be my column inside. 

Great! So, this is the first one. Let's make sure we do it with the other ones. So, we're going to use-- I'm going to show you some cool stuff now. Instead of having to type div class, and cols, and all that sort of stuff, it's pretty good with the code help, hinting there to make it easier, but they make it even easier using this thing in the background called Emmet and all it does, it means—watch this. If I put in dot row, '.row'. Remember, a dot in front of it means something called a class, and there's the hash '#' in front of it, we learned earlier, it is an ID. So, we're going to do a class. So just put that in. And instead of hitting 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', and a 'tab', it just assumes you want a 'div tag'. 

So, ‘div class=’row”’. Awesome! Hit return there. And we've got, one, two, three. Now, in this case, what we're going to do, is just because of the layout, with what I want to do, I want this to be one, two, three, here, so there's kind of like, two rows, for three columns. But what I'm going to do is, when it gets down to here, tablet, if I had them, two separate rows, it means that I have one, two, three here, and then I'll have one, two, three, and that would look pretty weird. 

So what we're going to do is, actually we're going to put in just one row, and we're going to put in six columns. And it just means that these collapse nicely. It means that, if I get down to here, and they're all kind of like stacked next to each other, and flow into the box., because they're all part of the same row, and they'll kind of float next to each other. You'll have to experiment with your design. If you've got four, and four, you could definitely have two rows with four columns, that would work. You always have to play around with it. I know, when you have these multiples of three, and you want it to do this, otherwise, this guy is in a separate row, and gets pushed down, and you have this kind of weird break, so they're all going to be the same game, trust me. 

So, how many columns I want? I want to try three. So it's going to take me forever. Not forever. I can do it to go 'col', and copy, and paste it. Gets even clever though, so, I'm going to just type in 'col', and before I hit 'tab', I'm going to hit in times ‘*’, and I'm going to put in '6'. So, times is just the asterisk. Now I hit 'tab', and hey, cool thing. And these are the tricks that make you go fast when you’re bringing in fun as a web designer. Let's hit 'save'. So we got our rows, we got one row, with one column. I've got another row with six columns, and that's going to be my stack. So I want this header to go in-- this hero to go inside this one. So, let's do that. 

So, to create the hero box, what we're going to do is we're going to put a return in here. So, inside this column, we're going to make another one called ‘hero’, and we're going to hit 'tab'. In this case-- just like we did for row and col. This one here, we're actually going to style it now. At the moment, these are just kind of like our row structure; we’ll do it with style in the middle. Here, we go into the style. So what we're going to do, is we're going to our ‘css styles', we’re going to do it for our heading, all 'global', and a lot of 'return's, I love my returns. And we're going to say, '.hero'. 

Remember, class is held up here, right in front of it. Curly brackets '{ }'. And we're going to do a couple of things. Let's do background image, so, 'background-image'. It's ‘url’, when you’re dealing with background images, and click 'browse'. Great! Now go off and find-- now this is-- remember, looking at my files that I've downloaded. For the exercise files, you can use your own. Here's my hero background. It’s kind of this background thing I've got in Photoshop and I just kind of like, turned the opacity down, so it looks kind of washed out. We'll put some text on the top. Great! Hit 'save'. And remember, to close it off at the end, semicolon ';', 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, that's the background image. But the background image doesn't hold it open. 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 to the top and bottom, just to kind of get things going.

So, padding, it's going to be 52 pixels by zero pixels for the right, and 72 for the bottom, and 72 for the left. Hit 'save'. Let's have a look at it. 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. But the image is not doing what we wanted it to do, right? So, if I expand this out, just kind of, it's repeating, you can see that repeating in there, but we want this to be responsive, basically. So, what we're going to do is, we're going to go into here, and we're going to use this thing, this background thing, and it's going to be 'size', and we're going to use this one, 'cover'. Covers are really handy. If I 'save', check it out. It's the one that kind of stretches out the fit. Watch this. It gets smaller, gets smaller, gets smaller, so it's going to work on all sizes. It doesn't look perfect now because it's all kind of switched in, but as we add content, it's going to look nice. So often, background cover is the one you want to make the background, of boxes. Yeah, responsive.

So, next up, is to put in our text, and style it. It's here. Jump into Dreamweaver. What we're going to do is, we're going to move to our 'Source Code', and inside our 'hero' box—hit ‘return’ And, the first bit of text in there is this 'I'M A', and then Digital Designer. So, obviously it's going to change for what you're going to do, but let's play along. Let's get the idea of it. So, normal body text-- we've done headings before, remember h1s, they're important, and you surely really have a heading in h1, one per page. So, all of the rest that it takes often is a ‘p tag’ called paragraph. So, we're just going to use a ‘p tag’ And that is, what was it? It was ‘I’M A’. And then I close off that p tag with a slash '/'. It pretty much fills it in. 'Save' it. Let's check it in the browser. And look at the right one. And there's this little 'I'M A'. 

So let's go and style that one. Now, I could style the p tag. The problem is, if I style a p tag, and I'm going to use this on lots of different pages. If I make it like-- it is in my mock up, which is big and bold. Everybody thinks of making it big and bold. So what we're going to do is make a little specific class for this guy. And all you do in between here, is I'm going to create a class. I'm going to call this one 'class', and we're going to call this -- we're going to give it a name, I'm going to call mine, maybe 'subheading'. Subheading. Cool! Let me copy that.

So, now I'm going to define that class. So, we're going to my ‘styles’. I'm going to-- in my desktop view-- I'm going in here, and what goes in first before a class? That's right. A full stop '.', or a period. And I'm going to style it. And what do I want to style it as? First of all, I want the color. Now the color, just by itself styles the font. Now, there's very few hexadecimal numbers that I remember, and 'fff' is white. That's the only one I know. Font 'white' is going to be the nice big bold color. So, here you go, it's going to be 800 pixels '800px'. Nice! And, what I might do, is change the font size. 

Remember, I'm just pulling these font sizes from my Photoshop mock up. And you can play around. Trial and error. And I know that the margin at the bottom here needs to be played around with. Actually we might leave that till afterwards till we see all the fonts. We'll leave that off. Great! Let's check in the browser. Hey, we got a font. It's not big and bold. Why not? 800 pixels, it's not pixels, okay, it's just the word 800. Hey! Thank you subheading. Let's put in the bit underneath. It's this guy here, ‘Digital Designer`. So, text. Let's put that in. And, that's going to be the most important word. So that's going to be my h1 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. If I had the h1 as 'I'M A', Google would come to this page, and say, "Okay, your site's all about this thing called 'I'M A'." But I want it to be about 'Digital Designer'. 

So, let's go in here. And, back to my 'Source Code'. And underneath it, I'm going to put in 'h1', and I'm going to close it off. And, what am I going to call it? It's 'Digital Designer'. Then I close it off with my angle brackets ‘>’, forward slash ‘/’. There's my h1. Not going to use 'class', because, why? I'm going to have this h1 as-- every page is going to use the same title. So I'm going to use it in here, and do h1. So, style that h1, and, curly braces ‘{’. You'll kind of notice that we didn't put a period in front of it, or a hash. There are just some things that are pre-made, like p tags, h1s, image tags, they don't need tags, they're pre-made in HTML, we don't need to add anything to them. It's just stuff we make up on our own. This stuff here never existed before in life, either has a period in front of it, or a hash.

So, what we're going to do is we're going to give it color, and remember, the one color I know, white, ‘font-weighty’, this one's going to be the thin one. So, ‘font-weight’, it's going to be ‘300’, don't put 'px', and let's put in a ‘font-size’. And this one is a nice big, healthy 52 pixels ‘52px’. You can save it. And, let's have a look in the browser. So, these are few things-- there are some defaults going on; h1s have, by default, just come out of the box, somebody decided long days ago that they have a really big gap in front of them, and p tag has a little gap underneath. Together, they have giant padding So, we're going to use margins at the bottom, and minus them. Let's go and do that.

So, the subheading, what we're going to do? You could do the margin of the top of this, of h1, or I like to do space after, so we're going to do h1. We're going to hit ‘margin-bottom’, and we'll say, you are-- you're going to be minus 54 pixels '-54px'. Okay! And this is going to play around with our spacing. There you go. Nice!

And next bit is, let’s jump to our 'Source Code', and we've got the paragraph text underneath. Now I'm going to put in here, and I'm going to put in my p tag. Now, I want to put in new class, because I don't want to use the same one here, so what I'm going to do is use my trick. So, remember, 'p', and if I hit ‘tab’, it's going to put it in; Great! But, I could type in 'p class' Really clever. Dreamweaver does this, p dot, 'p.' Remember, dot for my class, and I'm going to call this one 'heading-body-copy'. And, hit 'tab'. So it's created my p tag, and added the class to it with this thing here called 'heading-body-copy', let’s add the 'p tag', or my paragraph text. Let's check it in a browser. Oops! Does it sometimes. Sometimes you need to go back into Dreamweaver, and just hit 'Save All'. And, back over here. 

Great! So, now we need to apply some styles in that p tag. So let's go to our 'css styles' up here in my global, or my desktop, I'm going to type in the class, header, ‘heading’, oh, I can't remember, let's guess it. I'll see if it works. And we want to do fonts, and 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. Let's check, have a look. What we might do, is play around with this-- this spacing after this is not great. So we'll do it for-- now, you noticed that I didn't put the font size in. If you leave font size alone, it's going to pick 16 pixels by default. And that's a really common size. Try not to go too small. There are penalties from Google for having fonts that are really hard for people with disabilities to read, and--

So, what we're going to do is play around with the margin for this one. And we are going to put in ‘margin-bottom’, minus 5 pixels '-5px'. Great! Let's have a look. Yeah, it's getting to how I want it. And, it's stretching a bit big, and one of the things you can see here is that I didn't put any padding on the right hand side here. Why? Because there is something I want to do, I want to-- it's a little bit tricky, but it's not that hard. This guy here, I want to put a right margin on him. So, 'margin-right', and we're going to use our percentage instead of a fixed number. It just means that the percentage can be nice and big when it's in a big size. So, if we using 20%, it can be quite-- it's quite wide when it's 20% of such a wide screen, but when it gets smaller it starts progressively getting smaller as a percentage as well. So you could totally just use our actual—pick on an absolute size when you use pixels, but this one here is a relative size. So, padding-- make sure—‘margin-right’, and it's going to be 20 pixels, '20px'. 20, sorry, ‘20%’. And that's relative to the size of the box it fits in. Great! So it means that we got a bit of padding here. You noticed that it's quite big here. We want to get down to the smaller sizes, if it gets progressively smaller, so it's not being too destructive when it gets down. 

Great! So, that's the fonts. Let's look at adding our button. That's this guy here. That’s the ‘Lets talk’ button, you can click on it, and it goes off to, maybe our ‘Contact us’ page. Let's go and do that. Now when we're putting in our button, really what's happening is, we're going to put some text, we're going to put some padding around that, and fill that padding with the color, and it's going to look like a button. 

Let's go and do that. So, in my ‘Source Code’, we're going to go down here, and underneath my 'p tag' here, I'm going to put in a link. So, I want it to be a link as well, so I want it to be clickable, so we're going to start with an 'a tag'. Now, we're kind of half looked the a tag's, but we haven't created one of our own. Now, to write an ‘a tag’ takes forever. 

So, if I write, ‘a href’, and then you put in, where you want it to go, and it's quite a long process. So when you're doing any sort of link, a tags are also normally called just hyperlinks, so 'a', and you put in the 'tab', and put some of the ‘href’, or all that junk in there. Lovely! We're going to be even clever, and we're going to do 'a' and add a class to it at the same time. And we'll call this one 'lets-talk’. Hit 'tab'.

So, can you see, all that lovely stuff done for us. So, we've got a hyperlink, it’s got a class, and we’re going to apply it to our ‘lets-talk’ and let's put in here, 'Let's Talk'. 'Save' it. Now we need to go and style this guy here, so jump into our 'css'. Remember, here we had to put a few returns in, and let's make it 'Let's Talk', dot Let's Talk. Curly braces '{ }'. First up, let's put in a background color, because we can start-- 'background-color'. And this one is hash '#', and it is a background color of 'f147'. It's one I've used, the kind of pinky red. Let's have a little look.

So, I've got-- where is that? You can see where we're going to go from here, right? So we'll need a padding around it, so let's go and do that. Let's do 'padding', and what we'll do, 8 pixels '8px'. Can you see here, it's defaulted to 8 all around. So top, bottom, left, and right, if I leave it like that. But if I put in a second one, which is going to be-- what is it? 20-- 30 pixels '30px'. Can you see it? It's done top and bottom at 8 pixels, but left and right at 30. Clever css! You can fill them all out, but we'll be sneaky, and doing just what we need to. 

Great! So we've got our button, it's clickable. Doesn't go anywhere. And what you tend to do is, can you see here? We've got this 'href'. I didn't really mention in the link. So what you go add in here, is you go add, maybe go to the Contact us page, ‘contact-us.html’ So, that would be the page. We don't have that page yet, so you click at it and come up with an error. So, often when you're working, is you put in-- I'm sick of leaving a blank in. You put in this, put in a pound sign, or a hash ‘#’ key. And it just means that it works. But there's no errors that throw up. Because, if you're sending it to a client, and you're testing, and you're saying, 'Hey, have a look at the website.' They look and feel but not the actual, thoughtfully built up yet. They click on it, and come back to it, and say, 'Hey, they're linked, broken, and stopped working.' So, you just put in a hash '#'. Just as a place holder. And make sure you switch that out later on. 

So, next thing we're going to do, back to our ‘styles’.. And what we're going to do—‘text-decoration’, that is the underline, so let's go into that, let’s put it to ‘none’. Great! And, let’s pick a font. It’s not font, it’s just ‘color’ by itself. 'fff'. So it's hash '#'. You got to put in the syntax in there. You can put capitals, or lower case. 

Okay, we’re getting there. We got our button. And there’s a little bit of padding, maybe, but let's leave that for the moment, because I want my--  So, we're getting there, hero box. It's looking good. And one thing we do before we go is that, it's kind of stretching off wherever, and that's fine, and this size is the MacBook Pro, it's big enough, but if you’ve got a giant screen like my other one here, or an iMac, a really big screen, this is going to stretch off, and your menu is going to be all the way over there, and your logo's going to be all over there, and it's not going to be great.

So we're going to have some boundaries in terms of the 'max-width', how big we want it to get. So, what we're going to do is jump in to our Dreamweaver, and what we're going to say is, that I would like it not to get here, with something called as  'max-width'. And what can you do it to? You can do it to our body. Because, remember, our body is everything that's on the page. I want to say-- I'd like you to have it ‘max-width’, please, and don't get any bigger than, say 1024 pixels '1024px'. That's the size that I had designed in Photoshop. Okay, 1024 is a common size, and you got to say ten, twenty four, not a thousand, twenty four. You say thousand, twenty four, they're going to know you have-- you're a newbie, and you don't know what you're doing, so ten, twenty four. All right?

So, I can make it bigger than that. You can make it any size. So let's have a look. So when it's down here, it's stretching and doing a couple of things, but when it gets to the same size, it doesn't get any bigger. Say the corner of the ten, twenty four was a 1200, as I know already how to call one.  I'm just going to leave mine here. One of the things though, did you notice, that by default it lifts our lines. So what we need to do is, when you are aligning anything, you need to do something called 'margin-left:auto', and 'margin-right:auto', semicolon ';'. And it will make the automatic left and right margins, and it just sits in the middle there. Look at this. Cool! 

So we're just getting a kind of more manageable size, and you my friend, have started building the content. Now, a lot of the other stuff that we're going to do is just kind of repetition of this. So you're going to put in lots of div tags, put content int it, style it, and you're going to have yourself a handsome little website.

So let's go and do our boxes that are underneath here in the next video.