Alla fine di questo corso sarai in grado di costruire una vera landing page SaaS responsive in Webflow — e, cosa più importante, di capire perché è costruita così. Questa prima lezione mette in chiaro il quadro: cosa facciamo, come funziona il corso e cosa ti porti a casa.
Ecco l’idea in una frase: costruiamo una pagina reale sezione per sezione, e usiamo ogni sezione come scusa per introdurre un concetto fondamentale di Webflow e metterlo subito in pratica. Non è un corso teoria-prima, e non è una borsa di consigli slegati. È una costruzione guidata dove ogni idea nuova si guadagna il suo posto.
La pagina che ricreiamo è ispirata a un template Webflow a pagamento chiamato Lumify. Non la copiamo pixel per pixel — ho ricostruito il layout da zero seguendo i criteri che secondo me rendono un crash course completo, chiaro e comunque abbastanza semplice da portare davvero a termine.
Cosa costruirai
Il percorso va sezione per sezione, e ognuna sblocca un nuovo gruppo di concetti:
- Sezione hero — le fondamenta di tutto: sezioni, container e div block, classi, Flexbox e unità responsive come
vwechinsieme alla funzionemin(). - Sezione features — tag HTML e stili di default, combo class, componenti Webflow e varianti, l’unità
em, la funzioneclamp()e il concetto di responsività fluida. - Sezione team — il primo vero incontro con il CMS: collection, campi e come disporre i contenuti con una griglia.
- Sezione FAQ — di nuovo i componenti, più i dropdown fatti bene, con tanto di animazioni di apertura e chiusura fluide.
- Navbar e footer — Flexbox rivisitato, il posizionamento sticky e fixed, e l’introduzione della griglia per capire quando usarla al posto di Flexbox.
Per tutto il corso trattiamo la responsività come una mentalità e non come un ripensamento, e integriamo l’accessibilità senza trasformarla in una checklist noiosa.
Come seguire il corso
- Apri Webflow e parti da un progetto vuoto. Puoi fare tutto il corso su un workspace gratuito.
- Tieni a mente il design di riferimento. Puntiamo a ricreare la landing page ispirata a Lumify, sezione per sezione — non ti serve il template originale, solo il risultato finale come obiettivo.
- Costruisci insieme a ogni lezione. L’apprendimento vero avviene con le tue mani, quindi ricrea ogni passaggio invece di limitarti a guardare.
- Clona il progetto finito quando ti blocchi. La build completa è un cloneable: aprilo, confronta e smontalo ogni volta che qualcosa non torna.
Se cerchi un corso che ti insegni Webflow costruendo davvero, che spieghi il ragionamento dietro ogni mossa e che ti lasci fondamenta riutilizzabili, sei nel posto giusto. Partiamo.