Original subtitles

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

01 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 01 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.html.

So it's basically just the 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.html.

All right. So keep that in mind,

always call your very first page index.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 results in the browser.

Just so you get to write

your first line of code

and are able to see the results

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 H1, which stands for heading one

and then the greater than symbol.

So just like this one here,

and you see that then VS Code

actually automatically placed

this other part here.

So closing the H1 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 has 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 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 or 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'll 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.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.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 a 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 web page 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

the 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 H1 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 codes 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 will 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 this folder here to 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.