Setting Up the Environment for Writing JavaScript code
Tags: javascript, beginners, webdev, programming
Published: 2023-10-11 08:04:14

In order to write JavaScript code, you need a code editor. There are various code editors out there, including:

- Visual Studio Code(VS Code)
- Sublime Text
- Atom and so on.

Out of this, my favorite is Visual Studio Code, that you can download from `code.visualstudio.com`.

![The URL of Visual Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4evsugbidm599zcui5v.png 'The URL of Visual Studio')

It is a very simple, light-weight, cross-platform, and powerful editor.

So, if you don't have Visual Studio Code on your machine, go ahead and download it.

The other thing I want you to install is Node.

![The URL of Node on Google Chrome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fvzqbikqf8w47yprbvf.png 'The URL of Node on Google Chrome')

You can download node from `nodejs.org`

Now, technically, you don't need Node to execute JavaScript. Because, as I explained before, you can execute JavaScript code, inside of a browser, or in Node. But, it is good to have Node on your machine, because we use that to install third-party libraries.

Also, later in this section, I am going to show you a preview of Node.

So, stop reading now and install Visual Studio as well as Node. Once you are done, come back and continue reading.

Now, I want you to create a new folder.  Call the folder `js-basics`

![JS Basics folder on the Computer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nglqidfcn6p03z48gqt.png 'JS Basics folder on the Computer')

The name really doesn't matter. We just want to have a folder, for writing all the code in this course. Now, drag and drop this folder into Visual Studio Code.

![Visual Studio Code Welcome Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2vl8xxmnq9je01jhc86g.png 'Visual Studio Code Welcome Page')

Now, we have this folder open. Let's add a new file here, `index.html`

![Added the index.html folder on Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ztjbc7qqb2b6q3hfuohi.png 'Added the index.html folder on Visual Studio Code')

You don't really need to know HTML in order to take this course, but if you want to be a Frontend developer, you should know your HTML well.

Now, in this file, I need you to type an `!`  exclamation and then press TAB.

![Typing an exclamation mark on Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emgfy8khzjzpoxdqyp1r.png 'Typing an exclamation mark on Visual Studio Code')

This generates some basic HTML boiler plate.

```html
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-   scale=1.0">
        <title>Document</title>
    </head>
    <body>
    
    </body>
</html>
```

![The code on Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkf818us9aar1ubm60qx.png 'The code on Visual Studio Code')

We don't really care about any of this code here. We are going to use this as a host for our JavaScript code.

We are going to see that in the next lecture.

For a One-on-One Coaching, [click here](https://karlgusta.gumroad.com/l/svqgep)

So, save the changes, open the extensions tab, here.

![The extensions tab on Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02c97rv5xav0ymgns96i.png 'The extensions tab on Visual Studio Code')

Here on this box, search for `live server`.

![Searching live server on Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w40of0katpbpxpluanbm.png 'Searching live server on Visual Studio Code')

So, live server, is a very light-weight web server that we are going to use to serve our web application.

So, install this, then we are going to restart our Visual Studio Code.

When you are done, go to the explorer tab, right click `index.html`, and select `open with Live Server`

![Right clicking index.html and selecting open with Live Server on Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8alz9gkjxpin8hdcicf.png 'Right clicking index.html and selecting open with Live Server on Visual Studio Code')

This will open up Chrome, or your default browser, and point it to this address, `127.0.0.1:5500/index.html`

![The address on Google Chrome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rs06c4ccf8zfvz6zfody.png 'The address on Google Chrome')

That is where, our web application is served from.

Currently, we have an empty page. Now, to make sure that everything is working properly, let's go back to Visual Studio Code.

Here in the body section, let's add an `<h1>`

```html
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-   scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>
```

![The Hello World Heading One on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjg1w7pkcdmif5uuzukz.png 'The Hello World Heading One on VS Code')

Now, save the changes. Back in the browser, we can see this page is refreshed automatically, and we have the Hello World heading here.

![Hello World on Google Chrome page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zg373gdk3app08fltnoz.png 'Hello World on Google Chrome page')

Happy Coding!