2 of 32 lessons

Video Lesson

Lesson Notes

Installing the "Open in Browser" Extension and Creating Your First HTML Page

In this video, we walk through how to install the Open in Browser extension for VS Code and create your very first index.html file using AI assistance (GPT-4.0.1). Follow along with these steps:

Step-by-Step Instructions

Install the Open in Browser Extension
- Open VS Code.
- Go to the Extensions view (Cmd+Shift+X on Mac or Ctrl+Shift+X on Windows).
- Search for "Open in Browser".
- Install the one published by TechER.
Use Ask Mode with GPT-4.0.1
- Make sure you're using Ask Mode with GPT-4.0.1
- Ask it to create a basic index.html file in the root of your project.
- When prompted, allow the file to be created.
View Your HTML in the Browser
- Right-click on the newly created index.html file.
- Select "Open in Default Browser" from the context menu.
- You should now see your very first webpage open in your browser!

You’re all set to start coding

Here is the code for the index.html page if you want to have an exact copy of my code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Project</title>
</head>
<body>
    <h1>Welcome to My Project</h1>
</body>
</html>

AI Assistant

Sign In Required

Setting up VS Code

Creating and Linking Your First JavaScript File in VS Code

Creating Your First HTML Page with VS Code and AI

In this quick tutorial, I walks you through installing the "Open in Browser" extension in VS Code, creating your first index.html file using GPT-4.0.1, and viewing it in your browser. A perfect starting point for beginners learning web development with AI tools like GitHub Copilot.

1m 8s