Progetto Finale

Prerequisiti: Organizzazione del foglio di stile.

Quando una regola non produce l’effetto previsto, procedi per ipotesi verificabili. Controlla prima che il file corretto sia caricato, poi che il selettore corrisponda all’elemento. Verifica la validità del valore e infine la dichiarazione vincente nella cascata. Una modifica casuale di colore o un nuovo !important può nascondere la causa. Durante il debug cambia una cosa alla volta e annota il risultato, così ogni prova fornisce un’informazione utile.

La scheda Styles o Regole mostra dichiarazioni applicabili, ereditate e superate. Computed o Calcolato mostra i valori risultanti e aiuta a trovare l’origine delle proprietà. Il diagramma del box model permette di confrontare dimensioni dichiarate e spazio effettivo. Le modifiche effettuate nei DevTools sono normalmente temporanee: riporta nel file sorgente le correzioni che vuoi conservare e ricarica per verificare che non dipendano solo dalla sessione di ispezione.

Realizza una pagina con titolo, introduzione e tre schede di lezioni. Deve usare un CSS esterno, selettori di classe, proprietà personalizzate e una griglia a una colonna che si espande su schermi ampi. I collegamenti devono avere un focus visibile, il testo non deve traboccare e la pagina deve restare leggibile con zoom. Non serve copiare il layout di un sito famoso: l’obiettivo è dimostrare di saper spiegare ogni scelta e correggere un errore intenzionale.

Esempio con stile esterno. Il documento index.html collega il file stile.css mediante il tag link nella head.

<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Progetto finale</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<main class="pagina">
<h1>Le mie lezioni</h1>
<p>Un piccolo catalogo responsive.</p>
<div class="catalogo">
<article class="scheda" id="html"><h2>HTML</h2><a href="#html">Ripassa HTML</a></article>
<article class="scheda" id="css"><h2>CSS</h2><a href="#css">Ripassa CSS</a></article>
<article class="scheda" id="layout"><h2>Layout</h2><a href="#layout">Ripassa il layout</a></article>
</div>
</main>
</body>
</html>

:root { --accento: #174a7e; --spazio: 1rem; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; line-height: 1.6; color: #222; }
.pagina { max-width: 65rem; margin-inline: auto; padding: var(--spazio); }
.catalogo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio); }
.scheda { border: 1px solid var(--accento); padding: var(--spazio); overflow-wrap: anywhere; }
a { color: var(--accento); }
a:focus-visible { outline: 3px solid var(--accento); outline-offset: 3px; }
@media (min-width: 48rem) {
  .catalogo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

Ogni classe rappresenta un componente. La griglia parte da una colonna e il breakpoint ne introduce tre. Lo spazio condiviso mantiene una relazione coerente fra padding e gap.

<article class="scheda" id="verifica">
  <h2>Verifica finale</h2>
  <p>Una descrizione più lunga deve poter occupare più righe senza essere tagliata.</p>
  <a href="#verifica">Rivedi la verifica</a>
</article>

Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.

Riferimento tecnico: MDN — riferimento CSS. Cerca le proprietà o i selettori utilizzati nell’esempio.