La tua idea.
Il tuo primo sito.

Oggi cominci un sito vero, fatto di file che puoi aprire e modificare. Non serve conoscere già HTML. Lavora con un compagno: uno scrive, l'altro legge e prova. Cambiate a ogni tappa.

Prima: la cartella

1. Apri la tua cartella di lavoro sul PC. Crea una cartella chiamata il-mio-sito.
2. Cerca Visual Studio Code nel menu del computer e aprilo. È l'editor blu, non Visual Studio.
3. Scegli File → Open Folder / Apri cartella, seleziona il-mio-sito e conferma. Se chiede se ti fidi, conferma solo per questa cartella creata da te.
4. Nell'elenco a sinistra, usa New File / Nuovo file. Crea index.html. Poi crea style.css. Scrivi i nomi esattamente così.

HTML dice quali contenuti ci sono. CSS dice come si vedono. I due file devono stare nella stessa cartella.

Inventa una piccola attività: una pizzeria, un negozio di giochi o un laboratorio di riparazione bici. Puoi riprendere il ristorante disegnato in Excalidraw.

La pagina deve permettere di capire cosa offri, leggere due prezzi e trovare gli orari. Usa dati inventati: nessun nome, telefono o indirizzo personale.

Nel banco prova trovi un piccolo documento già pronto. Se usi VS Code, premi Copia HTML, incollalo in index.html e salva con Ctrl+S.

1. Cambia La mia attività nel titolo della scheda e nel titolo grande.
2. Sostituisci il paragrafo con una frase che spieghi la tua attività.
3. Nel file CSS incolla il CSS di partenza, poi salva entrambi i file.
4. Apri la cartella dal computer e fai doppio clic su index.html: si apre nel browser. Dopo una modifica: Ctrl+S in VS Code, poi Ctrl+R nel browser.

Nel banco prova, invece, premi Aggiorna e controlla.

<h1>Officina Pedale</h1>
<p>Ripariamo la tua bici per il prossimo giro.</p>

Fermati qui per la prima ora. Mostra il titolo e la frase al docente.

1. In VS Code premi Ctrl+S in index.html e in style.css.
2. Se usi il banco prova, premi Scarica index.html e Scarica style.css. Metti i due file nella cartella il-mio-sito.
3. Apri index.html con doppio clic e controlla la pagina.
4. Alla ripresa riapri la cartella in VS Code. Se continui nel banco prova, ritrovi il codice nello stesso browser.

Ora rendi utile il sito. Dentro <main>, sotto la presentazione, aggiungi due sezioni. Una sezione è un gruppo di contenuti sullo stesso argomento.

<section id="servizi">
  <h2>Servizi e prezzi</h2>
  <ul>
    <li>Camera d’aria: 8 €</li>
    <li>Controllo freni: 12 €</li>
  </ul>
</section>
<section id="orari">
  <h2>Quando ci trovi</h2>
  <p>Da martedì a sabato, dalle 9 alle 18.</p>
</section>

Riscrivi servizi e prezzi per la tua attività. ul è un elenco; ogni li è una voce.

Il menu, prima del titolo

<nav>
  <a href="#servizi">Servizi e prezzi</a>
  <a href="#orari">Orari</a>
</nav>

href="#orari" porta alla sezione che ha id="orari". Le due parole devono essere uguali. Clicca davvero entrambi i link.

Apri style.css. Il collegamento al foglio di stile è già nell'HTML:

<link rel="stylesheet" href="style.css">

Modifica la regola body già presente; aggiungi le altre. Il selettore dice a quali elementi applicare le istruzioni. Ogni istruzione finisce con ;.

body {
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #18332e;
  background: #f6faf8;
  margin: 0;
  padding: 24px;
}
main, nav {
  max-width: 800px;
  margin: auto;
}
section {
  margin-top: 32px;
}
a {
  color: #145e48;
  margin-right: 16px;
}
h1 {
  font-size: 36px;
}

1. Cambia un valore alla volta e osserva la differenza.
2. Prova padding: 0, poi torna a 24px: che cosa cambia ai bordi?
3. Scegli un colore scuro per il titolo, mantenendo testo leggibile e sfondo chiaro.

Nel banco prova premi Vista telefono. In VS Code continua a salvare; nel browser riduci la larghezza della finestra. Il contenuto deve restare leggibile senza trascinare a destra.

La riga viewport nell'HTML prepara il sito al telefono. max-width limita la larghezza sui PC ma lascia restringere il contenuto. Una larghezza fissa di 1000px può farlo uscire dallo schermo.

