Hello, everyone.
This video is not a true lesson.
It's more of a side note.
So in our next lesson, I will show you how to find a text editor program on your computer.
But before we get to that first, I want to show you an even easier way to get started writing each
HTML code.
There is a free website named Code Pen.
As of this moment, the domain is code Penn dot IO.
Or you can just perform a google search for code pen.
It should be the first result.
And on this code pen website you do not even need to sign up for an account.
You can if you want to.
They offer a free account and that way it will remember your projects, which I highly encourage you
to do, but you don't need to sign up for an account.
So even if you're not logged in or signed up at all, you can just come to this website and towards
the top right corner, click on this create button and then choose new pen.
And this is basically a text editor program, right within your web browser and within this area named
H HTML.
If I click within that area, I can begin typing.
So for example, maybe I want to create an important heading h one.
This is a heading close out the H one and we can see that as soon as I stop typing in real time, we
see a preview of what that will look like in a web browser down here.
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
real time.
Our preview gets updated and this is perfect for an educational environment.
So while you would not use code pen to develop complex websites in the real world, while you're learning
and experimenting and practicing, code pen is a dream come true.
Think of it as a playpen or playground where you can immediately see the results of your experiments.
And you can see up here that there's another area named CSS, and that's the other language that we
will be learning during the second half of this course.
So Code Pen has you covered there as well.
Also, for many of the lessons in this course, I've set up code pen demos or follow along links that
you can use.
Let me show you what I mean.
So back within Udemy, whether you're looking through the course content outline or you're actually
watching a video lesson.
So, for example, if I skip ahead.
Quite a bit.
I don't want you to actually skip ahead.
I'm just showing you what you can expect in the course, but you can see that for many lessons in the
course, there are associated resources.
And for the majority of lessons I've set up code pen demos and follow along code pen links.
I've set it up.
So the demo is an example of the finished product and the follow along link is the code in its beginning
state of the lesson.
So this makes it very easy to follow along with me step by step.
So for example, if I click on the follow along code pen.
I'm just one click away from an interactive playground where I can follow along with the video lessons
in this course, step by step.
So, for example, in this follow along link, you can see the website looks very basic and plain.
But if I jump back to you, to me and click on the code pen demo link, well then you're just one click
away from sort of the finished product for that particular lesson.
And the idea is that you're not going to mess anything up by changing the code.
In fact, I want you to experiment and be a mad scientist and almost try to break things on purpose.
This is the best way of learning.
So, for example, I don't expect you to understand any of this code that you're looking at right now.
Remember, I skipped ahead in the course, just to give you an example of these code pen demos.
But the idea is that down in the preview, we can see this title, website, title and website slogan
included here.
And even though we might not understand the majority of this code, we can see website, title and website
slogan included here.
So you're free to customize this.
You could say my amazing website and you can see the preview updating in real time.
And you could change this to say.
My life changing slogan goes here, cool.
And we see that updated on the fly.
So the idea is that as you're working your way through the course, keep your eyes peeled for these
code pen, demo and code pen follow along links.
I've set them up for the vast majority of lessons in the course.
Not only can you find them if you scroll through the course outline, but even if you're viewing a video.
Then you can click this icon in the top left.
The current video that you're watching will be highlighted.
And here you can see the associated resources.
Cool.
So this way you're always just one click away from an interactive demo and you can follow along.
Now, I do want to stress that you do not need to use code pin if you don't want to.
And in the very next lesson, I will be showing you how to find a true text editor program on your computer
so you can create a HTML page files just like I did in the previous lesson.
So whether you use code pen, a true text editor program, or both, that choice is up to you.
But right now, I will tell you one thing about code pen to save you frustration.
Code Pen does not let you access your computer's files.
So in the lessons where I show you how to add photographs or images to your web pages.
Right, photographs from your computer's hard drive.
You will want to use a true text editor program on your computer for those lessons.
So code pen is an amazing learning tool, but at the end of the day, you're still going to want a text
editor program on your computer.
And that's exactly what I'm going to show you how to work with in our very next lesson.
So let's keep things rolling and I will see you then.