Willkommen bei deinem Dashboard.

Geschafft.

Herzlich Willkommen!

Ich freue mich sehr, dass du dich für meinen Kurs entschieden hast. In den kommenden Lektionen wirst du Schritt für Schritt lernen, wie du mit Webflow professionelle Websites erstellen kannst – mit ganz wenig Code.
Hier im Dashboard findest du alle Videos, Ressourcen und Übungen, die dich auf deiner Lernreise begleiten werden. Schau dir als Erstes das Einführungsvideo an, um einen Überblick zu bekommen und zu erfahren, wie du das Beste aus diesem Kurs herausholen kannst.
Und: buche dir bei Gelegenheit hier dein kostenloses 1:1 Beratungsgespräch.

Viel Erfolg!

abspielen icon - felipe sayao studio

Phase I

Vorlagenübersicht, Schriftarten, Formate, Farben, Farbprofile, Bilder, Anpassungsmodi, Seiten, Meta Informationen, Custom Global/Page Code

Webflow Übersicht Teil 1 und 2

In dieser Lektion entdecken wir die Grundlagen des Webdesigns: Low-Code-Prinzipien, wichtige Begriffe, Farben, Schriften und CSS.

  • Low Code
  • Grundbegriffe rund um Web Design
  • Farben
  • Schriften
  • CSS Intro
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio
abspielen icon - felipe sayao studio

Webflow Übersicht (cont.)

In dieser Lektion entdecken wir die Grundlagen des Webdesigns: Low-Code-Prinzipien, wichtige Begriffe, Farben, Schriften und CSS.

  • Low Code
  • Grundbegriffe rund um Web Design
  • Farben
  • Schriften
  • CSS Intro
Zusammenfassung (neu!)

Alle Videos von Phase I

abspielen icon - felipe sayao studio

Einstellungen

  • zugänge
  • passwortschutz
  • pläne
  • SEO
  • backups
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Vorlagen

  • vorlagen market
  • libraries
  • vor und nachteile
  • backups
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Designer

  • übersicht
  • CMS
  • native blöcke
  • styles
  • asset manager
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Fonts

  • google fonts
  • custom fonts
  • font formate
  • schriftgrößen
  • fonts im styleguide
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Farben

  • farbformate
  • farbgenerator
  • farbauswahl
  • hex codes
  • transparenz
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Bilder

  • asset manager
  • hoch- und herunterladen
  • ALT tags
  • bildlinks
  • aspect ratios
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Unterseiten

  • neue seiten erstellen
  • draft vs. live
  • CMS seiten
  • slugs
  • meta description
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Formulare

  • absender
  • tags
  • natives kontaktformular
  • eingabefelder
  • redirect
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Responsiveness

  • einzelheiten
  • mehrere geräte
  • breakpoints
  • viewport
  • größeneinheiten
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Veröffentlichen

  • livegang
  • letzte schritte
  • webflow domains
  • pläne und extras
  • DNS
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Exkurs: CSS Transitions

  • Hover in/out
  • Font weights
  • Farb und Größenhover
Zusammenfassung (neu!)

Phase II

CSS Klassen, Basic Animationen, CMS, Responsivität, CSS Einheiten, Cascading, Variablen, Veröffentlichen, Bibliotheken, Vorlagen, Integrationen, Apps

Intro

In dieser Lektion entdecken wir die Grundlagen des Webdesigns: Low-Code-Prinzipien, wichtige Begriffe, Farben, Schriften und CSS.

  • libraries
  • sektionen
  • design umsetzung
  • libraries anpassen
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio
abspielen icon - felipe sayao studio

Relume und Hero

In dieser Lektion lernst du, wie du einen Hero-Bereich gestaltest: von Variablen und Hintergrund-Assets über absolute Positionierung und Grids bis hin zur Nutzung von CSS-Klassen.

  • hero bereich design
  • variablen
  • absolute positionierung
  • grids
  • CSS classes
Zusammenfassung (neu!)

Alle Videos von Phase II

abspielen icon - felipe sayao studio

Icons

  • layout
  • weiterer ausbau
  • grid
  • austauschen
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Karten und Shadows

  • Figma Styles
  • inhaltsblöcke
  • container
  • drop shadow
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Social Proof

  • icons
  • dimensionierungen
  • richtige proportionen
  • konsistente grids
  • elemente exportieren
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Hintergrund

  • hintergrundfarben
  • transparenz
  • flex und gaps
  • buttons
  • div background
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Hintergrund (cont.)

  • hintergrundfarben
  • transparenz
  • flex und gaps
  • buttons
  • div background
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Responsiveness

  • grid columns/rows
  • linkblöcke
  • block inline
  • listen
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Footer

  • grid columns/rows
  • linkblöcke
  • block inline
  • listen
Zusammenfassung (neu!)

Custom Bau

In dieser Lektion erfährst du, wie du Heading-Tags stylst, einen Styleguide erstellst, Designs aus Figma umsetzt und Variablen mit CSS-Klassen verbindest.

  • heading tags
  • styling
  • figma
  • CSS Intro
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio
abspielen icon - felipe sayao studio

Custom Bau (cont.)

In dieser Lektion erfährst du, wie du Heading-Tags stylst, einen Styleguide erstellst, Designs aus Figma umsetzt und Variablen mit CSS-Klassen verbindest.

  • heading tags
  • styling
  • figma
  • CSS Intro
Zusammenfassung (neu!)

Alle Videos von Phase III

abspielen icon - felipe sayao studio

Positioning

  • Relativ
  • Absolut
  • Fixed
  • Sticky
  • Statisch
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Positioning (cont.)

  • Grid Karten
  • Responsivität
  • backups
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Alignment

  • paddings
  • margins
  • line heights
  • left/center/right
  • gap
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Sektion

  • minimale breite/höhen
  • max. breite/höhen
  • global padding
  • overflow
  • buttons
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

FAQ

  • dropdown inhalte
  • klick animationen
  • css vs. java
  • trigger
  • states
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

FAQ (cont.)

  • Säulen im grid
  • komponenten
  • shadows
  • bildlinks
  • aspect ratios
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Slider

  • native elemente
  • inhalte
  • timing
  • icons
  • meta description
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Formulare

  • aufbau
  • eingabefelder
  • footer credits
  • email marketing
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Exkurs: Responsiveness

  • Smooth scroll
  • Obere breakpoints
  • grid säulen
  • gaps
  • Wraps
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Exkurs: Komponenten

  • Wiederverwendung
  • Properties
  • Varianten
  • DNS
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Exkurs: Styleguides

  • Client First
  • Relume
  • Eigenes Styleguide
  • Konsistenter Bau
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Exkurs: Weglot

  • Localizations
  • Externe integrationen
  • Konsistenter Bau
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Exkurs: e-com

  • kollektionen
  • filter
  • start up
  • cMS Seiten
Zusammenfassung (neu!)
abspielen icon - felipe sayao studio

Exkurs: e-com

  • kollektionen
  • filter
  • start up
  • cMS Seiten
Zusammenfassung (neu!)

Buche dir jetzt deinen 1:1 kostenlosen Strategy Call:

Zum Terminkalender

Anregungen, Fragen, Kommentare oder Projekt starten?

hello@felipesayao.studio

 - felipe sayao studio
Felipe Sayao Studio Main Logo