1
00:00:08,154 --> 00:00:09,160
[MUSIC]
Showtime.

2
00:00:09,160 --> 00:00:12,640
>> Showtime, hello, my name is Anwar.

3
00:00:12,640 --> 00:00:15,600
I'm a designer, a developer,
teacher at Treehouse.

4
00:00:15,600 --> 00:00:16,820
Thank you for joining us today.

5
00:00:16,820 --> 00:00:18,327
Who is this?
>> I'm Amina N,

6
00:00:18,327 --> 00:00:23,990
all you need to know is that I'm
a playgrounder at Creston Elementary.

7
00:00:23,990 --> 00:00:24,503
So, there you have it.

8
00:00:24,503 --> 00:00:26,930
>> There you have it.

9
00:00:26,930 --> 00:00:29,530
Welcome from Portland, Oregon.

10
00:00:29,530 --> 00:00:32,390
I hope everyone out there is healthy and
safe.

11
00:00:32,390 --> 00:00:37,868
Thanks for joining us for,
what would you call this,

12
00:00:37,868 --> 00:00:41,660
episode two of HTML and CSS for kids.

13
00:00:41,660 --> 00:00:44,103
>> Aka, Tiny Tim learns how to code.

14
00:00:44,103 --> 00:00:45,310
>> Tiny Tim,
[LAUGH] when did you become Tiny Tim?

15
00:00:45,310 --> 00:00:52,538
>> I don't know, because somebody
in the audience is called Tiny Tim.

16
00:00:52,538 --> 00:00:59,965
Our audience is Tiny Tims, so this should
be called Tiny Tims Learn to Code.

17
00:00:59,965 --> 00:01:01,345
>> Makes sense to me.

18
00:01:01,345 --> 00:01:06,711
All right, we have a link for
you with some resources that Karen,

19
00:01:06,711 --> 00:01:11,313
who's assisting today,
is gonna to share in the chat.

20
00:01:11,313 --> 00:01:12,693
>> Yeah, boy.

21
00:01:12,693 --> 00:01:17,423
>> The URL is
github.com/anwarmontasir/html-css-for-k-

22
00:01:17,423 --> 00:01:20,144
ids, with some hyphens in between.

23
00:01:20,144 --> 00:01:24,915
But again,
that's gonna get pasted into the chat,

24
00:01:24,915 --> 00:01:29,440
that's easier than than me saying it.

25
00:01:29,440 --> 00:01:32,780
What else,
a reminder that we have more lessons.

26
00:01:32,780 --> 00:01:36,902
A STEM track for kids things.

27
00:01:36,902 --> 00:01:37,731
>> What's a STEM track?

28
00:01:37,731 --> 00:01:41,218
>> Well, what STEM stands for?

29
00:01:41,218 --> 00:01:43,910
>> Science, technology.

30
00:01:43,910 --> 00:01:47,410
>> Science, technology,
what are the other two?

31
00:01:47,410 --> 00:01:50,580
>> Engineering and math
>> Engineering and math.

32
00:01:50,580 --> 00:01:54,545
Yeah, so we have a track for
kids to learn at teamtreehouse.com

33
00:01:54,545 --> 00:01:55,064
>> Yeah,

34
00:01:55,064 --> 00:01:58,203
like a virtual track that you race on.

35
00:01:58,203 --> 00:02:02,993
>> Good question,
it's actually a track of learning courses,

36
00:02:02,993 --> 00:02:05,305
there's no circular track.

37
00:02:06,572 --> 00:02:08,332
Also, Karen's moderating the chat.

38
00:02:08,332 --> 00:02:12,932
So if you have questions about Treehouse
or about what we're doing, let us know.

39
00:02:12,932 --> 00:02:17,859
In terms of the link that I mentioned,
we have last week's files.

40
00:02:17,859 --> 00:02:22,876
So if you didn't catch what we were doing
last week, you can download right here.

41
00:02:22,876 --> 00:02:27,440
Just press Download ZIP and
then you'll have that on your computer.

42
00:02:27,440 --> 00:02:30,130
>> What's ZIP stand for?

43
00:02:30,130 --> 00:02:33,420
>> ZIP is, that's a really good question,
thank you for asking.

44
00:02:33,420 --> 00:02:37,858
The files will come bundled
into your computer as one file.

45
00:02:37,858 --> 00:02:42,601
So instead of having to download
a whole bunch of separate files,

46
00:02:42,601 --> 00:02:46,380
it comes-
>> They will be bundled like a burrito.

47
00:02:46,380 --> 00:02:47,587
>> Yeah, exactly, so

48
00:02:47,587 --> 00:02:52,560
you're downloading this burrito
called html-css-for-kids-master.zip.

49
00:02:53,900 --> 00:02:59,602
And when you open it,
it will have a file I made called README,

50
00:02:59,602 --> 00:03:02,684
which is just this information.

51
00:03:02,684 --> 00:03:06,912
And a folder you made called quackamole,
why did we call it quackamole?

52
00:03:06,912 --> 00:03:08,616
What does that mean?

53
00:03:08,616 --> 00:03:09,987
>> Here's a joke.

54
00:03:09,987 --> 00:03:12,934
Why did the duck buy an avocado?

55
00:03:12,934 --> 00:03:15,394
The file is the answer.

56
00:03:15,394 --> 00:03:17,113
He wanted to make quackamole.

57
00:03:17,113 --> 00:03:19,069
>> He wanted to make quackamole,
there you go.

58
00:03:20,540 --> 00:03:27,940
Let's see, in this README we have
the links to where you can stream this.

59
00:03:27,940 --> 00:03:29,016
Hopefully you're doing that already.

60
00:03:29,016 --> 00:03:31,577
>> What's Twitch?
>> I don't know, it's a place for

61
00:03:31,577 --> 00:03:33,285
watching live streams.

62
00:03:33,285 --> 00:03:36,280
>> Okey dokey.

63
00:03:36,280 --> 00:03:42,270
>> Yeah, I also have a link to some
slides that we're about to go over.

64
00:03:42,270 --> 00:03:44,650
We have some learnings we're going to do.

65
00:03:44,650 --> 00:03:46,510
Let's bring Karen up.

66
00:03:46,510 --> 00:03:49,900
Can you click that window back there?

67
00:03:49,900 --> 00:03:53,000
>> This?
>> Yeah, okay, there we go.

68
00:03:53,000 --> 00:03:54,245
No questions so far.
Okay, oops.

69
00:03:54,245 --> 00:03:57,775
>> [LAUGH]
>> Weird, let's try that again.

70
00:03:57,775 --> 00:04:00,648
>> [LAUGH]
>> Okay, Google Slides, we have a couple

71
00:04:00,648 --> 00:04:05,655
things that we'd like to accomplish today,
a paragraph, a link and an image.

72
00:04:05,655 --> 00:04:11,670
I also had a question last week that I
didn't know the answer to, books for kids.

