Ship it: Von deinem Bildschirm in die Welt
Ship it: Von deinem Bildschirm in die Welt
Eine harte Wahrheit: Eine Seite, die nur auf deinem Computer existiert, ist nicht veröffentlicht. Niemand kann sie sehen, niemand kann sie benutzen, und niemand kann dir sagen, dass sie großartig ist. Shippen bedeutet genau eins — eine URL, die jeder Mensch auf der Welt öffnen kann. Das ist die Grenze zwischen „ich lerne programmieren“ und „ich habe etwas gebaut“.
Die gute Nachricht? An eine URL zu kommen ist heute der einfache Teil. Kostenlose Dienste erledigen das in Sekunden:
- Netlify Drop — öffne die Seite, zieh deine HTML-Datei darauf, bekomm eine Live-URL. Das ist der ganze Prozess.
- Vercel — verbinde einen Ordner oder ein GitHub-Repo, klick auf Deploy, fertig. (Genau diese Academy läuft darauf.)
Und falls du je feststeckst? Du bist Vibe Coder — frag die KI. „Führe mich Schritt für Schritt durch das Deployment dieser HTML-Datei auf Netlify“ funktioniert wunderbar. Deployment war früher der gruselige Teil des Programmierens. Heute ist es ein Gespräch.
Aber bevor du die Datei irgendwohin ziehst: Es gibt einen Unterschied zwischen einer Seite, die funktioniert, und einer Seite, die launch-ready ist. Echte Seiten haben professionelle Details: einen richtigen Titel im Browser-Tab, eine Beschreibung, die Suchmaschinen und Link-Vorschauen anzeigen können, Social-Tags, damit dein Link gut aussieht, wenn ihn jemand auf WhatsApp oder X teilt, und einen Footer, der sagt: „Das hat ein echter Mensch gebaut — hier, teil es weiter.“ In dieser letzten Lektion gibst du deinem Ideen-Board aus Modul 4 genau diese Details.
Wie es auf deinem Pfad weitergeht
Das ist die letzte Lektion von Vibe-Coding-Grundlagen — aber Schritt eins des Zero-to-Hero-Pfads. Als Nächstes lernst du Claude Code im Browser kennen (eine KI, die ganze Projekte aus einem Gespräch heraus baut), dann installierst du das echte Tool auf deinem eigenen Rechner, und am Ende baust du deinen eigenen KI-Agenten. Du weißt jetzt, wie das Web gemacht wird. Zeit, deutlich mehr davon zu machen.
Lass uns shippen.
Anweisungen
Gib deiner Seite einen richtigen <title> — ersetze „Untitled“ durch einen Namen, der den Browser-Tab verdient. Das ist das Erste, was Suchmaschinen und Lesezeichen anzeigen.
Tipp: Such `<title>Untitled</title>` im <head> und ändere es in etwas wie `<title>Idea Board — Never Lose a Spark</title>`. Mindestens ein paar Zeichen — mach ihn zu deinem eigenen.
Füge ein <meta name="description">-Tag im <head> hinzu — ein Satz, der Suchmaschinen (und neugierigen Menschen) sagt, was deine App tut.
Füge Open-Graph-Tags hinzu — <meta property="og:title"> und <meta property="og:description">. Sie steuern, wie dein Link aussieht, wenn er auf WhatsApp, X oder LinkedIn geteilt wird.
Füge unten an der Karte einen <footer> hinzu, mit einem „Built with vibes“-Credit und einem <a id="share-link"> — jedes ausgelieferte Produkt signiert seine Arbeit.
Dein Code
Beschreibe, was du für diesen Schritt bauen willst, und ich schreibe den Code — klicke dann auf Übernehmen, um ihn in deinen Editor zu übertragen. Dieser Schritt: Gib deiner Seite einen richtigen <title> — ersetze „Untitled“ durch einen Namen, der den Browser-Tab verdient. Das ist das Erste, was Suchmaschinen und Lesezeichen anzeigen.