1
00:00:08,754 --> 00:00:10,440
Welcome back, everybody.

2
00:00:10,440 --> 00:00:13,010
It's time for
us to stop learning new things and

3
00:00:13,010 --> 00:00:17,080
put into practice the things that we've
been talking about in the last week.

4
00:00:17,080 --> 00:00:21,280
What we're gonna do is add some of the new
components that we've been working on.

5
00:00:21,280 --> 00:00:25,710
But we're gonna do it together as we code
along, so again I'm going to stress that I

6
00:00:25,710 --> 00:00:29,770
really hope you stop, put down whatever
else you're doing, whip up your laptop or

7
00:00:29,770 --> 00:00:31,340
whatever you're coding on, and

8
00:00:31,340 --> 00:00:33,569
code with me rather than just
watching what I'm doing.

9
00:00:34,660 --> 00:00:36,610
When we last were coding together,

10
00:00:36,610 --> 00:00:40,225
hopefully you created something that
looks like this screen over here.

11
00:00:40,225 --> 00:00:43,070
We've gone in and we'd used width and
different displays,

12
00:00:43,070 --> 00:00:47,750
padding and margin and we were
making our page a little bit better.

13
00:00:47,750 --> 00:00:51,340
Today, we're gonna go a step further and
add some different elements

14
00:00:51,340 --> 00:00:55,900
such as gradient, instead of having three
equal width sections we're gonna have some

15
00:00:55,900 --> 00:01:01,120
sections take up half the page, some take
up the full page, little things like this.

16
00:01:01,120 --> 00:01:05,130
And we're going to be utilizing these
new selectors that we've been studying.

17
00:01:05,130 --> 00:01:06,480
So, let's go ahead and begin.

18
00:01:08,030 --> 00:01:11,490
The first thing that I wanna do
is put in that linear gradient or

19
00:01:11,490 --> 00:01:14,530
that new color that goes in
both the header and the footer.

20
00:01:15,940 --> 00:01:19,087
So when I go to my style sheet,
and I'm gonna come up here.

21
00:01:19,087 --> 00:01:22,751
One of the first things I want to do
is I want to put in that we need a new

22
00:01:22,751 --> 00:01:25,480
background for the header and footer.

23
00:01:25,480 --> 00:01:28,330
And I'm going to start by
putting it right here.

24
00:01:30,060 --> 00:01:32,170
I know I cheated, I copied and pasted.

25
00:01:32,170 --> 00:01:33,860
But I wanted to do that, sorry.

26
00:01:35,720 --> 00:01:39,330
I wanted to do that, because I
kept messing up when I was typing.

27
00:01:39,330 --> 00:01:43,620
So, what I've put in here, is I've started
off by putting in a background color.

28
00:01:43,620 --> 00:01:47,860
You always want to do that,
because if you don't, if for some reason

29
00:01:47,860 --> 00:01:52,040
the browser can't handle linear gradient,
you've given it a fall-back.

30
00:01:52,040 --> 00:01:56,500
Then, I've had my linear gradient rule
in each of the different webkits.

31
00:01:56,500 --> 00:02:01,690
So once I add that and I hit save,
we can refresh the page and

32
00:02:01,690 --> 00:02:05,530
see if we have that kind of gray
to blue color we were looking for.

33
00:02:05,530 --> 00:02:07,490
Hey, great, we did.

34
00:02:07,490 --> 00:02:11,940
Now, when I wrote this rule,
you might remember that I put header,

35
00:02:11,940 --> 00:02:17,420
footer and that means it's supposed
to apply to both of these elements.

36
00:02:17,420 --> 00:02:20,180
But it only applied to the header.

37
00:02:20,180 --> 00:02:22,610
We need to think about why that happened.

38
00:02:22,610 --> 00:02:27,650
The reason is if we scroll down,
you can see that further down in the page

39
00:02:27,650 --> 00:02:32,080
I have said, I want my footer
background to be this particular color.

40
00:02:32,080 --> 00:02:36,890
This overwrites any earlier rules,
so I'm gonna go in here.

41
00:02:36,890 --> 00:02:40,610
And I'm going to delete this,
and say, let's get rid of that.

42
00:02:41,920 --> 00:02:44,490
Refresh, and great.

