Using GitHub Copilot as a Tutor - Course Guide START v10

Start Here: The Ground Rule

GitHub Copilot is an AI assistant that works inside your code editor and in a browser. It can explain code, find mistakes, answer questions, and ~~write a lot of code for you~~. Here's the important part for this class: you can use it mostly for the first three things, not the last one.

Copilot or other AI is your tutor, not your ghostwriter. Use Copilot or other AI to understand the code you write. Do not use it to avoid writing code.

What I want you to get good at is looking at a problem in HTML, CSS, or JavaScript and figuring out how to solve it. If AI writes the solution, you may get a working page, but you don't know why or how it works, or how to fix it if something is wrong. If you use it to ask questions instead, it can be a pretty good tutor, and you still do the coding.

Six Ways to Use It in This Class

These tutoring approaches work with Copilot or similar coding AIs. None of them requires the AI to write your assignment for you.

Explain this code

Paste in HTML, CSS, or JavaScript you do not understand and ask what each line does. Great for making sense of demo files and starter code.

Find my mistake

Your layout is broken and you have stared at it for 20 minutes. Ask what is wrong instead of what the fix is, and you will learn the pattern.

Review what I wrote

Your code works, but is it good? Ask for feedback on structure, naming, accessibility, and whether a simpler approach exists.

Compare two approaches

Flexbox or Grid? Class or ID? Ask for the tradeoffs so you can make the call yourself and defend it.

Quiz me

Ask it to test you on a topic before a quiz or exam, one question at a time, without giving away the answers up front.

Translate the jargon

Documentation and error messages are written for professionals. Ask for the plain-English version, then go read the real docs.

1. What "Free" Actually Means

Two Free Paths

There are two ways to use Copilot without paying, and it is worth knowing which one you are on.

Copilot Free

Anyone with a personal GitHub account can use Copilot Free. No credit card or student verification is required. It includes a monthly allowance of code completions plus a limited amount of chat and other AI usage. Exact limits and features can change over time.

Copilot Student

Eligible students who verify their current student status through GitHub Education can receive Copilot Student at no cost. It includes unlimited code completions and more included AI usage than Copilot Free. Processing time and exact plan allowances can change.

                        Do not wait on verification. Start with Copilot Free today. Once GitHub approves your student verification, return to your GitHub Education benefits and Copilot settings to activate or confirm Copilot Student. Nothing you did with Copilot Free is lost.
                    

Pro Tip: Plans and limits at GitHub change often. The live numbers are always at github.com/features/copilot/plans.

WHAT YOU GET ON COPILOT FREE

AI usage        Limited monthly allowance
Code completions Monthly allowance
Editors          VS Code, Visual Studio,
                 JetBrains, Xcode, and more
Browser chat     github.com/copilot
Cost             $0, no card required

HOW AI USAGE IS COUNTED

  Chat and other AI features use
  your monthly AI allowance.
  Usage can depend on the model,
  amount of context, and request.

INLINE CODE COMPLETIONS

  Do not use AI credits, but Free
  may limit them on the Free plan.

MAKING FREE USAGE LAST

  Ask focused questions.
  Paste only the relevant code.
  Prefer explanations and hints
  over whole-project requests.

Free vs. Student: What Changes

	Copilot Free	Copilot Student
Who qualifies	Anyone with a GitHub account	Students verified through GitHub Education
What it costs	Nothing, ever	Nothing while you stay enrolled
Chat allowance	Limited monthly AI-credit allowance	Larger included AI-credit allowance
Code completions	Monthly allowance; check current plan limits	Unlimited
How long to get it	Immediate	Processing time varies; activation may be a separate step
Also unlocks	—	Student Developer Pack offers, which change over time

For the tutoring use we are talking about in this class, Copilot Free can be enough if you use it thoughtfully. Copilot Student gives eligible students more flexibility, but chat and advanced AI features still have usage allowances. These specifications can change at any time!

2. Signing Up

Three Steps, About Ten Minutes

You need a GitHub account first. Everything else builds on that.

One thing that trips people up

Sign up with a personal email address, not a school-managed account that the college controls. Then add your Mission College email as a second, verified email on that same account. That way the account stays yours after you graduate, but you can still prove you are a student right now.

Watch out: GitHub may ask for additional proof if it cannot confirm your current student status. Make sure your academic email is verified when applicable and that any document you upload clearly shows your name, school, and current enrollment.

What counts as proof

A verified school-issued email address, when your institution supports it
A dated class schedule showing this term
A current student ID with a visible date
An enrollment verification letter from Admissions

