Webflow mit KI-Tools: No-Code-Webentwicklung, CMS und Animation · Tag 1 · Grundlagen · frei
Wie Websites entstehen und wo Webflow steht
Du baust in Webflow, ohne eine Zeile Code zu tippen. Geschrieben wird der Code trotzdem, bei jedem Klick.
Wie entsteht eine Website im Browser, und wo steht Webflow neben WordPress, Wix und Framer? Du lernst vier Wege zur eigenen Website kennen, liest HTML und CSS, verstehst das Boxmodell und findest dich in der Oberfläche von Webflow zurecht. Am Ende hast du ein Webflow-Konto, eine Übungsseite mit deiner ersten Section und eine Projektdokumentation, die ab heute jeden Tag wächst.
Das nimmst du mit
- Webflow schreibt Code Jeder Klick wird HTML und CSS. Wer beides lesen kann, findet Fehler schneller.
- Erst Struktur Section, Container, Inhalt. Farben und Schriften kommen danach.
- Jedes Element ist eine Box Padding innen, Margin außen, Webflow rechnet mit border-box.
- KI liefert Entwürfe Du prüfst sie und schreibst auf, wofür du sie genutzt hast.
Die Begriffe dieses Tages
Vier Wege zur eigenen Website
Baukasten, CMS, No-Code, Code.
Vier Wege unterscheiden sich darin, wie viel du selbst bestimmst und wie viel du dafür lernen musst. Baukasten wie Wix, Squarespace oder Jimdo: Vorlage wählen, Texte tauschen, fertig. CMS, ein Content-Management-System wie WordPress: Inhalte und Gestaltung getrennt, Tausende Themes und Plugins, dafür kümmerst du dich um Updates, Sicherheit und Hosting. No-Code wie Webflow oder Framer: visuell gestalten, nah an echtem HTML und CSS, das Werkzeug schreibt den Code und hostet. Code: HTML, CSS und JavaScript im Editor, volle Freiheit, volle Verantwortung.
Beispiel: Ein Friseursalon braucht bis übermorgen eine Seite mit Öffnungszeiten: Baukasten. Ein Sportverein, in dem 15 Leute Beiträge schreiben: CMS. Eine Landingpage genau nach Design, mit Animation: No-Code. Eine Web-App mit Login und Rechnungen: Code.
In der Praxis: Kein Weg ist immer der beste. Frag zuerst: Wer baut die Seite, wer pflegt sie, und was muss sie können? Die Antwort schreibst du heute in Kapitel 1 deiner Projektdokumentation.
Merksatz: Der Fall entscheidet, nicht das Werkzeug.
Wo Webflow steht
Eine Nische, aber eine bezahlte.
Der Dienst W3Techs misst, womit Websites gebaut sind. WordPress läuft danach auf rund 40 Prozent aller Websites, Webflow auf knapp einem Prozent. Knapp ein Drittel nutzt gar kein erkennbares System. Webflow wird vor allem für Marketingseiten von Firmen und Agenturen genutzt, bei denen Design und Pflege durch das Marketingteam zählen.
Beispiel: Ein Start-up will eine Marketingseite, und das Marketingteam soll den Blog selbst pflegen. Genau dafür ist Webflow gebaut. Ein Onlineshop mit 2.000 Produkten gehört dagegen eher in ein Shopsystem wie Shopify, dazu mehr an Tag 19.
In der Praxis: WordPress-Wissen brauchst du trotzdem: Wer Websites baut, trifft ständig darauf. Webflow ist dein Werkzeug für Seiten, bei denen Gestaltung und einfache Pflege wichtiger sind als Tausende Plugins.
Merksatz: Klein am Markt, stark bei Marketingseiten.
Was beim Aufruf einer Seite passiert
Fünf Schritte in Sekundenbruchteilen.
Du tippst eine Adresse ein. Das DNS, das Telefonbuch des Internets, übersetzt den Namen in die Adresse eines Servers. Der Browser fragt dort an, und der Server schickt eine HTML-Datei zurück. Im HTML stehen Verweise auf weitere Dateien: CSS, Bilder, Schriften, Skripte. Der Browser holt sie nach und baut daraus die Seite, die du siehst.
Beispiel: Lädt eine Seite langsam oder sieht falsch aus, liegt der Fehler in einem dieser fünf Schritte: ein falscher DNS-Eintrag, ein riesiges Bild, eine Schrift, die nicht kommt.
In der Praxis: Für Adressen auf webflow.io übernimmt Webflow Server und DNS. Für eine eigene Domain trägst du die DNS-Einträge selbst ein, das kommt an Tag 11.
Merksatz: Erst HTML, dann alles, was darin verlinkt ist.
HTML und CSS
HTML sagt, was etwas ist. CSS sagt, wie es aussieht.
HTML beschreibt die Struktur: eine Überschrift, ein Absatz, ein Bild. Ein Element besteht aus Start-Tag, Inhalt und End-Tag, im Start-Tag stehen Attribute wie class. CSS beschreibt die Gestaltung. Jede Regel hat einen Selektor, der sagt, wen sie trifft, und Eigenschaften mit Werten. Seit 1996 ist CSS ein Standard, seitdem sind Inhalt und Gestaltung getrennt.
Beispiel: Gleiches HTML, anderes CSS: Ohne Gestaltung zeigt der Browser schwarze Schrift auf Weiß, alles untereinander. Mit drei CSS-Regeln wird daraus eine Hero Section.
In der Praxis: In Webflow tippst du das nie. Du ziehst eine Heading auf die Seite, vergibst die Klasse hero-titel und stellst im Style panel Größe, Farbe und Abstand ein. Webflow schreibt genau diesen Code.
Merksatz: Erst die Struktur, dann die Gestaltung.
Verschachtelung und Navigator
Elemente stecken in Elementen.
Eine Seite besteht aus Elementen, die ineinander stecken, wie Umzugskartons: Was im Karton steckt, wandert mit, wenn du den Karton verschiebst. Ganz außen der body, darin eine section, darin ein Container, der den Inhalt mittig hält und die Breite begrenzt, darin Überschrift, Text und Bild. In Webflow zeigt der Navigator diesen Baum.
Beispiel: Ein Bild landet neben statt unter dem Text. Im Navigator siehst du sofort, dass es außerhalb des Containers liegt. Ziehst du es eine Ebene tiefer, sitzt es richtig.
In der Praxis: Wenn etwas an der falschen Stelle landet, schaust du zuerst in den Navigator (Taste Z), nicht auf die Canvas.
Merksatz: Der Navigator ist die Wahrheit, die Canvas nur das Bild.
Das Boxmodell
Content, Padding, Border, Margin.
Für den Browser ist jedes Element eine rechteckige Box mit vier Schichten. Innen der Content, der Inhalt. Darum das Padding, der Innenabstand: Die Hintergrundfarbe reicht durch das Padding bis zum Rand. Dann die Border, der Rahmen, auch null Pixel möglich. Ganz außen die Margin, der Außenabstand: Sie schiebt andere Elemente weg und ist immer durchsichtig.
Beispiel: Der Text klebt am Rand eines farbigen Buttons: Es fehlt Padding. Zwei Cards stehen ohne Lücke nebeneinander: Es fehlt Margin, später nimmst du dafür gap. Eine farbige Section soll oben mehr Luft haben, und die Farbe soll mitwachsen: Padding.
In der Praxis: Im Style panel unter Spacing siehst du das Boxmodell als Grafik, außen Margin, innen Padding. In den Entwicklertools des Browsers findest du dieselben Zahlen unter „Berechnet“.
Merksatz: Klebt Text am Rand, fehlt Padding. Kleben Kästen aneinander, fehlt Margin.
content-box und border-box
Gleiche Box, zwei Rechnungen.
Eine Box ist 300 Pixel breit, hat 20 Pixel Padding auf jeder Seite und 2 Pixel Rahmen. Bei content-box, der Grundeinstellung des Browsers, gilt die Breite nur für den Inhalt: 300 + 2 × 20 + 2 × 2 = 344 Pixel auf dem Bildschirm. Bei border-box ist die Box genau 300 Pixel breit, Padding und Rahmen gehen von innen ab, für den Inhalt bleiben 256 Pixel. Webflow stellt für alle Elemente border-box ein.
Beispiel: Du kopierst CSS aus einem anderen Projekt in eine Embed-Box, und plötzlich ist eine Spalte zu breit und rutscht nach unten. Oft rechnet der fremde Code mit content-box.
In der Praxis: In den Entwicklertools steht unter „Berechnet“ bei box-sizing, welche Rechnung gilt. Prüf das, wenn Zahlen und Anblick nicht zusammenpassen.
Merksatz: In Webflow ist die Breite die Breite, die du siehst.
Die Webflow-Oberfläche
Canvas, Panels und sechs Kürzel.
Der Designer läuft im Browser. In der Mitte die Canvas, auf der du direkt an der Seite arbeitest. Links die Werkzeugleiste mit den Panels, rechts die Leiste für das ausgewählte Element: Style panel für das Aussehen, Element settings für Einstellungen wie Links, Interactions für Bewegung. Oben Vorschau und Publish, darunter der Pfad zum ausgewählten Element und die Breakpoints.
Beispiel: Nach einer Woche drückst du Z und S, ohne nachzudenken. Die Maus bleibt auf der Canvas, die Panels kommen zu dir.
In der Praxis: Webflow braucht Maus, Tastatur und einen Bildschirm, der mindestens 1.268 Pixel breit ist. Auf dem Tablet geht es nicht. Zum Lernen auf dem Handy ist dieser Lernpfad da, zum Bauen der Rechner.
Merksatz: A zum Hinzufügen, Z zum Finden, S zum Gestalten.
KI liefert einen Entwurf
Vier Prüfpunkte und ein KI-Protokoll.
Webflow hat KI eingebaut: Der AI site builder baut aus einem Prompt eine Website mit bis zu fünf Seiten, mit Struktur, Stilen und Animationen. Dazu kommen Chats wie ChatGPT, Claude oder Copilot für Texte, Seitenstrukturen und Ideen. Was sie liefern, ist ein Entwurf. Du prüfst vier Dinge, bevor du ihn übernimmst.
Beispiel: Ein KI-Entwurf sieht fertig aus, hat aber drei h1 auf einer Seite, Klassen wie div-block-17 und einen Button, den die Tastatur nicht erreicht. Reparieren kann das nur, wer das Boxmodell und die Struktur versteht.
In der Praxis: Jede KI-Nutzung bekommt eine Zeile in dein KI-Protokoll: Datum, Werkzeug, wofür, was du geprüft oder geändert hast. In den ersten Tagen baust du bewusst ohne KI-Generator.
Merksatz: Was die KI baut, prüfst du.
Weiter im Kurs
Im Lernpfad wartet Tag 1 interaktiv auf dich: 4 Aufgaben, ein Quiz mit 7 Fragen und deine Checkliste. Dein Fortschritt bleibt in deinem Browser gespeichert.
Tag 1 und das Glossar sind frei. Den ganzen Kurs kannst du bald kaufen. Bis dahin trägst du dich auf die Warteliste ein, dann sagen wir dir Bescheid. Alle Kurse ansehen oder im Glossar nachschlagen.