# Il tuo primo sito personale

Boilerplate di **Gio Marco Baglioni — akkaz**, <https://akkaz.dev>.
Pensato per studenti di terza superiore. Puoi usare, modificare e pubblicare questo codice: parti da qui e fallo tuo.

## Parti in 2 minuti

1. Estrai lo ZIP con “Estrai tutto” / “Estrai qui”. Non lavorare dentro l'archivio.
2. Apri la cartella estratta. I quattro file devono restare insieme.
3. Fai doppio clic su `index.html`: il sito si apre nel browser.
4. Apri la stessa cartella in un editor di testo o di codice, ad esempio VS Code.
5. Modifica un file, salva con Ctrl+S (Cmd+S su Mac) e aggiorna il browser.

Non servono un account, un terminale, un server o librerie. La base funziona anche senza Internet.

## Che cosa fa ogni file?

| File | Il suo compito | Primo esperimento |
| --- | --- | --- |
| `index.html` | Contenuti e struttura: titoli, paragrafi, link | Cambia “Il tuo nome” |
| `style.css` | Aspetto: colori, caratteri e spazi | Cambia `--accento` |
| `script.js` | Comportamento: cosa succede a un clic | Cambia la variabile `nome` |
| `README.md` | Questa guida, da leggere nell'editor | Segna le tue idee |

## La prima mezz'ora

1. **5 minuti — presentati.** Cambia il nome nel menu, nel testo e nel footer. Cambia anche `<title>` e la descrizione nei metadati: il titolo appare nella scheda del browser.
2. **10 minuti — raccontati.** Scrivi “Chi sono”, tre passioni vere e un progetto che ti piacerebbe realizzare. Cancella i testi di esempio.
3. **5 minuti — scegli un colore.** In `style.css`, prova `--accento: #6d28d9;`. Il punto e virgola chiude la dichiarazione. Mantieni il testo ben leggibile sullo sfondo.
4. **5 minuti — modifica il saluto.** In `script.js`, cambia `const nome = "mondo";` inserendo il tuo nome e prova il pulsante.
5. **5 minuti — controlla.** Riduci la finestra, clicca i link e prova a muoverti con Tab. Il sito deve funzionare anche su un telefono.

## Aggiungi qualcosa di tuo

### Un link

Dentro un paragrafo puoi scrivere:

```html
<a href="https://developer.mozilla.org/it/">Una risorsa per imparare il web</a>
```

Tra i tag c'è il testo del link. `href` contiene la destinazione.

### Una foto o un disegno

Crea una cartella `immagini` accanto a `index.html` e inserisci un'immagine chiamata `disegno.jpg`. Poi aggiungi all'HTML:

```html
<img src="immagini/disegno.jpg" alt="Un mio disegno di una città immaginaria">
```

`alt` descrive l'immagine a chi non può vederla. Usa immagini tue o che hai il permesso di pubblicare. Non inserire percorsi del tuo computer come `C:\Utenti\...`.

### Una sezione nuova

Dentro `<main>`, aggiungi:

```html
<section id="obiettivi">
  <h2>Cosa voglio imparare</h2>
  <p>Vorrei imparare a creare un piccolo gioco.</p>
</section>
```

Nel `<nav>` puoi poi aggiungere `<a href="#obiettivi">Obiettivi</a>`.
L'`id` deve essere unico e corrispondere esattamente al testo dopo `#` nel link.

## Piccole sfide

- Fai dire al pulsante “Primo clic!” solo quando `numeroClick` è uguale a 1. Indizio: `if (numeroClick === 1)`.
- Aggiungi un secondo progetto copiando il blocco `<article>`, poi cambiane titolo e descrizione.
- Aggiungi un pulsante che azzera il contatore e il messaggio.

## Quando qualcosa non funziona

- **Non cambia nulla?** Salva il file e ricarica la pagina. Verifica di aver aperto la copia giusta.
- **Manca lo stile?** `style.css` deve essere nella stessa cartella e avere esattamente questo nome.
- **Il pulsante non funziona?** Apri F12 → Console e leggi gli errori. Controlla virgolette, parentesi e gli `id`.
- **L'immagine non compare?** Controlla percorso, estensione e maiuscole: `Foto.jpg` e `foto.jpg` possono essere nomi diversi.
- **Hai rotto qualcosa?** Annulla con Ctrl+Z (Cmd+Z su Mac), oppure recupera la versione iniziale dallo ZIP.

## Prima di pubblicare

- Sostituisci tutti i testi segnaposto e prova ogni link.
- Non pubblicare password, indirizzo di casa, numero di telefono o informazioni private tue e dei compagni.
- Puoi usare solo il nome o uno pseudonimo. Le foto di altre persone richiedono il loro consenso.
- Controlla il sito da telefono e da tastiera; scegli colori con buon contrasto.
- Lascia il credito al boilerplate e scrivi il tuo nome come autore della personalizzazione. Anche il metadato `author` può indicare entrambi.

Se usi un assistente AI, chiedi una modifica piccola e fatti spiegare ogni riga. Per esempio: “Spiegami come aggiungere un pulsante per azzerare il contatore, usando JavaScript semplice”. Prova a riscrivere la soluzione con parole tue.

Buon lavoro: una modifica alla volta, poi salva e prova.