6.5 Completing the Website

[SOUND] In the previous lesson, we covered, quite a bit, we built the layout. So today, we just need to finish up by tweaking our site, and adding the layout for one of the other pages, which is going to be much easier to do. So let's start with some tweaks. The first thing I see here is, I would like the footer to have some more breathing room right here, just so it's not right underneath. So, we could apply some margin top to the footer, but you might find that, that doesn't work. But still, we'll try it. Margin-top, and we'll do a 100 pixels, just to demonstrate what I'm referring to. Refresh, and it's not working. So this may happen to you. You'll wreck your brain trying to figure out why. And if you hover over it, look how footer seems to be coming all the way up. Well that's odd. You might be thinking, well we need to clear it, but it's already being cleared. So what you need to do is see if anything above it, Is being pushed to the bottom. hover over main, and notice that main, if you look at the tooltip, has a height of 0%. And remember, main's children are all floated, so that means, we need to use the clearfix class, to make sure it clears or contains all of its children. I'm gonna refresh, and now if I hover over it, can you see that has been cleared? And now, if we scroll down, we are recognizing that huge margin that we applied. Good. So that was an easy fix. Let's bring this down to around 30 pixels of margin. And the next thing I noticed, is that we went through creating the buttons quite quickly. Why don't we spend a little more time. The first thing I notice is they're all caps, they're white. This appears to be bold, and it seems that he might have just a little bit of shadow. So, let's revise our button. I'm gonna search for button, and now I'm gonna set the color to white, make it bold, and then text-transform to uppercase. Reload, and that's really large. So, I see two options. One will be to reduce the font size, or, remove that entirely, and may be he didn't use font weight. And yeah, may be he didn't use bold, but I am going to add the font size and bring that down to 12 pixels, or possibly even 11. There we go, and I think that looks good. The last thing is, now when we hover over it, because we were turning the color white, we don't have any transition at all. So, why don't we make the background color, slightly different. But remember, when we hover over an anchor, the color is black. So that won't display at all, as you can see right there. So let's keep color white on, cuz it seems we need it. And now we have a subtle transition. If you wanna make it more, you can always do that as well. But I think that's fine for what we have. So, this is all we're going to do for this homepage. What I would recommend you do, if you had a real client project, is you would wanna make sure that your fonts line up. Here, he's using special fonts. Notice that this looks better than what we have here. And the only difference is, he's using all lowercase and we're not. And second, he's using a much cleaner and a thinner font. So you would then wanna go to either Font Squirrel or Google Fonts, or use a background image with this exact font embedded. It's up to you, but we're not gonna get into it today. Now, i'm gonna close this out, and we're going to load the other page PSDs, and i'm gonna open up work.psd. And this one's a little bit different, but it's more or less the same structure. So lets create our new file, first things first. Close out CSS, and add a new file called, work.html. Next, I need to make sure I link to work right here. So I will go to work.html, and next I'm gonna copy all of this over. If you're working with a server site language, which you presumably will in the future, you wouldn't do this. You would abstract, for example, your footer into a file, and your header into a file, but in this case, we don't have that option. Now I'm gonna update the title to Work, and let's see if we are linking to it correctly. Click on Work, and now we are on this new file. Now we need to update it for this PSD. So, we can see right off the bat, we have these two big images, and the grid is much wider. Because it's divided into two, we know that it should be grid_12. So that's the first step. I'll come in here, into this new file, and we don't have a banner, so we can get rid of all of that. And now within the main section, we're gonna have a grid of half of 24 is 12. I'll get rid of the read more button. And then I'm gonna take all of this, and duplicate it, because we do have two. Then, I don't need anything else that follows after here, except for the footer. There we are, that looks pretty good, so let's view this in the browser. Reload, and already, we have the basic structure in place. Now we just need to slice out any assets that we require. And in this case, all we have are two images. I'll select it, make sure that Auto Select Layer is on, click the image, and now once again, I'm going to click the mask. That way I can copy the image. And now you should know this process. If you've been working along, save it, as a JPEG. And here I'm gonna call it work1, I'm gonna do the exact same thing, once again, with this second photo. And what I see here, is when I selected it, it seems that I'm also picking up something else. So we can reduce from a selection by choosing the Marquee tool, and coming right up here, and this is reduce, or subtract, and now I'll just select anything I wanna subtract, wherever that's coming from. There we go. Save it. And that will be saved as work2. Now I can add those into my project. So let's see where to place it. It should be at the top of each grid, as you can see right here. So, for now I'm gonna do image, and we are gonna go to img/work1, and I'll duplicate this and do the same thing for the next one, but work2 this time. Let's see that. There's our two images. Good. Now, we're gonna come back and add some of this extra text. And it looks like he has a heading two of work example one. So, I'm gonna save myself some time below the image. I'm going to use double cursors by selecting Cmd and Click. But this only available in Sublime. So if you're working along, you'll have to do this manually. Work example one, and then I'll just update this one to two. And then we have the same thing here, just a little bit of text. So I will copy that, and we'll place that maybe within a paragraph tag, wherever you want. And it looks like I accidentally put that on top, so I'll fix that, place it below. And if we come back to the PSD, I'm thinking that could probably be a subheading. So, why don't we come back. I don't like to use paragraphs unless I have to. So, let's select each of these Ps, and change it to perhaps an h3, or maybe even an h4. Refresh. And now we have work example one, and a brief description. So, all we have to do to finish up this page, is do a little bit of styling. Also, we want to adjust the selected page from home to work examples. We'll do that first because it's easy, come to the top and remove a class, selected to home, and we're gonna place it with work examples. Reload, now that's been updated. Next step it do the font styling, for what we have right here. So, let's find out what the size is, he's got 26 pixels. And what do we have if we inspect our element? We have ours set to 23. So we would wanna make that bigger. So how do you adjust an h2 for one page, but have it be different on another page? And a common way to do this is to apply a special class to the body element. In this case, we'll do work. And that way, if there are any discrepancies, we can adjust those. Another way to do this would be to wrap each section. So you have main, but then each of these are stored within grid_12, and that's it. Why don't you give it a class of work, and then we can use this work namespace of sorts target these specifically, and that's what I'm gonna do here. At the bottom, create a new divider called work. And now I can say work h2, font-size is 26 pixels, and I don't have to worry about affecting anything else. Good. Now I wanna adjust the spacing below, the images above. If we come back to our code, we can see that right after here, we have our image. So we will place it right here. work img, margin-bottom, and I'm just going to estimate at this point. 20 pixels and that pushes it down. Good. Next we have this subheading. So I'll select it, and get this color, 7878. And we're going to attach that. So if you wanted to make that all h4 tags, you could do that. It just depends on your website. If that's always gonna be the color for h4, keep it generic. If it's special to this work section, limit it to just that class. Refresh, and now we have that lowered. Also, there's no spacing at all here, but there is right here. And that's because of those margins that we have set, that we set margin bottom to zero, watch what happens. Jumps up. And next, I don't think there's any bold here. So, we're going to reduce that, font-weight, normal. And we're going to apply that to the h4 as well. So, why don't we do this, h2 and h4, like so. Reload, and there we go, that looks a lot better. Let's next figure out, is the font size the same, and it appears to be 26 pixels, and the same with the heading. So we can take this out, and we can put this like so. Refresh, and that's looking better, but still, I think there's too much spacing, compared to what they have. So I'll do to fix that, since we already zeroed out our margins, is perhaps we'll go to the h4 and just push it up a touch by doing negative margin. This is always option if you need to, and that pushes it up. And it looks like I didn't get this full text, so I'm gonna copy that one more time, and paste that in for each one. There we are. And reload the page. Okay. So now, let's make sure everything is right. And I'm thinking that the line-height right here is going to be less than what we have. And you see here, auto, that's essentially one, and we probably have it set to higher. So what if we set line-height to 1em, to see what auto or regular would be. And you see that pushes up. And that also shows that the line height was set, or inherited from another element, which is what was creating that extra spacing. Now that I know that, I can remove this margin top, which is always nice. There we go. That looks good. And then at this point you can modify the line height however you need. And here it does seem to be a little bit higher, and there is a border below it. So let's fix that. Line-height may be 1.2. Border bottom is going to be that same divider color. You could even, if you find yourself using this divider often, obstructing that a way to its own class. Next, I'm going to set up what the spacing is below this, and it should be the same as what we've done before. And it appears we have 33 pixels right here. So let's say padding, bottom, 33 pixels, and then what about the margin after that? That seems to be a little higher as well. 30 pixels, so that will be represented by margin. Refresh, and there you go. And we're more or less done with this page, so again, if you were doing this for a real world and a client, you need to make sure that those fonts will be the same, because he is using a nice font here, and you can see it really does make a good bit of difference, when you have a thin and crisp font, ss opposed to our default Helvetica or Arial. So, now if we wanna get back to homepage, we haven't set that link up yet. That's our last step. Home is gonna go to index.html. And now we have created a two-page website. There's home. Have your nice layout. You would adjust the fonts for your projects, and then you can link to work examples, and it looks great, and we were able to do this in just a couple of hours, and I hope you were working along with me. Now that we've built your first website, we need to deploy this, and the first step you need to do is figure out what is your domain. There are lots of ways to purchase a domain name. You can Google it. One of the most popular, of course, is Go Daddy. A lot of people hate it. But tons more use it. I've used it myself. It's fine for what I need. But if you'd rather use something else, feel free. Right here you can search for the domain name that you want. Once you find it, go ahead and purchase it. Next step is you need hosting. And there's lots of providers, hundreds upon hundreds. The one I use and I like a lot, is called Media Temple. So you can contact them or research it on your own time. You could sign up, and it's generally gonna be around $15 to $20 a month for the grid hosting, which is all you need. So once you have created a domain, gotten your hosting, you would wanna log in. And in this case, I will use my own credentials. You'll get to see my personal info. And then we would add a new domain. Add a new domain or service, and in this case, we don't want to add a new grid service, we simply want to add a zone, because we already have hosting, and we just purchased a domain name. So we'll add this domain, and this is where you would place the URL to the domain that you purchased. You would select, I already own this, click the next step, follow the instructions, and then you're all set up. And once you've done that and gotten all set up, the next is to FTP your files up. There are lots of different ways you can do this. You can search for free ftp client, and you'll find FileZilla is very popular. You can use that. There are browser FTPs, there are programs. One that I like to use on the Mac is called Transmit, and this allows me to save common places that I go to. I think it works really well. But its not free. Again, you can get a free trial by visiting panic.com/transmit. All right, so with that out of the way, let's connect to my web host. Next you can see I have various folders in here. I'm gonna create a new folder, and we'll call this my website and login. So you would do the same thing, but accessing your FTP account using the credentials that you can get from your web host. They will usually email you. And once you log in to your root folder or any folder you want, you're gonna drag in everything we worked on. So, i'll select everything except for the PSDs, because those are large files and they're not necessary, and pull them over. Now, I simply browse to this URL. So in my case, I stored it on prefixer.com/mywebsite and ta-da! Our website is now on the web. You can give this to anyone. It's going to work anywhere. And it really wasn't that hard to get on the web. If we decide to make a change, you simply edit the file here. When you're finished, you drag that changed file over. And it will instantly be updated on your web host. We can go to our pages, make sure everything works. There's work, and there's home. Last step is, now that we know we can upload our files, and it will work, you wanna do your final bit of testing. And this is where you're going to view this website in all of the modern browsers, and this is going to include Firefox, Chrome, Chrome and Safari are generally going to be the same, but still check them. In Firefox you can see, it's more or less the same, and this is an advantage that you have being new. Back in the day, it really wasn't always this way. You could view something in Firefox, and it wasn't quite the same in Chrome, and you had to figure out what the differences were, and how to fix that. These days, the browsers are, are quite modern and they are following best practices. So you would continue to view this in Firefox, Chrome, Safari, Opera if you like, though, usage in opera is only about 2%. It's pretty small. And then you'd wannacheck this in Internet Explorer nine, eight and potentially seven, if you wanna support a browser that's two versions back. That one's up to you. If you have access to Windows, that's the easiest way. Open your Windows computer. Access the URL that's you've uploaded via FTP, and see if there are any issues. Now, if you are on a Mac, you can use a virtual computer. Now, there's also a website called BrowserStack that's relatively new, and this will allow you to run cross-browser testing. Right now it's in private beta, but probably by the time you watch it, you'll be able to use it, and it gives you access to all of the various Internet Explorers. And lastly, make sure that you validate your code, to see if you missed any HTML closing elements. So we'll do that right now, before we finish up. I will visit validator.w3.org and I will select More Options, and make sure we're using an HTML5 doctype, and specify the address, and see if there are any errors, and we passed. Perfect. The last thing is, let's validate our CSS as well. So I will click it right here. And now, we're gonna pass a path to, not index.html, but cssstyle.css is where that's stored, as you can see. Check it, and this will let us know if there any errors. And you can see right here, there are two. Too many values recognized on line 138. So, let's view it, line 138, and what's happening right here is, it's not an error, but this validator does not understand RGBA, so we know that is correct. We can ignore that one, and it's because we're testing with CSS level two instead of level three. And the same thing right here. Unknown pseudo-element or pseudo-class last-child. We know we can do that, the validator just does not understand it. So don't simply change your code for the sake of passing it. We're using this as a test, and our tests show that we've done everything right, so we are finished with our first simple website.