Production Video - Building the rest of our website

Hi everyone, in this video we're going to finish off building our site, just adding some text, some horizontal rules, make a little button, and it's going to be all responsive, and video-ey So let's go and do that now.

So the first thing we'll do is, we've got our header, we’ve got our 'nav' there, and there's our image logo, so what we're going to do now is add the main part of the website. Luckily, the HTML tag is called 'main'. This is where all you main stuff goes. Now our main section, if you look at our mock-up here in Photoshop, it’s pretty basic, so this website is going to be a little unrealistic, you're going to have a little bit more content on here. So, often you break your 'main' up into different sections, so our 'main section'-- here we go-- It’s going to be this. And then you could have two sections, you might have the section for the 'Hero' image, and underneath might be some thumbnails, and there might be some testimonials, they can all be in different sections. You could also just call them 'div' tags, we're just using more standardized kind of HTML language here, but 'div' is fine as well.

Inside of this is going to be my big heading. Where's the big heading? This thing here, 'CREATIVITY IS A WILD MIND & A DISCIPLINED EYE', so what I'm going to do is type in 'h1', hit 'tab'. So 'h1' is our heading1, our most important heading on the page, so you need to have an 'h1'. There he is there. Let's go check it in the browser. There he is there. That's what 'h1' looks like, unstyled. Normally he's 'Times New Roman', but he's 'Arial' because, remember we said 'Arial' to the body, so everything inside is 'Arial', but there's a bit of styling we need to do, we need to do upper cases, whites, he needs to be pushed from the top, so let's push him from the top first. And let's look at that.

In Dreamweaver, all we want to do is, we could put some padding on the top of 'h1'. Then the problem with that is every page needs an 'h1', and not all of them are going to need that padding, so what we can do is, actually we can say this section, we can give it a little 'class', and tell that section to have some padding, just to push the 'h1' down, so let's go and do that. So, I could style a section, but remember, probably, pages are going to have more than one sections, so we want to give that a little bit of specific-ness, and it doesn't matter if you created a 'class' here, and then build it in the css afterwards, or build it in the css, and apply it here second.

So I'm going to give this a 'class', remember, we get to name these ourselves, and I'm going to call this one my ‘hero' box. I'm just going to actually call it 'hero'. So, let's go to 'class' named 'hero', and we go to my 'styles'. I'm going to make a 'class' down the bottom here, now what goes in front of the class? That's right. Full stop, or a period. And I'm going to call it 'hero', curly braces, ' { } '. Push 'return', separates them out, and what I'd like to do is do some padding along the top. How much? I've really kind of worked it out by playing around a little bit, and this is going to have a padding of 80 pixels, '80px'. 'Save'. Let's have a look. There we go, kind of push him down from the top. So let's go and style this 'h1' now. 

So, in my css, in the bottom here, I'm going to put in my 'h1', and because an 'h1' is an existing tag, it's not a class that we created, we just have no period ‘ . ’ in the front, and we're going to add some stuff to the 'h1'. And what we'll do is, go to 'font-size', so 'font', there he is there, 'size' of  '4.6em'; semi colon, ' ; '. Great! 

What else? We're going to give it a color of 'white', 'fff', sorry it's hash fff, '#fff'. You can use the color picker there, or type in 'white'. I'm going to make it upper case, so 'text-transform' is the one I want, and you can see there, I can make it lower case; I'm going to force it all to be 'upper case'. Nice! And in my case, I want the margin just underneath it. A little margin underneath it to be a little bit bigger, of 20 pixels, '20px', and this will allow me when I do this, there's a bit of a gap underneath, I want to push it down where this horizontal ruler goes in. Let's look at it in the browser. Cool! 

We're kind of there, right? It's big, it's bold, and it’s exactly what I wanted to do. The only thing is I want it kind of smooched up on the left hand side. Let's look at Photoshop. I want to kind of align it with this. I'm going to add some padding to the box, we did it before, we added it to the top of our 'hero' box, push it down; we can do the same to the padding on the right hand side to push it over. 

So, into Dreamweaver. We did it here in my 'hero' box. I'm just going to add some padding to the right, and it's going to be 250 pixels, '250px', and I'll also add some padding to the bottom, 'padding-bottom' just to push it off at the bottom, because otherwise all the text is kind of smooched at the bottom, and I want to lift that off a little bit. Let's have a look. Awesome! 250 pixels over there, and, what was it? 80 along the top there, and there's a little bit down here at the bottom, just to keep everything off the bottom.

