Was bisher entstand
Projects & Tools
Tutorials, PWAs, Tools, AR — alles was im Center entstanden ist und noch entsteht. Klick auf eine Kategorie und entdecke was drinnen steckt.
10 Live
8 In Arbeit
18+ Total
Ongoing
Die lebende Webseite — immer in Arbeit
Tutorials
Schritt für Schritt — für alle die verstehen wollen
🐾
Deine erste Webseite
Der Einstieg für Kinder und Neugierige: In acht kleinen Kapiteln entsteht eine eigene Seite mit Text, Bild, Tabelle und Menü. Nur mit Windows-Computer und Browser.
📖 Zum Tutorial →
🌐
HTML 101
Grundlagen der Webentwicklung — Lernprojekt MyFirst Site. Für absolute Einsteiger.
💡 Die Idee
HTML ist das Fundament von allem. Ohne zu verstehen wie eine Seite wirklich aufgebaut ist, baut man auf Sand. Dieses Tutorial zeigt warum Tags
nicht nur Syntax sind — sie sind Struktur und Bedeutung gleichzeitig.
🧠 Was du lernst
Tags, Attribute, Semantik, Formulare, Links, Bilder. Am Ende baust du deine eigene MyFirst Site — eine echte Seite die du deployen kannst.
📈 Lernkurve
Tags & Struktur
→
Semantik
→
Formulare
→
MyFirst Site
🛠 Stack
HTML5
Semantik
VS Code
Browser DevTools
🎨
CSS 101
Von Selektoren bis Flexbox — Websites schön machen ohne Framework.
💡 Die Idee
CSS macht aus Struktur Aussehen. Aber wirklich verstehen wann welcher Selektor greift, warum das Box-Model so ist wie es ist — das ist der Unterschied zwischen Kopieren und Können.
🧠 Was du lernst
Selektoren, Box-Model, Flexbox, Grid, Responsive Design, Variablen. Am Ende stylst du deine MyFirst Site komplett selbst — kein Framework, kein Bootstrap.
📈 Lernkurve
Selektoren
→
Box-Model
→
Flexbox
→
Responsive
🛠 Stack
CSS3
Flexbox
CSS Grid
Custom Properties
⚡
JS 101
JavaScript Grundlagen — Variablen, Funktionen, DOM, Events. Praxisnah mit Lernprojekt.
💡 Die Idee
Mit HTML und CSS sieht deine Seite gut aus — aber sie tut noch nichts. JavaScript ist der Moment wo die Seite zum Leben erwacht. Der erste Event-Handler der funktioniert ist ein Gänsehaut-Moment.
🧠 Was du lernst
Variablen, Funktionen, Arrays, Objekte, DOM-Manipulation, Events, Fetch API. Am Ende baust du einen interaktiven Mini-App — alles vanilla, kein Framework.
📈 Lernkurve
Variablen & Typen
→
Funktionen
→
DOM
→
Events
🛠 Stack
Vanilla JS
DOM API
Fetch API
localStorage
✨
CSS Animation 101
Transitions, @keyframes, Timing Functions — alles bewegt sich, du entscheidest wie. Pure CSS, kein JS.
💡 Die Idee
CSS kann Dinge zum Leben erwecken — ohne eine einzige Zeile JavaScript. Transitions, Keyframes, Timing Functions: das sind die Werkzeuge die das Web lebendig machen.
🧠 Was du lernst
Transitions, @keyframes, animation Properties, Timing Functions, Transform. Projekt: animierte Profil-Card — Pulse, Hover-Lift, Shine-Effekt. Pure CSS, null JavaScript.
📈 Lernkurve
Transitions
→
@keyframes
→
Transform
→
Animated Card
🛠 Stack
CSS3
@keyframes
Transitions
Transform
🎮
Game-Design 101
Wie baut man ein Spiel, das Spass macht? Schritt für Schritt wie nach einem Bauplan, mit einer Vorschau, die wirklich läuft: Genre, Spielschleife, Steuerung, Regeln und Story.
📖 Zum Tutorial →
🧊
Blender 101
Was Blender ist und wie du deine erste eigene Figur baust: mit Rig, Laufen und Stehen, bereit als figur.glb für Spiele. Acht Schritte wie ein Bauplan.
📖 Zum Tutorial →
🎮
Godot 101
Was eine Game Engine ist, was Godot kann und wie deine eigene Figur aus Blender 101 in Godot 4 läuft. Acht Schritte wie ein Bauplan, mit Mini-Projekt.
📖 Zum Tutorial →
🔎
Glossar
Über 270 Begriffe einfach erklärt, mit kleinen Bauplänen: von Tag und DOM über Server, Git und KI bis Spiele, 3D, Hardware und Assets. Mit Suche.
📖 Zum Glossar →
📋
Cheatsheet
Alle Befehle aus HTML, CSS, CSS-Animation und JavaScript auf einen Blick, mit Beispiel und Link zurück ins Kapitel. Mit Suche, auch zum Ausdrucken.
📖 Zum Cheatsheet →
Tools 4 All
Kreativ · Konstruktiv · Energie · Web & Code · Organisieren
Work in Progress: Ich übersetze laufend, eins nach dem anderen. Siehst du etwas, das noch nicht übersetzt ist? Bitte hab etwas Geduld, ich bin dran. Hinweise sind herzlich willkommen: Schreib mir einfach, meine E-Mail-Adresse findest du unter Kontakt (unten auf jeder Seite). Ich nehme jede Hilfe gerne an!
Kreativ
Farbe, Design, Bild, Vektor, Musik
🎨
🎨
🖨️
🖼️
✏️
✨
🧬
🎸
🎵
Konstruktiv
Werkstatt, Berechnungen, Technik
Energie
Solar, OffGrid, Strom
🌿
Web & Code
Tools fürs Bauen von Websites
📱
🌐
Organisieren
Listen, Planung, Zeit
🎯
📅
🗺️
💰
⏱️
📆
🏃
🛠️
Spielen & Lernen
Interaktiv entdecken — für grosse und kleine Abenteurer
Work in Progress: Ich übersetze laufend, eins nach dem anderen. Siehst du etwas, das noch nicht übersetzt ist? Bitte hab etwas Geduld, ich bin dran. Hinweise sind herzlich willkommen: Schreib mir einfach, meine E-Mail-Adresse findest du unter Kontakt (unten auf jeder Seite). Ich nehme jede Hilfe gerne an!
🚀
Captain Starman
Interaktiver Weltraum-Explorer — Planeten, Galaxien, Warp-Animation. Für Dante. 🚀
💡 Die Idee
Entstanden aus der Begeisterung eines kleinen Weltraum-Fans — der Wunsch war da, das Projekt auch. Was als einfache Idee begann wurde zu einem echten interaktiven Erlebnis.
🧠 Was drinsteckt
Planeten, Galaxien, Warp-Animation — alles in VanillaJS und Canvas2D. Kein Framework, kein Schnickschnack. Nur Code und Fantasie.
📈 Lernkurve
HTML 101
→
CSS 101
→
CSS Animation 101
→
JS 101
🛠 Stack
HTML5
CSS3
CSS Animation
VanillaJS
Canvas2D
Vercel
🚢
Ship Ahoi!!!
Wer kennt Schiffe versenken nicht? Das hier ist meine Version, viel Spass! Gruss Mikey
Eine Seeschlacht für Kinder: Der fiese Käpt'n Krawall hat alle Meerjungfrauen der sieben Meere eingefangen. Deine Flotte aus Kreatur-Schiffen befreit sie in vier Seeschlachten. Das Herz des Spiels: «Niemand bleibt zurück». Wer sein Schiff verliert, wird gerettet und fährt bei einem anderen Schiff mit.
🖥️ Desktop und 📱 Mobile
▶ Jetzt spielen →
AR & Basteleien
Augmented Reality im Browser — kein App Store
WebXR AR — Augmented Reality direkt im Handy-Browser. Kein Download, kein App Store. Einfach die URL öffnen, Kamera erlauben, 3D-Objekte in die echte Welt stellen.
Nur mit dem Handy und seiner Kamera. Am PC mit Webcam habe ich es nicht ausprobiert, und es wäre auch wenig sinnvoll, mit Webcam und Kabel durch den Raum zu laufen. Entwickelt und getestet für Android (Chrome), auf dem iPhone ungetestet.
🥽
MyKeyZ AR v0.001
WebXR Augmented Reality — GLB Modelle in der echten Welt platzieren. Hit-Test, Reticle, Coral/Bordeaux Design.
📱 Nur am Handy mit Kamera. Am PC und auf dem iPhone ungetestet.
💡 Die Idee
AR im Browser — ohne App, ohne Installation. Inspiriert von "The Diamond Age". Der Traum: ein Companion der in der echten Welt neben dir steht. Das hier ist der erste Schritt.
🧠 Was ich gelernt habe
WebXR braucht zwingend HTTPS. Hit-Test für Oberflächen-Erkennung ist verblüffend präzise. Three.js + WebXR ist eine mächtige Kombination die kaum jemand kennt.
📈 Lernkurve
Three.js
→
WebXR API
→
Hit-Test
→
GLB Loader
🛠 Stack
Three.js r128
WebXR
GLTFLoader
Vercel
Konzepte & Pipeline
Was als nächstes kommt — vote mit!
Community Center
Treffpunkt der Community mit Kanälen für Tools, Tutorials und Ideen. Eine Vorschau mit Beispieldaten: so könnte es aussehen. Noch kein Konto, noch keine echten Beiträge.
Gefällt dir das?
Machinist Rechner
Drehen, Fräsen, Bohren, Gewinde — Schnittdaten mit Formel-Erklärung etc....
Interessiert?
TrigoPro
Trigonometrie und Geometrie visuell — Winkel, Flächen, Dreiecke. Lernwerkzeug statt reiner Rechner.
Interessiert?
Elementarium
Interaktives Periodensystem mit 3D-Visualisierung — Chemie zum Anfassen.
Interessiert?
Captain Starman
Weltraum-Abenteuer für Kinder — Lernen durch Entdecken im All.
Interessiert?
HistoryOTech
Geschichte der Technologie — interaktiv entdecken wie wir dahin kamen wo wir sind.
Interessiert?
AR Companion
Ein AR Begleiter der mit dir interagiert — Cyberpunk HUD-Ästhetik, AI-gesteuert. Grosse Vision für 2026.
Interessiert?