1
00:00:00,247 --> 00:00:04,544
[MUSIC]

2
00:00:04,544 --> 00:00:07,556
Hi and welcome to the Treehouse Club, I'm
Joy and

3
00:00:07,556 --> 00:00:10,940
today we're gonna be learning more about
HTML and CSS.

4
00:00:10,940 --> 00:00:14,990
And add a new language called JavaScript.

5
00:00:14,990 --> 00:00:19,380
Some of the features you're going to work
with will be buttons, images and sounds.

6
00:00:19,380 --> 00:00:20,500
Let's check it out.

7
00:00:21,930 --> 00:00:26,070
The structure of an HTML document can be
thought of like a tackle box.

8
00:00:26,070 --> 00:00:29,510
The HTML element encompasses the whole
document.

9
00:00:29,510 --> 00:00:32,290
The head element is like the label on the
box.

10
00:00:32,290 --> 00:00:35,050
It says who it was made by and who it
belongs to.

11
00:00:35,050 --> 00:00:37,120
The head is purely informative.

12
00:00:37,120 --> 00:00:41,220
Inside the body element you have
everything else like your headlines,

13
00:00:41,220 --> 00:00:42,850
paragraphs and images.

14
00:00:42,850 --> 00:00:47,930
These are like the smaller boxes and
containers that hold lures and hooks.

15
00:00:47,930 --> 00:00:51,190
This is what the code looks like in
workspaces and

16
00:00:51,190 --> 00:00:54,130
this is what it looks like when you
preview it in the browser.

17
00:00:54,130 --> 00:00:56,370
There's a car which is a static image and

18
00:00:56,370 --> 00:00:58,900
won't do anything, and then three buttons
down here.

19
00:00:58,900 --> 00:01:01,720
A key, steering wheel.

20
00:01:01,720 --> 00:01:05,520
And nitrous oxide and these will make
sounds when you press on them.

21
00:01:05,520 --> 00:01:08,540
Now let's look inside the code and see
what's going on.

22
00:01:08,540 --> 00:01:13,250
Like always at the top of our HTML
document is a head element and

23
00:01:13,250 --> 00:01:15,630
below that, is a body element.

24
00:01:15,630 --> 00:01:19,910
Inside the head element are some things
you should expect, like a meditech.

25
00:01:19,910 --> 00:01:21,370
A title tag.

26
00:01:21,370 --> 00:01:23,120
And here's a link to our style sheet.

27
00:01:23,120 --> 00:01:25,610
This second metatag is new, though.

28
00:01:25,610 --> 00:01:28,710
It's going to tell the browser how to size
our webpage.

29
00:01:28,710 --> 00:01:33,700
It says to make the page the same size as
the display it's being shown on.

30
00:01:33,700 --> 00:01:37,360
So everything will fit in your browser,
phone, or tablet.

31
00:01:37,360 --> 00:01:42,970
The first thing you want to change out of
the body in a HTML document is the image.

32
00:01:42,970 --> 00:01:47,170
In the image folder, I've loaded up a
second car picture that you can

33
00:01:47,170 --> 00:01:49,830
replace the first car picture with.

34
00:01:49,830 --> 00:01:51,150
I'll show you how to do this.

35
00:01:51,150 --> 00:01:56,160
I'll look for where it says car1.png,
which is the first car image and

36
00:01:56,160 --> 00:01:59,289
replace it with car2.png.

37
00:01:59,289 --> 00:02:06,460
Then when I save and refresh the page,
whoa there's a gigantic car.

38
00:02:06,460 --> 00:02:09,915
I like the one our designer did a little
bit better, but that's how you do it.

39
00:02:09,915 --> 00:02:11,435
[SOUND].

40
00:02:11,435 --> 00:02:14,551
Some of the other images you might wanna
replace are in

41
00:02:14,551 --> 00:02:20,030
the buttons where I've linked the key,
steering wheel and nitrous oxide images.

42
00:02:20,030 --> 00:02:25,480
So, if you wanna change this whole thing
from a car to a bike and have a bell and

43
00:02:25,480 --> 00:02:28,890
some skidding tire sounds instead, that's
where you're gonna want to start.

44
00:02:29,910 --> 00:02:32,260
Now stay tuned for a quick code challenge.

45
00:02:32,260 --> 00:02:37,340
And in the next video, we're going to be
going over using comments in HTML, and

46
00:02:37,340 --> 00:02:38,440
learning about JavaScript.