Programming in HTML5 with JavaScript and CSS3 (501675)

Al termine del corso il partecipante sarà in grado di:

• progettare la struttura di una pagina Web utilizzando HTML5;

• utilizzare correttamente gli elementi semantici HTML;

• applicare fogli di stile CSS;

• realizzare layout mediante Flexbox e CSS Grid;

• creare interfacce responsive utilizzabili su desktop, tablet e smartphone;

• utilizzare variabili, operatori, condizioni, cicli e funzioni JavaScript;

• utilizzare array, oggetti e strutture dati JavaScript;

• manipolare dinamicamente il DOM;

• gestire eventi e interazioni dell'utente;

• realizzare e validare form HTML;

• utilizzare JavaScript asincrono;

• utilizzare Promise, async/await e Fetch API;

• acquisire dati da API e servizi Web;

• utilizzare Local Storage e Session Storage;

• effettuare attività di debugging mediante gli strumenti per sviluppatori del browser;

• strutturare in modo ordinato un piccolo progetto front-end.

Modulo 1 – Fondamenti dello sviluppo Web

• Architettura delle applicazioni Web

• Client e server

• Browser e strumenti di sviluppo

• Struttura di un progetto Web

• Introduzione a HTML, CSS e JavaScript

Modulo 2 – HTML5

• Struttura di un documento HTML

• Elementi e attributi

• Testi, liste e collegamenti

• Immagini e contenuti multimediali

• Tabelle

• HTML semantico

• Accessibilità di base

Modulo 3 – Form HTML

• Struttura dei form

• Input e controlli

• Tipologie di campi HTML5

• Label e attributi

• Validazione HTML

• Gestione dei dati inseriti dall'utente

Modulo 4 – CSS3

• Selettori CSS

• Cascata, ereditarietà e specificità

• Colori, font e tipografia

• Box model

• Margini, padding e bordi

• Display e posizionamento

• Pseudo-classi e pseudo-elementi

Modulo 5 – Layout moderni e Responsive Web Design

• Flexbox

• CSS Grid

• Dimensionamento delle interfacce

• Media query

• Responsive design

• Layout per desktop, tablet e smartphone

Modulo 6 – Fondamenti di JavaScript

• Sintassi JavaScript

• Variabili e costanti

• Tipi di dato

• Operatori

• Condizioni

• Cicli

• Funzioni

• Scope

Modulo 7 – JavaScript moderno

• let e const

• Template literals

• Arrow function

• Destructuring

• Spread e rest operator

• Array e metodi principali

• Oggetti JavaScript

• Moduli JavaScript

Modulo 8 – DOM ed eventi

• Document Object Model

• Ricerca degli elementi

• Modifica di contenuti e attributi

• Creazione e rimozione degli elementi

• Event listener

• Gestione degli eventi

• Interazione con l'utente

Modulo 9 – Form e validazione con JavaScript

• Lettura dei valori

• Gestione degli eventi dei form

• Validazione dei dati

• Messaggi di errore

• Elaborazione dei dati inseriti

Modulo 10 – Programmazione asincrona e Web API

• Introduzione alla programmazione asincrona

• Promise

• async e await

• HTTP e servizi REST

• Fetch API

• JSON

• Lettura e gestione dei dati provenienti da API

Modulo 11 – Browser Storage e Web API

• Local Storage

• Session Storage

• Gestione dei dati nel browser

• Introduzione alle principali Browser API

Modulo 12 – Debugging e qualità del codice

• Developer Tools

• Console

• Breakpoint

• Debug JavaScript

• Gestione degli errori

• Organizzazione e manutenzione del codice

Modulo 13 – Project Work

Realizzazione progressiva di una piccola applicazione Web che integri:

• HTML semantico;

• CSS responsive;

• JavaScript;

• DOM ed eventi;

• form;

• Fetch API;

Il corso alterna spiegazioni teoriche, dimostrazioni del docente ed esercitazioni pratiche.

Ogni argomento viene immediatamente applicato attraverso esempi di codice ed esercizi progressivi.

Una parte significativa del corso è dedicata alla realizzazione di pagine e componenti Web, fino allo sviluppo di un progetto applicativo conclusivo.

Ai partecipanti vengono forniti:

• slide e dispense del corso;

• esempi di codice;

• esercitazioni guidate;

• file utilizzati durante le lezioni;

• esercizi di consolidamento;

• progetto applicativo finale;

• riferimenti alla documentazione tecnica online.

È richiesta una buona familiarità con l'utilizzo del computer e con Internet.

Non sono richieste precedenti conoscenze di programmazione.

Una conoscenza elementare dei concetti di sviluppo software può facilitare l'apprendimento, ma non costituisce requisito obbligatorio.