73
00:04:11,670 --> 00:04:14,630
What if you want to have a book
at home for learning this stuff?

74
00:04:14,630 --> 00:04:17,701
I haven't personally tried
either of these books out,

75
00:04:17,701 --> 00:04:20,720
though if they look interesting to you,
maybe we can.

76
00:04:21,980 --> 00:04:27,990
One is called Creating a Web Site,
Design and Build Your First Website.

77
00:04:27,990 --> 00:04:31,431
>> I have a book that is like coding for
girls and

78
00:04:31,431 --> 00:04:35,130
it's like-
>> There's one called Coding for Girls?

79
00:04:35,130 --> 00:04:38,939
Let's see, oops, not oding for girls.

80
00:04:38,939 --> 00:04:41,980
>> [LAUGH]
>> I don't know what that is.

81
00:04:43,680 --> 00:04:46,376
Coding for girls.
>> Right there, it's like Girls Who Code.

82
00:04:46,376 --> 00:04:49,327
>> Girls Who Code: Learn to Code and
Change the World.

83
00:04:49,327 --> 00:04:51,942
>> I had a different book of that.

84
00:04:51,942 --> 00:04:54,230
>> Look,
it looks like there's a whole series.

85
00:04:54,230 --> 00:04:55,490
Yeah, there you go.

86
00:04:55,490 --> 00:04:56,950
See, I didn't know that.

87
00:04:56,950 --> 00:05:00,850
>> Yes, so
you should check that out, girls.

88
00:05:00,850 --> 00:05:03,210
>> There we go, add that to our list.

89
00:05:03,210 --> 00:05:08,435
I also found one called A Comic Guide
to HTML, CSS, and WordPress.

90
00:05:08,435 --> 00:05:11,310
>> That sounds suave,
that sounds a lot cooler to me.

91
00:05:13,050 --> 00:05:19,150
But that one and the girls' one is
the one I wanna try, I like comic.

92
00:05:19,150 --> 00:05:21,660
>> So we'll check them out.

93
00:05:21,660 --> 00:05:23,290
Anything else before we get started?

94
00:05:23,290 --> 00:05:25,366
Let's load up our slides.

95
00:05:25,366 --> 00:05:29,084
>> Ooh, fancy-schmancy.

96
00:05:29,084 --> 00:05:31,540
>> How did a unicorn and
a penguin get up here?

97
00:05:31,540 --> 00:05:33,800
>> What, a unicorn and penguin, wow.

98
00:05:33,800 --> 00:05:35,410
>> Well, you're the penguin,
so I guess I'm the unicorn?

99
00:05:35,410 --> 00:05:38,087
All right, let's see.

100
00:05:38,087 --> 00:05:43,145
>> But no, unicorn,
you can be that penguin.

101
00:05:43,145 --> 00:05:45,925
>> You're both, I guess, all right.

102
00:05:45,925 --> 00:05:47,515
>> A penguincorn.

103
00:05:47,515 --> 00:05:48,445
>> Penguincorn, perfect.

104
00:05:49,805 --> 00:05:54,342
All right, we mentioned our goal today,
let's create a paragraph and

105
00:05:54,342 --> 00:05:55,558
a image and a link.

106
00:05:55,558 --> 00:05:58,249
Before we do that-
>> One, two, three.

107
00:05:58,249 --> 00:06:04,716
[SOUND]
>> Great, en francais, un?

108
00:06:04,716 --> 00:06:05,240
>> Un, deux, trois.

109
00:06:05,240 --> 00:06:09,080
>> Un, deux, trois, Amina has been taking
French since we've been stuck at home.

110
00:06:09,080 --> 00:06:19,890
>> [FOREIGN]

111
00:06:19,890 --> 00:06:20,887
>> All set, okay,

112
00:06:20,887 --> 00:06:25,375
before we work on our new things,
let's go over what we learned last week,

113
00:06:25,375 --> 00:06:26,700
some vocabulary.

114
00:06:26,700 --> 00:06:28,290
Let's see how much of
this can you remember.

115
00:06:28,290 --> 00:06:29,038
What's HTML?

116
00:06:29,038 --> 00:06:35,820
>> Hyper text [INAUDIBLE].

117
00:06:35,820 --> 00:06:37,960
>> Very, very close.

118
00:06:37,960 --> 00:06:39,163
I'm glad it's not that,

119
00:06:39,163 --> 00:06:43,327
cuz I'd never be able to remember it
>> So you got the hypertext part right,

120
00:06:43,327 --> 00:06:44,430
which is really important.

121
00:06:44,430 --> 00:06:46,250
Do you remember what hypertext means?

122
00:06:48,260 --> 00:06:53,008
>> A superhero,
that's if that text is like The Flash.

123
00:06:53,008 --> 00:06:55,360
>> He can text really fast,
wow, I like that idea.

124
00:06:55,360 --> 00:06:59,662
That would be a cool illustration to
go along with someone typing it at

125
00:06:59,662 --> 00:07:00,930
a hyper fast speed.

126
00:07:02,190 --> 00:07:06,152
Hypertext actually means that
I like your idea better.

127
00:07:06,152 --> 00:07:10,370
>> Sure. [LAUGH] >> It means
the ability to make hyperlinks.

128
00:07:10,370 --> 00:07:15,124
So the fact that you can say,
let's watch a video of kitten ball,

129
00:07:15,124 --> 00:07:20,780
let's watch whatever video you want, you
can make a link to other content, okay?

130
00:07:21,990 --> 00:07:25,160
Markup is what we started to
learn to do last week, right?

131
00:07:25,160 --> 00:07:33,520
>> Image, paragraph and.

132
00:07:33,520 --> 00:07:35,160
>> Heading, that's the other one there.

133
00:07:35,160 --> 00:07:39,071
So, we are going to use our
HTML to mark up our content,

134
00:07:39,071 --> 00:07:42,653
to tell the browser, okay,
this is how it works.

135
00:07:42,653 --> 00:07:47,940
Like Amina said, this is going to be
a paragraph, this is going to be an image.

136
00:07:47,940 --> 00:07:54,220
The web browser, Chrome or Firefox,
doesn't know how to do that on its own.

137
00:07:54,220 --> 00:07:58,400
>> And thank you to whoever said that
banana girl is cute, cuz I am cute.

138
00:07:58,400 --> 00:08:01,060
>> Where did you see that?

139
00:08:01,060 --> 00:08:07,091
>> My mom showed me all
the real questions.

140
00:08:07,091 --> 00:08:09,130
The chat from the last one.

141
00:08:09,130 --> 00:08:12,226
So it's just thank you cuz I am cute.

142
00:08:12,226 --> 00:08:12,741
>> Excellent.

143
00:08:12,741 --> 00:08:14,140
>> That banana girl is cute.

144
00:08:14,140 --> 00:08:16,813
>> Always good to give
a shout out to your audience.

