1
00:00:07,996 --> 00:00:09,390
Hello, everybody.

2
00:00:09,390 --> 00:00:12,072
Welcome to Introduction to CSS3.

3
00:00:12,072 --> 00:00:17,465
In the next four weeks, we're gonna learn
how to take plain simple HTML5 code and

4
00:00:17,465 --> 00:00:20,930
turn it into something really beautiful.

5
00:00:20,930 --> 00:00:23,760
So what will be doing
over the next four weeks?

6
00:00:23,760 --> 00:00:28,972
Well, the main focus will be on
learning about cascading style sheets.

7
00:00:28,972 --> 00:00:32,470
We're gonna talk about why they
are a better way to style than what

8
00:00:32,470 --> 00:00:37,120
people used to use in the early 2000's and
late 1990's.

9
00:00:37,120 --> 00:00:39,650
Next you're going to learn the syntax.

10
00:00:39,650 --> 00:00:41,580
Once you know that it's
a better way to use it,

11
00:00:41,580 --> 00:00:44,190
how can we make sure that you're
writing really good code?

12
00:00:45,210 --> 00:00:48,150
Once you've figured out the syntax,
we'll go on and

13
00:00:48,150 --> 00:00:50,730
we'll also talk about development tools.

14
00:00:50,730 --> 00:00:54,440
When you do web design, it's very rare
that you just sit there and you code, and

15
00:00:54,440 --> 00:00:57,670
you don't look to the left, or
look to the right, or go look on the web.

16
00:00:57,670 --> 00:01:02,060
Instead, you're going to be using other
tools to see how you can change your code

17
00:01:02,060 --> 00:01:04,140
without actually having to
write the code beforehand.

18
00:01:05,430 --> 00:01:09,430
Finally, as always, we'll be
talking about accessibility issues.

19
00:01:09,430 --> 00:01:14,250
It's always fun to add colors and
animations and cool things to our page.

20
00:01:14,250 --> 00:01:15,240
When we do that,

21
00:01:15,240 --> 00:01:18,342
we want to make sure that we don't
do it at the cost of accessibility.

22
00:01:18,342 --> 00:01:21,080
We wanna make sure everyone can
see everything on our page.

23
00:01:22,580 --> 00:01:26,400
So let's talk about what we're going
to do on each of the four weeks.

24
00:01:26,400 --> 00:01:30,610
In week one, the focus is really on just
getting you started, getting your feet wet

25
00:01:30,610 --> 00:01:34,200
and getting you a little bit of confidence
in knowing that you can do this.

26
00:01:35,580 --> 00:01:39,750
We're gonna start by talking about
the three common methods for styling code.

27
00:01:39,750 --> 00:01:43,750
And once we cover them, we're gonna
talk about how these methods interact,

28
00:01:43,750 --> 00:01:46,290
which ones are better in
different situations.

29
00:01:46,290 --> 00:01:49,150
And different things that you can
feel confident knowing how you can

30
00:01:49,150 --> 00:01:51,920
best style your page in
any specific situation.

31
00:01:53,400 --> 00:01:56,690
Next we'll talk about
the basic styling of fonts.

32
00:01:56,690 --> 00:02:00,180
By the end of week one, I really want
you to be able to take a web page and

33
00:02:00,180 --> 00:02:01,950
change something really obvious.

34
00:02:01,950 --> 00:02:05,410
Can you change the text so
that it's cursive, or underline, or

35
00:02:05,410 --> 00:02:06,130
a different color?

36
00:02:07,280 --> 00:02:12,170
Finally, we'll very briefly talk
about placing elements on the page.

37
00:02:12,170 --> 00:02:15,191
This is going to be an important
element of our entire four weeks.

38
00:02:15,191 --> 00:02:18,543
Is trying to figure out how you
can put your header over here or

39
00:02:18,543 --> 00:02:19,736
an image over there.

40
00:02:19,736 --> 00:02:22,310
And it can be tricky but that's okay.

41
00:02:22,310 --> 00:02:25,150
Because we're gonna repeat
it week after week.

42
00:02:25,150 --> 00:02:28,380
In week two, I'll talk about
something called the box model.

43
00:02:28,380 --> 00:02:31,660
This is a very common concept for
any web developer,

44
00:02:31,660 --> 00:02:35,700
because we talk about how every element
on your page is actually a box.

45
00:02:36,810 --> 00:02:40,200
Next, we'll talk about styling links and
lists.

46
00:02:40,200 --> 00:02:42,460
We all love the links in our page.

47
00:02:42,460 --> 00:02:47,550
The web is the web because we have links,
so how can we make them look really cool?