Back into Dreamweaver. Next thing is the horizontal ruler. I want to put a line just underneath it. There's couple of ways of doing it, the easy way is, just underneath this 'h1' we're in something called an 'hr' tab. The weird thing about an 'hr' is, everything else has an opening, and a close, the 'hr' doesn't, and it's just by itself. Let's check it in the browser. There he is, there's my horizontal ruler. And it stretches all way along. What we can do is style it a little bit, and now we're going to use a handy dandy new little trick. We've been jumping between this, and this, and this, and this. Dreamweaver 2017 at least has this new feature. If I 'right click' in, and go into this thing called 'Quick Edit'; It is awesome; What it does is, it kind of opens up this little wormhole to your css, and what it does is, it says, "At the moment there is no styling for this 'hr', would you like to make one?" We say, "Yes, please." 'New Rule'. You can see, I'm actually in my css sheet on line 55, and it's actually put in the syntax I need, and the curly braces, where did they go? Cool!

So I'm going to put in a ‘height’ above it, so at the moment there's only one pixel, I'm going to put in 10 pixels, '10px', so it's a bit thicker. Let's 'save' that and see what it looks like. You see, that's what a horizontal looks like with the height, so there's couple of things we need to do to make it look good. We need to put in a background color, okay, 'background-color' of 'white', or 'fff'. Remember hash, '#fff', semi colon, ' ; '. Great! The only trouble is, you might not be able to see it, even if we zoom in. Can you see, there's a weird border around the outside, so just default on horizontal ruler, so what we're going to do is, set the border to zero pixels, '0px'. They might not look very different, but it bugs me, that thing. Anyway, that is it. You can give it a width as well if you wanted to, at the moment we've given it a height but no width, I'm letting it go to the padding it's got on the side here, you can tuck it in to be smaller if you like by just giving it a width; I'll to leave mine.

Next up is the text that goes underneath. So let's go and add that. Actually, before we do that, let's close this down, see that little wormhole. Let's go and check it in the style, and you can see, at the bottom here is my horizontal rule. So, just kind of saves you like going in there to change it, or create it at least. 

Let's go back to 'Source Code', and let's put in our bit of text. Now, text generally is contained in a 'p' tag. So that's the body copy text on a page. h1's for headings, and pretty much everything else, it's not h1, 2, or 3, heading, important headings, it's a 'p' tag. And what we're going to do is, inside this 'p' tag, we're going to put in a bunch of text. You could smash away, keep on putting fake text, that will work, but there's a nicer way of doing it using 'Lorem Ipsum'. If you're a designer, and you're like, great, you're going to lipsum.com, and go get that text from there, it's not a great way of doing it because copying and pasting from that site can bring through code that we don't want in our website. So what we're going to do is, it's built in to Dreamweaver. If I type in 'lorem' and hit 'tab'-- Look at that. Built in 'Lorem Ipsum'. Cool!

I know how many words-- Let's say you're working with a copywriter, and the copywriter is writing to a writing schedule, so he's writing 200 words for the home page, and this many words for this page, so you got a rough idea when you're designing about how many words it's going to be. And let's say, I know my words is actually 52. I don't know, it's quite precise, you're never going to be that precise, but the cool thing about this little shortcut in Dreamweaver is, 'lorem', and you put in '52', hit 'tab', that's exactly 52 words. Really handy. Let's 'save' it, check in the browser. There you go, there's my 'p' tag. By default, it's black. 16 pixels, or 1em. Okay, let's go and fix that now.

We use our sneaky trick, 'right click' it, 'click' at it, it's 'New Rule', created with a 'p' tag, and I'm going to do 'color', so color by itself, remember, is this—And you all know what 'fff' does. Anything I want to change is probably the 'line-height'. Let's keep it '1.5em', so one and a half line spacing, remember the default is 1em, and I'm happy to do that with the body copy, it's a good size, but I'm putting the 'line-height' in, the space between lines or the leading. Let's check it. Nice!

Now one thing I just noticed, at the top here, is this; that is the syntax from this, I have no idea what this is here, let's go ahead and check. First, I'm going to refresh this page. It disappeared, that's good. So my little preview here, a little bug, I think. No idea how they came. So, I'm going to close it down; Awesome. I think it's that 'Quick Edit' thing, maybe there's a little bug with that, but it's all gone nicely now. Lovely.

