1.2 Setting up the development

Welcome to this new chapter where I will talk about the development setup. To write javascript code you need a code editor, there are different code editors in Sublime Text VSCode Atom and many others... In our case we are going to use VSCode throughout this training so to download this editor it's very simple we go to code.Studio.com, it's a light editor and very easy to access powerful and multiplatform so if it's not done, I invite you to do it. We will also install node JS, we go to nodejs.org we don't necessarily need NodeJS to run javascript code but as I explained before you run javascript code inside a browser or in Node, but it's good to have our in our machine because we will use it to install third party libraries. Here I invite you to pause the video if the installation is not done and we'll meet again right after for the demonstration. Then we will create a new folder That we will call js_basic. Once the folder is created. We will open VSCode We will open directly the folder in question. File. Open the folder. Create a new file in this folder called index.html We will write a shortcut. Exclamation mark. This allows us to generate directly all the components of an HTML document. The header and the body page and we will install an extension. Call it LiveServer. For me it is already done but I invite you to do it. LiveServer is a very light web server That we will use to serve all our web application. Once this is done we go back to the explorer. Open With LiveServer. This will open it directly. This means that the extension has been activated. We are supposed to have our default browser open. If it is not done, I invite you to go to file. Preference. We will type LiveServer. So there my default browser is chrome, we will modify. We'll get the address that points to our web application directly. Okay, so this is the right address. Host number or host number. The port number. Once we have copied this address. Paste directly. We have an empty page this page mom it's totally normal. We are going to test in fact our extension. We are going to see if that modifies well in real time, we are going to put H1. Hello World. I have directly. Modification. Hello people. We don't even need to save. We're doing the modification right. It is done automatically in real time. That's it for this little demonstration we'll see you in the next video so in the next video we'll write our very first JavaScript code.