Obiettivo
Mettere insieme componenti diversi in una pagina coerente, ordinata e pronta per essere pubblicata.
Questo esercizio è pensato per essere svolto in modo incrementale: prima struttura HTML, poi regole generali, infine dettagli responsive e rifiniture.
Requisiti della traccia
- Hero con titolo, descrizione e due pulsanti.
- Sezione vantaggi con tre card.
- Programma del corso in griglia o lista.
- Form finale di richiesta informazioni.
- Footer con link utili.
Procedura consigliata
- Prima scrivi l’HTML completo, poi passa al CSS.
- Definisci palette, spaziature e classi riutilizzabili all’inizio del file.
- Controlla la pagina a 1200px, 768px e 390px.
- Non duplicare componenti: crea classi generiche come `.card`, `.btn`, `.section-title`.
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.
<main class="course-page">
<section class="course-hero">...</section>
<section class="benefits">...</section>
<section class="program">...</section>
<section class="request-info">...</section>
</main>
CSS di partenza commentato
Le regole seguenti non sono una soluzione unica: servono come base ragionata da adattare al tuo progetto.
:root { --brand: #2563eb; --soft: #eaf1ff; --text: #1f2937; }
.course-page { color: var(--text); }
.course-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: center; }
.card { padding: 22px; border: 1px solid #dbe4f0; border-radius: 18px; background: #fff; }
@media (max-width: 800px) { .course-hero { grid-template-columns: 1fr; } }
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.