Metti alla prova quello che hai imparato
Esegui l’audit SEO su Martini Francesco e verifica title, meta e performance sulla tua homepage.
Avvia audit SEOCSS
CSS con variabili, flex, tipografia e media query: layout responsive coerenti senza rifare tutto il foglio di stile a ogni breakpoint del tuo progetto.
Lezioni
-
Benvenuto nel percorso
Dal colore al layout responsive: regole riutilizzabili senza framework obbligatori.
Le variabili CSS ti aiutano a mantenere coerenza su tutto il sito.
Inizia - Variabili e colori Custom properties per colori e spaziature: token CSS riutilizzabili che uniformano il design e semplificano tweak e dark mode senza caccia al valore.
- Box model e box-sizing margin, padding, border e box-sizing per layout prevedibili: guida operativa per box model e box-sizing sul web, con errori comuni da evitare.
- Flexbox di base Flexbox per allineare e distribuire elementi: layout in fila o colonna senza float, con pattern pronti per navbar, card e blocchi centrati in poche regole.
- CSS Grid essenziale Griglie a due dimensioni per card, dashboard e layout pagina: guida operativa per css grid essenziale — pratica su css grid essenziale per il tuo progetto web.
- Spaziatura e stack gap, margin-block e ritmo verticale costante: guida operativa per spaziatura e stack: esempi e passi da applicare subito sul sito che pubblichi.
- Font e leggibilità Caricamento font e scala tipografica equilibrata: testi lunghi leggibili su mobile con interlinea adeguata senza appesantire la prima visualizzazione.
- Scala tipografica clamp(), rem e gerarchia visiva senza zoom illeggibile: guida operativa per scala tipografica: esempi e passi da applicare subito sul sito che pubblichi.
- Colori e contrasto in CSS Coppie testo/sfondo che rispettano AA e stati hover: guida operativa per colori e contrasto in css: esempi e passi da applicare subito sul sito che pubblichi.
- Media query Media query mobile-first e breakpoint sensati: adatta il layout a schermi piccoli e grandi senza duplicare interi CSS né perdere coerenza visiva.
- Immagini fluide in CSS max-width 100%, object-fit e aspect-ratio nei layout: guida operativa per immagini fluide in css: esempi e passi da applicare subito sul sito che pubblichi.
- Pulsanti e stati Target touch, focus-visible e hover senza solo colore: guida operativa per pulsanti e stati: esempi e passi da applicare subito sul sito che pubblichi.
- Animazioni rispettose prefers-reduced-motion, durate brevi e proprietà compositable: guida operativa per animazioni rispettose sul web, con errori comuni da evitare.
- Organizzare i fogli di stile Modularità, specificità e convenzioni di naming leggere: guida operativa per organizzare i fogli di stile sul web, con errori comuni da evitare.
- Debug con DevTools Ispezionare regole, flex/grid overlay e problemi di cascade: guida operativa per debug con devtools: esempi e passi da applicare subito sul sito che pubblichi.