Beginner’s Guide to Setting Up Your First Web Dev Environment (2025)

So, you've courageously worked through some of the best free web development courses and learned the fundamentals of HTML, CSS, and JavaScript. That's a huge accomplishment! But now you're facing the big question: how do you transition from online tutorials to building real projects on your own computer and sharing them with the world?

The answer is by creating a local development environment and learning how to deploy your work. This guide is your complete roadmap. We'll not only walk you through setting up the essential, industry-standard toolkit for 2025, but we'll also show you how to take a project from a folder on your computer to a live, public website all for free.

In a Nutshell

This guide shows a beginner web developer how to set up a professional toolkit and deploy their first website. We will cover the three pillars of a local environment VS Code (code editor), Git/GitHub Desktop (version control), and Node.js (JS runtime) and then walk through deploying a project live on the internet for free using Vercel.

Part 1: The Core Toolkit - Understanding the "Why"

Before we install anything, let's understand what these tools do and the crucial problems they solve.

Your Code Editor (VS Code): More Than a Text File

A code editor is where you write, edit, and manage your project files. While you could use a simple text editor, a dedicated code editor like Visual Studio Code is a powerhouse. It provides syntax highlighting (making code readable with colors), IntelliSense (auto-completing your code), and built-in debugging tools. It's the workbench where you will build everything.

Version Control (Git & GitHub): Your Project's Time Machine

Imagine you're working on a project, and you delete a huge chunk of code, only to realize you needed it an hour later. Or worse, your file gets corrupted. Git is a version control system that solves this. It takes "snapshots" (called commits) of your code every time you tell it to. This creates a complete history of your project, allowing you to roll back to any previous version. It's an infinite undo button and an absolute necessity.

GitHub is a website that hosts your Git projects online. This serves two purposes: it's a secure backup of your code, and it's the primary way to collaborate with others and showcase your work to potential employers. GitHub Desktop is a free, beginner-friendly app that lets you use Git and GitHub with a simple visual interface.

JavaScript Runtime (Node.js & npm): The Engine of Modern Web Dev

Originally, JavaScript could only run in a web browser. Node.js is a program that allows you to run JavaScript directly on your computer. This is essential for modern web development because it powers the entire ecosystem of tools that automate tasks, bundle code for performance, and run local web servers. It comes with npm (Node Package Manager), which is a massive registry of free, open-source code packages that you can easily install and use in your projects.

Part 2: The Setup - Step-by-Step Installation

Let's get your computer set up with these three foundational tools.

1. Installing VS Code & Essential Extensions

1. Go to the official VS Code download page and install the version for your operating system (Windows, Mac, or Linux).
2. Open VS Code and click the Extensions icon (four squares) in the sidebar.
3. Search for and install the following extensions to supercharge your editor:

2. Setting Up Git & GitHub Desktop

1. Go to the official GitHub website and sign up for a free account. This will be your public portfolio.
2. Go to the GitHub Desktop website and download the application.
3. Install and open GitHub Desktop. It will prompt you to log in with the GitHub account you just created. This will automatically configure Git on your computer.

3. Installing Node.js & npm

1. Go to the official Node.js download page.
2. Download the installer for the LTS version. LTS stands for "Long-Term Support" and is the most stable and recommended version for most users.
3. Run the installer, accepting all the default options.
4. To verify that it's installed correctly, open your computer's terminal (search for "Terminal" on Mac or "Command Prompt" on Windows) and type
   Code

   node -v

   You should see a version number like
   Code

   v20.11.0

   Then type
   Code

   npm -v

   to confirm the package manager is also installed.

Part 3: From Code to Commit - Your First Local Project

Now let's put these tools to use by creating and saving a simple project.

1. Create a Project Folder: On your computer (e.g., on your Desktop), create a new folder named
   Code

   my-portfolio-site

   .
2. Open in VS Code: Open VS Code, go to File > Open Folder, and select the
   Code

   my-portfolio-site

   folder.
3. Create Your Files: In the VS Code explorer panel on the left, click the "New File" icon and create two files:
   Code

   index.html

   and
   Code

   style.css

   .
4. Write Some HTML: In
   Code

   index.html

   , type
   Code

   !

   and press Enter to generate the basic HTML boilerplate. Inside the
   Code

   <body>

   tag, add some content:

   html
   <h1>Hello World!</h1>
   <p>This is the first website I've built locally!</p>
   

5. Write Some CSS: In
   Code

   style.css

   , add some simple styles:

   css
   body {
     font-family: sans-serif;
     background-color: #f0f0f0;
     text-align: center;
   }
   h1 {
     color: #333;
   }
   

6. Link Your CSS: Go back to
   Code

   index.html

   and add the link to your stylesheet inside the
   Code

   <head>

   section:
   Code

   <link rel="stylesheet" href="style.css">

7. Go Live: Find the "Go Live" button in the bottom-right status bar of VS Code and click it. Your default web browser should open with your new webpage!
8. Commit Your Work: Now, let's save a snapshot of your project using GitHub Desktop.
   • Open the GitHub Desktop app.
   • Go to File > Add Local Repository and choose your
     Code

     my-portfolio-site

     folder.
   • In the "Changes" tab, you'll see your new files. In the Summary box at the bottom, type a descriptive message like "Create initial HTML and CSS for portfolio".
   • Click the blue "Commit to main" button. You've just saved your first version!

Part 4: Going Live! - Deploying Your Site for Free

A local project is great, but now let's put it on the internet for anyone to see. This process is called deployment. We will use Vercel, a modern platform perfect for beginners.

Step-by-Step Guide: Deploying with Vercel

1. Push to GitHub: First, we need to upload our local project to our online GitHub profile. In GitHub Desktop, click the "Publish repository" button at the top. Keep the name the same and make sure the "Keep this code private" box is unchecked if you want it to be a public portfolio piece. Click Publish.
2. Sign Up for Vercel: Go to Vercel.com and click "Sign Up". Choose the option to "Continue with GitHub".
3. Authorize Vercel: Grant Vercel permission to access your GitHub account. This allows it to see your projects.
4. Import Your Project: Once you're on the Vercel dashboard, click "Add New... Project". Vercel will show a list of your GitHub repositories. Find my-portfolio-site and click the "Import" button next to it.
5. Deploy: You can leave all the settings as they are. Just scroll down and click the "Deploy" button.
6. Celebrate! Wait a few moments while Vercel builds and deploys your site. When it's done, you'll see a screenshot of your site and a public URL like
   Code

   my-portfolio-site-eige24s8w.vercel.app

   You can share this link with anyone!

Best of all, Vercel has Continuous Deployment. Any time you push a new commit to your GitHub repository, Vercel will automatically redeploy your website with the latest changes.

Part 5: What's Next? - Further Learning & Resources

You now have a complete, professional workflow. Here are some resources to help you master these tools.

• VS Code: Watch the official Introductory Videos to learn about powerful features you'll use every day.
• Git & GitHub: Work through the interactive GitHub Skills tutorials to understand version control concepts like branching.
• Node.js & npm: Read the official Introduction to npm to learn how to install and manage packages.
• Web Development Fundamentals: If you need to brush up on the basics, revisit our list of the best free web development courses.