Git, un passo
alla volta.

Il blueprint è la pagina di un evento di una Pro Loco inventata. La grafica è già pronta: oggi il tuo lavoro è capire che cosa cambia e come conservarne una versione. Solo due file, HTML e CSS; nessuna installazione serve per aprire il sito.

1. Prima versione: apri il sito, prepara i due file e registra il primo commit.
2. Una modifica: sposta l’orario dalle 14:00 alle 15:00, controlla il diff e registra il secondo commit.
3. Un recupero: introduci soltanto l’errore CSS spiegato nella guida e ripristina il file, mantenendo l’orario nuovo.

Se hai già un progetto con i commit, continua quello: non sostituirlo con il nuovo ZIP. Per installazioni, cartella e terminale segui le tappe qui sotto.

Traguardo: mostra due commit, indica le righe cambiate e spiega perché recuperare il CSS non annulla la modifica HTML.

VS Code

Il programma dove scrivi e modifichi HTML e CSS. Si installa sul PC.

Git

Registra la storia dei file. Si installa sul PC e funziona anche senza account e senza Internet.

GitHub

Il servizio online per condividere repository e proporre modifiche. Qui si apre nel browser: non serve installare GitHub Desktop.

Un repository è la cartella del progetto con la sua storia Git. Un commit è una versione registrata, con un messaggio che racconta la modifica.

Segui prima la parte locale fino al recupero. Se ti blocchi, apri l’aiuto vicino al passaggio.

Le spunte restano solo in questo browser. Non sono voti e non vengono inviate al docente.

Apri o installa VS Code

1. Premi il tasto Windows e cerca Visual Studio Code.
2. Se lo trovi, aprilo: è l’editor con il simbolo blu, non Visual Studio.
3. Se manca, apri il download ufficiale di VS Code. Scegli Windows e User Installer per il tuo PC (normalmente x64; se non sai l’architettura, chiedi al docente).
4. Apri il file scaricato, leggi i passaggi dell’installazione e avvia VS Code al termine. Per la lezione non servono account Microsoft, estensioni o Copilot.

Se il PC chiede credenziali di amministratore o blocca l’installazione, chiama il docente. Intanto puoi seguire sul PC di un compagno, alternando chi scrive.

Git potrebbe già esserci

Apri cartella e terminale nelle tappe seguenti, poi prova git --version. Installa Git solo se non è disponibile.

Hai il sito di ieri? Usa la sua cartella e conserva la sottocartella nascosta .git, se presente. In questa guida i file si chiamano index.html e style.css.

Non hai il progetto? Scarica il kit. In Esplora file fai tasto destro → Estrai tutto. Apri la cartella estratta git-primi-passi. Non lavorare dentro lo ZIP.

1. In VS Code scegli File → Apri cartella / Open Folder.
2. Seleziona la cartella che contiene i due file e premi Seleziona cartella.
3. Se compare la domanda sulla fiducia, verifica che sia proprio il tuo progetto o il kit della lezione. Autorizza solo quella cartella conosciuta, non tutta Download.
4. Nel pannello sinistro Esplora / Explorer trovi i file. Clicca index.html: il codice si apre al centro.
5. In Esplora file di Windows fai doppio clic su index.html per vederlo nel browser. Se apre l’editor, usa tasto destro → Apri con → il browser.

Il kit presenta un evento di una Pro Loco inventata, senza dati reali. Guarda la pagina iniziale.

1. Dal menu in alto scegli Terminale → Nuovo terminale / Terminal → New Terminal. Se i menu sono sotto …, apri quel menu.
2. In basso compare un pannello. Seleziona TERMINALE / TERMINAL, non Output o Console di debug.
3. Su Windows scegli PowerShell dal menu vicino al pulsante + se il terminale è diverso: si apre un nuovo terminale.
4. Clicca dopo il percorso e il simbolo >, scrivi un comando e premi Invio. Attendi che ritorni la riga pronta prima del comando successivo.

