Home 〉 Other Tutorials 〉 Visual Studio Code Tutorials 〉How to Run HTML, CSS & JavaScript in Visual Studio Code | Step-by-Step

How to Run HTML, CSS & JavaScript in Visual Studio Code | Step-by-Step !

How to Run HTML, CSS & JavaScript in Visual Studio Code | Step-by-Step !

Summary

You now know how to write and run HTML, CSS, and JavaScript in Visual Studio Code. VS Code is fast, lightweight, and perfect for front-end developers. Using this setup with Live Server and basic files, you can start building real websites today!

Introduction

Are you a beginner looking to build websites with HTML, CSS, and JavaScript? Wondering how to use Visual Studio Code (VS Code) to write and run your code? You’re in the right place. VS Code is one of the best code editors for front-end web development and is widely used by developers around the world.

In this beginner-friendly guide, you'll learn how to:

  • Install and set up VS Code
  • Create and save HTML, CSS, and JavaScript files
  • Run your code in the browser
  • Use extensions to speed up your development

Step 1: Install Visual Studio Code

  1. Visit the official website: https://code.visualstudio.com
  2. Download the version for your operating system (Windows, macOS, or Linux).
  3. Install the application by following the setup instructions.

Once installed, open VS Code and you’re ready to start coding!

Step 2: Create Your Project Folder

  1. Create a new folder on your desktop or in your documents (e.g., my-website).
  2. Open VS Code and click on File > Open Folder.
  3. Select the folder you just created.

This will make VS Code your workspace for writing HTML, CSS, and JavaScript code.

Step 3: Create HTML, CSS, and JS Files

  1. In VS Code, go to the Explorer (left sidebar).
  2. Click the New File icon and name it index.html.
  3. Create another file called style.css.
  4. Create one more file called script.js.

Now you have the three main files needed for a basic website.

Step 4: Write Your HTML Code

Open index.html and type this basic HTML structure:


                    <!DOCTYPE html>
                    <html>
                    <head>
                    <title>>My First Website</title>
                    <link rel="stylesheet" href="style.css">
                    </head>
                    <body>

                    <h1>Hello World</h1>
                    <button onclick="showMessage()">Click Me</button>

                    <script src="script.js"></script>
                    </body>
                    </html>

Step 5: Add Some CSS Styling

Open style.css and add this:


                    body {
                    font-family: Arial, sans-serif;
                    text-align: center;
                    margin-top: 50px;
                    }
                    button {
                    padding: 10px 20px;
                    font-size: 16px;
                    }

Step 6: Add JavaScript Functionality

Open script.js and add this simple function:


                    function showMessage() {
                    alert("Button clicked! Welcome to my website.");
                    }

Step 7: Run HTML File in the Browser

Option 1: Open Manually

  1. Right-click on index.html in VS Code’s Explorer panel.
  2. Select Reveal in File Explorer or Show in Finder.
  3. Double-click the file to open it in your browser.

Option 2: Use Live Server Extension

  1. Go to the Extensions panel (Ctrl + Shift + X).
  2. Search for Live Server and install it.
  3. Once installed, right-click index.html and select Open with Live Server.

Your website will open in the browser, and any changes will auto-refresh.

Step 8: Tips to Improve Your Workflow

  • Use Emmet in VS Code to speed up HTML and CSS typing (e.g., type ! and press Tab to create HTML boilerplate).
  • Enable Auto Save from File > Auto Save.
  • Use the integrated terminal to install packages using npm or check errors using console.log in JS.

Related Topics:

Frequently Asked Questions (FAQs)

Do I need to install anything else to run HTML in VS Code?

No, you only need VS Code and a browser. For auto-refresh, install the Live Server extension.

Can I build full websites using only VS Code?

Yes. You can build and test complete websites using HTML, CSS, and JavaScript directly inside VS Code.

Why isn't my CSS or JavaScript working?

Make sure your file names are correct and properly linked in the HTML file using <link> and <script> tags.

Previous Post Next Post