JavaScript Roadmap — Day 2: Setting Up Your Development Environment

 

JavaScript · Day 2 of 180

Beginner Phase

Setting Up Your Development Environment

Before writing JavaScript — you need the right tools. A good setup makes learning 10x easier and more enjoyable.

Day 2 / 180

Beginner Phase

A proper development environment is like a professional kitchen — the right tools make everything easier. You wouldn't cook a meal with broken utensils. Same goes for coding. Today we set up everything you need to write JavaScript like a professional developer.

Tools You Need

Tool	What It Does	Download
VS Code	Code editor — where you write JavaScript	code.visualstudio.com
Node.js	Run JavaScript outside the browser	nodejs.org
Chrome	Best browser for JS development	google.com/chrome
Live Server	Auto-refresh browser when code changes	VS Code Extension

Step 1 — Install VS Code

1

Go to code.visualstudio.com and download VS Code for your OS (Windows/Mac/Linux)

2

Install it — default settings are fine

3

Open VS Code → Press Ctrl+Shift+X to open Extensions panel

4

Search and install these extensions: Live Server, Prettier, ESLint

Step 2 — Install Node.js

Node.js lets you run JavaScript outside the browser — directly in your terminal. This is how backend developers use JavaScript.

Terminal — Test Node.js

# Check if Node.js is installed
node --version
# Should show: v20.x.x or higher

# Check NPM (comes with Node)
npm --version
# Should show: 10.x.x or higher

# Run JavaScript file
node test.js

Step 3 — Your First JS File

Create a file called test.js in VS Code and write this:

test.js

// Your first JavaScript file!
console.log("Setup Complete!");
console.log("Node.js is working!");
console.log(2026 - 1995 + " years of JavaScript!");

Step 4 — Chrome DevTools

Chrome DevTools is your best friend as a JavaScript developer. Press F12 on any webpage to open it.

Tab	What It Does	Shortcut
Console	Run JavaScript, see errors, debug	F12 → Console
Elements	See HTML structure, edit CSS live	F12 → Elements
Sources	Debug JavaScript with breakpoints	F12 → Sources
Network	See API requests and responses	F12 → Network

Pro Tips

Pro Tip #1 — Use Live Server

Right-click your HTML file in VS Code → Open with Live Server. Your browser auto-refreshes every time you save. No more manual refreshing!

Pro Tip #2 — Enable Auto Save

VS Code → File → Auto Save. Now your files save automatically — no more losing code because you forgot to save.

Pro Tip #3 — Learn keyboard shortcuts

Ctrl+` opens terminal in VS Code. Ctrl+/ comments/uncomments code. Alt+Up/Down moves lines. These save hours every week.

Try it Yourself

✏️ Try it Yourself — Console Output

// Edit and click Run! console.log("Hello from VS Code!"); console.log("Node version check..."); let year = 2026; let jsAge = year - 1995; console.log("JavaScript is " + jsAge + " years old!"); // Try changing the values let myName = "Waheed"; console.log("My name is: " + myName);

// Output will appear here

💡 Code edit karo aur Run dabao!

Today's Practice Tasks

Task 1 — Install Everything

Download and install VS Code, Node.js, and Chrome. Install Live Server extension in VS Code.

Task 2 — Run Your First File

Create test.js, write console.log("Setup Complete!"), run with Node.js in terminal.

Mini Exercise — Explore DevTools

Open Chrome → F12 → Console tab. Type console.log("DevTools works!") and explore Elements, Network tabs.

Coming Next

Day 3 — Variables: var, let, and const

The foundation of JavaScript — how to store and manage data

View Full Roadmap →

Enjoying this roadmap?

Follow Muhammad Waheed Asghar for daily JavaScript tips and updates!

Follow on LinkedIn Follow on Facebook