Understanding GitHub Copilot: A Beginner-Friendly Look at Its Key Features in VS Code

Chapter 1: Getting Started with GitHub Copilot in Visual Studio Code

Welcome to your first step in integrating artificial intelligence into your coding workflow! In this chapter, we’ll walk through how to set up GitHub Copilot in Visual Studio Code (VS Code), create your first HTML file, and start leveraging AI to write, correct, and enhance your code.

Setting Up GitHub Copilot

To begin, make sure you have a fresh install of Visual Studio Code. Once you're inside, follow these steps:

  1. Open Extensions Panel
    Navigate to File > Preferences > Extensions (or use Ctrl+Shift+X) to open the Extensions Marketplace.

  2. Install GitHub Copilot
    In the search bar, type GitHub Copilot. You’ll see two related extensions—don’t worry about choosing the correct one. Installing either will get you everything you need.

  3. Authorize GitHub Copilot
    After installation, go to the Copilot panel and click Manage Copilot. This will trigger a GitHub.com login prompt. Authorize Visual Studio Code to access Copilot.

  4. Adjust Important Settings
    Visit github.com/settings/copilot to fine-tune your preferences:

    • Disable data sharing: Uncheck "Allow GitHub to use my code snippets for product improvements."

    • Disable model training: Ensure "Allow GitHub to use my data for training AI models" is also disabled.

    • Optional: You may allow Copilot to match public code in its suggestions—but the above two are the most crucial for privacy.

Creating Your First HTML File

Now that Copilot is active, let’s create a simple webpage.

  1. Create a File
    Click on the Explorer tab and create a new file named index.html.

  2. Write a Simple HTML Page
    Type Hello World and save the file with Ctrl+S.

  3. Run Your HTML File
    Press Ctrl+F5 to run without debugging. A browser window will open displaying your “Hello World” message.

This course isn't about learning to program from scratch, but to introduce how AI can support your development process. Still, we’ll start simple and build up!

Using Copilot Chat

Visual Studio Code now includes Copilot Chat, which gives you an assistant right inside your editor.

  1. Open the Chat
    Use the shortcut Ctrl+Alt+I or click the Copilot sidebar icon and choose Open Chat.

  2. Ask a Question
    With index.html still open, type:

    Is this correct HTML?

    Copilot analyzes your file and responds. In our case, it pointed out that the document was missing basic HTML structure and suggested a valid format including <!DOCTYPE html>, <html>, <head>, and <body> tags.

  3. Apply Suggestions
    Click Apply to index.html, and the correct structure is added to your file. You’ll see green highlights showing what changed. Press Keep to confirm.

Learning Through Context

AI thrives on context—and so should you! Let’s explore how to give Copilot helpful context through comments and inline chat.

  1. Ask for Help with Comments
    Place your cursor in the editor and press Ctrl+I for inline chat. Type:

    /explain How can I add comments in HTML?

    Copilot will respond with a description and syntax:

    <!-- This is a comment -->

  2. Add Comments to Trigger Code Suggestions
    Now try typing:

    <!-- Create a navigation -->

    Hit Tab, and Copilot will generate a full <nav> block with links for Home, About, Services, and Contact.

  3. Refine the Output
    Want to add a logo? Type:

    <!-- Create a logo before the navigation -->

    <img src="logo.png" alt="Logo">

    While this looks fine, remember that logo.png must exist, or you’ll see a broken image icon in your browser.

Creating a Full Web Page

Want to speed things up? Ask Copilot to do the heavy lifting:

  1. Comment Prompt
    Add this comment:

    <!-- Create an entire web page with navigation, all the text, and a footer -->

    Copilot will generate a full page including header, navigation, main content, and footer.

  2. Apply the Code
    Click Apply to index.html, and your file is transformed. You’ll see basic styling included and a structure resembling a real website.

  3. Add Dummy Text
    Select a section and click the ⭐ button. Choose Modify and ask:

    Give me some more dummy text.

    Copilot will insert lorem ipsum or similar placeholder content.

Understanding Copilot Modes

There are multiple ways to interact with Copilot:

  • Sidebar Chat: Great for larger tasks or conversations.

  • Inline Chat: Perfect for quick questions or local code snippets.

  • Star Button Actions: Modify, insert, or accept suggestions directly with a click.

Each method has its strength, and as you progress, you’ll discover which suits your workflow best.

Wrap-Up

In this chapter, you:

  • Installed and configured GitHub Copilot

  • Learned how to protect your code’s privacy

  • Created a basic HTML file

  • Used Copilot’s chat and inline features

  • Generated and applied full-page templates

  • Discovered the power of context-driven development

By starting simple, you’ve laid the groundwork for a smarter, AI-assisted coding journey. In the next chapter, we’ll go deeper into real-time collaboration with AI, style your webpage, and explore responsive design using Copilot.

Connect