Laboratorio CSS · Guida pratica
Porta sul computer le missioni di Theta e la missione dell’Armonia — CSS. Con Pixel, scegli colori, caratteri, cornici e spazi: la struttura HTML è già pronta.
ZIP · circa 35 KB · 13 tappe · in italiano
Prima configurazione
La prima volta fatti aiutare da un adulto a preparare un computer, un browser e un editor che salvi testo semplice. Se manca l’editor, preparatelo prima di iniziare. Qui non c’è un editor online: lavori sui tuoi file.
Premi Scarica il laboratorio CSS e trova lo ZIP tra i download. Su Windows: clic destro sullo ZIP → Estrai tutto → Estrai. Su Mac: doppio clic sullo ZIP. Apri poi theta-css-laboratorio-it: devi vedere LEGGIMI.txt e inizio. Potrebbe trovarsi dentro un’altra cartella creata durante l’estrazione.
Dentro theta-css-laboratorio-it trovi inizio. Copia e incolla tutta quella cartella sul Desktop, poi rinomina solo la copia la-mia-piazza. Non creare una cartella vuota e non spostare l’originale.
Apri la-mia-piazza: devono esserci index.html, base.css e stile.css. Non rinominarli e non separarli. Se vedi nomi senza .html o .css, chiedi a un adulto di mostrare le estensioni: non aggiungerle alla cieca.
Dalla tua cartella la-mia-piazza, apri index.html nel browser. Se il doppio clic apre un’altra app, trascina index.html in una scheda vuota del browser. Devi vedere La mia piazza di Ondyria, con bottega, vetrina e mercato.
Apri l’editor di testo/codice predisposto con un adulto. Usa File → Apri e scegli stile.css dentro la-mia-piazza. Devi vedere codice, non la città. Lascia aperti sia l’editor sia il browser. Non usare Word o Pages.
Segui la pagina 10 del libro nella tua copia di stile.css. Salva nell’editor (Ctrl+S su Windows, ⌘+S su Mac), poi torna alla piazza nel browser e premi Aggiorna (↻). Non devi scaricare di nuovo lo ZIP né riaprire il sito a ogni prova.
Nel browser vedi la piazza schematica; nell’editor vedi il codice di stile.css. All’inizio bottega e titolo non sono ancora sistemati: è voluto. Ora puoi seguire la storia. Se nel browser compare solo testo con simboli come <html>, hai aperto il file come testo: torna al passo 4. Se una cartella di lavoro esiste già, usa un nome nuovo, come la-mia-piazza-2: non sostituire le prove precedenti.
A pagina 10 vai in fondo a stile.css, dopo l’ultima }, e aggiungi il blocco con p su nuove righe. Non cancellare il codice che c’è già e non copiare i segni ``` dei riquadri. Poi sostituisci p con .avviso come chiede il libro: modifica quel blocco, non aggiungerne un secondo. Dopo aver salvato e aggiornato, deve cambiare solo «Avviso: bottega aperta.», non il menu né l’altro avviso.
stile.css contiene le regole da modificare. base.css è la scenografia pronta: non modificarlo. Tocca index.html solo quando lo chiede il libro: nell’Extra di pagina 11 e nel progetto a pagina 34. Dopo l’Extra ripristina l’HTML come indicato.
Segui il libro
Cinque missioni, poi la Challenge del tendone firmato e una piazza da personalizzare.
p e .avviso
Raggiungi tutti i paragrafi, poi scegli soltanto l’avviso giusto. Pagine 10–11.
color e background-color
Distingui le parole dallo sfondo della bottega con un buon contrasto. Pagine 15–16.
font-size e line-height
Dai al titolo il suo carattere e al primo avviso dimensioni e interlinea comode. Pagine 20–21.
border, padding e margin
Distingui la cornice, lo spazio dentro e quello fuori. Prova anche border-radius. Pagine 24–25.
display: flex, gap e flex-wrap
Affianca i chioschi e lascia andare a capo quelli che non trovano posto. Pagine 28–29.
Dentro il pacchetto
Comincia da inizio e continua nella tua copia. Le altre cartelle contengono risultati già pronti: usale dopo aver provato o per ripartire da una tappa.
inizio P. 6m1 Pp. 10–11m2 Pp. 15–16m3-titolo P. 20m3 P. 21m4 Pp. 24–25fila P. 28m5 P. 29sfida P. 33corretta Pp. 33 e 39finale-1 P. 34finale-2 P. 35finale P. 36fila mantiene una sola riga; in sfida cambiano troppi tendoni. Non sono le soluzioni finali. Copia sempre una cartella intera, senza mescolare tappe o sovrascrivere il tuo lavoro. Trovi tutte le istruzioni anche in LEGGIMI.txt.
Prima di riscrivere tutto, controlla queste quattro cose.
Salva nell’editor, poi aggiorna la pagina nel browser. Sono due passaggi diversi.
Il file index.html aperto deve stare nella stessa cartella dello stile.css che stai modificando.
Usa testo semplice e il nome stile.css, non stile.css.txt. Il file esiste già: usa Salva, non creare un altro documento con Salva con nome. Se compare una richiesta di conversione o formato, chiedi aiuto a un adulto.
Ricontrolla selettore, parentesi graffe, due punti e punti e virgola. Quando il libro chiede di cambiare un valore, modifica la regola esistente. Se non riesci, conserva la tua prova e copia la cartella della tappa precedente con un nome nuovo.
Oltre la missione
Il libro introduce alcuni concetti fondamentali di CSS attraverso una storia ed esercizi pratici. È un punto di partenza, non un manuale completo. Il laboratorio contiene ciò che serve per seguire il libro; queste risorse facoltative ti aiutano ad approfondire.
MDN Web Docs è una risorsa tecnica esterna in inglese. Parti da un argomento che conosci e, se serve, esplorala con un adulto o un insegnante. Puoi usare la traduzione del browser. Conserva i file originali prima di sperimentare. Ogni link apre una nuova scheda.
Approfondisci selettori, colori e regole di stile. Prova una modifica alla volta in una copia della tua piazza.
Leggi su MDN: Riparti dalle basi CSS — si apre in una nuova schedaRivedi il box model: contenuto, padding, bordo e margine. Confrontalo con le cornici della missione.
Leggi su MDN: Distingui gli spazi — si apre in una nuova schedaScopri come disporre gli elementi e gestire lo spazio, partendo dai chioschi e dalle righe della tua piazza.
Leggi su MDN: Esplora Flexbox — si apre in una nuova schedaCerca una proprietà quando ti serve. Ci sono anche argomenti avanzati: non devi conoscere tutto per completare il libro.
Leggi su MDN: Consulta il riferimento CSS — si apre in una nuova schedaLa tua piazza ti aspetta
Conserva le tue prove: confrontarle è parte della missione.