- [Instructor] As we work through our examples,
we'll need to test our code on the browser
and see it in action.
If you're using VS Code, and would like to have
the same tools I'm using, follow along.
Otherwise, feel free to skip this video
or install similar tools in your editor of choice.
Open up Visual Studio Code and go to the extensions tab.
Find the extension Live Server.
This is the one we need to install.
When you have the extension Live Server
all you have to do is click on the little button
at the bottom of your screen here
to start a Live Server right away,
without doing anything like NPM servers and stuff like that.
It will start your server directly from VS Code.
Let's go ahead and install this and then reload.
That's going to create a new folder on our desktop
so let's get out of VS Code, create a new folder
and we'll call this scope.
We'll open that inside VS Code, so let's go back to VS Code
go to Explorer, click on Open Folder, go to Desktop
and open scope.
Inside of that directory we'll create two new files.
One will be the index.html and the second one
will be a JavaScript file, so let's call this the index.js.
Let's call this welcome.
What we'll do inside of the index we'll create
a new HTML document and we can use the Emmet shortcut
doing doc, and then do a tab, and we'll
get our HTML template completely done for us.
What we could do after that is at a script tag,
right here, inside of the body, you can add a script tag
like that and leverage Emmet one more time.
What we'll do is put the source as the index.js
and let's put a little title here so Javascript scope.
And save all this and then let's do
a console.log to validate that everything is working fine.
Inside of our index, we'll do, Hello.
Let's save that.
Let's go to the index and do Shift + Command + p
and type live, and click on Open Live Server.
To bring up the developer tools in Chrome for Mac
it's Command + Shift + i, and for Windows
it's it's Control + Shift + i.
Once you have that, let's take a look
at the console, that's okay.
Them we have our Hello, so this means that
our server is working.
If you wanna close the server all we have to do
is click on the port below, here.
If you wanna start it, usually you should have
something to start it here.
So let's stop it, now you have the go live.
The first time you install the Live Server,
it's a possibility that you're not going to see this here
if you don't, simply do Shift + Command + p
to bring up the commands inside of VS Code
and then look for live and then open with Live Server
and it's going to start your server again.
Awesome, so now we're fully set up with Live Server
and ready to learn how JavaScript scoping works.