48
00:02:47,550 --> 00:02:50,680
Next, we'll talk about advanced selectors.

49
00:02:50,680 --> 00:02:54,080
In the beginning of the course,
we'll be very careful about styling simple

50
00:02:54,080 --> 00:02:59,206
elements such as styling a list or
styling a paragraph or styling a header.

51
00:02:59,206 --> 00:03:03,230
Next, we're gonna wanna talk about what if
we only want to style some of the links,

52
00:03:03,230 --> 00:03:04,860
not all of the links?

53
00:03:04,860 --> 00:03:07,810
Finally we'll talk about
browser capabilities.

54
00:03:07,810 --> 00:03:09,580
Just like when you learned about HTML5,

55
00:03:09,580 --> 00:03:13,790
you learned that some browsers
support some tags while others don't.

56
00:03:13,790 --> 00:03:17,460
In the same way,
browsers treat CSS differently.

57
00:03:17,460 --> 00:03:19,490
And I want you to know how
to best react to that.

58
00:03:21,670 --> 00:03:25,368
In week three,
we talk about pseudo classes and elements.

59
00:03:25,368 --> 00:03:28,560
These are kinda this cool idea of how
we can make different things happen

60
00:03:28,560 --> 00:03:30,610
when we hover over a page.

61
00:03:30,610 --> 00:03:33,760
It also talks about how we can
style just certain things like

62
00:03:33,760 --> 00:03:37,320
the last paragraph in the page or
the first paragraph.

63
00:03:37,320 --> 00:03:39,280
We'll also talk about transitions.

64
00:03:39,280 --> 00:03:42,940
This is a way of changing the look
of one of the elements on your page,

65
00:03:42,940 --> 00:03:45,790
which is very similar to
the idea of transforms.

66
00:03:45,790 --> 00:03:49,380
Transforms are how we can rotate
things on the page, skew them,

67
00:03:49,380 --> 00:03:52,180
making them bigger and smaller, and
doing different things like that.

68
00:03:53,540 --> 00:03:56,500
Finally, again we'll
talk about positioning,

69
00:03:56,500 --> 00:04:00,450
how we can make things go in a certain
spot and stay there all the time.

70
00:04:00,450 --> 00:04:04,860
We've all seen really annoying pop-up
menus and different pop-up ads.

71
00:04:04,860 --> 00:04:06,970
Now you can make your
own annoying pop-up ad.

72
00:04:08,240 --> 00:04:11,720
In week four,
we're not really gonna cover new material.

73
00:04:11,720 --> 00:04:16,380
Instead it's going to be samples,
samples, and more examples and samples.

74
00:04:16,380 --> 00:04:20,420
In particular, I wanna show you different
ways that we can style a table and

75
00:04:20,420 --> 00:04:22,680
different ways for
styling a navigation menu.

76
00:04:23,760 --> 00:04:27,600
The bulk of week four will really be
spent working on your final project.

77
00:04:28,790 --> 00:04:33,570
So I want you to know right off who this
class is for and if you're ready and

78
00:04:33,570 --> 00:04:35,360
are interested in taking it.

79
00:04:35,360 --> 00:04:40,680
First of all, you don't wanna take this
class unless you know about HTML5 already.

80
00:04:40,680 --> 00:04:42,400
You may be taking a course on it.

81
00:04:42,400 --> 00:04:46,370
You may be just going online and reading
about it, but you need to feel comfortable

82
00:04:46,370 --> 00:04:50,140
if I mention things such as tags or
elements or validation.

83
00:04:51,330 --> 00:04:55,230
Next, this class is for
people who have persistence.

84
00:04:55,230 --> 00:04:59,810
You will never code your pages
the right way the first time.

85
00:04:59,810 --> 00:05:03,660
Even the second time, sometimes the third,
fourth, and fifth time.

86
00:05:03,660 --> 00:05:06,570
It's really about enjoying the whole
process of really wanting to

87
00:05:06,570 --> 00:05:09,400
get something to work and feeling
little victories when it does happen.

88
00:05:10,620 --> 00:05:11,910
Finally, this class is for

89
00:05:11,910 --> 00:05:15,870
those who are willing to do more than what
I'm going to to do in these lectures.

90
00:05:15,870 --> 00:05:18,450
There's only so
much information I can give to you.

91
00:05:18,450 --> 00:05:22,180
It's up to you to practice it,
tweak it, change it, and

92
00:05:22,180 --> 00:05:24,880
try to really see what happens
beyond what I'm showing you.

93
00:05:26,210 --> 00:05:28,970
So if you wanna know a little bit
more about me and why I'm choosing to

94
00:05:28,970 --> 00:05:32,120
teach this class, here's a little
bit of background information.