145
00:08:16,813 --> 00:08:18,831
>> [LAUGH]
>> So

146
00:08:18,831 --> 00:08:22,140
the HTML is gonna be
the content of our page.

147
00:08:22,140 --> 00:08:24,508
We're not gonna get to making-
>> [SOUND]

148
00:08:24,508 --> 00:08:26,618
>> [LAUGH] We're not gonna get to making

149
00:08:26,618 --> 00:08:28,807
our content look pretty at that CSS.

150
00:08:28,807 --> 00:08:31,802
And that's gonna come a little later.

151
00:08:31,802 --> 00:08:35,316
>> Are we gonna get to make
the vocals of content?

152
00:08:35,316 --> 00:08:39,140
Fancy-schmancy like me.

153
00:08:39,140 --> 00:08:40,540
>> I have you to do that.

154
00:08:40,540 --> 00:08:42,910
Okay, do you remember what HTML tags are?

155
00:08:42,910 --> 00:08:44,100
What do they look like?

156
00:08:44,100 --> 00:08:48,890
Are they like price tags on this one?

157
00:08:48,890 --> 00:08:51,110
>> Do you remember they came
in little shapes like that?

158
00:08:51,110 --> 00:08:52,080
What did we call those?

159
00:08:53,881 --> 00:08:54,900
>> Yeah, square banana.

160
00:08:54,900 --> 00:08:57,400
>> Square bananas, right?

161
00:08:57,400 --> 00:09:01,850
So you have on your keyboard, if you press
Shift and the comma and then Shift and

162
00:09:01,850 --> 00:09:05,050
the period,
you're gonna make angle brackets.

163
00:09:05,050 --> 00:09:07,041
Though, as we learned last week,

164
00:09:07,041 --> 00:09:10,140
calling them square bananas
is a lot more memorable.

165
00:09:11,150 --> 00:09:14,408
HTML tags help the browser
understand our content.

166
00:09:14,408 --> 00:09:19,370
>> [INAUDIBLE]
>> We can't type in the chat and

167
00:09:19,370 --> 00:09:21,220
do the slides at the same time.

168
00:09:21,220 --> 00:09:22,650
>> Are you sure?

169
00:09:22,650 --> 00:09:25,230
>> Well, just tell them, they're watching.

170
00:09:25,230 --> 00:09:27,500
Tell them hi [INAUDIBLE]
>> Hi Karen!

171
00:09:27,500 --> 00:09:28,269
>> There you go.

172
00:09:28,269 --> 00:09:28,800
HTML tags go in angle brackets or
square bananas.

173
00:09:28,800 --> 00:09:32,940
>> Square bananas, square bananas,

174
00:09:32,940 --> 00:09:38,322
actually that should be swish,
it should be,

175
00:09:38,322 --> 00:09:42,608
square bananas are angle brackets.

176
00:09:42,608 --> 00:09:45,480
>> Much better, much more memorable.

177
00:09:45,480 --> 00:09:49,175
So when we need a p,
we'll put a p for paragraph,

178
00:09:49,175 --> 00:09:52,250
we'll put the p inside square bananas.

179
00:09:52,250 --> 00:09:55,644
Many HTML tags go around the content,

180
00:09:55,644 --> 00:10:00,722
not all, which makes it
a little tricky to remember.

181
00:10:00,722 --> 00:10:04,352
Paragraphs are easy though,
right, p for paragraph.

182
00:10:04,352 --> 00:10:05,400
We can remember that?

183
00:10:05,400 --> 00:10:11,060
>> The opening banana,
the closing banana, square banana.

184
00:10:11,060 --> 00:10:14,490
>> Perfect, yeah,
you have two sets of square bananas here.

185
00:10:14,490 --> 00:10:20,264
One to open the tag, one to close it and
that one gets a slash, right?

186
00:10:20,264 --> 00:10:23,825
>> Yep, open banana,

187
00:10:23,825 --> 00:10:28,017
closing banana [SOUND].

188
00:10:28,017 --> 00:10:31,489
>> You can put some tags
inside other tags, right?

189
00:10:31,489 --> 00:10:32,880
Here, we have a paragraph.

190
00:10:32,880 --> 00:10:37,200
Do you remember making a link
last week and we use the A tag?

191
00:10:37,200 --> 00:10:38,305
What did we make the link to?

192
00:10:38,305 --> 00:10:40,192
>> Black Velvet Pants.

193
00:10:40,192 --> 00:10:45,953
>> That's right, a video for
a song called Black Velvet Pants.

194
00:10:45,953 --> 00:10:53,050
>> And if you didn't watch it you tiny
tunes, you are on my naughty list.

195
00:10:53,050 --> 00:10:54,480
>> Sounds like a threat.

196
00:10:54,480 --> 00:10:55,412
Let's see.

197
00:10:55,412 --> 00:11:01,770
Occasionally, you'll find that not
every HTML tag follows the rule.

198
00:11:01,770 --> 00:11:03,490
Here's a tag called img.

199
00:11:03,490 --> 00:11:10,670
We're gonna use that today to drop in
an image of bananas or whatever you want.

200
00:11:10,670 --> 00:11:12,170
Whatever picture you choose.

201
00:11:12,170 --> 00:11:14,280
>> I choose a doughnut.

202
00:11:14,280 --> 00:11:15,900
>> What's the difference about this tag?

203
00:11:15,900 --> 00:11:17,710
What do we not see at the end?

204
00:11:19,520 --> 00:11:21,380
>> A slashy.

205
00:11:21,380 --> 00:11:23,010
>> A slash, right, or a slashy.

206
00:11:23,010 --> 00:11:25,480
We don't see one of those at the ends.

207
00:11:25,480 --> 00:11:28,666
So, this is gonna make
HTML a little tricky.

208
00:11:28,666 --> 00:11:30,274
It's just something you have
to remember if you do it.

209
00:11:30,274 --> 00:11:33,498
>> I'm just gonna start
calling slashes mustachios.

210
00:11:33,498 --> 00:11:37,354
Well, slanty mustache.

211
00:11:37,354 --> 00:11:39,026
I don't know,
I'm trying to think of how to remember.

212
00:11:39,026 --> 00:11:42,486
>> Slanty mustache
>> Okay, so a slash or

213
00:11:42,486 --> 00:11:48,235
a slanted mustache,
the img tag doesn't get one.

214
00:11:48,235 --> 00:11:53,193
So there's no easy way to remember
which ones at least that I know which

215
00:11:53,193 --> 00:11:56,555
ones get the slash and which ones don't.

216
00:11:56,555 --> 00:12:00,518
We'll just remember as we go along.

217
00:12:00,518 --> 00:12:08,526
>> Why do some not need
a slanted mustache but some do?

218
00:12:08,526 --> 00:12:12,142
>> Well,
>> It's a good question.

219
00:12:12,142 --> 00:12:13,419
>> It is a good question.

