-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
450 lines (428 loc) · 19.9 KB
/
index.html
File metadata and controls
450 lines (428 loc) · 19.9 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>kaizenkode — Learn to Code by Building Things</title>
<meta name="description" content="kaizenkode is a San Francisco-based education company. We help beginners learn to code by building real projects from day one." />
<style>
/* ── Reset & tokens ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--ink: #2a2018; /* deep walnut */
--mid: #5c4f40; /* warm driftwood */
--faint: #8c7d6c; /* worn cedar */
--rule: #d4cbbe; /* dry bark */
--bg: #f7f4ee; /* rice paper */
--bg-alt: #ede8df; /* worn linen */
--dark: #1a1510; /* darkest heartwood */
--accent: #4a7c65; /* jade */
--accent-dk: #346050; /* deep jade */
--accent-lt: #d6e8df; /* pale jade wash */
--code-bg: #e8e3d8; /* aged paper */
--radius: 8px;
--max: 900px;
--font-body: "Georgia", "Times New Roman", serif;
--font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "Courier New", Courier, monospace;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--bg);
line-height: 1.7;
font-size: 1.0625rem;
}
/* ── Layout helpers ──────────────────────────────────────────── */
.container { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }
section { padding: 5rem 0; }
section:nth-of-type(even) { background: var(--bg-alt); }
/* ── Nav ─────────────────────────────────────────────────────── */
nav {
position: sticky; top: 0; z-index: 100;
background: rgba(247,244,238,0.96);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--rule);
padding: 0.875rem 1.5rem;
display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
font-family: var(--font-ui);
font-weight: 700; font-size: 1.1rem;
color: var(--ink); text-decoration: none;
letter-spacing: -0.02em;
}
.nav-logo span { color: var(--accent); }
nav ul {
list-style: none;
display: flex; gap: 2rem;
}
nav a {
font-family: var(--font-ui);
font-size: 0.875rem; font-weight: 500;
color: var(--mid); text-decoration: none;
transition: color 0.15s;
}
nav a:hover { color: var(--accent); }
/* ── Hero ────────────────────────────────────────────────────── */
#hero {
background: var(--bg);
padding: 7rem 0 5rem;
border-bottom: 1px solid var(--rule);
}
#hero .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.hero-text .kicker {
font-family: var(--font-ui);
font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--accent-dk);
background: var(--accent-lt);
display: inline-block;
padding: 0.25em 0.75em;
border-radius: 999px;
margin-bottom: 1.25rem;
}
.hero-text h1 {
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 1.25rem;
}
.hero-text p {
font-size: 1.125rem;
color: var(--mid);
margin-bottom: 2rem;
max-width: 42ch;
}
.btn {
display: inline-block;
font-family: var(--font-ui);
font-size: 0.9375rem; font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: var(--radius);
text-decoration: none;
transition: background 0.15s, transform 0.1s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
background: var(--accent);
color: #fff;
}
.btn-primary:hover { background: var(--accent-dk); }
.btn-ghost {
background: transparent;
color: var(--mid);
border: 1.5px solid var(--rule);
margin-left: 0.75rem;
}
.btn-ghost:hover { border-color: var(--mid); color: var(--ink); }
.hero-book {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.hero-book img {
width: auto;
max-width: 100%;
max-height: 420px;
border-radius: 8px;
box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
}
.book-info {
text-align: center;
font-family: var(--font-ui);
}
.book-badge {
font-size: 0.75rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--accent);
margin-bottom: 0.375rem;
}
.book-formats {
font-size: 0.8rem;
color: var(--faint);
margin-bottom: 1.25rem;
}
.book-cta {
display: flex; gap: 0.75rem; flex-wrap: wrap;
justify-content: center;
}
.btn-amazon {
background: #f0c040;
color: #1a1510;
font-weight: 700;
}
.btn-amazon:hover {
background: #e0b030;
}
/* ── Principles ───────────────────────────────────────────────── */
#principles h2 {
font-size: 1.875rem;
margin-bottom: 0.75rem;
}
#principles .lead {
font-size: 1.0625rem; color: var(--mid);
max-width: 60ch; margin-bottom: 3rem;
}
.principles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.principle {
border-top: 3px solid var(--accent);
padding-top: 1.25rem;
background: var(--bg);
border-radius: 0 0 var(--radius) var(--radius);
padding: 1.25rem 1.25rem 1.5rem;
}
.principle h3 {
font-size: 1rem;
font-family: var(--font-ui);
font-weight: 700;
margin-bottom: 0.5rem;
}
.principle p { font-size: 0.9375rem; color: var(--mid); }
/* ── Projects ─────────────────────────────────────────────────── */
#projects h2 { font-size: 1.875rem; margin-bottom: 0.75rem; }
#projects .lead {
font-size: 1.0625rem; color: var(--mid);
max-width: 60ch; margin-bottom: 2.5rem;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.project-card {
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 1rem 1.125rem;
font-family: var(--font-ui);
transition: border-color 0.15s, box-shadow 0.15s;
}
.project-card:hover {
border-color: var(--accent);
box-shadow: 0 2px 12px rgba(74,124,101,0.10);
}
.project-card .ch {
font-size: 0.7rem; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--faint); margin-bottom: 0.25rem;
}
.project-card .name {
font-size: 0.9rem; font-weight: 600;
color: var(--ink);
}
.project-card .concept {
font-size: 0.78rem; color: var(--faint); margin-top: 0.25rem;
}
.projects-note {
font-family: var(--font-ui);
font-size: 0.875rem; color: var(--mid);
}
.projects-note a { color: var(--accent); text-decoration: none; }
.projects-note a:hover { text-decoration: underline; }
/* ── About ────────────────────────────────────────────────────── */
#about .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
#about h2 { font-size: 1.875rem; margin-bottom: 1.25rem; }
#about p { color: var(--mid); margin-bottom: 1rem; }
#about p:last-child { margin-bottom: 0; }
.about-aside {
background: var(--bg);
border: 1px solid var(--rule);
border-left: 4px solid var(--accent);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 1.75rem 1.5rem;
font-family: var(--font-ui);
}
.about-aside .word { color: var(--ink); }
.about-aside .word {
font-size: 1.5rem; font-weight: 700;
letter-spacing: -0.02em; margin-bottom: 0.25rem;
}
.about-aside .def {
font-size: 0.85rem; color: var(--mid);
margin-bottom: 1.5rem; line-height: 1.5;
}
/* ── Connect ──────────────────────────────────────────────────── */
#connect {
background: var(--dark);
color: #e8e0d4;
}
#connect h2 { font-size: 1.875rem; margin-bottom: 0.75rem; color: #e8e0d4; }
#connect .lead {
color: #8a8070;
max-width: 55ch;
margin-bottom: 2.5rem;
font-size: 1.0625rem;
}
.connect-links {
display: flex; gap: 1rem; flex-wrap: wrap;
}
.btn-light {
background: rgba(74,124,101,0.15); /* jade tint */
color: #a8c8b8;
border: 1px solid rgba(74,124,101,0.35);
}
.btn-light:hover {
background: rgba(74,124,101,0.28);
color: #c8e0d0;
border-color: rgba(74,124,101,0.55);
}
/* ── Footer ───────────────────────────────────────────────────── */
footer {
background: var(--dark);
border-top: 1px solid rgba(74,124,101,0.15);
padding: 1.5rem;
text-align: center;
font-family: var(--font-ui);
font-size: 0.8rem;
color: #5a5040;
}
footer a { color: #6a8070; text-decoration: none; }
footer a:hover { color: #8aaa98; }
/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 700px) {
#hero .container,
#about .container { grid-template-columns: 1fr; gap: 2rem; }
.principles-grid { grid-template-columns: 1fr; }
nav ul { display: none; }
}
</style>
</head>
<body>
<!-- ── Navigation ─────────────────────────────────────────────────── -->
<nav>
<a class="nav-logo" href="#"><span>kaizen</span>kode</a>
<ul>
<li><a href="#principles">Philosophy</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#about">About</a></li>
<li><a href="https://github.com/kaizenkode" target="_blank" rel="noopener">GitHub</a></li>
</ul>
</nav>
<!-- ── Hero ───────────────────────────────────────────────────────── -->
<section id="hero">
<div class="container">
<div class="hero-text">
<span class="kicker">San Francisco · Est. 2025</span>
<h1>Learn to code by building things that work.</h1>
<p>kaizenkode makes programming education accessible to everyone — through project-first curricula that take you from zero to a running program on page one.</p>
<div>
<a href="#projects" class="btn btn-primary">See the projects</a>
<a href="#about" class="btn btn-ghost">Our philosophy</a>
</div>
</div>
<div class="hero-book">
<img src="cover.jpg" alt="Python Programming Projects for Beginners — book cover" width="928" height="1152" />
<div class="book-info">
<div class="book-badge">Now Available</div>
<div class="book-formats">Kindle · Paperback · Hardcover</div>
<div class="book-cta">
<a href="https://www.amazon.com/dp/B0GXSCR7LZ" class="btn btn-amazon" target="_blank" rel="noopener">Buy on Amazon</a>
<a href="https://github.com/kaizenkode/python-projects-for-beginners" class="btn btn-ghost" target="_blank" rel="noopener">Free companion code</a>
</div>
</div>
</div>
</div>
</section>
<!-- ── Principles ─────────────────────────────────────────────────── -->
<section id="principles">
<div class="container">
<h2>Why most beginner resources fail — and what we do differently.</h2>
<p class="lead">Most programming courses teach syntax first and building second. You learn what a loop is before you've had any reason to want one. We reverse that order.</p>
<div class="principles-grid">
<div class="principle">
<h3>Projects first</h3>
<p>Every chapter opens with a complete, runnable program. You understand the goal before you write the first line — so every concept you learn has an immediate job to do.</p>
</div>
<div class="principle">
<h3>Concepts in context</h3>
<p>New ideas are introduced when the project demands them, not when a curriculum schedule says so. The problem comes before the solution — always.</p>
</div>
<div class="principle">
<h3>Continuous improvement</h3>
<p>Our name is a daily reminder: progress is built from small, deliberate steps. No chapter assumes more than the last one taught. Every reader finishes with something to show.</p>
</div>
</div>
</div>
</section>
<!-- ── Projects ───────────────────────────────────────────────────── -->
<section id="projects">
<div class="container">
<h2>20 programs. One chapter each.</h2>
<p class="lead">Each project in <em>Python Programming Projects for Beginners</em> is complete, runnable, and introduces exactly the concepts you need to build it — nothing more.</p>
<div class="projects-grid">
<div class="project-card"><div class="ch">Ch 03</div><div class="name">Fortune Teller</div><div class="concept">lists · random · input</div></div>
<div class="project-card"><div class="ch">Ch 04</div><div class="name">Number Guessing Game</div><div class="concept">loops · conditionals</div></div>
<div class="project-card"><div class="ch">Ch 05</div><div class="name">Password Generator</div><div class="concept">string module · for loops</div></div>
<div class="project-card"><div class="ch">Ch 06</div><div class="name">Dice Rolling Simulator</div><div class="concept">functions · DRY · PEP 8</div></div>
<div class="project-card"><div class="ch">Ch 07</div><div class="name">Mad Libs Generator</div><div class="concept">f-strings · .strip()</div></div>
<div class="project-card"><div class="ch">Ch 08</div><div class="name">Rock Paper Scissors</div><div class="concept">score tracking · logic</div></div>
<div class="project-card"><div class="ch">Ch 09</div><div class="name">Quiz Game</div><div class="concept">dicts · len() · percentages</div></div>
<div class="project-card"><div class="ch">Ch 10</div><div class="name">Hangman</div><div class="concept">join() · continue</div></div>
<div class="project-card"><div class="ch">Ch 11</div><div class="name">Tic Tac Toe</div><div class="concept">2D lists · predicates</div></div>
<div class="project-card"><div class="ch">Ch 12</div><div class="name">To-Do List Manager</div><div class="concept">file I/O · try/except</div></div>
<div class="project-card"><div class="ch">Ch 13</div><div class="name">Contact Book</div><div class="concept">nested dicts · JSON</div></div>
<div class="project-card"><div class="ch">Ch 14</div><div class="name">Simple Chatbot</div><div class="concept">substring matching</div></div>
<div class="project-card"><div class="ch">Ch 15</div><div class="name">File Organizer</div><div class="concept">os · shutil · automation</div></div>
<div class="project-card"><div class="ch">Ch 16</div><div class="name">Random Story Generator</div><div class="concept">combinatorics</div></div>
<div class="project-card"><div class="ch">Ch 17</div><div class="name">Password Strength Checker</div><div class="concept">string methods · any()</div></div>
<div class="project-card"><div class="ch">Ch 18</div><div class="name">Encryption Tool</div><div class="concept">ord() · chr() · modulo</div></div>
<div class="project-card"><div class="ch">Ch 19</div><div class="name">URL Status Checker</div><div class="concept">requests · HTTP · exceptions</div></div>
<div class="project-card"><div class="ch">Ch 20</div><div class="name">Data Visualization</div><div class="concept">matplotlib · charts</div></div>
<div class="project-card"><div class="ch">Ch 21</div><div class="name">Capstone Project</div><div class="concept">design from scratch</div></div>
</div>
<p class="projects-note">All source code is free on GitHub — <a href="https://github.com/kaizenkode/python-projects-for-beginners" target="_blank" rel="noopener">github.com/kaizenkode/python-projects-for-beginners</a></p>
</div>
</section>
<!-- ── About ───────────────────────────────────────────────────────── -->
<section id="about">
<div class="container">
<div>
<h2>About kaizenkode</h2>
<p>kaizenkode is an educational company based in San Francisco. We create curricula, books, and code resources with one goal: make the knowledge to build software accessible to anyone, regardless of background or prior experience.</p>
<p>We were built on a simple observation — that most people who try to learn programming don't fail because they lack ability. They fail because the materials they find assume the wrong starting point. We start from zero, every time, on purpose.</p>
<p>The name is a daily reminder of how we think about learning: <em>kaizen</em> — continuous improvement through small, deliberate steps. Every chapter builds on the last. Every program you finish is a step toward the next one. Progress compounds.</p>
</div>
<div>
<div class="about-aside">
<div class="word">kai·zen</div>
<div class="def"><em>noun, Japanese</em> — continuous improvement through small, deliberate steps. The belief that progress is built incrementally, not all at once — and that anyone who keeps showing up will get there.</div>
</div>
</div>
</div>
</section>
<!-- ── Connect ─────────────────────────────────────────────────────── -->
<section id="connect">
<div class="container">
<h2>Find us</h2>
<p class="lead">The companion code for every book we publish is free and open on GitHub. Come build something.</p>
<div class="connect-links">
<a href="https://www.amazon.com/dp/B0GXSCR7LZ" class="btn btn-light" target="_blank" rel="noopener">Buy the book on Amazon</a>
<a href="https://github.com/kaizenkode" class="btn btn-light" target="_blank" rel="noopener">GitHub · kaizenkode</a>
<a href="https://github.com/kaizenkode/python-projects-for-beginners" class="btn btn-light" target="_blank" rel="noopener">Python Projects Repo</a>
</div>
</div>
</section>
<!-- ── Footer ─────────────────────────────────────────────────────── -->
<footer>
<p>© 2026 kaizenkode · San Francisco · <a href="https://github.com/kaizenkode">github.com/kaizenkode</a></p>
</footer>
</body>
</html>