Setting Up Your First Development Environment on Windows

Before you write a single line of code, your computer needs the right tools installed. Think of it like cooking: you need a knife, a pan, and a stove before you can make anything. The tools for coding are a code editor, a runtime to execute your code, and version control to track your changes.

Here is the good news: there are only three things you need to install. The bad news is that Windows can be finicky about installations, especially around something called PATH (more on that in a moment). This guide will walk you through every step and warn you about the places where things commonly go wrong.

One rule before we start: do not install Docker, databases, Python, or anything else today. Every tool you install is one more thing that can break. Get these three working, write some code, and add more tools later when a project actually needs them. Most beginners who spend an entire weekend "setting up" never actually start coding. Do not be that person.

VS Code (Visual Studio Code) is where you will spend most of your time. It is free, made by Microsoft, and used by the vast majority of professional developers. It is not the same as Visual Studio, which is a different, much heavier product. Make sure you download the right one.

How to install:

1. Go to code.visualstudio.com
2. Click the big blue download button. It will detect that you are on Windows automatically.
3. Run the installer. On the "Select Additional Tasks" screen, check all the boxes, especially "Add to PATH" and "Register Code as an editor for supported file types." These save you headaches later.
4. Finish the installation and open VS Code.

Essential extensions to install (and nothing else for now):

• Prettier (code formatter). This auto-formats your code so it looks clean. Go to Extensions (Ctrl+Shift+X), search "Prettier," install it. Then go to Settings (Ctrl+,), search "default formatter," and set it to Prettier. Also enable "Format On Save."
• ESLint (catches JavaScript errors). Search "ESLint" in extensions and install it.
• Live Server (previews HTML files in your browser). Lets you right-click an HTML file and open it in Chrome with auto-refresh.
• GitLens (shows Git information inline). Not essential on day one, but useful once you start using Git.
• Auto Rename Tag (renames matching HTML tags). Small quality-of-life improvement when writing HTML.

That is five extensions. Some guides will tell you to install twenty. Ignore them. Each extension uses memory and can slow down your editor. Start with five, and add more only when you actually need them.

Quick test: Open VS Code, press Ctrl+` (backtick, the key below Escape) to open the integrated terminal. If a terminal panel appears at the bottom of the screen, VS Code is working correctly.

Node.js lets you run JavaScript outside of a browser. When you are building a website, the browser runs your JavaScript. But when you are building a server, writing scripts, or using most modern development tools, you need Node.js.

How to install:

1. Go to nodejs.org
2. Download the LTS (Long Term Support) version. Not the "Current" version. LTS is the stable one that will not randomly break things.
3. Run the installer. Accept all the default options. There is a checkbox that says "Automatically install the necessary tools." Check it. This installs some build tools that certain npm packages need.
4. The installer might open a command prompt window to install additional tools (Chocolatey, Python build tools). Let it finish. This can take 5 to 10 minutes.

Quick test: Open a new terminal in VS Code (Ctrl+`) and type:

node --version
npm --version

You should see version numbers for both. If you see "node is not recognized as an internal or external command," the installer did not add Node to your PATH. Close VS Code completely, reopen it, and try again. If it still does not work, you need to add Node to your PATH manually (see the troubleshooting section below).

What is npm? It stands for Node Package Manager. It comes bundled with Node.js. Think of it as an app store for code libraries. When you want to use someone else's code in your project (a date formatting library, a web framework, a testing tool), you install it with npm. You will use it constantly.

Try running a script: Create a file called hello.js on your desktop with this content:

console.log('Hello from Node.js!');

Then in your terminal, navigate to your desktop and run it:

cd ~/Desktop
node hello.js

You should see "Hello from Node.js!" printed in the terminal. If you do, Node is working.

Git tracks changes in your code over time. Think of it as an unlimited undo history that also lets you work on different features without breaking your main code. Every professional developer uses Git. Every employer expects you to know it. Install it now, even if you do not fully understand it yet.

How to install:

1. Go to git-scm.com
2. Download the Windows installer.
3. Run it. The installer has many screens with options. For almost all of them, the defaults are fine. Here are the ones that matter:

• "Choosing the default editor used by Git": Change this from Vim to VS Code. Vim is a powerful editor, but it is famously confusing for beginners. If you accidentally end up in Vim and do not know how to exit, press Escape, type :q!, and press Enter.
• "Adjusting the name of the initial branch": Select "Override the default branch name" and type main. The industry has moved from "master" to "main" as the default.
• "Adjusting your PATH environment": Select "Git from the command line and also from 3rd-party software." This makes Git available in PowerShell and VS Code's terminal.

