JavaScript Roadmap — Day 2: Setting Up Your Development Environment

 

📋 In This Lesson Day 2

1. Tools You Need

2. Install VS Code

3. Best Extensions

4. Install Node.js

5. Chrome DevTools

6. Your First JS File

7. Try It Yourself

8. Practice Tasks

JavaScript · Day 2 of 180 · Beginner Phase

Setting Up Your Development Environment

Before writing JavaScript you need the right tools. A professional setup makes learning 10x faster, easier, and more enjoyable.

Day 2 / 180

Beginner Phase

Imagine a chef trying to cook a professional meal with a broken knife, no cutting board, and a stove that randomly turns off. The recipe might be perfect — but the environment makes it impossible to execute properly.

Learning JavaScript with the wrong tools feels exactly like that. Today we set up your professional developer environment — the exact same tools used by developers at Google, Meta, and every top tech company in the world. Once this is done you will never need to change it.

1. The 4 Tools You Need

You only need four things. Each one has a specific job. Together they give you everything a professional JavaScript developer uses daily:

Tool	Job	Free?	Download
VS Code	Write your code	✅ Free	code.visualstudio.com
Node.js	Run JS outside browser	✅ Free	nodejs.org
Chrome	Best browser for JS dev	✅ Free	google.com/chrome
Live Server	Auto-refresh on save	✅ Free	VS Code Extension

💡 Why VS Code? It is free, open source, and used by over 70% of all developers worldwide. It has the best JavaScript support of any editor — with 30,000+ extensions. It is the industry standard.

2. Install VS Code — Step by Step

VS Code takes less than 3 minutes to install. Follow these exact steps:

1

Go to code.visualstudio.com — click the big blue download button for your OS (Windows / Mac / Linux)

2

Run the installer — keep all default settings and click Next until it finishes

3

Open VS Code → go to File → Auto Save → turn it ON. Files save automatically every time you stop typing

4

Press Ctrl + Shift + X to open the Extensions panel — you will install extensions in the next section

5 Keyboard Shortcuts — Learn These Today

Ctrl + `        // Open terminal inside VS Code
Ctrl + /        // Comment or uncomment a line
Alt + ↑ ↓      // Move a line up or down
Ctrl + D        // Select next matching word
Ctrl + P        // Open any file instantly

3. The Best VS Code Extensions

Extensions turn VS Code from a basic text editor into a powerful JavaScript IDE. Install these five — they are used by almost every professional JavaScript developer:

Extension	What it does	Priority
Live Server	Auto-refreshes browser when you save	Must Have
Prettier	Auto-formats your code to look clean	Must Have
ESLint	Catches errors before you run code	Must Have
ES6 Snippets	Type shortcuts to write code faster	Recommended
GitLens	See who changed what in your code	Optional

Pro Tip #1 — Live Server saves hours every week

Without Live Server you manually press F5 to refresh the browser every time you change code. With Live Server you just save — browser updates instantly. After one day you will never go back.

Pro Tip #2 — Prettier keeps your code professional

Prettier automatically formats your code every time you save. Consistent indentation, proper spacing, correct quotes — all automatic. Every company you will ever work at uses a formatter. Start the habit now.

Pro Tip #3 — ESLint catches bugs before they happen

ESLint underlines your mistakes in red before you even run the code. It is like having a senior developer looking over your shoulder. Install it from day one — it will teach you correct JavaScript habits automatically.

4. Install Node.js — Run JS Anywhere

Node.js lets you run JavaScript outside the browser — directly in your terminal. This is how backend developers use JavaScript and how you will run practice files throughout this entire roadmap without needing to open a browser every time.

1

Go to nodejs.org — download the LTS version (Long Term Support) — it is the most stable

2

Run the installer — keep all default settings and click Next

3

Open terminal in VS Code (Ctrl + `) and run these commands to verify the installation

Terminal — Verify Node.js installation

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

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

# Run a JavaScript file directly
node myfile.js
# Output appears right in your terminal

5. Chrome DevTools — Your Debug Superpower

Chrome DevTools is built into Chrome and it is the most powerful debugging tool available to JavaScript developers. Press F12 on any webpage to open it. You will use this every single day of your developer career:

Tab	What It Does	You Will Use It For
Console	Run JS, see errors and logs	Every day — debugging and testing
Elements	See and edit HTML/CSS live	CSS and DOM work
Sources	Set breakpoints, step through code	Deep debugging
Network	See all API calls and responses	Fetch API and backend work
Performance	Profile speed and memory	Optimization work

🔥 The Console is your best friend: Every time you see a red error message — do not panic. Read it carefully. It tells you exactly what went wrong and on which line. Red errors are not scary — they are helpful. Senior developers rely on them completely.

6. Your First JavaScript File

Now that everything is installed — let us write and run your first real JavaScript file. This is the exact workflow you will use every day for the rest of this roadmap:

test.js — Your first JavaScript file

// Your first JavaScript file!
// Run this with: node test.js

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

let myName = "Waheed";
console.log("Hello from " + myName + "!");

Terminal — Run it

# In VS Code terminal (Ctrl + `)
node test.js

Setup Complete!
Node.js is working!
31 years of JavaScript!
Hello from Waheed!

7. Try It Yourself

Edit the code and click Run Code. Change your name, city and try different calculations.

✏️ Try it Yourself — Your First JS File

// Edit and click Run! console.log("Hello from VS Code!"); let year = 2026; let jsAge = year - 1995; console.log("JavaScript is " + jsAge + " years old!"); // Change your name and city let myName = "Waheed"; let myCity = "Faisalabad"; console.log(`Hello from ${myCity}, ${myName}!`); // Math in the console console.log(10 + 5); console.log(100 / 4); console.log(2 ** 8); // 256 // Check your Node.js would say... console.log("Setup complete! Ready to learn JavaScript! 🚀");

OUTPUT

// Click Run Code to see output

💡 Code edit karo aur Run dabao!

8. Practice Tasks

Task 1 — Easy: Install Everything

Download and install VS Code, Node.js, and Chrome if you have not already. Open VS Code and install these 3 extensions: Live Server, Prettier, ESLint. Enable Auto Save. This is the foundation — do not skip it.

Task 2 — Medium: Run Your First File

Create a folder called js-roadmap on your Desktop. Inside it create day2.js. Write 5 console.log statements — your name, age, city, a calculation, and a fun fact about yourself. Run it with node day2.js in the terminal.

Task 3 — Hard: DevTools Exploration

Open Chrome → go to any website → press F12. In the Console tab type document.title and press Enter — you see the page title. Then type document.body.style.background = "red" — watch what happens. This is JavaScript running live in a real browser. This is exactly what you will be doing throughout this roadmap.

Next Lesson

Day 3 — Variables: var, let, and const

Read Next Lesson →

Want daily web dev tips?

Follow Muhammad Waheed Asghar for daily JavaScript and CSS tips!

Follow on LinkedIn Follow on Facebook