▧ Portfolio

Portfolio semplice

Crea una pagina portfolio con tre progetti, descrizione e link di approfondimento.

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

  1. Crea un nuovo file con nome chiaro, ad esempio 08-portfolio-semplice.html.
  2. Inserisci la struttura base del documento o lavora dentro il main se il layout è già pronto.
  3. Aggiungi titoli, paragrafi, liste, immagini o form richiesti dalla traccia.
  4. Apri il file nel browser e verifica che i contenuti siano nell’ordine corretto.
  5. 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 h1 e 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.