220
00:12:13,419 --> 00:12:16,360
Let me come up with a better answer for
that next week.

221
00:12:16,360 --> 00:12:19,575
Maybe there is a really
solid reason out there.

222
00:12:19,575 --> 00:12:24,435
So far I've just used trying
to remember which is which.

223
00:12:24,435 --> 00:12:25,283
Are you leaving me?

224
00:12:25,283 --> 00:12:33,859
>> No, my pillows are sliding
out from my butt cheeks.

225
00:12:33,859 --> 00:12:35,154
>> And there you have it.

226
00:12:35,154 --> 00:12:38,938
Should we finish the lesson on that or
should we keep going?

227
00:12:38,938 --> 00:12:45,630
All right, some tags need attributes
to have more information.

228
00:12:45,630 --> 00:12:48,773
You can see that we have a tag called a.

229
00:12:48,773 --> 00:12:50,061
A is a link.

230
00:12:50,061 --> 00:12:51,830
Do you remember what a stands for?

231
00:12:51,830 --> 00:12:54,387
That one's kind of a tricky question.

232
00:12:54,387 --> 00:12:55,315
>> Akabucha.

233
00:12:55,315 --> 00:12:56,275
>> Akabucha or anchor.

234
00:12:56,275 --> 00:13:00,075
So a stands for anchor,
which is a little harder to remember.

235
00:13:00,075 --> 00:13:02,470
P for paragraph, easy.

236
00:13:02,470 --> 00:13:04,328
IMG for image, easy.

237
00:13:04,328 --> 00:13:07,300
A for anchor, not quite so easy.

238
00:13:07,300 --> 00:13:08,640
We just have to remember that one.

239
00:13:08,640 --> 00:13:11,609
>> [CROSSTALK] Image is gonna be?

240
00:13:11,609 --> 00:13:14,089
A cat dressed as a cupcake.

241
00:13:14,089 --> 00:13:16,417
A cat dressed as a cupcake,
I like the way you think.

242
00:13:16,417 --> 00:13:20,923
We have to close that tag with slash a.

243
00:13:20,923 --> 00:13:26,035
As you can see we don't include
the attribute when we put in the slash or

244
00:13:26,035 --> 00:13:27,690
the slanty mustache.

245
00:13:29,890 --> 00:13:33,930
This attribute gives us
a little bit more information.

246
00:13:33,930 --> 00:13:38,743
Sure, you wanna make a link,
but what is the link to?

247
00:13:38,743 --> 00:13:44,281
>> Is href a referee that
had the name that starts

248
00:13:44,281 --> 00:13:48,959
with an H, he gonna wanna see the rat?

249
00:13:48,959 --> 00:13:52,927
>> You should give me these ideas before
so I can stick a little referee and

250
00:13:52,927 --> 00:13:55,130
a slanty mustache into my slides.

251
00:13:55,130 --> 00:13:57,930
Well, that's on my to do list for
next week.

252
00:13:57,930 --> 00:13:59,740
That's a really good question.

253
00:13:59,740 --> 00:14:04,851
Href is for hypertext reference, which
is just a hyper thoughtless [CROSSTALK].

254
00:14:04,851 --> 00:14:06,230
Yeah, probably.

255
00:14:06,230 --> 00:14:09,020
It's a hyperlink to another page, okay?

256
00:14:10,760 --> 00:14:14,135
Code editors, do you remember which
code editor we were using last week?

257
00:14:14,135 --> 00:14:17,790
>> Something not as interesting as one.

258
00:14:17,790 --> 00:14:19,004
>> Exactly, right?

259
00:14:19,004 --> 00:14:24,458
I got a thumbs down for not choosing
slime tech so I listed a couple.

260
00:14:24,458 --> 00:14:27,692
If you're joining us for
the first time, today,

261
00:14:27,692 --> 00:14:33,100
I would go ahead these are actually,
they were supposed to be links.

262
00:14:33,100 --> 00:14:35,710
They're not, all right.

263
00:14:35,710 --> 00:14:40,742
>> No, no, no
>> So, technical difficulties.

264
00:14:40,742 --> 00:14:44,454
But if you google Visual Studio code,

265
00:14:44,454 --> 00:14:48,867
I believe it's code.visualstudio.com.

266
00:14:48,867 --> 00:14:52,521
If you didn't do this last week,
if you're here for the first time,

267
00:14:52,521 --> 00:14:56,691
now's a good time to download a code
editor so you'll be able to follow along.

268
00:14:56,691 --> 00:15:00,476
>> Who's mac, is that like Mac and Me?

269
00:15:00,476 --> 00:15:05,868
Mac and Me is an amazing movie but
>> No, it's not but you can try.

270
00:15:05,868 --> 00:15:10,690
>> It's called Tiny Timmys,
it's really bad.

271
00:15:10,690 --> 00:15:12,826
>> Okay, you are correct their.

272
00:15:12,826 --> 00:15:16,640
Mac just means I have
an Apple Macintosh computer.

273
00:15:16,640 --> 00:15:22,245
If someone's using a PC, they would say,
it would say download for PC here.

274
00:15:22,245 --> 00:15:22,957
Go ahead and.

275
00:15:22,957 --> 00:15:28,700
>> Let's not download Mac and Me.

276
00:15:28,700 --> 00:15:30,501
>> It's not download the Mac and

277
00:15:30,501 --> 00:15:34,330
Me, that would be a kind of
a terrible use of everyone's time.

278
00:15:36,100 --> 00:15:41,010
So, all right, go ahead and download
this if you don't have it already.

279
00:15:41,010 --> 00:15:42,780
Why do we need a code editor?

280
00:15:42,780 --> 00:15:43,370
Do you remember?

281
00:15:44,728 --> 00:15:50,733
>> It makes things a lot faster,
so it's not so slow.

282
00:15:50,733 --> 00:15:53,205
It's like we're in the olden days.

283
00:15:53,205 --> 00:15:57,826
>> The olden days when we
had to write our HTML code

284
00:15:57,826 --> 00:16:01,390
using COBOL on the back of a shovel.

285
00:16:02,440 --> 00:16:02,980
Exactly.

286
00:16:05,230 --> 00:16:09,955
Code editors like Amina said,
they make it faster, right?

287
00:16:09,955 --> 00:16:15,397
They offer just yeah,
we don't have to do this like the olden

288
00:16:15,397 --> 00:16:20,744
days the way our grandparents
wrote html 100 years ago.

289
00:16:28,391 --> 00:16:33,695
Exactly, nowadays we type the tag and
>> HTML, boom done.

290
00:16:33,695 --> 00:16:37,167
That took me less than one week.

291
00:16:37,167 --> 00:16:42,780
>> Do you remember when you typed this
closing, this square banana here?

292
00:16:42,780 --> 00:16:44,580
>> Exactly, the closing banana.