43
00:02:44,490 --> 00:02:46,540
Now it looks much better.

44
00:02:46,540 --> 00:02:50,950
Okay, so we've made that one change, and
hopefully you're getting used to the idea

45
00:02:50,950 --> 00:02:56,240
of both using the comma to style two
elements at once, you can do even more and

46
00:02:56,240 --> 00:03:00,290
putting in these web kit prefixes or
browser prefixes.

47
00:03:00,290 --> 00:03:02,740
If you get rid of it,
it may work on your browser,

48
00:03:02,740 --> 00:03:05,500
but there's a really good chance it
won't work on the other browser.

49
00:03:05,500 --> 00:03:07,350
So we wanna practice this.

50
00:03:07,350 --> 00:03:09,185
All right, let's take a look and
see what we've got.

51
00:03:10,525 --> 00:03:12,085
I've got the gradient in.

52
00:03:12,085 --> 00:03:15,675
The next thing I wanna tackle
is styling these links, and

53
00:03:15,675 --> 00:03:17,950
again, I'm not styling all
the links in the page,

54
00:03:17,950 --> 00:03:21,795
cuz if you notice, this one down
here still looks exactly the same.

55
00:03:21,795 --> 00:03:26,275
I only want to style the links that
are inside the navigation section.

56
00:03:29,560 --> 00:03:32,462
So, I'm going to go right here and,
I've styled my nav.

57
00:03:32,462 --> 00:03:33,129
It looks good.

58
00:03:33,129 --> 00:03:35,007
Next time, I'm going to say,

59
00:03:35,007 --> 00:03:39,060
hey, let's style just those
links that are inside the nav.

60
00:03:39,060 --> 00:03:40,950
And, we've made quite a few changes.

61
00:03:40,950 --> 00:03:43,090
If I come down here, we can see it.

62
00:03:43,090 --> 00:03:48,380
One we've added something that looks
kind of like a box structure to it.

63
00:03:48,380 --> 00:03:53,030
Normally you couldn't do this because
in line elements don't take a width and

64
00:03:53,030 --> 00:03:54,390
a height but, we'll go ahead and
play with it.

65
00:03:54,390 --> 00:03:58,280
Let's go ahead and start, I'm gonna first
say I would like the width of each one of

66
00:03:58,280 --> 00:04:03,210
my links to be about 22%, save this.

67
00:04:04,340 --> 00:04:07,430
Refresh, nope no luck.

68
00:04:07,430 --> 00:04:12,270
So again, remember, one of the things
I said is that links are inline and

69
00:04:12,270 --> 00:04:14,810
you can't give them width or height.

70
00:04:14,810 --> 00:04:19,805
So now, if I go in and
I say let's change our display to

71
00:04:19,805 --> 00:04:24,587
inline-block, we should
have much better luck.

72
00:04:24,587 --> 00:04:29,380
Almost too much luck,
cuz the screen doesn't quite fit that.

73
00:04:29,380 --> 00:04:30,088
All right?
All right.

74
00:04:30,088 --> 00:04:32,080
So great, that's one step closer.

75
00:04:32,080 --> 00:04:34,087
Let's add that different background color.

76
00:04:39,295 --> 00:04:40,712
And I think I made it white.

77
00:04:44,005 --> 00:04:45,629
But you can use anything you want.

78
00:04:47,962 --> 00:04:48,570
Boom.

79
00:04:48,570 --> 00:04:49,820
We're definitely getting closer.

80
00:04:49,820 --> 00:04:53,300
Little tiny steps are getting us much,
much closer.

81
00:04:53,300 --> 00:04:56,540
So, the next thing I wanna tackle
as we try to change our page

82
00:04:56,540 --> 00:05:00,360
is this idea that some of the sections
should take up half the screen,

83
00:05:00,360 --> 00:05:03,750
while some of the sections should go ahead
and take up the whole width of the screen.

84
00:05:03,750 --> 00:05:07,310
And the way we're gonna do
that is by using classes.

85
00:05:07,310 --> 00:05:08,170
If you remember,

86
00:05:08,170 --> 00:05:12,300
classes are a way to style certain
groups of elements in similar manners.

