How to Install Visual Studio Code for Web Development

What is Visual Studio Code?

Visual Studio Code, usually called VS Code, is a code editor. Instead of writing PHP, HTML, CSS and JavaScript in a basic text editor, you can use VS Code to organize your project files and edit your source code more efficiently.

In the iCode learning environment, WAMP provides the local web server while Visual Studio Code is the tool you use to create and modify the application files.

Step 1: Download Visual Studio Code

1. Open your web browser.
2. Go to the official Visual Studio Code website.
3. Choose the Windows download.
4. Wait for the installer to finish downloading.

Step 2: Run the installer

Open the downloaded VS Code installer and follow the installation wizard.

During installation, useful options include:

• Add Open with Code to the Windows Explorer file context menu.
• Add Open with Code to the Windows Explorer directory context menu.
• Add VS Code to PATH, if the installer offers the option.
• Create a desktop icon if you want quick access.

Complete the installation and start Visual Studio Code.

Step 3: Understand where your web projects are stored

If WAMP was installed using the standard location from Tutorial #1, your local web projects are stored under:

C:\wamp64\www

Each folder inside www can represent a separate local website or application.

Step 4: Create your first project folder

1. Open Windows File Explorer.
2. Go to C:\wamp64\www.
3. Create a new folder named myfirstapp.

Your project location is now:

C:\wamp64\www\myfirstapp

Step 5: Open the project folder in VS Code

1. Open Visual Studio Code.
2. Choose File > Open Folder.
3. Select C:\wamp64\www\myfirstapp.
4. Click Select Folder.

The folder should now appear in the Explorer panel on the left side of VS Code. This is where you will see the files that belong to your application.

Step 6: Create your first PHP file

Create a new file named:

index.php

Put this code inside the file:

<?php
echo "Hello from my first web application!";
?>

Save the file with Ctrl + S.

Step 7: Test your PHP page through WAMP

Make sure WAMP is running. Then open your browser and enter:

http://localhost/myfirstapp/

You should see:

If you can see that message, VS Code and WAMP are now working together correctly. You wrote the source code in VS Code, Apache received the browser request, PHP executed the index.php file, and the result was returned to your browser.

Step 8: Make a change and see the development cycle

Change your PHP code to:

<?php
echo "I am learning web development with iCode.";
?>

Save the file, return to the browser and refresh the page. The new message should appear.

This simple cycle is fundamental to web development: edit the code → save → refresh the browser → check the result.

Common problems

The browser says the page cannot be reached

Check that WAMP is running and that Apache has started successfully. Also confirm that you are opening the page through localhost, not by double-clicking the PHP file in Windows Explorer.

My PHP code appears as text

PHP must be processed by a PHP-enabled web server. Put the project under C:\wamp64\www and access it through http://localhost/myfirstapp/.

I cannot find my project in VS Code

Use File > Open Folder and select the project folder itself, for example C:\wamp64\www\myfirstapp.

What you have achieved

• Installed Visual Studio Code.
• Opened a web-development project folder.
• Created an index.php file.
• Written and saved PHP code.
• Executed the PHP page through WAMP and localhost.
• Learned the basic edit-save-refresh development cycle.