Landing page

Traccia

Struttura una landing page con hero, benefici, programma, FAQ e call to action.

Requisiti richiesti

• Apri con una hero chiara e un invito all’azione.
• Presenta 3 benefici in elenco.
• Aggiungi una sezione FAQ.
• Inserisci un link finale di iscrizione o contatto.

Procedura guidata

1. Crea un nuovo file con nome chiaro, ad esempio 07-landing-page.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>
  <section>
    <h1>Impara HTML5 in una settimana</h1>
    <p>Un mini percorso pratico per costruire pagine web da zero.</p>
    <p><a href="#iscrizione">Iscriviti ora</a></p>
  </section>
  <section>
    <h2>Cosa imparerai</h2>
    <ul>
      <li>Creare documenti HTML validi</li>
      <li>Usare tag semantici</li>
      <li>Preparare contenuti per CSS e JavaScript</li>
    </ul>
  </section>
  <section>
    <h2>Domande frequenti</h2>
    <h3>Serve esperienza?</h3>
    <p>No, il corso parte dalle basi.</p>
  </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.