From 4ec57eec3aebda84640349f3a272d744804303c7 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 9 Mar 2026 22:23:09 +0000 Subject: [PATCH 1/7] Initial plan From d572cad21308278b6e4111ae409c3887053487fb Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 9 Mar 2026 22:31:20 +0000 Subject: [PATCH 2/7] Add static course website to docs/ with GitHub Pages workflow Co-authored-by: jamesmontemagno <1676321+jamesmontemagno@users.noreply.github.com> --- .github/workflows/deploy-pages.yml | 43 ++ README.md | 3 +- docs/.nojekyll | 0 docs/index.html | 737 ++++++++++++++++++++++++ docs/step.html | 869 +++++++++++++++++++++++++++++ 5 files changed, 1651 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/deploy-pages.yml create mode 100644 docs/.nojekyll create mode 100644 docs/index.html create mode 100644 docs/step.html diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml new file mode 100644 index 0000000..494b963 --- /dev/null +++ b/.github/workflows/deploy-pages.yml @@ -0,0 +1,43 @@ +name: Deploy to GitHub Pages + +on: + push: + branches: + - main + paths: + - 'docs/**' + - '*/README.md' + - '*/images/**' + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: pages + cancel-in-progress: false + +jobs: + deploy: + name: Deploy + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Pages + uses: actions/configure-pages@v5 + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: docs + + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/README.md b/README.md index d04a2d2..f0dd660 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,8 @@ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)  [![Open project in GitHub Codespaces](https://img.shields.io/badge/Codespaces-Open-blue?style=flat-square&logo=github)](https://codespaces.new/github/copilot-cli-for-beginners?hide_repo_select=true&ref=main&quickstart=true)  [![Official Copilot CLI documentation](https://img.shields.io/badge/GitHub-CLI_Documentation-00a3ee?style=flat-square&logo=github)](https://docs.github.com/en/copilot/how-tos/copilot-cli)  -[![Join AI Foundry Discord](https://img.shields.io/badge/Discord-AI_Community-blue?style=flat-square&logo=discord&color=5865f2&logoColor=fff)](https://aka.ms/foundry/discord) +[![Join AI Foundry Discord](https://img.shields.io/badge/Discord-AI_Community-blue?style=flat-square&logo=discord&color=5865f2&logoColor=fff)](https://aka.ms/foundry/discord)  +[![View Course Website](https://img.shields.io/badge/Website-Course_Guide-6e40c9?style=flat-square&logo=github)](https://jamesmontemagno.github.io/copilot-cli-for-beginners/) 🎯 [What You'll Learn](#what-youll-learn)   ✅ [Prerequisites](#prerequisites)   🤖 [Copilot Family](#understanding-the-github-copilot-family)   📚 [Course Structure](#course-structure)   📋 [Command Reference](#-github-copilot-cli-command-reference) diff --git a/docs/.nojekyll b/docs/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..6bfab7b --- /dev/null +++ b/docs/index.html @@ -0,0 +1,737 @@ + + + + + + GitHub Copilot CLI for Beginners + + + + + + + + + + + + +
+
+
✨ terminal-native AI coding assistant
+

GitHub Copilot CLI
for Beginners

+

+ Learn to supercharge your development workflow with AI-powered command-line assistance. + Review code, generate tests, debug issues, and automate workflows — all from your terminal. +

+
+ 🚀 Start the Course + 📦 GitHub Repo +
+
+
+
8
+
Chapters
+
+
+
~2h
+
Duration
+
+
+
0
+
AI Experience Needed
+
+
+
+
+ +
+ + +
+
+

What You'll Learn

+
+
+
🗣️
+

Three Interaction Modes

+

Master inline suggestions, chat-based Q&A, and agentic workflows directly in your terminal.

+
+
+
🔍
+

Context & Conversations

+

Analyze multi-file projects by feeding the right context to get accurate, useful AI responses.

+
+
+
⚡
+

Development Workflows

+

Automate code review, debugging, and test generation using AI from the command line.

+
+
+
🤖
+

Custom AI Agents

+

Build specialized AI assistants tailored to your codebase and coding style.

+
+
+
🛠️
+

Skills & Automation

+

Create reusable skills that load automatically and handle repetitive tasks for you.

+
+
+
🔌
+

MCP Server Integration

+

Connect Copilot CLI to GitHub, databases, and external APIs via the Model Context Protocol.

+
+
+
+
+ + +
+
+

Course Chapters

+
+ +
00
+
+
🚀 Quick Start
+
Install GitHub Copilot CLI, sign in with your GitHub account, and verify everything works.
+
+
+ ~10 min + → +
+ + +
01
+
+
👋 First Steps
+
Watch live demos and master three interaction modes for AI-powered terminal workflows.
+
+
+ ~20 min + → +
+ + +
02
+
+
🔍 Context and Conversations
+
Provide the right context for multi-file project analysis and meaningful AI responses.
+
+
+ ~20 min + → +
+ + +
03
+
+
⚡ Development Workflows
+
Use Copilot CLI for AI-assisted code review, debugging, and automated test generation.
+
+
+ ~25 min + → +
+ + +
04
+
+
🤖 Create Specialized AI Assistants
+
Build custom agents with tailored instructions for your specific development workflows.
+
+
+ ~20 min + → +
+ + +
05
+
+
🛠️ Automate Repetitive Tasks
+
Create skills that automatically load and handle recurring tasks in your workflow.
+
+
+ ~20 min + → +
+ + +
06
+
+
🔌 Connect to GitHub, Databases & APIs
+
Extend Copilot CLI with MCP servers to query real data and integrate external services.
+
+
+ ~20 min + → +
+ + +
07
+
+
🎯 Putting It All Together
+
Combine all skills in a complete feature workflow from concept to tested, reviewed code.
+
+
+ ~30 min + → +
+ +
+
+
+ + +
+
+

Prerequisites

+
+
+ ✓ +
+ GitHub Account + With Copilot access (free plan, paid, or via GitHub Education) +
+
+
+ ✓ +
+ Terminal basics + Comfortable with cd, ls, and running commands +
+
+
+ ✓ +
+ Python (optional) + For running the sample book app used in demos +
+
+
+ ✓ +
+ No AI experience needed + This course starts from the very beginning +
+
+
+
+
+ + + + + + diff --git a/docs/step.html b/docs/step.html new file mode 100644 index 0000000..d86fbce --- /dev/null +++ b/docs/step.html @@ -0,0 +1,869 @@ + + + + + + GitHub Copilot CLI for Beginners + + + + + + + + + +
+
+ + + GitHub Copilot CLI for Beginners + + +
+
+ +
+ + + + +
+
+
+
+ + Loading chapter… +
+
+ +
+
+
+ + + + + From 1b3e1aa92beda6f643cc4688cb3599c2550ac689 Mon Sep 17 00:00:00 2001 From: James Montemagno Date: Mon, 9 Mar 2026 15:34:20 -0700 Subject: [PATCH 3/7] Add 'swa' branch to deploy-pages workflow --- .github/workflows/deploy-pages.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml index 494b963..d08d1d5 100644 --- a/.github/workflows/deploy-pages.yml +++ b/.github/workflows/deploy-pages.yml @@ -4,6 +4,7 @@ on: push: branches: - main + - swa paths: - 'docs/**' - '*/README.md' From 5c9b88a33b216d5c00f0d6044c82daa797ea0b6f Mon Sep 17 00:00:00 2001 From: James Montemagno Date: Mon, 9 Mar 2026 15:35:31 -0700 Subject: [PATCH 4/7] Update deploy-pages.yml --- .github/workflows/deploy-pages.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml index d08d1d5..494b963 100644 --- a/.github/workflows/deploy-pages.yml +++ b/.github/workflows/deploy-pages.yml @@ -4,7 +4,6 @@ on: push: branches: - main - - swa paths: - 'docs/**' - '*/README.md' From cf606b3f5c5de0420e892651ea1e92741cb3f1c7 Mon Sep 17 00:00:00 2001 From: James Montemagno Date: Mon, 9 Mar 2026 15:47:11 -0700 Subject: [PATCH 5/7] Add completion screen and related styles to step.html --- docs/step.html | 429 ++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 403 insertions(+), 26 deletions(-) diff --git a/docs/step.html b/docs/step.html index d86fbce..1943d2c 100644 --- a/docs/step.html +++ b/docs/step.html @@ -19,6 +19,9 @@ --blue: #58a6ff; --green: #3fb950; --orange: #e3b341; + --gold: #f2cc60; + --rose: #ff7aa2; + --teal: #35c2a1; --text: #f0f6fc; --text-muted: #8b949e; --text-secondary: #c9d1d9; @@ -268,6 +271,192 @@ margin: 2rem 0; } + /* ── Completion screen ── */ + .completion-shell { + position: relative; + overflow: hidden; + border: 1px solid rgba(242,204,96,0.18); + border-radius: 24px; + background: + radial-gradient(circle at top left, rgba(242,204,96,0.16), transparent 32%), + radial-gradient(circle at top right, rgba(53,194,161,0.14), transparent 30%), + linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)), + var(--bg-card); + padding: 2rem; + box-shadow: 0 24px 80px rgba(0,0,0,0.28); + } + + .completion-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.45rem 0.875rem; + border-radius: 999px; + border: 1px solid rgba(242,204,96,0.28); + background: rgba(242,204,96,0.1); + color: var(--gold); + font-size: 0.8125rem; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + } + + .completion-title { + margin: 1rem 0 0.75rem; + font-size: clamp(2.25rem, 5vw, 3.5rem); + line-height: 1.05; + font-weight: 700; + color: var(--text); + } + + .completion-lead { + max-width: 640px; + font-size: 1.05rem; + color: var(--text-secondary); + margin-bottom: 1.5rem; + } + + .completion-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 1rem; + margin: 1.75rem 0 2rem; + } + + .completion-card { + background: rgba(13,17,23,0.72); + border: 1px solid var(--border); + border-radius: 16px; + padding: 1rem; + backdrop-filter: blur(10px); + } + + .completion-card strong { + display: block; + margin-bottom: 0.35rem; + color: var(--text); + font-size: 0.95rem; + } + + .completion-card p { + margin: 0; + color: var(--text-muted); + font-size: 0.875rem; + } + + .resource-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 0.875rem; + margin-top: 1.5rem; + } + + .resource-link { + display: block; + text-decoration: none; + color: inherit; + padding: 1rem 1.125rem; + border-radius: 16px; + border: 1px solid var(--border); + background: rgba(13,17,23,0.78); + transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; + } + + .resource-link:hover { + transform: translateY(-2px); + border-color: rgba(53,194,161,0.55); + background: rgba(53,194,161,0.08); + } + + .resource-link strong { + display: block; + color: var(--text); + margin-bottom: 0.25rem; + font-size: 0.95rem; + } + + .resource-link span { + display: block; + color: var(--text-muted); + font-size: 0.85rem; + line-height: 1.5; + } + + .completion-actions { + display: flex; + gap: 0.875rem; + flex-wrap: wrap; + margin-top: 2rem; + } + + .completion-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.8rem 1.2rem; + border-radius: 12px; + border: 1px solid transparent; + text-decoration: none; + font-weight: 600; + font-size: 0.9rem; + transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; + } + + .completion-btn:hover { + transform: translateY(-1px); + } + + .completion-btn-primary { + background: linear-gradient(135deg, var(--gold), var(--rose)); + color: #111; + box-shadow: 0 12px 32px rgba(242,204,96,0.22); + } + + .completion-btn-secondary { + background: transparent; + border-color: var(--border); + color: var(--text); + } + + .completion-btn-secondary:hover { + border-color: var(--teal); + color: var(--teal); + } + + .confetti-layer { + pointer-events: none; + position: fixed; + inset: 0; + overflow: hidden; + z-index: 150; + } + + .confetti-piece { + position: absolute; + top: -10vh; + width: 10px; + height: 18px; + border-radius: 2px; + opacity: 0.9; + animation: confetti-fall linear forwards; + will-change: transform, opacity; + } + + @keyframes confetti-fall { + 0% { + transform: translate3d(0, 0, 0) rotate(0deg); + opacity: 0; + } + 10% { + opacity: 1; + } + 100% { + transform: translate3d(var(--confetti-drift), 115vh, 0) rotate(720deg); + opacity: 0; + } + } + /* ── Markdown Rendering ── */ .markdown h1 { font-size: 2rem; @@ -581,6 +770,11 @@ .nav-footer-center { order: -1; } + + .completion-shell { + padding: 1.25rem; + border-radius: 18px; + } } @@ -629,7 +823,7 @@ + + +
- + GitHub Copilot CLI for Beginners -
@@ -799,23 +829,23 @@ -
+
-
-
+
+
Loading chapter…
-
@@ -1013,6 +1043,11 @@

Resources to keep going

function updateNav(index) { document.querySelectorAll('.chapter-link').forEach((el, i) => { el.classList.toggle('active', i === index); + if (i === index) { + el.setAttribute('aria-current', 'page'); + } else { + el.removeAttribute('aria-current'); + } }); // Scroll active item into view in sidebar const active = document.querySelector('.chapter-link.active'); @@ -1033,12 +1068,18 @@

Resources to keep going

prevBtn.disabled = !hasPrev; nextBtn.disabled = !hasNext; + prevBtn.setAttribute('aria-disabled', String(!hasPrev)); + nextBtn.setAttribute('aria-disabled', String(!hasNext)); prevBtn.textContent = chapter.isComplete ? '← Chapter 07' : '← Prev'; nextBtn.textContent = hasNext && chapters[index + 1].isComplete ? 'Complete →' : 'Next →'; prevFooter.classList.toggle('disabled', !hasPrev); nextFooter.classList.toggle('disabled', !hasNext); + prevFooter.disabled = !hasPrev; + nextFooter.disabled = !hasNext; + prevFooter.setAttribute('aria-disabled', String(!hasPrev)); + nextFooter.setAttribute('aria-disabled', String(!hasNext)); prevFooter.textContent = chapter.isComplete ? '← Chapter 07' : '← Previous'; nextFooter.textContent = hasNext && chapters[index + 1].isComplete ? 'Complete →' : 'Next →'; @@ -1095,7 +1136,9 @@

Resources to keep going

breaks: false, }); - return marked.parse(processed); + return DOMPurify.sanitize(marked.parse(processed), { + USE_PROFILES: { html: true }, + }); } function normalizeRenderedContent(container, chapterId) { @@ -1171,8 +1214,9 @@

Resources to keep going

// Show loading const contentEl = document.getElementById('content'); + contentEl.setAttribute('aria-busy', 'true'); contentEl.innerHTML = ` -
+
Loading chapter…
`; @@ -1184,6 +1228,8 @@

Resources to keep going

if (chapter.isComplete) { contentEl.innerHTML = getCompletionMarkup(); + contentEl.setAttribute('aria-busy', 'false'); + contentEl.focus(); launchConfetti(); return; } @@ -1198,6 +1244,8 @@

Resources to keep going

input.disabled = true; }); normalizeRenderedContent(contentEl, chapter.id); + contentEl.setAttribute('aria-busy', 'false'); + contentEl.focus(); } catch (err) { const errDiv = document.createElement('div'); errDiv.className = 'error-state'; @@ -1225,6 +1273,8 @@

Resources to keep going

errDiv.appendChild(small); contentEl.innerHTML = ''; contentEl.appendChild(errDiv); + contentEl.setAttribute('aria-busy', 'false'); + contentEl.focus(); } }