87
00:05:12,300 --> 00:05:14,300
So let's go ahead and
see how we're gonna do this.

88
00:05:15,680 --> 00:05:21,040
The first thing I need to do is make
a new class, and this class is gonna say,

89
00:05:21,040 --> 00:05:24,940
instead of all the sections taking up 30%,
I want just some of them,

90
00:05:24,940 --> 00:05:30,470
I'm gonna call them half to take up about,
let's say 45% of the page.

91
00:05:32,040 --> 00:05:36,100
In this way it's only gonna pick up
some of the sections, not all of them.

92
00:05:36,100 --> 00:05:41,050
If I refresh, it's not going to work yet
because the problem is I got

93
00:05:41,050 --> 00:05:45,770
rid of my section styling and
replaced it with this class and

94
00:05:45,770 --> 00:05:49,740
nowhere in my HTML did I
remember to reference the class.

95
00:05:49,740 --> 00:05:54,813
So for the first time we're now
gonna go into our HTML file and

96
00:05:54,813 --> 00:05:57,212
start making some changes.

97
00:05:57,212 --> 00:06:02,807
Gonna go here, I would like this one
to only take up half the screen,

98
00:06:02,807 --> 00:06:05,074
so I'll say class=half.

99
00:06:06,120 --> 00:06:11,470
And I would like this one
to take up half the screen.

100
00:06:11,470 --> 00:06:13,000
We've got that.

101
00:06:13,000 --> 00:06:15,670
We're not gonna change the other one, so

102
00:06:15,670 --> 00:06:21,500
when I refresh, you can see that two
of them are now next to each other.

103
00:06:21,500 --> 00:06:25,410
So when I have and refreshed it looks
a little bit closer, other than I've got

104
00:06:25,410 --> 00:06:28,671
some weird things going on with
some blue and different things.

105
00:06:28,671 --> 00:06:31,410
So this is because I've been using float.

106
00:06:31,410 --> 00:06:35,630
And if you remember, when you're using
float sometimes it causes things that

107
00:06:35,630 --> 00:06:40,870
are next to each other to be basically in
positions you don't want them to be in.

108
00:06:40,870 --> 00:06:44,318
So our bottom section, the one that we
knew we didn't want to be floating,

109
00:06:44,318 --> 00:06:47,796
we need to go in and say hey, there's
certain sections we want to be whole.

110
00:06:47,796 --> 00:06:50,440
So let's go back to our style sheet.

111
00:06:50,440 --> 00:06:52,837
And I'm gonna just do a little
bit of copy and paste here.

112
00:06:52,837 --> 00:06:54,510
And I'm gonna say, you know what?

113
00:06:54,510 --> 00:06:58,490
This one section,
I need it to be class equals whole.

114
00:06:58,490 --> 00:06:59,712
So go back over here.

115
00:07:02,629 --> 00:07:08,273
Section class = whole which means this
one should take up the whole width,

116
00:07:08,273 --> 00:07:12,250
don't try to float it next to each other.

117
00:07:12,250 --> 00:07:14,400
And let's go ahead and refresh.

118
00:07:14,400 --> 00:07:15,540
That looks much better.

119
00:07:15,540 --> 00:07:18,600
It looks very much like we
wanted things to be at the end.

120
00:07:18,600 --> 00:07:20,500
And again, pay attention.

121
00:07:20,500 --> 00:07:23,810
Only the nav links are styled,
not all of the links.

122
00:07:23,810 --> 00:07:25,110
We've put in the gradient.

123
00:07:25,110 --> 00:07:26,710
If your gradient isn't working,

124
00:07:26,710 --> 00:07:29,890
it might be because you didn't
put in your browser prefixes.

125
00:07:29,890 --> 00:07:32,546
We've really got a lot of little
things going on in this page.

126
00:07:32,546 --> 00:07:36,960
And again, I'm not a graphic artist, so
I don't make the most beautiful things.

127
00:07:36,960 --> 00:07:39,850
But it's kind of fun to go in and
create different things and

128
00:07:39,850 --> 00:07:41,710
see how you can style them yourself.

129
00:07:41,710 --> 00:07:45,460
So, keep going and good luck and
don't worry when you hit those typos.

130
00:07:45,460 --> 00:07:46,212
We all do.