Hi everybody. Welcome back. It's time for us to start our final project. I'm really hoping by the time you're done with this, you're going to have something that you feel really proud of and that you'll want to share. Again, our objective is that we're gonna write one style sheet and style three different HTML files. Now, when you get started, I'm going to assume that you have the second peer-graded assignment done. You can feel free to alter that as much as you want, but I need to know that those changes are completed. All right, so let me show you our before's and our after's for where we're going with this final project. So let's look at what we've done so far in this course. We had our first HTML view. Our next one, we made it really plain. Our third one, where we added in some different style. And finally, on our fourth one, it might not look very different on this first page, but where I'm really going to have you focus is on the Teams page, and on this table. You'll be able to see that I have really gone out and put a lot of styling into this table. And the reason I picked tables is because this will be a chance for us to go in and use those pseudo classes. Use those pseudo elements, use some gradients, all those little things that can be a little bit difficult to achieve, but once you've got it done, it looks really good. So let's talk about each one of these little parts. So once again, just a little reminder, make a single style sheet. I don't want a different style sheet for each page, you want one that's going to cover everybody. And we're going to be using pseudo-elements and pseudo-classes. So if you seem a little bit confused about that, don't forget, we've got slides that cover this as well as some of our code together examples. So let's start with the table because that's the bulk of the page. At the very minimum, I want you to go ahead and style the font, the width, and the margin. Now when you style the font, there are a lot of different options you can look at. You can have different font families. You can change the size, the weight, and the line height. One of the reasons I recommend line height, is that when you do that, it's much easier to center the text within the rows if you've made the line height the same as the text size. For your width, I don't want your table to take up the whole page. I want it to take up somewhere probably between 75 and 90%. And one of the reasons I want you to do that, is because I want you to center the table. I want you to play with that margin property. And figure out how you can take up just the right amount of space and put it right where you want it. Next we're gonna look at the table heading. So the table heading looks a little bit different from the other rows, and it really has that important semantic meaning. So by using the table heading tags, we're gonna be able to kind of double up on this idea that we're styling it differently and it means something different. So first, change the background color. Once you get that to work, I want you to try putting in a gradient background color. Now don't forget in order to use gradient, you're going to need to put in some browser prefixes. Next, add a border but I only want you to round the top two corners, not the whole thing, and then also make the bottom border thicker. Finally, when you're done with this, go ahead and add just at least one other property, something that you think would look cool. Once you have the table heading done, let's go ahead and put in some styling for the table rows. The first thing I want you to do, and there's a reason for this, is I want you to set the opacity of the table rows to some value of about 0.8. Somewhere around there. Where you can still read the text, but it's a little bit faded out. Next, I want you to make sure that the first column of every table row is left-aligned and the other two are centered. Now, you may do this styling within your table row elements, or you may be doing it within the table elements, those TDs. It really depends upon how you jump in and try to style this. Finally, I want you to go ahead and put in another pseudo-class. Where when someone hovers over any of the rows, it's going to change from a kind of faded out to a darker color. And I'm gonna show you an example of that before I go on. So if you notice in this table, the text is a little bit faded out from being solid black font color. So that's where the opacity comes in. Now, when I hover over each team name, you'll see that the font gets a little bit darker. I didn't change the font color here, I didn't change the font family, or the type, or anything like that. Instead, what I changed is the opacity to set it to 1. So now when my hover goes off, it goes back to that original kind of faded out value. Each of the table elements can take any amount of styling that you want to give it. But what I do want to see you do is I want to see you style the padding, the font color and background color. And I want you to set the border radius to two pixels. You would never be able to see that kind of indistinguishable or subtle difference on the table. So I want you to put it in, just so when I tell you to do it, you notice that there is an actual change there. Finally, this would be a great chance for you to do something that I haven't covered myself. Part of being a web designer is learning to go out there and search for different properties that you can play with. So I would encourage you to go out and look at text-shadow. It's something I use in my example. So if you really want to try to replicate it, go ahead and try to use it yourself. Once again, we'll be using peer grading for this assignment. And grades will be based on both level of completion and some level of aesthetics. Proper coding standards are always going to apply, but you can specify your preferred screen size. So if somebody decides to take your CSS and apply it to the HTML, you can let them know this really looks best on a large screen or small mobile device. Now, there are actually many, many ways that you could change this style sheet around. And so I don't want you worrying about hitting off every single standard. But if you do decide to something a little crazy, a little different, and something that other people might not understand. I really recommend that you put that near the bottom of your style sheet. So that people looking at your code can really focus on the actual requirements and then afterwards be amazed at your really cool innovations. So I'm hoping that this is something that will really help solidify your understanding of CSS. If you run into problems, you should feel free to use the discussion boards and really ask people anything that you're not quite sure on. Or just share something cool that you got to work. Good luck.
