1
00:00:00,000 --> 00:00:05,692
[MUSIC]

2
00:00:05,692 --> 00:00:10,609
Hello, people, we have [INAUDIBLE] now,

3
00:00:10,609 --> 00:00:16,365
we'll get monies and mana,
and I am a student and

4
00:00:16,365 --> 00:00:21,139
a [INAUDIBLE] at
Chris Nolan [INAUDIBLE] and

5
00:00:21,139 --> 00:00:24,102
this is [INAUDIBLE] here.

6
00:00:24,102 --> 00:00:28,858
He is a designer, a developer and
teacher at Treehouse and

7
00:00:28,858 --> 00:00:33,434
that is all you need to know,
and he is born in 1944.

8
00:00:33,434 --> 00:00:39,421
>> 1944, all right,
welcome to HTML and CSS for kids.

9
00:00:39,421 --> 00:00:41,551
So most of that was correct,
I think this is-

10
00:00:41,551 --> 00:00:44,940
>> The part of that 1944 was a very true

11
00:00:44,940 --> 00:00:45,463
fan.

12
00:00:45,463 --> 00:00:50,374
>> Yeah, apparently,
I was born in 1944, who knew?

13
00:00:50,374 --> 00:00:54,510
Welcome to Lesson seven of HTML and
CSS for kids.

14
00:00:54,510 --> 00:00:55,899
>> It's part of 17.

15
00:00:55,899 --> 00:00:59,010
>> Yep.
>> [SOUND] That doesn't look like all four

16
00:00:59,010 --> 00:01:00,995
lines coming out of work.

17
00:01:00,995 --> 00:01:03,139
Now looks like [INAUDIBLE].

18
00:01:03,139 --> 00:01:04,943
>> That is a good question, but

19
00:01:04,943 --> 00:01:08,637
we're not gonna get into how
GitHub works in our lessons.

20
00:01:08,637 --> 00:01:12,908
>> A little more complicated than-
>> You'll be following my rules.

21
00:01:12,908 --> 00:01:13,813
>> All right.

22
00:01:13,813 --> 00:01:16,683
>> [INAUDIBLE]
>> Couple of reminders,

23
00:01:16,683 --> 00:01:22,670
teamtreehouse.com that's where
you can get more lessons.

24
00:01:22,670 --> 00:01:27,002
We have some STEM lessons for kids, we
have web development, we have web design.

25
00:01:27,002 --> 00:01:28,734
>> And we have Karen.

26
00:01:28,734 --> 00:01:30,535
>> We do have Karen.

27
00:01:30,535 --> 00:01:35,098
>> She's on lunch right now, so
we can message her because she said

28
00:01:35,098 --> 00:01:40,099
she's on lunch with a burger emoji,
but burgers are made out of pigs.

29
00:01:40,099 --> 00:01:44,340
>> All right, so that's true,
Karen is monitoring our chat.

30
00:01:44,340 --> 00:01:48,567
So if you have questions for us about
Treehouse or about what we're doing today,

31
00:01:48,567 --> 00:01:50,320
go ahead and pop them in the chat.

32
00:01:50,320 --> 00:01:54,001
What else Karen will have a link for you,

33
00:01:54,001 --> 00:01:59,210
it is
github.com/anwarmontasir/htmlcssforkids.

34
00:02:00,820 --> 00:02:05,603
Let's see, if you are new to
what we're doing, a reminder to-

35
00:02:05,603 --> 00:02:06,626
>> Hi, Karen.

36
00:02:06,626 --> 00:02:11,320
>> Karen says hi, a reminder to
download the Visual Studio code.

37
00:02:11,320 --> 00:02:16,970
That's the editor that we'll be using
to make edits to our HTML and CSS.

38
00:02:16,970 --> 00:02:22,393
You can also download the files,
Amina has been build, finally, there's

39
00:02:22,393 --> 00:02:27,671
gonna be a link to our Google Slides and-
>> I just like wanna download my life.

40
00:02:27,671 --> 00:02:32,139
>> The lessons that you've been building,
not your whole life.

41
00:02:32,139 --> 00:02:35,413
>> Wait, why are you sharing [INAUDIBLE]?

42
00:02:35,413 --> 00:02:39,638
>> Oops, share was that's correct,
that's not the button I wanted to press,

43
00:02:39,638 --> 00:02:40,483
present is it?

44
00:02:40,483 --> 00:02:45,670
And here we go,
what are we learning today?

45
00:02:45,670 --> 00:02:50,520
Two things, two goals,
we're going to learn the CSS box model.

46
00:02:50,520 --> 00:02:55,125
We're also going to learn a feature
in Google Chrome called inspector.

47
00:02:55,125 --> 00:02:59,044
If you're a Firefox user, that's cool,
there's an inspector there as well.

48
00:02:59,044 --> 00:03:06,773
>> Looks like this guy is like, the guy
who has six fingers like my name is me.

49
00:03:06,773 --> 00:03:10,699
>> Really, that's the guy who
killed Iñigo Montoya's father.

50
00:03:10,699 --> 00:03:11,679
>> Really?

51
00:03:11,679 --> 00:03:13,649
It looks like he has six feet.

52
00:03:13,649 --> 00:03:18,382
>> Yep, well, all right, we'll-
>> See, like sometimes if you look at it

53
00:03:18,382 --> 00:03:24,720
looks like one, two, three, four,
five, and then his thumb is under.

54
00:03:24,720 --> 00:03:29,610
>> Well, all right, so he better
watch out for Iñigo Montoya, then.

55
00:03:29,610 --> 00:03:35,470
Let's see, all right, so you know we've
learned a lot of HTML for our content.

56
00:03:35,470 --> 00:03:39,970
We've learned a lot in CSS, but it's
mostly than about styling text, right?

57
00:03:39,970 --> 00:03:43,476
You remember how to change
the background color.

58
00:03:43,476 --> 00:03:47,930
>> No,
I'm [INAUDIBLE] not [INAUDIBLE] again.

