Webflow Cursus

Les 1 • Je Webflow-account instellen

Begeleidt bij het aanmaken van een account, het kiezen van een abonnement en het configureren van de werkruimte. Stelt de omgeving in die studenten gedurende de hele cursus gebruiken.

Les 2 • Pagina's, mappen en projectstructuur

Legt uit hoe je pagina's aanmaakt en organiseert, pagina-instellingen instelt en de sitearchitectuur plant. Een goede structuur voorkomt herbewerking wanneer projecten in latere hoofdstukken groter worden.

Les 3 • Het Box-model in Webflow begrijpen

Leert margin, padding, border en grootte zoals Webflow ze visueel weergeeft. Vormt de directe basis voor elke lay-out- en spatiëringsbeslissing in latere hoofdstukken.

Les 4 • De Designer-interface navigeren

Brengt elk paneel, elke werkbalk en elk canvasgebied in de Designer in kaart. Studenten verwerven de ruimtelijke vaardigheid die nodig is om efficiënt te werken in alle latere hoofdstukken.

Les 1 • Een typografische schaal opbouwen

Leert het creëren van een harmonieuze hiërarchie van kop- en bodygroottes met behulp van de stijlen op tagniveau van Webflow. Een gedefinieerde typografische schaal versnelt consistente styling op alle pagina's.

Les 2 • Het wereldwijde kleurensysteem van Webflow

Introduceert de kleurkiezer, het staalvenster en globale kleurvariabelen. Globale kleuren maken merkupdates met één klik op de hele site mogelijk.

Les 3 • Tekstelementen op het canvas stylen

Past lettertype- en kleurkennis toe op koppen, alinea's, links en rich text-blokken. Koppelt abstracte instellingen aan echte paginacomponenten die studenten opnieuw zullen gebruiken.

Les 1 • Een volledige paginalay-out bouwen

Past Flexbox, Grid en positionering samen toe om een complete meer secties tellende pagina te bouwen. Dit afsluitende onderdeel consolideert alle lay-outvaardigheden voordat wordt overgestapt op responsiviteit.

Les 2 • Flexbox-lay-outs in Webflow

Behandelt het inschakelen van Flexbox op een Div Block en het regelen van richting, uitlijning, omvloeien en tussenruimte. Flexbox is het primaire hulpmiddel voor eendimensionale componentlay-outs.

Les 3 • Div Blocks en Containers

Legt het Div Block uit als het primaire structurele element van Webflow en de Container als een maximale breedte wrapper. Dit zijn de bouwstenen voor elke lay-outtechniek die volgt.

Les 4 • Positionering: Relatief, Absoluut en Vast

Legt CSS-positioneringsmodi uit zoals Webflow ze blootstelt en wanneer je elke modus gebruikt. Positionering maakt overlappende elementen, sticky headers en zwevende UI-componenten mogelijk.

Les 1 • Optimaliseren voor mobiele apparaten

Leert aanpassingen voor mobiel landschap en portret, waaronder gestapelde lay-outs, grotere aantapdoelen en schaling van lettertypen. Mobiele optimalisatie is van cruciaal belang voor gebruikerservaring en zoekranking.

Les 2 • Vloeiende typografie en spatiëring

Introduceert viewport-afhankelijke eenheden en op clamp gebaseerde vloeiende maatvoering voor type en spatiëring. Vloeiende waarden verminderen het aantal benodigde breekpuntoverschrijvingen in een project.

Les 3 • Lay-outs aanpassen voor tablet

Behandelt het overschakelen naar het tabletbreekpunt en het aanpassen van Flexbox-richting, gridkolommen en spatiëring. Tablet is vaak het meest complexe breekpunt vanwege tussenliggende schermbreedtes.

Les 4 • Responsiviteit testen en debuggen

Behandelt het gebruik van de canvasgroottewijziging van Webflow, browser DevTools en testen op echte apparaten om lay-outproblemen op te sporen. Systematisch testen voorkomt regressie wanneer stijlen worden bijgewerkt.