Pro Tip: If your application is not approved, check that your documentation is current, readable, and clearly shows your name, school, and enrollment status. GitHub may also require a verified academic email or additional proof.

SIGNUP CHECKLIST

[ ] 1. Create a GitHub account
       github.com/signup
       Use a personal email.

[ ] 2. Add your school email
       Settings > Emails > Add email
       Verify it from your inbox.

[ ] 3. Apply for GitHub Education
       github.com/settings/education/benefits
       Pick "Student"
       Pick "Mission College"
       Upload proof, submit.

[ ] 4. Check your Copilot status
       github.com/settings/copilot

[ ] 5. Start using it now
       github.com/copilot
       Do not wait for step 3
       to be approved.

WATCH YOUR GITHUB ACCOUNT EMAIL
AND GITHUB NOTIFICATIONS FOR
VERIFICATION UPDATES.

Walk Through: The Three Pages You Will Visit (These links can change)

Create the account

Pick a username you would not mind a future employer seeing. This becomes part of your portfolio URL later.

github.com/signup

Apply for GitHub Education

Choose the student role, select Mission College, and upload your proof of enrollment. Then wait for the email.

github.com/settings/education/benefits

Confirm Copilot is on

Use your Copilot settings or usage information to check your current plan and available usage.

github.com/settings/copilot

Bonus: Student verification also unlocks the Student Developer Pack at education.github.com/pack. The Pack includes student offers for developer tools and services, but the specific offers change over time, so check the live Pack page for what is currently available.

3. Where to Use It

Use Copilot Where You Write Code

For this class, the main place to use Copilot is inside VS Code. That keeps your coding, testing, and tutoring workflow in one place. You do not need to be actively using GitHub repositories for Copilot in VS Code to be useful; you primarily need a GitHub account to sign in to Copilot.

VS Code Copilot Chat — recommended

Inside VS Code, Copilot Chat can use the code you select and relevant editor context, so you can ask focused questions without repeatedly copying code into a browser.

Use it as a tutor: select the code you are confused about, describe what you expected to happen, and ask for an explanation, diagnostic clue, or concept to investigate... not a rewritten file.

Browser chat — useful backup

Copilot is also available in a web browser. Browser chat can be useful when you are away from your normal computer or cannot use the VS Code extension, but it is not the primary workflow for this course. You generally have to paste the relevant code and context yourself.

Recommendation for this course: Work in VS Code and use Copilot Chat alongside your code. Use it intentionally, not constantly. Try solving the problem yourself first. When you are stuck, ask a focused question, understand the concept, then go back to writing the code yourself. That gives you more practice and also makes your monthly AI allowance last longer.

COPILOT CHAT IN VS CODE — PRIMARY
  Install the Copilot extension
  Sign in with your GitHub account
  Work beside your actual code
  Select relevant code when helpful
  Ctrl+Alt+I opens Chat on Windows/Linux
  Control+Command+I opens Chat on Mac
  Best for: tutoring while you code

BROWSER CHAT — BACKUP
  Nothing to install
  Useful away from your normal computer
  Paste relevant code/context yourself
  Best for: occasional backup use

INLINE SUGGESTIONS
  Gray ghost text as you type
  Tab accepts it
  Esc dismisses it
  This is the one to turn off
      while you are learning
      (see section 5)

Set Up the VS Code Workflow

VS Code + Copilot Chat

Install VS Code from code.visualstudio.com
Open the Extensions panel and install GitHub Copilot
Sign in with the GitHub account that has your Copilot access
Open your class project and the file you are working on
Open Copilot Chat and ask a focused question about your code

This is the workflow we will emphasize in class.

Keep Copilot in tutor mode

Use Copilot intentionally rather than constantly
Select only the code relevant to your question when possible
Ask what is wrong, why it happens, or what concept to review
Make the change yourself in the editor
Save, test in the browser, and ask another question only if needed

4. How to Ask, So You Learn Something

The Difference Is the Verb

Here is an easy way to think about prompts: the verb matters. "Write" and "fix" tend to hand you an answer. "Explain," "why," "compare," and "review" are much more likely to help you learn what is going on.

Four patterns worth memorizing

Explain: here is code, tell me what it does and why
Diagnose: here is what I expected, here is what happened, what is causing the gap
Critique: here is my working solution, what would a professional change
Quiz: ask me questions about this topic, one at a time, and do not tell me the answer until I try

                        Add context every time. Say what you are building, what you have tried, and what class this is for. "I am a beginner in a college web design course" genuinely changes the answer you get back.
                    

Pro Tip: When it gives you an answer you do not fully follow, do not move on. Reply with "explain that part again, simpler." That follow-up is where most of the learning happens.