59
00:03:47,930 --> 00:03:52,102
>> We're just reminding our audience out
there maybe they're not as superduper as

60
00:03:52,102 --> 00:03:57,809
you are, maybe they need a little writing
>> It's just so last year.

61
00:03:57,809 --> 00:04:02,297
>> Notes, all right, so colors,
background colors, text color,

62
00:04:02,297 --> 00:04:04,800
font family, we did all that.

63
00:04:04,800 --> 00:04:10,543
What we have never figured out is how to
change the space between HTML elements,

64
00:04:10,543 --> 00:04:11,153
right?

65
00:04:11,153 --> 00:04:15,380
Well, you might like it how it is and
you might wanna leave it alone.

66
00:04:15,380 --> 00:04:16,610
Do you recognize this picture?

67
00:04:19,040 --> 00:04:25,562
>> Yes, it's from the best
website on Earth, Earth, Earth.

68
00:04:25,562 --> 00:04:26,310
>> Exactly.

69
00:04:26,310 --> 00:04:27,770
>> Even in the galaxy.

70
00:04:27,770 --> 00:04:32,816
>> So sometimes we might wanna take
the best website in the galaxy and

71
00:04:32,816 --> 00:04:37,510
add a little bit more space or
reduce a little bit more space.

72
00:04:38,950 --> 00:04:43,548
>> So it's the best website
that was ever made in

73
00:04:43,548 --> 00:04:48,880
the galaxy and
it wouldn't be the best one.

74
00:04:50,640 --> 00:04:52,970
>> So let's figure out how to make
the best website even better.

75
00:04:52,970 --> 00:04:58,367
We want to understand the CSS box model,
now, it's kind of a strange name, but what

76
00:04:58,367 --> 00:05:03,704
we're going to learn is that we've been
loading our pages in the browser, right?

77
00:05:03,704 --> 00:05:05,300
>> Do we need to go get a box?

78
00:05:05,300 --> 00:05:10,080
>> No, I think the cats are probably
using the boxes, let's see.

79
00:05:10,080 --> 00:05:16,240
So we have HTML elements like an h1,
right, a big heading and a paragraph.

80
00:05:16,240 --> 00:05:18,878
And when we load those in the browser,

81
00:05:18,878 --> 00:05:22,680
the browser thinks of each
one as being in a box, okay?

82
00:05:22,680 --> 00:05:29,967
>> [INAUDIBLE]
>> Now normally,

83
00:05:29,967 --> 00:05:34,330
we can't see the box we just have to kind
of imagine each one is in a rectangle.

84
00:05:34,330 --> 00:05:39,130
>> So, it's like this is
the word show the kitten.

85
00:05:40,970 --> 00:05:43,090
>> And
the area around the kitten is the box.

86
00:05:44,140 --> 00:05:45,500
Yep, there we go.

87
00:05:45,500 --> 00:05:46,693
>> [INAUDIBLE]
>> So

88
00:05:46,693 --> 00:05:51,130
we're going to think about
this blue area in here.

89
00:05:51,130 --> 00:05:54,360
If that's our kitten,
our content is our kitten, right?

90
00:05:54,360 --> 00:05:56,155
So we have-
>> Why is it so late?

91
00:05:56,155 --> 00:06:03,294
I just look like, we're back in
the 80s like my hands down tonight.

92
00:06:03,294 --> 00:06:10,550
>> Well, I'm not sure, that was-
>> Just like the word or kind of word.

93
00:06:10,550 --> 00:06:15,345
Those colors are so old,
it looks like we're looking at an old TV,

94
00:06:15,345 --> 00:06:17,250
maybe no computer.

95
00:06:17,250 --> 00:06:20,150
See, she says right there, Ronnie.

96
00:06:21,860 --> 00:06:24,359
>> Okay, so we have our content,

97
00:06:24,359 --> 00:06:29,080
this is going to be whatever
we see on our page, right?

98
00:06:29,080 --> 00:06:32,548
An h1 in this case or
a paragraph or that sort of thing.

99
00:06:32,548 --> 00:06:37,679
>> Wait, is it like Helen poems
we were learning about like,

100
00:06:37,679 --> 00:06:40,517
AA BB or in line it's like this.

101
00:06:40,517 --> 00:06:45,337
I'm just wondering can I
ever be like HTML CSS?

102
00:06:45,337 --> 00:06:52,398
>> Not really, this is a diagram for
how each HTML element like this h1,

103
00:06:52,398 --> 00:06:56,596
the type of space you have around it, so.

104
00:06:56,596 --> 00:07:01,672
>> CSS says, make an array and-
>> Exactly, so

105
00:07:01,672 --> 00:07:07,248
let's do this, let's figure out how to
put a border around one of our elements,

106
00:07:07,248 --> 00:07:11,270
because then we can actually
see how the box looks, okay?

107
00:07:11,270 --> 00:07:16,049
>> Shut up press Enter, so it was
a thumbnail, people like the middle batum.

108
00:07:16,049 --> 00:07:19,872
>> We can move our text to the center,
if you want,

109
00:07:19,872 --> 00:07:23,609
that can be a little bonus for
what we do today.

110
00:07:23,609 --> 00:07:29,020
Okay, actually,
there's an easier way in CSS.

111
00:07:29,020 --> 00:07:33,500
So border, we have quite a few properties.

112
00:07:33,500 --> 00:07:38,440
We have border color, we have border
style, and we have border width.

113
00:07:38,440 --> 00:07:42,810
>> But for a solid if you said gelatin,
would it be all jelly?

114
00:07:42,810 --> 00:07:47,702
Then would it be always moving
around the screen like a gelatin?

115
00:07:47,702 --> 00:07:51,850
>> That's a good question, I don't know
if CSS understands the word jelly.

116
00:07:51,850 --> 00:07:53,570
We'll look at the options that we do have.

117
00:07:53,570 --> 00:07:54,661
>> [INAUDIBLE] gelatin.

118
00:07:54,661 --> 00:07:59,568
>> Probably not, so let's go ahead and

