mirror of
https://github.com/andwati/copilot-dev-days.git
synced 2026-10-18 02:02:52 +00:00
201 lines
10 KiB
HTML
201 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Google tag (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LSC44NDPLQ"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
gtag('config', 'G-LSC44NDPLQ');
|
|
</script>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>VS Code GitHub Copilot Agent Lab | TypeScript Edition</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<link rel="alternate" hreflang="en" href="https://copilot-dev-days.github.io/agent-lab-typescript/">
|
|
<link rel="alternate" hreflang="pt-BR" href="https://copilot-dev-days.github.io/agent-lab-typescript/pt_BR/">
|
|
<link rel="alternate" hreflang="es" href="https://copilot-dev-days.github.io/agent-lab-typescript/es/">
|
|
<link rel="alternate" hreflang="x-default" href="https://copilot-dev-days.github.io/agent-lab-typescript/">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="stylesheet" href="light-theme.css">
|
|
<script src="theme-toggle.js"></script>
|
|
</head>
|
|
<body>
|
|
<div style="position:fixed;top:1rem;right:1rem;z-index:1000;display:flex;gap:0.5rem;align-items:center;">
|
|
<div class="locale-picker" id="localePicker">
|
|
<button type="button" class="locale-toggle" aria-haspopup="listbox" aria-expanded="false" aria-label="Select language">🌐</button>
|
|
<ul role="listbox" aria-label="Language">
|
|
<li role="option" data-locale="en" aria-selected="true" class="active">🇬🇧 English</li>
|
|
<li role="option" data-locale="es" aria-selected="false">🇪🇸 Español</li>
|
|
<li role="option" data-locale="pt-BR" aria-selected="false">🇧🇷 Português (Brasil)</li>
|
|
</ul>
|
|
</div>
|
|
<button class="theme-toggle" onclick="toggleTheme()">☀️ Light</button>
|
|
</div>
|
|
<div class="container">
|
|
<section class="hero">
|
|
<span class="hero-badge">🚀 TypeScript + Vite + React + Tailwind</span>
|
|
<h1>VS Code GitHub Copilot Agent Lab</h1>
|
|
<p class="hero-subtitle">
|
|
Build a Social Bingo game while mastering VS Code's Agent Mode with GitHub Copilot.
|
|
Learn context engineering, custom agents, and AI-first development workflows.
|
|
</p>
|
|
<div class="hero-cta">
|
|
<a href="step.html?step=00-overview" class="btn btn-primary">🚀 Start Workshop</a>
|
|
<a href="game/" class="btn btn-secondary">🎮 Play Game</a>
|
|
<a href="https://github.com/copilot-dev-days/agent-lab-typescript" class="btn btn-secondary">📦 GitHub Repo</a>
|
|
</div>
|
|
<p class="hero-also">Also available in <a href="https://copilot-dev-days.github.io/agent-lab-dotnet/">.NET</a>, <a href="https://copilot-dev-days.github.io/agent-lab-java/">Java</a>, and <a href="https://copilot-dev-days.github.io/agent-lab-python/">Python</a></p>
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<div class="stat-value">~1hr</div>
|
|
<div class="stat-label">Duration</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">4</div>
|
|
<div class="stat-label">Parts</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">9</div>
|
|
<div class="stat-label">Checkpoints</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="features">
|
|
<h2 class="section-title">What You'll Learn</h2>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🧠</div>
|
|
<h3>Context Engineering</h3>
|
|
<p>Teach AI about your codebase with instructions, making Copilot suggestions more accurate and relevant.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🤖</div>
|
|
<h3>Agentic Primitives</h3>
|
|
<p>Use background agents, cloud agents, and custom workflows to scale your development.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🎨</div>
|
|
<h3>Design-First Development</h3>
|
|
<p>Let AI iterate on UI while you guide the creative vision with specialized design agents.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🧪</div>
|
|
<h3>Test-Driven Development</h3>
|
|
<p>Build reliable features using TDD agents with Red-Green-Refactor workflow.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="workshop">
|
|
<h2 class="section-title">Workshop Parts</h2>
|
|
<div class="parts-list">
|
|
<a href="step.html?step=01-setup" class="part-card">
|
|
<div class="part-number">01</div>
|
|
<div class="part-content">
|
|
<h3>Setup & Context Engineering</h3>
|
|
<p>Clone, configure, and teach the AI about your project</p>
|
|
</div>
|
|
<span class="part-time">15 min</span>
|
|
</a>
|
|
<a href="step.html?step=02-design" class="part-card">
|
|
<div class="part-number">02</div>
|
|
<div class="part-content">
|
|
<h3>Design-First Frontend</h3>
|
|
<p>Redesign the UI with creative themes using Plan Mode</p>
|
|
</div>
|
|
<span class="part-time">15 min</span>
|
|
</a>
|
|
<a href="step.html?step=03-quiz-master" class="part-card">
|
|
<div class="part-number">03</div>
|
|
<div class="part-content">
|
|
<h3>Custom Quiz Master</h3>
|
|
<p>Create themed quiz questions with custom agents</p>
|
|
</div>
|
|
<span class="part-time">10 min</span>
|
|
</a>
|
|
<a href="step.html?step=04-multi-agent" class="part-card">
|
|
<div class="part-number">04</div>
|
|
<div class="part-content">
|
|
<h3>Multi-Agent Development</h3>
|
|
<p>Build new features with TDD and design agents</p>
|
|
</div>
|
|
<span class="part-time">20 min</span>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="prereqs">
|
|
<div class="container">
|
|
<h2 class="section-title">Prerequisites</h2>
|
|
<div class="prereqs-grid">
|
|
<div class="prereq-item">
|
|
<span class="prereq-check">✓</span>
|
|
<span>VS Code v1.107+</span>
|
|
</div>
|
|
<div class="prereq-item">
|
|
<span class="prereq-check">✓</span>
|
|
<span>GitHub Copilot</span>
|
|
</div>
|
|
<div class="prereq-item">
|
|
<span class="prereq-check">✓</span>
|
|
<span>Node.js 22+</span>
|
|
</div>
|
|
<div class="prereq-item">
|
|
<span class="prereq-check">✓</span>
|
|
<span>Git installed</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="container">
|
|
<footer>
|
|
<div class="footer-links">
|
|
<a href="https://github.com/copilot-dev-days/agent-lab-typescript">GitHub Repository</a>
|
|
<a href="https://www.youtube.com/code">VS Code YouTube</a>
|
|
<a href="https://code.visualstudio.com/docs/copilot/overview">Copilot Docs</a>
|
|
<a href="https://github.com/github/awesome-copilot">Awesome Copilot</a>
|
|
</div>
|
|
<p class="footer-credit">Built with 💜 by the VS Code Team</p>
|
|
</footer>
|
|
</div>
|
|
<script>
|
|
(function(){
|
|
var match=location.pathname.match(/\/(pt_BR|es)\//);
|
|
var locale=match?match[1]:'en';
|
|
var picker=document.getElementById('localePicker');
|
|
if(!picker)return;
|
|
var btn=picker.querySelector('.locale-toggle'),list=picker.querySelector('ul');
|
|
list.querySelectorAll('li').forEach(function(li){
|
|
var l=li.dataset.locale==='pt-BR'?'pt_BR':li.dataset.locale;
|
|
if(l===locale){li.classList.add('active');li.setAttribute('aria-selected','true');}
|
|
else{li.classList.remove('active');li.setAttribute('aria-selected','false');}
|
|
});
|
|
function open(){list.style.display='block';btn.setAttribute('aria-expanded','true');}
|
|
function close(){list.style.display='none';btn.setAttribute('aria-expanded','false');}
|
|
btn.addEventListener('click',function(e){e.stopPropagation();list.style.display==='block'?close():open();});
|
|
document.addEventListener('click',close);
|
|
document.addEventListener('keydown',function(e){if(e.key==='Escape')close();});
|
|
list.querySelectorAll('li').forEach(function(li){
|
|
li.addEventListener('click',function(e){
|
|
e.stopPropagation();
|
|
var t=li.dataset.locale==='pt-BR'?'pt_BR':li.dataset.locale;
|
|
if(t===locale){close();return;}
|
|
var p=location.pathname;
|
|
if(locale!=='en')p=p.replace(new RegExp('/'+locale+'/'),'/');
|
|
if(t!=='en'){var base=p.replace(/\/index\.html$/,'/');if(!base.endsWith('/'))base+='/';p=base+t+'/';}
|
|
localStorage.setItem('preferred-locale',t);
|
|
window.location.href=p+location.search;
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|