-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
468 lines (452 loc) · 20.1 KB
/
Copy pathindex.html
File metadata and controls
468 lines (452 loc) · 20.1 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
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Boot Rocks: Indy Review of Boot.dev for Learning Software Engineering
</title>
<meta
name="description"
content="8 Reasons why Boot.dev is the best place to learn software engineering, including Python, Go, TypeScript, Linux, Git, Docker, Kubernetes and more. Their program is fun, effective, and affordable."
/>
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://boot.rocks/" />
<meta
property="og:title"
content="Boot Rocks: Indy Review of Boot.dev for Learning Software Engineering"
/>
<meta
property="og:description"
content="8 Reasons why Boot.dev is the best place to learn software engineering, including Python, Go, TypeScript, Linux, Git, Docker, Kubernetes and more. Their program is fun, effective, and affordable."
/>
<meta property="og:image" content="/OG-social-image.jpg" />
<meta
property="og:image:alt"
content="Boot Rocks: Independent Review of Boot.dev"
/>
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image" content="/OG-social-image.webp" />
<meta
property="og:image:alt"
content="Boot Rocks: Independent Review of Boot.dev"
/>
<meta property="og:image:type" content="image/webp" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Boot Rocks" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://boot.rocks/" />
<meta
name="twitter:title"
content="Boot Rocks: Indy Review of Boot.dev for Learning Software Engineering"
/>
<meta
name="twitter:description"
content="8 Reasons why Boot.dev is the best place to learn software engineering, including Python, Go, TypeScript, Linux, Git, Docker, Kubernetes and more. Their program is fun, effective, and affordable."
/>
<meta name="twitter:image" content="/OG-social-image.jpg" />
<meta
name="twitter:image:alt"
content="Boot Rocks: Independent Review of Boot.dev"
/>
<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=Fredoka:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./styles.css" />
<script
defer
data-domain="boot.rocks"
src="https://plausible.io/js/script.hash.outbound-links.js"
></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@mux/mux-player"></script>
</head>
<body class="container video-page">
<!-- Site Header -->
<header class="site-header">
<div class="header-container">
<div class="title-section">
<a class="site-title" href="/">Boot Rocks</a>
<h1 class="subtitle">Indy dev review of Boot.dev</h1>
</div>
<nav>
<a href="./about.html">About</a>
</nav>
</div>
</header>
<!-- Main Content -->
<div class="main-content">
<!-- Left Column: Video and Content -->
<!-- Video Player Section -->
<div class="video-container">
<mux-player
id="mux-player"
playback-id="WiotNBkpu2om5owi02fZhkaGAoQHlrXU3Nzf3qDHZqp8"
metadata-video-title="Boot.Rocks Review"
accent-color="#d97706"
poster="/thumb.jpg"
default-hidden-captions
></mux-player>
</div>
<div class="mobile-menu">
<div class="mobile-menu-panel">
<button class="mobile-menu-close">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<filter
id="cross-shadow"
x="-20%"
y="-20%"
width="140%"
height="140%"
>
<feGaussianBlur in="SourceAlpha" stdDeviation="1" />
<feOffset dx="1" dy="1" result="offsetblur" />
<feFlood flood-color="rgba(0,0,0,0.5)" />
<feComposite in2="offsetblur" operator="in" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path
d="M2 2L18 18M18 2L2 18"
stroke="white"
stroke-width="3"
stroke-linecap="round"
filter="url(#cross-shadow)"
/>
</svg>
</button>
<ul>
<li data-section="intro">Introduction</li>
<li data-section="trade-school">Complete Trade School</li>
<li data-section="great-deal">Great Deal</li>
<li data-section="fun">Fun</li>
<li data-section="teachers">Great Teachers</li>
<li data-section="media">Rich Media</li>
<li data-section="engineering">Educational Engineering</li>
<li data-section="community">Community</li>
<li data-section="customer-focus">Customer Focus</li>
<li data-section="summary">Summary</li>
</ul>
</div>
</div>
<!-- Content Carousel -->
<div
class="content-carousel loaded opacity-0 transition-opacity duration-300"
>
<a
href="#"
class="mobile-menu-button"
role="button"
aria-expanded="false"
>Menu</a
>
<section id="intro" data-start="0">
<h2>Introduction</h2>
<p>
Hey, Mario here, and I just want to tell you about this fun game 🎲
that teaches programming. It's called
<a href="https://go.boot.rocks/rocks2boot" class="link">Boot.Dev</a
>, and it's not some childish thing 🫤 where you move blocks around
the screen nor fall asleep 😴 watching videos, but rather
interactive exercises with both practical basics and some advanced
courses. Now, they're not paying me to say this, nor do I have a
discount code. I just love their mission and want to help them grow.
Though I can already code in a few languages, I tried them out in
November and quickly bought a membership. Because it's fun! And here
are eight reasons why they rock.
</p>
<div class="link-box">
<span>→</span
><a href="#trade-school" class="link"
>Continue reading how it's a Complete Trade School</a
><span class="emoji" style="transform: translateY(-0.8rem)"
>🏫</span
>
</div>
</section>
<section id="trade-school" data-start="35.7">
<h2>Complete Trade School</h2>
<p>
It's a complete trade school with a roadmap for any skill level. It
covers both theory and applied computer science using practical
in-demand languages. People can dive into learning the basics with
Python 🐍, or jump ahead to over 30 courses covering things like Go,
SQL, Docker, and Kubernetes 🤩. Creating well-rounded developers is
their goal. Like a woodworking class, they keep students challenged
with interactive exercises and projects that apply learning by
doing. With a helpful community and a cute AI wizard bear that'll
give you advice if you feed him salmon 🐟.
</p>
<div class="link-box">
<span>→</span
><a href="#great-deal" class="link"
>Continue reading why Boot.dev is a great deal</a
><span
class="emoji"
style="margin-top: -0.8rem; transform: scaleX(-1)"
>🔥</span
>
</div>
</section>
<section id="great-deal" data-start="70.6">
<h2>Great Deal</h2>
<p>
It truly is. Especially when compared to a university or bootcamp.
Or scattered books and video courses without any interactivity and
no accountability. All their courses are free to read and watch,
with reasonably-priced memberships for the full experience. They got
a
<a class="link" href="https://go.boot.rocks/rocks2YT"
>YouTube channel</a
>
and
<a class="link" href="https://go.boot.rocks/rocks2pod">podcast</a>
that isn't shitty teaser marketing. But rather full courses, short
explainers, and interviews 🎤 with diverse engineers.
</p>
<div class="link-box">
<span>→</span
><a href="#fun" class="link"
>Continue reading how Boot is serious fun</a
><span class="emoji" style="margin-top: -0.8rem">🛝</span>
</div>
</section>
<section id="fun" data-start="98.7">
<h2>It's Fun</h2>
<p>
If learning isn't fun, people will zone out 😴 or lose motivation.
Their game-like experience is not a gimmicky add-on, but rather
purposely woven in 🧵. The mechanics and achievements keep people
active, and the fantasy aspect with Boots the bear 🐻 and game items
like potions 🧪, armor 🛡️, and frozen flames 🧊🔥 make it memorable.
Importantly, this does not hold people back who just want to learn.
As the founder once pointed out:
</p>
<p style="padding-left: 30px; color: #ffcc6d; font-size: 150%">
<i>
The game system has been a constant, ship a feature that sounds
reasonable. Watch how people actually use it, and then adjust it
to encourage good learning habits as opposed to bad ones.</i
>
</p>
<p>
They sprinkle humor 😆 here and there to lighten things up, like
pop-culture Easter eggs 🥚 in code examples. Or making fun at
popular developer opinions while giving practical advice.
</p>
<div class="link-box">
<span>→</span
><a href="#teachers" class="link"
>Continue reading how their teachers are awesome</a
><span class="emoji" style="margin-top: -1rem">💎</span>
</div>
</section>
<section id="teachers" data-start="148.3">
<h2>Great Teachers</h2>
<p>
Not only are they experienced developers who teach with clarity and
a steady pace, they apply the beginner's mindset 🌿 and guide you
through a course combining first principles and clear direction. You
can tell their love ❤️ for the topics are genuine because when they
happen to be on camera, it never feels like a pretentious script.
They naturally adjust their tone to be excited or serious, and make
the material come alive 🐣. We can all remember a handful of school
teachers that made class entertaining or interesting. This is
paramount for online education where distraction is just a click or
tap away 💯.
</p>
<div class="link-box">
<span>→</span
><a href="#media" class="link"
>Continue reading their using rich media to explain big ideas</a
><span class="emoji" style="transform: scaleX(-1)">🎨</span>
</div>
</section>
<section id="media" data-start="187.6 ">
<h2>Rich Media</h2>
<p>
Tech is inherently abstract 🌀. You gotta admit it! There's no easy
way to describe the call stack or algorithmic complexity. To this
end, their courses and explainer videos 🎥 have many helpful
animations and diagrams, which most other learning resources don't.
They also use plenty of metaphors, memes, and pop culture references
that help make concepts stick 🧲. When visuals are combined with
jokes and analogies, they explain concepts so much better than words
can alone 😄.
</p>
<div class="link-box">
<span>→</span
><a href="#engineering" class="link"
>Continue reading how they do educational engineering to maximize
student outcomes</a
><span class="emoji" style="margin-top: -1rem">🛠️</span>
</div>
</section>
<section id="engineering" data-start="221.2">
<h2>Educational Engineering</h2>
<p>
They strive to help students make steady progress through course
design ✏️, achievements 🏆, and challenges 🚧. With a periodic boss
fight where every player gets bonus XP. And to keep the learning
blades sharp, they use Kaizen. Which for anyone watching who isn't a
quality operations nerd 🤓 like me, just means they constantly make
little updates to their courses. Matching what great teachers do in
real life.
</p>
<p>
While their tactics are inspired from gaming 🎲, ultimately, it's
about keeping players in what Mihaly Csikszentmihalyi called
<a href="https://en.wikipedia.org/wiki/Flow_(psychology)"
><i class="wavy-underline">flow states</i></a
>, or in academic circles, the
<a
class="link"
href="https://en.wikipedia.org/wiki/Zone_of_proximal_development"
>Zone of Proximal Development</a
>. All this means is that courses and lessons are just the right
length, and assignments are just difficult enough so people don't
get bored or anxious. Any gamer can agree on why this matters! I
wouldn't want my lessons to be as easy as Animal Crossing, as long
as Final Fantasy, nor sadistically punishing like Dark Souls.
</p>
<p>
Second, they don't give away the answers 🤐. You gotta earn those
points and items, buddy. If someone's having trouble, they encourage
you to look up documentation, feed Boots a salmon 🐟, or post a
community question. It's about leaning into the uncomfortable,
because that's what real-world development is so often like.
</p>
<div class="link-box">
<span>→</span
><a href="#community" class="link"
>Continue reading how their community rocks for everyone to level
up together</a
><span class="emoji" style="margin-top: -1rem">🌎</span>
</div>
</section>
<section id="community" data-start="302.4">
<h2>Community</h2>
<p>
They have diverse, well-organized conversation channels 💬 and a
cool player profile integration with the Boot platform. Onboarding
is straightforward. The rules are clear. And members are rewarded
for being helpful 🎁. Trust me, I see this often where people go out
of their way to answer questions or be encouraging when someone is
confused or nervous. When you see for yourself how members come from
all walks of life, with various skill levels from around the world
🌎, you quickly realize the goal is not teaching newbies to code,
but helping every member to level up together 🚀.
</p>
<div class="link-box">
<span>→</span
><a href="#customer-focus" class="link"
>Continue reading about their strong customer focus</a
><span class="emoji" style="margin-top: -1rem">🔍</span>
</div>
</section>
<section id="customer-focus" data-start="341.8">
<h2>Strong Customer Focus</h2>
<p>
With constant updates and announcements on upcoming features 📣,
along with community interaction like comments and polls. What I
particularly love ❤️ is the human voice that casually talks about
why changes were made and how they help students stay active and
continue learning 🏹.
</p>
<p>
Second, their
<a class="link" href="https://go.boot.rocks/rocks2pod">podcast</a>
puts audience needs first 🥇 and isn't an overbearing talk radio
show. After guests have spoken for a bit, the host repeats what was
understood so far and asks if it's correct. All this is about active
listening and looking out for students' best interests 👍.
</p>
<div class="link-box">
<span>→</span
><a href="#summary" class="link"
>Continue reading the summary wrap up</a
><span class="emoji" style="margin-top: -1rem">🌮</span>
</div>
</section>
<section id="summary" data-start="379">
<h2>Summary</h2>
<p>
From what I've experienced in the last three months in the platform,
emails, community, and podcast episodes, hell, I wish their program
existed years ago. These eight ways show me, at least, that Boot is
one of the best educational gaming brands out there. I'm a proud
member who believes learning valuable tech and career skills should
be fun and accessible. If you haven't already, go check them out at
the web address boot.dev. And you can find me,
<a class="link" href="https://go.boot.rocks/rocks2mario"
>Mario Vellandi</a
>, online or in their Discord under username
<strong style="color: rgb(123, 255, 0)">TriforceKid7</strong>.
Cheers 😀.
</p>
<div class="link-box">
<span>→</span
><a href="https://go.boot.rocks/rocks2boot" class="link"
>Sharpen your skills with Boot.dev</a
><span class="emoji" style="margin-top: -1rem">⚔️</span>
</div>
</section>
</div>
<!-- Right Column: Navigation -->
<nav class="navigation" aria-label="Content Navigation">
<div class="nav-content">
<ol>
<li class="nav-item" data-section="intro">
<a href="#">Introduction</a>
</li>
<li class="nav-item" data-section="trade-school">
<a href="#">Complete Trade School</a>
</li>
<li class="nav-item" data-section="great-deal">
<a href="#">Great Deal</a>
</li>
<li class="nav-item" data-section="fun">
<a href="#">Fun</a>
</li>
<li class="nav-item" data-section="teachers">
<a href="#">Great Teachers</a>
</li>
<li class="nav-item" data-section="media">
<a href="#">Rich Media</a>
</li>
<li class="nav-item" data-section="engineering">
<a href="#">Educational Engineering</a>
</li>
<li class="nav-item" data-section="community">
<a href="#">Community</a>
</li>
<li class="nav-item" data-section="customer-focus">
<a href="#">Customer Focus</a>
</li>
<li class="nav-item" data-section="summary">
<a href="#">Summary</a>
</li>
</ol>
</div>
</nav>
</div>
<script type="module" src="./script.js"></script>
</body>
</html>