119
00:07:59,568 --> 00:08:04,490
add a border to your h1, okay?

120
00:08:04,490 --> 00:08:06,465
So let's do border color.

121
00:08:06,465 --> 00:08:10,333
>> [INAUDIBLE] well,
what's that [INAUDIBLE]?

122
00:08:10,333 --> 00:08:15,108
>> That's the,
text color of your h1, remember,

123
00:08:15,108 --> 00:08:19,425
so if you go to Google Chrome,
this is why, or

124
00:08:19,425 --> 00:08:23,859
we could put a border
around your paragraphs or

125
00:08:23,859 --> 00:08:28,087
your links, it's really up to you, okay?

126
00:08:28,087 --> 00:08:30,217
>> Wait, I have a question.

127
00:08:30,217 --> 00:08:31,450
>> Yes.

128
00:08:31,450 --> 00:08:36,104
>> Why is that one a way
darker color than these?

129
00:08:36,104 --> 00:08:37,960
That's our link color will come.

130
00:08:37,960 --> 00:08:40,960
That's a good question,
let's cover that next one.

131
00:08:40,960 --> 00:08:45,940
Okay, so you wanna put a color
border around your head.

132
00:08:47,640 --> 00:08:49,047
Where should we put our border?

133
00:08:51,953 --> 00:08:54,386
Or heading two,
maybe one of our smaller headings.

134
00:08:54,386 --> 00:08:55,981
>> Frame on a picture.

135
00:08:55,981 --> 00:08:58,737
>> Here,
let's put it around polar bears & koalas.

136
00:08:58,737 --> 00:09:01,539
>> [SOUND]
>> Nina,

137
00:09:01,539 --> 00:09:04,559
you gotta work with me here, what-
>> I can't.

138
00:09:04,559 --> 00:09:06,580
>> Where are we going to put the border?

139
00:09:08,041 --> 00:09:11,720
Well, that's the title, remember,
where does the title show up?

140
00:09:11,720 --> 00:09:18,490
The title shows up here in the tab, so
we can't put a border around that, okay?

141
00:09:19,810 --> 00:09:21,560
So can we,
where do you wanna put the border?

142
00:09:24,210 --> 00:09:28,320
>> Why can't you just make
it underline instead?

143
00:09:28,320 --> 00:09:30,480
>> Well, because we got to follow
the notes we prepared today, so.

144
00:09:30,480 --> 00:09:34,120
>> Well, so can I do a border
like delete it afterwards?

145
00:09:35,160 --> 00:09:39,198
>> Yes, so, all right,
we're going to make a selector for

146
00:09:39,198 --> 00:09:42,340
the h2 that are heading number two.

147
00:09:42,340 --> 00:09:43,254
Can you go ahead and type a border?

148
00:09:43,254 --> 00:09:47,100
>> I can tell her, catch her Friday news,
I hear missing him.

149
00:09:47,100 --> 00:09:50,140
Yeah, that's probably happening in
a lot in people's homes right now.

150
00:09:50,140 --> 00:09:51,892
Can you type the word border?

151
00:09:51,892 --> 00:09:56,618
>> [INAUDIBLE]
or [INAUDIBLE]

152
00:09:56,618 --> 00:09:58,039
like-

153
00:09:58,039 --> 00:10:01,640
>> Whoops, B-O-R-D-E-R, oops.

154
00:10:01,640 --> 00:10:03,220
We have an extra E in there.

155
00:10:08,190 --> 00:10:13,730
Okay, border, and
then let's start with the color maybe.

156
00:10:15,060 --> 00:10:19,722
Okay, and what's the color you
wanna make for your border?

157
00:10:26,472 --> 00:10:30,287
>> [INAUDIBLE]

158
00:10:30,287 --> 00:10:34,007
>> Okay, long green, sounds great.

159
00:10:34,007 --> 00:10:39,960
>> Yeah, just base, I don't want to
border, so I tend to choose any random.

160
00:10:39,960 --> 00:10:43,341
>> Well, today, we're learning,
you're gonna be able to take the things

161
00:10:43,341 --> 00:10:45,862
you've learned and
do crazy little things with them.

162
00:10:45,862 --> 00:10:47,781
>> Why can't we just put
a border on the following?

163
00:10:47,781 --> 00:10:52,934
>> Can, okay, and we would change that to,

164
00:10:52,934 --> 00:11:00,724
I am, [SOUND] because that is
the name of our image tag, okay.

165
00:11:00,724 --> 00:11:02,116
>> Actually, [INAUDIBLE].

166
00:11:02,116 --> 00:11:08,283
>> Mm-hm, can you under border
color type border again?

167
00:11:08,283 --> 00:11:12,009
>> [INAUDIBLE]
>> Type border again.

168
00:11:12,009 --> 00:11:15,476
Oops, we lost, now,

169
00:11:15,476 --> 00:11:20,598
we have broader
>> [LAUGH]

170
00:11:20,598 --> 00:11:21,322
>> It's a border for

171
00:11:21,322 --> 00:11:22,580
all our bros out there, okay.

172
00:11:24,790 --> 00:11:29,448
Border, let's do with, cuz that's
going to be how wide the border is and

173
00:11:29,448 --> 00:11:33,150
how many, remember,
pixels is our screen measurement?

174
00:11:33,150 --> 00:11:34,775
How many pixels do you want your border?

175
00:11:34,775 --> 00:11:36,184
>> Pixycal berries.

176
00:11:36,184 --> 00:11:40,034
>> Pixecal berries, how many pixecal
berries do you want your border to be?

177
00:11:40,034 --> 00:11:43,298
Five pixecal berries, ten.

178
00:11:43,298 --> 00:11:45,650
>> 100.

179
00:11:45,650 --> 00:11:53,200
>> That's a very big border, don't forget
px for pixecal berries, okay, perfect.

180
00:11:53,200 --> 00:11:57,995
One more line underneath and
you are going to do semi colon and

181
00:11:57,995 --> 00:12:03,890
ends each statement, and
that should stay up on that previous line.