Lo schema è un esempio, non un terminale funzionante. Non copiare percorso, simbolo > o risposta di Git. Copia solo il comando:

git --version

Risultato atteso: git version seguito da numeri. La versione può essere diversa da quella del compagno.

Sei nella cartella giusta?

Get-Location

PowerShell mostra la cartella corrente: deve essere quella del sito. Poi:

dir

Devi vedere index.html e style.css. Se vedi Documenti, Download o tanti progetti, non fare ancora git init: riapri la cartella corretta e crea un nuovo terminale. Questi due comandi servono a orientarti, non sono comandi Git.

git status

Se vedi “On branch…”, sei già in un repository: non ricominciare. Controlla il percorso con:

git rev-parse --show-toplevel

Deve essere la cartella del sito. Se mostra una cartella superiore, come Download o Documenti, fermati e chiama il docente.

Se vedi “not a git repository”, non c’è ancora una storia Git. Dopo aver controllato la cartella con dir, esegui:

git init

Risultato atteso: Initialized empty Git repository…, cioè “creato un repository vuoto”. Git aggiunge la cartella nascosta .git: non cancellarla.

Chi firma i commit?

Nel progetto di esercitazione configura un autore fittizio. Esegui una riga alla volta:

git config --local user.name "Studente laboratorio"

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

È normale che non compaia una risposta. --local significa “solo in questo repository”. Non è un login. Per un progetto collegato al tuo account, configurerai col docente il nome scelto e l’indirizzo privato noreply fornito da GitHub.

Salva entrambi i file con Ctrl+S e prova la pagina nel browser. Poi nel terminale:

git status

Nel kit nuovo vedrai Untracked files: file presenti, ma non ancora tracciati. Se il progetto di ieri dice nothing to commit, working tree clean, il commit iniziale è già fatto: passa alla modifica successiva.

git add index.html style.css

add prepara questi file. Non li pubblica e non registra ancora la versione.

git status

Ora i file sono sotto Changes to be committed: “modifiche pronte da registrare”.

git commit -m "Prima versione del sito"

commit registra la versione; -m introduce il messaggio, tra virgolette.

git --no-pager log --oneline

Devi vedere un codice breve e il messaggio Prima versione del sito. Il codice sarà diverso su ogni PC. --no-pager evita di aprire un lettore separato.

Ctrl+S ≠ commit. Ctrl+S salva il file su disco. add seleziona la versione da registrare. commit registra la selezione nella storia. Se modifichi ancora dopo add, salva e ripeti add prima del commit.

1. In index.html cambia 14:00 in 15:00. Nel tuo sito puoi cambiare una breve frase diversa.
2. Salva con Ctrl+S; nel browser ricarica con Ctrl+R e controlla.
3. Nel terminale leggi le differenze prima di registrare:

git --no-pager diff -- index.html

Il diff è il confronto. - indica una riga tolta, + una aggiunta. Non copiare questi segni nell’HTML.

- <p class="orario">Il laboratorio inizia alle 14:00.</p>

+ <p class="orario">Il laboratorio inizia alle 15:00.</p>

Se è cambiato solo ciò che volevi, registra:

git add index.html

git commit -m "Aggiorna l'orario del laboratorio"

Se hai cambiato un’altra frase, adatta il messaggio. Poi:

git --no-pager log --oneline

Il più recente è in alto. Dal kit hai due commit; con il sito di ieri hai aggiunto un passo alla storia precedente.

Prima esegui git status: deve dire working tree clean (“nessuna modifica in sospeso”). Se hai altri file non registrati, fai controllare al docente.

1. In fondo a style.css aggiungi questa riga e salva:

body { color: white; background-color: white; }

2. Ricarica il browser: nel kit il testo scompare sullo sfondo bianco. Non fare add e non fare commit dell’errore.
3. Controlla le differenze:

git --no-pager diff -- style.css

Deve esserci solo la riga di errore appena aggiunta. Se c’è altro da conservare, fermati. Altrimenti recupera il CSS dall’ultimo commit:

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

