Una guida per imparare il CSS e personalizzare l’aspetto delle pagine web, con spiegazioni, esempi pratici e materiali di consultazione.
Unità 1 Fondamenti dei fogli di stile
Introduzione ai CSS, panoramica delle proprietà e approfondimento dei colori con tabelle di consultazione.
Introduzione ai CSS 35 min
Proprietà per il testo 45 min
Proprietà per lo sfondo 40 min
Proprietà per bordi e ombre 40 min
Margini e spazi interni 40 min
Proprietà per le dimensioni 40 min
Proprietà, valori e commenti 35 min
Proprietà per il posizionamento 45 min
Proprietà per effetti e interazione 45 min
I colori in CSS 45 min
Colori con nomi Consultazione
Colori esadecimali Consultazione
Colori RGB Consultazione
Unità 2 Selettori
Selezionare gli elementi e riconoscere stati e relazioni.
Selettori di elemento 35 min Selettori di classe 35 min Selettori di ID 35 min Selettore universale e raggruppamento 35 min Selettori di discendente e figlio diretto 35 min Selettori di fratelli 35 min Selettori di attributo 35 min Pseudo-classi 35 min Pseudo-elementi 35 min Verifica dell’unità 25 min
Unità 3 Cascata ed ereditarietà
Interpretare le dichiarazioni applicate dal browser.
Unità 4 Valori, colori e testo
Unità di misura, colori e formattazione del testo.
Unità assolute e pixel CSS 35 min Unità relative: em e rem 35 min Percentuali e unità del viewport 35 min Colori: nomi, esadecimale, RGB e HSL 35 min Trasparenza e opacità 35 min Famiglie di caratteri 35 min Dimensione, peso e stile dei caratteri 35 min Interlinea e spaziatura del testo 35 min Allineamento e decorazione del testo 35 min Verifica dell’unità 25 min
Unità 5 Box model e aspetto degli elementi
Dimensioni, spazi, bordi e sfondi.
Il box model 35 min Larghezza e altezza 35 min Dimensioni minime e massime 35 min Padding 35 min Margini e collasso dei margini 35 min Bordi 35 min box-sizing 35 min Colori e immagini di sfondo 35 min Gradienti 35 min Angoli arrotondati e ombre 35 min Gestione dell’overflow 35 min Verifica dell’unità 25 min
Unità 6 Flusso e posizionamento
Disposizione, visibilità e sovrapposizioni.
Flusso normale della pagina 35 min display: block, inline e inline-block 35 min Nascondere elementi: display, visibility e opacity 35 min Posizionamento relativo 35 min Posizionamento assoluto 35 min Posizionamento fisso 35 min Posizionamento sticky 35 min z-index e contesti di impilamento 35 min Verifica dell’unità 25 min
Unità 7 Flexbox
Disporre e allineare componenti lungo un asse.
Contenitore ed elementi flex 35 min Direzione e assi 35 min Allineamento con justify-content 35 min Allineamento con align-items 35 min Spaziatura con gap 35 min Ritorno a capo con flex-wrap 35 min flex-grow, flex-shrink e flex-basis 35 min Allineamento individuale con align-self 35 min Laboratorio: menu e schede con Flexbox 45 min Verifica dell’unità 25 min
Unità 8 CSS Grid
Organizzare righe e colonne.
Contenitore e struttura della griglia 35 min Definizione di righe e colonne 35 min Unità fr e funzione repeat() 35 min Dimensionamento con minmax() 35 min Posizionamento mediante linee 35 min Aree della griglia 35 min Allineamento e spaziatura 35 min Griglie adattive con auto-fit e auto-fill 35 min Laboratorio: impaginare una pagina con Grid 45 min Verifica dell’unità 25 min
Unità 9 Pagine responsive
Adattare e verificare il layout con diverse dimensioni.
Principi del responsive design e viewport 35 min Media query 35 min Approccio mobile first 35 min Scelta dei breakpoint 35 min Immagini responsive con CSS 35 min Dimensioni fluide con calc(), min(), max() e clamp() 35 min Verificare il layout con DevTools 35 min Laboratorio: pagina responsive 45 min Verifica dell’unità 25 min
Unità 10 CSS per componenti e interazioni
Componenti, movimento e organizzazione del foglio.
Proprietà personalizzate e var() 35 min Collegamenti e focus visibile 35 min Liste 35 min Tabelle 35 min Moduli e pulsanti 35 min Trasformazioni 35 min Transizioni 35 min Animazioni con @keyframes 35 min Preferenze per il movimento ridotto 35 min Organizzazione del foglio di stile 35 min Progetto finale 60 min Verifica dell’unità 25 min