182
00:12:03,890 --> 00:12:06,282
Okay, do border one more time.

183
00:12:11,755 --> 00:12:16,730
And then style, Okay?

184
00:12:16,730 --> 00:12:19,740
>> Wait, so where's the lipstick?

185
00:12:19,740 --> 00:12:21,140
Where's the hair?

186
00:12:21,140 --> 00:12:24,450
Where's the bun?

187
00:12:24,450 --> 00:12:25,810
>> Which of these do you wanna try out?

188
00:12:26,920 --> 00:12:31,639
Solid is like a-
>> I wanna choose Jello!

189
00:12:31,639 --> 00:12:32,742
>> Well, they don't have Jello.

190
00:12:32,742 --> 00:12:37,300
>> CSS isn't ready for your jelly, so we
have to pick one of the ones that is here.

191
00:12:38,540 --> 00:12:40,923
Solid is a plain old border or you can do.

192
00:12:40,923 --> 00:12:46,201
>> I wanna type [INAUDIBLE]
>> I'm

193
00:12:46,201 --> 00:12:48,459
pretty sure-
>> There's another.

194
00:12:48,459 --> 00:12:51,340
>> Can you refresh the page?

195
00:12:51,340 --> 00:12:55,000
I'm pretty sure it's not going
to give you a Jello border.

196
00:12:57,100 --> 00:13:01,520
In fact, we don't get any border at all,
cuz it didn't understand what you meant.

197
00:13:01,520 --> 00:13:03,660
So let's pick one of
the options that were there.

198
00:13:05,340 --> 00:13:08,388
I agree and
I think CSS gives you more choices,

199
00:13:08,388 --> 00:13:11,995
let's see how about just
do something different now.

200
00:13:16,242 --> 00:13:21,110
>> When I'm all around in the event,
something called Jello border.

201
00:13:21,110 --> 00:13:24,306
>> That is a very good goal,
can you save your page and-

202
00:13:24,306 --> 00:13:25,973
>> Can you make it be like solid,

203
00:13:25,973 --> 00:13:29,190
and then I have a ton of talk
all about these on the border?

204
00:13:30,490 --> 00:13:32,622
>> That's a good question, I have no idea.

205
00:13:32,622 --> 00:13:38,767
>> [MUSIC]

206
00:13:38,767 --> 00:13:40,760
>> Very good, and we go over to Chrome.

207
00:13:40,760 --> 00:13:43,862
>> [MUSIC]

208
00:13:43,862 --> 00:13:46,330
>> All right, and refresh your page.

209
00:13:46,330 --> 00:13:47,230
>> Refresh your page.

210
00:13:47,230 --> 00:13:48,500
>> Okay.

211
00:13:48,500 --> 00:13:49,990
>> Jeez, that's a big.

212
00:13:49,990 --> 00:13:52,282
>> That's a big border, that's 100 pixels.

213
00:14:04,322 --> 00:14:06,250
That's going to be one pixel different.

214
00:14:07,260 --> 00:14:09,220
Certainly the tiniest bit smaller.

215
00:14:10,590 --> 00:14:14,126
Okay now, this time-
>> Wait, so

216
00:14:14,126 --> 00:14:17,500
I should [INAUDIBLE] I'm
gonna try to make it fit.

217
00:14:18,850 --> 00:14:23,991
>> Okay, this time when we go back
to Chrome, we're gonna notice

218
00:14:23,991 --> 00:14:29,770
that our border is showing and
that's the idea of a CSS box.

219
00:14:29,770 --> 00:14:31,415
>> Yep.
>> [INAUDIBLE]

220
00:14:31,415 --> 00:14:32,745
>> I like it too, so now,

221
00:14:32,745 --> 00:14:37,015
we have two types of spacing that we
can put around here, if we'd like and

222
00:14:37,015 --> 00:14:38,776
let's go back to our slides.

223
00:14:43,532 --> 00:14:46,322
I mean, I mean.

224
00:14:46,322 --> 00:14:52,652
>> [INAUDIBLE]
>> Nina, only one driver at a time.

225
00:14:52,652 --> 00:14:54,726
>> [LAUGH]
>> Okay,

226
00:14:54,726 --> 00:14:57,020
this is why they don't do cars
with two steering wheels.

227
00:14:57,020 --> 00:15:02,940
Let's see, all right, so we have two
different types of spacing we can add.

228
00:15:02,940 --> 00:15:04,384
One is called padding.

229
00:15:04,384 --> 00:15:06,350
>> And then we press full screen.

230
00:15:06,350 --> 00:15:07,256
>> It is in full screen.

231
00:15:07,256 --> 00:15:08,588
>> No.

232
00:15:08,588 --> 00:15:11,245
>> Yeah, see?

233
00:15:11,245 --> 00:15:12,328
>> Yeah, [INAUDIBLE].

234
00:15:12,328 --> 00:15:17,362
>> Okay, padding space in between

235
00:15:17,362 --> 00:15:22,020
the border and the element.

236
00:15:22,020 --> 00:15:25,275
>> One space because of how thick it is.

237
00:15:25,275 --> 00:15:30,203
>> Well, but
we need to know the types of spacing,

238
00:15:30,203 --> 00:15:34,024
so space inside is called padding and

239
00:15:34,024 --> 00:15:39,342
space outside the border is called Margin,
okay.

240
00:15:39,342 --> 00:15:41,615
>> wait, can you choose foam or

241
00:15:41,615 --> 00:15:46,590
like welcome
>> So if you wanted to move this whole

242
00:15:46,590 --> 00:15:50,062
image away from the word brownies,

243
00:15:50,062 --> 00:15:54,458
if you wanted to give it more space,
so well,

244
00:15:54,458 --> 00:16:00,196
you wouldn't really [CROSSTALK]
>> [INAUDIBLE] now see?

245
00:16:00,196 --> 00:16:05,180
There it is, what's up?

246
00:16:05,180 --> 00:16:11,282
>> Can you make it, so like take this, and
then put it on the border, so the outside?