293
00:16:44,580 --> 00:16:49,105
It gave us the slash,
the closing tag automatically

294
00:16:49,105 --> 00:16:53,580
>> So we didn't have to in the olden days.

295
00:16:53,580 --> 00:16:55,697
>> Exactly, code coloring, so

296
00:16:55,697 --> 00:17:00,620
we can keep the different parts of
our code separate from each other.

297
00:17:00,620 --> 00:17:03,145
Look, [CROSSTALK].

298
00:17:03,145 --> 00:17:06,120
Well, see how this is all
in different colors, right?

299
00:17:06,120 --> 00:17:07,282
We didn't really talk
about this last week.

300
00:17:07,282 --> 00:17:08,120
>> Why aren't they in the same colors?

301
00:17:09,310 --> 00:17:13,613
>> It's to help developers
understand the different parts of

302
00:17:13,613 --> 00:17:18,014
the cupboard have different meanings,
remember the a tag?

303
00:17:18,014 --> 00:17:20,380
The a tag actually has 3 parts.

304
00:17:20,380 --> 00:17:25,005
There's a, which is a tag and
that's dark blue.

305
00:17:25,005 --> 00:17:29,059
Href is an attribute and
that gives us more information,

306
00:17:29,059 --> 00:17:30,920
that comes in light blue.

307
00:17:30,920 --> 00:17:35,957
And then the actual text that's gonna be
linked which says Black Velvet Pants,

308
00:17:35,957 --> 00:17:39,020
that's content and that's white.

309
00:17:39,020 --> 00:17:44,650
So, well you can actually
customize the colors.

310
00:17:44,650 --> 00:17:45,920
>> Can we get purple?

311
00:17:45,920 --> 00:17:51,108
Not today, but in another lesson we
can talk about customizing the colors.

312
00:17:51,108 --> 00:17:55,314
But the colors are there to help you
keep the different parts of the language

313
00:17:55,314 --> 00:17:57,740
straight because there's a lot, right?

314
00:18:00,190 --> 00:18:03,739
And you remember we built
some tags last week,

315
00:18:03,739 --> 00:18:09,320
there's going to be a few tags that
go on every single webpage you build.

316
00:18:09,320 --> 00:18:13,887
We're not gonna build these today
cuz you did them last time, right?

317
00:18:13,887 --> 00:18:16,192
Doctype html.

318
00:18:16,192 --> 00:18:21,850
>> Don't forget, we aren't gonna
scream at you if you ask a question.

319
00:18:21,850 --> 00:18:23,770
Do you ask a question?

320
00:18:23,770 --> 00:18:27,780
Right now, Karen sent his many questions.

321
00:18:27,780 --> 00:18:29,160
>> Yeah, good reminder, right?

322
00:18:29,160 --> 00:18:33,330
Yep, always good to ask
questions if you have not.

323
00:18:33,330 --> 00:18:36,816
>> We were not making any promises, but

324
00:18:36,816 --> 00:18:41,210
we'll try not to hit you
with a virtual ruler.

325
00:18:41,210 --> 00:18:42,210
>> Do you have one of those?

326
00:18:44,320 --> 00:18:47,038
>> Well, in two years,
if this happens again,

327
00:18:47,038 --> 00:18:50,080
I'll be hitting you
with a bunch of rulers.

328
00:18:50,080 --> 00:18:52,530
I'm talking to you Tiny Tim.

329
00:18:52,530 --> 00:18:54,189
>> Please don't threaten Tiny Tim.

330
00:18:54,189 --> 00:18:56,029
All right, doctype html.

331
00:18:56,029 --> 00:18:58,381
Do you remember what that one does?

332
00:18:58,381 --> 00:19:00,472
>> Is it a doctor who types?

333
00:19:00,472 --> 00:19:03,230
>> You did say that last week and
I thought that was a good one.

334
00:19:03,230 --> 00:19:09,580
It's this one is letting our browser
know that this is an HTML document.

335
00:19:09,580 --> 00:19:14,270
Okay, we're gonna receive some HTML
>> Does my version of this better?

336
00:19:15,600 --> 00:19:16,410
>> I do too.

337
00:19:16,410 --> 00:19:18,310
What about the HTML tag?

338
00:19:18,310 --> 00:19:20,630
That one kind of speaks for itself.

339
00:19:20,630 --> 00:19:23,880
It's saying,
there's where the HTML starts.

340
00:19:23,880 --> 00:19:27,238
>> That's where that HTML starts and

341
00:19:27,238 --> 00:19:32,113
that's where the HTML ends,
I speak for myself.

342
00:19:32,113 --> 00:19:35,440
>> Perfect, and
now you're a southern Belle.

343
00:19:35,440 --> 00:19:38,504
>> What do you mean?

344
00:19:38,504 --> 00:19:40,512
>> A beautiful lady of the South.

345
00:19:40,512 --> 00:19:46,736
>> I'm a Southern,
I'm a Southern Texas Belle.

346
00:19:46,736 --> 00:19:51,321
>> Our HTML page is divided into head and
body which

347
00:19:51,321 --> 00:19:53,438
>> Head, shoulders, knees and toes.

348
00:19:53,438 --> 00:19:54,974
>> Which one did we write in last time?

349
00:19:54,974 --> 00:19:57,829
>> Knees, toes and shoulders.

350
00:19:57,829 --> 00:19:59,181
>> Do you remember?

351
00:19:59,181 --> 00:20:02,087
>> We did Fun stuff.

352
00:20:02,087 --> 00:20:03,368
>> Where did the fun stuff go?

353
00:20:03,368 --> 00:20:04,047
>> Body?

354
00:20:04,047 --> 00:20:05,590
>> Body, right?

355
00:20:05,590 --> 00:20:10,490
The head is information for our browser,
and we didn't do that last week.

356
00:20:10,490 --> 00:20:11,775
Well, we'll get to that.

357
00:20:11,775 --> 00:20:15,356
>> The body, do do do do.

358
00:20:15,356 --> 00:20:18,192
>> The body is where your
actual page content shows up.

359
00:20:18,192 --> 00:20:22,230
I think that actually takes
us to the end of the slides.

360
00:20:23,660 --> 00:20:30,888
Remember how last week, when we took our
page and opened it in a web browser?

361
00:20:30,888 --> 00:20:37,418
And you were able to see a link
to little black velvet pants.

362
00:20:37,418 --> 00:20:38,678
>> It's purple.

363
00:20:38,678 --> 00:20:39,206
>> It is.

364
00:20:39,206 --> 00:20:41,070
That's what I mean,
the content that shows up on the page.

365
00:20:41,070 --> 00:20:44,830
>> When did it become purple?

366
00:20:44,830 --> 00:20:46,460
>> We'll talk about that today.

367
00:20:46,460 --> 00:20:51,080
Can you grab the quackamole folder and
drag it and

368
00:20:51,080 --> 00:20:54,240
drop it on to Visual Studio code?

