Setting Up Git, VS Code, and Live Server on Windows 💻

Setting Up Git, VS Code, and Live Server on Windows 💻

Getting Started with Git, VS Code, and Live Server on Windows

This guide walks you through installing Git, setting up VS Code, and using Live Server to preview an HTML project locally. By the end, you'll have a basic project folder with HTML, CSS, and JavaScript files running on a local development server.

Step 1: Install Git

Git is essential for version control and managing code repositories. Follow these steps to install Git:

  1. Download Git
    • Visit the official Git website.
    • Click Windows and download the latest version.
    • Open the installer and proceed through the installation process.
    • Ensure "Git Bash" and "Git GUI" options are selected.

  1. Verify Installation
    • Open Command Prompt (Win + R, then type cmd and press Enter).
    • Type:

    git --version

    • You should see an output showing the installed Git version.

Step 2: Install Visual Studio Code (VS Code)

  1. Download VS Code
    • Go to VS Code’s official website.
    • Download the Windows installer and run it.
    • During installation, check the box to add "Open with Code" to the right-click menu.

  1. Launch VS Code
    • Open VS Code from the Start Menu or by typing code . in Command Prompt.

Step 3: Create a New Project Folder

Now, let's set up a new project using the terminal.

  1. Open Command Prompt or Git Bash
    • Press Win + R, type cmd, and press Enter.
    • Navigate to the desired location (e.g., Desktop):

    cd Desktop

  1. Create a Project Folder 
    mkdir sampleCode1
cd sampleCode1

  1. Create Starter Files 
    touch index.html styles.css script.js

(If using Command Prompt instead of Git Bash, replace touch with:)

echo. > index.html
echo. > styles.css
echo. > script.js

Step 4: Open the Project in VS Code

  1. Navigate to the Project Folder
    • In Command Prompt or Git Bash, type:
    code .
    • This opens the sampleCode1 project in VS Code.

Step 5: Install and Use Live Server

Live Server allows you to preview your website locally and refreshes automatically on file changes.

  1. Install Live Server Extension

    • In VS Code, go to the Extensions Marketplace (Ctrl + Shift + X).
    • Search for Live Server and click Install.

  2. Start Live Server

    • Open index.html in VS Code.

    • Right-click inside the file and select "Open with Live Server".

    • Your default browser will open http://127.0.0.1:5500/, displaying the page.

Next Steps

  • Modify index.html, styles.css, and script.js to build your project.

  • Learn Git basics (git init, git add, git commit, git push).

  • Explore VS Code extensions for better productivity.

With this setup, you're ready to start coding efficiently!

Credits

  • Git – Open-source version control system.
  • Visual Studio Code – Free code editor by Microsoft.
  • Live Server – A lightweight development server for VS Code.

Published: Feb 2025

← Back to Blog