Get Copilot feedback on your code

What are we building and why?

We are learning the same pull request review loop you will use with human teammates, except the first reviewer is GitHub Copilot. You create a practice repo from the grid-toy template, introduce a small intentional bug in script.js, open a pull request, request a Copilot review, commit the suggested fix, and merge.

GitHub's Getting feedback on your code from GitHub Copilot page is entirely browser UI on github.com. The sample is new2code/grid-toy, a small HTML and JavaScript GitHub Pages project that draws a grid of color-changing squares. The live original is at https://new2code.github.io/grid-toy. The teaching bug on line 25 uses .classes.add("black") when the correct DOM API is .classList.

When we practiced this path at ZeroShot Studio, Copilot's review usually appeared within a few minutes and flagged the .classes typo among any other notes. Committing the suggestion fixed the intentional error without leaving the pull request page. The trade-off is quota: Copilot code review on the website is a premium feature. On free Copilot you may still get editor help, but assigning Copilot as a PR reviewer spends paid review quota. Students should check Access GitHub Copilot for free as a student.

Related reading: How to Learn to Debug with GitHub Copilot, How to Set Up Copilot for Learning to Code, and How to Branch, Commit, and Push Code on GitHub. Authority: the GitHub learning page, About GitHub Copilot code review, and Configuring a publishing source for GitHub Pages.

"Getting feedback on your pull request from others is an important part of the software development process."

That line is GitHub's. Our rule of thumb at ZeroShot Studio: open the PR the same way you would for a teammate, request Copilot as a reviewer, and only commit suggestions you understand.

flowchart LR
    Template[Create grid-toy from template] --> Edit[Edit script.js with intentional bug]
    Edit --> PR[Open pull request]
    PR --> Review[Request Copilot review]
    Review --> Suggest[Commit suggested .classList fix]
    Suggest --> Merge[Merge pull request]

What are the required prerequisites?

This exercise is github.com UI. You do not need a local clone, Node.js, or a terminal.

• You should already understand that pull requests show the difference between your branch and the base branch and invite a maintainer (or Copilot) to review before merge.
• Copilot code review on the website affects premium quotas. Read About GitHub Copilot code review if you need the quota details.
• Local tooling is optional afterward if you publish the result with GitHub Pages. It is not required to finish the review exercise.

When we tried this on an account without premium review access, Copilot did not appear as an assignable reviewer. That is a plan gate, not a UI bug. Fix the plan (or use student access) before blaming the Reviewers picker.

How do you implement the step-by-step recipe?

Follow GitHub's five numbered sections. Stay in the browser.

1. Create the practice repository from the template. Open the new repository page pre-filled for the new2code template. Under Owner, select your user account. In Repository name, type grid-toy. Click Create repository.

2. Make the intentional change in script.js. In the new repository file list, click script.js. At the top-right, click the edit control. On line 25, add:

   javascript

   if (Math.random()  **The hard rule:**

Only commit a Copilot suggestion after you understand why .classList is correct and .classes is not. Treating every suggestion as automatic merge fuel teaches the wrong review habit.

How do you verify the deployment works?

Optional next check from GitHub's next steps: publish the repo with GitHub Pages and open your Pages URL to see the grid, including the random black squares after the fix. That publish step is documented in Configuring a publishing source for your GitHub Pages site. It is not required to prove the review loop worked.

What are the common production failure modes?

• Copilot missing from Reviewers: Cause: plan without premium Copilot code review on github.com, or the picker needs a typed search. Fix: type Copilot in Reviewers; confirm your Copilot plan includes website code review; students should check free education access.
• Review never appears: Cause: Copilot is still running, or the PR has no actionable diff. Fix: wait a few minutes and refresh. Confirm line 25 with .classes.add is actually in the pull request files tab.
• Suggestion does not mention .classList: Cause: the intentional bug was edited incorrectly, or Copilot focused on other issues first. Fix: confirm the committed snippet matches GitHub's example; apply any clear .classList fix Copilot did leave; you can still correct the property manually in a follow-up commit.
• Merged before reading the summary: Cause: treating Copilot like an auto-merge bot. Fix: read the summary and each suggestion. Skip suggestions you do not understand.
• Expecting a local terminal step: Cause: confusing this page with the local-development or debug guides. Fix: stay on github.com. This recipe has no git clone and no npm commands.

FAQ

Is Copilot pull request review free? Copilot code review on the GitHub website is a premium feature available with paid Copilot plans. Using it counts against quotas. Students may get premium features free through GitHub Education.

Why introduce a bug on purpose? So Copilot has a clear, teachable finding. .classes is invalid for this DOM use; .classList is correct. The exercise is about the review workflow, not inventing a large feature.

Do I need to publish GitHub Pages to finish? No. Merge after accepting the review is enough for the feedback exercise. Pages is an optional next step so you can see the grid in a browser.

Can I request Copilot and a human on the same PR? Yes. GitHub's point is that assigning Copilot uses the same Reviewers control you will use with colleagues. Add humans the same way when you work on a real team repo.

What if Copilot suggests extra changes beyond .classList? Apply them only when you understand them. The learning page says you can apply additional comments if the changes make sense to you.