What has been made so far
Projects & Tools
Tutorials, PWAs, tools, AR — everything that has been made in the Center and is still in the making. Click a category and discover what is inside.
10 Live
8 In progress
18+ Total
Ongoing
The living website — always a work in progress
Tutorials
Step by step — for everyone who wants to understand
🐾
Your first website
The way in for children and the curious: in eight short chapters you create your own page with text, a picture, a table and a menu. All you need is a Windows computer and a browser.
📖 To the tutorial →
🌐
HTML 101
Web development basics — learning project MyFirst Site. For absolute beginners.
💡 The idea
HTML is the foundation of everything. Without understanding how a page is really built, you are building on sand. This tutorial shows why tags are not just syntax — they are structure and meaning at the same time.
🧠 What you will learn
Tags, attributes, semantics, forms, links, images. At the end you build your own MyFirst Site — a real page that you can deploy.
📈 Learning curve
Tags & structure
→
Semantics
→
Forms
→
MyFirst Site
🛠 Stack
HTML5
Semantics
VS Code
Browser DevTools
🎨
CSS 101
From selectors to flexbox — making websites look good without a framework.
💡 The idea
CSS turns structure into appearance. But truly understanding when which selector applies, and why the box model works the way it does — that is the difference between copying and being able.
🧠 What you will learn
Selectors, box model, flexbox, grid, responsive design, variables. At the end you style your MyFirst Site entirely on your own — no framework, no Bootstrap.
📈 Learning curve
Selectors
→
Box model
→
Flexbox
→
Responsive
🛠 Stack
CSS3
Flexbox
CSS Grid
Custom properties
⚡
JS 101
JavaScript basics — variables, functions, DOM, events. Hands-on, with a learning project.
💡 The idea
With HTML and CSS your page looks good — but it does not do anything yet. JavaScript is the moment the page comes to life. The first event handler that works gives you goosebumps.
🧠 What you will learn
Variables, functions, arrays, objects, DOM manipulation, events, Fetch API. At the end you build an interactive mini app — all vanilla, no framework.
📈 Learning curve
Variables & types
→
Functions
→
DOM
→
Events
🛠 Stack
Vanilla JS
DOM API
Fetch API
localStorage
✨
CSS Animation 101
Transitions, @keyframes, timing functions — everything moves, and you decide how. Pure CSS, no JS.
💡 The idea
CSS can bring things to life — without a single line of JavaScript. Transitions, keyframes, timing functions: these are the tools that make the web feel alive.
🧠 What you will learn
Transitions, @keyframes, animation properties, timing functions, transform. Project: an animated profile card — pulse, hover lift, shine effect. Pure CSS, zero JavaScript.
📈 Learning curve
Transitions
→
@keyframes
→
Transform
→
Animated Card
🛠 Stack
CSS3
@keyframes
Transitions
Transform
🎮
Game Design 101
How do you build a game that is fun? Step by step like an assembly plan, with a preview that really runs: genre, game loop, controls, rules and story. Chapters in German for now.
📖 To the tutorial →
🧊
Blender 101
What Blender is and how to build your first own character: with a rig, walking and standing, ready as figur.glb for games. Eight steps like an assembly plan.
📖 To the tutorial →
🎮
Godot 101
What a game engine is, what Godot can do and how your own character from Blender 101 runs in Godot 4. Eight steps like an assembly plan, with a mini project.
📖 To the tutorial →
🔎
Glossary
More than 270 terms explained simply, with small assembly plans: from tags and the DOM to servers, Git and AI, games, 3D, hardware and assets. With search.
📖 To the glossary →
📋
Cheat sheet
All the commands from HTML, CSS, CSS animation and JavaScript at a glance, with an example and a link back to the chapter. With search, printable too.
📖 To the cheat sheet →
Tools 4 All
Creative · Constructive · Energy · Web & Code · Organise
Work in progress: I'm translating everything, one step at a time. Spotted something that isn't translated yet? Please bear with me, I'm on it. Tips are very welcome: just write to me, you'll find my email address under Contact (at the bottom of every page). I'm grateful for any help I can get!
Creative
Colour, design, images, vectors, music
🎨
🎨
🖨️
🖼️
✏️
✨
🧬
🎸
ChordViz
Learn chords for guitar, ukulele and bass, with a trainer and tab player.
Work in progress... →🎵
Constructive
Workshop, calculations, engineering
Energy
Solar, off-grid, electricity
🌿
Web & Code
Tools for building websites
📱
🌐
Organise
Lists, planning, time
🎯
📅
🗺️
💰
⏱️
📆
🏃
🛠️
Play & Learn
Discover interactively — for big and little adventurers
Work in progress: I'm translating everything, one step at a time. Spotted something that isn't translated yet? Please bear with me, I'm on it. Tips are very welcome: just write to me, you'll find my email address under Contact (at the bottom of every page). I'm grateful for any help I can get!
🚀
Captain Starman
Interactive space explorer — planets, galaxies, warp animation. For Dante. 🚀
💡 The idea
It grew out of the enthusiasm of a little space fan — the wish was there, and so was the project. What began as a simple idea became a real interactive experience.
🧠 What is inside
Planets, galaxies, warp animation — all in VanillaJS and Canvas2D. No framework, no frills. Just code and imagination.
📈 Learning curve
HTML 101
→
CSS 101
→
CSS Animation 101
→
JS 101
🛠 Stack
HTML5
CSS3
CSS Animation
VanillaJS
Canvas2D
Vercel
🚢
Ship Ahoi!!!
Who doesn't know the classic ship-sinking game? This is my version, have fun! Cheers, Mikey
A sea battle for kids: nasty Cap'n Krawall has captured all the mermaids of the seven seas. Your fleet of creature ships sets them free in four sea battles. The heart of the game: «No one gets left behind». Lose your ship and you get rescued and sail on with another one. (The game is in German.)
🖥️ Desktop and 📱 Mobile
▶ Play now →
AR & Tinkering
Augmented reality in the browser — no app store
WebXR AR — augmented reality straight in your phone browser. No download, no app store. Just open the URL, allow the camera and place 3D objects in the real world.
Only with a phone and its camera. I have not tried it on a PC with a webcam, and it would make little sense to walk around the room with a webcam and a cable. Developed and tested for Android (Chrome); untested on the iPhone.
🥽
MyKeyZ AR v0.001
WebXR augmented reality — place GLB models in the real world. Hit test, reticle, coral/burgundy design.
📱 Phone with camera only. Untested on PC and iPhone.
💡 The idea
AR in the browser — no app, no installation. Inspired by "The Diamond Age". The dream: a companion who stands next to you in the real world. This is the first step.
🧠 What I have learned
WebXR absolutely requires HTTPS. Hit testing for surface detection is astonishingly precise. Three.js + WebXR is a powerful combination that hardly anyone knows about.
📈 Learning curve
Three.js
→
WebXR API
→
Hit test
→
GLB Loader
🛠 Stack
Three.js r128
WebXR
GLTFLoader
Vercel
Concepts & Pipeline
What comes next — have your say!
Community Center
A meeting place for the community with channels for tools, tutorials and ideas. A preview with sample data: this is how it could look. No accounts yet and no real posts yet.
Do you like it?
Machinist Calculator
Turning, milling, drilling, threads — cutting data with formula explanations, etc....
Interested?
TrigoPro
Trigonometry and geometry made visual — angles, areas, triangles. A learning tool rather than a plain calculator.
Interested?
Elementarium
Interactive periodic table with 3D visualisation — hands-on chemistry.
Interested?
Captain Starman
Space adventure for children — learning by exploring in space.
Interested?
HistoryOTech
History of technology — discover interactively how we got to where we are.
Interested?
AR Companion
An AR companion that interacts with you — cyberpunk HUD aesthetic, AI-driven. A big vision for 2026.
Interested?