{"id":11885,"date":"2026-05-27T18:00:11","date_gmt":"2026-05-27T11:00:11","guid":{"rendered":"\/de\/tutorials\/?p=11885"},"modified":"2026-05-27T18:00:13","modified_gmt":"2026-05-27T11:00:13","slug":"vibe-coding-lernen","status":"publish","type":"post","link":"\/de\/tutorials\/vibe-coding-lernen","title":{"rendered":"Vibe-Coding in 7 Schritten lernen\u00a0"},"content":{"rendered":"<p>Vibe-Coding ist ein KI-gest&uuml;tzter Programmieransatz, bei dem Sie beschreiben, was Sie erstellen m&ouml;chten, das Ergebnis testen und es Schritt f&uuml;r Schritt verbessern. Anstatt jede Zeile Code manuell zu schreiben, steuern Sie den Prozess mit Eingabeaufforderungen und verfeinern die Ausgabe, bis sie funktioniert.<\/p><p>In der Praxis bedeutet Vibe-Coding, KI mit Eingabeaufforderungen zu dirigieren, das Ergebnis zu testen und es Schritt f&uuml;r Schritt zu verbessern. Sie ben&ouml;tigen ein grundlegendes logisches Verst&auml;ndnis und die Bereitschaft zum Experimentieren, jedoch keine tiefgreifenden technischen Kenntnisse, um loszulegen.<\/p><p>Der Prozess l&auml;uft praktisch ab: Zun&auml;chst m&uuml;ssen Sie den Arbeitsablauf nachvollziehen k&ouml;nnen, dann richten Sie eine einfache Umgebung ein, schreiben klarere Eingabeaufforderungen, erstellen kleine Projekte und verfeinern diese durch Testen und Debuggen. Mit der Zeit werden Sie immer besser darin, &uuml;ber KI echte Anwendungen zu programmieren.<\/p><h2 class=\"wp-block-heading\" id=\"h-1-verstehen-was-vibe-coding-ist\"><strong>1. Verstehen, was Vibe-Coding ist<\/strong><\/h2><p>Vibe-Coding ist eine Methode, Software mit KI zu entwickeln, indem man Prompts schreibt, den dadurch generierten Code ausf&uuml;hrt und ihn durch Tests verfeinert. Vibe-Coding l&auml;uft anders ab als herk&ouml;mmliches Programmieren, ist aber immer noch Programmieren:<\/p><p>Sie m&uuml;ssen weiterhin wie ein Entwickler denken. Sie m&uuml;ssen wissen, was der Code leisten soll, falsche Ausgaben erkennen, und den Code so lange verbessern, bis er funktioniert.<\/p><p>Der Arbeitsablauf basiert auf drei Kernschritten:<\/p><ul class=\"wp-block-list\">\n<li>Beim <strong>Prompting <\/strong>teilen Sie KI mit klarer, direkter Sprache mit, was sie erstellen soll.<\/li>\n\n\n\n<li><strong>Iteration <\/strong>ist der Prozess, bei dem das Ergebnis Schritt f&uuml;r Schritt verbessert wird.<\/li>\n\n\n\n<li><strong>Feedback-Schleifen <\/strong>beschreiben den Zyklus, in dem die Ausgabe getestet, fehlende oder fehlerhafte Elemente erkannt und diese Erkenntnisse zur Steuerung der n&auml;chsten Version genutzt werden.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a1b2d1f71feb\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a1b2d1f71feb\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"572\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/05\/how-to-learn-vibe-coding-image1-1024x572.jpg\" alt=\"KI-Workflow System-Diagramm: Ein Zyklus von der Eingabeaufforderung, &uuml;ber die Iteration zur Feedback-Schleifen\" class=\"wp-image-11887\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/05\/how-to-learn-vibe-coding-image1.jpg 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/05\/how-to-learn-vibe-coding-image1-300x167.jpg 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/05\/how-to-learn-vibe-coding-image1-768x429.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p>Angenommen, Sie m&ouml;chten eine einfache To-Do-App erstellen. In einem traditionellen Arbeitsablauf w&uuml;rden Sie die Struktur planen, die Benutzeroberfl&auml;che schreiben, die Logik hinzuf&uuml;gen und Fehler nach und nach beheben.<\/p><p>Beim Vibe-Coding k&ouml;nnten Sie mit einer Aufforderung wie dieser beginnen: <em>&bdquo;Erstelle eine einfache To-Do-App mit einem Formular, einer Aufgabenliste und einer L&ouml;schtaste unter Verwendung von HTML, CSS und JavaScript<\/em>.&ldquo;<\/p><p>F&uuml;hren Sie dann den Code aus und stellen fest, dass die Aufgaben nach einem Refresh verschwinden, dann bitten Sie die KI, einen lokalen Speicher hinzuzuf&uuml;gen. Der Ablauf aus Ergebnispr&uuml;fung und Optimierungsaufforderung bildet den Kern des Prozesses.<\/p><p>Vibe-Coding funktioniert am besten, wenn Sie KI wie einen Mitarbeiter behandeln. Sie geben die Richtung vor und KI erstellt einen Entwurf. Sie pr&uuml;fen ihn, geben bessere Aufforderungen und formen das Ergebnis zu etwas N&uuml;tzlichem.<\/p><h2 class=\"wp-block-heading\" id=\"h-2-ihre-vibe-coding-umgebung-einrichten\"><strong>2. Ihre Vibe-Coding-Umgebung ein<\/strong>richten<\/h2><p>Ihre Vibe-Coding-Umgebung ist die Sammlung von Tools, die Sie zum Schreiben, Testen und Ausarbeiten von Ideen verwenden.<\/p><p>W&auml;hlen Sie zun&auml;chst ein <a href=\"\/de\/tutorials\/vibe-coding-tools-de\">KI Vibe-Coding-Tool<\/a> aus, in dem Sie Ihren Code schreiben und ausf&uuml;hren m&ouml;chten.<\/p><p><strong>VS Code <\/strong>ist ein universeller Code-Editor, den Sie auf Ihrem Computer installieren. Sie verwenden ihn, um alles von einfachen Skripten bis hin zu vollst&auml;ndigen Webanwendungen zu erstellen. Mit Erweiterungen k&ouml;nnen Sie Unterst&uuml;tzung f&uuml;r Sprachen, Debugging, Formatierung und Tests hinzuf&uuml;gen.<\/p><p>Er eignet sich gut, wenn Sie die volle Kontrolle &uuml;ber Ihr Projekt und Ihre lokale Umgebung haben m&ouml;chten.<\/p><p><strong>Cursor <\/strong>ist eine modifizierte Version von VS Code, bei der KI in die Bearbeitungsumgebung integriert ist. Sie k&ouml;nnen Code markieren und ihn in einfacher Sprache umschreiben, korrigieren oder erweitern lassen.<\/p><p>Das funktioniert gut, wenn Sie schnell vorankommen, Ideen ausprobieren oder gro&szlig;e Teile eines Projekts umgestalten m&ouml;chten, ohne alles manuell erledigen zu m&uuml;ssen.<\/p><p><strong>Replit <\/strong>l&auml;uft vollst&auml;ndig in Ihrem Browser. Sie k&ouml;nnen ein Projekt starten, Code schreiben und diesen ausf&uuml;hren, ohne etwas installieren zu m&uuml;ssen. Die Einrichtung der Umgebung, einschlie&szlig;lich Abh&auml;ngigkeiten und Laufzeitumgebung, &uuml;bernimmt Replit f&uuml;r Sie.<\/p><p>Es eignet sich gut f&uuml;r schnelle Experimente, kleine Apps und zum Lernen, wenn Sie sofortiges Feedback w&uuml;nschen.<\/p><p><a href=\"\/de\/horizons\">Die Coding-Plattform Hostinger Horizons<\/a> vereint Programmierung, Hosting und Bereitstellung an einem Ort. Sie k&ouml;nnen ein Projekt erstellen und es in die Produktion &uuml;berf&uuml;hren, ohne Server, Domains oder Bereitstellungspipelines konfigurieren zu m&uuml;ssen.<\/p><p>Es eignet sich gut f&uuml;r Landingpages, kleine Web-Apps und Ideen in der Fr&uuml;hphase, bei denen Sie schnell vom Konzept zu einer funktionierenden Website gelangen m&ouml;chten.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a1b2d1f74fec\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a1b2d1f74fec\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"516\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/05\/learn-vibe-coding-hostinger-horizons-2048x1032-1-1024x516.png\" alt=\"Hostinger Landingpage zu Hostinger Horizons All-in-One KI-Partner\" class=\"wp-image-11890\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/05\/learn-vibe-coding-hostinger-horizons-2048x1032-1.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/05\/learn-vibe-coding-hostinger-horizons-2048x1032-1-300x151.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/05\/learn-vibe-coding-hostinger-horizons-2048x1032-1-768x387.png 768w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/05\/learn-vibe-coding-hostinger-horizons-2048x1032-1-1536x774.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p>Entscheiden Sie als N&auml;chstes, wie die KI Ihren Arbeitsablauf unterst&uuml;tzen soll. Jede der folgenden Optionen unterst&uuml;tzt Sie auf unterschiedliche Weise:<\/p><ul class=\"wp-block-list\">\n<li><strong>ChatGPT <\/strong>hilft Ihnen Schritt f&uuml;r Schritt bei der Planung, der Code-Generierung und der Fehlerbehebung. Nutzen Sie es, wenn Sie klare Erkl&auml;rungen und Kontrolle &uuml;ber jede Entscheidung w&uuml;nschen.<\/li>\n\n\n\n<li><strong>GitHub Copilot <\/strong>schl&auml;gt Ihnen Code vor, w&auml;hrend Sie in Ihrem Editor tippen. Dies ist eine gute Wahl, wenn Sie die Struktur bereits kennen und schneller vorankommen m&ouml;chten.<\/li>\n\n\n\n<li>Mit<strong> Cursor AI <\/strong>k&ouml;nnen Sie Code direkt &uuml;ber Eingabeaufforderungen in Ihren Dateien bearbeiten und generieren. Das funktioniert gut, wenn Sie schnell iterieren m&ouml;chten, ohne zwischen Tools wechseln zu m&uuml;ssen.<\/li>\n<\/ul><p>Ihr Kenntnisstand bestimmt, wie und welche Art von Programmierwerkzeugen Sie verwenden sollten:<\/p><ul class=\"wp-block-list\">\n<li><strong>Anf&auml;nger: <\/strong>Verwenden Sie Replit oder Hostinger Horizons mit umfassender KI-Unterst&uuml;tzung. Konzentrieren Sie sich darauf, zu verstehen, was der Code bewirkt. Bitten Sie um klare Erkl&auml;rungen.<\/li>\n\n\n\n<li><strong>Fortgeschrittene: <\/strong>Verwenden Sie VS Code mit Copilot oder ChatGPT. Schreiben Sie die Struktur selbst und nutzen Sie dann KI, um repetitive Arbeiten zu beschleunigen.<\/li>\n\n\n\n<li><strong>Fortgeschrittene: <\/strong>Kombinieren Sie Tools. Nutzen Sie KI zur Erkundung, zum Aufbau und zur Refaktorisierung, w&auml;hrend Sie die volle Kontrolle &uuml;ber Entscheidungen und Architektur behalten.<\/li>\n<\/ul><p>Sie sind sich nicht sicher, wo Sie mit Vibe-Coding beginnen sollen? W&auml;hlen Sie die Konfiguration, die die wenigste Einrichtung ben&ouml;tigt. &Ouml;ffnen Sie ein Tool, erstellen Sie eine kleine App und verbessern Sie diese Schritt f&uuml;r Schritt. Das ist der schnellste Weg, sich mit Vibe-Coding vertraut zu machen.<\/p><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.hostinger.com\/de\/horizons\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/06\/DE_logo_Horizons_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-5822\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/06\/DE_logo_Horizons_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/06\/DE_logo_Horizons_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/06\/DE_logo_Horizons_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-3-lernen-wie-man-effektiv-prompts-erstellt\"><strong>3. Lernen, wie man effektiv Prompts erstellt<\/strong><\/h2><p>Um ein <a href=\"\/de\/tutorials\/prompt-engineer-werden\">Prompt-Engineer zu werden<\/a>, m&uuml;ssen Sie lernen, Ihre W&uuml;nsche so zu beschreiben, dass das Tool darauf reagieren kann.<\/p><p>Beginnen Sie mit der Kernidee in einem Satz und definieren Sie dann die wichtigsten Details. Ihr Prompt sollte f&uuml;nf Fragen beantworten: Was Sie entwickeln, f&uuml;r wen es bestimmt ist, was es tun soll, was es verwenden soll und was zu vermeiden ist.<\/p><p>Hier ist ein Beispiel f&uuml;r eine schwache Eingabeaufforderung:<\/p><p><em>&bdquo;Erstelle eine Fitness-App<\/em>.&ldquo;<\/p><p><a href=\"\/de\/tutorials\/wie-man-ki-prompts-schreibt\">So verfassen Sie eine gute KI-Anweisung<\/a>:<\/p><p><em>&bdquo;Entwickle eine mobilfreundliche Fitness-Tracking-App f&uuml;r Anf&auml;nger. Integriere ein Dashboard, ein Trainingsprotokoll, eine Fortschrittsgrafik und eine Profilseite. Verwende React f&uuml;r das Frontend und halte das Design klar und einfach. Zeige Beispieldaten an. F&uuml;ge keine sozialen Funktionen oder Zahlungsabl&auml;ufe hinzu<\/em>.&ldquo;<\/p><p>Um alles m&ouml;glichst konkret zu halten, m&uuml;ssen Sie diese drei Dinge klar beschreiben: Funktionen, Eingaben und Ausgaben.<\/p><p><strong>Funktionen <\/strong>sind die Bestandteile des Produkts. Eine Budgetierungs-App ben&ouml;tigt beispielsweise eine Ausgabenverfolgung, monatliche Zusammenfassungen und Kategoriefilter. Eine Restaurant-Website ben&ouml;tigt eine Speisekarte, ein Buchungsformular, eine Karte und &Ouml;ffnungszeiten.<\/p><p><strong>Eingaben <\/strong>sind die Informationen, die der Benutzer eingibt, damit die App etwas Sinnvolles ausf&uuml;hren kann. Ein Hypothekenrechner ben&ouml;tigt Zahlen wie den Darlehensbetrag, den Zinssatz und die Laufzeit. Ohne diese Angaben kann er keine Berechnungen durchf&uuml;hren. Ein Lebenslauf-Generator ben&ouml;tigt Angaben wie den beruflichen Werdegang, die Ausbildung und die F&auml;higkeiten. Ohne diese Informationen kann er keinen Lebenslauf erstellen.<\/p><p><strong>Ausgaben <\/strong>sind das, was der Benutzer zur&uuml;ckerh&auml;lt. Ein Hypothekenrechner zeigt die monatliche Rate, die Gesamtr&uuml;ckzahlung und die Zinsen an. Ein Lebenslauf-Generator erstellt eine formatierte Vorschau und eine herunterladbare Datei.<\/p><p>Wenn Sie diese drei Punkte klar definieren, hat das Tool gen&uuml;gend Orientierung, um etwas Brauchbares zu erstellen.<\/p><p>Beziehen Sie die Sprache und das Framework mit ein, wenn diese das Ergebnis beeinflussen. Dies verhindert, dass das Tool unerw&uuml;nschte Entscheidungen trifft.<\/p><p>Geben Sie genau an, was Sie verwenden m&ouml;chten:<\/p><ul class=\"wp-block-list\">\n<li><em>&bdquo;Erstelle dies in Python mit <\/em>Flask&ldquo;<\/li>\n\n\n\n<li><em>&bdquo;Verwende React mit einfacher Zustandsverwaltung<\/em>&ldquo;<\/li>\n\n\n\n<li><em>&bdquo;Behalte dies als statisches HTML-, CSS- und JavaScript-Projekt <\/em>bei&ldquo;<\/li>\n<\/ul><p>Eine Eingabeaufforderung mit klarer technischer Vorgabe w&uuml;rde etwa so aussehen:<\/p><p><em>&bdquo;Erstelle einen einfachen Ausgaben-Tracker in React. F&uuml;ge ein Formular zum Hinzuf&uuml;gen von Ausgaben, eine Listenansicht und eine monatliche Gesamtsumme hinzu. Speicher die Daten im lokalen Speicher. Verwende reines CSS. Gestalte das Layout mobilfreundlich<\/em>.&ldquo;<\/p><p>Das Anleiten ist ein iterativer Prozess. Beginnen Sie mit einer soliden Grundlage und verbessern Sie diese dann Schritt f&uuml;r Schritt.<\/p><p>Wenn das Ergebnis fast fertig ist, geben Sie direkte Korrekturen an, anstatt alles neu zu schreiben. Weisen Sie darauf hin, was ge&auml;ndert werden muss.<\/p><p>Hier ist eine einfache Abfolge von Verfeinerungen:<\/p><p><strong>Erste Vorgabe: <\/strong><em>&bdquo;Entwickle einen Aufgabenmanager f&uuml;r Sch&uuml;ler mit einem Dashboard, einer Aufgabenliste und Erinnerungen an F&auml;lligkeitstermine<\/em>.&ldquo;<\/p><p><strong>Verfeinerung: <\/strong><em>&bdquo;Vereinfache das Dashboard. Zeige nur anstehende, &uuml;berf&auml;llige und erledigte Aufgaben an. Vergr&ouml;&szlig;ere den Abstand und verwende gr&ouml;&szlig;ere Schrift<\/em>.&ldquo;<\/p><p><strong>Verfeinerung: <\/strong><em>&bdquo;F&uuml;ge einen Fachfilter und Farbetiketten f&uuml;r die Priorit&auml;t hinzu. Halte das Layout minimalistisch<\/em>.&ldquo;<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a1b2d1f7978b\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a1b2d1f7978b\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"572\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/05\/how-to-learn-vibe-cosing-image2-1024x572.jpg\" alt=\" Diagramm zur Eingabeaufforderungsoptimierung in KI-Systemen\" class=\"wp-image-11889\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/05\/how-to-learn-vibe-cosing-image2.jpg 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/05\/how-to-learn-vibe-cosing-image2-300x167.jpg 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/05\/how-to-learn-vibe-cosing-image2-768x429.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p>Jeder Schritt verbessert einen bestimmten Teil des Ergebnisses, w&auml;hrend das, was bereits funktioniert, beibehalten wird.<\/p><p>Sie k&ouml;nnen auch den Ton und die Tiefe der Antwort steuern, indem Sie eine Rolle zuweisen. Bitten Sie das Tool, als Frontend-Entwickler, Produktdesigner oder Tutor zu agieren. Dies beeinflusst, wie die Ausgabe verfasst und erkl&auml;rt wird.<\/p><p>Verwenden Sie dieses Prompt-Muster als Ausgangspunkt:<\/p><p><em>&bdquo;Entwickle [Projekt] f&uuml;r [Benutzer]. Beziehe [Funktionen] ein. Der Benutzer gibt [Eingaben] ein und erh&auml;lt [Ausgaben]. Verwende [Sprache\/Framework]. Behalte den [Stil] bei. Beschr&auml;nke das Projekt auf [Einschr&auml;nkungen]<\/em>.&ldquo;<\/p><p>Beispiel:<\/p><p><em>&bdquo;Entwickle eine Web-App zur Mahlzeitenplanung f&uuml;r vielbesch&auml;ftigte Eltern. Beziehe einen Wochenplaner, Rezeptkarten, eine Einkaufsliste und gespeicherte Mahlzeiten ein. Der Benutzer gibt Ern&auml;hrungsvorlieben und Zutaten ein und erh&auml;lt daraufhin einen Wochenplan. Verwende Next.js. Halte das Design einfach und mobilfreundlich. Beschr&auml;nke dies auf einen Frontend-Prototyp mit Beispieldaten<\/em>.&ldquo;<\/p><h2 class=\"wp-block-heading\" id=\"h-4-ihr-erstes-vibe-coding-projekt-erstellen\"><strong>4. Ihr erstes Vibe-Coding-Projekt erstellen<\/strong><\/h2><p>Entdecken Sie Ideen f&uuml;r Web-Apps und w&auml;hlen Sie ein kleines Projekt aus, das Sie als Erstes erstellen k&ouml;nnen, damit Sie den Arbeitsablauf erlernen, ohne sich in zu vielen Details zu verlieren.<\/p><p>Nehmen wir an, Sie m&ouml;chten als erstes Projekt eine <strong>To-Do-Listen-App<\/strong> erstellen. Diese ist einfach, leicht zu testen und deckt die Kernmuster ab, die Sie in den meisten Projekten verwenden werden.<\/p><p>Beginnen Sie mit einem klaren Ziel: Der Benutzer kann eine Aufgabe hinzuf&uuml;gen, sie als erledigt markieren und sie l&ouml;schen.<\/p><p>Schreiben Sie eine Aufgabenstellung wie diese:<\/p><p><em>&bdquo;Entwickle eine mobilfreundliche To-Do-Listen-App. Erm&ouml;gliche es Benutzern, Aufgaben hinzuzuf&uuml;gen, als erledigt zu markieren und zu l&ouml;schen. Verwende einfaches HTML, CSS und JavaScript. Speicher Aufgaben im lokalen Speicher. Halte das Design &uuml;bersichtlich und benutzerfreundlich<\/em>.&ldquo;<\/p><p>Dies bietet Ihnen einen funktionierenden Ausgangspunkt ohne unn&ouml;tige Komplexit&auml;t.<\/p><p>Sobald Sie den Code erhalten haben, k&ouml;nnen Sie ihn sofort ausf&uuml;hren. Sie sollten sich das Ergebnis ansehen, bevor Sie &Auml;nderungen vornehmen.<\/p><ul class=\"wp-block-list\">\n<li>Klicken Sie in <strong>Replit <\/strong>oder<strong> Hostinger Horizons <\/strong>auf &bdquo;Ausf&uuml;hren&ldquo; oder &bdquo;Vorschau&ldquo;.<\/li>\n\n\n\n<li>&Ouml;ffnen Sie in <strong>VS Code <\/strong>die HTML-Datei in Ihrem Browser oder verwenden Sie ein Tool wie Live Server<\/li>\n<\/ul><p>&Ouml;ffnen Sie die App und nutzen Sie sie wie ein echter Benutzer.<\/p><ul class=\"wp-block-list\">\n<li>F&uuml;gen Sie einige Aufgaben hinzu.<\/li>\n\n\n\n<li>Markieren Sie einige als erledigt.<\/li>\n\n\n\n<li>L&ouml;schen Sie eine Aufgabe.<\/li>\n<\/ul><p>Testen Sie dann Grenzsituationen:<\/p><ul class=\"wp-block-list\">\n<li>F&uuml;gen Sie eine leere Aufgabe hinzu und beobachten Sie, was passiert.<\/li>\n\n\n\n<li>Aktualisieren Sie die Seite und pr&uuml;fen Sie, ob die Aufgaben gespeichert wurden.<\/li>\n\n\n\n<li>Passen Sie die Bildschirmgr&ouml;&szlig;e an, um zu sehen, wie es auf Mobilger&auml;ten aussieht.<\/li>\n<\/ul><p>Beheben Sie jeweils ein Problem nach dem anderen, wenn etwas nicht funktioniert. Geben Sie klare Anweisungen auf der Grundlage dessen, was Sie sehen.<\/p><ul class=\"wp-block-list\">\n<li><em>&bdquo;Der L&ouml;schknopf entfernt keine Aufgaben. Behebe den Fehler<\/em>.&ldquo;<\/li>\n\n\n\n<li><em>&bdquo;Aufgaben verschwinden nach dem Aktualisieren. Speicher sie im lokalen Speicher<\/em>.&ldquo;<\/li>\n\n\n\n<li><em>&bdquo;Das Layout wirkt auf Mobilger&auml;ten beengt. F&uuml;ge Abst&auml;nde hinzu und staple Elemente vertikal<\/em>.&ldquo;<\/li>\n<\/ul><p>Nehmen Sie sich nach jedem Schritt ein paar Minuten Zeit, um den Code zu lesen. Schauen Sie sich an, wie Aufgaben gespeichert werden, wie Schaltfl&auml;chen Aktionen ausl&ouml;sen und wie Aktualisierungen auf dem Bildschirm angezeigt werden. Wenn etwas unklar ist, dann bitten Sie um eine kurze Erkl&auml;rung in einfacher Sprache.<\/p><p>Wenn Ihnen der Code zu komplex erscheint, vereinfachen Sie ihn mit Aufforderungen wie:<\/p><ul class=\"wp-block-list\">\n<li><em>&bdquo;Schreibe dies mit kleineren Funktionen um<\/em>.&ldquo;<\/li>\n\n\n\n<li><em>&bdquo;Verwende einfachere Variablennamen<\/em>.&ldquo;<\/li>\n\n\n\n<li><em>&bdquo;F&uuml;ge Kommentare hinzu, um jeden Teil zu erkl&auml;ren<\/em>&ldquo;<\/li>\n<\/ul><p>Dieses erste Projekt vermittelt Ihnen den gesamten Ablauf der Entwicklung einer App mit KI: Verfassen Sie eine Eingabeaufforderung, f&uuml;hren Sie den Code aus, testen Sie ihn, beheben Sie Fehler und verbessern Sie ihn Schritt f&uuml;r Schritt. Sobald Sie diesen Zyklus abgeschlossen haben, k&ouml;nnen Sie denselben Prozess auf jede Idee anwenden, die Sie umsetzen m&ouml;chten.<\/p><h2 class=\"wp-block-heading\" id=\"h-5-ki-generierten-code-lesen-und-verstehen-lernen\"><strong>5. KI-generierten Code lesen und verstehen lernen<\/strong><\/h2><p>Beginnen Sie damit, den Code in kleinen Abschnitten zu lesen. Konzentrieren Sie sich jeweils auf einen Block und stellen Sie sich eine einfache Frage: Was bewirkt dieser?<\/p><p>Teilen Sie den Code in drei Kernelemente auf: Variablen, Funktionen und Logik.<\/p><p><strong>Variablen <\/strong>speichern Daten. Sie enthalten die Informationen, die Ihre App ben&ouml;tigt, um zu funktionieren. In einer To-Do-App k&ouml;nnte eine Variable beispielsweise die Liste der Aufgaben oder den Text aus einem Eingabefeld speichern. Wenn Sie <strong>&bdquo;let tasks = []<\/strong>&ldquo; sehen, bedeutet das in der Regel, dass die App einen Speicherort f&uuml;r Aufgaben erstellt.<\/p><p><strong>Funktionen <\/strong>f&uuml;hren Aktionen aus. Jede Funktion &uuml;bernimmt eine Aufgabe. Sie k&ouml;nnten Funktionen wie <strong>&bdquo;addTask&ldquo;<\/strong>, <strong>&bdquo;deleteTask&ldquo; <\/strong>oder <strong>&bdquo;renderTasks&ldquo; <\/strong>sehen. Lesen Sie zuerst den Funktionsnamen und pr&uuml;fen Sie dann, welche Eingaben die Funktion ben&ouml;tigt und was sie ver&auml;ndert.<\/p><p><strong>Logik <\/strong>steuert Entscheidungen. Dazu geh&ouml;ren Bedingungen, Schleifen und Ereignisausl&ouml;ser. Wenn Sie <strong>&bdquo;if (email === &bdquo;&ldquo;)&ldquo; <\/strong>sehen, pr&uuml;ft der Code auf eine leere Eingabe. Wenn Sie eine Schleife sehen, wiederholt der Code eine Aktion &uuml;ber eine Liste hinweg.<\/p><p>Hier ist ein einfaches Beispiel:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function addTask(taskText) {\n  if (!taskText) return;\n\n  const task = {\n    text: taskText,\n    done: false\n  };\n\n  tasks.push(task);\n}<\/pre><p>Sie k&ouml;nnen dies Schritt f&uuml;r Schritt aufschl&uuml;sseln:<\/p><ul class=\"wp-block-list\">\n<li><strong>function addTask(taskText) <\/strong>erstellt eine Funktion namens addTask. Diese Funktion wird ausgef&uuml;hrt, wenn die App versucht, eine neue Aufgabe hinzuzuf&uuml;gen.<\/li>\n\n\n\n<li><strong>taskText <\/strong>ist der Wert, der an die Funktion &uuml;bergeben wird. In diesem Fall handelt es sich um den vom Benutzer eingegebenen Text.<\/li>\n\n\n\n<li><strong>if (!taskText) return; <\/strong>pr&uuml;ft, ob die Eingabe leer ist. Wenn kein Text vorhanden ist, bricht die Funktion an dieser Stelle ab.<\/li>\n\n\n\n<li><strong>const task = { &hellip; } <\/strong>erstellt ein neues Aufgabenobjekt und speichert es in einer Variablen namens task.<\/li>\n\n\n\n<li><strong>text: taskText <\/strong>setzt den Aufgaben-Text auf den vom Benutzer eingegebenen Wert.<\/li>\n\n\n\n<li><strong>done: false <\/strong>setzt den Fertigstellungsstatus auf &bdquo;false&ldquo;, was bedeutet, dass die Aufgabe als unvollst&auml;ndig beginnt.<\/li>\n\n\n\n<li><strong>tasks.push(task); <\/strong>f&uuml;gt das neue Aufgabenobjekt zur Aufgabenliste hinzu.<\/li>\n<\/ul><p>Verbinden Sie als N&auml;chstes den Code mit dem, was auf dem Bildschirm geschieht. W&auml;hlen Sie eine Aktion aus und verfolgen Sie deren Ablauf durch den Code. Klicken Sie auf eine Schaltfl&auml;che, suchen Sie die Funktion, die dadurch ausgel&ouml;st wird, pr&uuml;fen Sie, welche Daten sich &auml;ndern, und beobachten Sie, wie sich die Benutzeroberfl&auml;che aktualisiert. So erhalten Sie ein umfassendes Bild davon, wie die App funktioniert.<\/p><p>Bitten Sie die KI, bestimmte Teile des Codes zu erkl&auml;ren, indem Sie Aufforderungen wie die folgenden verwenden:<\/p><ul class=\"wp-block-list\">\n<li><em>&bdquo;Erkl&auml;re diese Funktion in einfachen Worten<\/em>.&ldquo;<\/li>\n\n\n\n<li>&bdquo;<em>Was speichert diese Variable und wo wird sie verwendet?<\/em>&ldquo;<\/li>\n\n\n\n<li>&bdquo;<em>Was passiert, nachdem diese Schaltfl&auml;che angeklickt wurde?<\/em>&ldquo;<\/li>\n\n\n\n<li><em>&bdquo;Schreibe dies mit klareren Namen um<\/em>.&ldquo;<\/li>\n\n\n\n<li><em>&bdquo;F&uuml;ge kurze Kommentare hinzu, um jeden Schritt zu erkl&auml;ren<\/em>.&ldquo;<\/li>\n<\/ul><p>Sie k&ouml;nnen auch &uuml;berpr&uuml;fen, ob der Code Ihrem Ziel entspricht:<\/p><ul class=\"wp-block-list\">\n<li>&bdquo;<em>Werden die Daten nach dem Aktualisieren gespeichert?<\/em>&ldquo;<\/li>\n\n\n\n<li><em>&bdquo;Kann diese Funktion einfacher gestaltet werden?<\/em>&ldquo;<\/li>\n\n\n\n<li><em>&bdquo;Gibt es hier etwas Unn&ouml;tiges?<\/em>&ldquo;<\/li>\n<\/ul><p>Diese Fragen helfen Ihnen, den Code zu bewerten, anstatt ihn unver&auml;ndert zu akzeptieren.<\/p><p>Von KI generierter Code enth&auml;lt oft versteckte Annahmen. Eine Funktion erwartet m&ouml;glicherweise Daten in einem bestimmten Format oder st&uuml;tzt sich auf etwas, das nicht definiert ist. Fragen Sie direkt: &bdquo;Liste alle Annahmen auf, die dieser Code &uuml;ber die Daten und die Umgebung trifft.&ldquo;<\/p><p>Sobald Sie diese Annahmen kennen, wissen Sie, was Sie testen m&uuml;ssen.<\/p><p>Beim Testen sehen Sie, ob alles reibungslos zusammenspielt. F&uuml;hren Sie den Code aus und pr&uuml;fen Sie, ob er sich wie erwartet verh&auml;lt. Wenn eine Funktion leere Eingaben blockieren soll, dann versuchen Sie, ein leeres Feld einzugeben. Wenn ein Wert aktualisiert werden soll, dann l&ouml;sen Sie die Aktion aus und &uuml;berpr&uuml;fen Sie das Ergebnis.<\/p><p>Sollte Ihnen etwas unklar erscheinen, dann vereinfachen Sie den Code, bevor Sie fortfahren.<\/p><p>Vergleichen Sie diese beiden Versionen:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function x(a) {\n  if (a.length &gt; 0) {\n    let y = a.map(z =&gt; z.price * z.qty);\n    return y.reduce((m, n) =&gt; m + n, 0);\n  }\n  return 0;\n}<\/pre><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function calculateCartTotal(items) {\n  if (items.length === 0) return 0;\n\n  const itemTotals = items.map(item =&gt; item.price * item.quantity);\n  return itemTotals.reduce((sum, total) =&gt; sum + total, 0);\n}<\/pre><p>Beide Versionen bewirken dasselbe, doch die zweite ist leichter zu lesen, da die Namen erkl&auml;ren, was geschieht. Wenn Code klar ist, k&ouml;nnen Sie ihn schneller verstehen und sicherere &Auml;nderungen vornehmen.<\/p><p>Ihr Ziel ist es, zu verstehen, was der Code speichert, was er tut und welches Ergebnis er liefert. Sobald Sie dies mit eigenen Worten erkl&auml;ren k&ouml;nnen, k&ouml;nnen Sie ihn sicher &auml;ndern und verbessern.<\/p><h2 class=\"wp-block-heading\" id=\"h-6-ihre-projekte-debuggen-und-verfeinern\">6. Ihre Projekte debuggen und verfeinern<\/h2><p>Debuggen und verfeinern Sie Ihre Projekte, indem Sie jeweils ein Problem beheben, jede &Auml;nderung testen und in kleinen Schritten voranschreiten.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a1b2d1f7ce49\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a1b2d1f7ce49\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"572\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/05\/how-to-learn-vibe-coding-image3-1024x572.jpg\" alt=\"Diagramm-&Uuml;bersicht, um KI-generierten Code zu debuggen\" class=\"wp-image-11888\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/05\/how-to-learn-vibe-coding-image3-1024x572.jpg 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/05\/how-to-learn-vibe-coding-image3-300x167.jpg 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/05\/how-to-learn-vibe-coding-image3-768x429.jpg 768w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/05\/how-to-learn-vibe-coding-image3.jpg 1376w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p><strong>Beginnen Sie mit dem sichtbaren Fehler. <\/strong>Schauen Sie sich an, was nicht funktioniert. Die Seite bleibt m&ouml;glicherweise leer, ein Button reagiert nicht oder ein Formular liefert das falsche Ergebnis. Beginnen Sie mit dem, was Sie auf dem Bildschirm sehen k&ouml;nnen.<\/p><p><strong>Reproduzieren Sie den Fehler absichtlich. <\/strong>Wiederholen Sie genau die Schritte, die das Problem verursacht haben. Klicken Sie auf denselben Button, geben Sie dieselben Werte ein und befolgen Sie dieselbe Reihenfolge.<\/p><p>&Auml;ndern Sie dann jeweils eine Eingabe, um herauszufinden, was das Problem ausl&ouml;st. Probieren Sie ein leeres Feld, einen l&auml;ngeren Wert oder ein anderes Format aus. Wenn der Fehler nur unter bestimmten Bedingungen auftritt, haben Sie die Ursache identifiziert.<\/p><p><strong>&Uuml;berpr&uuml;fen Sie die Fehlermeldung in der Konsole oder im Terminal. <\/strong>&Ouml;ffnen Sie die Entwicklertools Ihres Browsers oder sehen Sie im Terminal nach, wo Ihre App ausgef&uuml;hrt wird. Wenn etwas nicht funktioniert, wird oft eine rote Fehlermeldung angezeigt.<\/p><p>Lesen Sie die Meldung und achten Sie auf Folgendes:<\/p><ul class=\"wp-block-list\">\n<li>Dateiname<\/li>\n\n\n\n<li>Zeilennummer<\/li>\n\n\n\n<li>Art des Fehlers<\/li>\n<\/ul><p>Wenn Sie beispielsweise &bdquo;<strong>undefined<\/strong>&ldquo; sehen, versucht der Code, einen Wert zu verwenden, der nicht existiert. Wenn Sie einen Syntaxfehler sehen, ist etwas falsch geschrieben. Diese Hinweise zeigen Ihnen, wo Sie im Code nachsehen m&uuml;ssen.<\/p><p><strong>Verfolgen Sie die Benutzeraktion durch den Code. <\/strong>Beginnen Sie mit dem Klick oder der Eingabe, folgen Sie der dadurch ausgel&ouml;sten Funktion, pr&uuml;fen Sie, welche Daten sich &auml;ndern, und &uuml;berpr&uuml;fen Sie, wie sich die Benutzeroberfl&auml;che aktualisiert.<\/p><p><strong>&Uuml;berpr&uuml;fen Sie die Daten an wichtigen Punkten. <\/strong>Sehen Sie sich die tats&auml;chlichen Werte an, mit denen Ihr Code w&auml;hrend der Ausf&uuml;hrung arbeitet. Wenn ein Ergebnis falsch aussieht, &uuml;berpr&uuml;fen Sie, was in die Berechnung einflie&szlig;t und was zwischendurch passiert.<\/p><p>Wenn beispielsweise eine Summe 0 statt 50 anzeigt, dann pr&uuml;fen Sie:<\/p><ul class=\"wp-block-list\">\n<li>Welche Werte an die Funktion &uuml;bergeben werden<\/li>\n\n\n\n<li>Wie diese Werte vor der Berechnung aussehen<\/li>\n\n\n\n<li>Wie das Ergebnis unmittelbar nach der Berechnung aussieht<\/li>\n<\/ul><p>Dies hilft Ihnen dabei, festzustellen, wo sich der Wert &auml;ndert oder wo ein Fehler auftritt.<\/p><p><strong>Achten Sie auf h&auml;ufige KI-Fehler<\/strong>, wie zum Beispiel:<\/p><ul class=\"wp-block-list\">\n<li><strong>Fehlende Ereignis-Listener <\/strong>&ndash; auf dem Bildschirm erscheint eine Schaltfl&auml;che, aber es passiert nichts, wenn Sie darauf klicken.<\/li>\n\n\n\n<li><strong>Variablen, die verwendet werden, bevor sie definiert sind <\/strong>&ndash; der Code versucht, einen Wert zu verwenden, der noch nicht erstellt wurde, was h&auml;ufig zu <strong>undefinierten <\/strong>Fehlern f&uuml;hrt<\/li>\n\n\n\n<li><strong>Nicht &uuml;bereinstimmende Funktions- oder Variablennamen <\/strong>&ndash; der Code ruft <strong>addTask<\/strong> auf, aber die eigentliche Funktion hei&szlig;t <strong>createTask.<\/strong><\/li>\n\n\n\n<li><strong>Daten, die in einem Format gespeichert und in einem anderen gelesen werden <\/strong>&ndash; Daten werden als Text gespeichert, aber wie eine Zahl behandelt, was Berechnungen beeintr&auml;chtigt.<\/li>\n\n\n\n<li><strong>Die Benutzeroberfl&auml;che wird nach Daten&auml;nderungen nicht aktualisiert <\/strong>&ndash; die Daten werden korrekt aktualisiert, aber auf dem Bildschirm werden weiterhin alte Werte angezeigt.<\/li>\n<\/ul><p><strong>Verwenden Sie KI, um das Problem zu untersuchen. <\/strong>Teilen Sie den fehlerhaften Code und beschreiben Sie das Verhalten genau:<\/p><ul class=\"wp-block-list\">\n<li><em>&bdquo;Diese Schaltfl&auml;che reagiert nicht, wenn man darauf klickt. Finde das Problem<\/em>.&ldquo;<\/li>\n\n\n\n<li>&bdquo;<em>Diese Funktion gibt <\/em><strong><em>undefined<\/em><\/strong><em> zur&uuml;ck<\/em><strong><em>. <\/em><\/strong><em>Wo geht der Wert verloren?<\/em>&ldquo;<\/li>\n\n\n\n<li><em>&bdquo;&Uuml;berpr&uuml;fe diese Logik, wenn das Eingabefeld leer ist<\/em>.&ldquo;<\/li>\n<\/ul><p><strong>F&uuml;hren Sie nach jeder Korrektur einen erneuten Test durch. <\/strong>F&uuml;hren Sie dieselbe Aktion erneut aus und vergewissern Sie sich, dass das Problem behoben ist. &Uuml;berpr&uuml;fen Sie anschlie&szlig;end zusammenh&auml;ngende Funktionen, um sicherzustellen, dass nichts anderes beeintr&auml;chtigt wurde.<\/p><p><strong>Testen Sie Grenzf&auml;lle. <\/strong>Probieren Sie leere Eingaben, gro&szlig;e Werte, doppelte Eintr&auml;ge und verschiedene Bildschirmgr&ouml;&szlig;en aus. So k&ouml;nnen Sie sicherstellen, dass die Korrektur im realen Einsatz funktioniert.<\/p><p><strong>Bereinigen Sie den Code, sobald die Funktion funktioniert. <\/strong>Benennen Sie unklare Variablen um, teilen Sie lange Funktionen auf und entfernen Sie doppelten oder ungenutzten Code. Dies erleichtert zuk&uuml;nftige &Auml;nderungen.<\/p><h2 class=\"wp-block-heading\" id=\"h-7-reale-arbeitsablaufe-uben\"><strong>7. Reale Arbeitsabl&auml;ufe &uuml;ben<\/strong><\/h2><p>&Uuml;ben Sie reale Arbeitsabl&auml;ufe, indem Sie Projekte erstellen, die eine tats&auml;chliche Aufgabe von Anfang bis Ende l&ouml;sen.<\/p><p>Nehmen wir an, Sie entwickeln einen Rechnungsgenerator f&uuml;r Freiberufler. Der Benutzer gibt einen Kundennamen, einen Projektnamen, einen Stundensatz und die geleisteten Arbeitsstunden ein. Die App berechnet den Gesamtbetrag und zeigt eine &uuml;bersichtliche Rechnungs&uuml;bersicht an. Dies bietet Ihnen einen realistischen Arbeitsablauf: Daten erfassen, verarbeiten, das Ergebnis anzeigen, testen und verbessern.<\/p><p>Arbeiten Sie das Projekt in derselben Reihenfolge durch, wie Sie es in einem echten Entwicklungszyklus tun w&uuml;rden.<\/p><ul class=\"wp-block-list\">\n<li><strong>Definieren Sie die Aufgabe klar<\/strong>. Beginnen Sie mit einer kurzen Beschreibung dessen, was das Tool leisten soll. In diesem Fall: &bdquo;Erstelle einen einfachen Rechnungsgenerator f&uuml;r Freiberufler, der Projektdetails erfasst, den Gesamtbetrag berechnet und eine gebrauchsfertige Rechnungs&uuml;bersicht anzeigt.&ldquo;<\/li>\n\n\n\n<li><strong>Erstellen Sie die erste Version. <\/strong>Beginnen Sie mit der kleinsten Version, die funktioniert. F&uuml;r dieses Projekt bedeutet das ein Formular mit Feldern f&uuml;r Kundenname, Projektname, Stundensatz und geleistete Stunden sowie eine Schaltfl&auml;che zur Berechnung der Gesamtsumme.<\/li>\n\n\n\n<li><strong>F&uuml;hren Sie den Code fr&uuml;hzeitig aus. <\/strong>Testen Sie den grundlegenden Ablauf, sobald die erste Version fertig ist. Geben Sie Beispielwerte ein, klicken Sie auf die Schaltfl&auml;che und &uuml;berpr&uuml;fen Sie, ob die Rechnungs&uuml;bersicht den korrekten Gesamtbetrag anzeigt.<\/li>\n\n\n\n<li><strong>Beheben Sie die ersten Probleme. <\/strong>&Uuml;berpr&uuml;fen Sie die Berechnung, leere Felder und die Ausgabeformatierung. Wenn der Gesamtbetrag falsch ist, &uuml;berpr&uuml;fen Sie die Werte f&uuml;r Stundensatz und Arbeitsstunden. Wenn das Formular leere Felder akzeptiert, f&uuml;gen Sie eine Validierung hinzu. Wenn die &Uuml;bersicht schwer lesbar ist, &uuml;berarbeiten Sie das Layout.<\/li>\n\n\n\n<li><strong>Verfeinern Sie die Ausgabe. <\/strong>Sobald das Tool funktioniert, verbessern Sie die Benutzererfahrung. F&uuml;gen Sie klarere Beschriftungen, besseren Zeilenabstand, &uuml;bersichtlichere &Uuml;berschriften und eine besser lesbare W&auml;hrungsformatierung hinzu. &Uuml;berpr&uuml;fen Sie anschlie&szlig;end den Code und benennen Sie unklare Variablen um oder teilen Sie gro&szlig;e Funktionen auf.<\/li>\n\n\n\n<li><strong>F&uuml;gen Sie jeweils <\/strong>nur<strong> eine neue Funktion hinzu. <\/strong>Erweitern Sie das Tool erst, wenn die Basisversion einwandfrei funktioniert. Erw&auml;gen Sie die Hinzuf&uuml;gung von Steuerfeldern, Rechnungsnummern, F&auml;lligkeitsdaten, PDF-Export oder einer M&ouml;glichkeit, fr&uuml;here Rechnungen zu speichern.<\/li>\n<\/ul><p>Ihre erste Version muss lediglich beweisen, dass die Idee funktioniert. Verbessern Sie danach jeweils eine Ebene nach der anderen. Optimieren Sie zun&auml;chst die Logik, bereinigen Sie die Benutzeroberfl&auml;che und machen Sie den Code lesbarer. F&uuml;gen Sie dann kleine Funktionen hinzu, die das Projekt n&uuml;tzlicher machen.<\/p><h2 class=\"wp-block-heading\" id=\"h-warum-vibe-coding-funktioniert\"><strong>Warum Vibe-Coding funktioniert<\/strong><\/h2><p>Vibe-Coding funktioniert, weil es den Weg von einer Idee zu einem funktionierenden Ergebnis verk&uuml;rzt. Sie beschreiben, was Sie wollen, erhalten einen brauchbaren Entwurf und verbessern diesen Schritt f&uuml;r Schritt.<\/p><p>Der Unterschied zwischen Vibe-Coding und traditionellem Programmieren liegt darin, wie der Prozess beginnt. Traditionelles Programmieren erfordert eine manuelle Einrichtung und den Aufbau von Strukturen St&uuml;ck f&uuml;r St&uuml;ck. Vibe-Coding bietet Ihnen einen Ausgangspunkt, der bereits funktioniert, sodass Sie ihn sofort testen und verbessern k&ouml;nnen.<\/p><p>Die Geschwindigkeit entsteht dadurch, dass man mit einem Entwurf statt mit einer leeren Datei beginnt.<\/p><p>Nehmen wir als Beispiel einen einfachen Budgetrechner. In einem traditionellen Arbeitsablauf w&uuml;rden Sie das Projekt einrichten, den Code strukturieren, die Eingaben verkn&uuml;pfen, die Berechnung durchf&uuml;hren und dann die Ausgabe gestalten.<\/p><p>Mit Vibe-Coding k&ouml;nnen Sie einen funktionierenden Rechner mit Feldern f&uuml;r Einnahmen und Ausgaben generieren, ihn ausf&uuml;hren und sich darauf konzentrieren, sein Verhalten zu verstehen. Dadurch bleibt der Lernprozess an etwas Konkretes gebunden.<\/p><p>F&uuml;r erfahrene Entwickler liegt der Vorteil anders. Vibe-Coding beschleunigt Routinearbeiten. Es kann eine erste Struktur generieren, sich wiederholende Funktionen schreiben, Korrekturen vorschlagen und dabei helfen, bestehenden Code zu bereinigen.<\/p><p>Dadurch k&ouml;nnen sich Entwickler auf Entscheidungen auf h&ouml;herer Ebene konzentrieren, wie beispielsweise Architektur, Leistung und das allgemeine Produktverhalten.<\/p><p>Derselbe Ansatz l&auml;sst sich auch auf komplexere Projekte &uuml;bertragen. Ihre Arbeitsweise &auml;ndert sich nicht, wenn Sie zu anderen Tools oder Technologien wechseln.<\/p><p>Der gleiche Arbeitsablauf gilt f&uuml;r alle Sprachen und Frameworks. Sie beschreiben das Ziel, legen die Rahmenbedingungen fest, &uuml;berpr&uuml;fen das Ergebnis und verfeinern es.<\/p><p>Dies funktioniert unabh&auml;ngig davon, ob Sie ein Python-Skript, eine JavaScript-Webanwendung oder einen Backend-Dienst erstellen. Es gilt auch f&uuml;r eine Reihe von Frameworks, von einfachem HTML und CSS bis hin zu React, Next.js und Flask.<\/p><p>Da der Prozess konsistent bleibt, k&ouml;nnen Sie zwischen Tools und Projekten wechseln, ohne Ihre Arbeitsweise zu &auml;ndern. Das macht Vibe Coding f&uuml;r eine Vielzahl von Aufgaben n&uuml;tzlich, darunter Automatisierung, Websites, Dashboards und interne Tools.<\/p><p>Vibe Coding funktioniert am besten, wenn Sie das Ergebnis als Entwurf betrachten. Sie geben die Richtung vor, testen das Verhalten und entscheiden, was als N&auml;chstes ge&auml;ndert werden soll. Das Tool hilft Ihnen, schneller voranzukommen, w&auml;hrend Ihre Entscheidungen das Endergebnis pr&auml;gen.<\/p><h2 class=\"wp-block-heading\" id=\"h-bewahrte-verfahren-fur-vibe-coding\"><strong>Bew&auml;hrte Verfahren f&uuml;r Vibe-Coding<\/strong><\/h2><p>Befolgen Sie diese Best Practices f&uuml;r Vibe Coding, um schneller zu entwickeln und durch praktische Arbeit besser darin zu werden, Eingabeaufforderungen zu verfassen:<\/p><ul class=\"wp-block-list\">\n<li><strong>Beginnen Sie mit einem klaren Ziel. <\/strong>Definieren Sie in ein oder zwei S&auml;tzen, was Sie erstellen m&ouml;chten, bevor Sie die Eingabeaufforderung eingeben. Ein klares Ziel f&uuml;hrt zu genaueren Ergebnissen und weniger &Uuml;berarbeitungen.<\/li>\n\n\n\n<li><strong>Halten Sie die Prompts spezifisch und strukturiert. <\/strong>Beziehen Sie Funktionen, Eingaben, Ausgaben und Einschr&auml;nkungen mit ein. Dies reduziert das R&auml;tselraten und liefert Ihnen eine brauchbare erste Version.<\/li>\n\n\n\n<li><strong>Entwickeln Sie in kleinen Schritten. <\/strong>Beginnen Sie mit einer funktionierenden Basisversion und verbessern Sie diese dann schrittweise, damit das Projekt &uuml;berschaubar und leichter zu debuggen bleibt.<\/li>\n\n\n\n<li><strong>F&uuml;hren Sie den <\/strong>Code<strong> fr&uuml;hzeitig aus und testen Sie ihn. <\/strong>F&uuml;hren Sie den Code so schnell wie m&ouml;glich aus, um das tats&auml;chliche Verhalten zu beobachten. Fr&uuml;hzeitiges Testen hilft Ihnen, Probleme zu erkennen, bevor sie sich ausbreiten.<\/li>\n\n\n\n<li><strong>Beheben Sie jeweils nur ein Problem. <\/strong>Konzentrieren Sie sich auf ein einzelnes Problem, wenden Sie eine gezielte Korrektur an und testen Sie erneut, um den Zusammenhang zwischen Ursache und Wirkung klar zu halten.<\/li>\n\n\n\n<li><strong>Lesen Sie den Code, bevor Sie ihn &auml;ndern. <\/strong>Verstehen Sie, was jeder Teil bewirkt, damit Sie sichere &Auml;nderungen vornehmen k&ouml;nnen, ohne funktionierende Funktionen zu beeintr&auml;chtigen.<\/li>\n\n\n\n<li><strong>Nutzen Sie KI als Unterst&uuml;tzer. <\/strong>Geben Sie ihr klare Aufgaben, &uuml;berpr&uuml;fen Sie das Ergebnis und leiten Sie den n&auml;chsten Schritt ein. Behandeln Sie jede Eingabeaufforderung als Teil eines fortlaufenden Dialogs.<\/li>\n\n\n\n<li><strong>Bitten Sie bei Bedarf um Erkl&auml;rungen. <\/strong>Fordern Sie einfache, schrittweise Erkl&auml;rungen f&uuml;r unklaren Code an. Dies hilft Ihnen, w&auml;hrend der Entwicklung zu lernen.<\/li>\n\n\n\n<li><strong>Setzen Sie Grenzen, um den Umfang zu kontrollieren<\/strong>. Halten Sie fr&uuml;he Versionen einfach, indem Sie komplexe Funktionen wie Authentifizierung oder Datenbanken vermeiden. Sie k&ouml;nnen sp&auml;ter erweitern, sobald der Kern funktioniert.<\/li>\n\n\n\n<li><strong>Testen Sie reale Anwendungsf&auml;lle. <\/strong>Verwenden Sie realistische Eingaben und Randf&auml;lle, um das Verhalten zu &uuml;berpr&uuml;fen und zu sehen, wie sich das Projekt au&szlig;erhalb idealer Bedingungen verh&auml;lt.<\/li>\n\n\n\n<li><strong>F&uuml;hren Sie eine Refaktorisierung durch, sobald es funktioniert. <\/strong>Bereinigen Sie Variablennamen, teilen Sie gro&szlig;e Funktionen auf und entfernen Sie ungenutzten Code.<\/li>\n\n\n\n<li><strong>Wiederholen Sie den Arbeitsablauf projekt&uuml;bergreifend. <\/strong>Erstellen Sie mehrere kleine Projekte nach demselben Verfahren. Durch Wiederholung erkennen Sie Muster und verbessern sich schneller.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-wie-man-vibe-coding-in-realen-projekten-anwendet\"><strong>Wie man Vibe-Coding in realen Projekten an<\/strong>wendet<\/h2><p>Wenden Sie Vibe-Coding in realen Projekten an, indem Sie es in Ihren Arbeitsablauf integrieren, nicht als einmalige Abk&uuml;rzung. Sie definieren weiterhin das Problem, entwickeln Schritt f&uuml;r Schritt, testen das Ergebnis und verfeinern den Code.<\/p><p>Behandeln Sie KI als ein Werkzeug, das Sie bei der Planung, der Erstellung, der Fehlerbehebung und der Verfeinerung einsetzen:<\/p><ul class=\"wp-block-list\">\n<li>Skizzieren Sie das Projekt, definieren Sie Funktionen und gliedern Sie die Arbeit in Schritte. Ein klarer Plan liefert Ihnen bessere Eingabeaufforderungen und vorhersehbarere Ergebnisse.<\/li>\n\n\n\n<li>Nutzen Sie KI, um einen funktionierenden Ausgangspunkt zu schaffen, anstatt alles von Grund auf neu zu schreiben. So erhalten Sie etwas, das Sie sofort ausf&uuml;hren, testen und verbessern k&ouml;nnen.<\/li>\n\n\n\n<li>F&uuml;gen Sie Funktionen hinzu, beheben Sie Fehler und verbessern Sie die Struktur Schritt f&uuml;r Schritt. So bleibt das Projekt auch bei zunehmendem Umfang stabil.<\/li>\n<\/ul><p>Vibe-Coding eignet sich besonders gut f&uuml;r Rapid Prototyping und die Erstellung von Minimal Viable Products (MVPs). Sie k&ouml;nnen eine Idee schnell in eine funktionierende Version umsetzen, was Ihnen hilft zu testen, ob das Konzept Sinn ergibt, bevor Sie mehr Zeit investieren.<\/p><p>So erstellen Sie ein MVP mit Vibe-Coding:<\/p><ul class=\"wp-block-list\">\n<li>Definieren Sie die Kernfunktion<\/li>\n\n\n\n<li>Erstellen Sie eine Basisversion<\/li>\n\n\n\n<li>Testen Sie den gesamten Benutzerablauf<\/li>\n\n\n\n<li>Beheben Sie Probleme<\/li>\n\n\n\n<li>Verbessern Sie die &Uuml;bersichtlichkeit und Benutzerfreundlichkeit<\/li>\n<\/ul><p>Wenn Sie beispielsweise ein Buchungstool entwickeln, dann beginnen Sie damit, ein Datum auszuw&auml;hlen und eine Buchung zu best&auml;tigen. Verschieben Sie Benachrichtigungen, Zahlungen und Benutzerkonten auf sp&auml;ter. So bleibt die erste Version fokussiert und benutzerfreundlich.<\/p><p>Wenn das Projekt w&auml;chst, wechseln Sie von der schnellen Generierung zu einer kontrollierteren Entwicklung. In dieser Phase konzentrieren Sie sich auf Struktur, Zuverl&auml;ssigkeit und Wartbarkeit:<\/p><ul class=\"wp-block-list\">\n<li><strong>&Uuml;berarbeiten Sie den generierten Code. <\/strong>Teilen Sie gro&szlig;e Funktionen auf, benennen Sie unklare Variablen um und ordnen Sie Dateien in einer klaren Struktur an.<\/li>\n\n\n\n<li><strong>F&uuml;gen Sie eine ordnungsgem&auml;&szlig;e Datenverarbeitung hinzu. <\/strong>Wechseln Sie bei Bedarf von tempor&auml;rem Speicher zu einer Datenbank oder API.<\/li>\n\n\n\n<li><strong>F&uuml;hren Sie Validierung und Fehlerbehandlung ein. <\/strong>Stellen Sie sicher, dass sich die App bei echten Benutzereingaben korrekt verh&auml;lt.<\/li>\n\n\n\n<li><strong>&Uuml;berpr&uuml;fen Sie Abh&auml;ngigkeiten und Leistung. <\/strong>Pr&uuml;fen Sie, wie sich die App skaliert und ob Teile des Codes optimiert werden m&uuml;ssen.<\/li>\n<\/ul><p>Die Skalierung eines Projekts bedeutet eine strengere Kontrolle &uuml;ber die Codebasis. Sie nutzen weiterhin KI, steuern diese jedoch sorgf&auml;ltiger und &uuml;berpr&uuml;fen jede &Auml;nderung.<\/p><p>Je gr&ouml;&szlig;er das Projekt wird, desto wichtiger wird die Dokumentation. Halten Sie schriftlich fest, welche Aufgaben die einzelnen Teile des Systems erf&uuml;llen, wie der Datenfluss verl&auml;uft und wie die wichtigsten Funktionen funktionieren. Dies erleichtert es, sp&auml;ter auf das Projekt zur&uuml;ckzugreifen oder es mit anderen zu teilen.<\/p><p>Versionskontrolle ist f&uuml;r die Verwaltung von &Auml;nderungen unerl&auml;sslich. Nutzen Sie Tools wie Git, um Aktualisierungen zu verfolgen, Versionen zu vergleichen und bei Fehlern zur&uuml;ckzusetzen. &Uuml;bernehmen Sie &Auml;nderungen in kleinen Schritten mit klaren Kommentaren, insbesondere bei der Arbeit mit KI-generiertem Code.<\/p><p>Nutzen Sie KI als best&auml;ndigen Kooperationspartner. Geben Sie ihr klare Aufgaben, &uuml;berpr&uuml;fen Sie die Ergebnisse und leiten Sie den n&auml;chsten Schritt ein.<\/p><p>Dieser Ansatz erm&ouml;glicht es Ihnen, Vibe-Coding in realen Projekten einzusetzen, ohne die Kontrolle &uuml;ber den Code oder die Ausrichtung des Produkts zu verlieren.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vibe Coding lernen und KI-gest\u00fctzte Entwicklung starten: So erstellen Sie Schritt-f\u00fcr-Schritt und ohne Vorkenntnisse komplexe Anwendungen. [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/de\/tutorials\/vibe-coding-lernen\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":612,"featured_media":11891,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Vibe Coding lernen: Einstieg und Grundlagen","rank_math_description":"Vibe Coding lernen und KI-gest\u00fctzte Entwicklung starten: So erstellen Sie Schritt-f\u00fcr-Schritt und ohne Vorkenntnisse komplexe Anwendungen.","rank_math_focus_keyword":"vibe coding lernen","footnotes":""},"categories":[36],"tags":[],"class_list":["post-11885","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hostinger-horizons"],"hreflangs":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/11885","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/users\/612"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/comments?post=11885"}],"version-history":[{"count":8,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/11885\/revisions"}],"predecessor-version":[{"id":12272,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/11885\/revisions\/12272"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/media\/11891"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/media?parent=11885"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/categories?post=11885"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/tags?post=11885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}