Jonas: Welcome back.
Let's now write our very first line of code
and build our very first and very small webpage.
So here we are back in VS Code.
And let's now close all of this up
and then we're going here to this first tab.
So this explorer tab.
So in VS Code we always need to be inside of some folder
and that folder is called the project folder.
Now, right now we don't have any folders started yet
and so let's actually start by doing that.
And I will create a folder right here on my desktop.
So basically I will do all the,
all the coding will always happen here on my desktop
but of course you can also do it
in any other place on your computer.
This one doesn't really matter.
For me it's just easier to have it on the desktop.
And I'm calling this folder here, zero one and test.
Okay, so let's go back here and now click on open folder.
And so going to my desktop
I will now select this folder that I just created.
And so this "zero one test" is now our project folder.
So you see we get a new welcome screen and here we can click
on New File to add our very first file to the project.
Or we could also do this
by hovering here over this left sidebar
and clicking here on the new file icon.
So these are two different ways
of creating new files in the project folder.
And I actually prefer this one here.
So we are about to create our very first webpage
and a webpage is basically just an HTML file.
And let's call it "index dot html".
So it's basically just a file with the HTML file extension
and we are calling it "index" because
that is the default name of the first page of any website.
So index is basically always the entry point to any website,
and so all web projects always need to have
an "index dot html".
All right, so keep that in mind.
Always call your very first page "index dot html".
Now my goal in this lecture
is not yet to really teach you HTML.
Right now, all I want to do is to create this file,
and to add a little bit of code to it,
and then see the result in the browser.
Just so you get to write your first line
of code and are able to see the result
of writing that code in a real web browser.
So again, I'm not really starting to teach HTML just yet.
And so instead of writing a whole page structure,
as we usually need to, we are going to use a small cheat
that we can use in VS Code.
So to do that, just write an exclamation mark.
So just like this, and then you can hit tab
on your keyboard or you can also just click here.
And with that we get this very basic
and almost empty HTML structure.
So it has a head and it has a body,
but once again we will learn all about
that a little bit later.
For now, all I'm interested here is
for now this title of the webpage.
So let's change the content here
of this title to, for example, "my first webpage".
But, of course, you can also write something else here.
And then let's go inside of the body.
So this is actually the part
that we will be able to see in the browser.
And here just write this less than sign.
Then H one, which stands for heading one.
And then the greater than symbol.
So just like this one here.
And you see that then a VS code actually automatically
placed this other part here.
So closing the H one, basically, but again
that doesn't really matter for now.
Let's just write some text content in here.
And I'm writing "Hello World",
which is kind of a standard when
you write your very first line of code
in any programming language.
So "hello world" is really a long standing tradition.
Next, let's try another one.
So again, this less than symbol.
Now let's try P, which stands for paragraph.
And then again VS Code automatically
closes the paragraph for us.
So, let's say my name is Jonas,
and you will of course use your own name.
And this is my very first webpage.
Okay, now we can give it a save by hitting command
or Control S, or you can go here to the file menu as well.
And we also have the auto save active.
So if we just leave this tab,
so for example by clicking outside here
then it will also automatically save the file.
So let's actually try that.
And here we go.
So now the file has been saved
and maybe you'll also noticed
that the formatting has changed here a little bit.
And this happened because of the prettier extension
that we installed in the last video.
So remember that the prettier extension is to format
our code automatically whenever we save it.
And so that is exactly what just happened.
So let's just add some spaces here.
And now if I hit command or control S again,
then you see it put it back in the correct place.
All right?
And so that's the power of prettier, and it will ensure
that your code should always look the same
as this code in the video.
Great.
So we just wrote our very first line of code
or actually our first two lines of code.
And so now we have this index dot html file
and we can open it up in a browser.
So let's go to our project folder
where this file is located.
And in my case, remember that's on the desktop.
So I can just open it.
And now here we have that index dot html file
that we created previously in VS Code.
And to now open it up in Google Chrome,
or in any other browser,
we just need to double click the file
or we can just also right click it
and then open with Google Chrome.
So let's do that.
And here it is.
Here is our very first webpage
that we just created manually in VS Code.
Great. And that's really amazing if you ask me.
So congratulations and well done
on your very first webpage here.
Let's just push it to the side here a little bit
and then VS Code to the other side.
So from now on,
we will always have our code here on the left side
and then on the right side the browser,
so that we can see our changes.
And to give us a bit more space here,
we can again click on this tab here
and that will then collapse this sidebar
and give us more space for our actual code.
So you see that here we have this "hello world"
in big and bold text.
And so that corresponds here to this H one element.
And then below that we have this paragraph
which is translated here into this visual element.
We also have the actual title of the page
here in the title of this tab.
So my first webpage is what we have here
and that is exactly what we typed here
into the title element, right?
And so one more time, the code that we wrote here
in our HTML document is now reflected in the real world
in this real web browser.
And speaking of the web browser,
I'm using Google Chrome to test all the code
that we're gonna write throughout this course.
And so I really advise you to also
use Google Chrome to always test the code
that you are writing.
So that will again ensure
that you have the exact same results
as you are seeing in the course videos.
Okay.
And this is actually enough
for this very first coding video.
And I hope that you really get the ideas
that I wanted to show you in this lecture.
So basically, starting from creating a project folder,
then opening up that project folder in VS Code.
So in this folder here, the test folder,
then inside of that creating an HTML file,
then adding some code to that file,
and finally opening up the HTML document in a real browser,
such as Google Chrome, where we then see this result.
So basically,
the translation of our code to a visual result.
So I hope that you had some fun doing this
and I see you in the next video.