1
00:00:08,706 --> 00:00:09,480
Hi, everybody.

2
00:00:09,480 --> 00:00:12,680
Welcome back, it's time for
another homework example.

3
00:00:12,680 --> 00:00:15,800
What we're going to be doing this
week is adding even more style

4
00:00:15,800 --> 00:00:18,010
to the pages that you
started styling last week.

5
00:00:19,050 --> 00:00:21,780
So once again the objective
of this assignment is that I

6
00:00:21,780 --> 00:00:24,240
don't want you to be
changing the html at all.

7
00:00:24,240 --> 00:00:29,100
I want you to either create a new style
sheet or update last week's style sheet so

8
00:00:29,100 --> 00:00:31,700
it can be used on three
different html files.

9
00:00:32,990 --> 00:00:36,450
When you get started it's very important
that you've completed the first peer

10
00:00:36,450 --> 00:00:37,800
graded assignment.

11
00:00:37,800 --> 00:00:39,820
I'm going to assume that
you have it done and so

12
00:00:39,820 --> 00:00:43,420
when I talk in this video about
the different changes I want you to make.

13
00:00:43,420 --> 00:00:46,560
You can either alter that previous
homework assignment, or you really

14
00:00:46,560 --> 00:00:50,700
can start completely from scratch if you
weren't happy with your earlier work.

15
00:00:50,700 --> 00:00:53,490
So let's take a look at the before and
after for

16
00:00:53,490 --> 00:00:55,630
this assignment that I want
you to try to achieve.

17
00:00:57,210 --> 00:00:59,450
This was our page when we first started.

18
00:00:59,450 --> 00:01:03,600
In homework one,
you took it from here to here.

19
00:01:03,600 --> 00:01:07,640
Still very simple, but just much cleaner
because we added some background color,

20
00:01:07,640 --> 00:01:10,700
some color fonts, and
we got rid of those images.

21
00:01:10,700 --> 00:01:14,180
What I want you to work on this
week is really changing things and

22
00:01:14,180 --> 00:01:16,970
making it really styled
as opposed to just clean.

23
00:01:16,970 --> 00:01:20,610
So let's take a look at what I'd
like you to work on in week three.

24
00:01:20,610 --> 00:01:23,870
As you can see this looks like
a completely different site.

25
00:01:23,870 --> 00:01:28,390
The images are back in, I've added a
background image for a navigation bar and

26
00:01:28,390 --> 00:01:31,960
something that isn't necessarily easy to
see when you're just looking at paper,

27
00:01:31,960 --> 00:01:35,470
I've added a new class that highlights
which page we're on right now.

28
00:01:35,470 --> 00:01:36,970
So if you look,

29
00:01:36,970 --> 00:01:40,330
the home link is highlighted
because we're on the home page.

30
00:01:40,330 --> 00:01:43,270
If I click on history,
the history link is how that it

31
00:01:43,270 --> 00:01:46,540
because we're on the history page and
then the same way, the team's page.

32
00:01:47,700 --> 00:01:50,140
So this is what we call the current
page that we're looking at.

33
00:01:50,140 --> 00:01:53,730
And so you're going to be styling this
to kind of letting your viewers know

34
00:01:53,730 --> 00:01:55,500
where they are on this page.

35
00:01:55,500 --> 00:01:58,710
So I'm going to go ahead and
go through and talk about each of the tags

36
00:01:58,710 --> 00:02:02,280
I want you to look at in order
to complete this assignment.

37
00:02:02,280 --> 00:02:04,950
So when you get started,
you're gonna leave that HTML code alone,

38
00:02:04,950 --> 00:02:08,980
and you're either going create a new
style sheet, or you're gonna go ahead and

39
00:02:08,980 --> 00:02:10,840
update the one you used before.

40
00:02:10,840 --> 00:02:14,430
What you're going to need to work
on specifically are these elements.

41
00:02:14,430 --> 00:02:19,630
You need to work on the body,
the header, the h one, the links, and

42
00:02:19,630 --> 00:02:23,780
then I have three classes called active,
left, and right, and finally, you're going

43
00:02:23,780 --> 00:02:27,190
to want to put those images back in that
were in the left hand side of the page.

44
00:02:28,530 --> 00:02:31,080
So first, let's talk about the body.

45
00:02:31,080 --> 00:02:35,390
By default, your browsers put in some sort
of padding and margin, but I want you to

46
00:02:35,390 --> 00:02:39,390
overwrite that and put something that
will look consistent across all browsers.

47
00:02:39,390 --> 00:02:43,320
You can also feel free to adjust the size
of the text, but that's not required.

48
00:02:43,320 --> 00:02:45,980
I know I did because I just found
the text a little bit too small.

49
00:02:47,080 --> 00:02:49,040
Next, go to the header.

50
00:02:49,040 --> 00:02:54,160
The first step is to change the background
color and see if you can get that to work.

51
00:02:54,160 --> 00:02:57,050
Next, you're going to want
to add a background image.

52
00:02:57,050 --> 00:02:57,820
And to be honest,

53
00:02:57,820 --> 00:03:01,280
this will be the trickiest part
of the whole homework assignment.

54
00:03:01,280 --> 00:03:04,920
Because sometimes it's not always clear
where you can find the images and

55
00:03:04,920 --> 00:03:05,950
where you can't, so

56
00:03:05,950 --> 00:03:10,150
make sure you check in some of the other
resources if you get stuck on this part.

57
00:03:11,150 --> 00:03:13,620
Next I want you to change
the font color and

