Du willst endlich selbst eine App bauen, weißt aber nicht, wo du anfangen sollst?
Perfekt. In diesem Tutorial baust du deine erste eigene TODO-App. Keine Vorkenntnisse nötig. Keine Installation. Nur du, ein Browser und 15 Minuten Zeit.
Am Ende hast du eine funktionierende App, die du wirklich nutzen kannst. Und du verstehst, wie der Prozess funktioniert – sodass du danach eigene Ideen umsetzen kannst.
Bereit? Los geht's.
Warum eine TODO-App das perfekte Einsteigerprojekt ist
Bevor wir loslegen, kurz zur Frage: Warum ausgerechnet eine TODO-App?
- Sofort nützlich: Du kannst sie danach wirklich benutzen
- Überschaubar: Nicht zu komplex, nicht zu simpel
- Alle Grundlagen: Du lernst HTML, CSS und JavaScript-Basics – ohne es zu merken
- Erweiterbar: Du kannst später Features hinzufügen
Die TODO-App ist der "Hello World" der Web-Entwicklung. Wenn du das kannst, kannst du fast alles.
Was du brauchst
- Einen Browser (Chrome, Firefox, Edge – egal)
- Zugang zu einem KI-Coding-Tool (z.B. KIRA AI)
- 15 Minuten ungestörte Zeit
- Keine Programmierkenntnisse (wirklich nicht)
Schritt 1: Das Grundgerüst erstellen
Öffne dein KI-Tool und gib folgenden Prompt ein:
Prompt:
"Erstelle mir eine einfache TODO-App als Webseite. Sie soll haben: Ein Eingabefeld für neue Aufgaben, einen Button zum Hinzufügen, eine Liste der Aufgaben. Jede Aufgabe soll einen Checkbox zum Abhaken haben und einen Button zum Löschen. Das Design soll modern und freundlich sein mit abgerundeten Ecken und sanften Farben."
Klicke auf "Generieren" oder "Senden".
Die KI erstellt jetzt den kompletten Code für dich. Das dauert ein paar Sekunden. Dann siehst du das Ergebnis – entweder als Vorschau oder als Code.
Was gerade passiert ist
Die KI hat drei Dinge erstellt:
- HTML: Die Struktur der Seite (Eingabefeld, Button, Liste)
- CSS: Das Aussehen (Farben, Abstände, Schriftarten)
- JavaScript: Die Funktionen (Hinzufügen, Abhaken, Löschen)
Du musst das nicht im Detail verstehen. Wichtig ist nur: Es funktioniert.
Schritt 2: Testen und Anpassen
Probiere deine App aus:
- Gib eine Aufgabe ein (z.B. "Einkaufen gehen")
- Klicke auf den Hinzufügen-Button
- Die Aufgabe sollte in der Liste erscheinen
- Klicke auf die Checkbox – die Aufgabe sollte als erledigt markiert werden
- Klicke auf den Löschen-Button – die Aufgabe sollte verschwinden
Funktioniert alles? Super! Weiter zu Schritt 3.
Etwas funktioniert nicht? Kein Problem. Das ist normal. Sag der KI einfach, was nicht stimmt:
Beispiel-Feedback:
"Der Hinzufügen-Button funktioniert nicht. Wenn ich draufklicke, passiert nichts."
oder
"Die Checkbox markiert die Aufgabe nicht als erledigt. Es soll durchgestrichen werden."
Die KI korrigiert den Fehler und gibt dir eine neue Version.
Schritt 3: Features hinzufügen
Deine Basis-App funktioniert. Jetzt machen wir sie besser.
Feature 1: Aufgaben speichern
Aktuell verschwinden alle Aufgaben, wenn du die Seite neu lädst. Das ist unpraktisch. Lass uns das ändern:
Prompt:
"Erweitere die App so, dass die Aufgaben im Browser gespeichert werden. Wenn ich die Seite neu lade, sollen meine Aufgaben noch da sein. Nutze dafür localStorage."
Jetzt bleiben deine Aufgaben erhalten – auch nach dem Schließen des Browsers.
Feature 2: Aufgaben bearbeiten
Manchmal vertippt man sich. Lass uns eine Bearbeiten-Funktion hinzufügen:
Prompt:
"Füge einen Bearbeiten-Button zu jeder Aufgabe hinzu. Wenn ich draufklicke, kann ich den Text der Aufgabe ändern."
Feature 3: Kategorien oder Prioritäten
Für Fortgeschrittene – aber immer noch einfach:
Prompt:
"Füge ein Dropdown-Menü hinzu, mit dem ich jeder Aufgabe eine Priorität zuweisen kann: Hoch (rot), Mittel (gelb), Niedrig (grün). Die Farbe soll links neben der Aufgabe angezeigt werden."
Schritt 4: Das Design verbessern
Funktionalität ist wichtig. Aber Aussehen auch. Hier sind ein paar Design-Prompts:
Für ein dunkles Theme:
"Ändere das Design zu einem Dark Mode. Dunkler Hintergrund, helle Schrift, sanfte Akzentfarben."
Für Animationen:
"Füge sanfte Animationen hinzu: Aufgaben sollen beim Hinzufügen einblenden und beim Löschen ausblenden."
Für Mobile-Optimierung:
"Optimiere die App für Smartphones. Größere Buttons, bessere Abstände, responsive Design."
Der echte Workflow: Fehler sind normal
Hier ist etwas Wichtiges, das dir niemand sagt:
Das erste Ergebnis ist fast nie perfekt.
Und das ist okay. So funktioniert Entwicklung – auch mit KI:
- Du beschreibst, was du willst
- Die KI liefert eine erste Version
- Du testest und findest Probleme
- Du beschreibst die Probleme
- Die KI korrigiert
- Wiederhole, bis es passt
Das ist kein Zeichen, dass du etwas falsch machst. Das ist der normale Prozess.
Typische Probleme und wie du sie beschreibst
| Problem | So beschreibst du es |
|---|---|
| Button reagiert nicht | "Der [Button-Name] funktioniert nicht. Nichts passiert beim Klick." |
| Falsches Aussehen | "Die Farbe soll [X] sein, nicht [Y]. Ändere das bitte." |
| Fehler in der Logik | "Wenn ich [X] mache, passiert [Y]. Es soll aber [Z] passieren." |
| Etwas fehlt | "Es fehlt [Feature]. Füge das bitte hinzu." |
Deine fertige TODO-App nutzen
Du hast jetzt eine funktionierende TODO-App. Wie nutzt du sie im Alltag?
Option 1: Im Browser speichern
Die einfachste Variante: Speichere die HTML-Datei auf deinem Computer und öffne sie bei Bedarf im Browser. Deine Aufgaben bleiben dank localStorage erhalten.
Option 2: Online hosten
Wenn du die App von überall nutzen willst, kannst du sie kostenlos online stellen. Frag die KI:
"Wie kann ich diese App kostenlos online stellen, sodass ich sie von überall aufrufen kann?"
Die KI erklärt dir Optionen wie GitHub Pages, Netlify oder Vercel – alle kostenlos für kleine Projekte.
Was du gerade gelernt hast
Ohne es zu merken, hast du in 15 Minuten Folgendes gelernt:
- HTML-Grundlagen: Struktur einer Webseite
- CSS-Grundlagen: Styling und Design
- JavaScript-Grundlagen: Interaktivität und Logik
- localStorage: Daten im Browser speichern
- Iteratives Arbeiten: Schritt für Schritt verbessern
- Debugging: Fehler finden und beschreiben
Das sind die Grundlagen der Web-Entwicklung. Und du hast sie durch Machen gelernt, nicht durch stundenlange Tutorials.
Nächste Schritte: Was du als Nächstes bauen kannst
Du hast den Einstieg geschafft. Hier sind Ideen für dein nächstes Projekt:
Leicht (ähnlich wie TODO-App)
- Einkaufslisten-App
- Notizen-App
- Countdown-Timer
- Zufallsgenerator (für Entscheidungen)
Mittel (etwas komplexer)
- Kalorienzähler
- Habit-Tracker
- Einfacher Rechner für dein Business
- Quiz-App
Fortgeschritten (aber machbar)
- Persönliches Dashboard
- Einfaches CRM für Kontakte
- Zeiterfassung für Projekte
- Portfolio-Webseite
Der Prozess ist immer gleich: Beschreiben → Generieren → Testen → Verbessern.
Fazit: Du kannst das
Vor 15 Minuten hattest du keine App. Jetzt hast du eine.
Das ist keine Magie. Das ist die neue Realität: Mit KI-Tools kann jeder eigene digitale Werkzeuge bauen. Ohne Informatik-Studium. Ohne monatelanges Lernen.
Die TODO-App war dein erster Schritt. Der wichtigste Schritt. Denn jetzt weißt du: Es funktioniert.
Die Frage ist nicht mehr, ob du programmieren kannst. Die Frage ist, was du als Nächstes baust.
Willst du systematisch lernen, wie du eigene Apps mit KI baust? Im "Programmieren mit KI" Kurs von VibeVenture baust du 26 echte Projekte – von einfach bis fortgeschritten, mit deutschen Erklärungen und persönlichem Support.
- Programmiere echte Apps als Anfänger
- Keine Installation, sofort loslegen
- Komplett praxisbezogen
- Zugriff auf Online-Editor
