Obiettivo
Allenare gerarchia visiva, gestione immagini e call to action in un componente compatto.
Questo esercizio è pensato per essere svolto in modo incrementale: prima struttura HTML, poi regole generali, infine dettagli responsive e rifiniture.
Requisiti della traccia
- Immagine o area placeholder.
- Titolo prodotto, descrizione e prezzo.
- Pulsante di azione.
- Hover leggero senza esagerare.
Procedura consigliata
- Usa `object-fit: cover` sulle immagini.
- Non lasciare il prezzo visivamente uguale al testo descrittivo.
- Mantieni il pulsante nello stesso punto anche con descrizioni diverse.
- Evita ombre troppo pesanti.
Commento: lavora sempre su una copia del file. In CSS è più facile capire un errore se modifichi una proprietà alla volta e controlli subito il risultato nel browser.
Base HTML commentata
Puoi partire da questa struttura e completarla con contenuti reali.
<article class="product-card">
<img src="immagine.jpg" alt="Descrizione del prodotto">
<div class="product-body">
<h3>Corso CSS pratico</h3>
<p>Descrizione breve del contenuto.</p>
<strong class="price">€ 49</strong>
<a href="#">Scopri di più</a>
</div>
</article>
CSS di partenza commentato
Le regole seguenti non sono una soluzione unica: servono come base ragionata da adattare al tuo progetto.
.product-card { overflow: hidden; border: 1px solid #dbe4f0; border-radius: 20px; background: #fff; }
.product-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.product-body { display: grid; gap: 10px; padding: 20px; }
.price { color: #1d4ed8; font-size: 1.35rem; }
Controllo finale
- La pagina resta leggibile su smartphone?
- I nomi delle classi descrivono davvero il contenuto?
- Il componente può essere riutilizzato in un’altra pagina?
- Hover e focus sono visibili ma non invadenti?
Continua con gli esercizi
Procedi con la traccia successiva oppure torna all’indice degli esercizi.