Il rifugio prende forma

Prima di costruire

1. Su Windows: tasto destro sullo ZIP → Estrai tutto. Non lavorare dentro lo ZIP.
2. In VS Code: File → Apri cartella… e scegli la cartella blueprint-rifugio estratta.
3. In Esplora file fai doppio clic su index.html. Tieni il browser e VS Code aperti.
4. Modifica index.html per i contenuti e style.css per l’aspetto. Salva con Ctrl+S, poi ricarica il browser con Ctrl+R.

Questa guida è missioni.html: aprila in una seconda scheda. Non devi modificare la guida, guida.css o i file dentro assets.

Regola del laboratorio: niente attributi style o blocchi <style> nell’HTML. Le classi collegano i due file. Non serve installare Minecraft o altre estensioni.

Nella base trovi i tag della lezione: h1, h2, p, a, img, ul, li e i contenitori header, main e footer. Il CSS usa solo background-color, color, font-family, font-size e text-align. La grafica e il font pixel sono già preparati in assets/grafica.css: non devi studiarlo o modificarlo. Nel tuo style.css non ci sono Flexbox, Grid o selettori avanzati. Il file grafico sistema spazi e schede; tu lavori sulle cinque proprietà della lezione. I commenti indicano i punti da provare.

1. Dai un nome al mondo

File: index.html. Cambia il contenuto di h1, la descrizione nel p subito sotto e il title nella parte head. Inventati una base: nella montagna, sott’acqua o nel deserto.

<h1 class="titolo">La base nella montagna</h1>

Controllo: vedi il nuovo nome sia nella pagina sia nella scheda del browser? Spiega la differenza tra h1 e title.

2. Colora il titolo

File: style.css. Cerca la regola .titolo. Cambia color: darkgreen; in color: saddlebrown;. Poi prova darkblue e scegli il colore che preferisci, purché sia leggibile.

.titolo {
  color: saddlebrown;
}

Controllo: è cambiato soltanto il titolo principale? Mostra la classe nell’HTML e il selettore con il punto nel CSS.

3. Ingrandisci la descrizione

File: style.css. Nella regola .descrizione cambia font-size da 18px a 22px. Poi torna a 18px e scegli la dimensione che preferisci.

Controllo: la descrizione è più grande? Gli altri paragrafi sono rimasti uguali? Mostra dove compare la classe descrizione nell’HTML.

4. Cambia un materiale

File: index.html. Nella seconda scheda sostituisci assets/pietra.svg con assets/erba.svg. Aggiorna anche alt, il paragrafo con classe nome-blocco e la descrizione: devono parlare del nuovo materiale.

<img src="assets/erba.svg"
     alt="Blocco di terra con erba in pixel art">

Controllo: immagine e testi descrivono lo stesso materiale? Il legno della prima scheda è rimasto al suo posto?

5. Aggiungi una cosa da fare

File: index.html. Nel piano “Prima che faccia buio” aggiungi un nuovo elemento li all’interno della lista ul. Per esempio: illuminare l’ingresso.

<li>Illuminare l’ingresso.</li>

Controllo: la lista ha quattro voci? Ora spiega una modifica HTML e una CSS senza leggere l’aiuto. Questo è il traguardo base.

6. Extra · Espandi l’inventario

File: index.html e style.css. Duplica un’intera scheda, da <li class="blocco"> fino a </li>. Inseriscila dentro la lista ul dell’inventario e trasformala in un diamante: immagine, alt, nome, descrizione e quantità.

Conserva la classe blocco. La grafica ha già bordo e spazi. Per cambiarli tu, puoi provare due proprietà nuove dentro .blocco: border: 2px solid darkgreen; disegna un bordo verde, spesso 2 pixel e con linea continua; padding: 16px; aggiunge spazio fra contenuto e bordo. Scrivile nella regola già presente, senza cancellare background-color.

Controllo: tutti e tre i materiali hanno bordo e spazio interno? Cambia darkgreen in saddlebrown nella regola: devono cambiare tutti insieme. La grafica già pronta le dispone affiancate quando c’è spazio e una sotto l’altra sullo schermo stretto. Non devi programmare questa disposizione.

7. Extra · Il materiale raro

Aggiungi soltanto alla scheda del diamante una seconda classe: class="blocco raro". Nel CSS, nel punto indicato dal commento, crea la regola .raro con background-color: lightblue;. Aggiungi alla scheda anche il testo “Materiale raro”.

.raro {
  background-color: lightblue;
}

Controllo: cambia sfondo solo il diamante? Togli la parola raro dall’HTML: deve tornare come gli altri senza perdere il bordo.

8. Extra · Una stanza segreta

Aggiungi dentro main un h2 con id="stanza", un paragrafo e l’immagine della torcia. Nell’header aggiungi un link con href="#stanza". L’attributo id assegna un nome unico alla destinazione; href con # porta a quel punto della pagina. Riusa le classi della pagina dove servono.

Controllo: il link porta alla stanza? Provalo anche usando Tab per selezionarlo e Invio per aprirlo. L’id stanza deve comparire su un solo elemento.

Il tuo baule degli asset

Sei immagini locali. Nel tag img usa il percorso indicato. Sono disegni pixel art originali ispirati ai mondi a blocchi, non file ufficiali del gioco.

• Legno
  assets/legno.svg
• Pietra
  assets/pietra.svg
• Erba
  assets/erba.svg
• Diamante
  assets/diamante.svg
• Torcia
  assets/torcia.svg
• Piccone
  assets/piccone.svg

Salva il mondo, spiega le modifiche

1. Salva entrambi i file e ricarica il browser.
2. Controlla che le immagini si vedano e i collegamenti funzionino.
3. Mostra al compagno una modifica HTML e una regola CSS; poi scambiate i ruoli.
4. Conserva tutta la cartella, compresa assets. Per spostarla o consegnarla crea uno ZIP: su Windows, clic destro sulla cartella → Comprimi in file ZIP, oppure Invia a → Cartella compressa.

Queste prove si controllano sul tuo sito e spiegandole a voce. La guida non invia consegne e non assegna punteggi. Il banco online della lezione ha missioni diverse: non serve ottenere tutte le sue spunte per completare questo kit.

Torna al tuo rifugio