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.