Corso Sviluppatore Frontend

Lezione 1 • Introduzione alla Riga di Comando

Tratta la navigazione del file system, la gestione dei processi e le basi dello scripting di shell. Prepara gli studenti a eseguire gli strumenti di build e i gestori di pacchetti introdotti in seguito.

Lezione 2 • Controllo di Versione con Git

Insegna commit, rami e repository remoti. Si collega ai flussi di lavoro di team utilizzati in tutti i successivi capitoli basati su progetto.

Lezione 3 • Configurare l'Ambiente di Sviluppo

Installa e configura un editor di codice, gli strumenti di sviluppo del browser e il controllo di versione. Garantisce che ogni studente lavori con una toolchain coerente e professionale.

Lezione 1 • Testo ed Elementi Inline

Tratta intestazioni, paragrafi, span e tag di formattazione inline. Rafforza la distinzione tra significato semantico e presentazione visiva.

Lezione 2 • Collegamenti, Immagini e Media

Insegna i tag anchor, gli attributi delle immagini e gli elementi multimediali incorporati. Sviluppa le competenze per creare pagine navigabili e ricche di media, utilizzate nei successivi capitoli CSS.

Lezione 3 • Elementi Semantici HTML5

Introduce header, nav, main, article, section e footer. Dimostra come il markup semantico migliori l'accessibilità e l'ottimizzazione per i motori di ricerca.

Lezione 4 • Anatomia del Documento HTML

Illustra il doctype, le sezioni head e body e i loro ruoli. Fornisce agli studenti le basi sul Document Object Model prima di introdurre stili o scripting.

Lezione 1 • Tipografia e Colore

Insegna le proprietà dei font, i web font e i modelli di colore, inclusi hex, RGB e HSL. Collega i principi del design visivo all'implementazione CSS.

Lezione 2 • Design Responsive e Media Query

Applica breakpoint, unità fluide e strategia mobile-first per adattare i layout. Prepara gli studenti a fornire esperienze cross-device in tutti i progetti futuri.

Lezione 3 • Layout Flexbox

Introduce il modello di contenitore e elemento flex per layout monodimensionali. Gli studenti costruiscono barre di navigazione e griglie di schede utilizzate nel progetto finale.

Lezione 4 • Sintassi e Selettori CSS

Spiega regole, dichiarazioni e l'intero spettro dei selettori. Stabilisce le regole di specificità e cascata che governano ogni decisione di stile in questo capitolo.

Lezione 5 • Layout a Griglia CSS

Tratta tracce, aree e posizionamento nella griglia per layout bidimensionali. Estende le competenze flexbox per gestire strutture di pagina complesse in modo efficiente.

Lezione 1 • Gestione degli Errori e Debug

Introduce try/catch, i metodi della console e gli strumenti di debug del browser. Costruisce abitudini di debug sistematiche essenziali per tutto il lavoro JavaScript avanzato.

Lezione 2 • Flusso di Controllo e Cicli

Insegna i costrutti if/else, switch, for, while e do-while. Consente agli studenti di scrivere logiche decisionali e iterative per problemi del mondo reale.

Lezione 3 • Funzioni e Scope

Illustra le dichiarazioni di funzione, le espressioni, le funzioni freccia e la closure. La padronanza dello scope previene i bug di accesso alle variabili comuni nello scripting del DOM.

Lezione 4 • Array e Oggetti

Tratta i metodi degli array, i letterali oggetto e la destrutturazione. Prepara gli studenti a manipolare le strutture dati restituite dalle API nel Capitolo 5.

Lezione 1 • Modificare gli Elementi del DOM

Insegna textContent, innerHTML, classList e la manipolazione dello stile. Gli studenti aggiornano dinamicamente il contenuto della pagina in risposta ai dati e alle azioni dell'utente.

Lezione 2 • Moduli e Gestione dell'Input Utente

Tratta gli eventi di invio dei moduli, la validazione dell'input e la prevenzione del comportamento predefinito. Collega la conoscenza dei moduli HTML del Capitolo 2 all'esperienza utente guidata da JavaScript.

Lezione 3 • Interrogare e Attraversare il DOM

Tratta querySelector, getElementById e i metodi di attraversamento genitore/figlio. Stabilisce le competenze di selezione necessarie prima di intraprendere qualsiasi modifica del DOM.

Lezione 4 • Gestione degli Eventi

Spiega addEventListener, gli oggetti evento e le fasi di propagazione. Consente agli studenti di collegare comportamenti interattivi a qualsiasi elemento della pagina.

Lezione 1 • Sintassi Async/Await

Riscrive le catene di promise utilizzando funzioni async ed espressioni await. Produce codice asincrono più pulito e manutenibile, utilizzato in tutti i progetti successivi.

Lezione 2 • Concetti di Programmazione Asincrona

Spiega l'event loop, lo stack delle chiamate e la coda dei task. Fornisce il modello mentale necessario per ragionare sulla temporizzazione in tutto il codice JavaScript asincrono.

Lezione 3 • Recuperare Dati da API REST

Utilizza l'API Fetch per effettuare richieste GET e POST e analizzare risposte JSON. Collega le competenze asincrone a fonti di dati reali che alimentano le moderne applicazioni web.

Lezione 4 • Promise e Concatenamento

Tratta la creazione di promise, il concatenamento di .then(), .catch() e .finally(). Sostituisce gli schemi basati su callback con flussi di lavoro asincroni leggibili e componibili.

Lezione 1 • Linting, Formattazione e Qualità del Codice

Imposta un linter e un formattatore per applicare automaticamente uno stile di codice coerente. Integra controlli di qualità nel flusso di lavoro di sviluppo prima che il codice venga confermato.

Lezione 2 • Moduli JavaScript

Spiega la sintassi dei moduli ES, gli export nominati e di default e i percorsi di import. Abilita i modelli di suddivisione e riutilizzo del codice richiesti dai framework moderni.

Lezione 3 • Gestione dei Pacchetti con npm

Tratta npm init, l'installazione dei pacchetti e la gestione di package.json e dei file di lock. Stabilisce le competenze di gestione delle dipendenze utilizzate in ogni flusso di lavoro di tooling.

Lezione 4 • Bundler e Strumenti di Build

Configura un module bundler per transpilare, raggruppare e ottimizzare gli asset. Produce build pronte per la produzione con code splitting e tree shaking abilitati.

Lezione 1 • Stato Globale e Context API

Utilizza React Context per condividere lo stato attraverso l'albero dei componenti senza prop drilling. Prepara gli studenti alle librerie di gestione dello stato di terze parti trattate nei capitoli supplementari.

Lezione 2 • Concetti Fondamentali di React

Introduce JSX, il DOM virtuale e il modello a componenti. Stabilisce il cambiamento mentale dallo scripting imperativo del DOM alla composizione dichiarativa dell'interfaccia utente.

Lezione 3 • Build e Distribuzione di un'App React

Ottimizza un'app React per la produzione e la distribuisce su una piattaforma di hosting statico. Completa l'intero ciclo di vita dello sviluppo, dal codice locale all'URL live.

Lezione 4 • Gestione dello Stato con gli Hook

Tratta useState, useReducer e il sollevamento dello stato. Consente agli studenti di costruire componenti dinamici e guidati dai dati che si ri-renderizzano correttamente al cambiamento dello stato.

Lezione 5 • Effetti Collaterali con useEffect

Spiega il ciclo di vita degli effetti, gli array di dipendenze e le funzioni di cleanup. Collega il recupero asincrono delle API dal Capitolo 6 al ciclo di vita dei componenti React.