Installing Visual Studio Code

Installing Visual Studio Code (VS Code) is an important step in setting up a development environment for writing and managing code efficiently.

Visual Studio Code is a lightweight and powerful source code editor developed by Microsoft. It supports multiple programming languages and provides features such as syntax highlighting, debugging tools, extensions, and integrated version control.

To install Visual Studio Code, first download the installer from the official Visual Studio Code website. After downloading the file, run the installer and follow the setup instructions to complete the installation.

Step 1 - Download Visual Studio Code (VS Code)

Visit the official Visual Studio Code website to download the latest version of the editor.

Click the link below to open the official download page:

If You Are Using Windows

Click the Download for Windows button on the Visual Studio Code website.

After downloading, the installer file will look similar to this:

Once the download is complete, double-click the file and follow the installation steps to install Visual Studio Code on your computer.

If You Are Using macOS

Click the Download for Mac button on the Visual Studio Code website.

After downloading, the installer file will look similar to this:

Steps to install Visual Studio Code on macOS:

• Extract the downloaded ZIP file using Finder.
• Drag the Visual Studio Code application into the Applications folder.
• Open Visual Studio Code from the Applications folder to start using it.

If You Are Using Linux

Click the Download for Linux button on the Visual Studio Code website.

Depending on your Linux distribution, you will see different installation packages available for download.

Common options include:

After installing the package, you can launch VS Code from the applications menu of your system.

Step 2 - Run the Installer

• Go to the Downloads folder on your computer.
• Locate the downloaded installer file.
• Double-click the file to start the installation process.

After double-clicking the installer, the Visual Studio Code installation window will open.

Step 3 - Accept the License Agreement

During the installation process, you will see the Visual Studio Code license agreement.

Follow these steps:

• Select the option "I accept the agreement".
• Click Next to continue.

Accepting the license agreement allows you to proceed with the installation of Visual Studio Code.

Step 4 - Choose the Installation Location

The installer will ask you to choose the location where Visual Studio Code should be installed.

Default location:

You can keep the default location, or click Browse to select a different folder if you prefer.

After choosing the installation location, click Next to continue.

Step 5 - Select Additional Tasks

This is an important step during the installation process.

You will see several optional tasks that can improve your experience when using Visual Studio Code.

It is recommended to select the following options:

• Create a desktop icon
• Add "Open with Code" action to Windows Explorer file context menu
• Add "Open with Code" action to Windows Explorer directory context menu
• Add to PATH (recommended)

Adding Visual Studio Code to the PATH allows you to open VS Code directly from the terminal or command prompt.

After selecting the options, click Next to continue.

Step 6 - Install VS Code

Now click the Install button to begin the installation process.

The installation process will begin and usually takes about 10-30 seconds to complete.

Once the installation is finished, make sure the option below is selected:

Finally, click Finish. Visual Studio Code will open and you can start using it.

Step 7 - Opening VS Code

When you open Visual Studio Code for the first time, you will see the main editor interface.

On the left side of the window, there is a panel with several important icons:

These tools help you manage files, search within your project, track code changes, run and debug programs, and install extensions.

This interface is known as the Visual Studio Code development environment, where you can write, edit, and manage your code.

Step 8 - Open Your Project Folder

It is recommended to work inside a project folder when developing a website or application.

Follow these steps:

• Click File in the top menu.
• Select Open Folder.
• Choose the folder that contains your website or project files.

Example project folder:

Once the folder is opened, all the files inside it will appear in the Explorer panel on the left side of Visual Studio Code.

Step 9 - Create Your First HTML File

Inside your project folder, create your first HTML file.

Name the file as shown below:

Example:

This file will serve as the main or home page of your website.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<p>Welcome to the HTML Tutorial</p>

</body>
</html>

Step 10 - Use Live Server to Run Your Website

When you install the Live Server extension in Visual Studio Code, it allows you to view your website in the browser instantly while writing code in the VS Code editor.

To start Live Server:

• Open your index.html file in Visual Studio Code.
• Right-click anywhere inside the file.
• Select the option shown below:

Your default web browser will automatically open and display your website. The address will look similar to this:

Live Server automatically refreshes the browser whenever you save changes to your code, making development faster and easier.

This means your website is running locally on your computer.

Only you can view it. The website is not yet published on the internet.

Now, if you change something in your HTML file, for example:

Save the file using Ctrl + S.

After saving, the browser will automatically refresh and display the updated changes.

You do not need to reload the page manually.

Conclusion

Installing Visual Studio Code is an important step for starting web development. It provides a powerful and easy-to-use environment for writing and managing code.

By following the installation steps and setting up a project, it becomes possible to create and test websites efficiently.

With tools like Live Server, changes can be seen instantly, making the development process faster and more convenient.