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.