247
00:16:11,282 --> 00:16:15,110
>> Well, that'd be a lot trickier
than where we at, where we're at.

248
00:16:15,110 --> 00:16:19,000
So let's just give it a try now,
let's take a look at what padding does.

249
00:16:19,000 --> 00:16:23,457
So can you go-
>> [INAUDIBLE] hey, peeps,

250
00:16:23,457 --> 00:16:28,595
can you guys some asking some questions?

251
00:16:28,595 --> 00:16:33,747
I need to ask some questions to
get off my mind off the CSS thing.

252
00:16:33,747 --> 00:16:37,030
>> What do you mean your
mind off the CSS thing?

253
00:16:37,030 --> 00:16:38,556
That's what we're here to learn,
can you type padding?

254
00:16:44,093 --> 00:16:50,830
>> Hey, that's loud people,
stop banging, you're ruining my moment.

255
00:16:50,830 --> 00:16:55,346
>> Two Ds.

256
00:16:55,346 --> 00:16:57,554
>> Let's [INAUDIBLE].

257
00:16:57,554 --> 00:16:59,787
Wait, can you make the mashed potatoes?

258
00:16:59,787 --> 00:17:04,450
>> I don't think so,
it really just accepts numbers of pixels.

259
00:17:04,450 --> 00:17:06,720
So can you pick a number of pixels?

260
00:17:13,645 --> 00:17:15,321
>> Three.

261
00:17:15,321 --> 00:17:20,330
>> You know that's gonna be so large,
we're not gonna be able to see anything.

262
00:17:20,330 --> 00:17:24,950
That's a million pixels,
you can try and see.

263
00:17:24,950 --> 00:17:28,230
Okay, that's a billion pixels and

264
00:17:28,230 --> 00:17:34,025
considering that our screen
is about 2,000 pixels wide,

265
00:17:34,025 --> 00:17:38,200
I don't think, what's going on?

266
00:17:38,200 --> 00:17:43,784
No, you got to put pixels, if you don't
put px, it doesn't know what you mean.

267
00:17:43,784 --> 00:17:45,176
>> I see, [LAUGH].

268
00:17:45,176 --> 00:17:48,770
>> Okay, so, all right,
we can certainly try out.

269
00:17:48,770 --> 00:17:53,089
What does our image look like
with 1 billion pixels of padding?

270
00:17:53,089 --> 00:17:58,815
>> [LAUGH]
>> Okay,

271
00:17:58,815 --> 00:18:03,719
and here is where brownies
equals yummy takes place and

272
00:18:03,719 --> 00:18:09,520
I have no idea where you're image is,
I'm scrolling.

273
00:18:09,520 --> 00:18:12,840
>> Like, I'm-
>> I was making a full screen.

274
00:18:12,840 --> 00:18:13,420
>> Well, so

275
00:18:13,420 --> 00:18:18,280
we're never gonna find [INAUDIBLE] because
we have a billion pixels of padding.

276
00:18:18,280 --> 00:18:25,782
So you tried it, it worked, let's try
maybe 20 just so it's on the screen.

277
00:18:25,782 --> 00:18:29,277
>> Stop, stop it
>> Okay,

278
00:18:29,277 --> 00:18:32,139
whenever you pick something
that will fit on the screen.

279
00:18:32,139 --> 00:18:33,339
>> I.

280
00:18:33,339 --> 00:18:38,000
>> Well-
>> Hey, stop, this is not your show,

281
00:18:38,000 --> 00:18:39,770
this is my show.

282
00:18:39,770 --> 00:18:40,541
>> Let's give that a try.

283
00:18:40,541 --> 00:18:41,382
>> Mh-mh.

284
00:18:41,382 --> 00:18:43,740
>> Okay,
>> Mh-mh

285
00:18:43,740 --> 00:18:46,108
>> And where's our picture now?

286
00:18:46,108 --> 00:18:50,483
>> [SOUND]
>> Okay, well, we can see that,

287
00:18:50,483 --> 00:18:52,644
so oops, what happened?

288
00:18:52,644 --> 00:18:54,989
Let me go back to [INAUDIBLE] so

289
00:18:54,989 --> 00:19:00,480
that was what it looked like with
900 pixels of padding, okay?

290
00:19:02,540 --> 00:19:04,866
>> I'm gonna do Satan's number.

291
00:19:04,866 --> 00:19:07,599
>> Six, six, six.

292
00:19:07,599 --> 00:19:11,840
>> All right, perfect,
that's my girl, so, okay?

293
00:19:14,540 --> 00:19:19,514
And there you go,
there's 666 pixels of padding, so

294
00:19:19,514 --> 00:19:23,875
that space in between the border and
the element.

295
00:19:23,875 --> 00:19:25,916
>> Sure, 333.

296
00:19:25,916 --> 00:19:29,730
>> Okay, and growing back up.

297
00:19:29,730 --> 00:19:31,930
>> It's devil's daughters number.

298
00:19:31,930 --> 00:19:33,690
>> There you go, which is you.

299
00:19:33,690 --> 00:19:35,080
>> Yeah.

300
00:19:35,080 --> 00:19:40,049
>> Okay, so here we go, there's space
in between the border and the element.

301
00:19:40,049 --> 00:19:46,990
>> Okay, I'm just gonna try doing,
just gonna try, wait,

302
00:19:46,990 --> 00:19:52,448
how much-
>> Can you do negative zero?

303
00:19:52,448 --> 00:19:56,535
>> I don't think negative
zero is a number.

304
00:19:56,535 --> 00:20:01,179
>> Negative 33 Yeah,

305
00:20:01,179 --> 00:20:04,320
we're gonna see what will happen if I do,
negative 600.

306
00:20:04,320 --> 00:20:05,996
>> Give it a try.

307
00:20:05,996 --> 00:20:07,803
Then we're here to experiment.

308
00:20:07,803 --> 00:20:11,168
Go to Chrome.

