learn.python/browser/index.html at main · travisjneuman/learn.python · GitHub

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
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python in the Browser — All Exercises</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #1a1b26;
  --surface: #24283b;
  --border: #3b4261;
  --text: #c0caf5;
  --text-dim: #565f89;
  --accent: #7aa2f7;
  --green: #9ece6a;
  --yellow: #e0af68;
  --red: #f7768e;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #fff;
}

.subtitle {
  color: var(--text-dim);
  margin-bottom: 2rem;
  font-size: 1rem;
}

h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: #fff;
}

.level-desc {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.exercise-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.exercise-list a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.exercise-list a:hover {
  border-color: var(--accent);
  background: #292e42;
}

.exercise-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.exercise-num.green { background: var(--green); }
.exercise-num.yellow { background: var(--yellow); }
.exercise-num.red { background: var(--red); }

.difficulty-label {
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-left: auto;
  flex-shrink: 0;
}

.exercise-title {
  font-weight: 600;
  font-size: 1rem;
}

.exercise-desc {
  color: var(--text-dim);
  font-size: 0.85rem;
}

.note {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border-left: 3px solid var(--yellow);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.note strong { color: var(--yellow); }

.back-link {
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
}

.back-link:hover { text-decoration: underline; }
</style>
</head>
<body>
<div class="container" role="main">
  <h1>Python in the Browser</h1>
  <p class="subtitle">No installation needed. Run real Python code right here using Pyodide. Pick a level to start.</p>

  <!-- Level 00 -->
  <h2>Level 00 &mdash; Absolute Beginner</h2>
  <p class="level-desc">Follow-along demos: print, variables, loops, functions. No coding challenges — just explore and experiment.</p>
  <ol class="exercise-list" role="navigation" aria-label="Level 00 exercises">
    <li><a href="exercise.html?ex=01">
      <span class="exercise-num" aria-label="Exercise 01, Difficulty: Beginner">01</span>
      <div><div class="exercise-title">First Steps</div>
      <div class="exercise-desc">Math and print statements</div></div>
      <span class="difficulty-label">Beginner</span>
    </a></li>
    <li><a href="exercise.html?ex=02">
      <span class="exercise-num" aria-label="Exercise 02, Difficulty: Beginner">02</span>
      <div><div class="exercise-title">Hello World</div>
      <div class="exercise-desc">Your first print() calls</div></div>
      <span class="difficulty-label">Beginner</span>
    </a></li>
    <li><a href="exercise.html?ex=03">
      <span class="exercise-num" aria-label="Exercise 03, Difficulty: Beginner">03</span>
      <div><div class="exercise-title">Your First Script</div>
      <div class="exercise-desc">Code runs top to bottom</div></div>
      <span class="difficulty-label">Beginner</span>
    </a></li>
    <li><a href="exercise.html?ex=04">
      <span class="exercise-num" aria-label="Exercise 04, Difficulty: Beginner">04</span>
      <div><div class="exercise-title">Variables</div>
      <div class="exercise-desc">Store and reuse values</div></div>
      <span class="difficulty-label">Beginner</span>
    </a></li>
    <li><a href="exercise.html?ex=05">
      <span class="exercise-num" aria-label="Exercise 05, Difficulty: Beginner">05</span>
      <div><div class="exercise-title">Numbers and Math</div>
      <div class="exercise-desc">Arithmetic and order of operations</div></div>
      <span class="difficulty-label">Beginner</span>
    </a></li>
    <li><a href="exercise.html?ex=06">
      <span class="exercise-num" aria-label="Exercise 06, Difficulty: Beginner">06</span>
      <div><div class="exercise-title">Strings and Text</div>
      <div class="exercise-desc">f-strings and string methods</div></div>
      <span class="difficulty-label">Beginner</span>
    </a></li>
    <li><a href="exercise.html?ex=07">
      <span class="exercise-num" aria-label="Exercise 07, Difficulty: Beginner">07</span>
      <div><div class="exercise-title">User Input</div>
      <div class="exercise-desc">Interactive programs with input()</div></div>
      <span class="difficulty-label">Beginner</span>
    </a></li>
    <li><a href="exercise.html?ex=08">
      <span class="exercise-num" aria-label="Exercise 08, Difficulty: Beginner">08</span>
      <div><div class="exercise-title">Making Decisions</div>
      <div class="exercise-desc">if, elif, else</div></div>
      <span class="difficulty-label">Beginner</span>
    </a></li>
    <li><a href="exercise.html?ex=09">
      <span class="exercise-num" aria-label="Exercise 09, Difficulty: Beginner">09</span>
      <div><div class="exercise-title">Lists</div>
      <div class="exercise-desc">Ordered collections</div></div>
      <span class="difficulty-label">Beginner</span>
    </a></li>
    <li><a href="exercise.html?ex=10">
      <span class="exercise-num" aria-label="Exercise 10, Difficulty: Beginner">10</span>
      <div><div class="exercise-title">For Loops</div>
      <div class="exercise-desc">Iterate over items</div></div>
      <span class="difficulty-label">Beginner</span>
    </a></li>
    <li><a href="exercise.html?ex=11">
      <span class="exercise-num" aria-label="Exercise 11, Difficulty: Beginner">11</span>
      <div><div class="exercise-title">While Loops</div>
      <div class="exercise-desc">Repeat until condition met</div></div>
      <span class="difficulty-label">Beginner</span>
    </a></li>
    <li><a href="exercise.html?ex=12">
      <span class="exercise-num" aria-label="Exercise 12, Difficulty: Beginner">12</span>
      <div><div class="exercise-title">Dictionaries</div>
      <div class="exercise-desc">Key-value pairs</div></div>
      <span class="difficulty-label">Beginner</span>
    </a></li>
    <li><a href="exercise.html?ex=13">
      <span class="exercise-num" aria-label="Exercise 13, Difficulty: Beginner">13</span>
      <div><div class="exercise-title">Functions</div>
      <div class="exercise-desc">Reusable code blocks</div></div>
      <span class="difficulty-label">Beginner</span>
    </a></li>
    <li><a href="exercise.html?ex=14">
      <span class="exercise-num" aria-label="Exercise 14, Difficulty: Beginner">14</span>
      <div><div class="exercise-title">Reading Files</div>
      <div class="exercise-desc">Data from files (simulated)</div></div>
      <span class="difficulty-label">Beginner</span>
    </a></li>
    <li><a href="exercise.html?ex=15">
      <span class="exercise-num" aria-label="Exercise 15, Difficulty: Beginner">15</span>
      <div><div class="exercise-title">Putting It Together</div>
      <div class="exercise-desc">Complete mini-program</div></div>
      <span class="difficulty-label">Beginner</span>
    </a></li>
  </ol>

  <!-- Level 0 -->
  <h2>Level 0 &mdash; First Real Projects</h2>
  <p class="level-desc">Write functions, pass tests, and solve problems. Each exercise has a Check button to validate your solution.</p>
  <ol class="exercise-list" role="navigation" aria-label="Level 0 exercises">
    <li><a href="level-0.html?ex=1">
      <span class="exercise-num green" aria-label="Exercise 1, Difficulty: Easy">1</span>
      <div><div class="exercise-title">Hello Lab</div>
      <div class="exercise-desc">Write a greeting function</div></div>
      <span class="difficulty-label">Easy</span>
    </a></li>
    <li><a href="level-0.html?ex=2">
      <span class="exercise-num green" aria-label="Exercise 2, Difficulty: Easy">2</span>
      <div><div class="exercise-title">Calculator</div>
      <div class="exercise-desc">Four arithmetic operations</div></div>
      <span class="difficulty-label">Easy</span>
    </a></li>
    <li><a href="level-0.html?ex=3">
      <span class="exercise-num green" aria-label="Exercise 3, Difficulty: Easy">3</span>
      <div><div class="exercise-title">Temperature Converter</div>
      <div class="exercise-desc">Celsius and Fahrenheit</div></div>
      <span class="difficulty-label">Easy</span>
    </a></li>
    <li><a href="level-0.html?ex=4">
      <span class="exercise-num green" aria-label="Exercise 4, Difficulty: Easy">4</span>
      <div><div class="exercise-title">Yes/No Questionnaire</div>
      <div class="exercise-desc">Count responses by category</div></div>
      <span class="difficulty-label">Easy</span>
    </a></li>
    <li><a href="level-0.html?ex=5">
      <span class="exercise-num green" aria-label="Exercise 5, Difficulty: Easy">5</span>
      <div><div class="exercise-title">Number Classifier</div>
      <div class="exercise-desc">Even/odd, positive/negative</div></div>
      <span class="difficulty-label">Easy</span>
    </a></li>
    <li><a href="level-0.html?ex=6">
      <span class="exercise-num green" aria-label="Exercise 6, Difficulty: Easy">6</span>
      <div><div class="exercise-title">Word Counter</div>
      <div class="exercise-desc">Count word occurrences</div></div>
      <span class="difficulty-label">Easy</span>
    </a></li>
    <li><a href="level-0.html?ex=7">
      <span class="exercise-num green" aria-label="Exercise 7, Difficulty: Easy">7</span>
      <div><div class="exercise-title">Password Generator</div>
      <div class="exercise-desc">Random secure passwords</div></div>
      <span class="difficulty-label">Easy</span>
    </a></li>
    <li><a href="level-0.html?ex=8">
      <span class="exercise-num green" aria-label="Exercise 8, Difficulty: Easy">8</span>
      <div><div class="exercise-title">String Cleaner</div>
      <div class="exercise-desc">Normalize messy text</div></div>
      <span class="difficulty-label">Easy</span>
    </a></li>
  </ol>

  <!-- Level 1 -->
  <h2>Level 1 &mdash; Building Confidence</h2>
  <p class="level-desc">Validation, parsing, and data processing. Functions return structured results.</p>
  <ol class="exercise-list" role="navigation" aria-label="Level 1 exercises">
    <li><a href="level-1.html?ex=1">
      <span class="exercise-num yellow" aria-label="Exercise 1, Difficulty: Medium">1</span>
      <div><div class="exercise-title">Input Validator</div>
      <div class="exercise-desc">Validate email format</div></div>
      <span class="difficulty-label">Medium</span>
    </a></li>
    <li><a href="level-1.html?ex=2">
      <span class="exercise-num yellow" aria-label="Exercise 2, Difficulty: Medium">2</span>
      <div><div class="exercise-title">Password Strength Checker</div>
      <div class="exercise-desc">Classify weak/medium/strong</div></div>
      <span class="difficulty-label">Medium</span>
    </a></li>
    <li><a href="level-1.html?ex=3">
      <span class="exercise-num yellow" aria-label="Exercise 3, Difficulty: Medium">3</span>
      <div><div class="exercise-title">Unit Price Calculator</div>
      <div class="exercise-desc">Find the best deal</div></div>
      <span class="difficulty-label">Medium</span>
    </a></li>
    <li><a href="level-1.html?ex=4">
      <span class="exercise-num yellow" aria-label="Exercise 4, Difficulty: Medium">4</span>
      <div><div class="exercise-title">Log Line Parser</div>
      <div class="exercise-desc">Extract structured data from logs</div></div>
      <span class="difficulty-label">Medium</span>
    </a></li>
    <li><a href="level-1.html?ex=5">
      <span class="exercise-num yellow" aria-label="Exercise 5, Difficulty: Medium">5</span>
      <div><div class="exercise-title">CSV Reader</div>
      <div class="exercise-desc">Parse CSV text into dicts</div></div>
      <span class="difficulty-label">Medium</span>
    </a></li>
    <li><a href="level-1.html?ex=6">
      <span class="exercise-num yellow" aria-label="Exercise 6, Difficulty: Medium">6</span>
      <div><div class="exercise-title">Gradebook Engine</div>
      <div class="exercise-desc">Calculate averages and letter grades</div></div>
      <span class="difficulty-label">Medium</span>
    </a></li>
  </ol>

  <!-- Level 2 -->
  <h2>Level 2 &mdash; Data Structures</h2>
  <p class="level-desc">Nested data, error handling, pipelines, and report generation.</p>
  <ol class="exercise-list" role="navigation" aria-label="Level 2 exercises">
    <li><a href="level-2.html?ex=1">
      <span class="exercise-num red" aria-label="Exercise 1, Difficulty: Challenging">1</span>
      <div><div class="exercise-title">Dictionary Lookup</div>
      <div class="exercise-desc">Safe lookups and search</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
    <li><a href="level-2.html?ex=2">
      <span class="exercise-num red" aria-label="Exercise 2, Difficulty: Challenging">2</span>
      <div><div class="exercise-title">Data Flattener</div>
      <div class="exercise-desc">Flatten nested structures</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
    <li><a href="level-2.html?ex=3">
      <span class="exercise-num red" aria-label="Exercise 3, Difficulty: Challenging">3</span>
      <div><div class="exercise-title">Data Cleaning Pipeline</div>
      <div class="exercise-desc">Strip, convert, filter records</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
    <li><a href="level-2.html?ex=4">
      <span class="exercise-num red" aria-label="Exercise 4, Difficulty: Challenging">4</span>
      <div><div class="exercise-title">Error-Safe Divider</div>
      <div class="exercise-desc">Graceful error handling</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
    <li><a href="level-2.html?ex=5">
      <span class="exercise-num red" aria-label="Exercise 5, Difficulty: Challenging">5</span>
      <div><div class="exercise-title">Text Report Generator</div>
      <div class="exercise-desc">Formatted text output</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
  </ol>

  <!-- Level 3 -->
  <h2>Level 3 &mdash; Packages and Testing</h2>
  <p class="level-desc">File paths with pathlib, module systems, and writing your own tests.</p>
  <ol class="exercise-list" role="navigation" aria-label="Level 3 exercises">
    <li><a href="level-3.html?ex=1">
      <span class="exercise-num red" aria-label="Exercise 1, Difficulty: Challenging">1</span>
      <div><div class="exercise-title">Path Builder with pathlib</div>
      <div class="exercise-desc">Join paths and get extensions</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
    <li><a href="level-3.html?ex=2">
      <span class="exercise-num red" aria-label="Exercise 2, Difficulty: Challenging">2</span>
      <div><div class="exercise-title">Module Simulator</div>
      <div class="exercise-desc">Create and call module namespaces</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
    <li><a href="level-3.html?ex=3">
      <span class="exercise-num red" aria-label="Exercise 3, Difficulty: Challenging">3</span>
      <div><div class="exercise-title">Simple Test Runner</div>
      <div class="exercise-desc">Build a mini test framework</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
    <li><a href="level-3.html?ex=4">
      <span class="exercise-num red" aria-label="Exercise 4, Difficulty: Challenging">4</span>
      <div><div class="exercise-title">Path Manipulation Toolkit</div>
      <div class="exercise-desc">Split, change ext, get parent</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
    <li><a href="level-3.html?ex=5">
      <span class="exercise-num red" aria-label="Exercise 5, Difficulty: Challenging">5</span>
      <div><div class="exercise-title">Package Registry</div>
      <div class="exercise-desc">Register and search packages</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
  </ol>

  <!-- Level 4 -->
  <h2>Level 4 &mdash; Data Pipelines</h2>
  <p class="level-desc">Schema validation, data transformation, nested extraction, and pipeline composition.</p>
  <ol class="exercise-list" role="navigation" aria-label="Level 4 exercises">
    <li><a href="level-4.html?ex=1">
      <span class="exercise-num red" aria-label="Exercise 1, Difficulty: Challenging">1</span>
      <div><div class="exercise-title">Schema Validator</div>
      <div class="exercise-desc">Validate dicts against type schemas</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
    <li><a href="level-4.html?ex=2">
      <span class="exercise-num red" aria-label="Exercise 2, Difficulty: Challenging">2</span>
      <div><div class="exercise-title">Data Transformer</div>
      <div class="exercise-desc">Filter, map, sort pipelines</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
    <li><a href="level-4.html?ex=3">
      <span class="exercise-num red" aria-label="Exercise 3, Difficulty: Challenging">3</span>
      <div><div class="exercise-title">JSON Parser</div>
      <div class="exercise-desc">Extract nested data with dot paths</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
    <li><a href="level-4.html?ex=4">
      <span class="exercise-num red" aria-label="Exercise 4, Difficulty: Challenging">4</span>
      <div><div class="exercise-title">Data Pipeline Builder</div>
      <div class="exercise-desc">Compose load, clean, transform steps</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
    <li><a href="level-4.html?ex=5">
      <span class="exercise-num red" aria-label="Exercise 5, Difficulty: Challenging">5</span>
      <div><div class="exercise-title">Schema Builder</div>
      <div class="exercise-desc">Infer and validate data schemas</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
  </ol>

  <!-- Level 5 -->
  <h2>Level 5 &mdash; Resilience Patterns</h2>
  <p class="level-desc">Retry logic, circuit breakers, scheduling, backoff, and fault-tolerant processing.</p>
  <ol class="exercise-list" role="navigation" aria-label="Level 5 exercises">
    <li><a href="level-5.html?ex=1">
      <span class="exercise-num red" aria-label="Exercise 1, Difficulty: Challenging">1</span>
      <div><div class="exercise-title">Retry with Counter</div>
      <div class="exercise-desc">Retry failing functions N times</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
    <li><a href="level-5.html?ex=2">
      <span class="exercise-num red" aria-label="Exercise 2, Difficulty: Challenging">2</span>
      <div><div class="exercise-title">Circuit Breaker</div>
      <div class="exercise-desc">Stop calling failing services</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
    <li><a href="level-5.html?ex=3">
      <span class="exercise-num red" aria-label="Exercise 3, Difficulty: Challenging">3</span>
      <div><div class="exercise-title">Priority Task Scheduler</div>
      <div class="exercise-desc">Schedule tasks by priority</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
    <li><a href="level-5.html?ex=4">
      <span class="exercise-num red" aria-label="Exercise 4, Difficulty: Challenging">4</span>
      <div><div class="exercise-title">Exponential Backoff</div>
      <div class="exercise-desc">Calculate retry delay timings</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
    <li><a href="level-5.html?ex=5">
      <span class="exercise-num red" aria-label="Exercise 5, Difficulty: Challenging">5</span>
      <div><div class="exercise-title">Fault-Tolerant Processor</div>
      <div class="exercise-desc">Process batches with fallbacks</div></div>
      <span class="difficulty-label">Challenging</span>
    </a></li>
  </ol>

  <div class="note">
    <strong>Note:</strong> These browser exercises use <a href="https://pyodide.org/" style="color:var(--accent)">Pyodide</a> to run real Python in your browser.
    For the full experience (file I/O, pytest, linting), install Python locally using the
    <a href="../03_SETUP_ALL_PLATFORMS.md" style="color:var(--accent)">Setup Guide</a>.
  </div>

  <a class="back-link" href="../README.md">&larr; Back to Curriculum</a>
</div>
</body>
</html>