So, let's put in our button underneath. It looks like this in my mock-up. It's just the text with some stuff around it, but it's clickable. And how do you build a button like that? All that it is, is an 'a' tag, like we did for our hyperlink, which we've done up here. So, remember, 'a' tag, so 'a', and hit 'tab'. Where's it going to go? We're going to put it in our place holder, pound sign, ' # '. What is the text? It says, ‘CHECK OUR PORTFOLIO’. And this is going to give us some stuff. Let's have a look. Okay, big and blue. We're going to do the same thing we’ve done up here, the styling, plus we'll add some borders around it.

So to make this happen, I need to add a 'class'. Because if I start all the 'a' tags, every single 'a' tag, on every single page is going to be styled, and I don't want that. Remember we're going to add a 'class'. Great! I'm going to give it a name, and I'm going to call this one my 'button class'. Sometimes, calling it a button is not a great idea if you're using Bootstrap, because they use that syntax, you might call it something else, you might call it my 'call-to-action'. A little bit of a long name. There’s my 'class'. I'm going to go into here, in my 'styles', down the bottom. Make it ‘class’. Remember, classes have a full stop ' . ' in front of it, and afterwards, put in our curly braces '{ }' What I'm going to do to it, is, first of all, background color. 'Background color'. We're doing it to a link, right? But what it's going to allow us to do is, add that kind of red border. You could make a box, and put the text inside of it, but it's easy to use the text, and make a border around it, if you know what I mean. So I know I'm using, 'f1474c', semi colon, ' ; ', that's that red color, and the cool thing in css-- now, in Dreamweaver, if you hover above it, it should give you a little icon. Handy.

Other things I want to do, so let's check in the browser, you can see,  it's the red color, but to make it more like a button, we need to add some padding around it, so you can go through and say, 'padding-top', 'padding-left', 'padding-right', 'padding-bottom'. It kind of adds up, but you can add all four of these properties, but now in css, what you can do is, just add 'padding', and what happens is, it assumes-- you can put them in order, I'll show you. So I want the top to be 18 pixels, '18px', and you can see that little pop up here. You can see, if I leave it like this, it's going to apply to all four of them, so I'm going to have padding all the way around. So I put my semi colon, ' ; ', 'save' it, have a look. And you can see this '18px' all the way round, rather than having the final-- all four of them.

You can actually get a little more cleverer, because I want the size to be a little-- so the top is '18px', but I want the right to be '30px'. Maybe double. You can see here now, it says, top right is '30px', bottom is '18px', and it kind of duplicates these. Essentially, it goes clockwise; starts on the top, goes right, goes left, to bottom, so what I could do now is go add 18 pixels, '18px', and 30 pixels, '30px'. Just to make it clearer for you, that-- instead of writing top, left, bottom. Anyway, let's go 'save' it, let's go check. Awesome!

I want to put some space between these lines, so what I'll do is I'll put in a 'line-height'. Sometimes, you can put a padding above, but in this case, 'line-height' is going to work better for us. '4em'. 'Save' it. Nice! Pushes it away from there. 

Let's change the color of it, to '#fff'. And give it an underline, we did it earlier, remember, 'text-declaration', and we're going to go, 'none', please, give it a little underline. Let's have a look. Looking good. 'Click'; it's clickable. Nice little button, quite simple to do, right? Little bit of css on your HTML, nice and clean code, you just got this 'a' tag with the class around it. Nice!

All right, my friends, we have made a cool little site. That's the end of it, because, pretty much everything else, if you want to add more, you can add another section. We're not going to go into huge details in this one, just a bit of an exercise to build that site, so we've done that now.

Next step is to look at some responsive stuff, so what have we done? We've made this site, it's boring old font, Arial, I know, but we've got a nice cool video in the background. If I resize it, move it in the background, we got a clickable link. It's pretty cool.

One thing before I go, I can't help myself, see, the padding on the top here is too close, so what we can do is add some padding to the header, so in here, my 'styles.css', and we go down the bottom, and I'm going to create 'header', and inside of here, I'm going to say, 'padding', just to the top in this case, 'padding-top', and I want to add 30 pixels, '30px' please. Phew! It's off the top. Lovely. All right, that's going to be it. Let's jump into the next video.