309
00:20:11,168 --> 00:20:16,548
>> [NOISE] There's
a daily stand up meeting,

310
00:20:16,548 --> 00:20:19,314
the need to-
>> Calendar reminders.

311
00:20:19,314 --> 00:20:20,953
Ron and I already had my meeting today.

312
00:20:20,953 --> 00:20:23,715
>> [SOUND]
>> All right,

313
00:20:23,715 --> 00:20:27,722
got a cone and let's see,
negative padding.

314
00:20:27,722 --> 00:20:29,612
Nope, no such thing.

315
00:20:29,612 --> 00:20:31,800
However, can you go back to the padding?

316
00:20:33,430 --> 00:20:35,011
Make it a positive number again.

317
00:20:43,249 --> 00:20:45,059
Well, can.

318
00:20:45,059 --> 00:20:50,341
>> Wait, can you do one slash?

319
00:20:50,341 --> 00:20:54,050
>> No, you can do 12.

320
00:20:54,050 --> 00:20:59,533
Let's try some margin and let's see
what happens when you put space outside.

321
00:20:59,533 --> 00:21:04,614
>> Yeah, why do you want to put?

322
00:21:04,614 --> 00:21:07,592
>> Not margarine.

323
00:21:07,592 --> 00:21:10,610
>> I'm gonna choose three.

324
00:21:10,610 --> 00:21:13,167
When it's always time to get computers,

325
00:21:13,167 --> 00:21:17,640
I always get the number three
because it's the best computer.

326
00:21:17,640 --> 00:21:19,706
>> Okay, try having some margin.

327
00:21:19,706 --> 00:21:26,351
Margin is some space outside the border,
yeah.

328
00:21:26,351 --> 00:21:27,913
Can you track the number of pixels?

329
00:21:31,361 --> 00:21:32,565
>> Six, six, six.

330
00:21:32,565 --> 00:21:37,743
>> Okay, and
don't forget the measurement [INAUDIBLE].

331
00:21:37,743 --> 00:21:41,840
>> Yeah.

332
00:21:41,840 --> 00:21:46,194
>> Okay.

333
00:21:46,194 --> 00:21:47,377
We'll give it a try.

334
00:21:47,377 --> 00:21:49,739
Don't forget the semi colon at the end.

335
00:21:49,739 --> 00:21:51,282
>> The semi colon?

336
00:21:51,282 --> 00:21:53,259
>> Yeah, but after the edge.

337
00:21:53,259 --> 00:21:59,180
>> [INAUDIBLE]
>> Yeah,

338
00:21:59,180 --> 00:22:04,635
each statement in CSS

339
00:22:04,635 --> 00:22:11,912
needs a semicolon after it.

340
00:22:11,912 --> 00:22:14,894
Okay, save it, open it in Chrome.

341
00:22:14,894 --> 00:22:18,628
>> That took a lot longer
than just the reading.

342
00:22:18,628 --> 00:22:22,575
>> Sure, refresh the page.

343
00:22:22,575 --> 00:22:29,175
Okay, so you have,
[SOUND] careful not to knock the mic over.

344
00:22:29,175 --> 00:22:30,659
All right, so again,

345
00:22:30,659 --> 00:22:36,450
this is a little hard to demonstrate
because you have 666,000 pixels of margin.

346
00:22:36,450 --> 00:22:43,188
Can we try a smaller number?

347
00:22:43,188 --> 00:22:45,872
Okay, so say that nothing happened.

348
00:22:45,872 --> 00:22:49,904
>> [SOUND]

349
00:22:49,904 --> 00:22:54,744
Wait.

350
00:22:54,744 --> 00:22:56,540
>> The browser might not like that.

351
00:22:56,540 --> 00:23:00,798
Let's get rid of those, okay?

352
00:23:00,798 --> 00:23:02,570
Save it and try it in Chrome.

353
00:23:09,932 --> 00:23:13,067
>> No, I need to experiment.

354
00:23:13,067 --> 00:23:16,903
>> That's true.
>> Experiment [SOUND].

355
00:23:16,903 --> 00:23:17,432
>> Okay.

356
00:23:21,626 --> 00:23:23,595
>> Wait, what?

357
00:23:23,595 --> 00:23:30,316
[SOUND]
Okay, so there you go.

358
00:23:30,316 --> 00:23:33,531
Each image has, what is that?

359
00:23:33,531 --> 00:23:34,787
12 pixels of margin?

360
00:23:34,787 --> 00:23:39,885
I can't remember what we, or padding,
and then we have 666 pixels of margin.

361
00:23:39,885 --> 00:23:43,250
>> Can you make the padding
a different color?

362
00:23:45,680 --> 00:23:50,216
>> If you change the background color,
I think you could,

363
00:23:50,216 --> 00:23:54,281
because padding is just
showing the background.

364
00:23:54,281 --> 00:23:55,136
Here's the thing.

365
00:23:55,136 --> 00:23:59,419
Try a negative here like,
try -66 pixels of margin, and

366
00:23:59,419 --> 00:24:02,601
let's see whether negative margin works.

367
00:24:02,601 --> 00:24:06,215
>> One of those six negatives, stay tuned.

368
00:24:06,215 --> 00:24:11,835
>> Negative was the opposite of sigma.

369
00:24:11,835 --> 00:24:13,590
Notice, right.

370
00:24:13,590 --> 00:24:16,280
Notice, see backwards would be notice.

371
00:24:16,280 --> 00:24:17,693
All right.

372
00:24:17,693 --> 00:24:22,336
>> I was gonna say, notice.

373
00:24:22,336 --> 00:24:23,570
Yes, it's backwards.

374
00:24:24,820 --> 00:24:27,498
>> Okay, so here we go.

375
00:24:27,498 --> 00:24:30,360
And where did our images go?

376
00:24:30,360 --> 00:24:33,176
Scroll down.

377
00:24:33,176 --> 00:24:38,064
Okay, so the thing is unlike negative
padding, which doesn't work,

378
00:24:38,064 --> 00:24:42,952
negative margin actually does work and
you can use it to pull your images

