hilfmirmal...
hilfmirmal...
hilfmirmal.de-Kurs zum Selbstlernen
Zwanzig Lerntage vom ersten Element zur eigenen Website: erst HTML, CSS und das Boxmodell, Hero, Cards, Footer und Formulare, dann Responsive Design, Interactions, Flexbox, Grid und Komponenten, dann Veröffentlichen, SEO, CMS und Barrierefreiheit, zum Schluss Relume, Figma, ein kleiner Shop und deine Präsentation. Jeder Tag hat Begriffe, Aufgaben, ein Quiz, ein Kapitel für deine Projektdokumentation und Material. Tag 1 und das Glossar sind sofort frei. Für die weiteren Tage trägst du einmal deine E-Mail-Adresse ein.
Du baust in Webflow, ohne eine Zeile Code zu tippen. Geschrieben wird der Code trotzdem, bei jedem Klick.
Themen: Vier Wege zur eigenen Website, Wo Webflow steht, Was beim Aufruf einer Seite passiert, HTML und CSS, Verschachtelung und Navigator, Das Boxmodell, content-box und border-box, Die Webflow-Oberfläche, KI liefert einen Entwurf
Ein Element ist grün, obwohl du es rot eingestellt hast. Woher kommt das Grün?
Themen: Semantische Tags, Überschriften gliedern, Klasse und Selector, Kombiklasse, Kaskade und Spezifität, Vererbung, Farben im Style panel, Einheiten: px, rem, %, vw, vh
Eine Farbe steht an vierzig Stellen. Jetzt soll sie anders werden.
Themen: Workspace, Site, Seite, Was der kostenlose Plan erlaubt, Pages panel und Slug, Site settings, Schriften und Datenschutz, Variablen, Body (All pages), Hero Section und Call to Action, Kontrastverhältnis
Dreimal „Mehr erfahren“ untereinander. Wer sich die Links vorlesen lässt, weiß nicht, wohin einer führt.
Themen: Card, Link block, Quick Stack, Bildformate, Bildgröße und HiDPI, Lazy Loading und Eager, Alt-Text, Bildrechte, Icons als SVG, Footer, Impressum, Datenschutz
„Oops! Something went wrong.“ Damit kann niemand etwas anfangen, der gerade eine Anfrage schicken wollte.
Themen: Was nach dem Absenden passiert, Form block, Label und Feldtypen, Label oder Placeholder?, Pflichtfelder und Datenminimierung, Erfolgs- und Fehlermeldung, Spam-Schutz, Hinweis oder Einwilligung?, Double-Opt-In, Webflow-Apps prüfen
Webflow zeigt dir beim Bauen den Desktop. Die meisten Besuche kommen vom Handy.
Themen: Das Handy ist der Normalfall, Breakpoints in Webflow, Die Kaskade über Breakpoints, Was pro Breakpoint gilt und was überall, Navbar mit Menü-Button, Klickflächen, Schrift mit rem und clamp(), Vier Fehler jeder ersten Handyversion, Vier Wege zu testen
Die meisten Animationen auf Websites braucht niemand. Manche machen Besucher sogar krank.
Themen: Wann Bewegung hilft, Wann Bewegung stört, Reduzierte Bewegung, Eine Interaction in fünf Teilen, GSAP und Classic, Trigger: Click, Hover, Scroll, Page load, Animation: From, To, Set, Timeline, Dauer und Easing, Der Animationsplan, Hover-Zustand oder Interaction?
In Webflow steht erst einmal alles untereinander. Ein Schalter bringt es nebeneinander.
Themen: Display: Block oder Flex, Flex parent und flex children, Hauptachse und Querachse, Direction, Wrap, Align, Gap, Gap statt Margin, Grow, Shrink und Basis, Alignment, Order und Auto-Margin, Drei Muster, Flexbox responsiv, Fünf Fehlerbilder
Eine Kachel soll über zwei Zeilen reichen. Mit Flexbox kommst du hier nicht weiter.
Themen: Grid statt Flexbox, Ein Grid von innen, Die Einheit fr, Span und Grid child, Bento-Layout, Grid areas, Auto-fit und Grid responsiv, Quick Stack und seine Presets, Flexbox, Grid oder Quick Stack?, Optik und Lesereihenfolge
Fünf Seiten, fünf kopierte Navbars. Ein Menüpunkt ändert sich, und auf einer Seite vergisst du ihn.
Themen: Komponente, Properties, Variants und Slots, Komponenten teilen: Shared Libraries, Marketplace und Starter Library, Templates prüfen, Slider, Lightbox, Tabs und Dropdown
Gespeichert heißt nicht veröffentlicht. Und veröffentlicht heißt nicht, dass rechtlich alles stimmt.
Themen: Designer, Staging, Production, webflow.io als Probebühne, Site plans und Kosten, Hosting, Domain, Registrar, DNS, SSL und Default domain, Drei Pflichten vor dem Livegang, Datenschutzerklärung in fünf Bausteinen, Selbst messen: Verbindungen und Cookies, Änderungen sicher ausrollen
Im Netz sein heißt nicht, gefunden zu werden. Und es heißt nicht, schnell zu sein.
Themen: Wie eine Suchmaschine deine Seite sieht, Title tag und Meta-Beschreibung, Slug, Überschriften und Canonical, Core Web Vitals, Lighthouse, Hebel für mehr Tempo, Open Graph, Sitemap, noindex, robots.txt, Weiterleitung (301), KI und SEO
Ein Glossar mit dreißig Begriffen heißt dreißig Seiten. Oder eine Vorlage und eine Tabelle.
Themen: Statische Seite oder CMS?, Collection, Item, Field, Field-Typen, Collection page und Collection list, Status eines Items, CSV-Import, Was den Import bricht, KI bereitet die CSV vor, Template-Seite: lila und blau, Was das CMS kostet
„KI im Alltag“, „KI im alltag“, „KI-Alltag“. Für dich dasselbe, für Webflow drei verschiedene Kategorien.
Themen: Reference field, Multi-reference field, Das Datenmodell des Blogs, Filter, Sortierung, Limit, Fallen beim Sortieren, Bedingte Sichtbarkeit und Empty state, Redaktionsablauf und Content editor, Plan-Grenzen, KI in der Redaktion
Eine Seite kann gut aussehen und für manche Menschen unbenutzbar sein.
Themen: Wen Barrierefreiheit betrifft, Hilfsmittel, BFSG, WCAG: vier Prinzipien, drei Stufen, Kontrast prüfen, Linktexte, Überschriften, Alt-Texte, Schrift, die mitwächst, Fokus sichtbar machen, Skip-Link und Landmarks, Formulare und Bewegung, Audit panel und drei Ebenen der Prüfung
Heute baust du eine Website, die du noch nicht kennst. Niemand zeigt dir, wo der nächste Klick liegt.
Themen: Briefing, Section-Liste, Umsetzen, ergänzen, zurückfragen, nicht bauen, Seitenplatz im kostenlosen Plan, Sprungmarken, Zeitplan und Zwischenstände, Texte mit KI, Fakten prüfen, Gestaltung in drei Entscheidungen, Abnahme mit zwölf Kriterien, Kurzfeedback in drei Sätzen
Div Block 12, darin Div Block 13, darin button 2. Wer soll diese Seite in einem Jahr noch ändern?
Themen: Relume: vom Prompt zum Wireframe, Was Relume kostet, Acht Prüfpunkte für einen KI-Entwurf, Style Guide, Variablen mit Alias, Client-First: drei Klassenarten, Core Structure, Deep Stacking und Klassen-Duplikate, Style selectors panel, Wann Client-First passt
Eine Person gestaltet in Figma, eine baut in Webflow. Dazwischen geht immer etwas kaputt.
Themen: Figma und Webflow, Figma-Begriffe und ihr Gegenstück, Auto Layout, Hug, Fill, Fixed, Ebenennamen werden Klassen, Variablen in Figma, Das Plugin: Sync oder Copy und Paste, Einfügen mit Klassenkonflikt, Brüche abfangen und prüfen, Zweiter Sync und wann es sich lohnt
Ein Shop sieht aus wie eine Website. Aber er schließt Verträge, und dafür gelten eigene Regeln.
Themen: Vom Produkt zur Bestellung, Drei Wege zum Shop, Was ein Shop kostet, Webflow Ecommerce: eine Einbahnstraße, Storesynk: Webflow zeigt, Shopify verkauft, Gesamtpreis, Bestellbutton (Button-Lösung), Widerrufsrecht bei digitalen Produkten, Widerrufsfunktion, Rechts-Check mit zwölf Punkten
Zehn Minuten, live im Browser, auf webflow.io. Nicht auf Folien, sondern auf deiner Website.
Themen: Das Präsentationsfenster, Zehn Minuten, fünf Teile, Generalprobe mit Stoppuhr, Feedback: Beobachtung vor Urteil, Die Bewertung, Zwanzig Tage im Rückblick, Weiterlernen, Wie es mit deiner Website weitergeht
Ab Tag 3 wächst deine eigene Website neben der Übungsseite. An Tag 19 machst du die Projektdokumentation fertig, an Tag 20 zeigst du deine Website in zehn Minuten live. Hier stehen die Checklisten dafür an einem Ort.
Glossar mit allen 259 Begriffen, frei und ohne Anmeldung.
Von Erik Lorenscheit · Zuletzt aktualisiert am
Du willst mehr als Selbstlernen? Dann bauen wir deine Website 1:1 zusammen. Auf Anfrage bringe ich es auch Unternehmerinnen, Unternehmern und ganzen Teams bei. Erzähl mir im Erstgespräch, was du vorhast.