Let's start with creating a new empty project
in visual studio code. For this,
we need two things. An empty project folder
and a new visual studio code window.
If you are in visual studio code already,
you can just go to file and select new window here.
This will open this new window.
And then besides this,
we need to create a new folder
with the name of your choice.
For example, travel page, and then,
you simply drag and drop this folder into your
visual studio code instance
that you just created.
And we can of course, close this welcome screen with this.
The project was created.
I'll use my structure here again,
just to be able to track and save
the different stages of the code here.
As we learned in this course,
our project needs an index HTML file,
and we'll also add some styling.
So, let's create the basic structure
by adding these two files first.
So an index HTML file,
and I'll also immediately add a styles CSS file.
Will of course add more style and HTML files
throughout this course,
but this is just to get started.
The style CSS file will remain empty for now.
We'll just focus on to the index HTML file.
And what did you learn?
What do we need in every HTML file we create,
we need a skeleton.
And as Max explained to you earlier,
you can create the skeleton on your own
with this doc type structure and so on.
Or we use this nice auto-completion feature
visual studio code ships with
by adding the exclamation mark
and pressing enter.
With this, our basic skeleton
was created automatically.
Again, we have two metadata not required
at this stage of the course.
It's this one here
and that one with the view port.
We'll dive into these a bit later.
So, to avoid any unnecessary confusion
at this stage, let's delete these.
With this, our skeleton looks nice.
We can immediately add a title for our page DOE,
which will be travel goals,
and we can add two more things in our head.
First thing, is the link
to our style sheet we created.
So, we enter link and press enter.
With this, we again use the auto completion
and we just have to add the reference,
which is styles CSS, auto-completed by hitting tap.
We will need another link here though.
And that's the link I provide
attached to this lecture.
And this link refers to Google fonts.
We learned about Google fonts already.
That is a great way to add better looking fonts
to our projects accessible for everyone.
Therefore, I prepared a link here, as I said,
you can find it attached to the lecture
and we'll add it above our style sheet reference
here, to make sure that the fonts are loaded
before we dive into the style part.
This is the link. You can see it, but as I said,
please use the attached one.
Let's quickly format this maybe.
And with this,
we finished our basic skeleton here.
This means we cannot continue
with the body part here in our HTML file.
And for this, we'll have another look
at our finished project.