Let's Build a Website in 10 Minutes with GitHub Copilot

Bryant Son, GitHub13:00 · May 2024 · 3,331 views
Thumbnail for Let's Build a Website in 10 Minutes with GitHub Copilot Watch on YouTube
TL;DR
  1. 1

    GitHub Copilot works like a programming partner that suggests code based on the file and text around the cursor.

  2. 2

    A GitHub account, a Copilot license, and a supported editor are enough to start using Copilot.

  3. 3

    Bryant Son builds a small HTML website, styles a table with Bootstrap, and adds JavaScript with Copilot in less than 10 minutes.

Summary

Bryant Son gives a short introduction to GitHub Copilot and then demonstrates it in Visual Studio Code. He describes Copilot as an AI code-completion tool that behaves like a programming partner, offering suggestions from the context in a file. He explains the setup: a GitHub account connected to an individual or Enterprise Copilot license, plus a supported editor and its Copilot extension. The demo starts with an empty HTML page. Copilot generates page structure and text from brief prompts, then produces a table for Super Bowl teams. Son also uses Copilot Chat and inline chat to restyle the table with Bootstrap. He finishes by sketching JavaScript that picks a random football winner and connects it to a button. The session is a practical demonstration of accepting, browsing, editing, and rejecting suggestions rather than a detailed discussion of how the model works.

Key ideas
01:17

GitHub Copilot behaves like a programming partner inside the editor

Bryant Son describes GitHub Copilot as an artificial-intelligence code-completion tool that helps developers write code faster. He compares it with pair programming: someone sits beside you, watches what you are doing, and helps when needed. Copilot does this through suggestions in the code editor. The comparison explains the intended workflow clearly. The developer remains in the editor and decides whether each suggestion is useful, rather than handing the whole task away.

01:39

Copilot needs an account, a license, and a supported development environment

Son says users need a GitHub account linked to a Copilot license. The available licenses include individual and Enterprise options, with Enterprise users needing an assigned Copilot seat. He lists Visual Studio, Visual Studio Code, JetBrains editors such as IntelliJ, PyCharm, and PhpStorm, plus Vim and NeoVim through community support. He also mentions community plugins for editors without an official extension, such as Eclipse. The setup depends on the editor, but the basic process is to install the extension, restart the editor, and connect it to GitHub.

06:00

Copilot suggestions depend on the context in the file

The website demo begins with an empty browser page and a new index HTML file. Son explains that Copilot uses context such as the file name, keywords, and text already typed in the file. After he types HTML, it starts suggesting document structure. He adds a description for a simple AI introduction website, accepts suggestions with the Tab key, and lets Copilot complete the body. The first page is basic, but Son creates it in less than a minute with short prompts and accepted completions.

07:27

Comments can describe a larger piece of code for Copilot to generate

Son adds an HTML comment asking Copilot to create a table representing different Super Bowl teams. He explains that comments can provide context just like other keywords in the file. Instead of accepting only the first completion, he opens the suggestions and browses alternative solutions. On a Mac or Windows keyboard, a shortcut opens the available syntax suggestions, allowing him to choose the second option. Reloading the browser shows the generated table.

08:59

Copilot Chat and inline chat can change existing code

The plain table works, but Son wants a more attractive result. In Copilot Chat, he asks for the table to be made prettier using Bootstrap. He then demonstrates inline chat by highlighting code and asking Copilot to refactor it into a Bootstrap-style table. Copilot presents the change in a diff view, where he can accept or discard it. Son then imports Bootstrap and reloads the page. The example shows two ways to modify existing code while keeping the developer in control of the change.

10:26

The same context-based workflow can extend the page with JavaScript

Near the end, Son starts adding JavaScript for a function that randomly selects a football winner and alerts the result. He then creates a button in the page, relying on Copilot to recognize the surrounding context and connect the pieces. He does not finish a polished application, but the example shows how a developer can move from markup to styling and behavior through short instructions and completions. He says the same approach could help continue the work as a Next.js project.

"It's AI, artificial intelligence, part of code completion tool that helps developers to write code faster."01:17
Who should watch
  • You are new to GitHub Copilot and want to understand the account, license, editor, and extension setup.
  • You want a quick demonstration of how prompts, comments, Copilot Chat, and inline chat affect code in Visual Studio Code.
  • You are deciding whether an AI coding assistant fits a workflow that still includes reviewing and accepting changes yourself.