1
00:00:08,808 --> 00:00:09,574
Hi everybody.

2
00:00:09,574 --> 00:00:10,351
Welcome back.

3
00:00:10,351 --> 00:00:13,099
It's time for
us to start our final project.

4
00:00:13,099 --> 00:00:17,098
I'm really hoping by the time you're done
with this, you're going to have something

5
00:00:17,098 --> 00:00:19,913
that you feel really proud of and
that you'll want to share.

6
00:00:19,913 --> 00:00:23,922
Again, our objective is that we're
gonna write one style sheet and

7
00:00:23,922 --> 00:00:26,760
style three different HTML files.

8
00:00:26,760 --> 00:00:28,022
Now, when you get started,

9
00:00:28,022 --> 00:00:32,150
I'm going to assume that you have
the second peer-graded assignment done.

10
00:00:32,150 --> 00:00:35,460
You can feel free to alter
that as much as you want, but

11
00:00:35,460 --> 00:00:37,620
I need to know that those
changes are completed.

12
00:00:38,740 --> 00:00:41,670
All right, so let me show you
our before's and our after's for

13
00:00:41,670 --> 00:00:43,780
where we're going with this final project.

14
00:00:45,270 --> 00:00:47,866
So let's look at what we've done so
far in this course.

15
00:00:47,866 --> 00:00:50,468
We had our first HTML view.

16
00:00:50,468 --> 00:00:53,420
Our next one, we made it really plain.

17
00:00:53,420 --> 00:00:56,630
Our third one,
where we added in some different style.

18
00:00:56,630 --> 00:00:57,290
And finally,

19
00:00:57,290 --> 00:01:01,350
on our fourth one, it might not look
very different on this first page, but

20
00:01:01,350 --> 00:01:06,680
where I'm really going to have you focus
is on the Teams page, and on this table.

21
00:01:06,680 --> 00:01:09,530
You'll be able to see that
I have really gone out and

22
00:01:09,530 --> 00:01:11,900
put a lot of styling into this table.

23
00:01:11,900 --> 00:01:16,880
And the reason I picked tables is because
this will be a chance for us to go in and

24
00:01:16,880 --> 00:01:18,420
use those pseudo classes.

25
00:01:18,420 --> 00:01:21,320
Use those pseudo elements,
use some gradients,

26
00:01:21,320 --> 00:01:24,900
all those little things that can be
a little bit difficult to achieve,

27
00:01:24,900 --> 00:01:27,770
but once you've got it done,
it looks really good.

28
00:01:27,770 --> 00:01:30,190
So let's talk about each
one of these little parts.

29
00:01:31,470 --> 00:01:35,150
So once again, just a little reminder,
make a single style sheet.

30
00:01:35,150 --> 00:01:37,040
I don't want a different style sheet for

31
00:01:37,040 --> 00:01:41,040
each page, you want one that's
going to cover everybody.

32
00:01:41,040 --> 00:01:44,050
And we're going to be using
pseudo-elements and pseudo-classes.

33
00:01:44,050 --> 00:01:47,585
So if you seem a little bit
confused about that, don't forget,

34
00:01:47,585 --> 00:01:51,978
we've got slides that cover this as well
as some of our code together examples.

35
00:01:51,978 --> 00:01:55,009
So let's start with the table
because that's the bulk of the page.

36
00:01:55,009 --> 00:01:59,976
At the very minimum, I want you to go
ahead and style the font, the width,

37
00:01:59,976 --> 00:02:01,110
and the margin.

38
00:02:01,110 --> 00:02:04,350
Now when you style the font, there are a
lot of different options you can look at.

39
00:02:04,350 --> 00:02:06,130
You can have different font families.

40
00:02:06,130 --> 00:02:10,050
You can change the size,
the weight, and the line height.

41
00:02:10,050 --> 00:02:13,939
One of the reasons I recommend line
height, is that when you do that,

42
00:02:13,939 --> 00:02:17,695
it's much easier to center the text
within the rows if you've made

