-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgetting-started.html
More file actions
217 lines (196 loc) · 9.49 KB
/
getting-started.html
File metadata and controls
217 lines (196 loc) · 9.49 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Getting Started with EduStack</title>
<link rel="stylesheet" href="styles.css">
<style>
/* Narrow content width for reading */
.container {
max-width: var(--measure);
}
/* Step number badge */
.step-number {
display: inline-block;
width: 30px;
height: 30px;
background: var(--color-accent);
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
font-weight: bold;
margin-right: var(--space-3);
flex-shrink: 0;
}
</style>
</head>
<body>
<!-- Header -->
<header class="site-header">
<div class="site-header-inner">
<h1>Getting Started with <span class="logo-edu">Edu</span><span class="logo-stack">Stack</span></h1>
</div>
</header>
<!-- Navigation -->
<nav class="site-nav" role="navigation" aria-label="Main navigation">
<a href="index.html">Home</a>
<a href="getting-started.html" aria-current="page">Getting Started</a>
<a href="about.html">About</a>
</nav>
<!-- Main Container -->
<main class="container">
<!-- Introduction -->
<section class="section" aria-labelledby="intro-heading">
<h2 id="intro-heading">Welcome to EduStack!</h2>
<p>This guide will help you set up EduStack in your classroom. The entire setup takes about <strong>15 minutes</strong> and only needs to be done once.</p>
<div class="highlight">
<p><strong>You don't need to know how to code.</strong> EduStack is designed so that you learn each lesson 15 minutes before you teach it.</p>
</div>
</section>
<!-- What You Need -->
<section class="section" aria-labelledby="requirements-heading">
<h2 id="requirements-heading">What You Need</h2>
<ul>
<li>A computer with Git installed (most school IT departments can do this)</li>
<li>A text editor (VS Code recommended — it's free)</li>
<li>A web browser (Chrome, Firefox, Edge, or Safari)</li>
<li>15 minutes to set up before your first class</li>
</ul>
</section>
<!-- Setup Steps -->
<section class="section" aria-labelledby="setup-heading">
<h2 id="setup-heading">Setup (One Time)</h2>
<h3><span class="step-number">1</span>Clone EduStack</h3>
<p>Open a terminal (or command prompt) and run:</p>
<div class="code-block">
<span class="code-prompt">$</span>
<code id="code-clone">git clone https://github.com/Cartooli/edustack.git</code>
<button class="copy-btn" aria-label="Copy clone command" data-target="code-clone">copy</button>
</div>
<p>This downloads EduStack to your computer. It's just a folder with files — no installation needed.</p>
<h3><span class="step-number">2</span>Enter the Directory</h3>
<div class="code-block">
<span class="code-prompt">$</span>
<code id="code-cd">cd edustack</code>
<button class="copy-btn" aria-label="Copy cd command" data-target="code-cd">copy</button>
</div>
<p>This moves you into the EduStack folder.</p>
<h3><span class="step-number">3</span>Run the Setup Script</h3>
<div class="code-block">
<span class="code-prompt">$</span>
<code id="code-setup">./setup.sh</code>
<button class="copy-btn" aria-label="Copy setup command" data-target="code-setup">copy</button>
</div>
<p>This validates your environment. It doesn't install anything — just checks that everything is ready.</p>
<div class="highlight">
<p><strong>That's it!</strong> No <code>npm install</code>. No API keys. No accounts. No admin privileges needed.</p>
</div>
</section>
<!-- First Class -->
<section class="section" aria-labelledby="first-class-heading">
<h2 id="first-class-heading">Your First Class (30 minutes)</h2>
<div class="checklist">
<h3 style="margin-top: 0;">Before Class Checklist:</h3>
<div class="checklist-item">Read the teacher guide for Lesson 1 (5 min): <code>docs/teacher-guides/LESSON-01.md</code></div>
<div class="checklist-item">Open the example file in a browser to see what students will build: <code>examples/html-basics/index.html</code></div>
<div class="checklist-item">(Optional) Try the first 3 steps of Skill-01 yourself</div>
</div>
<h3>During Class:</h3>
<ol>
<li><strong>Open the curriculum hub:</strong> Open <code>index.html</code> in your browser</li>
<li><strong>Select today's lesson:</strong> Use the "Today's Lesson" quick-start to open both the teacher guide and student skill</li>
<li><strong>Students follow the steps:</strong> Each skill is a guided, step-by-step activity</li>
<li><strong>Review together:</strong> Students share what they built on their screens</li>
</ol>
</section>
<!-- Getting Updates -->
<section class="section" aria-labelledby="updates-heading">
<h2 id="updates-heading">Getting Updates</h2>
<p>To get the latest lessons and safety patches:</p>
<div class="code-block">
<span class="code-prompt">$</span>
<code id="code-pull">cd edustack && git pull origin main</code>
<button class="copy-btn" aria-label="Copy pull command" data-target="code-pull">copy</button>
</div>
<p>EduStack follows semantic versioning. Safety patches are released immediately. New lessons are released on a predictable schedule.</p>
</section>
<!-- AI Features (Optional) -->
<section class="section" aria-labelledby="ai-heading">
<h2 id="ai-heading">AI Features (Optional)</h2>
<p>EduStack can optionally integrate with Claude (via Claude Code or the API) to provide students with an AI coding tutor. <strong>This is entirely optional</strong> — all lessons work without AI.</p>
<div class="checklist">
<h3 style="margin-top: 0;">If AI features will be used:</h3>
<div class="checklist-item">Claude Code or API access configured by IT department</div>
<div class="checklist-item">Review <code>docs/SAFETY.md</code> and be comfortable with the safety system</div>
<div class="checklist-item">Set <code>config/teacher-settings.json</code> to <code>"ai_enabled": true</code></div>
</div>
<p><strong>Remember:</strong> You are still the teacher. The AI is a tool, not a replacement. You can disable AI at any time if needed.</p>
</section>
<!-- Troubleshooting -->
<section class="section" aria-labelledby="troubleshooting-heading">
<h2 id="troubleshooting-heading">Troubleshooting</h2>
<ul>
<li><strong>"The page is blank"</strong> → Check if the file was saved. Check for a typo in the filename.</li>
<li><strong>"The colors don't show"</strong> → Check for a missing semicolon in CSS. Most common beginner error.</li>
<li><strong>"Nothing happens when I click"</strong> → Check the browser console (F12) for JavaScript errors.</li>
<li><strong>"The AI isn't responding"</strong> → Check if AI features are enabled in <code>config/teacher-settings.json</code>.</li>
<li><strong>"I can't git pull"</strong> → Ask IT to check network access to GitHub.</li>
</ul>
</section>
<!-- Getting Help -->
<section class="section" aria-labelledby="help-heading">
<h2 id="help-heading">Getting Help</h2>
<ul>
<li><strong>Technical issues:</strong> Contact your IT department or refer to the troubleshooting section in the teacher guides</li>
<li><strong>Pedagogical questions:</strong> Check the teacher guides or open a discussion</li>
<li><strong>Safety concerns:</strong> Follow the incident response process in <code>docs/SAFETY.md</code></li>
</ul>
</section>
<!-- Next Steps -->
<section class="section" aria-labelledby="next-steps-heading">
<h2 id="next-steps-heading">Next Steps</h2>
<p>You're ready to start teaching! Here's what to do next:</p>
<ol>
<li>Open <a href="index.html">the curriculum hub</a> to browse all lessons</li>
<li>Read the teacher guide for Lesson 1</li>
<li>Try the first few steps yourself (optional but recommended)</li>
<li>Plan your first class using the timing guide in the teacher guide</li>
</ol>
<div class="highlight">
<p><strong>You've got this!</strong> You're already doing something amazing by bringing coding into your classroom. EduStack is here to make that easier.</p>
</div>
</section>
</main>
<!-- Footer -->
<footer class="site-footer">
<p>
<a href="index.html">Home</a> |
<a href="about.html">About</a>
</p>
</footer>
<script>
// Copy-to-clipboard for code blocks
document.querySelectorAll(".copy-btn").forEach(function(btn) {
btn.addEventListener("click", function() {
var targetId = btn.getAttribute("data-target");
var codeEl = document.getElementById(targetId);
if (!codeEl) return;
var text = codeEl.textContent;
navigator.clipboard.writeText(text).then(function() {
btn.textContent = "copied!";
btn.classList.add("copied");
setTimeout(function() {
btn.textContent = "copy";
btn.classList.remove("copied");
}, 2000);
}).catch(function() {
// Fallback for browsers without clipboard API
btn.textContent = "copy";
});
});
});
</script>
</body>
</html>