369
00:20:54,240 --> 00:21:00,821
Okay
>> And that's how it's done, son.

370
00:21:00,821 --> 00:21:06,571
>> [LAUGH] And
what is our one file called so far?

371
00:21:06,571 --> 00:21:10,810
>> gobeaavsforever.html.

372
00:21:10,810 --> 00:21:14,590
>> Okay, now today we said we were
gonna write a paragraph, right?

373
00:21:14,590 --> 00:21:17,796
That was one of the things we're gonna do
>> Do I have to type a paragraph or

374
00:21:17,796 --> 00:21:19,114
write a paragraph.

375
00:21:19,114 --> 00:21:24,879
>> A paragraph can be as few or
as many words as you want.

376
00:21:24,879 --> 00:21:26,428
So you don't have to type a lot of words.

377
00:21:26,428 --> 00:21:30,217
>> So they can be duck duck goose,
that's a paragraph?

378
00:21:30,217 --> 00:21:32,065
>> They could be, for today.

379
00:21:32,065 --> 00:21:36,652
So I want to show you something though
about HTML that some might seem a little

380
00:21:36,652 --> 00:21:37,305
strange.

381
00:21:37,305 --> 00:21:40,424
Go ahead and press return to
make a little bit of space.

382
00:21:40,424 --> 00:21:41,344
>> Return.

383
00:21:41,344 --> 00:21:42,983
>> And
press return again to leave a blank line.

384
00:21:42,983 --> 00:21:44,470
>> Return.

385
00:21:44,470 --> 00:21:48,800
>> Okay, now type your first paragraph,
that could be duck duck goose.

386
00:21:48,800 --> 00:21:50,810
We're not gonna use the P tag yet.

387
00:21:50,810 --> 00:21:55,810
I'm gonna show you what happens if you
forget and you don't put in the PHP tag.

388
00:21:55,810 --> 00:21:57,610
>> Right.

389
00:22:16,832 --> 00:22:20,240
>> Are these recorded anywhere where
they can be viewed at a different time?

390
00:22:21,240 --> 00:22:26,676
Yeah, I believe most of the social
services that we're streaming to,

391
00:22:26,676 --> 00:22:28,770
they are gonna be on there.

392
00:22:28,770 --> 00:22:32,620
I know they'll definitely be
available on YouTube in the future.

393
00:22:32,620 --> 00:22:35,800
>> Be available on YouTube, stop.

394
00:22:35,800 --> 00:22:39,703
If that answers your question, stop there.

395
00:22:39,703 --> 00:22:42,615
>> Karen says Twitch,
YouTube and Facebook.

396
00:22:42,615 --> 00:22:47,954
>> But she says Fub
>> FB, Facebook.

397
00:22:47,954 --> 00:22:51,228
All right, type another paragraph.

398
00:22:51,228 --> 00:22:54,836
So we'll call I love kittens and
dogs our first paragraph, and

399
00:22:54,836 --> 00:22:57,299
that's that's an excellent paragraph.

400
00:22:57,299 --> 00:23:06,338
Type one more
>> Oops.

401
00:23:13,342 --> 00:23:22,120
[INAUDIBLE]
>> Brownies = yumy.

402
00:23:22,120 --> 00:23:27,270
Well, so you have two I think
indisputable paragraphs, right?

403
00:23:27,270 --> 00:23:30,016
Nobody could disagree with either
of these paragraphs, right?

404
00:23:30,016 --> 00:23:34,083
I love kittens and dogs and
brownies = yumyyyyyyyyy.

405
00:23:34,083 --> 00:23:34,909
>> Yep, awesome.

406
00:23:34,909 --> 00:23:36,791
Now, do you remember?

407
00:23:36,791 --> 00:23:38,607
Let's go up to File and press Save.

408
00:23:38,607 --> 00:23:39,522
>> File.

409
00:23:42,462 --> 00:23:45,280
Yes, Mr. file, I am saving.

410
00:23:45,280 --> 00:23:47,592
>> Can you click on Google Chrome?

411
00:23:47,592 --> 00:23:48,874
>> Click on Chrome.

412
00:23:48,874 --> 00:23:53,410
>> And click the refresh,
the little circle button with the arrow.

413
00:23:55,670 --> 00:24:02,469
>> That's weird, this isn't.

414
00:24:05,961 --> 00:24:11,603
How can that be?

415
00:24:11,603 --> 00:24:16,182
Okay, for some reason a different copy
of our file was open in the browser,

416
00:24:16,182 --> 00:24:18,390
that was really strange.

417
00:24:18,390 --> 00:24:23,000
Okay, so we were just making sure
that the right file was open.

418
00:24:23,000 --> 00:24:25,640
We could also go to double check.

419
00:24:25,640 --> 00:24:30,970
Go File, Open File and
we are working on our desktop.

420
00:24:30,970 --> 00:24:33,730
>> I'm talking to you file.

421
00:24:33,730 --> 00:24:34,640
>> There we go.

422
00:24:34,640 --> 00:24:37,290
So some strange copy, the file was open.

423
00:24:37,290 --> 00:24:40,400
Okay, what do you notice
about what's in the browser?

424
00:24:40,400 --> 00:24:42,510
Where are our paragraphs?

425
00:24:42,510 --> 00:24:46,262
>> I love kittens and
dogs brownies = yumyyyyyyyy.

426
00:24:46,262 --> 00:24:50,140
>> But does it show up as separate
paragraphs, the way we typed it?

427
00:24:50,140 --> 00:24:50,905
>> No.
>> Exactly.

428
00:24:50,905 --> 00:24:51,687
>> No.

429
00:24:51,687 --> 00:24:52,985
>> Exactly, right?

430
00:24:52,985 --> 00:24:54,500
Isn't that awful?

431
00:24:54,500 --> 00:25:01,412
>> Yeah, it's so awful,
I can't believe they're doing this to me!

432
00:25:01,412 --> 00:25:02,790
>> Okay, awesome.

433
00:25:02,790 --> 00:25:06,474
So what do you think we need to do to
get the paragraphs to actually show

434
00:25:06,474 --> 00:25:07,500
up as paragraphs?

435
00:25:07,500 --> 00:25:10,946
>> You start by making this I capital,
so it's correct.

436
00:25:10,946 --> 00:25:13,284
>> True, good catch.

437
00:25:13,284 --> 00:25:16,430
>> [LAUGH]
>> And then what?

438
00:25:16,430 --> 00:25:19,330
How do we make the paragraph
show up as paragraphs?

439
00:25:19,330 --> 00:25:19,830
What are we missing?

440
00:25:22,368 --> 00:25:24,670
>> The banana split pies.

441
00:25:24,670 --> 00:25:26,340
>> Exactly, those square bananas.

442
00:25:26,340 --> 00:25:29,086
So our browser doesn't understand by

