Mini-Lesson Documentation
Documentation · Comic / visual post with embedded runtime game demo.
Mini-Lesson Documentation
What it is
A mini-lesson is a focused, visual explanation of a single concept — usually built with diagrams, annotated screenshots, and an embedded runtime demo. The format is closer to a comic strip than a textbook: short panels, visual emphasis, and concrete examples.
Why it matters
Most learners don’t absorb dense paragraphs. A visual format with an embedded demo lets the reader play with the concept instead of just reading about it — which is how understanding actually sticks.
How GateGame implements it
My portfolio’s lesson pages — JS Basics, JS Variables, Networking, and Gamerunner — walk through foundational concepts with visual aids and embedded runtime demos linked from the homepage. The Class Progress section also showcases each game as a runnable demonstration of the concept it teaches.
Code Example
<!-- The portfolio homepage links to these mini-lessons -->
<a href="/code/javascript">JS Basics</a>
<a href="/game/essentials/variables">JS Variables</a>
<a href="/network/stack">Networking</a>
<a href="/gamerunner">Gamerunner</a>
Key Takeaway
Show, don’t tell. A working demo embedded in the page does what three paragraphs of prose can’t.