One more tip: If you are unsure about something AI said, check MDN, test it in your browser, or ask me.

COPY THESE. FILL IN THE BLANKS.

EXPLAIN
"I'm a beginner in a college web
design class. Explain what each
line of this CSS does, in plain
English: [paste code]"

DIAGNOSE
"My three divs should sit side by
side but they're stacking. Here's
my CSS and HTML. Don't give me
the fix yet, just tell me what's
causing it: [paste code]"

CRITIQUE
"This works, but I'm learning.
What would you change and why?
[paste code]"

QUIZ
"Quiz me on Flexbox, one
question at a time. Wait for my
answer before telling me if I'm
right."

Same Problem, Two Prompts

Not very useful Fix my layout and give me the CSS.

Better: ask for the idea My cards should sit in a row, but the layout breaks when the browser gets narrow. Here is my HTML and CSS. Don't rewrite it. What should I inspect first, and why?

That's basically the pattern: show the relevant code, describe what you expected and what actually happened, then ask for a clue or explanation before you ask for a solution.

5. Keeping It From Writing Your Code

Turn Off Copilot Autocomplete

As I said earlier, I would like you to turn off autocomplete from Copilot and use VS Code's own suggestions instead. VS Code will still provide useful built-in autocomplete suggestions as you write, but you will stay in control.

You can still use Copilot Chat for explanations, but you will practice typing and structuring your own code. VS Code's built-in suggestions do not use your Copilot AI allowance, so this approach also helps your AI usage last longer.

How to turn it off in VS Code

Open the Copilot status dashboard from the VS Code status bar
Use the available control to turn off code completions
Disable completions globally, or for the current language when that option is available. Exact labels can vary by VS Code and Copilot version.

The goal: I would like you to understand what you are writing so you can explain how it works in your own words.

KEEP                    LOSE

Chat questions          Inline ghost text
Code explanations       Tab-to-accept
Error diagnosis         "Write this file"
Code review             Agent mode
Quizzing yourself       Whole-function
Concept comparisons     completions

TURNING OFF COMPLETIONS
  VS Code status bar
    > Copilot status dashboard
    > Turn off code completions
    > Globally or by language,
      when available

THE LEARNING GOAL
  Write the code yourself.
  Understand what it does.
  Be able to explain how it works
  in your own words.

Where the Line Is

Situation	Fine	Not fine
You do not understand a demo file	Paste it in and ask for a line-by-line explanation	—
Your layout is broken	Describe the symptom and ask what is causing it	Paste the file and ask it to fix and return the whole thing
You are starting an assignment	Ask it to explain the concepts the assignment covers	Ask AI to write your entire project or website
Your code works	Ask for a critique and then make the changes yourself	Ask it to rewrite your file and submit the rewrite
You are studying for an exam	Ask it to quiz you and explain what you got wrong	Anything at all during an actual exam

6. It Will Be Confidently Wrong

Verify Everything

One thing to get used to: Copilot can be wrong and still sound completely sure of itself. So don't treat the answer as the end of the process. Test it.

Where it goes wrong most often in web work

Outdated techniques. It learned from years of old code and may suggest an older technique when a simpler modern layout approach would make more sense.
Invented properties. CSS properties that sound completely plausible and do not exist.
Browser support. It may suggest something brand new that does not work everywhere yet.
Validation errors. Code that renders fine in Chrome but fails the W3C validator and costs you points.

Never submit code you have not run. Open it in the browser, inspect what you actually see, then run it through the validator. Copilot cannot reliably judge what you see in your browser, so you still need to verify that its advice worked.

Pro Tip: When Copilot names a CSS property or JavaScript method you have never seen, look it up on MDN before you use it. Ninety seconds of checking saves you an hour of debugging something that was never real.

THE VERIFY CHECKLIST

1. Does it render?
   Open the file in Chrome.
   Look at it. Actually look.

2. Does the property exist?
   developer.mozilla.org
   Search the property name.

3. Does it validate?
   validator.w3.org  (HTML)
   jigsaw.w3.org/css-validator

4. Is it current?
   If a technique looks unfamiliar,
   check MDN and ask whether
   there is a current approach.

5. Can you explain it?
   If not, it is not yours yet.

The Loop

Ask a
question

→

Type it
yourself

→

Test it

→

Verify it

→

Explain it

                    One privacy note: GitHub may use interactions from individual Copilot accounts to improve AI models unless you opt out in Copilot settings. Do not paste passwords, API keys, grades, student records, private client work, or personal information into Copilot.
                

Quick Reference

Every link from this page, in one place. Again, these links could change at any time.

Create a GitHub account https://github.com/signup

