Browser-native foundation

HTML
& CSS

Un corso costruito come una pagina viva: struttura semantica, cascata, box model, layout e pubblicazione. Qui il design non è decorazione: è il comportamento del browser reso leggibile.

header
hero
content
footer

Due responsabilità

Struttura e presentazione, separate per mestiere.

<HTML>

Significato

HTML descrive cos'è un contenuto: titolo, navigazione, articolo, immagine, relazione. È il contratto semantico della pagina.

Tipo
markup
File
.html
Standard
Living Standard
{CSS}

Forma

CSS governa cascata, specificità, layout, tipografia e stati. Non colora soltanto: decide come il contenuto abita lo spazio.

Tipo
stile
File
.css
Motore
cascata

Competenze finali

Non teoria: abilità verificabili nel browser.

01

Leggere qualsiasi pagina web

Aprire il sorgente di qualsiasi sito e capire subito struttura, semantica e gerarchia HTML — senza cercare ogni tag su Google.

02

Debuggare CSS senza indovinare

Sapere esattamente quale regola CSS è attiva e perché. Usare i DevTools per ispezionare e correggere stili in tempo reale, senza trial and error.

03

Costruire layout moderni

Usare Flexbox e CSS Grid per realizzare navbar, griglie di card, layout a colonne e pagine complete — come nei siti professionali.

04

Progettare per ogni dispositivo

Scrivere un solo foglio di stile che funziona su smartphone, tablet e desktop con l'approccio mobile-first dell'intera industria.

05

Creare un sistema di stile

Usare le custom properties CSS per costruire un vocabolario visivo riutilizzabile: palette, tipografia e spaziature definiti una volta, applicati ovunque.

06

Pubblicare online

Portare un progetto dal file locale a un URL pubblico su GitHub Pages o Netlify — qualcosa di concreto da mostrare, non solo da tenere in locale.

01 #html-css-01

HTML: struttura e semantica

HTML non è solo codice: è il modo in cui si dà significato a un contenuto. Si impara a scegliere il tag giusto per il motivo giusto — non <div> per tutto, ma elementi semantici che comunicano struttura a browser, motori di ricerca e tecnologie assistive. Una base solida qui evita mesi di refactoring futuro.

  1. 01 Struttura di un documento HTML5: DOCTYPE, html, head, body
  2. 02 Tag semantici: header, nav, main, article, section, footer, aside
  3. 03 Gerarchia dei titoli h1–h6: perché conta per accessibilità e SEO
  4. 04 Testo: p, blockquote, em, strong, abbr, code, pre
  5. 05 Link: <a>, href, target, rel — e quando non usare target='_blank'
  6. 06 Immagini: <img>, attributo alt obbligatorio, lazy loading
  7. 07 Liste: ul, ol, dl e quando usarle semanticamente
  8. 08 Attributi globali: id, class, lang, data-* e tabindex

OutputUna pagina HTML valida e semanticamente corretta con intestazione, navigazione, articolo principale, immagine con alt text e piè di pagina — verificabile con il validatore W3C.

02 #html-css-02

CSS: selettori, cascata e specificità

Capire come CSS decide quale regola vince è il prerequisito per debuggare stili che sembrano non funzionare. Questo modulo chiarisce cascata, ereditarietà e specificità: il motore invisibile che governa ogni foglio di stile. Chi capisce questi meccanismi riduce il bisogno di !important.

  1. 01 Collegare un foglio di stile: <link> e l'attributo rel
  2. 02 Selettori: elemento, .classe, #id, [attributo]
  3. 03 Pseudo-classi: :hover, :focus, :first-child, :nth-child(), :not()
  4. 04 Pseudo-elementi: ::before, ::after, ::placeholder, ::selection
  5. 05 La cascata: ordine delle regole e l'algoritmo di risoluzione
  6. 06 Specificità: calcolo a tre cifre (0,0,0) e strategie pratiche
  7. 07 Ereditarietà: quali proprietà si propagano e quali no
  8. 08 Colori: hex, rgb(), hsl(), color-mix() e opacity
  9. 09 Tipografia: font-family, font-size, font-weight, line-height, letter-spacing

OutputUn foglio di stile con palette cromatica, sistema tipografico e specificità controllata — zero !important, tutto motivato.

03 #html-css-03

Box model e spaziatura

Ogni elemento HTML è una scatola rettangolare con quattro strati: content, padding, border, margin. Capire il box model è capire perché gli elementi occupano lo spazio che occupano. Si introduce anche box-sizing: border-box, la convenzione adottata da tutti i framework CSS moderni.

  1. 01 I quattro strati: content area, padding, border, margin
  2. 02 box-sizing: content-box vs border-box — e perché border-box è quasi sempre la scelta giusta
  3. 03 width, height, min-width, max-width, min-height, max-height
  4. 04 margin: auto e la centratura orizzontale classica
  5. 05 Collasso dei margini verticali: quando due margini diventano uno
  6. 06 overflow: visible, hidden, scroll, auto, clip
  7. 07 display: block, inline, inline-block — differenze pratiche
  8. 08 Ispezione del box model con i DevTools del browser

OutputUn componente card con padding interno, bordo, ombra e margini precisi — costruito misurando ogni pixel con i DevTools.

04 #html-css-04

Flexbox