58
00:03:13,620 --> 00:03:15,670
increase that font size a little bit more.

59
00:03:16,790 --> 00:03:20,300
Now here again is something that's
new that you didn't learn before.

60
00:03:20,300 --> 00:03:23,740
I want you to style the links that
are in the navigation section but

61
00:03:23,740 --> 00:03:24,790
only those links.

62
00:03:24,790 --> 00:03:26,060
Not all the links in the page.

63
00:03:26,060 --> 00:03:29,620
You don't need to recreate
my example exactly, but

64
00:03:29,620 --> 00:03:31,450
I do want your links to
be nicely spaced apart,

65
00:03:31,450 --> 00:03:36,680
they should have some background color,
rounded borders and no underline.

66
00:03:36,680 --> 00:03:38,000
Make them look nice.

67
00:03:39,290 --> 00:03:42,680
Next make sure you saw that
active class I talked about.

68
00:03:42,680 --> 00:03:45,810
That's how people will be able to
know which page they're looking at

69
00:03:45,810 --> 00:03:47,230
without having to look at the URL.

70
00:03:48,270 --> 00:03:51,840
Now another thing that your going to need
to work on is this idea that our page has

71
00:03:51,840 --> 00:03:54,360
a left and a right class to it.

72
00:03:54,360 --> 00:03:57,860
Now in order to get things to go next to
each other your going to need to mess with

73
00:03:57,860 --> 00:04:02,090
the display and possibly float
depending on how you implement this.

74
00:04:02,090 --> 00:04:04,950
So make sure you change them so
that they're side by side, and

75
00:04:04,950 --> 00:04:07,570
change that background color for
the left class.

76
00:04:07,570 --> 00:04:09,450
You may have already done that
in the previous homework, but

77
00:04:09,450 --> 00:04:11,190
if you didn't make sure it gets done now.

78
00:04:13,280 --> 00:04:16,110
Finally, we want to get
back to those images.

79
00:04:16,110 --> 00:04:18,690
First, you need to put
the images back in because,

80
00:04:18,690 --> 00:04:23,450
hopefully in homework one, you set their
display to none, which means they're gone.

81
00:04:23,450 --> 00:04:26,600
So put them back into something so that
they'll stack up on top of each other.

82
00:04:27,700 --> 00:04:32,020
Next, make sure that they're
centered within that left class.

83
00:04:32,020 --> 00:04:35,120
I don't want the pictures to be all
the way to one side or the other.

84
00:04:35,120 --> 00:04:37,920
And, while you're centering them,
make sure you put some space between them,

85
00:04:37,920 --> 00:04:39,160
on the top and bottom, too.

86
00:04:40,370 --> 00:04:44,520
Once again, we'll be using the peer
grader to evaluate your work.

87
00:04:44,520 --> 00:04:48,990
Unlike before, grades will be
based on level of completion, and

88
00:04:48,990 --> 00:04:51,400
somewhat more of how your page looks.

89
00:04:51,400 --> 00:04:54,630
We wanna make sure that you're not
putting things that are hard to read or

90
00:04:54,630 --> 00:04:57,100
that are really kind of squished together.

91
00:04:57,100 --> 00:04:58,440
So if you get the chance,

92
00:04:58,440 --> 00:05:03,010
make sure you run your page through
some different accessibility evaluators.

93
00:05:03,010 --> 00:05:04,710
So there was wave and there's webbing.

94
00:05:04,710 --> 00:05:06,460
There's different places you can go.

95
00:05:06,460 --> 00:05:08,990
But this is the really nice
part about peer grading, your

96
00:05:08,990 --> 00:05:12,789
peers can tell you whether or not things
don't really have the best color contrast.

97
00:05:13,970 --> 00:05:16,980
Now again,
proper standards are going to apply.

98
00:05:16,980 --> 00:05:20,940
And this is particularly important when we
start talking about advanced selectors.

99
00:05:20,940 --> 00:05:24,620
I found that sometimes people throw
everything they can possibly think of

100
00:05:24,620 --> 00:05:28,460
into their style sheet, and
they just hope, hope, hope that it works.

101
00:05:28,460 --> 00:05:31,630
We are gonna take points
off if you try to do that.

102
00:05:31,630 --> 00:05:34,320
Now the final thing I do
want to mention is that

103
00:05:34,320 --> 00:05:36,910
I know that people are coding
on different devices.

104
00:05:36,910 --> 00:05:41,350
So when you submit your code,
make sure to feel free to say my code

105
00:05:41,350 --> 00:05:45,130
only really looks good on a big screen,
or on a phone, or something like that.

106
00:05:46,350 --> 00:05:49,430
Taking care of different screen sizes
is something called responsive design

107
00:05:49,430 --> 00:05:51,590
that we don't handle in
this particular course.

108
00:05:51,590 --> 00:05:55,690
So I don't expect you to make a site
that looks great on every platform.

109
00:05:55,690 --> 00:05:59,900
What I do expect you to do is really
own the code that you submit this time.

110
00:05:59,900 --> 00:06:02,700
Make sure you know exactly
what each line is doing and

111
00:06:02,700 --> 00:06:06,720
feel comfortable changing little parts and
feeling like your page won't break.

112
00:06:06,720 --> 00:06:10,610
Again, if you run into problems,
make sure you hit those discussion boards.

113
00:06:10,610 --> 00:06:12,710
You have classmates have
been really helpful, and

114
00:06:12,710 --> 00:06:15,010
I really wanna encourage
that communication.

115
00:06:15,010 --> 00:06:15,510
Good luck.