Obiettivo
Capire come il CSS può adattare direzione, spazi e dimensioni dei link in base alla larghezza dello schermo.
Questo esercizio è pensato per essere svolto in modo incrementale: prima struttura HTML, poi regole generali, infine dettagli responsive e rifiniture.
Requisiti della traccia
- Logo o nome del sito.
- Quattro link principali.
- Menu in riga su desktop.
- Menu a capo o in colonna su smartphone.
Procedura consigliata
- Non fissare altezze rigide sul menu.
- Usa `flex-wrap` oppure cambia `flex-direction` in media query.
- Lascia area cliccabile ampia con padding sui link.
- Mantieni visibile il focus da tastiera.
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="top-menu">
<a class="logo" href="#">CSS Lab</a>
<nav aria-label="Menu principale">
<a href="#">Home</a>
<a href="#">Lezioni</a>
<a href="#">Esempi</a>
<a href="#">Contatti</a>
</nav>
</header>
CSS di partenza commentato
Le regole seguenti non sono una soluzione unica: servono come base ragionata da adattare al tuo progetto.
.top-menu { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.top-menu nav { display: flex; flex-wrap: wrap; gap: 10px; }
.top-menu a { padding: 10px 12px; border-radius: 999px; }
.top-menu a:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
@media (max-width: 640px) { .top-menu { flex-direction: column; align-items: flex-start; } }
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.