Il comando elimina tutte le modifiche non registrate di style.css. Per questo lo usiamo su un solo errore, dopo aver registrato tutto il lavoro buono e controllato il diff.

Ricarica: il testo torna, l’orario HTML resta alle 15:00. Con git status ritrovi working tree clean. Non serve un nuovo commit: hai annullato un esperimento non registrato.

A coppie: uno esegue, l’altro legge i controlli; poi scambiatevi. Ognuno mostra il terminale, legge un messaggio di commit e spiega una modifica. Queste domande sono allenamento, non verifica.

Se riesci a fare i passaggi locali, continua. Se devi riprovarli, restare qui è parte della lezione.

Continua quando lo indica il docente. GitHub si usa dal browser: non devi installare GitHub Desktop o Copilot.

Accedi o crea il tuo account

Se hai un account, apri GitHub → Sign in (Accedi). Ciascuno usa il proprio account: non condividete la password.

Un repository di prova

1. Apri + → New repository (“nuovo repository”), oppure la pagina per crearlo.
2. Nome: prove-sito. Visibilità: Private (“privato”).
3. Attiva Add a README file: aggiungi un file di presentazione, così il repository ha subito un primo commit.
4. Premi Create repository. Devi vedere README.md e l’etichetta Private.

Questa è una nuova esercitazione online, ancora separata dalla cartella sul PC. I commit locali non arrivano qui da soli. Oggi collaboriamo dal browser; clone, push e pull verranno dopo.

Scegliete un solo repository per coppia. Il proprietario invita l’altro; ciascuno lavora dal proprio account.

A. Invita e accetta

1. Il proprietario apre il repository → Settings (impostazioni) → Collaborators (collaboratori) → Add people (aggiungi persone).
2. Cerca lo username esatto del compagno e invitalo: controllate insieme che sia quello giusto.
3. Il compagno accetta l’invito ricevuto e apre lo stesso repository dal proprio account. Se compare 404, controllate account e invito accettato.

B. Un branch per la proposta

Un branch è una linea di lavoro: prepari una modifica senza cambiare subito la versione principale.

1. Il compagno apre Code, poi il selettore che normalmente mostra main.
2. Scrive proposta-programma e sceglie Create branch… from main. Se il principale ha un altro nome, parte da quello.
3. Controlla che ora sia selezionato proposta-programma.
4. Apre README.md, preme la matita Edit e aggiunge:

## Idea per il sito
Aggiungiamo una pagina con il programma dell'evento.

Il README è testo in Markdown, non HTML. Premi Commit changes (“registra modifiche”), scrivi Propone la pagina programma e conferma sul branch proposta-programma.

C. Proponi, leggi, correggi

1. Apri Pull requests → New pull request. base deve essere main; compare deve essere proposta-programma.
2. Leggi il confronto e premi Create pull request. Titolo: Aggiungiamo il programma. Descrizione: una frase su cosa proponi.
3. Il proprietario apre la proposta → Files changed (“file modificati”) e legge le righe. In Conversation lascia un commento concreto: «Aggiungi anche il luogo».
4. L’autore torna su Code, seleziona lo stesso branch, modifica il README e fa un altro commit. La stessa pull request si aggiorna: non crearne un’altra.
5. Quando siete d’accordo, il proprietario preme Merge pull request → Confirm merge (“integra e conferma”).
6. Leggete il README su main: deve contenere la proposta corretta. Poi scambiate i ruoli, creando un nuovo branch da main.

Se Merge è bloccato o compare un conflitto, chiedi al docente. Non cambiare impostazioni e non cancellare file per far sparire l’avviso.

GitHub conserva codice e storia: un repository non diventa automaticamente un sito pubblicato.

• Salva i file e controlla git status.
• Conserva tutta la cartella, inclusa .git, dove indica il docente. I soli HTML e CSS non conservano la storia.
• Sul PC condiviso esci da GitHub e non salvare la password nel browser del laboratorio.

Un commit sullo stesso PC non è una copia di sicurezza esterna. Qui non c’è una consegna automatica.