Setting Up Your Environment
To write JavaScript properly, you need a minimal setup on your computer. This setup facilitates coding, accelerates development, and improves organization, particularly when working on projects. In this chapter, you will learn how to prepare your system so you can write and run JavaScript just like a real developer.
This chapter is written for college students and recent graduates, so everything is explained in simple steps.
Why Do You Need an Environment?
You can write JavaScript directly in the browser console, but that is not enough for real learning or project work.
A proper environment helps you:
Write code in files
Save your programs
Create small and big projects
Organize folders
Debug errors easily
Use tools that professionals use
Setting this up will make your JavaScript journey smooth and enjoyable.
What You Need to Install
You only need two things:
A code editor
A browser
Later, you can also install Node.js, but for now, a browser is enough.
1. Installing VS Code (Recommended Editor)
Visual Studio Code (VS Code) is the most popular code editor today. It is free, fast, and easy to use.
Steps:
Go to the official VS Code website
Download the version for your operating system
Install it like any other software
Once installed, open it.
You will see a simple, clean interface in which you can write JavaScript code.
2. Best Extensions for JavaScript Beginners
VS Code works great with extensions. Here are helpful ones:
ESLint ? Helps you write cleaner code
JavaScript (ES6) Snippets ? Gives ready-made shortcuts
Live Server ? Runs your HTML + JS code instantly in the browser
Extensions are optional right now, but Live Server is very helpful.
3. Setting Up Your First Project Folder
Let’s create your first folder for JavaScript practice.
Create a new folder on your desktop
Name it javascript-learning
Open VS Code
Click Open Folder
Select your folder
Now your workspace is ready.
4. Creating Your First JavaScript File
Inside your folder:
Click New File
Name it script.js
This is where you will write your JavaScript code.
Let’s add a simple line:
console.log("My first JavaScript file");
Save the file.
This code will print a message when you run it through a webpage.
5. Connecting JavaScript to an HTML File
Browsers cannot open .js files alone, so you need an HTML file to link your JavaScript code.
Create a new file:
Click New File
Name it index.html
Add this code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Learning</title>
</head>
<body>
<h1>Welcome to JavaScript</h1>
<script src="script.js"></script>
</body>
</html>
Here’s what happens:
The browser loads HTML first
Then it finds the
<script>tagIt loads and runs your JavaScript file
6. Running Your Project in the Browser
There are two simple ways:
Method 1: Open HTML File Directly
Go to the folder
Double-click index.html
Browser opens it
Press F12 ? Console
You will see the output
Method 2: Use Live Server (Recommended)
If you installed Live Server:
Right-click index.html
Click Open with Live Server
The browser opens your page
The console shows the output
Live Server refreshes the page automatically whenever you save your file.
7. Example Program: Testing Your Setup
Write this in script.js:
let student = "Aman";
let course = "JavaScript Learning Series";
console.log("Student Name:", student);
console.log("Course:", course);
Output:
Student Name: Aman
Course: JavaScript Learning Series
This confirms your system is ready for the rest of the series.
Tips for College Students and Freshers
Always organize your files in folders
Use VS Code shortcuts to save time
Practice writing simple scripts every day
Avoid copying too much code—type it yourself
Keep your setup neat for future projects
This will help you build habits that match real-world development.
What You Will Learn in the Next Chapter
Next, we will understand:
How to write clean JavaScript
Why formatting and structure matter
Beginner mistakes to avoid
This will help you start coding the right way before you learn variables and other basics.