43
00:02:17,695 --> 00:02:20,062
the line height the same as the text size.

44
00:02:20,062 --> 00:02:23,347
For your width, I don't want your
table to take up the whole page.

45
00:02:23,347 --> 00:02:27,328
I want it to take up somewhere
probably between 75 and 90%.

46
00:02:27,328 --> 00:02:29,252
And one of the reasons
I want you to do that,

47
00:02:29,252 --> 00:02:31,137
is because I want you to center the table.

48
00:02:31,137 --> 00:02:33,505
I want you to play with
that margin property.

49
00:02:33,505 --> 00:02:37,158
And figure out how you can take up
just the right amount of space and

50
00:02:37,158 --> 00:02:38,892
put it right where you want it.

51
00:02:38,892 --> 00:02:41,480
Next we're gonna look
at the table heading.

52
00:02:41,480 --> 00:02:44,723
So the table heading looks a little
bit different from the other rows, and

53
00:02:44,723 --> 00:02:46,879
it really has that
important semantic meaning.

54
00:02:46,879 --> 00:02:51,025
So by using the table heading tags, we're
gonna be able to kind of double up on this

55
00:02:51,025 --> 00:02:54,890
idea that we're styling it differently and
it means something different.

56
00:02:54,890 --> 00:02:57,735
So first, change the background color.

57
00:02:57,735 --> 00:02:59,302
Once you get that to work,

58
00:02:59,302 --> 00:03:02,738
I want you to try putting in
a gradient background color.

59
00:03:02,738 --> 00:03:05,197
Now don't forget in order to use gradient,

60
00:03:05,197 --> 00:03:08,264
you're going to need to put
in some browser prefixes.

61
00:03:08,264 --> 00:03:12,856
Next, add a border but I only want
you to round the top two corners,

62
00:03:12,856 --> 00:03:18,180
not the whole thing, and
then also make the bottom border thicker.

63
00:03:18,180 --> 00:03:20,020
Finally, when you're done with this,
go ahead and

64
00:03:20,020 --> 00:03:23,070
add just at least one other property,
something that you think would look cool.

65
00:03:24,320 --> 00:03:28,611
Once you have the table heading done,
let's go ahead and put in some styling for

66
00:03:28,611 --> 00:03:29,520
the table rows.

67
00:03:29,520 --> 00:03:32,978
The first thing I want you to do,
and there's a reason for this,

68
00:03:32,978 --> 00:03:37,159
is I want you to set the opacity of
the table rows to some value of about 0.8.

69
00:03:37,159 --> 00:03:38,041
Somewhere around there.

70
00:03:38,041 --> 00:03:42,390
Where you can still read the text,
but it's a little bit faded out.

71
00:03:42,390 --> 00:03:46,380
Next, I want you to make sure that
the first column of every table row

72
00:03:46,380 --> 00:03:49,590
is left-aligned and
the other two are centered.

73
00:03:49,590 --> 00:03:52,910
Now, you may do this styling
within your table row elements, or

74
00:03:52,910 --> 00:03:55,900
you may be doing it within
the table elements, those TDs.

75
00:03:55,900 --> 00:03:59,350
It really depends upon how you jump in and
try to style this.

76
00:03:59,350 --> 00:04:02,962
Finally, I want you to go ahead and
put in another pseudo-class.

77
00:04:02,962 --> 00:04:05,549
Where when someone hovers
over any of the rows,

78
00:04:05,549 --> 00:04:08,988
it's going to change from a kind
of faded out to a darker color.

79
00:04:08,988 --> 00:04:10,960
And I'm gonna show you an example
of that before I go on.

80
00:04:12,280 --> 00:04:13,700
So if you notice in this table,

81
00:04:13,700 --> 00:04:18,050
the text is a little bit faded out
from being solid black font color.

82
00:04:18,050 --> 00:04:20,255
So that's where the opacity comes in.

83
00:04:20,255 --> 00:04:22,415
Now, when I hover over each team name,

