Keine Sorge: Egal ob ihr schon programmiert habt oder heute zum ersten Mal einen Code-Editor seht – ihr startet alle mit dem Gleichen: einer Idee und einer KI, die zuhört.

• Wie Programmieren grundsätzlich funktioniert – die Grundbausteine, die es in jeder Programmiersprache gibt
• Wie eine Webseite aufgebaut ist – HTML lesen und verstehen
• Wie man ihr ein Aussehen gibt – CSS in seinen Grundzügen
• Wie sie lebendig wird – JavaScript: Klicks, Punkte, Zufall
• Wo Daten bleiben – Datenbank und ein erster Blick auf SQL
• Wie man einer KI gute Anweisungen gibt: kleine Schritte, klare Wünsche
• Wie ihr Fehler findet, Feedback gebt und eure App am Ende veröffentlicht

Wichtig: Die KI macht auch Fehler. Wer versteht, was der Code ungefähr tut, merkt das sofort – deshalb starten wir mit den Grundlagen.

Ganz frisch: Den Begriff gibt es erst seit Februar 2025. Ihr lernt heute also etwas, das jünger ist als eure letzte Klassenfahrt.

✈️ fly.pieter.com

Ein Flugsimulator im Browser, den man zu mehreren fliegt. Eine einzige Person baute die erste Version im Februar 2025 in rund drei Stunden mit KI – nach 17 Tagen lief er auf 1 Mio. $ Jahresumsatz.

📱 VokaBüffel

Meine eigene Vokabel-App für iPhone und Android: Karteikarten, Lernstand, tägliche Erinnerung. Beschreiben, bauen lassen, testen.

🏢 Apps im Konzern

Bei CARIAD (Volkswagen) laufen Anwendungen für Portfolio- und Finanzsteuerung – gebaut mit GitHub Copilot, betrieben auf Microsoft Azure. Dieselben Bausteine wie heute, nur größer.

Die Botschaft: Die KI schreibt den Code. Der Mensch versteht das Problem, beschreibt es klar, testet – und entscheidet.

Merksatz: HTML sind die Knochen, CSS ist die Kleidung, JavaScript sind die Muskeln – und SQL ist das Gedächtnis. In genau dieser Reihenfolge gehen wir sie heute durch.

Das ist die wichtigste Lektion des Tages: Niemand baut eine App in einem Rutsch. Man baut sie in kleinen Schritten – und nach jedem Schritt schaut man nach, ob sie noch funktioniert.

HTML (HyperText Markup Language) ist die Bausprache jeder Webseite. Sie besteht aus Tags – Bausteinen in spitzen Klammern wie <h1>. Sie sagen dem Browser (dem Programm, mit dem ihr Webseiten anschaut), was etwas ist.

<h1>Das ist eine Überschrift</h1>
   ▲            ▲              ▲
 Start-Tag    Inhalt       Schluss-Tag

<h1>Willkommen auf meiner Seite!</h1>
<p>Ich bin Alex und das ist meine
allererste eigene Webseite.</p>

<h1> = größte Überschrift (h2, h3 … werden kleiner) · <p> = Absatz (englisch „paragraph“).

<h1>Meine Hobbys</h1>
<ul>
  <li>Fußball</li>
  <li>Zeichnen</li>
  <li>Gaming</li>
</ul>
<a href="https://www.wikipedia.de">
  Mein Lieblings-Lexikon
</a>

<ul> = Liste, <li> = ein Eintrag · <a> = Link. href ist ein Attribut: eine Zusatz-Info im Tag, hier die Zieladresse.

<img src="katze.jpg"
     alt="Meine Katze Minka">

src sagt, welche Bilddatei gezeigt wird, alt beschreibt das Bild in Worten – wichtig für blinde Menschen und wenn das Bild mal fehlt. Dieser Tag braucht keinen Schluss-Tag.

<button>Klick mich!</button>

Ein <button> ist erst mal nur ein Knopf – grau und ohne Wirkung. Für das Aussehen braucht es gleich CSS, für die Funktion danach JavaScript.

<table>
  <tr> <th>Name</th> <th>Punkte</th> </tr>
  <tr> <td>Mia</td>  <td>2100</td> </tr>
  <tr> <td>Ben</td>  <td>1900</td> </tr>
</table>

<table> = Tabelle, <tr> = Zeile, <th> = Überschrift-Zelle, <td> = normale Zelle. Merkt sie euch – nachher speichert ihr echte Highscores hinein!

