Obiettivo
Presentare più lavori in modo coerente, usando sezioni ripetibili e titoli chiari.
Traccia
Crea una pagina portfolio con tre progetti, descrizione e link di approfondimento.
Requisiti richiesti
- Inserisci un’introduzione generale.
- Crea tre card di progetto con titolo e descrizione.
- Aggiungi almeno un link per ogni progetto.
- Non usare titoli solo per ingrandire il testo: mantieni la gerarchia.
Consiglio: prima scrivi il contenuto in modo semplice, poi controlla la gerarchia dei titoli e solo alla fine pensa alla grafica.
Procedura guidata
- Crea un nuovo file con nome chiaro, ad esempio
08-portfolio-semplice.html. - Inserisci la struttura base del documento o lavora dentro il
mainse il layout è già pronto. - Aggiungi titoli, paragrafi, liste, immagini o form richiesti dalla traccia.
- Apri il file nel browser e verifica che i contenuti siano nell’ordine corretto.
- Valida il codice e correggi eventuali tag non chiusi o attributi mancanti.
Base di partenza
Il codice seguente non è l’unica soluzione possibile: usalo come riferimento e personalizzalo.
<main>
<h1>Portfolio di Luca Verdi</h1>
<section>
<h2>Progetti selezionati</h2>
<article>
<h3>Sito per associazione</h3>
<p>Struttura HTML per presentare attività, calendario e contatti.</p>
<a href="progetto-associazione.html">Scopri il progetto</a>
</article>
<article>
<h3>Pagina corso</h3>
<p>Landing informativa per un laboratorio online.</p>
<a href="progetto-corso.html">Scopri il progetto</a>
</article>
</section>
</main>Checklist di controllo
- ✓Semantica: i tag descrivono il ruolo reale dei contenuti.
- ✓Accessibilità: immagini, form e link sono comprensibili anche fuori dal contesto visivo.
- ✓Ordine: c’è un solo
h1e i titoli non saltano livello senza motivo. - ✓Percorsi: link, immagini e file collegati usano nomi corretti.
Continua gli esercizi
Passa alla traccia precedente o successiva mantenendo lo stesso metodo: struttura, controllo, miglioramento.