379
00:24:42,952 --> 00:24:47,120
closer together or
in that case you pulled them off the page.

380
00:24:48,852 --> 00:24:50,518
Okay.

381
00:24:57,787 --> 00:25:04,390
>> Wait, but can you?

382
00:25:04,390 --> 00:25:05,600
>> There you go.

383
00:25:05,600 --> 00:25:10,781
So you have one pixel of margin and
three pixels of patent.

384
00:25:10,781 --> 00:25:13,881
>> Wait,

385
00:25:13,881 --> 00:25:19,567
I wanna see.

386
00:25:19,567 --> 00:25:23,709
How do we add the word [INAUDIBLE]?

387
00:25:23,709 --> 00:25:25,130
>> How do you add the word around text?

388
00:25:25,130 --> 00:25:28,358
What do you think the answer is to that?

389
00:25:28,358 --> 00:25:35,321
>> Be smart, learn calm,
follow our videos [INAUDIBLE].

390
00:25:35,321 --> 00:25:43,440
>> That was, actually you have all the
tools to put a border around text, right?

391
00:25:44,860 --> 00:25:46,720
Do you wanna put a border around our link?

392
00:25:48,890 --> 00:25:51,590
>> Put a border around this link.

393
00:25:51,590 --> 00:25:52,470
>> Okay?

394
00:25:52,470 --> 00:25:53,510
>> No.

395
00:25:53,510 --> 00:25:54,120
>> Let's try.

396
00:25:54,120 --> 00:25:54,860
>> Wait, yes!

397
00:25:54,860 --> 00:25:56,450
>> Yeah, let's try that.

398
00:25:56,450 --> 00:26:02,535
So, go to, let's type the letter a,
which is our link.

399
00:26:02,535 --> 00:26:08,261
>> [SOUND]
>> And then make the little,

400
00:26:08,261 --> 00:26:11,660
what did we decide the curly braces
are called, squiggle bananas?

401
00:26:15,450 --> 00:26:17,330
We'll go ahead and
type them while you think about them.

402
00:26:17,330 --> 00:26:18,070
>> Squiggle bananas.

403
00:26:18,070 --> 00:26:19,930
>> Yeah, type some squiggle bananas.

404
00:26:19,930 --> 00:26:26,464
Okay, so this is our selector,
we're selecting the A tag.

405
00:26:26,464 --> 00:26:32,367
>> The MPs [INAUDIBLE] that isn't my life.

406
00:26:32,367 --> 00:26:36,280
>> Nope, hold the shift and
type the letter next to the letter P, or

407
00:26:36,280 --> 00:26:38,030
the key next to the letter P.

408
00:26:40,280 --> 00:26:45,320
Okay, there, all right, so just like
we did before, let's add a border.

409
00:26:45,320 --> 00:26:46,511
So can you type border?

410
00:26:51,666 --> 00:26:53,865
Oops.

411
00:26:53,865 --> 00:26:58,588
>> Oops, wait, why is font variation?

412
00:26:58,588 --> 00:27:03,758
>> Man, there's so much in the CSS
we could be doing but let's.

413
00:27:03,758 --> 00:27:07,990
>> I just wanna type any random words.

414
00:27:07,990 --> 00:27:09,957
>> Let's type border.

415
00:27:09,957 --> 00:27:12,536
>> Border.

416
00:27:12,536 --> 00:27:15,159
>> Okay.
>> Did you see what 666 is?

417
00:27:15,159 --> 00:27:19,100
>> So do you wanna choose a color for
your border?

418
00:27:19,100 --> 00:27:19,800
>> Yeah.

419
00:27:19,800 --> 00:27:21,215
>> So pick border color.

420
00:27:26,701 --> 00:27:28,597
>> Whoa, stop.

421
00:27:28,597 --> 00:27:34,825
>> Okay, and what color do you want?

422
00:27:39,648 --> 00:27:41,790
>> There's the red color
on the yellow toad.

423
00:27:42,910 --> 00:27:44,120
>> Yellow?

424
00:27:44,120 --> 00:27:49,480
No, there's yellow and yellow green,
so we could try yellow.

425
00:27:49,480 --> 00:27:52,636
You okay?

426
00:27:52,636 --> 00:27:56,907
>> No I don't wanna get yellow.

427
00:27:56,907 --> 00:28:00,020
>> Okay, pick a color, then.

428
00:28:00,020 --> 00:28:01,935
Whoops, sorry.

429
00:28:01,935 --> 00:28:04,184
>> I'm trying to find MacArthur Park.

430
00:28:04,184 --> 00:28:07,180
>> [LAUGH] I don't think there's
a color called MacArthur Park.

431
00:28:07,180 --> 00:28:07,849
There should be.

432
00:28:07,849 --> 00:28:09,969
>> Hush, hush, hush, hush, hush.

433
00:28:09,969 --> 00:28:10,469
>> Don't do that.

434
00:28:11,718 --> 00:28:13,836
>> [SOUND]
>> Don't do that either.

435
00:28:13,836 --> 00:28:17,567
Pick a color.

436
00:28:17,567 --> 00:28:20,884
>> Don't say there is no MacArthur Park,

437
00:28:20,884 --> 00:28:24,750
because what if there is but
they deleted it?

438
00:28:24,750 --> 00:28:28,776
>> Which of these colors
looks the most like a cake

439
00:28:28,776 --> 00:28:31,779
that's been left out in the rain?

440
00:28:31,779 --> 00:28:35,645
Remember, it's sweet green icing,
so we got to pick a green color.

441
00:28:35,645 --> 00:28:37,171
I'm not letting you be a sea green.

442
00:28:37,171 --> 00:28:39,160
That looks kind of like a soggy cake.

443
00:28:44,300 --> 00:28:48,320
That looks just like
a cake left in the rain.

444
00:28:48,320 --> 00:28:50,967
Can you do border with?

445
00:28:50,967 --> 00:28:55,497
[MUSIC]

