Corso di Webflow da zero

Lezione 1 • Configurazione dell'account Webflow

Guida alla creazione dell'account, alla scelta del piano e alla configurazione dell'area di lavoro. Stabilisce l'ambiente che gli studenti utilizzeranno durante l'intero corso.

Lezione 2 • Pagine, cartelle e struttura del progetto

Illustra come creare e organizzare le pagine, definire le impostazioni di pagina e pianificare l'architettura del sito. Una struttura adeguata previene le rilavorazioni quando i progetti crescono nei capitoli successivi.

Lezione 3 • Comprendere il Box Model in Webflow

Insegna margine, padding, bordo e dimensionamento così come Webflow li espone visivamente. È alla base di ogni decisione di layout e spaziatura presa nei capitoli successivi.

Lezione 4 • Navigazione nell'interfaccia del Designer

Mappa ogni pannello, barra degli strumenti e area del canvas nel Designer. Gli studenti acquisiscono la fluidità spaziale necessaria per lavorare in modo efficiente in tutti i capitoli successivi.

Lezione 1 • Costruzione di una scala tipografica

Insegna a creare una gerarchia armoniosa di dimensioni per titoli e corpo del testo utilizzando gli stili a livello di tag di Webflow. Una scala tipografica definita accelera l'applicazione di uno stile coerente su tutte le pagine.

Lezione 2 • Sistema di colori globali di Webflow

Introduce il selettore di colore, il pannello dei campioni e le variabili di colore globali. I colori globali consentono aggiornamenti del brand con un solo clic su tutto il sito.

Lezione 3 • Stilizzazione degli elementi di testo sul canvas

Applica le conoscenze su font e colori a titoli, paragrafi, link e blocchi di testo formattato. Collega le impostazioni astratte ai componenti reali della pagina che gli studenti riutilizzeranno.

Lezione 1 • Costruzione di un layout a pagina intera

Applica Flexbox, Grid e il posizionamento insieme per costruire una pagina completa a più sezioni. Questa sezione conclusiva consolida tutte le competenze di layout prima di passare alla reattività.

Lezione 2 • Layout Flexbox in Webflow

Tratta l'abilitazione di Flexbox su un Div Block e il controllo di direzione, allineamento, ritorno a capo e spaziatura. Flexbox è lo strumento principale per i layout monodimensionali dei componenti.

Lezione 3 • Div Block e Container

Illustra il Div Block come elemento strutturale principale di Webflow e il Container come involucro a larghezza massima. Sono i mattoni per ogni tecnica di layout che segue.

Lezione 4 • Posizionamento: relativo, assoluto e fisso

Illustra le modalità di posizionamento CSS come esposte da Webflow e quando utilizzarle ciascuna. Il posizionamento consente elementi sovrapposti, intestazioni fisse e componenti UI flottanti.

Lezione 1 • Ottimizzazione per dispositivi mobili

Insegna le regolazioni per il landscape e il portrait mobile, inclusi layout impilati, target touch più ampi e ridimensionamento dei font. L'ottimizzazione mobile è fondamentale per l'esperienza utente e il posizionamento nei motori di ricerca.

Lezione 2 • Tipografia e spaziatura fluide

Introduce le unità relative al viewport e il dimensionamento fluido basato su clamp per tipo e spaziatura. I valori fluidi riducono il numero di override dei breakpoint necessari in un progetto.

Lezione 3 • Adattamento dei layout per tablet

Tratta il passaggio al breakpoint tablet e la regolazione della direzione Flexbox, delle colonne della griglia e della spaziatura. Il tablet è spesso il breakpoint più complesso a causa delle larghezze dello schermo intermedie.

Lezione 4 • Test e debug della reattività

Tratta l'uso del ridimensionamento del canvas di Webflow, dei DevTools del browser e del test su dispositivo reale per individuare problemi di layout. Il test sistematico previene le regressioni quando gli stili vengono aggiornati.

Lezione 1 • Spiegazione del sistema di classi di Webflow

