Quando usare questo esempio
Esempio completo di card corso riutilizzabile in home, elenco lezioni o landing page.
Copialo in una pagina di prova, cambia testi e colori, poi integralo nel tuo progetto solo dopo aver capito il ruolo di ogni classe.
HTML
La struttura HTML resta semantica: usa elementi riconoscibili e attributi utili per l’accessibilità.
<article class="demo-course-card">
<span class="demo-label">CSS3-LAB</span>
<h3>Corso pratico di CSS</h3>
<p>Impara a costruire layout responsive con esempi commentati.</p>
<a href="#">Apri il corso</a>
</article>
CSS commentato
Il CSS punta alla semplicità: poche classi, proprietà leggibili e comportamento responsive prevedibile.
.demo-course-card {
display: grid;
gap: 12px;
padding: 24px;
border: 1px solid #dbe4f0;
border-radius: 20px;
background: #fff;
}
.demo-label { color: #2563eb; font-weight: 800; }
.demo-course-card a { justify-self: start; padding: 10px 14px; border-radius: 999px; background: #2563eb; color: #fff; }
Commenti didattici
- `display: grid` crea una colonna interna ordinata.
- `justify-self: start` evita che il pulsante occupi tutta la larghezza.
- La label è separata dal titolo per creare gerarchia visiva.
Prova pratica: cambia un solo valore alla volta, per esempio `gap`, `padding` o `border-radius`, e osserva come cambia il componente.
Continua con gli esempi
Apri l’esempio successivo oppure torna alla raccolta completa.