446
00:28:55,497 --> 00:28:56,366
>> That's a good idea.

447
00:29:01,291 --> 00:29:05,040
>> And see.

448
00:29:05,040 --> 00:29:09,270
>> Okay.

449
00:29:09,270 --> 00:29:11,198
>> I [INAUDIBLE].

450
00:29:11,198 --> 00:29:13,587
>> Okay, type a colon.

451
00:29:13,587 --> 00:29:18,160
>> [INAUDIBLE] my kitchen and
my author, cat and my dog.

452
00:29:18,160 --> 00:29:21,042
>> Well, if Drake is watching our
live stream, he's gonna love that.

453
00:29:21,042 --> 00:29:22,804
Can you take the colon?

454
00:29:22,804 --> 00:29:24,537
>> I doubt Drake is watching.

455
00:29:24,537 --> 00:29:26,119
>> You never know.

456
00:29:26,119 --> 00:29:29,445
Drake, if you're out there,
tell Karen hello.

457
00:29:29,445 --> 00:29:31,080
>> Wait, why Karen?

458
00:29:31,080 --> 00:29:35,736
>> Cuz she's controlling our chat.

459
00:29:35,736 --> 00:29:37,183
>> I tell her only partly.

460
00:29:37,183 --> 00:29:41,028
I like my cats and my doggies and my bed.

461
00:29:41,028 --> 00:29:43,934
And maybe my parents.

462
00:29:43,934 --> 00:29:45,032
>> Some days.

463
00:29:45,032 --> 00:29:51,295
Can you press colon shift
in the key next to the L?

464
00:29:53,509 --> 00:29:55,317
>> She's sad.

465
00:29:55,317 --> 00:29:59,152
I'll tell her only partly,
my pets and my mommy.

466
00:29:59,152 --> 00:30:02,151
Maybe my daddy.

467
00:30:02,151 --> 00:30:03,880
>> We'll see how the rest of this goes.

468
00:30:03,880 --> 00:30:05,656
Okay, how wide do you
want your border to be?

469
00:30:06,893 --> 00:30:12,684
[MUSIC]

470
00:30:12,684 --> 00:30:13,963
>> Final countdown time.

471
00:30:13,963 --> 00:30:18,155
I think this will be our last task for
the day.

472
00:30:18,155 --> 00:30:23,715
Okay and don't forget pies and
blueberries.

473
00:30:23,715 --> 00:30:31,793
Excellent, what are we
gonna use statement with?

474
00:30:31,793 --> 00:30:34,503
We still need our borders style.

475
00:30:34,503 --> 00:30:39,694
So type a semicolon at
the end of that one.

476
00:30:39,694 --> 00:30:42,022
Whoops, don't forget
the semicolon up here.

477
00:30:42,022 --> 00:30:45,802
>> [MUSIC]

478
00:30:45,802 --> 00:30:48,221
It's gonna die of shame.

479
00:30:48,221 --> 00:30:54,186
I feel so sad.

480
00:30:54,186 --> 00:30:55,796
>> Border style.

481
00:30:55,796 --> 00:30:57,850
>> So give it a charge.

482
00:30:57,850 --> 00:31:03,118
>> I will thank you for
the dramatic charge my laptop song.

483
00:31:03,118 --> 00:31:06,030
You are correct that I should do that.

484
00:31:06,030 --> 00:31:10,810
I managed to type some gibberish on
screen while I was plugging it in.

485
00:31:10,810 --> 00:31:16,680
All right, border style,
then our border will be stylish, okay.

486
00:31:19,030 --> 00:31:21,690
And what border style do you wanna try?

487
00:31:21,690 --> 00:31:22,190
Oops.

488
00:31:23,570 --> 00:31:25,952
Groove.

489
00:31:25,952 --> 00:31:30,740
>> What does that mean
is sparkling silver?

490
00:31:30,740 --> 00:31:33,570
>> It should be, it probably
looks a lot like guided diamond.

491
00:31:33,570 --> 00:31:34,614
Can you add one more?

492
00:31:34,614 --> 00:31:36,861
>> Sure look like diamonds.

493
00:31:36,861 --> 00:31:40,604
>> [LAUGH] Exactly, type on more O.

494
00:31:40,604 --> 00:31:42,571
Okay save open [INAUDIBLE].

495
00:31:42,571 --> 00:31:48,754
>> [MUSIC]

496
00:31:48,754 --> 00:31:54,574
>> There we go so our link called black
velvet pants has a border around it.

497
00:31:54,574 --> 00:31:58,867
You can actually see there's kind of like
two little different colors of green

498
00:31:58,867 --> 00:31:59,460
in there.

499
00:31:59,460 --> 00:32:02,642
That's what the green looks like.

500
00:32:02,642 --> 00:32:05,430
Okay, great work today.

501
00:32:05,430 --> 00:32:06,230
>> Wait.

502
00:32:06,230 --> 00:32:08,810
>> What's up?
>> Before we can take a vine?

503
00:32:08,810 --> 00:32:14,828
We have to find out brothers.

504
00:32:14,828 --> 00:32:15,870
>> As a champion?

505
00:32:17,290 --> 00:32:22,114
All right, so Amina as a send off for
everyone today.

506
00:32:22,114 --> 00:32:23,640
What is that called, the aerobics camp?

507
00:32:23,640 --> 00:32:24,640
Yeah, there we go.

508
00:32:24,640 --> 00:32:25,910
All right, thanks so much.

509
00:32:25,910 --> 00:32:27,023
We'll work on it.

510
00:32:27,023 --> 00:32:30,564
>> [MUSIC]

511
00:32:30,564 --> 00:32:34,644
>> We'll work on the Chrome inspector
next week because we're out of time.

512
00:32:34,644 --> 00:32:37,225
We'll see you next week at 11 AM PST.

513
00:32:37,225 --> 00:32:39,073
Thank you so much for joining us.

514
00:32:39,073 --> 00:32:39,994
She's a champion.

515
00:32:39,994 --> 00:32:40,494
[MUSIC]