Setting Up Your Development Environment

Before we start coding, let’s set up the tools you’ll need to write and run JavaScript.

What You’ll Need

A Code Editor - Where you write your code
A Web Browser - Where you run and test your code
Basic understanding of HTML - To create a webpage that runs JavaScript

Step 1: Install a Code Editor

We recommend Visual Studio Code (VS Code) - it’s free, powerful, and has excellent JavaScript support.

Download VS Code

Visit code.visualstudio.com
Download the version for your operating system
Install and open VS Code

Recommended Extensions

Install these helpful extensions:

ESLint - Catches errors in your code
Prettier - Automatically formats your code
JavaScript (ES6) code snippets - Helpful code shortcuts

Step 2: Set Up Your Browser

Any modern browser works, but we recommend Google Chrome or Firefox for their excellent developer tools.

Opening Developer Tools

The browser’s Developer Tools (DevTools) include a Console where you can run JavaScript directly.

Keyboard shortcuts:

Windows/Linux: F12 or Ctrl + Shift + I
Mac: Cmd + Option + I

Try It Now!

Open your browser
Press F12 to open DevTools
Click the “Console” tab
Type this and press Enter:

console.log("Hello from the console!");

You should see “Hello from the console!” appear. Congratulations - you just ran JavaScript!

Step 3: Create Your First HTML + JavaScript File

Let’s create a proper project file.

Create the Project Structure

Create a new folder called js-learning
Inside, create a file called index.html

Write Your First Program

Open index.html in VS Code and add this code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My JavaScript Journey</title>
</head>
<body>
    <h1>JavaScript Learning</h1>
    <p>Open the console to see the output!</p>

    <script>
        // Your JavaScript code goes here
        console.log("Hello, JavaScript!");

        // Let's do some math
        console.log("2 + 2 =", 2 + 2);

        // Display a greeting
        let name = "Learner";
        console.log("Welcome,", name + "!");
    </script>
</body>
</html>

Run Your Code

Open index.html in your browser (double-click the file)
Open DevTools with F12
Check the Console tab - you should see your messages!

Alternative: External JavaScript Files

For larger projects, it’s better to keep JavaScript in separate files:

<!-- In index.html -->
<script src="script.js"></script>

// In script.js
console.log("This is from an external file!");

Quick Console Tips

The console is your best friend for debugging:

// Output text
console.log("Regular message");

// Output warnings (yellow)
console.warn("This is a warning");

// Output errors (red)
console.error("This is an error");

// Clear the console
console.clear();

Key Takeaways

VS Code is an excellent editor for JavaScript
Browser DevTools let you run and debug JavaScript
Use console.log() to output values for debugging
JavaScript can be written inline in HTML or in external .js files

You’re now ready to start learning JavaScript! In the next lesson, we’ll dive into variables and data types.