443
00:25:29,086 --> 00:25:33,660
itself that these are supposed
to be separate paragraphs.

444
00:25:33,660 --> 00:25:37,979
So pressing return here
didn't actually do anything.

445
00:25:37,979 --> 00:25:42,460
So well, it'll be cool when
you add the paragraph tags.

446
00:25:42,460 --> 00:25:45,489
So can you type a square banana?

447
00:25:45,489 --> 00:25:46,282
>> Square banana.

448
00:25:46,282 --> 00:25:49,147
>> Okay, and then what do we type for
a paragraph?

449
00:25:53,110 --> 00:25:53,853
>> p.

450
00:25:53,853 --> 00:25:55,654
>> p, and what else?

451
00:25:55,654 --> 00:25:57,383
>> And this is part of,
>> Well,

452
00:25:57,383 --> 00:26:00,798
you need your square banana
pointing the other way, right?

453
00:26:00,798 --> 00:26:02,225
Okay.

454
00:26:02,225 --> 00:26:03,191
>> Jeez.

455
00:26:03,191 --> 00:26:04,545
>> Now.

456
00:26:04,545 --> 00:26:06,780
>> I thought I was like, what?

457
00:26:06,780 --> 00:26:11,730
>> We're almost there, but
remember we have tag completion, right?

458
00:26:11,730 --> 00:26:16,390
So I love kittens and
dogs isn't in our paragraph.

459
00:26:16,390 --> 00:26:17,170
So what are we gonna do?

460
00:26:17,170 --> 00:26:21,902
We have to move that.

461
00:26:21,902 --> 00:26:27,320
>> Command+C and Command+V.

462
00:26:27,320 --> 00:26:28,340
>> Okay, that was a good one.

463
00:26:28,340 --> 00:26:32,805
She did Command, we're on a Mac,
so it's Command.

464
00:26:32,805 --> 00:26:34,775
Command+C to copy, Command+V to paste.

465
00:26:34,775 --> 00:26:35,755
>> Do I delete?

466
00:26:35,755 --> 00:26:37,310
>> Yeah, and then you could delete.

467
00:26:37,310 --> 00:26:41,580
You could also do Command+X if you want,
which is [INAUDIBLE].

468
00:26:41,580 --> 00:26:44,797
>> Yes.
>> Can you do it again with brownies =

469
00:26:44,797 --> 00:26:46,109
yumyyyyyyyy?

470
00:26:46,109 --> 00:26:47,597
>> brownies = yumyyyyyyyy,
brownies = yumyyyyyyyy.

471
00:26:47,597 --> 00:26:53,927
>> Yes, yep, make another square banana.

472
00:26:53,927 --> 00:26:59,196
>> Okay, yeah,
we got to move the slanty moustache.

473
00:26:59,196 --> 00:27:00,572
>> Hi, my mousey.

474
00:27:07,096 --> 00:27:08,104
>> Mousey, mousey.

475
00:27:08,104 --> 00:27:09,570
>> All right, select it.

476
00:27:09,570 --> 00:27:12,851
So if you try Command+X, that'll be.

477
00:27:12,851 --> 00:27:14,701
You can keep doing Command C.

478
00:27:14,701 --> 00:27:15,735
>> On that.

479
00:27:15,735 --> 00:27:20,586
>> Okay, Command+C to copy,
Ctrl+C if you're on a PC.

480
00:27:20,586 --> 00:27:21,749
>> Command+C.

481
00:27:21,749 --> 00:27:25,499
>> Okay, and then delete the slash p.

482
00:27:25,499 --> 00:27:26,003
>> Oops.

483
00:27:29,916 --> 00:27:30,930
>> Okay.

484
00:27:30,930 --> 00:27:33,250
>> Why was it in red for a second?

485
00:27:33,250 --> 00:27:35,406
>> It was showing you there was an error,
but

486
00:27:35,406 --> 00:27:39,080
the error was just cuz you
weren't finished deleting.

487
00:27:39,080 --> 00:27:40,729
Can you go up to File and press Save?

488
00:27:42,743 --> 00:27:44,185
>> File.

489
00:27:44,185 --> 00:27:50,508
>> Okay, and go to Chrome
>> Me, to me again.

490
00:27:50,508 --> 00:27:51,309
What?

491
00:27:51,309 --> 00:27:53,846
>> Well, press the refresh button.

492
00:27:53,846 --> 00:27:57,329
Yeah, the page has to
know you did something.

493
00:27:57,329 --> 00:27:58,410
There you go, separate paragraphs.

494
00:27:58,410 --> 00:27:59,660
Pretty cool.

495
00:27:59,660 --> 00:28:00,755
>> Yeah.

496
00:28:00,755 --> 00:28:01,822
>> Okay.

497
00:28:01,822 --> 00:28:05,209
>> But where's the?

498
00:28:05,209 --> 00:28:07,678
Can you make emojis in the paragraph?

499
00:28:07,678 --> 00:28:11,335
Can you do that?

500
00:28:11,335 --> 00:28:13,451
>> That's a good question
>> It

501
00:28:13,451 --> 00:28:14,537
definitely is
>> Yeah.

502
00:28:14,537 --> 00:28:16,278
>> I am always correct.

503
00:28:16,278 --> 00:28:18,085
>> We'll have to look that up.

504
00:28:18,085 --> 00:28:22,540
I don't know if there's an easy way to
type out emojis, but maybe there is.

505
00:28:22,540 --> 00:28:23,338
>> What about image?

506
00:28:23,338 --> 00:28:25,740
>> Well, let's go get a picture.

507
00:28:25,740 --> 00:28:30,721
>> So can you press the + up,
And let's look for an image.

508
00:28:38,569 --> 00:28:41,539
>> I'm not searching LeBron James, bronie.

509
00:28:44,924 --> 00:28:50,290
Bronies, I think bronies are guys who
really like my little pony, right?

510
00:28:50,290 --> 00:28:51,739
I think it's brownies, there we go.

511
00:28:56,534 --> 00:28:57,193
Okay.

512
00:29:01,388 --> 00:29:03,590
>> How much is?

513
00:29:03,590 --> 00:29:04,762
>> Right, okay.

514
00:29:04,762 --> 00:29:07,520
So pick one that you would like.

515
00:29:07,520 --> 00:29:10,640
>> I like this.

516
00:29:10,640 --> 00:29:13,040
>> Those are some nice looking brownies,
you're gonna make everyone hungry.

517
00:29:14,420 --> 00:29:16,420
>> Now I want brownies.

518
00:29:16,420 --> 00:29:19,920
>> Well, okay, so let's finish up and
then we can go make some brownies.

519
00:29:19,920 --> 00:29:20,648
So click on the image.

520
00:29:25,054 --> 00:29:27,720
And then-
>> That looks so good.

521
00:29:27,720 --> 00:29:29,140
Can I change to that?

522
00:29:29,140 --> 00:29:31,300
>> All right, but fine.

