diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 6c11bef28d..9012151d06 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -114,6 +114,7 @@ export default defineConfig({
sidebar: [
{
label: "Fundamentals",
+ collapsed: true,
items: [
"learning-hub/github-copilot-app",
"learning-hub/working-with-canvas-extensions",
@@ -134,28 +135,38 @@ export default defineConfig({
],
},
{
- label: "Reference",
- items: ["learning-hub/github-copilot-terminology-glossary"],
- },
- {
- label: "Copilot CLI for Beginners",
+ label: "Courses",
+ collapsed: true,
items: [
{
- label: "Overview",
- link: "/learning-hub/cli-for-beginners/",
+ label: "CLI for Beginners",
+ collapsed: true,
+ items: [
+ {
+ label: "Overview",
+ link: "/learning-hub/cli-for-beginners/",
+ },
+ "learning-hub/cli-for-beginners/00-quick-start",
+ "learning-hub/cli-for-beginners/01-setup-and-first-steps",
+ "learning-hub/cli-for-beginners/02-context-and-conversations",
+ "learning-hub/cli-for-beginners/03-development-workflows",
+ "learning-hub/cli-for-beginners/04-agents-and-custom-instructions",
+ "learning-hub/cli-for-beginners/05-skills",
+ "learning-hub/cli-for-beginners/06-mcp-servers",
+ "learning-hub/cli-for-beginners/07-putting-it-all-together",
+ ],
},
- "learning-hub/cli-for-beginners/00-quick-start",
- "learning-hub/cli-for-beginners/01-setup-and-first-steps",
- "learning-hub/cli-for-beginners/02-context-and-conversations",
- "learning-hub/cli-for-beginners/03-development-workflows",
- "learning-hub/cli-for-beginners/04-agents-and-custom-instructions",
- "learning-hub/cli-for-beginners/05-skills",
- "learning-hub/cli-for-beginners/06-mcp-servers",
- "learning-hub/cli-for-beginners/07-putting-it-all-together",
+ // Additional courses slot in here as their content lands:
+ // Advanced CLI (github/awesome-copilot PR 2800) and
+ // Copilot App for Beginners (upcoming). Each is a nested
+ // sub-group like "CLI for Beginners" above. Do not add a
+ // sidebar entry until the referenced markdown files exist —
+ // an unresolved slug fails the build.
],
},
{
- label: "Copilot Workshops",
+ label: "Workshops",
+ collapsed: true,
items: [
{
label: "Overview",
@@ -163,6 +174,7 @@ export default defineConfig({
},
{
label: "VS Code",
+ collapsed: true,
items: [
{
label: "Overview",
@@ -179,6 +191,7 @@ export default defineConfig({
},
{
label: "Copilot CLI",
+ collapsed: true,
items: [
{
label: "Overview",
@@ -197,6 +210,7 @@ export default defineConfig({
},
{
label: "Copilot App",
+ collapsed: true,
items: [
{
label: "Overview",
@@ -215,6 +229,7 @@ export default defineConfig({
},
{
label: "Copilot Cloud Agent",
+ collapsed: true,
items: [
{
label: "Overview",
@@ -231,17 +246,22 @@ export default defineConfig({
],
},
{
- label: "Hands-on",
+ label: "Video content",
+ collapsed: true,
items: [
- {
- label: "Cookbook",
- link: "/learning-hub/cookbook/",
- },
+ "learning-hub/videos/cli-for-beginners",
+ "learning-hub/videos/copilot-app",
],
},
{
- label: "Browse Resources",
+ label: "Additional resources",
+ collapsed: true,
items: [
+ {
+ label: "Cookbook",
+ link: "/learning-hub/cookbook/",
+ },
+ "learning-hub/github-copilot-terminology-glossary",
{ label: "Home", link: "/" },
{ label: "Agents", link: "/agents/" },
{ label: "Instructions", link: "/instructions/" },
diff --git a/website/src/components/Head.astro b/website/src/components/Head.astro
index 53ded830c2..387f2be567 100644
--- a/website/src/components/Head.astro
+++ b/website/src/components/Head.astro
@@ -38,6 +38,7 @@ const contentSecurityPolicy = [
"default-src 'self'",
"base-uri 'self'",
"object-src 'none'",
+ "frame-src https://www.youtube-nocookie.com https://www.youtube.com",
"form-action 'none'",
"script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://analytics.githubassets.com",
"style-src 'self' 'unsafe-inline'",
diff --git a/website/src/content/docs/learning-hub/index.md b/website/src/content/docs/learning-hub/index.md
index 17dac9de69..dd19691420 100644
--- a/website/src/content/docs/learning-hub/index.md
+++ b/website/src/content/docs/learning-hub/index.md
@@ -4,35 +4,24 @@ description: "Curated articles, walkthroughs, and reference material to help you
tableOfContents: false
---
-## Getting Started
+Welcome to the GitHub Copilot Learning Hub. Whether you want to understand the concepts, work through a course, get hands-on in a workshop, watch along, or look something up, the sections below (and the sidebar) map to how you like to learn.
-New to GitHub Copilot? Start here to understand the tools available to you.
-
-**Desktop App**: Explore the [GitHub Copilot app](github-copilot-app/) — a control center for directing multiple agents in parallel. Perfect for agent-native development and parallel work with isolated worktrees.
-
-**Automations**: Start with [Using Automations in the GitHub Copilot app](using-automations-in-copilot-app/) for templates, setup guidance, and real examples.
+## Fundamentals
-**Canvases**: Learn [Working with Canvas Extensions](working-with-canvas-extensions/) to create and evolve interactive canvases with `/create-canvas`.
+New to GitHub Copilot? Start here to understand the tools and concepts you'll build on. Explore the [GitHub Copilot app](github-copilot-app/) — a control center for directing multiple agents in parallel — then learn [What are Agents, Skills, and Instructions](what-are-agents-skills-instructions/) and how to extend them with [Agents and Subagents](agents-and-subagents/), [custom instructions](defining-custom-instructions/), [skills](creating-effective-skills/), [MCP servers](understanding-mcp-servers/), [automations](using-automations-in-copilot-app/), and [canvas extensions](working-with-canvas-extensions/).
-**Terminal**: Looking for a guided path into GitHub Copilot from the terminal? Explore the [Copilot CLI for Beginners](cli-for-beginners/) with a text-based experience or the [YouTube video series](https://www.youtube.com/watch?v=BDxRhhs36ns&list=PL0lo9MOBetEHvO-spzKBAITkkTqv4RvNl).
+## Courses
-**Workshop**: Prefer to learn by building? Work through [Hands-on with GitHub Copilot's agents](copilot-workshops/) — a hands-on workshop with four harnesses (VS Code, Copilot CLI, Copilot app, and cloud agent) built around a shared Tailspin Toys backlog.
+Prefer a guided, self-paced path? Work through a full course end to end. Start with [CLI for Beginners](cli-for-beginners/) — a beginner-friendly path into GitHub Copilot from the terminal.
-## Fundamentals
+## Workshops
-Essential concepts to tailor GitHub Copilot beyond its default experience. Start with
-[What are Agents, Skills, and Instructions](what-are-agents-skills-instructions/)
-and work through the full track to master every customization primitive. For delegation
-and orchestration patterns, continue with [Agents and Subagents](agents-and-subagents/).
+Prefer to learn by building? Work through [Hands-on with GitHub Copilot's agents](copilot-workshops/) — a workshop with four harnesses (VS Code, Copilot CLI, Copilot app, and cloud agent) built around a shared Tailspin Toys backlog.
-## Reference
+## Video content
-Quick-lookup resources to keep handy while you work. Browse the
-[GitHub Copilot Terminology Glossary](github-copilot-terminology-glossary/)
-for definitions of common terms and concepts.
+Rather watch than read? Explore the [GitHub Copilot CLI for beginners](videos/cli-for-beginners/) and [GitHub Copilot app for beginners](videos/copilot-app/) video series on YouTube.
-## Hands-on
+## Additional resources
-Interactive samples and recipes to learn by doing. Jump into the
-[Cookbook](cookbook/) for code samples, recipes,
-and examples you can use right away.
+Keep these handy while you work. Jump into the [Cookbook](cookbook/) for code samples, recipes, and examples you can use right away, or browse the [GitHub Copilot Terminology Glossary](github-copilot-terminology-glossary/) for definitions of common terms and concepts.
diff --git a/website/src/content/docs/learning-hub/videos/cli-for-beginners.md b/website/src/content/docs/learning-hub/videos/cli-for-beginners.md
new file mode 100644
index 0000000000..da9f0e3ddd
--- /dev/null
+++ b/website/src/content/docs/learning-hub/videos/cli-for-beginners.md
@@ -0,0 +1,48 @@
+---
+title: "GitHub Copilot CLI for beginners"
+description: "Watch the beginner-friendly GitHub Copilot CLI video series — a guided tour of AI assistance in your terminal, one episode at a time."
+sidebar:
+ label: GitHub Copilot CLI for beginners
+---
+
+Learn GitHub Copilot CLI by watching. This beginner-friendly series walks you through using AI assistance directly in your terminal — from install and first prompts to slash commands, delegation, MCP, and customization. Play an episode below, or [watch the full playlist on YouTube](https://www.youtube.com/watch?v=BDxRhhs36ns&list=PL0lo9MOBetEHvO-spzKBAITkkTqv4RvNl).
+
+New here? [Install GitHub Copilot CLI](https://docs.github.com/copilot/how-tos/copilot-cli/set-up-copilot-cli/install-copilot-cli) to follow along.
+
+## 1. Getting started with GitHub Copilot CLI
+
+
+
+Install the CLI with npm, authenticate with your GitHub account, and run your first prompts in the terminal.
+
+## 2. Interactive vs non-interactive modes
+
+
+
+Learn the two ways to run Copilot CLI — interactive sessions versus one-off non-interactive commands — and when to reach for each.
+
+## 3. A beginner's guide to slash commands
+
+
+
+Use slash commands to steer the agent — switch models with `/model`, check status, and manage your session.
+
+## 4. Plan, delegate, and review
+
+
+
+Have Copilot plan work and delegate it to the background, opening a draft pull request while you keep working on other tasks.
+
+## 5. How to use MCP servers
+
+
+
+Connect the Model Context Protocol (MCP) to give your agent access to external documentation, databases, and testing tools.
+
+## 6. Using agents, skills, and instructions
+
+
+
+Customize the CLI with instructions, skills, and custom agents so it works the way your project needs.
+
+Looking for a text-based path instead? See the [CLI for Beginners course](/learning-hub/cli-for-beginners/).
diff --git a/website/src/content/docs/learning-hub/videos/copilot-app.md b/website/src/content/docs/learning-hub/videos/copilot-app.md
new file mode 100644
index 0000000000..f3f0b80df7
--- /dev/null
+++ b/website/src/content/docs/learning-hub/videos/copilot-app.md
@@ -0,0 +1,48 @@
+---
+title: "GitHub Copilot app for beginners"
+description: "Watch the beginner-friendly GitHub Copilot app video series — a guided tour of your AI desktop assistant, one episode at a time."
+sidebar:
+ label: GitHub Copilot app for beginners
+---
+
+Meet the GitHub Copilot app — your agent-native desktop home for working on GitHub. This beginner-friendly series covers writing your first prompt, tracking work, automations, running agents in parallel, and reviewing changes in-app. Play an episode below, or [watch the full playlist on YouTube](https://www.youtube.com/watch?v=LsA4vIX_3UY&list=PLNBWjViYXaIY).
+
+New here? [Install the GitHub Copilot app](https://gh.io/app) to follow along.
+
+## 1. Meet the GitHub Copilot app
+
+
+
+Meet the agent-native desktop home for your GitHub work, and see how it differs from linear, isolated AI coding.
+
+## 2. Write your first prompt
+
+
+
+Start your first session, write your first prompt, and add project context in the Copilot app.
+
+## 3. The My work tab: your mission control
+
+
+
+Use the My work tab as mission control to track tasks across repositories from one centralized place.
+
+## 4. Automate recurring developer tasks
+
+
+
+Set up automations to handle recurring chores like dependency updates and pull request triage.
+
+## 5. Run parallel AI agents
+
+
+
+Run multiple agents on the same project at once, using isolated git worktrees to keep their work conflict-free.
+
+## 6. Using the diff, terminal, and browser
+
+
+
+Review agent changes without leaving the app using the built-in diff, terminal, and browser panels.
+
+Want to read more about the app? Start with [The GitHub Copilot app](/learning-hub/github-copilot-app/).
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
index 5a6347ba6c..069f11baae 100644
--- a/website/src/styles/global.css
+++ b/website/src/styles/global.css
@@ -3744,4 +3744,16 @@ header .theme-toggle-container {
.skill-file-select {
flex: 1 1 auto;
}
-}
\ No newline at end of file
+}
+/* Learning Hub video pages: responsive 16:9 YouTube embeds */
+.video-embed {
+ width: 100%;
+ aspect-ratio: 16 / 9;
+ margin: 0.75rem 0 0.5rem;
+}
+.video-embed iframe {
+ width: 100%;
+ height: 100%;
+ border: 0;
+ border-radius: 8px;
+}
diff --git a/website/src/styles/starlight-overrides.css b/website/src/styles/starlight-overrides.css
index 9d59529d24..e64e25e628 100644
--- a/website/src/styles/starlight-overrides.css
+++ b/website/src/styles/starlight-overrides.css
@@ -71,7 +71,8 @@ header.header {
background: var(--sl-color-gray-6) !important;
border-bottom: 1px solid var(--sl-color-gray-5) !important;
z-index: 1000;
- position: relative;
+ position: sticky;
+ top: 0;
}
/* Header inner content for alignment */