Differenze

Queste sono le differenze tra la revisione selezionata e la versione attuale della pagina.

Link a questa pagina di confronto

Entrambe le parti precedenti la revisioneRevisione precedente
Prossima revisione		Revisione precedente
tailwind [2026/07/27 20:55] – [FASE 5: PUBBLICAZIONE DEL SITO WEB SU ALTERVISTA] waltertailwind [2026/07/27 21:03] (versione attuale) – [FASE 3: CREAZIONE DEI FILE DI PROGETTO] walter
Linea 85: Linea 85:
  
 </code> </code>
 +
 +
 ==== FASE 4: AVVIO DEL SERVER DI SVILUPPO ==== ==== FASE 4: AVVIO DEL SERVER DI SVILUPPO ====
  
Linea 123: Linea 125:
 === 3. CARICAMENTO DEI FILE (DEPLOY) === === 3. CARICAMENTO DEI FILE (DEPLOY) ===
  
-  - Nel menu di Altervista, seleziona la voce "Gestione File" (o "Sito" -> "Gestione File").+  - Nel menu di Altervista, seleziona la voce "Gestione File" (o "Sito" → "Gestione File").
   - Assicurati di trovarti nella cartella principale del tuo spazio web (la cartella radice).   - Assicurati di trovarti nella cartella principale del tuo spazio web (la cartella radice).
   - Sul tuo computer, apri la cartella "dist" appena generata.   - Sul tuo computer, apri la cartella "dist" appena generata.
Linea 132: Linea 134:
  
 Il file "index.html" deve trovarsi nella cartella principale di Altervista e NON all'interno di una sottocartella chiamata "dist". Se visitando il tuo link (es. nomesito.altervista.org) vedi una pagina bianca o un errore, verifica di aver spostato i file fuori dalla cartella "dist" durante il caricamento. Il file "index.html" deve trovarsi nella cartella principale di Altervista e NON all'interno di una sottocartella chiamata "dist". Se visitando il tuo link (es. nomesito.altervista.org) vedi una pagina bianca o un errore, verifica di aver spostato i file fuori dalla cartella "dist" durante il caricamento.
 +
 +===== Come usare VS Code fin dall'inizio =====
 +
 +  - Apri la cartella: Avvia VS Code, clicca su File > Apri cartella… e seleziona la cartella del tuo progetto (mio-progetto-tailwind).
 +  - Usa il Terminale Integrato: Invece di usare il prompt dei comandi di Windows, premi la combinazione di tasti CTRL + ò (oppure vai in alto su Terminale > Nuovo Terminale). Si aprirà un terminale integrato in basso, già posizionato nella cartella corretta.
 +  - Lancia i comandi da lì: Digita npm install… o npx vite direttamente nel terminale di VS Code.
 +  - Scrivi il codice: Crea e modifica i file index.html, style.css e vite.config.js usando l'editor di testo di VS Code.
 +
 +=== Un trucco fondamentale per Tailwind su VS Code ===
 +
 +Per scrivere il codice alla massima velocità, devi assolutamente installare un'estensione gratuita ufficiale dentro VS Code:
 +
 +  - Clicca sull'icona dei quadratini a sinistra in VS Code (Estensioni), oppure premi CTRL + SHIFT + X.
 +  - Cerca "Tailwind CSS IntelliSense" (quella ufficiale creata da Tailwind Labs).
 +  - Clicca su Installa.
 +
 +Cosa fa questa estensione?
 +
 +Mentre scrivi il codice HTML e digiti una classe (ad esempio bg-), ti mostrerà un menu a tendina con i suggerimenti automatici di tutti i colori e le opzioni disponibili, mostrandoti persino un quadratino con l'anteprima del colore. Questo ti eviterà di dover ricordare a memoria tutti i nomi delle classi.
 +
 +Se vuoi aggiungere anche questa comoda scorciatoia alla tua guida in Word, ti preparo l'impaginazione al volo. Altrimenti, dimmi pure se hai già installato VS Code sul tuo computer!