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.