FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.1 Creating the Markup

[SOUND] And now that you've learned the basics of HTML and CSS, it's time to start doing what you really want to be doing, is building websites. So, we're gonna work together, from scratch. I have zero notes so you're gonna see I would actually go about. Converting a Photoshop design into a real website. So for our design, I visited This is a place you can go to purchase themes, anything from a WordPress theme to a HTML and CSS theme. And you can also purchase. PSD's, and that's what I like to do. If you're not much of a designer, you can come here find the PSD's, and by PSD I mean Photoshop files, for design, covert it yourself and then you don't have to worry about your design skills. So this one was created by Collis Ta'eed coincidentally he is the CEO of Envato. So, if we want to take a look at what we're getting. You can see it's very simple, it looks like it's a grid based, but it's nice and clean and perfect for what we need. So I will now purchase this, and I am gonna use my prepaid credit because I already have an account with themeforest. Next, I am going to open up this zip file that I received, and you can see he has a handful of files here. Now he has white and black themes, we're not gonna do black. I am gonna stick with white so let's take a look at each one. Here's the home page, services. And work. So let's start, simply by converting home. So now to keep this cohesive I'm going to open up our new project directory where I have the basic skeleton that we've learned to use. And I'm going to create a new folder called PSD's. That way we can always refer to them. And I'll take these and drag them in there we are, and now we're all set to get going. So, these next tutorials are going to assume that you do have Photoshop, Adobe Photoshop, installed It's not free, however, if you visit and browse to the download section. You can get a 30 day trial if you don't have it but want to work along. And if you intend on sticking with web design, I really, really recommend that you go ahead and make that purchase even though it is expensive because it is the default for all web designers. So first I'm going to take home.psd and open it in Photoshop. Now, don't worry if you don't have much experience with Photoshop, I'm gonna work through each step but I will assume that you have a modest understanding of, for example, the move tool will allow me to move my canvas and things like that. So if you're not familiar with it, just follow along and it should begin to click eventually. So the way we convert a PSD to HTML is first, we don't slice anything out. We begin by creating our HTML as we always have. So this is a good point to start analyzing how we would create the markup for this as I see things we have a header at the very top, we do have a wrapper, because notice the entire website is centered as we've learned to do. So it makes sense to have some kind of wrapper and then the header. And, we could include this part with the header as well that's just up to us. And then we have, some information about the services they offer. And then finally at the bottom we have a footer so notice this is a very common layout you have your header. You had maybe a banner, and then you have some information below, and then your footer this is quite common for all websites so you should get used to it fairly quickly. So let's get started I'm gonna open up, our project within Sublime and we have a blank slate. The first step is to create the markup, and we're going to take advantage of Zen Coding, which I taught you in a previous lesson if you're also working along in Sublime text,. And you have zen coding installed you can press control option enter, and that's going to bring up this panel right here and what's nice about this is you can write your zen coding, but it displayed on the page in real time so you know exactly what you're getting. For example if I type UL LI you see that it's updating instantly so let's get started. We're going to begin by building a div with a class of container. Let's refer back, and within here we're going to have a header element we know that for sure. So, let's do that. Header, and within the header element we have an H1 tag that says "Black and White.". So we'll do H1, Black+White. And then he also has a navigation section and we're going to place that within the header as well. So, we're going to create a sibling to the H1 notice if I did this it would add within the H1, but we need a sibling. Now we know a nav, will contain a list of navigation links, so I will add a UL. And within the list item here he has 1,2,3,4,5, he has 5 list items. And each list item, of course this should be clickable, because it's a link. So we'll place an anchor tag, that links to nowhere for the time being, and that looks good for now, so I will enter for that to take effect and now I can tag through each one of these. I'm gonna fill these in really quickly. So good, we are done with the wrapper and the header but we should probably, place these two images within it as well. Now how do you convert images that have text because we want it to be searchable. So in this case, he has a background image but for our project we're going to use html to add the text within it so really we just need a section for the image. So for the time being right after, the navigation we'll have a image. But I would like to be able to target it, and because it's the only image within the header, maybe we can leave it blank for now. But if we need to be more specific we can always add a class later and then next right here, this is blank and that means it could be anything. It could be another stock photo, It could be anything at all, he's left it blank for this case. So we will as well the next step is to work on our main content area. So let's use that keyword main. I'm going to create a new div with a class of main and within it, we have three columns essentially. So why don't we separate these. And we'll say, each one will have a div and we'll give the class of grid. And because we know that we're going to use, eventually the 960 framework which we discussed, and that's 12 columns, we can figure this out on our own even though we haven't yet implemented the 960 framework. And let's consider this Its not divided into thirds because these two right here are much wider than this one. So why don't we consider maybe, rather than each column being a grid 4 for 1/3, 4 times 3 is 12. Why don't we say 5, 5, that's 10 and then we need 2 more, which is 12. And we can play around with it if we need to. So let's say grid 5 and why don't we create 2 of those. Now within each one is going to be an H1 tag and I'm going to leave that blank. And then after that we have just some gibberish text. So I will add a paragraph after each one as well. I'm gonna hit enter so I can tab through these. First we have services we offer. And within here we're gonna add some lorem text, and the same thing for how we work. Notice it's just a matter of going back and forth and converting it. So now let's do this last one and this is a quote. So I can either press the letter T or click right here to select the text tool. And I will click, and highlight that so I can copy it. And now we're gonna create another, div and we're gonna try out grid 2. Though that might still be a little bit two short but we'll play around with it. And this grid is gonna contain a block quote and within the block quote we'll have a paragraph tag that contains, that text like so. Isn't zen coding really neat? After the block quote, we have some information about who said it, but we're gonna come back to that shortly and then, if we come back here we have read more buttons, under each column, so we'll add those as well. We'll place that within a paragraph tag. And it will be a link, Read More. And because I want know I want to style these specially, I'm going to apply a class of button, like so. Next, I'm going to come down and paste it for the next grid. Notice I haven't yet even looked at this in the browser. I don't need to. Now we're going to. Copy this, and why don't we just grab all of this text and place it in like so. And because he had two paragraphs, I'm going to make sure that I do the same as well there we are that looks clean and, he has the exact same thing for the second column. So we'll do it once again. And I'll copy and paste that in and in this case it looks like he has one more at the bottom It doesn't really matter this is dummy text It's simply a way to represent what a real website would look like. Alright and that section is done so now let's take care of the footer. And all he has here is black and white themes by theme forest so we'll place this at the bottom, right here. Now I want you to notice, can you see how very quickly once you have lots of divs, it can be difficult to determine which div is closing which. And that's why we use indentation, because I can easily tell that this div is the closing div, for this one. However, if you need more, perhaps you can't see what this one closes, you're always welcome to add comments. And we do that with this syntax and within the middle you can say end container. This is purely preference I find I'm forgetting what a closing element is. Now right here, let's add our footer, and within the footer, I'll scroll down just a touch, we are going to have a simple paragraph tag that contains that text. What we can see here is, should black and white be clickable? I don't know. We would have to ask the client, but it is bold. So we're gonna make that strong, and then likely Theme For Us is a website. So we should make that clickable. So first I will, wrap that and we do know where that one is going. So we can. Put in the link right now, next, black and white, we decided, should be strong. So I will wrap that within strong tags as well and we do need to add this text right here, some slick phrase would go in here to sum up what the business actually does and stands for. So let's come back to the top. And because we know this section is sort of a banner, why don't we wrap it within a div and within here, just to begin I'm going to have a paragraph tag and what does the paragraph say? This text right here. And there we are and then rather than using an image here, why don't we apply this big image as a background because it's really not important to the website, it's a background. So let's remove that entirely. Now, just as we noted that each of these sections right here is a grid, we can tell that this one right here is the width of both of these grids below combined. And we hypothesize that each of these is grid five so that would mean this would be grid 10. So for now let's add that in. In addition to banner, we'll give it a class of grid 10 and we also know from working with 960 in the previous lesson. That the wrapping, class should be container_12. Then, after this, we can have our empty box, and we'll place it right after it, div, grid_2. And we'll just leave that blank because presumably, it would be filled some text or images or links. But we don't know what it is for our hypothetical client, so we're gonna leave it blank, then they can tell us later. All right, this looks good for our home page we did it fairly quickly now, is the point when we get to view it in the browser. And here we are and you can see nice and clean mark up. Looks perfect. This is what you want to see. Because you always think if I were to disable CSS and JavaScript and images, would my website still be understood by the reader? And in this case, absolutely. So in the next lesson, we're going to get started slicing our PSD.

Back to the top