Il tuo sito
ha una storia.

10 minuti · partiamo da una situazione vera

Hai una pagina che funziona. Incolli una risposta di Gemini e sparisce il titolo. Ieri avevi una versione buona… ma quale file era?

Git registra le versioni del tuo progetto. Puoi vedere cosa cambia e recuperare un punto che avevi salvato. Ogni versione registrata si chiama commit e ha un messaggio che spiega il cambiamento.

Questi sono tre commit, nello stesso progetto. Non tre cartelle chiamate “finale”, “finale2” e “finale-vero”.

Repository

La cartella del progetto con la sua storia Git, conservata nella sottocartella nascosta .git.

Diff

Il confronto tra due versioni: le righe aggiunte, tolte o cambiate.

Stage

La selezione delle modifiche che vuoi includere nel prossimo commit.

GitHub

Un servizio online dove puoi condividere repository. Git funziona anche sul tuo PC, senza GitHub.

Ctrl+S e commit sono due cose diverse: Ctrl+S salva il file su disco; il commit registra una versione nella storia. Un commit locale non pubblica il sito e non invia il lavoro al compagno. La copia sullo stesso PC non protegge dalla perdita del PC.

20 minuti · cartella, VS Code e Git

Ci esercitiamo sulla Pro Loco del Borgo delle Castagne e sull’evento Una domenica in piazza. Organizzazione, evento, luoghi e dettagli sono tutti inventati per questa lezione.

1. Estrai lo ZIP: su Windows, tasto destro → Estrai tutto. Non lavorare dentro lo ZIP.
2. In VS Code scegli File → Apri cartella e apri proloco-partenza, quella che contiene index.html e style.css.
3. Dal gestore file apri index.html nel browser. Vedrai il programma: il laboratorio inizia alle 14:00.
4. In VS Code apri Terminale → Nuovo terminale. Il terminale è la zona dove scrivi comandi, non codice HTML. Digita questo e premi Invio:

git --version

Deve apparire un numero di versione, per esempio git version 2.….

Controlla che il terminale sia nella cartella proloco-partenza. Poi esegui questo comando una sola volta:

git init

Ora questa cartella è un repository. Configura un autore di esercitazione, solo per questo progetto. Esegui le due righe:

git config --local user.name "Studente laboratorio"
git config --local user.email "studente@example.invalid"

È un’identità fittizia per il laboratorio locale, non un accesso a un account. Sul progetto vero configureremo l’autore corretto con il docente.

15 minuti · il primo commit

Nel menu a sinistra di VS Code apri Controllo del codice sorgente / Source Control, oppure premi Ctrl + Maiusc + G.

1. Nella lista Modifiche / Changes trovi index.html, style.css e LEGGIMI.txt. La lettera U significa che il file non è ancora tracciato da Git.
2. Passa sul nome di ogni file e premi il + (Stage Changes): i file passano in Modifiche preparate / Staged Changes. Hai selezionato cosa registrare, ma non hai ancora fatto il commit.
3. Nel campo del messaggio scrivi Pagina iniziale della Pro Loco.
4. Premi Commit. Per questa lezione non serve “Pubblica branch” o “Sincronizza”.

Controlla: l’elenco delle modifiche è vuoto. Nel terminale puoi leggere la storia con:

git --no-pager log --oneline

Vedrai una riga con un codice breve e il messaggio che hai scritto. Il codice identifica quel commit: sul tuo PC sarà diverso da quello dei compagni.

git add index.html style.css LEGGIMI.txt

git commit -m "Pagina iniziale della Pro Loco"

20 minuti · una modifica piccola e verificabile

La Pro Loco immaginaria ti comunica: «Il laboratorio delle lanterne inizierà alle 15:00, non alle 14:00.»

1. Apri index.html. Con Ctrl + F cerca 14:00 e sostituiscilo con 15:00.
2. Salva con Ctrl + S. Aggiorna la pagina nel browser e controlla il programma.
3. Torna in Source Control: index.html ora ha la lettera M (Modified). Clicca sul nome per aprire il confronto.
4. Leggi la riga rimossa e quella aggiunta. A finestra larga VS Code può mostrarle affiancate; a finestra stretta una sotto l’altra.
5. Se è cambiato solo ciò che volevi, premi + su index.html e fai il commit Sposta il laboratorio alle 15.

- <li><strong>14:00</strong> — Laboratorio delle lanterne</li>

+ <li><strong>15:00</strong> — Laboratorio delle lanterne</li>

I segni − e + appartengono al confronto: non vanno incollati nel file HTML.

Prima di continuare: la storia deve avere due commit e la lista Changes deve essere vuota.

15 minuti · una richiesta, una modifica, un controllo

