step-by-step guide to set up JavaScript for development using a code editor

by

⚡ Quick Summary:

  • ✅ JavaScript runs in your browser (no installation needed).

  • ✅ But you can use VS Code to write, save, and manage your files.

  • ✅ You only need a browser and a code editor to start.

🧑‍💻 Step-by-Step: Set Up JavaScript

✅ Step 1: Install VS Code (if not already)

Already done earlier, but just in case:

  1. Download from 👉 https://code.visualstudio.com

  2. Install like a regular app (check “Add to PATH” during setup)

✅ Step 2: Create Your First JavaScript File

  1. Open VS Code

  2. Go to File > New File

  3. Save it as:
    👉 index.html

  4. Paste this code:

html
<!DOCTYPE html>
<html>
<head>
<title>My First JavaScript</title>
</head>
<body>

<h1>Hello JavaScript!</h1>

<script>
alert("Hello from JavaScript!");
console.log("This is a message in the browser console");
</script>

</body>
</html>

  1. Right-click the file in VS Code and choose “Open with Live Server” (or open it manually in your browser).

💡 If you don’t have Live Server, install it from VS Code Extensions (Ctrl+Shift+X, search: Live Server)

✅ Step 3: Check Output

  • A popup should say: “Hello from JavaScript!”

  • Right-click on the page > Inspect > Console tab — you’ll see:

    csharp
    This is a message in the browser console

🎉 Boom! You just ran JavaScript in your browser.

🧪 Bonus: Run JavaScript Directly in Browser Console

  1. Open any browser (Chrome, Edge, Firefox)

  2. Press F12 to open Developer Tools

  3. Go to the Console tab

  4. Type:

    javascript
    console.log("Hello from browser console!");

    Hit Enter — it works instantly!

🧰 Recommended Tools for JavaScript Coding

Tool Purpose
VS Code Code editor
Live Server Auto-reloads browser preview
Chrome/Firefox Best for testing JavaScript
Node.js (Optional) Run JS outside browser (next level)

Leave a Comment