A very simple game built in a single vanilla HTML+CSS+JS file.
https://paulohecht.github.io/logicboard
My 7-year-old son and I were playing Minecraft on a lazy Saturday morning when we started crafting some redstone logic gates. That sparked the idea of building a simple game to teach him digital logic, so I took the challenge for the rest of the weekend.
Now, it was time to choose a stack. Unity? Flutter/Flame? Native Android? Any web framework? Picking a stack among all the possibilities triggered a short paralysis.
That was when I started meditating about a meme I got a few days earlier: A screenshot of a text dialog in which a dev wannabe was trying to share something he built with a message like Hey, check out my project: http://localhost:3000.
This was supposed to be a funny developer joke, but it made me wonder how complicated it is for new developers learning new stuff to start building something. A simple hello world in a modern tech stack can take multiple hours to go through getting started pages of numerous dependencies with all the package managers, version managers, bundlers, web servers, and so on.
At the same time, 100% of the user-facing web today consists of 3 very simple pillars: HTML, CSS, and JS.
That was when I thought: How far can I get building this game with vanilla HTML, CSS, and JS? And how much can I accomplish with a single file without external requests for libraries or assets?
I called my friend ChatGPT, and we started our private hackathon to build this thing. Quite fun!
This experience changed my opinion on a recurring question that non-developers frequently ask me: "How should I start learning programming?" My new answer is: "Just create a .html file in any text editor and start learning HTML, CSS, and JS.". That's the shortest path to a dopamine reward loop, and these techs are the pillars of the web.
- Single File
- No external requests
- Responsive
- No extra step required, just open in the browser