1. Leggi il nome dell'attività e i prezzi.
2. Prova il menu: i testi dei link si capiscono e si toccano bene?
3. Se il titolo è troppo grande, aggiungi questa regola in fondo al CSS.

@media (max-width: 600px) {
  body { padding: 16px; }
  h1 { font-size: 28px; }
  nav a { display: block; margin-bottom: 12px; }
}

Scambiatevi di posto. Chi prova riceve queste due richieste, senza indicazioni su dove cliccare:

1. “Trova il servizio meno caro e dimmi quanto costa.”
2. “Scopri in quali giorni posso venire.”

Chi ha costruito il sito osserva in silenzio. “È bello” non è un risultato del test: annota cosa la persona ha fatto o non ha trovato.

Applica il miglioramento emerso dal test. Poi chiedi alla stessa persona di riprovare.

Se devi ancora finire: completa titolo, due prezzi, orari e collegamenti. Questo è il risultato principale di oggi.

Solo se il percorso base funziona

Aggiungi una sezione “Come lavoriamo” con tre passaggi e un link nel menu. Oppure una foto autorizzata che conservi nella cartella del sito: scrivi un testo alternativo che descriva la foto. Non cercare né usare foto dei compagni.

Nel file HTML, dentro main:

<img src="negozio.jpg" alt="Ingresso del nostro negozio di esempio">

Nel file CSS:

img { max-width: 100%; height: auto; }

La foto locale si prova nella cartella con VS Code e browser. Il banco prova di questa pagina non carica file immagine dal tuo computer.

Mostrate la pagina al docente. Ognuno risponde a una domanda: quale tag crea il titolo? Come funziona un collegamento interno? Quale regola CSS cambia la distanza dal bordo?

1. Nel banco prova scarica index.html e style.css nella stessa cartella. Non lasciarli con nomi come index (1).html.
2. Apri index.html con doppio clic e verifica che lo stile funzioni.
3. In VS Code, conserva la cartella del sito con entrambi i file salvati.

Avete iniziato un sito reale e locale: non è ancora pubblicato su Internet.

Quattro sfide extra per chi ha già usato HTML e VS Code. Scegline una: non serve farle tutte.

Prima controlla che titolo, due prezzi, orari e menu funzionino. Poi aggiungi una cosa utile alla tua attività. Puoi seguire gli indizi oppure provare da solo; alla fine devi saper spiegare il codice.

Le prime tre sfide funzionano anche nel banco prova. Per la quarta usa i file sul PC. Salva con Ctrl+S, aggiorna il browser e prova ogni modifica.

<ul class="servizi-grid">
  <li>
    <h3>Camera d’aria</h3>
    <p>Sostituzione per ripartire in bici.</p>
    <p><strong>8 €</strong></p>
  </li>
  <li>
    <h3>Controllo freni</h3>
    <p>Verifica e regolazione della frenata.</p>
    <p><strong>12 €</strong></p>
  </li>
  <li>
    <h3>Pulizia catena</h3>
    <p>Pulizia e lubrificazione della catena.</p>
    <p><strong>10 €</strong></p>
  </li>
</ul>

.servizi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
}
.servizi-grid li {
  background: white;
  border: 1px solid #9aafa7;
  border-radius: 12px;
  padding: 16px;
}
@media (max-width: 600px) {
  .servizi-grid { grid-template-columns: 1fr; }
}

<section id="domande">
  <h2>Domande frequenti</h2>
  <details>
    <summary>Serve un appuntamento?</summary>
    <p>Per una foratura puoi passare durante gli orari di apertura.</p>
  </details>
</section>

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
nav a {
  display: block;
  padding: 10px 16px;
  margin: 0;
  color: #145e48;
  background: #e4f3eb;
  border-radius: 8px;
}
nav a:hover {
  background: #c8e6d6;
}
nav a:focus-visible {
  outline: 3px solid #145e48;
  outline-offset: 3px;
}

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Come lavoriamo · Officina Pedale</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav><a href="index.html">Torna alla pagina iniziale</a></nav>
  <main>
    <h1>Come lavoriamo</h1>
    <ol>
      <li>Ascoltiamo il problema della tua bici.</li>
      <li>Ti spieghiamo intervento e prezzo.</li>
      <li>Ripariamo e controlliamo insieme il risultato.</li>
    </ol>
  </main>
</body>
</html>

<a href="come-lavoriamo.html">Come lavoriamo</a>

Prima di dire “finito”

Fai provare la tua aggiunta a un compagno senza suggerirgli dove cliccare. Poi mostra al docente il pezzo di HTML o CSS che la fa funzionare. Conserva tutti i file del sito nella stessa cartella.