So far, you've probably mostly used online editors for coding, which are great for quick tasks. But for real web development, it's essential to set up a local environment on your computer. This allows you to work offline, manage files easily, and use powerful tools.

In this lesson, we'll introduce you to Visual Studio Code (VS Code), a popular code editor, and guide you through creating a simple web page with HTML and CSS to understand file structures.

By the end, you'll have a basic project setup and see how files interact in web development.

VS Code is a free, lightweight code editor from Microsoft that's perfect for web development. It supports HTML, CSS, JavaScript, Python and more, with features like syntax highlighting, auto-completion, and built-in version control. Version control is a system that records changes to files over time, allowing you to track your project's history, collaborate with others, and revert to previous versions if needed. VS Code has integrated support for Git, a popular version control system.

To get started:

1. Go to the official VS Code website: https://code.visualstudio.com/
2. Click the 'Download' button for your operating system (Windows, macOS, or Linux).
3. Once downloaded, run the installer and follow the on-screen instructions. Accept the defaults unless you have a specific reason to change them.
4. After installation, open VS Code to ensure it launches correctly. You'll see a welcome screen.

Web projects consist of multiple files like HTML, CSS, images, and JavaScript. We'll organise them in a folder.

In VS Code:

1. Click 'File' > 'Open Folder' (or use the welcome screen to open a folder).
2. Create a new folder on your computer, e.g., name it 'MyFirstWebPage' in your Documents.
3. Select that folder in VS Code. This sets it as your workspace. If you see a message asking "Do you trust the authors of the files in this folder?", click "Yes, I trust the authors" to proceed.

You should see the folder name in the Explorer pane on the left. This is where you'll add files.

HTML is the structure of your web page. Let's create a basic one.

In VS Code, with your project folder open:

1. Right-click in the Explorer pane and select 'New File'.
2. Name it 'index.html' (this is the standard name for the main page).
3. The file will open in the editor.

Add the following complete HTML code to '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>Welcome to My Web Page</h1>
    <p>This is some sample text.</p>
</body>
</html>

Save the file (Ctrl+S or Cmd+S).