Setting Up VSCode for Web Development

Setting Up Visual Studio Code

Visual Studio Code (VSCode) is a popular text editor for web development. To set it up:

  1. Download and install VSCode from the official website.
  2. Open VSCode and customize it to your liking. You can install various extensions to enhance your development experience.

Installing Live Server Extension

The Live Server extension allows you to run a local development server and see changes in real-time in your browser.

  1. Open VSCode and go to the Extensions view by clicking the Extensions icon in the Activity Bar on the side of the window.
  2. Search for "Live Server" and click on the extension by Ritwick Dey.
  3. Click the Install button to add it to VSCode.

Writing and Running Code

Follow these steps to write a simple HTML file and run it using Live Server:

  1. Create a new file in VSCode and name it index.html.
  2. Write the following HTML code in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a simple HTML page served by Live Server.</p>
</body>
</html>
  1. Right-click the index.html file in the VSCode editor and select Open with Live Server.
  2. Your default web browser (e.g., Chrome) will open and display the page. Any changes you make to index.html will be automatically reflected in the browser.