1
00:00:01,860 --> 00:00:02,360
Hi.

2
00:00:04,410 --> 00:00:07,240
And welcome to the Treehouse Club.

3
00:00:07,240 --> 00:00:10,460
I'm Joy, and in this course, My First
Webpage,

4
00:00:10,460 --> 00:00:14,810
you're going to expand your learning about
HTML structure and begin to

5
00:00:14,810 --> 00:00:20,090
explore how your style sheet can help you
make your page look the way you want.

6
00:00:20,090 --> 00:00:24,050
To begin, we're gonna connect the style
sheet to your HTML document.

7
00:00:24,050 --> 00:00:28,740
And then learn about a few new tags to
make your text colorful, choose fonts,

8
00:00:28,740 --> 00:00:30,550
upload pictures, and more.

9
00:00:30,550 --> 00:00:31,150
Let's check it out!

10
00:00:32,730 --> 00:00:36,830
You can begin by clicking on the Launch
Workspace button next to the video.

11
00:00:37,850 --> 00:00:42,670
If these files don't come up right away,
here I'll show you.

12
00:00:42,670 --> 00:00:47,118
If it looks like this or if you have a
welcome page you can

13
00:00:47,118 --> 00:00:52,850
just click on the index.html and style.css
and they'll reappear.

14
00:00:52,850 --> 00:00:57,660
Here's a preview of the code and here's
the preview when I view it in the browser.

15
00:00:57,660 --> 00:01:01,200
I chose to do a purple theme because I was
inspired by the polka dots in

16
00:01:01,200 --> 00:01:02,780
the background in my image.

17
00:01:02,780 --> 00:01:06,900
You can choose whatever color or picture
that suites your taste.

18
00:01:06,900 --> 00:01:10,950
As always, you have full artistic license
here, so do whatever you want.

19
00:01:10,950 --> 00:01:12,210
Dabbing into the code,

20
00:01:12,210 --> 00:01:16,180
the first thing you're gonna wanna change
is my picture to your picture.

21
00:01:16,180 --> 00:01:18,940
Here, in the body, is our image tag.

22
00:01:18,940 --> 00:01:21,350
And to change the picture, I'm gonna have
to have a new picture.

23
00:01:22,430 --> 00:01:27,520
So, I've put one here on my desktop, and
I'm gonna upload it to my workspace.

24
00:01:27,520 --> 00:01:30,430
You know you've hit the right area at the
bottom of the file tree

25
00:01:30,430 --> 00:01:32,990
when that green plus sign appears.

26
00:01:32,990 --> 00:01:35,570
Once it's uploaded, like mine,

27
00:01:35,570 --> 00:01:38,700
you might need to change the name of your
picture right away.

28
00:01:38,700 --> 00:01:42,670
Now I'm gonna press Ctrl and click on it.

29
00:01:42,670 --> 00:01:46,400
And in the menu, you can see down here it
says Rename.

30
00:01:46,400 --> 00:01:49,720
I definitely want the .jpg still there.

31
00:01:49,720 --> 00:01:51,235
All of these numbers are gonna go.

32
00:01:51,235 --> 00:01:55,628
[SOUND] And I'll make it joy1.

33
00:01:55,628 --> 00:01:59,458
Then in my index.html file, under the
image,

34
00:01:59,458 --> 00:02:04,260
the path to the image with src, I'm gonna
change to joy1.

35
00:02:05,610 --> 00:02:10,400
And my name's still Joy, but you should
change the Alt to your name.

36
00:02:10,400 --> 00:02:13,930
Then I'll save it, and refresh the page.

37
00:02:13,930 --> 00:02:15,560
And my new picture's there.

38
00:02:15,560 --> 00:02:16,810
Great.

39
00:02:16,810 --> 00:02:22,130
Back in the HTML document, most things
inside the body should look familiar.

40
00:02:22,130 --> 00:02:26,770
Like our level one and level two
headlines, and our paragraph tag.

41
00:02:26,770 --> 00:02:29,260
Level three and four headlines are new.

42
00:02:29,260 --> 00:02:31,060
And you should play around with those and
see what they do.

43
00:02:32,290 --> 00:02:34,900
Inside the head element, there are some
new tags.

44
00:02:34,900 --> 00:02:38,830
And I promise, we will go over those in
more detail later on.

45
00:02:38,830 --> 00:02:42,460
However, for now, let's get into our style
sheet.

46
00:02:42,460 --> 00:02:45,930
I've broken it up with comments, as you
can see here.

47
00:02:45,930 --> 00:02:49,380
This is the top bar color and here's the
body styling.

48
00:02:49,380 --> 00:02:51,330
I tried to make them really clear, so

49
00:02:51,330 --> 00:02:55,380
that while you're styling this page, you
can see where everything is.

50
00:02:55,380 --> 00:02:58,660
Back up at the top of our style sheet it
says, Top Bar color.

51
00:02:58,660 --> 00:03:03,720
And here on our webpage, there's a color
at the top of our webpage.

52
00:03:03,720 --> 00:03:07,770
When we scroll over this hexadecimal
color, and I'll tell you more about those

53
00:03:07,770 --> 00:03:12,630
later, you can see that there's a nice
picture of what that color's gonna be.

54
00:03:13,670 --> 00:03:16,780
Down here is a three digit hexadecimal
color.

55
00:03:16,780 --> 00:03:19,140
Again, we'll talk more about those in the
future.

56
00:03:19,140 --> 00:03:21,190
But you should try changing these number
and

57
00:03:21,190 --> 00:03:24,730
letter combinations around and see what
they do.

58
00:03:24,730 --> 00:03:29,870
There's also a few more down here in our
headlines.

59
00:03:29,870 --> 00:03:32,560
And the last one is the h4 headline.

60
00:03:32,560 --> 00:03:36,800
Something else you're gonna wanna do is
change the border radius on our image.

61
00:03:36,800 --> 00:03:40,980
I made it 100% which almost makes it look
like a circle.

62
00:03:40,980 --> 00:03:46,510
But if I changed it to 10%, saved it and
refresh the browser.

63
00:03:46,510 --> 00:03:49,820
You can see it's much more squared off and

64
00:03:49,820 --> 00:03:52,100
it's just the little corners that are
rounded out.

65
00:03:53,110 --> 00:03:56,010
The last thing I'll point out before
letting you get to

66
00:03:56,010 --> 00:03:57,810
editing is the font size.

67
00:03:57,810 --> 00:04:01,940
Try and change these around in the body
and

68
00:04:01,940 --> 00:04:05,580
the headlines to see what different sizes
they make.

69
00:04:05,580 --> 00:04:09,610
These are called ems, and again, we'll
talk more about those in the future.

70
00:04:09,610 --> 00:04:13,940
But for now, play around with them, see
what they do.

71
00:04:13,940 --> 00:04:15,290
All right, it's your turn.

72
00:04:15,290 --> 00:04:18,240
Change everything in the workspace to make
it your own.

73
00:04:18,240 --> 00:04:21,930
And when you're ready, I'll explain each
element in detail.

74
00:04:21,930 --> 00:04:26,220
Just a reminder, if you ever want to
revert back to the original code, you

75
00:04:26,220 --> 00:04:31,030
can copy and paste the line you need, or
the whole code, from the teacher's notes.

76
00:04:31,030 --> 00:04:31,530
Have fun