CSS (Cascading Style Sheets) bestimmt, wie die Sachen aussehen. Eine CSS-Regel besteht immer aus drei Teilen:

h1 { color: red; }
 ▲        ▲       ▲
Wer?  Was daran?  Wie?

Wer  = Selektor      (h1, p, .karte)
Was  = Eigenschaft   (color, font-size)
Wie  = Wert          (red, 20px)

body { background: #fdf3d8; }

h1 {
  color: #e5484d;
  font-family: Verdana, sans-serif;
}

p {
  color: #4b4b4b;
  font-size: 16px;
}

Farben schreibt man als Hex-Code: #e5484d – je zwei Zeichen für Rot, Grün und Blau. Es geht auch einfach red oder gold.

.reihe {
  display: flex;          ← nebeneinander
  gap: 12px;              ← Abstand dazwischen
  justify-content: center; ← mittig
}

Genau solche Regeln meint ihr, wenn ihr der KI sagt: „Ordne die Knöpfe nebeneinander an und zentriere sie.“

JavaScript ist die Programmiersprache im Browser. Sie kann sich Dinge merken, rechnen, würfeln – und vor allem: auf euch reagieren.

Das JavaScript steht im <script>-Tag oder in einer Datei app.js. Mehr Vokabeln braucht ihr für die nächsten vier Folien nicht.

Warum ihr das kennen solltet: Ihr müsst es nicht tippen können – aber wenn ihr es im KI-Code wiedererkennt, versteht ihr, was eure App tut. Und ihr könnt viel genauer sagen, was sie stattdessen tun soll.

-- Alle Highscores holen, beste zuerst
SELECT name, punkte
FROM highscores
ORDER BY punkte DESC
LIMIT 10;

-- Einen neuen Eintrag speichern
INSERT INTO highscores (name, punkte)
VALUES ('Mia', 2100);

Ohne Datenbank ist der Highscore nach dem Neuladen weg und jeder sieht nur seinen eigenen.
Mit Datenbank spielt die ganze Klasse um dieselbe Bestenliste.

Die bisherigen Beispiele sind reines Frontend – sie laufen komplett im Browser. Im Studio kommen Server und Datenbank dazu; unter „Code → Vibe-Backend“ könnt ihr ihnen bei der Arbeit zusehen.

Beim Fehlersuchen hilft: beschreibt, was ihr seht („der Knopf reagiert nicht mehr, seit der Highscore dazu kam“), statt nur „geht nicht“. Und: keine echten Namen, Adressen oder Passwörter in die App.

Erst überlegen, dann tippen: Wer ist die Zielgruppe? Was ist die eine Kernfunktion? Damit startet ihr – alles andere kommt später.

1. Konzept – 10 Min, auf Papier. Wer benutzt die App? Welches eine Problem löst sie? Erst wenn ihr das in zwei Sätzen sagen könnt, geht's an den Rechner. noch kein Prompt
2. Bauen & testen – 65 Min, in Sprints. Ein Prompt, ein Schritt, sofort ausprobieren. Erst dann der nächste Wunsch. Pause 11:15 – 11:30
3. Feedback – 15 Min. Die Nachbargruppe spielt eure App, ohne dass ihr etwas erklärt. Ihr schaut zu und schreibt mit, wo sie hängenbleibt.
4. Finalisieren – 10 Min. Genau eine Verbesserung umsetzen, dann veröffentlichen und den Link sichern.
5. MVP-Präsentation – 3 Minuten pro Gruppe. Zeigen, was läuft – nicht, was ihr noch vorhattet.

MVP = „Minimum Viable Product“: die kleinste Version, die schon wirklich läuft. Lieber ein Quiz mit drei Fragen, das funktioniert, als zwanzig, die keiner spielen kann.

1. Geht im Browser auf vibefabrik.de/workshop.
2. Gebt den Gruppencode ein, den ihr von mir bekommt. Kein Konto, keine E-Mail nötig.
3. Beschreibt im Chat eure Idee – am besten mit dem ersten kleinen Schritt beginnen.
4. Testet jede Version sofort in der Live-Vorschau (auch als Smartphone-Ansicht!). Unter „Code“ seht und ändert ihr alle Dateien.
5. Am Ende: „Veröffentlichen“ klicken – euer App-Link erscheint unten in der Leiste.

Achtung, Budget: Jede Gruppe hat eine begrenzte Zahl an KI-Anfragen (Tokens sind die Wort-Bausteine, in denen KI-Arbeit gemessen wird). Überlegt eure Prompts gemeinsam, dann kommt ihr locker hin.

1. Jede Gruppe öffnet über die Galerie die App der Nachbargruppe und spielt sie 5 Minuten wirklich durch.
2. Danach sagt ihr zwei Sterne ⭐⭐ – zwei Dinge, die richtig gut sind. Konkret: „Die Touch-Steuerung reagiert super“ statt nur „cool“.
3. … und einen Wunsch 🌠 – eine Idee, was die App besser machen würde. Immer über die App sprechen, nie über Personen.
4. Wer mag, setzt den Wunsch direkt als letzten Prompt um – oft dauert das nur eine Minute!

1. „Unsere App heißt … und hilft …“ – Name und der eine Zweck, in einem Satz. 20 Sek
2. Live vorführen – eine Runde wirklich spielen, nicht über Bildschirmfotos reden. Was hakt, darf haken. 90 Sek
3. „Am stolzesten sind wir auf …“ – die Funktion, die am besten geworden ist. 20 Sek
4. „Am meisten gelernt haben wir …“ – gern aus einem Fehler, den die KI gebaut hat. 30 Sek
5. Eine Frage aus der Klasse – wer will wissen, wie ihr etwas hinbekommen habt? 20 Sek

Keine Angst vor Bugs. Auch in echten Firmen wird ein MVP mit Macken gezeigt – genau dafür ist er da. Was heute läuft, ist mehr, als die meisten Erwachsenen je selbst gebaut haben.

Warum nur vier Wochen? Danach räume ich die Workshop-Server wieder auf – das gehört zum sauberen Umgang mit euren Daten dazu. An die Lehrkraft: Sie bekommen die Galerie- und App-Links direkt nach dem Workshop, zum Weitergeben und Sichern.

Startregel: ein eigenes Problem, eine Kernfunktion, testen, verbessern. Nicht die perfekte App zählt, sondern dass aus eurer Idee etwas Echtes wird.

Vibe Coding

Programmieren, indem man der KI in normaler Sprache beschreibt, was man haben will.

CSS

Die Gestaltungs-Sprache: Farben, Schriften, Abstände – wie die Seite aussieht.

KI

Künstliche Intelligenz – ein Programm, das Sprache versteht und Texte oder Code erzeugt.

JavaScript

Die Programmiersprache im Browser: Klicks, Spiele, Rechnen – was die Seite tut.

Prompt

Eure Anweisung an die KI. Gute Prompts sind konkret und wünschen einen Schritt auf einmal.

Variable

Ein Kästchen mit Namen, in dem sich das Programm etwas merkt (z. B. die Punkte).

Browser

Das Programm, mit dem man Webseiten anschaut (Chrome, Safari, Firefox, Edge).

Server

Ein Computer im Internet, der ständig läuft und Webseiten oder Daten ausliefert.

HTML

Die Bausprache der Webseiten: legt fest, was auf der Seite ist.

Backend

Der unsichtbare Teil auf dem Server – z. B. das Speichern eurer Highscores.

Tag

Ein HTML-Baustein in spitzen Klammern, z. B. <h1>.

Datenbank

Der geordnete Speicher auf dem Server. Was hier liegt, bleibt – für alle gemeinsam.

Attribut

Zusatz-Info in einem Tag, z. B. href="…" oder src="…".

SQL

Die Sprache, mit der man eine Datenbank fragt: SELECT … FROM ….

Selektor

Der CSS-Teil, der sagt, wer gestaltet wird: h1, p, .karte.

Token

Die „Wort-Bausteine“, in denen KI-Arbeit gemessen wird. Euer Gruppen-Budget.

Frontend

Der sichtbare Teil im Browser: HTML, CSS und JavaScript zusammen.

Agent

Eine KI, die selbstständig in Schritten arbeitet: planen → bauen → testen → berichten.

MVP

Die kleinste Version einer App, die schon wirklich funktioniert und die man zeigen kann.

Sprint

Ein kurzer Bau-Abschnitt: ein Prompt, ein Schritt, danach sofort testen.

Der wichtigste Satz zum Mitnehmen: Die Idee bleibt eure. Die KI ist schnell – aber sie weiß nie, was gebaut werden soll. Das entscheidet ihr.