84
00:04:22,415 --> 00:04:25,240
you'll see that the font
gets a little bit darker.

85
00:04:26,470 --> 00:04:30,000
I didn't change the font color here,
I didn't change the font family, or

86
00:04:30,000 --> 00:04:31,450
the type, or anything like that.

87
00:04:31,450 --> 00:04:35,097
Instead, what I changed is
the opacity to set it to 1.

88
00:04:35,097 --> 00:04:36,875
So now when my hover goes off,

89
00:04:36,875 --> 00:04:40,810
it goes back to that original
kind of faded out value.

90
00:04:40,810 --> 00:04:43,810
Each of the table elements can take
any amount of styling that you

91
00:04:43,810 --> 00:04:44,650
want to give it.

92
00:04:44,650 --> 00:04:48,380
But what I do want to see you do is
I want to see you style the padding,

93
00:04:48,380 --> 00:04:50,420
the font color and background color.

94
00:04:50,420 --> 00:04:53,810
And I want you to set the border
radius to two pixels.

95
00:04:53,810 --> 00:04:56,750
You would never be able to see
that kind of indistinguishable or

96
00:04:56,750 --> 00:04:58,480
subtle difference on the table.

97
00:04:58,480 --> 00:05:01,130
So I want you to put it in,
just so when I tell you to do it,

98
00:05:01,130 --> 00:05:04,200
you notice that there is
an actual change there.

99
00:05:04,200 --> 00:05:05,980
Finally, this would be a great chance for

100
00:05:05,980 --> 00:05:09,040
you to do something that
I haven't covered myself.

101
00:05:09,040 --> 00:05:11,760
Part of being a web designer is
learning to go out there and

102
00:05:11,760 --> 00:05:14,190
search for different properties
that you can play with.

103
00:05:14,190 --> 00:05:17,361
So I would encourage you to go out and
look at text-shadow.

104
00:05:17,361 --> 00:05:19,240
It's something I use in my example.

105
00:05:19,240 --> 00:05:22,930
So if you really want to try to replicate
it, go ahead and try to use it yourself.

106
00:05:22,930 --> 00:05:26,260
Once again, we'll be using peer
grading for this assignment.

107
00:05:26,260 --> 00:05:30,800
And grades will be based on both level of
completion and some level of aesthetics.

108
00:05:30,800 --> 00:05:33,980
Proper coding standards
are always going to apply, but

109
00:05:33,980 --> 00:05:36,370
you can specify your
preferred screen size.

110
00:05:36,370 --> 00:05:39,720
So if somebody decides to take your
CSS and apply it to the HTML, you

111
00:05:39,720 --> 00:05:44,500
can let them know this really looks best
on a large screen or small mobile device.

112
00:05:44,500 --> 00:05:46,630
Now, there are actually many,

113
00:05:46,630 --> 00:05:49,590
many ways that you could change
this style sheet around.

114
00:05:49,590 --> 00:05:53,610
And so I don't want you worrying about
hitting off every single standard.

115
00:05:53,610 --> 00:05:56,590
But if you do decide to something
a little crazy, a little different, and

116
00:05:56,590 --> 00:05:58,970
something that other people
might not understand.

117
00:05:58,970 --> 00:06:02,430
I really recommend that you put that
near the bottom of your style sheet.

118
00:06:02,430 --> 00:06:06,497
So that people looking at your code can
really focus on the actual requirements

119
00:06:06,497 --> 00:06:09,836
and then afterwards be amazed
at your really cool innovations.

120
00:06:09,836 --> 00:06:13,939
So I'm hoping that this is something
that will really help solidify your

121
00:06:13,939 --> 00:06:15,293
understanding of CSS.

122
00:06:15,293 --> 00:06:18,800
If you run into problems, you should feel
free to use the discussion boards and

123
00:06:18,800 --> 00:06:21,750
really ask people anything
that you're not quite sure on.

124
00:06:21,750 --> 00:06:24,710
Or just share something
cool that you got to work.

125
00:06:24,710 --> 00:06:25,210
Good luck.