4.6 Reproduce a Website Fragment
Today we're going to take a look at fragments. This will teach you the beginning process of converting designs to HTML and CSS.
1.Introduction1 lesson, 00:55
2.Week 17 lessons, 50:14
3.Week 28 lessons, 56:02
4.Week 37 lessons, 1:22:49
5.Week 43 lessons, 29:23
6.Final Project5 lessons, 1:19:55
7.Closing Thoughts1 lesson, 00:39
4.6 Reproduce a Website Fragment
[SOUND] Welcome back. And today we're gonna take a look at fragments. And this will teach you the beginning process, of converting designs to HTML and CSS. So let's open up net tuts, and notice here that we have an article for each posting. So if we scroll down here, you can see that they all are duplicated. You have your image, then you have some meta information with the category, the tag. We have the title, some information about who posted it and when, and then you have two paragraphs as well as continue link. So our job today, is to recreate this exact bit of code from scratch. And this will be a good time for you to see, if you can do it on your own. So if you'd like, pause this video and try to convert any one of these fragments. You don't need the whole website. Just this simple fragment here. See if you can recreate that on your own. And when you're ready, let's get started. And let's get started. So the first step is, we need to get any images that we require. And the only one in this case is right here. So I'm gonna right-click and choose save image as and it's gonna go into our working directory, images folder, and I will call this thumbnail. Okay? Good, that's been saved. And now, really, that's all we need. The next step is to create the markup. So I'm gonna open up Sublime Text. And I'm gonna move each of these to the left and to the right, respectively. And now we'll get started. If I open up index.html, I can hide the sidebar by typing Cmd+K, Cmd+B. Or by going to view, sidebar, hide sidebar. So the first thing is, we know this an article. Each of these are articles so it makes sense to wrap them within an HTML5 article element. Now, within it, we first need the thumbnail. So we'll do that now. We know to create an image tag. And that's gonna link to the img directory, and let's see what we called it, thumb.png. And we also have to provide it alternate text as well. An alternate text, is gonna be the name of the posting. Next, I'm gonna copy this because I'm gonna reuse it right here. So we will place the title within an h2 tag. Now we could do h1 if we want, but I think in this case, we'll stick with h2. And I'll paste that in like so. If we wanna clean this up, maybe put this on its own line, cuz we don't have too much real estate here. Okay, so now we have the thumb nail, and the image. But, we also need to have the meta information at the top, and I'll create a UL with a class of meta. Now notice that I'm using list items here, because this is a list of information about our post. Next, we have the list item. And we have articles. Notice I'm getting it from right here. And the next list item is called Web Roundups. But before we move ahead, notice that these are clickable links. So I need to go ahead and add an anchor tag. And I'll have it linked to nowhere for the time being. Now I can duplicate this, and we'll do the next one, which is Web Roundups. And we will skip the rating because the framework that this website is built on, WordPress uses a plugin for that and that's beyond the scope of this tutorial. So we'll skip that part. So now we have meta information with Articles, Web Roundups, and then we have the title. So we're all the way to this point. Now we need to have some information about the author. As well as when it was created. So if you ever need a hint, you can always in Chrome, right-click, choose inspect element, and you can see what the original author did. In this case, Derrick, who works for Invato, looks like he used a div with a class of post meta and within it he has an anchor tag. And he's simply chaining all of this together. And this is something that is fairly common because, in this case, it's not a list of individual links, it's actually a phrase, Siddharth on September 23rd with 44 comments. So, why don't we use a paragraph tag? And I'm just gonna write it out for now. Now we need to take a look at a couple things. First, some of these are links so notice the word. On isn't a link but 44 comments is, because that's gonna link directly to the comments. And the author's name is clickable, cuz that will take you to the author's page. So if I move back, I know that I need to wrap the name and the number of comments with an anchor tags. And again, this won't just link anywhere. We just wanna set up the appropriate links, good. Now secondly, remember in a real world blog, this would be generated dynamically. But for now, you're just learning about markups, so we can hardcode all of this in. And finally we have the introduction, so we can wrap that within p tags. It's also common you might see somebody wrap this within something called text, or you might see body. That's common too, and that's when you need to target. That text specifically and nothing else, and I need to make sure that I wrap this within paragraph text and clean this up. There we are, so now, we have our body and we have our two paragraph tags. And then finally, we have this continue. And so we'll wrap that with an anchor tag. And the href is going to be nothing, the value will be continue. And if you want, we can either wrap this within parentheses like so, or you could do it within your CSS. As I think that's a stylistic thing, maybe we'll have some fun and put it in our CSS, though it doesn't really matter. All right, so notice not once have we looked at our page while developing this markup. We don't need to. Right now, we're just creating markup. We'll do the design later. So now, we are finished with it. Let's go ahead and view what we have in the browser. And here we are, so you can see this is clean unstyled, markup. The next step is, to make it look like what you see here using CSS. So I'm gonna open up my style sheet. I want you to note that we are linking to the style sheet as per usual. So the first step is, we need to style our wrapper and in this case we don't have a real website so we will use the body as a wrapper, and I'm gonna set the width to an arbitrary volume. I could measure this but we don't need to, 600 pixels and we'll make sure that the content is centered on the page. Now I'm gonna zoom out a few clicks, and reload and now you can see that has been centered. Now also if you'd like to provide some padding, you could maybe set 20 pixels on the top and bottom, and auto on the left and right. If I reload, you can see that's taking effect. And this is a new syntax. So we know we can do margin-top, and margin-bottom of 20 pixels, but isn't that redundant. Well there are also short hands. And there's two different forms, one, you specify margin. And then you can go like a clock, top, right, bottom, left. So if we needed to convert this right here, we would say top is 20, right is 0, bottom is 20 as well, and left is 0. So now, we have successfully converted it, but we can even reduce this as well, because notice this is fairly common where your top and bottom will be one value, and the left and right will be a different value. So we can reduce this even more so by doing margin-top and bottom for the first param, and left and right for the second param. So this is identical to this. Now, there's one more form. I don't wanna overload you, but if you wanna do margin with three values. So if I did 20 pixels, 5 pixels, 10 pixels, this means 20 pixels for the top, 5 pixels for the right, 10 pixels for margin-bottom. And because we did not specify left, the right value will be substituted. So this is the exact same thing as this. Don't worry if that seems like too much for now, you can get away with simply using this form. So I'm gonna remove all of this, and I'll get rid of this one as well. And now we have some margin of 20 pixels on the top and the bottom good. What's the next step? Well we know, right here, that this image is floated to the left. So this may present a little bit of confusion for you because, yes, the image is floated to the left, but notice, everything below it is blank. So how can we do that? Well, first, let's simply try floating the image. So, in this case, we don't wanna target. All images, because what that's gonna do even though it will work in this instance what that is going to do is, find every single image in your website include and you certainly don't want that. So we can restrict it to only the image within the article element, and if you need it to be more specific, because remember you can have multiple article elements on your page. Page, you could provide that with the class. In this case, let's keep it generic. And I'll say, find all images within the article. Next, I'm gonna reload the page, and now you can see that has been floated to the left. But as you can see, there's very little room and we need some spacing. If we come back, you can see. There's roughly 20 pixels. So you could measure this, but again, we're mostly just having fun. So I'm gonna provide some margin-right push the text away. And now if I reload the page can you see? That's been pushed away a little bit. If I zoom into full size that looks about right. Maybe we can adjust it to 25. But notice now, this is what I was referring to. We floated the image to the left successfully but then, once the text gets below the image, the float is no longer effective because the image has completed and the text continues as it would before. So what we really need is a way to have a whole block to the left, that way anything below the image is blank, as you can see right here. So let's see what the original creator did. I'm gonna right-click, inspect element, scroll down a touch, and if we hit the magnifying glass. I can click on the image, and now can you see that he has a div with a class to post image? He has an anchor tag, because you can click on the link, so we need to make sure that we add that to our mark up. Then he has the image itself. And then he wraps the entire main content area, within a div with a class of preview. And now what you can see here is, if we scroll back up, the post image is floated to the left. So that entire block is floated to the left. If I were to remove that, you can see how that would affect things. It would be all the way up there. And next, if we scroll down, the preview is floated to the right. And again, if I change that, you can see how that ends up. So, now we're starting to understand it and if we need to account for this margin again, and you need the specific value for some reason. Remember, it's all available here. You click on it, and now we can see it's floated to the left, and margin-right is 30 pixels. Okay, so let's go and update our little project here. First, margin-right is not 25 like we estimated, it's 30. And secondly, this image needs to be clickable. So I'm going to add that in right now, and we'll do it right here. Now if I reload, it looks the same. But you can see that it's changed to a cursor? And when I click on that, that would take me to wherever the link was directing to. Okay, good. So now let's fix this issue right here. I'm gonna come back and revise our markup now. And we're gonna wrap up all of our main content area. Within a div with a class of preview. And notice we're not using anything specific here because we only need the div for positioning, and that's what a div is for, only for positioning, it doesn't have a semantic meaning. And now at the very end just below the body, and just below continue, I'm gonna close it out. And lastly I need to indent everything so we have nice, clean, and dented markup. So if I reload the page again, remember, div has no visuals. It's only for formatting again. So now we're gonna say, preview float to the right. And now if I reload, you can see that it's floating to the right, but now it's placed on its own line. Now why is this? And I guarantee this will trip you up it first, because you're thinking, hm, I'm floating this to the right, but it still seems as if it's still taking up all of the available space. And it's because a div has a default display of block, and what that means is, that box is gonna take up as much space as it can on the line. Right there, you see that's a huge box. That wide box is not small enough to fit up in this area, so it's forced onto its own line in order to contain that whole box. So watch what happens though if you explicitly state a width, and maybe you say 400 pixels. Reload, and notice that's now floated to the right. If we remove that. You can see we have it like before. So now we are definitely floating it to the right. But it seems like it's still too small. And if I were to make that 350 pixels, now it's small enough to fit up here, so it jumps up. So now at this point we can either return, and figure out exactly what the width is, or because we're mostly estimating here. You can play around with it a little bit if you like, or you can be more mathematical and we can say, all right well we have 600 pixels worth of space to work with. Next I know my image is 200 pixels wide. All images on nettuts are 200. So we can say 600 minus 200 is 400 pixels. But remember, we can't do 400, because we also have to factor in any padding and margin that was applied to it. In this case we applied 30 pixels worth of padding. So 600 minus 200 is 400 minus 30 is 370, which is the exact value that we've applied here. So now I'm gonna remove the background color of red, because we don't need it anymore and it's starting to look a lot better. The next step is to set our font. Here, it appears that we are using Helvetica or Arial. So we'll set a font family and you've learned this by now of sans-serif. Which will default to the most appropriate font on your computer, which is again, likely Helvetica or Arial, and now that's updated. Next let's figure out what the font size is. So I'm gonna right-click, inspect element, and make sure I'm clicking the h1, and we can go to computed styles. And if we scroll down here, we can see font weight is bold, font size is 39 pixels. So we'll do that now, and we'll say article h2, font size is 39 pixels. So a couple things here is we are limiting this too only in h2 within an article. However, if you anticipate having lots of h2s and they all should be this font size, you should remove the article because you don't wanna restate yourself over and over. And, in this case, you would place it maybe at the top for your general styling. Let's reload the page, and now that's that correct size, but also it seems like the line height is a little too high. And by line height, remember, we can specify the line height of each line. So if I reload you can see that adjusts. If I make it a really large number. You'll see the difference there. So, if we set it to one m, this is another unit of measurement, that is the width of the letter m. Or another way, again is to go back, inspect element and let's figure out what the computed line height is. In this case, it's 43. So, notice it's just a touch higher than the font size itself, and this is fairly common. Now, I'm gonna reload and that's looking good to me. The next step is to take care of our meta information. So, let's do that now. And what we can see here is the anchor tags are green. But they're not always green, so if we go to the author information, this link is gray. But in general most links in the body, or in the text will be green, so we can set that generally. And then we can override that whenever we need to, and that's the advantage to the cascade functionality of CSS. So, I will click the magnifying tool and select an anchor, and find out that the color if I go to computed styling is this right here. So, I can paste that in. Color there we are, and that's looking a lot better. Now, we also know though, that this text is italic, but that shouldn't be the default. So I don't wanna place it within my general styling. Instead, I'm gonna override it, and only place it within the meta tag. So right here we can say meta a, font-style italic, reload. And now that's been made italic. Next, we need to figure out what the font size is. So I'm gonna click it again. And here we can see that the font size is 14 pixels. So we'll place that right here, because that is going to be specific to this section. Reload the page. That's better. And now these need to be displayed in line. So if we come back we can see that we are using list items. So I can say. Meta li display inline, and what that's gonna do is, make it into a horizontal set and it will also get rid of any bullets. Next we need to provide a little breathing room after each one. But, also notice if I zoom in can you see that the dividers are backslashes, and something you may be tempted to do. Is right here to do something like this. And then reload the page. And sure enough, that seems to work, but that's a very bad practice because this is a separator, it's styling, and it has no purpose within your markup. You'll see people do this often when they're creating navigations. They'll use the pipe character to separate each one. Instead we're gonna use our CSS. And we can use some fun pseudo classes to do this. So I will type meta a:after. And now were gonna add content after. What content are we adding? A backslash. And now if we load the page it's gonna look a little odd to you, and this is a rarity. So, it's very common that a backslash will refer to an escaping. So it's thinking that we're saying that, this character right here shouldn't be considered the wrapping quotes for this character. It's assuming that we are literally referring to a single quote instead of the closing wrapper. And that's why you can see below, it's changed the syntax highlighting and this is a helpful. Helpful way that syntax highlighting can point out errors to you. So what do we wanna do if we wanna say, don't treat this as an actual backslash? We're gonna escape that, as well. A little odd, but it is a rarity. And now you can see that has been added. Next, we need provide some breathing room, because if I close this out, again, it looks like it has some space right there. So why don't we give it some padding. And we'll use the shorthand. And we don't want any padding on the top or bottom, but maybe 10 pixels on the left and right. And now if I reload the page there's a little more room now, but you know what, I think that's too much. So I'm gonna reduce that down to five. And the next step is, if I zoom in again, notice that it's treating this backslash. With the exact same formatting as our anchor tag. So what if we instead apply this content after the list item itself, rather than the anchor tag? Reload and now, that's receiving the formatting of the list item and not the anchor tag. Again though, I think that is too much spacing, and also it's the wrong color. Let's figure out what the right color is. Inspect element. And notice here that the original creator is using a span tag. That's okay too. There's lots of ways to skin a cat remember. And we're gonna get the color, which is 999. So we're gonna take this right here and say color 999. And also I'm gonna reduce the padding to 2pixels on the left and right. Reload, and that's looking a lot better. The last thing I see now, is notice that there is no backslash after the final item right here. But there is prours right here. We need to get rid of that. So how can we specify that the very last list item, should not have anything? We can say meta, get all list items, but then we're gonna reduce that to a subset. And now we're only selecting the last child. So that will only get, in this case, the very last list item, whether that's this one or, if we added another one, last child would then select this one. Now we need to say after, and we're gonna say content is nothing. So I'm gonna set it to that. Or we could also say content none. Reload, and now you can see that's disappeared, good. So this is an excellent example of how we're using CSS to create the dividers. That way you don't have to return to your markup, if you need to change the layout. If you wanna make it a [INAUDIBLE], simply change it and that's going to be updated everywhere. Next is, you see this extra spacing we have? And you should know this by now, ULs will add some extra padding. Remember here? Padding start. So let's make sure that we zero that out. And we'll place it right here, meta padding left, zero. Reload and now that's been reduced. And finally we need to get rid of some of the default margin-top that is applied to all h2 tags. If I go to compute it, margin-top default of 32. So this is something you might be noticing now is, it sure does seem that we are having to override the browser defaults quite a bit. Wouldn't it be great if we could start with a blank slate? Well we can by using a reset style sheet, and I'm gonna teach you about that in a future lesson. For now, we're gonna come back and say article h2, we don't wanna apply to all h2. Only the article h. So we will apply it right here. Article h2. Reload and that's been pushed up. So we're almost done, just a little bit more. The next step is you see if we zoom out, this is wrapped within a little box. So let's do that ourselves. I will come back and you'll see that we have added this information right here within a p tag. You could also use a div, there's lots of options. I'm gonna add a class of post info. Now, again you might be thinking why are we doing class and not id? And it's because, if we did id, remember in a blog, this would be repeated, over and over. This exact markup would be repeated. For as many postings as you have on your website. And in that case, every posting would receive an id of post_info, and you can't do that. If you wanna group them, you use a class. Now we can target it at the bottom. And we'll say post_info. And now we'll apply the background color. And the base color. So, we know the base color is 999. Why don't we figure out what the background color is? Inspect element and we're gonna get this whole div right here, and we can see the background is F3. So, now reload and you can see we do have that. But there should be a little bit of breathing room all around it. So, we'll do some padding, 2pixels worth. Reload and that looks good to me. If you wanna add a little bit more, you can. And next, we can see that we're still using the green text, but that's not being applied right here. They're using the exact some number throughout color all throughout. So let's update this to post_info a and we have a couple options here now. So, one, I could say color, should also be 999 and if I reload you'll see that takes affect. Because of the cascade nature. So right up here, we have a is one color. But now down here, because we have applied post_info, this will override it. Now, in this case, if we also did it here, we would override anything above because that's the way CSS works. The lower it is on the page, more likely it is to take precedence. So let's see what would happen if we did post_info at the top, and then anchor at the bottom. Which one will take precedence? Green will. Now why is that? And that's because. This is taking effect even though this is lower on the page, because there is more weight, what we call weight. Without getting into it too much, every element, whether it's an id or a class or a tagname, receives a specific amount of weight. And that's how we use the cascade nature. So you can say all anchor tags should be this color. But then if you override that, you can say all anchor tags within post info. Well that's a little away. We're being more specific, so this is going to take precedence. So now that's looking better. The last step here is, there shouldn't be an underline either. So we're going to remove that by doing text decoration, at the very bottom of none, reload. And now, that's looking good. What about when we hover over it though? Can you see when you hover over it, it changes to a different color? That's easy, post_info a hover and, in that case, we'll make the color and we'll just assume it's black. And now, if I hover over it, now that's changed to black. Also, the font size is likely gonna be the same font size as we have up here. So we can check that and see if 14 pixels, and also if we come back we can see that it's also italic. So it seems that the exact same values we have here, will apply to the post_info. And I'm gonna make sure I preface that with a period, so it's treated as a class. And now that's receiving those values as well. Next let's see what is happening here, where we have all that extra space. And that is because again. This is set to a display of blocks. So it's gonna take up all of the space available. If we wanna overwrite that, one way and we call this shrink wrapping is you float it to the left and that will make sure that it only. Contains exactly as much as what's contained within the element. Reload, and now you can see that's taken effect. But now, because we have floated it, we've sort of taken it out of the flow of the document. And now this is popping up, which is odd. But we can fix that easily by getting the body, and making sure it clears anything that's above it. So get the body, which is what we have right here. And make sure that we clear any floats that are above it. Reload and now that's been pushed down. And now can you see that we've shrinked wrapped this? So now the text, as soon as that cuts off, so does the wrapper. Now, we need to get rid of the spacing right here, and that's supplied to this h2 from the browser by default again. So we can look for article h2 and now set the margin-bottom to 0. Or if we want we can override it and say margin-top left, bottom right 0, and now that's been pushed up. So now we're getting very very close, just a little bit more here, we're gonna focus on specifics now. Notice how this meta information here lines up perfectly with the top of the image. But, that's not the case in our situation so let's figure it out. Inspect element, and now we will click on Preview. And click on the UL. And can you see? This will wrap a little box right around it. You'll see right here, a big box. And now you can see there's some of that spacing above. And what's happening is it's supplying default margin top to the UL. So let's get rid of that, margin-top is zero. If you wanna see that take effect immediately in the browser, you can use element.style here, to reduce that like so, and now that's lining up nicely. And the same thing here, it's applying 1em after. So let's see, margin-bottom, if we set that to zero, that's gonna push that up as well and that's more like what you see right here. So we will do that as well, margin-top. Why don't we set margin to zero all around. Reload, and you know what, that might be a little bit too much. Let's come back. Yeah, there's a little bit of space. So I'm gonna say margin-top is 0, right is 0, but bottom is going to be, let's say 10pixels worth. I could measure, but I think that's close enough. Maybe reduce that down to 8, good. So that's lining up. Our heading is looking fine. It looks like the distance between each letter, though, is a little bit reduced compared to mine. So we can use letter-spacing. And if that's going to apply to all h2s, I need to place it up here. Letter spacing, and why don't we set it to negative 1pixel. This is fairly common. And that just gives it a little more tightness. So that's looking really good. The final two things we're gonna do is float this. We're gonna change the text color. And also notice here, because we applied a font size. To the anchor, but not the post_info text itself. That's getting a different height. So, I'm gonna go right here to post_info and explicitly state that the font size should be 14 pixels. There we go, that's looking a lot better. And now, let's get the color of the text, and I'm thinking that's the same color as what we have right here. But let's make sure just in case. And we have p go to computed styling color. It is a little bit different 5757. So we will go to body, color, 5757. Reload, and that's been changed, and the font size is gonna be a little bit different as well. Let's grab that and come back. Font size, that is 14pixels too. So notice, if we go right here. Man that seems like we're stating 14pixels quite a bit. So maybe you should consider targeting all paragraphs at the top generally. So we could say p, font size, is 14 and that's gonna be the base font size for all paragraphs. So then I can remove this. If I reload, we're still getting that same effect. Next, we're going to adjust the line height, because it's a little bit higher here. So, Inspect Element, and compute its size, line height is 21pixels. So we're gonna set that as the default as well, line-height, 21pixels, reload. Okay, that's looking a lot better. Now continue what we have right here. That should've been floated to the right. And we have it, and notice there's no way to target it. So why don't we apply a class of continue. Now you might be thinking what I thought that was a bad practice to name a class the same as the value. But it's not, it's just convenient. You can change this to read more, and this will still make sense. It refers to the element that will continue on to the post. And now, within the article, we'll place it right around here. And you'll see how quickly it becomes important to organize your code efficiently. Now it's also common, instead of doing continue, to use a class name of more. That's fairly common, as well. Float it to the right. And then also note if I cancel all this out. That continue here is an anchor tag, and it's wrapped within parentheses. So let's style that accordingly. I will come back and let's look at what we have right here. Right there the font size is too high, so we'll adjust that, and again it probably makes sense to abstract this 14pixels out. So we're not restating it so often. Why don't we do that now? I'm gonna remove that and right here we will also state that the font size is 14. Or you could bring it down here as well. And next let's go ahead and add the parentheses on. And we can use our helpful before and after pseudo-classes to do that continue. And notice here we're using some extra weight. To target only the continue element that is within article, or the continue class. In this case I don't think we need to be that specific. Don't be more specific than you need to be. Next, we're gonna say continue, after and we're gonna add content a closing parentheses and then continue before, and we're gonna add an opening parentheses. There you go. And it's that easy, believe it or not. Let's see what happens when we hover over anchor tags by default. And see, it does change color. And we will just change that to black. So we'll set that by default. When you hover over an anchor tag, set the color to black. Let's reload ours. And now when I hover over this, you can see the black color take effect. And because we did the same thing within post_info we can go ahead and remove that from our stylesheet. So right here let's get rid of that, because we already are stating that. Okay, so good, that's gonna finish it up for today. There's some more tweaks we could make. But you can see with just a little bit of effort and checking, you can recreate what you see on the web really quite easily by, one, trying to create your own markup. And don't always do exactly what the developer of the webpage did. Maybe you can do it better, maybe you can't. You can always refer to it for advice. And then using developer tools. In Chrome you can right-click and choose inspect element. In Firefox you can download an extension called Firebug which provides much of the same functionality. In fact, it's sort of the original when it comes in inspecting web pages. So good job, and that's gonna finish it up for today.