1
00:00:00,240 --> 00:00:01,660
Hello, everyone.

2
00:00:01,680 --> 00:00:04,320
This video is not a true lesson.

3
00:00:04,320 --> 00:00:06,270
It's more of a side note.

4
00:00:06,270 --> 00:00:13,200
So in our next lesson, I will show you how to find a text editor program on your computer.

5
00:00:13,500 --> 00:00:20,740
But before we get to that first, I want to show you an even easier way to get started writing each

6
00:00:20,820 --> 00:00:22,260
HTML code.

7
00:00:22,410 --> 00:00:26,400
There is a free website named Code Pen.

8
00:00:26,580 --> 00:00:31,410
As of this moment, the domain is code Penn dot IO.

9
00:00:31,590 --> 00:00:35,850
Or you can just perform a google search for code pen.

10
00:00:35,850 --> 00:00:37,890
It should be the first result.

11
00:00:37,890 --> 00:00:43,200
And on this code pen website you do not even need to sign up for an account.

12
00:00:43,200 --> 00:00:44,670
You can if you want to.

13
00:00:44,670 --> 00:00:50,760
They offer a free account and that way it will remember your projects, which I highly encourage you

14
00:00:50,760 --> 00:00:54,240
to do, but you don't need to sign up for an account.

15
00:00:54,240 --> 00:00:59,550
So even if you're not logged in or signed up at all, you can just come to this website and towards

16
00:00:59,550 --> 00:01:05,400
the top right corner, click on this create button and then choose new pen.

17
00:01:06,960 --> 00:01:14,940
And this is basically a text editor program, right within your web browser and within this area named

18
00:01:14,940 --> 00:01:16,390
H HTML.

19
00:01:16,410 --> 00:01:19,970
If I click within that area, I can begin typing.

20
00:01:19,980 --> 00:01:25,710
So for example, maybe I want to create an important heading h one.

21
00:01:26,730 --> 00:01:36,210
This is a heading close out the H one and we can see that as soon as I stop typing in real time, we

22
00:01:36,210 --> 00:01:40,560
see a preview of what that will look like in a web browser down here.

23
00:01:40,860 --> 00:01:50,070
And if I type a bit more so on a new line, if I add a paragraph, this is a paragraph you can see in

24
00:01:50,070 --> 00:01:50,820
real time.

25
00:01:50,820 --> 00:01:56,720
Our preview gets updated and this is perfect for an educational environment.

26
00:01:56,730 --> 00:02:04,080
So while you would not use code pen to develop complex websites in the real world, while you're learning

27
00:02:04,080 --> 00:02:08,820
and experimenting and practicing, code pen is a dream come true.

28
00:02:08,850 --> 00:02:15,750
Think of it as a playpen or playground where you can immediately see the results of your experiments.

29
00:02:15,990 --> 00:02:22,770
And you can see up here that there's another area named CSS, and that's the other language that we

30
00:02:22,770 --> 00:02:26,200
will be learning during the second half of this course.

31
00:02:26,220 --> 00:02:28,680
So Code Pen has you covered there as well.

32
00:02:28,980 --> 00:02:36,360
Also, for many of the lessons in this course, I've set up code pen demos or follow along links that

33
00:02:36,360 --> 00:02:37,440
you can use.

34
00:02:37,470 --> 00:02:38,960
Let me show you what I mean.

35
00:02:38,970 --> 00:02:46,320
So back within Udemy, whether you're looking through the course content outline or you're actually

36
00:02:46,320 --> 00:02:48,270
watching a video lesson.

37
00:02:48,540 --> 00:02:51,150
So, for example, if I skip ahead.

38
00:02:52,160 --> 00:02:53,190
Quite a bit.

39
00:02:53,210 --> 00:02:55,490
I don't want you to actually skip ahead.

40
00:02:55,490 --> 00:03:00,980
I'm just showing you what you can expect in the course, but you can see that for many lessons in the

41
00:03:00,980 --> 00:03:04,040
course, there are associated resources.

42
00:03:04,220 --> 00:03:11,360
And for the majority of lessons I've set up code pen demos and follow along code pen links.

43
00:03:11,510 --> 00:03:12,470
I've set it up.

44
00:03:12,470 --> 00:03:19,580
So the demo is an example of the finished product and the follow along link is the code in its beginning

45
00:03:19,580 --> 00:03:20,990
state of the lesson.

