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.
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.
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
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.
Now, we have this folder open. Let's add a new file here, index.html
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.
This generates some basic HTML boiler plate.
<!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>
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
So, save the changes, open the extensions tab, here.
Here on this box, search for live server.
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
This will open up Chrome, or your default browser, and point it to this address, 127.0.0.1:5500/index.html
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>
<!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>
Now, save the changes. Back in the browser, we can see this page is refreshed automatically, and we have the Hello World heading here.
Happy Coding!
Top comments (0)