Appunti pratici e cheatsheet chiari per costruire pagine e interazioni moderne, accessibili e performanti.
Cerchi appunti di HTML, appunti di CSS o appunti di Javascript? Sei nel posto giusto! Qui trovi tutti gli appunti e cheatsheet di HTML, CSS e Javascript relativi al mini-corso di HTML, CSS, JS sul canale di lidiacodes .
Hai domande, proposte o problemi con HTML, CSS, Javascript? Contattami qui.
Struttura, semantica e accessibilità: le basi per pagine solide e contenuti facili da indicizzare.
I tag HTML definiscono la struttura e il significato del contenuto di una pagina. Qui trovi spiegazioni chiare su quando usare ciascun elemento, come organizzare contenuti semantici e come scrivere markup accessibile e indicizzabile.
I tag semantici (<header>, <main>, <article>, <section>, <footer>) forniscono contesto ai lettori e ai motori di ricerca. Qui mostro pattern pratici per comporre layout leggibili, con esempi di struttura e attributi utili per l'accessibilità.
Per immagini efficaci usa alt descrittivi,
srcset e loading="lazy". Spiego
strategie per ottimizzare carico, qualità e compatibilità senza
sacrificare accessibilità.
Un esempio di wrapper semantico per articoli e layout editoriali, pensato per SEO e lettori assistivi.
<main class="content-shell">
<article>
<header><h1>Titolo</h1></header>
<section>Contenuto</section>
</article>
</main>Form ben progettati combinano markup semantico, etichette chiare e validazione nativa. Qui trovi esempi pratici per migliorare usabilità, accessibilità e prevenire errori comuni.
Principi pratici per rendere i tuoi contenuti più trovabili: meta tag, struttura, performance e segnali di accessibilità.
Usa correttamente gli <h1>-<h2> per
gerarchia, tag semantici per il contenuto e attributi
alt descrittivi per le immagini.
Prioritizza caricamento veloce: immagini ottimizzate,
preload per risorse critiche e design mobile-first.
I Core Web Vitals influenzano il ranking.
Aggiungi il tuo sito su Google Search Console per tenere sotto controllo chi vede e clicca sul tuo sito tramite le ricerche Gooogle.
Aggiungi JSON-LD per aiutare i motori a comprendere contenuti come articoli, ricette o prodotti e abilitare rich results.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Titolo articolo",
"author": { "@type": "Person", "name": "Autore" }
}
</script>
Usa <title> univoco e una
meta description descrittiva (120–160 caratteri).
Inserisci tag rel="canonical" quando necessario per
evitare contenuti duplicati.
<title>Titolo pagina chiaro e conciso</title>
<meta name="description" content="
Descrizione breve e orientata al lettore" />
<link rel="canonical" target="_blank" href="https://example.com/pagina" />Layout fluidi, sistemi di design e micro pattern per trasformare la teoria in interfacce curate.
I selettori (elemento, classe, id, attributo) sono la base della definizione degli stili. Qui approfondisco la specificità, le pratiche per selettori performanti e come mantenere stylesheet leggibili e modulari.
Il box model regola come gli elementi occupano spazio. Troverai
esempi pratici su display, position,
flexbox e tecniche per creare layout stabili e
adattivi.
Responsive design significa pensare in contesti fluidi: unità relative, media query e pattern mobile-first. Mostro esempi pratici per testare e ottimizzare l'esperienza su tutti i dispositivi.
Le custom properties (--nome) facilitano gestione
dei temi e riuso. Includo pattern per componenti, override
sicuri e strategie per evitare dipendenze hard-coded.
Esempio per creare un pannello con effetto glass: sfocatura, semi-trasparenza e bordo leggero.
.glass {
background: rgba(255,255,255,0.6);
backdrop-filter: blur(6px);
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.4);
}Interazioni, asincronia e logica pulita: schemi chiari per funzionalità moderne e scalabili.
Per performance, preferisci defer per
script non-modulari e
type="module" defer per moduli. Carica
gli script critici in modo asincrono e delega il
rendering al DOMContentLoaded quando necessario.
Usa selettori specifici e salva riferimenti per
evitare ricerche ripetute. Per inserire nodi, crea
document fragments e usa
element.classList per gestire classi in
modo performante.
Usa event delegation su container per ridurre
listener, rimuovi listener non più necessari e usa
passive quando appropriato per
migliorare la reattività su dispositivi touch.
Usa fetch con async/await,
gestisci errori con try/catch e implementa timeout o
cancellazione con AbortController. Valida sempre le
risposte e fall back per dati non JSON.