Tratta come le classi, i tag e il selettore tutti gli elementi interagiscono nel pannello degli stili di Webflow. Una solida strategia per le classi è la base di ogni progetto Webflow manutenibile.

Lezione 2 • Creazione di classi per componenti riutilizzabili

Insegna a creare classi per pulsanti, card e badge che possono essere applicate in tutto il sito. Le classi riutilizzabili riducono lo styling ridondante e impongono coerenza visiva.

Lezione 3 • Pagina Style Guide come riferimento vivente

Guida gli studenti nella creazione di una pagina di style guide interna che documenti tutte le classi e i componenti. Una pagina di style guide accelera l'inserimento e previene la duplicazione delle classi nel tempo.

Lezione 1 • Animazioni attivate dallo scorrimento

Insegna le animazioni di dissolvenza in entrata, scorrimento laterale e sfalsamento che si attivano quando gli elementi entrano nel viewport. Le animazioni di scorrimento aumentano la qualità percepita e guidano l'attenzione dell'utente lungo la pagina.

Lezione 2 • Panoramica del pannello Interazioni

Mappa il pannello Interazioni, i tipi di trigger e la timeline dell'animazione. Comprendere la struttura del pannello è un prerequisito per creare qualsiasi interazione in Webflow.

Lezione 3 • Scorrimento della pagina ed effetti parallasse

Spiega il trigger di scorrimento della pagina e come mappare le proprietà degli elementi alla posizione di scorrimento. Gli effetti di parallasse e basati sul progresso aggiungono profondità alle sezioni hero e di storytelling.

Lezione 4 • Lottie e animazioni con codice personalizzato

Tratta l'incorporamento di animazioni Lottie JSON e la loro attivazione tramite le Interazioni di Webflow. Lottie estende la capacità di animazione oltre le trasformazioni CSS per illustrazioni complesse.

Lezione 1 • Progettazione delle Collection CMS

Tratta la creazione di Collection, la definizione dei tipi di campo e la pianificazione dell'architettura dei dati. Una buona progettazione delle Collection previene costose ristrutturazioni man mano che il contenuto cresce.

Lezione 2 • Costruzione di pagine template CMS

Tratta la progettazione della pagina Template della Collection che genera automaticamente una pagina per ogni elemento CMS. Le pagine template alimentano blog, case study, profili del team e pagine di dettaglio del prodotto.

Lezione 3 • Aggiunta e gestione dei contenuti CMS

Insegna ad aggiungere elementi tramite l'Editor CMS, importare dati CSV e utilizzare l'Editor per il passaggio di consegne al cliente. I flussi di lavoro di gestione dei contenuti determinano quanto sia manutenibile un sito dopo il lancio.

Lezione 4 • Collection List annidate e soluzioni alternative

Affronta la limitazione delle Collection List annidate di Webflow e le soluzioni alternative pratiche utilizzando riferimenti e codice personalizzato. I pattern CMS avanzati sbloccano casi d'uso complessi di directory e filtraggio.

Lezione 1 • Hosting e pubblicazione Webflow

Tratta l'hosting basato su CDN di Webflow, la pubblicazione sul sottodominio di staging e la pubblicazione su un dominio personalizzato. Comprendere i livelli di hosting previene disallineamenti del piano al momento del lancio.

Lezione 2 • SEO on-page in Webflow

Tratta l'impostazione di meta titoli, descrizioni, immagini Open Graph e tag canonici per pagina. Una corretta SEO on-page garantisce che le pagine siano indicizzate e condivise correttamente fin dal primo giorno.

Lezione 3 • Ottimizzazione delle prestazioni del sito

Insegna la compressione delle immagini, il lazy loading, il subsetting dei font e la minificazione integrata di Webflow. Le prestazioni influenzano direttamente il posizionamento nei motori di ricerca e la fidelizzazione degli utenti.

Lezione 4 • Reindirizzamenti 301 e lista di controllo per il lancio

Tratta la configurazione dei reindirizzamenti 301 per gli URL migrati e l'esecuzione di un audit pre-lancio. Una lista di controllo strutturata per il lancio previene link non funzionanti, pagine mancanti ed errori di indicizzazione.