And yes, we are checking some boxes here.
Download an installation of the ID completed, extensions completed.
Now we need to set up the folder structure inside of the Visual Studio code and basically inside of
that folder structure, we're going to create three files.
Those three files I call the Three Musketeers.
Yeah, those three files.
They are the foundation to build a good application or any project inside of or with JavaScript.
Can I build a JavaScript application with one single file?
Yes, you can.
But when you start to growing the application and making that application more available, you will
run into trouble because everything is going to be in one single file.
So don't go down to that root.
I know looks like it's the easiest one, but it's better to start with the right configuration.
I would say so on Visual Studio, I will click into the open folder button.
If the button is not here, you can go to the menu menu file.
Unfortunately, it's not into the recording, but you can go to the menu file and click into the open
folder option.
So as soon as I click over here, I have a folder called JavaScript.
You can name your folder, you can place your folder anywhere, just place in a safe place where you
always have availability to that.
So I'm going to point you to JavaScript and clicking into open.
Great.
I'm back to the welcome message right now.
I will close the welcome message.
I do a right click on the left hand side and I'm going to click into the new file.
The new file.
First one is the web page itself.
It's the http HTML page where part of our code will be there and is going to be the the place where
you link to the actual JavaScript pages.
So my page will call index dot http html as soon as I type index dot html, check it out.
This icon over here.
So the icon change the color.
Now the Visual Studio code knows this is going to be an HTML five file, and the guy responsible to
change this icon was the extension material icon theme.
So that's why it's so good to eat, to use these extension.
So first file is done.
The second file is the one that's going to give more color and formatting and all the pretty stuff that
you can apply to a project or to an application they are coming from.
This file is the styles is.
Dot c.
S so visual code identified that CSS file and it change the icon.
And the third the last one, but not the most important.
And probably in the bigger applications you're going to have more than one file is the JS file, the
JavaScript file, the one where the brain of the application is going to be there.
So right click new file and I can call this main, I can call app, I can call site just for my example.
I'm going to call it Main.
Yeah, Main dot JS press return and you have the three files.
So the files are open over here.
They're opening tabs and this is the folder and files, the structure that we are looking for.
The next step, we're going to start typing some code.