95
00:05:32,120 --> 00:05:34,090
I have a PhD in Computer Science.

96
00:05:34,090 --> 00:05:37,210
But to be honest,
that's really the least important part.

97
00:05:37,210 --> 00:05:40,300
What I really have is two
decades of teaching experience.

98
00:05:40,300 --> 00:05:43,480
And during this time,
I've taught a wide range of students and

99
00:05:43,480 --> 00:05:45,220
a wide range of topics.

100
00:05:45,220 --> 00:05:49,070
And I found that I really enjoy
explaining things in different ways, and

101
00:05:49,070 --> 00:05:52,930
I really enjoy reaching out to students
who maybe have more questions.

102
00:05:52,930 --> 00:05:56,450
My emphasis on education has always
been running around the classroom,

103
00:05:56,450 --> 00:05:59,260
helping students debug,
meeting with them one on one.

104
00:06:00,280 --> 00:06:03,240
The workload for this course
will be pretty straightforward.

105
00:06:03,240 --> 00:06:07,630
Every week there'll be a very short quiz,
typically multiple choice questions.

106
00:06:07,630 --> 00:06:11,880
More importantly, you're going to
have weekly peer-graded assignments.

107
00:06:11,880 --> 00:06:17,350
Because I can talk all I want about CSS3,
but until you start typing things in and

108
00:06:17,350 --> 00:06:20,280
playing with it, there's not
really any other way to learn it.

109
00:06:20,280 --> 00:06:23,640
So every week,
every student will have the same HTML.

110
00:06:23,640 --> 00:06:26,350
You'll create your own unique look for it.

111
00:06:26,350 --> 00:06:29,310
The final peer-graded assignment,
the one in week four.

112
00:06:29,310 --> 00:06:32,440
It'll be fairly substantial in order for
you to create something that you can

113
00:06:32,440 --> 00:06:36,360
really be proud of and
that'll have your own unique stamp to it.

114
00:06:36,360 --> 00:06:39,700
So let's talk about how you
can succeed in this course.

115
00:06:39,700 --> 00:06:43,420
In a perfect world, you get together with
friends, you'd code together, you'd learn

116
00:06:43,420 --> 00:06:47,090
from each others' mistakes, and you'd
also learn from each others' successes.

117
00:06:47,090 --> 00:06:49,500
So while we don't have that
one on one experience,

118
00:06:49,500 --> 00:06:51,570
make sure you use the message boards.

119
00:06:51,570 --> 00:06:55,620
Not only to ask questions but to see
what other questions people are putting.

120
00:06:55,620 --> 00:06:56,960
You can learn a lot that way.

121
00:06:58,390 --> 00:07:01,923
I really can't stress enough that I don't
want you to feel like I'm trying to trick

122
00:07:01,923 --> 00:07:04,306
you, or that I'm giving some
sort of gotcha problems.

123
00:07:04,306 --> 00:07:07,434
If you're ever working on something and
you're stuck on it for

124
00:07:07,434 --> 00:07:09,155
more than 15 minutes, move on.

125
00:07:09,155 --> 00:07:11,418
This is CSS, it's styling.

126
00:07:11,418 --> 00:07:13,382
There's always something you can change,
and

127
00:07:13,382 --> 00:07:15,650
you can find something else
that you prefer to work on.

128
00:07:16,880 --> 00:07:19,810
Make sure that you're looking
things up on your own.

129
00:07:19,810 --> 00:07:23,050
There's no way I'll be able to teach
you everything you need to know.

130
00:07:23,050 --> 00:07:26,540
And, that's why you can go on the Internet
and look at different resources, and

131
00:07:26,540 --> 00:07:28,800
see if there's something out there
that you would like to recreate.

132
00:07:29,930 --> 00:07:34,890
Finally, it's really important that
you practice this as much as you can.

133
00:07:34,890 --> 00:07:38,474
If you do the minimum required for
this course, and you're happy with that,

134
00:07:38,474 --> 00:07:39,256
that's great.

135
00:07:39,256 --> 00:07:40,706
I'm glad that you're
able to learn something.

136
00:07:40,706 --> 00:07:43,217
But if you really want to
be a web developer, it's so

137
00:07:43,217 --> 00:07:47,499
important that you're enjoying what you're
doing, and you're going off on your own,

138
00:07:47,499 --> 00:07:51,180
and you're creating something
beautiful whenever you can.

139
00:07:51,180 --> 00:07:53,380
So I welcome you to the class,
and I can't wait for

140
00:07:53,380 --> 00:07:56,540
you to join us as we learn more
about cascading style sheets.

141
00:07:56,540 --> 00:07:57,040
Thanks.