Apply for student verification https://github.com/settings/education/benefits

Check your plan and usage https://github.com/settings/copilot

Current plans and limits https://github.com/features/copilot/plans

Download VS Code https://code.visualstudio.com/

MDN, for checking what is real https://developer.mozilla.org/

HTML validator https://validator.w3.org/

CSS validator https://jigsaw.w3.org/css-validator/

7. Finish With a Live Problem: Use Copilot as a Tutor

The Problem: A Flexbox Card Layout With Several Issues

Finish by solving the starter layout below live. It is intentionally broken in more than one way, so students can see a realistic diagnose → change → test → diagnose again workflow without needing to know CSS Grid yet.

Starting situation

The three cards are supposed to sit side by side on a wide screen and move onto additional rows when the browser gets narrower. Instead, they begin as ordinary block elements, so they stack vertically.

                        Rule for the demonstration: Keep the starter file open in VS Code and use Copilot Chat beside it. Do not ask Copilot to rewrite the file or return corrected CSS. Ask for one diagnostic clue at a time, type each change yourself, save, refresh the browser, and decide what still needs attention.
                    

The three corrections you will discover

Turn the card container into a Flexbox container.
Replace the fixed card width with flexible sizing so the cards can share the row.
Allow the cards to wrap and give them a reasonable minimum width so the layout adapts on smaller screens.

STARTING CSS — INTENTIONALLY BROKEN

.card-row {
    gap: 20px;
}

.demo-card {
    width: 360px;
    margin-bottom: 20px;
}

EXPECTED ON A WIDE SCREEN
  [ Card 1 ] [ Card 2 ] [ Card 3 ]

ACTUAL AT FIRST
  [ Card 1 ]
  [ Card 2 ]
  [ Card 3 ]

YOUR JOB
  Ask for a clue.
  Make ONE correction.
  Test again.
  Diagnose the next issue.

Broken Flexbox Exercise using Copilot as a Tutor

Start here. The cards below use the editable CSS at the bottom of the stylesheet. Work through the steps and make each correction yourself.

Card 1: HTML

HTML gives the page its structure and identifies the content that Flexbox will arrange.

Card 2: CSS

CSS controls presentation, spacing, sizing, and layout behavior.

Card 3: Flexbox

Flexbox arranges the cards in a row and allows them to wrap when space gets tight.

Starter result: The cards stack because the parent is not a Flexbox container yet. The fixed card width and old bottom margin will also need attention as you improve the layout.

Step-by-Step Live Demonstration

Open and test the starter page

Open the page in your browser and look at the three stacked cards. Your goal is to make them sit in a row on a wide screen and move onto additional rows when the browser gets narrower.

Inspect the parent

Notice that the parent has a gap, but the children still behave like ordinary block elements. Do not fix it yet.

Ask Copilot for clue #1

Ask what must be true before Flexbox properties can control the children. Let Copilot explain the concept instead of giving you a finished rule.

Type correction #1

Add display: flex to the parent yourself. Refresh and explain what changed.

Ask Copilot for clue #2

Ask whether the fixed width: 360px is a good fit for flexible cards that should share the available row.

Type correction #2

Remove the fixed width and old bottom margin. Add flex: 1 so the cards can share the available space. Refresh.

Test a narrow window

Resize the browser. The cards keep trying to stay on one line and become too narrow. Ask what Flexbox property allows items to move to another row.

Type correction #3

Add flex-wrap: wrap to the parent and min-width: 220px to the cards. Test wide, medium, and narrow widths.

Close Copilot and explain it

Explain the final CSS without AI: what makes the parent a flex container, how flex: 1 shares space, what wrapping does, and why the minimum width matters.

Prompts to Use During the Demonstration

Do not start here Fix this layout and give me the complete responsive CSS for the cards.

Clue #1 I'm learning Flexbox. I have three cards inside .card-row, but they are still stacking vertically. Don't rewrite my CSS or give me the finished solution. What prerequisite should I check before Flexbox can arrange the children?

Clue #2 I made the parent a flex container, but each card still has width: 360px. I want three cards to share the row on a wide screen. What sizing idea should I investigate? Explain it without rewriting my CSS.

Clue #3 The cards share the row now, but they get too narrow when I shrink the browser. What Flexbox property lets items move onto another row, and how can I keep a card from becoming too narrow? Explain the concepts first.

See the
problem

→

Ask for one
clue

→

Make one
change

→

Test
again

→

Explain
why

                  The important part is that Copilot never supplied the finished page. It helped identify separate concepts. You made each change, observed the result, and used the result to decide what question to ask next.

GitHub Copilot as Your Tutor