Flexbox ha eliminato decenni di hack con float e table. È il sistema per disporre elementi in una dimensione — riga o colonna — con controllo preciso su allineamento, distribuzione dello spazio e ordine visivo. Il modello mentale container/items, una volta assimilato, diventa automatico.

  1. 01 display: flex e il concetto di flex container vs flex items
  2. 02 flex-direction: row, row-reverse, column, column-reverse
  3. 03 justify-content: flex-start, center, space-between, space-around, space-evenly
  4. 04 align-items e align-self: controllo sull'asse trasversale
  5. 05 align-content: allineamento su righe multiple
  6. 06 flex-wrap: nowrap vs wrap — gestione del trabocco
  7. 07 flex-grow, flex-shrink, flex-basis e la shorthand flex
  8. 08 gap: spaziatura uniforme senza margini
  9. 09 order: riordinare visivamente senza toccare l'HTML

OutputUna navbar responsive con logo a sinistra e link a destra, più una griglia di card a larghezza fluida — senza float, senza hack, senza JavaScript.

05 #html-css-05

CSS Grid

Grid è il sistema a due dimensioni di CSS: righe e colonne simultaneamente. Dove Flexbox gestisce una direzione, Grid gestisce il piano intero. I layout che prima richiedevano framework pesanti si costruiscono oggi con poche righe dichiarative.

  1. 01 display: grid e definizione esplicita di righe e colonne
  2. 02 grid-template-columns e grid-template-rows
  3. 03 L'unità fr: frazioni dello spazio disponibile
  4. 04 gap, column-gap, row-gap
  5. 05 grid-column e grid-row: posizionamento e spanning esplicito
  6. 06 grid-template-areas: layout con nomi semantici
  7. 07 auto-fit e auto-fill con minmax(): griglie responsive senza media query
  8. 08 place-items e place-content per l'allineamento
  9. 09 Differenze pratiche tra Grid e Flexbox: quando usare quale

OutputUn layout a pagina intera con header, barra laterale, area contenuto principale e footer — costruito con grid-template-areas in meno di 20 righe di CSS.

06 #html-css-06

Responsive design

Oltre il 60% del traffico web arriva da dispositivi mobili. Un sito responsive non è un optional — è il punto di partenza. L'approccio mobile-first ribalta la prospettiva: si progetta prima per il vincolo più stretto e si espande verso schermi più ampi, producendo CSS più pulito e manutenibile.

  1. 01 Mobile-first: progettare dal piccolo verso il grande
  2. 02 Il viewport meta tag: perché è obbligatorio e cosa fa
  3. 03 Media queries: @media, min-width, max-width e range syntax moderna
  4. 04 Breakpoint comuni e strategie di scelta
  5. 05 Unità relative: %, em, rem, vh, vw, dvh
  6. 06 Fluid typography con clamp(min, preferred, max)
  7. 07 Immagini responsive: max-width: 100%, object-fit, srcset e sizes
  8. 08 Container queries: stile basato sulla dimensione del container

OutputLa pagina dei moduli precedenti adattata per smartphone, tablet e desktop con approccio mobile-first — verificata su almeno tre breakpoint con i DevTools.

07 #html-css-07

Tipografia, variabili CSS e sistema di stile

Un sito professionale ha coerenza visiva: stessi colori, stesse spaziature, stessa gerarchia tipografica ovunque. Le custom properties CSS permettono di costruire questo sistema una volta e riusarlo globalmente — cambiare il colore primario significa modificare una riga in :root.

  1. 01 Custom properties: dichiarazione (--nome: valore) e utilizzo (var(--nome))
  2. 02 Scope e cascata delle variabili: :root, componenti, stati hover/focus
  3. 03 Scala tipografica: definire una progressione coerente di dimensioni
  4. 04 Caricamento font con @font-face: src, format, font-display
  5. 05 Google Fonts e font-display: swap per evitare il FOIT
  6. 06 Tema chiaro/scuro con @media (prefers-color-scheme)
  7. 07 Transizioni CSS: transition, easing, delay
  8. 08 Animazioni con @keyframes, animation e will-change

OutputUn sistema di design in CSS puro: variabili per colori, scala tipografica e spaziatura — applicato a tutti i componenti costruiti nei moduli precedenti.

08 #html-css-08

Progetto finale: pagina personale

Il test definitivo: costruire una pagina personale o di portfolio da zero. Nessun template, nessuno scaffolding — solo un brief, gli strumenti appresi e la responsabilità di ogni decisione di struttura e presentazione. Il risultato viene pubblicato su un dominio reale.

  1. 01 Brief e wireframe su carta: pianificare prima di scrivere codice
  2. 02 Struttura HTML semantica del progetto completo
  3. 03 Sistema di variabili CSS personalizzato (colori, font, spacing)
  4. 04 Layout responsive con Grid per la struttura e Flexbox per i componenti
  5. 05 Sezioni: hero personale, presentazione, portfolio, contatti
  6. 06 Ottimizzazione immagini: WebP/AVIF, lazy loading, dimensioni corrette
  7. 07 Verifica accessibilità: contrasto, navigazione da tastiera, screen reader
  8. 08 Pubblicazione su GitHub Pages o Netlify — gratuita e permanente

OutputUna pagina personale completa, accessibile, responsive e pubblicata online — con un URL reale da condividere.