Hi everybody welcome back.
It's time for us to start coding.
One of the things I've noticed over the past couple years of teaching
is that students really differ in the way that they jump in and
handle different types of coding classes.
Some will sit down at the computer, never read the book and just hack,
and hack, and hack.
Some of you may be a little bit guilty of doing all the readings, listening to all
lectures, but never actually trying out any of the things we've talked about.
So that's what these homeworks are for.
A chance for you to finally go through and put down some of this code and
see what goes on when you try to apply styling to your HTML.
So the objective for this homework assignment is for you to show me that you
can write one CSS file that can go and style three different HTML files.
I'm gonna go ahead and show you some examples of our before and after for
this assignment.
I've put the links here on the side, but
it's really going to be much clearer when I show you the homework in action.
So let's take a look at it.
When we start,
I'm going to give you three HTML files that are really not well styled.
They start off,
they have a navigation, they have three very large pictures, some are smaller.
And then they have the content.
All three pages that you'll look at, home, teams, and history have different content.
What I want you to do is write your own CSS rules that will take
these type of pages, and turn it into something that looks like this.
Now, I know this isn't a huge jump, but
this is exactly how i want you to start coding.
I want you to make small, incremental changes that can take you from something
that's hard to read to something that's much easier to read.
So let's go ahead and step through the different things that you'll need to
change in order to achieve this separate look.
The most important thing to understand is that you must leave the HTML alone.
I don't want you to change it at all,
instead I only want you to style things and edit things within the style sheet.
And the things that you're gonna need to add are styles for
the header, the headings, the section, the links and the images.
So, let me go through and show you exactly what you need to look at.
For your header, it's pretty straightforward.
I want you to go in and I want you to add a background color.
For your headings, both h1 and h2, I want you to change the font color.
Now remember, this is different from the background color.
It's the color that the text shows up in.
Next, I want you to make sure that all the headings are displayed in capital letters.
So, if you go back, we'll take a quick look.
You can see that watch your head and ultimate frisbee are in capital letters,
while in the original HTML version, they're in lower case.
So I want you to use CSS to make that change.
The next thing I want you to do is just for
the h1 heading I want you to center the text.
Next make one quick change to the section part of your HTML.
I want you to style the different section so
it has a different background color from the other elements in your page.
Next, let's take a look at the links.
The changes you're gonna make here are very subtle.
They're not very obvious if I didn't specifically tell you what
you're looking for.
And what I want you to do is I want you to change the background color, and
the font color, for your links.
After you've done that, go in and center the text,
similar to the way that you're going to the center the texts for the h1 headings.
Finally, the last thing that really kinda messes up our HTML page initial example is
these huge pictures that just get in the way.
So for right now, since we haven't talked about the best way to style images,
I want you to just remove them from the page.
But remember, this might be the trickiest part of the whole assignment because I
don't want you to change the html.
I want those pictures to be there.
I just want you to use CSS3 to remove them from the page.
So I hope between looking through this example and looking online, and looking at
my before and after shots, that you'll be able to do this homework assignment.
When you're done, we're going to be using peer grading.
When we do this, grades are gonna be based on basically how well you were able to
finish what we were doing.
When I talk about aesthetics,
I'm talking about did you pick pretty background colors and font colors.
We don't really care about this.
This is our first homework assignment.
I really just want you to feel only success.
However, proper standards do apply.
And what I mean by that is don't use color names, use hexadecimal or
RGB, and don't put all your rules on one line.
Make sure your CSS style sheet is easy to read.
Other than the styles that I listed please don't change other things for right now.
It makes it much harder to grade.
But don't worry.
As we go through this course you will have the chance to put in your own unique
looks as your styling elements.
For right now all I can say is good luck and
make sure you go on those discussion boards if you have any questions.