Hi, everybody. Welcome back, it's time for
another homework example. What we're going to be doing this
week is adding even more style to the pages that you
started styling last week. So once again the objective
of this assignment is that I don't want you to be
changing the html at all. I want you to either create a new style
sheet or update last week's style sheet so it can be used on three
different html files. When you get started it's very important
that you've completed the first peer graded assignment. I'm going to assume that
you have it done and so when I talk in this video about
the different changes I want you to make. You can either alter that previous
homework assignment, or you really can start completely from scratch if you
weren't happy with your earlier work. So let's take a look at the before and
after for this assignment that I want
you to try to achieve. This was our page when we first started. In homework one,
you took it from here to here. Still very simple, but just much cleaner
because we added some background color, some color fonts, and
we got rid of those images. What I want you to work on this
week is really changing things and making it really styled
as opposed to just clean. So let's take a look at what I'd
like you to work on in week three. As you can see this looks like
a completely different site. The images are back in, I've added a
background image for a navigation bar and something that isn't necessarily easy to
see when you're just looking at paper, I've added a new class that highlights
which page we're on right now. So if you look, the home link is highlighted
because we're on the home page. If I click on history,
the history link is how that it because we're on the history page and
then the same way, the team's page. So this is what we call the current
page that we're looking at. And so you're going to be styling this
to kind of letting your viewers know where they are on this page. So I'm going to go ahead and
go through and talk about each of the tags I want you to look at in order
to complete this assignment. So when you get started,
you're gonna leave that HTML code alone, and you're either going create a new
style sheet, or you're gonna go ahead and update the one you used before. What you're going to need to work
on specifically are these elements. You need to work on the body,
the header, the h one, the links, and then I have three classes called active,
left, and right, and finally, you're going to want to put those images back in that
were in the left hand side of the page. So first, let's talk about the body. By default, your browsers put in some sort
of padding and margin, but I want you to overwrite that and put something that
will look consistent across all browsers. You can also feel free to adjust the size
of the text, but that's not required. I know I did because I just found
the text a little bit too small. Next, go to the header. The first step is to change the background
color and see if you can get that to work. Next, you're going to want
to add a background image. And to be honest, this will be the trickiest part
of the whole homework assignment. Because sometimes it's not always clear
where you can find the images and where you can't, so make sure you check in some of the other
resources if you get stuck on this part. Next I want you to change
the font color and increase that font size a little bit more. Now here again is something that's
new that you didn't learn before. I want you to style the links that
are in the navigation section but only those links. Not all the links in the page. You don't need to recreate
my example exactly, but I do want your links to
be nicely spaced apart, they should have some background color,
rounded borders and no underline. Make them look nice. Next make sure you saw that
active class I talked about. That's how people will be able to
know which page they're looking at without having to look at the URL. Now another thing that your going to need
to work on is this idea that our page has a left and a right class to it. Now in order to get things to go next to
each other your going to need to mess with the display and possibly float
depending on how you implement this. So make sure you change them so
that they're side by side, and change that background color for
the left class. You may have already done that
in the previous homework, but if you didn't make sure it gets done now. Finally, we want to get
back to those images. First, you need to put
the images back in because, hopefully in homework one, you set their
display to none, which means they're gone. So put them back into something so that
they'll stack up on top of each other. Next, make sure that they're
centered within that left class. I don't want the pictures to be all
the way to one side or the other. And, while you're centering them,
make sure you put some space between them, on the top and bottom, too. Once again, we'll be using the peer
grader to evaluate your work. Unlike before, grades will be
based on level of completion, and somewhat more of how your page looks. We wanna make sure that you're not
putting things that are hard to read or that are really kind of squished together. So if you get the chance, make sure you run your page through
some different accessibility evaluators. So there was wave and there's webbing. There's different places you can go. But this is the really nice
part about peer grading, your peers can tell you whether or not things
don't really have the best color contrast. Now again,
proper standards are going to apply. And this is particularly important when we
start talking about advanced selectors. I found that sometimes people throw
everything they can possibly think of into their style sheet, and
they just hope, hope, hope that it works. We are gonna take points
off if you try to do that. Now the final thing I do
want to mention is that I know that people are coding
on different devices. So when you submit your code,
make sure to feel free to say my code only really looks good on a big screen,
or on a phone, or something like that. Taking care of different screen sizes
is something called responsive design that we don't handle in
this particular course. So I don't expect you to make a site
that looks great on every platform. What I do expect you to do is really
own the code that you submit this time. Make sure you know exactly
what each line is doing and feel comfortable changing little parts and
feeling like your page won't break. Again, if you run into problems,
make sure you hit those discussion boards. You have classmates have
been really helpful, and I really wanna encourage
that communication. Good luck.