Costruisci tre layout in Webflow: colonne della stessa larghezza, card che vanno a capo e un testo con indice laterale. Il tutor AI ti guida negli esercizi.
Affiancare colonne della stessa larghezza, anche se contengono quantità di testo diverse.
Card su più righe
Disporre una raccolta di card su più righe e scegliere come usare lo spazio che avanza.
Testo con indice a lato
Affiancare un testo e il suo indice, portando l’indice sotto al testo quando lo spazio si riduce.
Un esempio tutto tuo
Scegliere uno di questi layout per una nuova situazione, costruirlo e spiegare le proprie scelte.
Prima di cominciare
Cosa sai già
Saper aggiungere e selezionare Box e testo, assegnare una classe e cambiare breakpoint. Il tutor può richiamare un passaggio quando serve.
La pagina di esercizio
Una pagina Webflow modificabile con un’area libera per gli esercizi. Le modifiche le fai tu; non serve pubblicare il progetto.
Gli strumenti
Un assistente AI che accetti il file della lezione o il testo completo. Per verificare gli esercizi puoi usare il server MCP di Webflow, se collegato al tuo assistente, un link Sandbox con un browser interattivo disponibile, oppure screenshot e impostazioni che descrivi. Il collegamento MCP è facoltativo.
Tutorial AI · progetto pilota
Costruisci e spiega tre pattern Flexbox
Costruisci gli esempi nella tua pagina Webflow con la guida del tutor. Quando può essere utile, il tutor ti propone una breve animazione da aprire nel browser.
Le animazioni mostrano i controlli e i cambiamenti in una ricostruzione del Designer di Webflow. Si aprono in pagine separate e non modificano il tuo progetto.
Puoi parlare con il tutor nella tua lingua, anche se il file della lezione è scritto in inglese. Il testo di riferimento e le animazioni sono disponibili in italiano e inglese.
Per iniziare basta il file della lezione: caricalo nel tuo assistente AI. Il pacchetto ZIP contiene anche i file delle animazioni, per gli assistenti che possono usarli nella chat. Per aprire le animazioni online non serve scaricare lo ZIP.
Carica il file della lezione in una nuova conversazione nel tuo assistente AI. Se non accetta allegati, incolla tutto il contenuto.
Scrivi «Cominciamo», o una breve frase nella tua lingua.
Comincia su una pagina di esercizio vuota. Il tutor ti aiuta a prepararla e a concordare come verificare il lavoro. Le modifiche le fai tu.
Usa un’area libera di una pagina Webflow modificabile. Concorda come osservare il lavoro; non serve pubblicare il progetto Webflow.
Quale assistente AI usare?
ChatGPT Work. È l’ambiente usato nelle prove con l’autore. Anche il tutor attuale ha completato verifiche mirate in Work; queste non coprono ogni percorso della lezione.
Claude. Nel browser sono stati verificati alcuni passaggi, i link alle animazioni e i riepiloghi. L’intera lezione non è stata verificata in questo client.
Gemini. La compatibilità non è verificata. Le prove non hanno dimostrato un dialogo affidabile, quindi per ora non è consigliato per questa lezione.
Verifiche aggiornate al 3 novembre 2026. L’accesso a Webflow dipende dagli strumenti disponibili nella tua conversazione e va verificato con il tutor. Le animazioni hanno sempre una pagina dedicata nel browser; la visione nella chat è facoltativa e non è stata verificata in tutti i client.
Come controlla il tutor il mio lavoro?
Concordate una modalità disponibile: Webflow MCP, un Sandbox link con un browser interattivo (anche ChatGPT Work, se disponibile), oppure screenshot e impostazioni che riferisci tu. Il tutor verifica l’accesso effettivo prima di basarsi su di esso. MCP è facoltativo.
Con Sandbox modifichi nel Designer originale, attendi il salvataggio e avvisi il tutor. Lui ricarica lo stesso Sandbox per leggere l’aggiornamento. Per condividere una tab usa il selettore del tuo assistente, se presente; altrimenti indica browser e URL. Il tutor conferma progetto e pagina.
Posso fermarmi e riprendere?
Chiedi un riepilogo dei progressi. In una nuova conversazione carica il file della lezione e quel riepilogo. L’accesso al progetto va verificato di nuovo: le conversazioni non si sincronizzano da sole.
Testo di riferimento e animazioni
Il tutor propone una breve animazione quando può aiutarti. Mostra dove si trova un controllo o come cambia un esempio in una ricostruzione del Designer. Puoi aprirla nel browser e poi tornare alla chat; guardarle tutte non è necessario.
Basis è una dimensione di partenza: la larghezza finale dipende anche dallo spazio e dagli altri vincoli.
Wrap permette al contenitore di formare nuove righe; Grow distribuisce lo spazio libero su ciascuna riga.
Scegli a quali larghezze cambiare la disposizione: per esempio, colonne affiancate su Desktop e una sotto l’altra da Tablet in giù.
Una larghezza minima protegge una parte del contenuto, ma può ridurre lo spazio dell’altra e richiedere una nuova disposizione.
Un riferimento rapido
Lavorerai su tre situazioni: colonne con la stessa importanza, una raccolta di card il cui numero cambia e un contenuto principale accanto a un indice. Costruirai gli esempi nella tua pagina Webflow, con contenuti leggibili, e osserverai come reagiscono a quantità e larghezze diverse.
Parti dal risultato che vuoi ottenere
Il tutor ti chiede una previsione prima degli esperimenti. Puoi rispondere anche «non lo so»: il confronto serve a capire il comportamento, non a indovinare un nome o un valore.
Collega le impostazioni al loro effetto
Basis dà una dimensione di partenza ai figli del contenitore Flex. Wrap permette nuove righe e Grow distribuisce lo spazio che rimane. Scoprirai quando queste proprietà collaborano e perché una sola impostazione, presa isolatamente, non descrive l’intero layout.
Verifica e applica
Confronterai viste ampie e strette, poi tornerai alla vista di partenza. Nella prova finale discuterai tre esigenze nuove e sceglierai una sezione da pianificare, costruire e spiegare. Gli aiuti ricevuti e ciò che hai realmente provato rimangono distinti nel riepilogo.
Durante la lezione il tutor può proporti brevi animazioni che mostrano dove si trova un controllo di Webflow e come cambia il layout quando lo usi. L’interfaccia è una ricostruzione del Designer, il pannello in cui lavori in Webflow: non mostra il tuo progetto e non lo modifica. Ogni animazione si apre in una pagina dedicata e parte solo quando la avvii. Puoi anche avanzare senza movimento o leggere la spiegazione testuale.
Se vuoi vedere com’è fatta, puoi aprire un esempio sulle colonne. Non occorre guardarlo prima di iniziare: sarà il tutor a proportelo al momento utile.
No. È utile conoscere le operazioni indicate nei prerequisiti. Il tutor chiarisce i passaggi necessari senza richiedere di rifare altre lezioni.
Devo guardare tutte le animazioni?
No. Il tutor propone una breve animazione quando può aiutarti a trovare un controllo o a capire un cambiamento. Puoi aprirla nel browser e poi tornare alla chat, oppure proseguire con le istruzioni scritte.
Perché un’animazione mi chiede di tornare alla chat?
Alcune animazioni si fermano prima di mostrare un cambiamento. Torna alla chat e racconta al tutor che cosa pensi succederà, anche se non ne sei sicuro. Il tutor ti darà il link alla parte successiva, così potrai confrontare la tua idea con il risultato.
Aiutami a migliorare questi tutorial
Cosa ti è stato utile, o dove ti sei bloccato? Indica la lezione e l’assistente che hai usato. Evita informazioni private del progetto.
Il feedback viene trattato su questo sito tramite Cloudflare e inviato alla mia email. Uso la tua email per risponderti e non la uso per marketing. Vengono trattati anche dati tecnici della richiesta per consegnare il messaggio e limitare gli abusi. Informativa privacy