CSS — Mauro Torriani

01 Introduzione al CSS e sintassi di base 2 ore ➤

Obiettivi

Comprendere il ruolo del CSS nella pagina web
Collegare fogli di stile in linea, interni ed esterni
Scrivere le prime regole con selettori semplici

Esercizi

BaseApplicare uno stile inline, uno interno e uno esterno alla stessa pagina
BaseColorare titoli e paragrafi di una pagina HTML esistente
IntermedioIndividuare e correggere un collegamento errato al foglio di stile esterno

02 Selettori e specificità 2 ore ➤

Obiettivi

Usare selettori di tipo, classe e id
Combinare selettori discendenti e diretti
Calcolare la specificità per risolvere conflitti tra regole

Esercizi

BaseStile differenziato per elementi con classi diverse nella stessa pagina
IntermedioSelettori combinati per stilizzare solo i link dentro la barra di navigazione
AvanzatoRisoluzione di un conflitto tra tre regole con specificità diversa

03 Box model 2 ore ➤

Obiettivi

Descrivere margin, border e padding
Applicare box-sizing: border-box
Prevedere le dimensioni finali di un elemento

Esercizi

BaseCard con bordo, padding e margine calcolati a mano
BaseConfronto tra content-box e border-box sullo stesso layout
IntermedioCorrezione di un layout che “rompe” per un box model mal gestito

04 Colori, tipografia e unità di misura 2 ore ➤

Obiettivi

Usare i formati colore hex, rgb e hsl
Impostare font-family, font-size e line-height
Scegliere tra unità assolute (px) e relative (em, rem, %)

Esercizi

BasePalette di colori coerente applicata a una pagina esistente
IntermedioImpostazione di una scala tipografica con rem
IntermedioConversione di un foglio di stile da px a rem/em

05 Layout con Flexbox 3 ore ➤

Obiettivi

Attivare un contenitore flessibile
Allineare gli elementi con justify-content e align-items
Gestire il wrapping degli elementi con flex-wrap

Esercizi

BaseBarra di navigazione orizzontale con Flexbox
IntermedioGalleria di card allineate e distribuite con justify-content
AvanzatoLayout a due colonne responsive con flex-wrap e flex-basis

06 Layout con Grid 3 ore ➤

Obiettivi

Definire righe e colonne con grid-template
Posizionare elementi con grid-column e grid-row
Nominare le aree di un layout con grid-template-areas

Esercizi

BaseGriglia di 3 colonne per una galleria fotografica
IntermedioLayout di pagina (header, sidebar, main, footer) con grid-template-areas
AvanzatoCombinazione di Grid per la struttura e Flexbox per i singoli componenti

07 Posizionamento e z-index 2 ore ➤

Obiettivi

Distinguere static, relative, absolute, fixed e sticky
Sovrapporre elementi controllando lo z-index
Creare un'intestazione che rimane visibile con sticky

Esercizi

BaseBadge posizionato sopra un'immagine con position: absolute
IntermedioIntestazione sticky che rimane visibile durante lo scroll
AvanzatoMenu a tendina sovrapposto correttamente con z-index

08 Pseudo-classi e pseudo-elementi 2 ore ➤

Obiettivi

Usare :hover, :focus e :nth-child
Inserire contenuto generato con ::before e ::after
Applicare stili condizionali senza classi aggiuntive

Esercizi

BaseEffetti hover su pulsanti e link di una pagina esistente
BaseRighe alternate di una tabella con :nth-child
IntermedioIcone decorative inserite con ::before su una lista

09 Responsive design e media query 3 ore ➤

Obiettivi

Applicare l'approccio mobile-first
Scrivere media query per più breakpoint
Adattare Flexbox e Grid a schermi diversi

Esercizi

BaseConversione di un layout fisso in un layout fluido
IntermedioMenu di navigazione che diventa verticale sotto un certo breakpoint
AvanzatoSito a 3 breakpoint (mobile, tablet, desktop) con layout Grid adattivo

10 Transizioni, animazioni e progetto finale 3 ore ➤

Obiettivi

Applicare transition a cambi di stato
Definire animazioni con @keyframes
Restyling completo di un sito HTML esistente

Esercizi

BasePulsante con transizione di colore e leggero ingrandimento al passaggio del mouse
IntermedioAnimazione di caricamento con @keyframes
AvanzatoProgetto finale: restyling completo del sito HTML realizzato nel corso precedente