Setup Development Environment for HTML

 

I would recommend to use Visual Studio Code to learn this tutorial. You can use any IDE of your choice.

 

Step 1: Download and Install Visual Studio Code

Download VS Code

Go to the Visual Studio Code website (https://code.visualstudio.com/).

Click on the download button for your operating system (Windows, macOS, or Linux).

 

Install VS Code

Once the download is complete, open the installer file.

Follow the installation instructions. The default settings work fine, but you can customize the installation options if needed.

 

Step 2: Open Visual Studio Code Editor

After installation, open VS Code from your start menu (Windows), Applications folder (macOS), or the appropriate menu on Linux.

 

Step 3: Install the HTML Extension (Optional but Helpful)

While VS Code already supports HTML out of the box, you can enhance your HTML coding experience with some helpful extensions.

 

1.   Open the Extensions View: Click on the Extensions icon on the left sidebar (it looks like a square with four squares inside, or you can press Ctrl+Shift+X on Windows/Linux or Cmd+Shift+X on macOS).

 

2.   Search for HTML Extensions: In the search bar, type HTML and look for extensions like:

 

·      HTML Snippets: Provides common HTML code snippets.

·      Live Server: A very useful extension that allows you to see your HTML changes in real-time in a browser. This automatically refreshes the browser whenever you save the HTML file.

·      Prettier - Code Formatter: Helps in automatically formatting your HTML code for readability.

 

3.   Install Extensions: Click the Install button next to each extension you want to add.

 

 

Step 4: Create Your First HTML File

 

·      Create a New File: Click on File in the top menu, then select New File. You can also use the shortcut Ctrl+N (Windows/Linux) or Cmd+N (macOS).

·      Save the File as an HTML File:

 

·      Save the file by clicking File > Save As or using the shortcut Ctrl+S (Windows/Linux) or Cmd+S (macOS).

·      Name your file with the .html extension, such as index.html.

 

Step 5: View Your HTML File in a Browser

·      Using Live Server: If you installed the Live Server extension, right-click on the HTML file and select Open with Live Server. This will open your HTML file in your default web browser and start a local server. Now, whenever you save changes in your HTML file, the browser will automatically refresh to show those changes.

Once you click on the option ‘Open with Live Server’ it opens the html page in the browser.

 

One advantage of live server is, whenever you do the changes to html page, these will get reflected immediately.

 

·      Without Live Server: If you didn’t install Live Server, you can still view your HTML file in a browser. Simply double-click on the HTML file in your file explorer or right-click and select Open with [Your Browser].

 

You’ve now set up Visual Studio Code for HTML development! With these steps, you're ready to start coding and exploring HTML. As you become more comfortable, you can explore other extensions and features in VS Code to enhance your development environment.

Previous                                                    Next                                                    Home