FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.7 Assignment Solutions

[SOUND] Welcome back and today, we're going to work through our quiz. So yesterday, I told you that you needed to build all of this without looking at my code first. So let's get started building it. I'm gonna go and move this to the left side of my computer. That way, I can bring up the Editor on the right. Now, if you're a Mac user, this isn't built into the Mac by default. You can download an app called M-O-O-M, Moom, and that will allow you to do this. Next, I'm gonna get rid of the side bar by going to View > Side Bar > Hide. So now let's get started converting the markup that you see here. First step is we have my first website. So I will copy that, and that should be placed in a top level heading. It is the most important thing. This is my website. Next, we have just a little bit about our website, and that makes sense to place it within perhaps a paragraph tag. So we'll do that now. Next, we have a list of things I enjoy. The correct way to display this is using an unordered list. Remember, the order is not important, so we don't use an ol, or an ordered list, we use a ul. Next, we have a subheading here, and this is where we will use either an h2 or an h3 tag is appropriate here. In this case, I've chosen h3, but if you did h2, that's right, too. Here, we have two quotes. So I'm gonna copy each one and remember to use a blockquote. Now, while you can get away with pasting in the quote directly within the blockquote, technically, you should use a paragraph or some other styling element within it. I typically use a paragraph element though. Next, I'm gonna copy this and duplicate it, and we'll replace this one with and another. Good. So that markup looks pretty good to me. I'm gonna open this in a new tab, and now you can see very similar, but we need to add a little bit of styling here. So to do that, I need to reference a style sheet. So I will bring back the sidebar, and we wanna reference this empty CSS file that I created. Let's do that now. If I expand this, you can see we're using the link element to link to a style sheet. We set the relationship to a style sheet, and then the href is going to be a path to where this file is stored. In this case, we're in the root, so we're gonna look in the CSS folder and find style.css. Next step is to open up style.css and get started, and once again, I will hide the sidebar. If we go back our original, it looks like the color here is grayish. You could use any color here. It's not important that you got exact value that I used. I'm gonna reference the body element because that is our parent-most element here. And that's very common for using things like background colors for your website. Background, e3e3e3. Now you could also use background-color. Both of those will work in this case. I'm going to come back and refresh the page, and now we have our grayish background. The next step is it looks like our headings are a different font than what is used by default. By default in browsers, they use Times. In this case, it looks like it's using a sans-serif font, probably Helvetica or Ariel. Now if we look though, it also appears that all of the text is receiving this font, not just the headings, if we come back. So we can do it within our body element because that's a nice way to style the body and everything within it. Remember, when you're working CSS, all of your styling will cascade. So in this case, if I apply a font-weight of bold, that's going to filter it down to all of the properties unless one of those properties overrides the body element. In this case, you see it's being applied everywhere. So now I'm gonna set a font family to san-serif, and that will default to Helvetica or Arial in the huge majority of cases. Good, we're getting there. The next step is our blockquotes has centered text, and they also have a border around them. Okay, let's do that. I'm gonna target all blockquote elements, and I'm going to make sure that they have a border. And what is the border? It's gonna be white, but how wide should it be? We'll say one pixel. And next, should it be dashed, should it be solid? How do we do it? We have to explicitly state we want it solid white. I'm gonna refresh, and there we are. But if we come back, remember, the text was centered. So we can use a property called text-align. Now this will accept a handful of values including left, right, center, or justified. Now justify is similar to maybe if you're reading a book where all the text will go to a certain mark on the right side of the page. And the way they do this is by slightly adjusting the space between each word to make sure that every single line ends at the exact same spot. Generally, in the web design industry, you'll find it's frowned upon. Web design and web copy is not the same as print. So usually, you wanna stick with left. Try not to center all of your text. It looks amateurish, but in this case, we'll get away with it. I'm gonna come back and refresh, and that's looking good. Now, couple more things we need to do here though. I want you to notice the border of our blockquote lines up perfectly with our headings. Lines are important in web design, but in this case, it's not. And why is that? And that's because it is picking up the browser's default style sheet, and the default styling for a blockquote is to indent it every so slightly with a bit of margin. They do that by using margin left, but in this case, I want to zero that out. I don't want any of it. So I will set it to zero, and if I come back, refresh, that's looking a lot better now. So good job. If you've gotten all of these right, pat yourself on the back. You have one last thing though. I'm going to expand this and note that our example first website is centered, whereas what we have right here is taking up all of the available space, as you can see with the blockquote right here. So we need to specify a width to our website and make sure that it is centered. Now we could have applied this to the body element, and we could have said width, 600 pixels. It doesn't matter what value you specified, as long as you understood that you needed to limit the width. I'm gonna refresh, and now can you see that it's no longer taking up all of the available space. It's only taking up 600 pixels worth. And then we're gonna use the trick we learned in a previous lesson of specifying that the margin left and the margin right have to be identical in width. And now, that centers that on the page. Now, while we could have done this on the body element, and this is perfectly okay for simple websites. What's more common is you'll see developers use a wrapping div. So they might do something like this, div class equals wrap. And then they will surround all of their primary content within. And then rather than using the body, they will place the styling within the parent wrap. Now if I refresh, we're getting the same effect, but this is a little bit cleaner. For larger projects, you'll want to do this in most cases. So the last thing we'll go over. You might be wondering why did I use a class rather than an id. Now if we refresh, that won't take effect anymore because remember, we use periods for classes, pound signs for identifiers. Now, we could use an id, and that would probably be okay. In fact, most of the time, this will be okay. However, if you anticipate yourself needing this styling for anything else, it's always a good practice to use classes. Now there are a variety of reasons why this is true, a lot of them are a little higher level when it comes to cascading and selector weights. I don't want you to worry about any of that for now. Just think about it from the basic standpoint of will I need these stylings again. And if yes, use a class. So good job if you followed along. If you did all of this on your own without seeing the answers first, excellent work. This is very simple, mind you, but it is an actual website that you could upload to your web host. Now in the next lesson, I'm gonna teach you about CSS floats.

Back to the top