Corso HTML, CSS e JavaScript

Lezione 1 • Configurazione dell'ambiente di sviluppo

Installa e configura un editor di codice, gli strumenti di sviluppo del browser e la struttura dei file locale. Garantisce che ogni studente disponga di uno spazio di lavoro identico e funzionante.

Lezione 2 • Controllo di versione con le basi di Git

Insegna i flussi di lavoro di init, commit e push in modo che gli studenti tengano traccia di ogni progetto sin dal primo giorno. Stabilisce abitudini professionali prima che la complessità del codice aumenti.

Lezione 3 • Come funziona il Web

Tratta la comunicazione client-server, le richieste HTTP e le pipeline di rendering del browser. Fonda tutte le successive decisioni di codifica sul comportamento reale del browser.

Lezione 1 • Elenchi, collegamenti e navigazione

Costruisce elenchi ordinati, non ordinati e di descrizione, oltre agli elementi di ancoraggio con attributi. Questi schemi costituiscono la spina dorsale della struttura di navigazione di ogni sito.

Lezione 2 • Elementi di testo e intestazione

Tratta gli elementi h1–h6, p, strong, em e blockquote per la gerarchia dei contenuti. Un ordine corretto delle intestazioni influisce direttamente sulla SEO e sulla navigazione con screen reader.

Lezione 3 • Immagini, contenuti multimediali e figure

Incorpora immagini, audio e video con gli attributi corretti per l'accessibilità e le prestazioni. Il testo alternativo e le didascalie sono considerati obbligatori, non facoltativi.

Lezione 4 • Elementi di layout semantici

Sostituisce i div generici con header, main, section, article, aside e footer. Il markup semantico migliora la leggibilità da parte delle macchine e i punteggi di accessibilità.

Lezione 1 • Il Box Model spiegato

Insegna content, padding, border e margin come i quattro strati di ogni elemento. La padronanza di box-sizing previene i bug di layout durante tutto il corso.

Lezione 2 • Variabili CSS e proprietà personalizzate

Definisce e riutilizza token di design tramite proprietà personalizzate CSS per fogli di stile manutenibili. Le variabili riducono la ripetizione e consentono il cambio di tema nei progetti successivi.

Lezione 3 • Tipografia e colore

Imposta famiglie di font, dimensioni, spessori, altezze di riga e valori di colore utilizzando unità CSS moderne. Scale tipografiche e cromatiche coerenti sono il fondamento dei sistemi di visual design.

Lezione 4 • Selettori CSS e specificità

Tratta i selettori di elemento, classe, ID, attributo e pseudo-classe con il calcolo della specificità. Comprendere la specificità previene i conflitti di cascata nei fogli di stile più grandi.

Lezione 1 • Posizionamento nella griglia e aree con nome

Posiziona gli elementi utilizzando numeri di riga, la parola chiave span e aree template con nome. Le aree con nome rendono i layout complessi leggibili e facili da ristrutturare.

Lezione 2 • Proprietà del contenitore Flexbox

Controlla flex-direction, justify-content, align-items e flex-wrap sul genitore. Queste proprietà governano la distribuzione dei figli lungo entrambi gli assi.

Lezione 3 • Design responsive con media query

Applica breakpoint e strategia mobile-first per adattare i layout alle diverse dimensioni dello schermo. Combina Flexbox e Grid con le media query per una reattività pronta per la produzione.

Lezione 4 • Fondamenti di CSS Grid

Definisce grid-template-columns, grid-template-rows e grid-gap per layout bidimensionali. Grid risolve problemi di layout che Flexbox gestisce in modo macchinoso.

Lezione 1 • Variabili, tipi di dati e operatori

Dichiara variabili con let, const e var e identifica i tipi di dati primitivi. Si affrontano la precedenza degli operatori e la coercizione di tipo per prevenire i bug comuni.

Lezione 2 • Funzioni e ambito

Definisce funzioni con dichiarazioni, espressioni e sintassi arrow, spiegando al contempo le catene di ambito. La padronanza dell'ambito previene la dispersione di variabili e i bug di chiusura.

Lezione 3 • Oggetti e metodi degli oggetti

Costruisce oggetti con proprietà e metodi, accedendovi tramite notazione punto e parentesi quadre. Gli oggetti modellano strutture dati del mondo reale utilizzate in ogni applicazione JS.

Lezione 4 • Array e metodi degli array

Crea e manipola array utilizzando push, pop, map, filter e reduce. I metodi funzionali degli array sono utilizzati in tutta la manipolazione del DOM e il lavoro con le API.

Lezione 1 • Modifica di elementi e stili

Modifica textContent, innerHTML, attributi e classList per aggiornare la pagina senza ricaricare. Queste tecniche alimentano gli aggiornamenti live dell'UI nelle single-page application.

Lezione 2 • Creazione e rimozione di nodi del DOM

Costruisce nuovi elementi con createElement, li aggiunge e rimuove i nodi obsoleti. La creazione dinamica di nodi consente il rendering di elenchi e modelli di tipo componente.

Lezione 3 • Delega degli eventi e bubbling

Sfrutta il bubbling degli eventi per collegare singoli listener a contenitori genitori per figli dinamici. La delega riduce l'utilizzo di memoria e gestisce elementi generati a runtime.

Lezione 4 • Selezione e attraversamento del DOM

Utilizza querySelector, getElementById e le proprietà di attraversamento per individuare con precisione gli elementi. Una selezione accurata è il fondamento di ogni comportamento dinamico della pagina.

Lezione 1 • Sintassi Async/Await

Riscrive le catene di Promise utilizzando funzioni async ed espressioni await per un codice più leggibile. Async/await è lo standard moderno per tutti i flussi di lavoro basati su fetch.

Lezione 2 • Promise e concatenazione di Promise

Crea e consuma Promise con .then(), .catch() e .finally() per un codice asincrono più pulito. La concatenazione di Promise sostituisce i callback nidificati nelle operazioni asincrone sequenziali.

Lezione 3 • Rendering dei dati API nel DOM

Mappa gli array JSON recuperati in elementi HTML e gestisce visivamente gli stati di caricamento ed errore. Collega il recupero asincrono dei dati alla manipolazione del DOM del capitolo precedente.

Lezione 4 • Recupero dati con l'API Fetch

Invia richieste GET e POST utilizzando fetch(), analizza le risposte JSON e gestisce gli errori. Fetch è lo strumento nativo del browser per ogni comunicazione con API REST.

Lezione 1 • Distribuzione e revisione del codice

Distribuisce il progetto su una piattaforma di hosting statico e conduce una revisione del codice strutturata tra pari. La distribuzione e la revisione simulano gli standard di consegna professionali reali.

Lezione 2 • Styling con CSS e layout responsive

Applica un sistema di design utilizzando variabili CSS, Flexbox e Grid con piena reattività. Un design visivo coerente dimostra la padronanza dei capitoli 3 e 4.

Lezione 3 • Pianificazione e architettura del progetto

Definisce storie utente, wireframe e scomposizione in componenti prima di scrivere codice. La pianificazione previene lo scope creep e stabilisce un flusso di lavoro di sviluppo professionale.

Lezione 4 • Logica JavaScript e integrazione API

Implementa chiamate fetch, rendering del DOM, gestione degli eventi e gestione dello stato in JavaScript vanilla. Integra tutte le competenze JS dei capitoli 5, 6 e 7 in un'unica codebase.