Il sito è funzionante e hai già il secondo commit. Ora prova a chiedere un aiuto a Gemini. Puoi incollare il codice di questo sito fittizio.

Sto modificando una pagina HTML statica per un evento inventato.
Devo aggiungere una sezione con titolo "In caso di pioggia" e testo
"Le attività si svolgono nella Sala delle Castagne, accanto alla piazza."
Dammi soltanto il piccolo blocco HTML necessario e dimmi dove inserirlo
nel mio main. Spiegami i tag. Non riscrivere tutta la pagina,
non cambiare il programma e non aggiungere JavaScript.
Ecco il mio index.html:

1. Aggiungi il tuo HTML sotto il prompt. Leggi la risposta e inserisci il blocco prima di </main>, senza copiare i delimitatori con i tre accenti gravi.
2. Salva e prova nel browser: titolo e testo devono comparire. Il laboratorio deve essere ancora alle 15:00.
3. Apri il diff: il menu, il programma e il resto del sito sono rimasti corretti? Sai indicare la nuova sezione?
4. Quando il risultato è giusto, prepara index.html con il + e fai il commit Aggiunge le indicazioni per la pioggia.

<section id="pioggia">
  <h2>In caso di pioggia</h2>
  <p>Le attività si svolgono nella Sala delle Castagne,
     accanto alla piazza.</p>
</section>

Spiega al compagno: quale parte hai aggiunto e quale controllo ti ha convinto a tenerla? Git mostra le differenze; sei tu a verificare che il sito funzioni.

15 minuti · un errore controllato nel sito di esercitazione

Prima controlla che Changes e Staged Changes siano vuoti. Le modifiche buone devono essere già nei commit. Questo esercizio recupera una modifica non ancora registrata.

1. Apri style.css e aggiungi in fondo:

header { display: none; }

2. Salva e aggiorna il browser. Il titolo dell’evento e il menu spariscono.
3. Apri il diff di style.css. Devi vedere soltanto la regola appena aggiunta. Non premere + e non fare un commit di questo errore.
4. In Source Control fai tasto destro su style.css → Ignora modifiche / Discard Changes. Leggi la conferma e accetta solo per questo file di esercitazione.
5. Riapri il file e aggiorna il browser: titolo e menu tornano, il laboratorio resta alle 15:00 e il testo sulla pioggia resta presente.

Che cosa hai annullato? Tutte le modifiche non registrate di style.css, non solo l’ultima riga. Per questo prima abbiamo salvato le modifiche buone nei commit e controllato il diff.

git restore --source=HEAD -- style.css

Mostra al docente: i tre commit, il sito funzionante e la lista Changes vuota. Indica quale file hai recuperato e perché le modifiche all’HTML sono rimaste.

Oggi hai lavorato sulla storia locale. Per lavorare da PC diversi aggiungeremo un repository condiviso: clone per ottenerne una copia, pull per ricevere gli aggiornamenti e push per inviare i commit. Un branch permette di sviluppare una modifica su una linea separata; un merge unisce il lavoro.

Git può segnalare un conflitto quando le modifiche non si possono unire automaticamente: il gruppo deve decidere il risultato. Non risolve da solo due richieste incompatibili.

Per iniziare bene già oggi: una modifica alla volta, un messaggio comprensibile, controllo nel browser. Se lavorate in coppia, scambiate tastiera dopo ogni commit: entrambi devono saper fare i passaggi.

20 minuti · ritrova nel gioco quello che hai fatto

Le carte del gioco ti aiutano a vedere cosa fanno i comandi. Parti dall’introduzione: cerca il collegamento con file, modifiche e commit appena incontrati. Non devi completare tutto il gioco oggi.

È un gioco da scaricare per Windows, macOS o Linux, non si avvia dentro questa pagina. Scarica il pacchetto adatto al tuo PC ed estrailo; su Windows avvia l’eseguibile nella cartella estratta. Gli autori segnalano che i comandi su Windows possono essere lenti: attendi il risultato prima di ripetere la mossa.

Prima di ogni carta: prova a dire cosa succederà. Dopo la mossa, confronta la previsione con il risultato. Se il gioco non parte, mostra il problema al docente e ripeti sul sito una piccola modifica con il suo commit.

5 minuti · fai vedere quello che sai

• Mostra la storia con i tre messaggi dei commit.
• Spiega la differenza tra Ctrl+S e commit.
• Mostra una differenza nel codice e racconta come hai recuperato style.css.

Conserva tutta la cartella proloco-partenza, compresa la sottocartella nascosta .git. Se copi soltanto index.html e style.css, perdi la storia Git. Chiedi al docente dove conservare il progetto se devi spostarlo; oggi non c’è un invio automatico.