523
00:29:31,300 --> 00:29:31,880
>> Okay, this.

524
00:29:31,880 --> 00:29:32,490
>> Okay.
>> And then.

525
00:29:32,490 --> 00:29:34,300
>> Do you remember how to right-click?

526
00:29:34,300 --> 00:29:39,108
If you hold down Ctrl on your keyboard and
click and,

527
00:29:39,108 --> 00:29:41,960
oops, do copy image address.

528
00:29:45,247 --> 00:29:46,022
Okay.

529
00:29:46,022 --> 00:29:48,780
Let go, okay.

530
00:29:48,780 --> 00:29:53,000
So that should give us the address
to where this image lives.

531
00:29:54,020 --> 00:29:55,584
So go ahead and press Return again.

532
00:29:55,584 --> 00:29:57,579
>> Return again.

533
00:29:57,579 --> 00:30:02,969
>> And do you remember what's the tag for
an image?

534
00:30:02,969 --> 00:30:05,912
[SOUND]
>> Well, image, right,

535
00:30:05,912 --> 00:30:06,838
that should give you a clue.

536
00:30:06,838 --> 00:30:08,764
>> Wait, img?

537
00:30:08,764 --> 00:30:12,456
>> img, perfect, so go ahead and
make yourself a square banana.

538
00:30:12,456 --> 00:30:14,550
>> img.

539
00:30:14,550 --> 00:30:19,890
>> And type img.
>> I-M, O-M-G.

540
00:30:21,226 --> 00:30:22,470
>> It's very close to O-M-G.

541
00:30:22,470 --> 00:30:26,571
Now this one needs an attribute,
because your browser goes, right,

542
00:30:26,571 --> 00:30:29,170
there's an image, but where's the image?

543
00:30:29,170 --> 00:30:31,972
So type space.

544
00:30:31,972 --> 00:30:37,013
>> Where is the image?

545
00:30:37,013 --> 00:30:38,300
>> Where's the space?

546
00:30:38,300 --> 00:30:40,350
>> Where is the space, man?

547
00:30:40,350 --> 00:30:42,382
>> src is gonna be short for source.

548
00:30:42,382 --> 00:30:45,330
And that's gonna tell our
browser where to find it.

549
00:30:45,330 --> 00:30:46,960
>> What's src?

550
00:30:46,960 --> 00:30:48,202
>> Source, can you type an equal sign?

551
00:30:48,202 --> 00:30:48,810
>> What's that?

552
00:30:50,890 --> 00:30:51,895
>> And some quotes so

553
00:30:51,895 --> 00:30:55,860
our browser will understand that
this is a link we're gonna paste in.

554
00:30:55,860 --> 00:30:59,300
>> I still don't understand what's src?

555
00:30:59,300 --> 00:31:01,863
>> Can you type Cmd+V to paste in?

556
00:31:01,863 --> 00:31:07,191
Okay, and
then I'm going to go up to View and

557
00:31:07,191 --> 00:31:10,725
choose Toggle Word Wrap.

558
00:31:10,725 --> 00:31:17,570
You can see this is just a really long
web address for our brownies photo, okay?

559
00:31:17,570 --> 00:31:22,267
Now, can you type
the closed square banana?

560
00:31:22,267 --> 00:31:27,208
Okay, and you will remember from
our slides this is all we need.

561
00:31:27,208 --> 00:31:33,970
We don't actually type the slash for
img, this one exists on its own.

562
00:31:33,970 --> 00:31:34,960
So can you press File > Save?

563
00:31:37,230 --> 00:31:44,139
>> Which Treehouse Karen says,
which program were you running this on?

564
00:31:44,139 --> 00:31:48,301
This is what Karen sounds like.

565
00:31:48,301 --> 00:31:50,474
>> That is what Karen sounds like, wow.

566
00:31:50,474 --> 00:31:51,650
>> Like this.

567
00:31:51,650 --> 00:31:57,896
>> Visual Studio Code, so if you Google
that, or if you go to code.visualstudio-

568
00:31:57,896 --> 00:32:01,905
>> Look Hokey Pokeys, I'm a bear.

569
00:32:01,905 --> 00:32:07,298
>> Let's see, code.visualstudio.com,

570
00:32:07,298 --> 00:32:12,548
that's the code editor that I'm using.

571
00:32:12,548 --> 00:32:13,640
>> Please do not grab this.

572
00:32:13,640 --> 00:32:16,780
>> A developer who really
likes this program.

573
00:32:16,780 --> 00:32:21,069
Karen likes your impression of her,
it must have been really accurate.

574
00:32:21,069 --> 00:32:23,130
>> Yes, aren't you Karen?

575
00:32:23,130 --> 00:32:26,008
>> Perfect, can you refresh our page?

576
00:32:26,008 --> 00:32:29,150
>> Refresh your-
>> Ta-da!

577
00:32:29,150 --> 00:32:33,441
>> Brownies, yay!
>> All right.

578
00:32:33,441 --> 00:32:37,460
>> [LAUGH] My life, my life, my life.

579
00:32:37,460 --> 00:32:39,680
>> Perfect, there you go.

580
00:32:39,680 --> 00:32:42,390
We got everything, we said, what's up?

581
00:32:42,390 --> 00:32:45,171
>> I need to have an image of
a kitten in a cute costume.

582
00:32:45,171 --> 00:32:49,990
>> Well, let's save that for next week,
cuz we're out of time, okay?

583
00:32:49,990 --> 00:32:52,710
We have everything we said
we're gonna do today.

584
00:32:52,710 --> 00:32:54,500
We have an image.

585
00:32:54,500 --> 00:32:55,920
We have some paragraphs.

586
00:32:55,920 --> 00:32:57,460
We have a picture of brownies.

587
00:32:57,460 --> 00:33:01,070
>> I really don't know
what this website's about.

588
00:33:01,070 --> 00:33:03,060
>> Well, it's just about stuff you like.

589
00:33:03,060 --> 00:33:06,930
Eventually we'll pick a topic and
make a whole website on a topic.

590
00:33:06,930 --> 00:33:13,150
>> Well, the topic should be what I like.

591
00:33:13,150 --> 00:33:15,130
That's all that matters in life.

592
00:33:15,130 --> 00:33:19,646
>> This is stuff Amina likes, and actually
next week, we'll give our page a title,

593
00:33:19,646 --> 00:33:22,080
and we can call it Stuff Amina Likes,
okay?

594
00:33:23,150 --> 00:33:25,340
All right, thank you so
much for joining us.

595
00:33:25,340 --> 00:33:28,294
I hope everyone's well.

596
00:33:28,294 --> 00:33:30,828
>> See you later, suckers.

597
00:33:30,828 --> 00:33:31,328
>> That's right.
>> And you can't beat my ability.

598
00:33:31,328 --> 00:33:36,384
Amina out, boo yah.