Les 1 • Het klassensysteem van Webflow uitgelegd

Behandelt hoe klassen, tags en de alles-elementen-selector met elkaar interageren in het stijlvenster van Webflow. Een solide klassenstrategie is de basis van elk onderhoudbaar Webflow-project.

Les 2 • Herbruikbare componentklassen bouwen

Leert het maken van knop-, kaart- en badge-klassen die op de hele site kunnen worden toegepast. Herbruikbare klassen verminderen overbodige styling en dwingen visuele consistentie af.

Les 3 • Stijlgids pagina als levende referentie

Begeleidt studenten bij het bouwen van een interne stijlgidspagina die alle klassen en componenten documenteert. Een stijlgidspagina versnelt de onboarding en voorkomt klassen duplicatie in de loop van de tijd.

Les 1 • Scroll-geactiveerde animaties

Leert fade-in-, slide-in- en stagger-animaties die afgaan wanneer elementen in de viewport verschijnen. Scroll-animaties verhogen de waargenomen kwaliteit en leiden de aandacht van de gebruiker de pagina af.

Les 2 • Overzicht van het Interacties-paneel

Brengt het Interacties-paneel, triggertypes en de animatietijdlijn in kaart. Het begrijpen van de paneelstructuur is een voorwaarde voor het bouwen van elke interactie in Webflow.

Les 3 • Paginascroll- en parallax-effecten

Legt de paginascroll-trigger uit en hoe elementeigenschappen aan de scrollpositie te koppelen. Parallax en op voortgang gebaseerde effecten voegen diepte toe aan hero- en verhalende secties.

Les 4 • Lottie- en aangepaste code-animaties

Behandelt het insluiten van Lottie JSON-animaties en het activeren ervan via Webflow Interactions. Lottie breidt de animatiemogelijkheden uit van CSS-transformaties voor complexe illustraties.

Les 1 • CMS-collecties ontwerpen

Behandelt het maken van Collecties, het definiëren van veldtypes en het plannen van de data-architectuur. Een goed ontwerp van een Collectie voorkomt kostbare herstructurering naarmate de inhoud groeit.

Les 2 • CMS-templatepagina's bouwen

Behandelt het ontwerpen van de Collectie-templatepagina die automatisch één pagina per CMS-item genereert. Templatepagina's voeden blogs, casestudy's, teamprofielen en productdetailpagina's.

Les 3 • CMS-inhoud toevoegen en beheren

Leert het toevoegen van items via de CMS Editor, het importeren van CSV-gegevens en het gebruik van de Editor voor overdracht aan de klant. Content management-workflows bepalen hoe onderhoudbaar een site na lancering is.

Les 4 • Geneste Collection Lists en workarounds

Gaat in op de beperking van geneste Collection Lists in Webflow en praktische workarounds met behulp van referenties en aangepaste code. Geavanceerde CMS-patronen ontgrendelen complexe directory- en filtergebruiksscenario's.

Les 1 • Webflow hosting en publiceren

Behandelt de CDN-gebaseerde hosting van Webflow, publiceren naar het staging-subdomein en publiceren naar een aangepast domein. Inzicht in hostingniveaus voorkomt planmismatches bij de lancering.

Les 2 • On-page SEO in Webflow

Behandelt het instellen van metatitels, -beschrijvingen, Open Graph-afbeeldingen en canonieke tags per pagina. Correcte on-page SEO zorgt ervoor dat pagina's vanaf dag één correct worden geïndexeerd en gedeeld.

Les 3 • Optimalisatie van siteprestaties

Leert afbeeldingscompressie, lazy loading, lettertype subsetting en de ingebouwde minificatie van Webflow. Prestaties hebben directe invloed op de zoekranking en het gebruikersbehoud.

Les 4 • 301-omleidingen en lanceringschecklist

Behandelt het instellen van 301-omleidingen voor gemigreerde URL's en het uitvoeren van een audit voor de lancering. Een gestructureerde lanceringschecklist voorkomt gebroken links, ontbrekende pagina's en indexeringsfouten.