Obiettivo
Costruire una pagina iniziale ordinata, leggibile e riutilizzabile come base per un minisito.
Questo esercizio è pensato per essere svolto in modo incrementale: prima struttura HTML, poi regole generali, infine dettagli responsive e rifiniture.
Requisiti della traccia
- Un header con logo testuale e tre link di navigazione.
- Una hero con titolo, testo introduttivo e pulsante.
- Tre card affiancate su desktop e impilate su mobile.
- Un footer semplice con testo di chiusura.
Procedura consigliata
- Usa un contenitore centrale con larghezza massima.
- Applica `box-sizing: border-box` a tutti gli elementi.
- Gestisci gli spazi con `gap`, `padding` e `margin`, non con molti `<br>`.
- Prepara una media query sotto 700px per impilare le card.
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.
<header class="site-header">
<strong>Studio CSS</strong>
<nav><a href="#">Home</a><a href="#">Servizi</a><a href="#">Contatti</a></nav>
</header>
<section class="home-hero">
<h1>Imparare CSS costruendo pagine vere</h1>
<p>Una breve frase che spiega il valore della pagina.</p>
<a class="cta-link" href="#">Inizia ora</a>
</section>
<section class="cards">
<article>...</article>
<article>...</article>
<article>...</article>
</section>
CSS di partenza commentato
Le regole seguenti non sono una soluzione unica: servono come base ragionata da adattare al tuo progetto.
.site-header,
.cards {
display: flex;
gap: 20px;
}
.site-header { justify-content: space-between; align-items: center; }
.cards > article { flex: 1; padding: 22px; border: 1px solid #ddd; border-radius: 16px; }
@media (max-width: 700px) { .site-header, .cards { flex-direction: column; } }
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.