1
00:00:08,805 --> 00:00:11,936
So here I am at the Shayhowe textbook, and

2
00:00:11,936 --> 00:00:15,613
I'm on the section called
Getting to Know HTML.

3
00:00:15,613 --> 00:00:19,278
If you're like me, when you're
reading things about programming,

4
00:00:19,278 --> 00:00:20,953
you read them and you nod along,

5
00:00:20,953 --> 00:00:25,260
even when you don't always completely
understand what they were talking about.

6
00:00:25,260 --> 00:00:27,765
And you wish there was
some sort of example, or

7
00:00:27,765 --> 00:00:30,601
a teacher showing you in
real time what's going on.

8
00:00:30,601 --> 00:00:32,747
Well, Shayhowe uses CodePen, and

9
00:00:32,747 --> 00:00:36,119
that's one of the reasons I
really like this textbook.

10
00:00:36,119 --> 00:00:38,746
So let's take a look at
what I'm talking about.

11
00:00:38,746 --> 00:00:42,958
As you scroll down,
you definitely that there is places where

12
00:00:42,958 --> 00:00:47,175
there is code while you're reading,
functions right here.

13
00:00:47,175 --> 00:00:50,379
You can see that they're
talking about the visions and

14
00:00:50,379 --> 00:00:53,093
they've given a little text and
it's HTML and

15
00:00:53,093 --> 00:00:57,218
you understand the code but
you don't really know what it looks like.

16
00:00:57,218 --> 00:01:01,182
Well, if we scroll down
a little bit further,

17
00:01:01,182 --> 00:01:07,910
you'll come across code that's actually
inside something called CodePen.

18
00:01:07,910 --> 00:01:12,349
What you want to look for
is this caption, right here.

19
00:01:14,520 --> 00:01:17,527
It actually says Edit on CodePen on it.

20
00:01:17,527 --> 00:01:20,577
So let's see what happens
when I click on this link.

21
00:01:26,293 --> 00:01:31,347
What CodePen does is it gives
you a chance to see the HTML and

22
00:01:31,347 --> 00:01:34,662
also perhaps the CSS and JavaScript.

23
00:01:34,662 --> 00:01:37,930
I know that you don't necessarily
understand CSS or JavaScript yet.

24
00:01:37,930 --> 00:01:39,416
You may, you may not.

25
00:01:39,416 --> 00:01:42,951
But you can still always play
with all the different parts.

26
00:01:42,951 --> 00:01:46,946
Let me make this a little bit bigger so
you can see it.

27
00:01:46,946 --> 00:01:50,051
And you can see that
they've put in the code for

28
00:01:50,051 --> 00:01:52,767
heading Level 1, Level 2, Level 6.

29
00:01:52,767 --> 00:01:55,316
I'm going to go in there and
I'm going to change it.

30
00:01:55,316 --> 00:02:01,205
And I'm going to say what happens
if I change this H3 to an H1?

31
00:02:01,205 --> 00:02:02,222
Go over here.

32
00:02:04,219 --> 00:02:06,716
You can see that Heading Level 3,

33
00:02:06,716 --> 00:02:10,690
even though it says Heading Level 3,
is much bigger.

34
00:02:10,690 --> 00:02:15,566
I love CodePen and I really encourage you
to always click on it, and go in, and

35
00:02:15,566 --> 00:02:18,203
see what happens when you type things in.

36
00:02:18,203 --> 00:02:21,581
You don't need an account,
although you can definitely have one.

37
00:02:21,581 --> 00:02:25,668
It's a great way to feel like you
really understand and own the content.