Restructure Learning Hub navigation and add video landing pages

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,35 +135,46 @@ 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",
               link: "/learning-hub/copilot-workshops/",
             },
             {
               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/" },

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'",

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.

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
+
+<div class="video-embed"><iframe src="https://www.youtube-nocookie.com/embed/BDxRhhs36ns?list=PL0lo9MOBetEHvO-spzKBAITkkTqv4RvNl" title="Getting started with GitHub Copilot CLI" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
+
+Install the CLI with npm, authenticate with your GitHub account, and run your first prompts in the terminal.
+
+## 2. Interactive vs non-interactive modes
+
+<div class="video-embed"><iframe src="https://www.youtube-nocookie.com/embed/bdIJkGr2NV0?list=PL0lo9MOBetEHvO-spzKBAITkkTqv4RvNl" title="Interactive vs non-interactive modes" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
+
+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
+
+<div class="video-embed"><iframe src="https://www.youtube-nocookie.com/embed/-Yavis20B4Q?list=PL0lo9MOBetEHvO-spzKBAITkkTqv4RvNl" title="A beginner's guide to Copilot CLI slash commands" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
+
+Use slash commands to steer the agent — switch models with `/model`, check status, and manage your session.
+
+## 4. Plan, delegate, and review
+
+<div class="video-embed"><iframe src="https://www.youtube-nocookie.com/embed/v8dr7QcIiLU?list=PL0lo9MOBetEHvO-spzKBAITkkTqv4RvNl" title="Copilot CLI for beginners: Plan, delegate, and review" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
+
+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
+
+<div class="video-embed"><iframe src="https://www.youtube-nocookie.com/embed/DtQjVIRRszM?list=PL0lo9MOBetEHvO-spzKBAITkkTqv4RvNl" title="How to use MCP servers with GitHub Copilot CLI" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
+
+Connect the Model Context Protocol (MCP) to give your agent access to external documentation, databases, and testing tools.
+
+## 6. Using agents, skills, and instructions
+
+<div class="video-embed"><iframe src="https://www.youtube-nocookie.com/embed/-yKALFS5ewY?list=PL0lo9MOBetEHvO-spzKBAITkkTqv4RvNl" title="How to use agents, skills, and instructions in Copilot CLI" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
+
+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/).

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
+
+<div class="video-embed"><iframe src="https://www.youtube-nocookie.com/embed/LsA4vIX_3UY?list=PLNBWjViYXaIY" title="Meet the GitHub Copilot app" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
+
+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
+
+<div class="video-embed"><iframe src="https://www.youtube-nocookie.com/embed/WrMt6T8yu18?list=PLNBWjViYXaIY" title="Write your first prompt in the GitHub Copilot app" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
+
+Start your first session, write your first prompt, and add project context in the Copilot app.
+
+## 3. The My work tab: your mission control
+
+<div class="video-embed"><iframe src="https://www.youtube-nocookie.com/embed/h9g4umRfgn0?list=PLNBWjViYXaIY" title="The My work tab: your mission control in the GitHub Copilot app" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
+
+Use the My work tab as mission control to track tasks across repositories from one centralized place.
+
+## 4. Automate recurring developer tasks
+
+<div class="video-embed"><iframe src="https://www.youtube-nocookie.com/embed/k73_z4Hv3Ls?list=PLNBWjViYXaIY" title="Automate recurring developer tasks with the GitHub Copilot app" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
+
+Set up automations to handle recurring chores like dependency updates and pull request triage.
+
+## 5. Run parallel AI agents
+
+<div class="video-embed"><iframe src="https://www.youtube-nocookie.com/embed/F1UwPa7lemA?list=PLNBWjViYXaIY" title="How to run parallel AI agents in the GitHub Copilot app" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
+
+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
+
+<div class="video-embed"><iframe src="https://www.youtube-nocookie.com/embed/IyWlcES85Zw?list=PLNBWjViYXaIY" title="GitHub Copilot app for beginners: using the diff, terminal, and browser" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
+
+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/).

website/src/styles/global.css

@@ -3744,4 +3744,16 @@ header .theme-toggle-container {
   .skill-file-select {
     flex: 1 1 auto;
   }
-}
+}
+/* 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;
+}

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 */