After installation, configure your identity:

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Use the same email you will use for your GitHub account. Git attaches this identity to every change you make, so other people know who wrote what.

Quick test: Open a new terminal in VS Code and type:

git --version

If you see a version number, Git is installed correctly.

Windows gives you three terminal options, and this confuses a lot of beginners. Here is the simple version:

Command Prompt (cmd): The old Windows terminal. It works, but it uses different commands from what you will see in most tutorials (which assume Linux or Mac). Skip it.

PowerShell: The modern Windows terminal. It comes pre-installed. Most commands from tutorials will work in PowerShell. Some Linux-specific commands will not, but for basic development work, PowerShell is perfectly fine. This is what VS Code opens by default on Windows.

WSL (Windows Subsystem for Linux): This runs a real Linux environment inside Windows. It is the most compatible option because every command from every tutorial will work exactly as shown. However, it adds complexity: you are essentially running two operating systems, which means file paths get confusing, and you need to understand which file system you are working in.

Our recommendation: Start with PowerShell. It handles everything you need for your first few months of learning. If you hit a situation where a tool requires Linux (some Docker setups, certain build tools), install WSL then. Not now.

Terminal commands you need today:

cd foldername        # Move into a folder
cd ..                # Move up one folder
ls                   # List files in current folder (PowerShell)
mkdir foldername     # Create a new folder
clear                # Clear the terminal screen

That is it. Five commands. You will learn more over time, but these five cover your needs for the first few weeks. The terminal feels intimidating at first because there is no visual interface. You are typing commands instead of clicking buttons. But every developer uses it daily, and it becomes second nature faster than you expect.

Tip: Install Windows Terminal from the Microsoft Store. It is a better terminal app than the default PowerShell window. It supports tabs, split panes, and better text rendering. It is free and takes two minutes to install.

If you have ever seen the error "X is not recognized as an internal or external command," you have hit a PATH issue. This is the single most common problem Windows beginners face during setup, and it is worth understanding.

What is PATH? PATH is a list of folders that Windows searches when you type a command. When you type node in the terminal, Windows looks through every folder in your PATH for a program called "node." If the folder containing node.exe is not in the PATH, Windows cannot find it, and you get that error.

How to fix it:

1. Press the Windows key and search for "Environment Variables."
2. Click "Edit the system environment variables."
3. Click the "Environment Variables" button at the bottom.
4. In the top section (User variables), find "Path" and double-click it.
5. Click "New" and add the path to the program. Common paths:
   • Node.js: C:\Program Files\nodejs\
   • Git: C:\Program Files\Git\cmd
   • npm global packages: %APPDATA%\npm
6. Click OK on everything and close all terminal windows. The change only takes effect in new terminal sessions.

The most important thing: always restart your terminal after installing something or changing PATH. Most "it does not work" problems are solved by simply closing the terminal and opening a new one. VS Code sometimes caches the old PATH, so if restarting the terminal does not help, close VS Code entirely and reopen it.

Prevention tip: When running installers, always check any option that mentions "Add to PATH" or "Add to system environment variables." This saves you from having to do it manually.

You have installed VS Code, Node.js, and Git. Let us make sure everything works together by creating a small project.

Step 1: Create a project folder.

mkdir ~/projects
cd ~/projects
mkdir my-first-project
cd my-first-project

Step 2: Initialize a Git repository.

git init

This tells Git to start tracking changes in this folder. You should see "Initialized empty Git repository."

Step 3: Open the project in VS Code.

code .

The code . command opens VS Code in the current folder. If this does not work, open VS Code manually, go to File > Open Folder, and select your project folder.

Step 4: Create an HTML file. In VS Code, create a new file called index.html. Type ! and press Tab. VS Code will generate a basic HTML template. Add something between the body tags:

<h1>My first project works!</h1>
<p>If you can see this, your setup is complete.</p>

Step 5: Preview it. Right-click the file in VS Code's file explorer and select "Open with Live Server." Your browser should open and display your heading.

Step 6: Make your first commit.

git add .
git commit -m "Initial commit: my first project"

If all six steps worked, your development environment is ready. You have a code editor, a JavaScript runtime, version control, and a working project. Everything else (databases, deployment tools, testing frameworks) can be added later when you actually need them.

Next, learn the Git basics so you can push this project to GitHub and start building your portfolio. See our guide on Git and GitHub for complete beginners.