46
00:03:20,990 --> 00:03:25,400
So this makes it very easy to follow along with me step by step.

47
00:03:25,400 --> 00:03:29,300
So for example, if I click on the follow along code pen.

48
00:03:31,150 --> 00:03:37,540
I'm just one click away from an interactive playground where I can follow along with the video lessons

49
00:03:37,540 --> 00:03:39,710
in this course, step by step.

50
00:03:39,730 --> 00:03:45,130
So, for example, in this follow along link, you can see the website looks very basic and plain.

51
00:03:45,520 --> 00:03:52,240
But if I jump back to you, to me and click on the code pen demo link, well then you're just one click

52
00:03:52,240 --> 00:03:56,080
away from sort of the finished product for that particular lesson.

53
00:03:56,290 --> 00:04:00,820
And the idea is that you're not going to mess anything up by changing the code.

54
00:04:01,000 --> 00:04:07,310
In fact, I want you to experiment and be a mad scientist and almost try to break things on purpose.

55
00:04:07,330 --> 00:04:08,920
This is the best way of learning.

56
00:04:08,920 --> 00:04:15,130
So, for example, I don't expect you to understand any of this code that you're looking at right now.

57
00:04:15,160 --> 00:04:20,050
Remember, I skipped ahead in the course, just to give you an example of these code pen demos.

58
00:04:20,050 --> 00:04:27,070
But the idea is that down in the preview, we can see this title, website, title and website slogan

59
00:04:27,070 --> 00:04:28,200
included here.

60
00:04:28,210 --> 00:04:35,200
And even though we might not understand the majority of this code, we can see website, title and website

61
00:04:35,200 --> 00:04:36,850
slogan included here.

62
00:04:37,300 --> 00:04:39,010
So you're free to customize this.

63
00:04:39,010 --> 00:04:46,300
You could say my amazing website and you can see the preview updating in real time.

64
00:04:46,870 --> 00:04:48,790
And you could change this to say.

65
00:04:49,820 --> 00:04:54,950
My life changing slogan goes here, cool.

66
00:04:54,950 --> 00:04:57,160
And we see that updated on the fly.

67
00:04:57,170 --> 00:05:02,600
So the idea is that as you're working your way through the course, keep your eyes peeled for these

68
00:05:02,600 --> 00:05:06,000
code pen, demo and code pen follow along links.

69
00:05:06,020 --> 00:05:10,400
I've set them up for the vast majority of lessons in the course.

70
00:05:11,270 --> 00:05:16,670
Not only can you find them if you scroll through the course outline, but even if you're viewing a video.

71
00:05:18,720 --> 00:05:21,780
Then you can click this icon in the top left.

72
00:05:23,140 --> 00:05:25,510
The current video that you're watching will be highlighted.

73
00:05:25,510 --> 00:05:28,750
And here you can see the associated resources.

74
00:05:28,870 --> 00:05:29,350
Cool.

75
00:05:29,350 --> 00:05:35,530
So this way you're always just one click away from an interactive demo and you can follow along.

76
00:05:35,560 --> 00:05:41,130
Now, I do want to stress that you do not need to use code pin if you don't want to.

77
00:05:41,140 --> 00:05:48,910
And in the very next lesson, I will be showing you how to find a true text editor program on your computer

78
00:05:48,910 --> 00:05:55,200
so you can create a HTML page files just like I did in the previous lesson.

79
00:05:55,210 --> 00:06:02,430
So whether you use code pen, a true text editor program, or both, that choice is up to you.

80
00:06:02,440 --> 00:06:07,640
But right now, I will tell you one thing about code pen to save you frustration.

81
00:06:07,660 --> 00:06:12,220
Code Pen does not let you access your computer's files.

82
00:06:12,220 --> 00:06:17,800
So in the lessons where I show you how to add photographs or images to your web pages.

83
00:06:17,800 --> 00:06:20,740
Right, photographs from your computer's hard drive.

84
00:06:20,740 --> 00:06:26,620
You will want to use a true text editor program on your computer for those lessons.

85
00:06:27,280 --> 00:06:33,430
So code pen is an amazing learning tool, but at the end of the day, you're still going to want a text

86
00:06:33,430 --> 00:06:35,830
editor program on your computer.

87
00:06:35,830 --> 00:06:40,690
And that's exactly what I'm going to show you how to work with in our very next lesson.

88
00:06:40,870 --> 00:06:43,900
So let's keep things rolling and I will see you then.