Modulo 1: Introduzione a HTML (10 ore)

Sessione 1-2: Concetti di base di HTML (4 ore)

• Introduzione a HTML: cos'è HTML, ruolo nel web, breve storia

• Struttura di base di un documento HTML: doctype, tag html, head, body

• Tag di base: <h1>-<h6>, <p>, <a>, <img>, <div>, <span>

• Attributi HTML: id, class, src, href

Sessione 3-4: Formattazione del testo e link (4 ore)

• Tag per la formattazione del testo: <strong>, <em>, <u>, <s>, <br>, <hr>

• Creazione di link ipertestuali: attributi href, target, title

• Link relativi vs assoluti

• Utilizzo dei tag <nav> e <footer> per la navigazione e il piè di pagina Sessione 5-6: Immagini e multimedia (4 ore)

• Inserimento di immagini con il tag <img>

• Utilizzo di video e audio: tag <video> e <audio>

• Attributi per l'ottimizzazione delle immagini: alt, title, width, height

• Embedding di contenuti multimediali esterni (YouTube, Vimeo, ecc.) Sessione 7-8: Forme e tabelle (4 ore)

• Creazione di forme con il tag <form>

• Utilizzo dei tag <input>, <textarea>, <select>

• Validazione dei moduli HTML: attributi required, pattern, min, max

• Creazione e formattazione di tabelle con il tag <table>, <tr>, <td>, <th

Sessione 9-10: Layout di base (4 ore)

• Introduzione al concetto di layout

• Utilizzo dei tag <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>

• Strutturazione di una pagina con sezioni e layout base

• Attributi HTML5 per l'accessibilità: role, aria-label, aria-labelledby

• Modulo 2: Introduzione a CSS (15 ore)

   

  Sessione 11-12: Introduzione a CSS (4 ore)

• Concetti di base di CSS: selezione degli elementi, dichiarazione delle proprietà, valori

• Stili inline, incorporati ed esterni

• Utilizzo dei selettori CSS: selezione per tipo, classe, ID, gerarchia

• Introduzione ai fogli di stile esterni e collegamento CSS ai documenti HTML Sessione 13-14: Formattazione del testo con CSS (4 ore)

• Stili per il testo: colore, dimensione, famiglia di font, stile del carattere

• Utilizzo di font esterni con @font-face

• Allineamento del testo: allineamento orizzontale e verticale, spaziatura tra le lettere e le parole

• Decorazioni del testo: sottolineato, barrato, corsivo, grassetto Sessione 15-16: Box model (4 ore)

• Modello di box CSS: content, padding, border, margin

• Utilizzo di margini e padding per il layout

• Box model standard vs box-sizing: border-box

• Box-sizing: applicazione e vantaggi nell'impaginazione del layout Sessione 17-18: Posizionamento degli elementi (4 ore)

• Introduzione al posizionamento relativo, assoluto e fisso

• Utilizzo di float per la creazione di layout multi-colonna

• Clearfix: risoluzione dei problemi di layout con float

• Posizionamento statico vs posizionamento non statico Sessione 19-20: Media queries e responsive design (4 ore)

• Introduzione al responsive design

• Utilizzo di media queries per adattare il layout alle diverse dimensioni dello schermo

• Creazione di layout fluidi e adattabili

• Best practice per la creazione di un design responsive

•  

  Modulo 3: Approfondimento di HTML e CSS (25 ore)

   

  Sessione 21-22: Semantica avanzata di HTML (4 ore)

• Utilizzo di elementi semantici come <header>, <footer>, <nav>, <article>, <section>, <aside>

• Strutturazione semantica del contenuto: miglioramento dell'accessibilità e dell'indicizzazione SEO

• Ruolo e importanza dei tag semantici per la struttura e la navigazione del sito web Sessione 23-24: CSS avanzato (4 ore)

• Utilizzo di pseudoclassi e pseudoelementi per lo stile dinamico degli elementi

• Applicazione di transizioni e animazioni CSS per effetti visivi

• Utilizzo di variabili CSS per la gestione dei valori ripetitivi

• Creazione di effetti avanzati come gradienti, ombre, bordi arrotondati Sessione 25-26: Flexbox (4 ore)

• Introduzione al modello di layout flessibile di CSS (Flexbox)

• Utilizzo dei container e degli elementi flessibili per creare layout responsive

• Allineamento e distribuzione degli elementi lungo l'asse principale e trasversale

• Creazione di layout complessi come griglie, colonne e spaziatura equa Sessione 27-28: CSS Grid (4 ore)

• Introduzione al sistema di layout a griglia di CSS (Grid)

• Creazione di layout complessi con griglie di righe e colonne

• Utilizzo di grid-template-areas, grid-column e grid-row per la strutturazione del layout

• Creazione di layout responsivi e adattabili con CSS Grid Sessione 29-30: Progetto: Realizzazione di un sito web (4 ore)

• Applicazione pratica delle conoscenze acquisite per creare un sito web completo utilizzando HTML e CSS

• Progettazione e sviluppo di un layout responsive utilizzando le tecniche apprese durante il corso

• Implementazione di design avanzati utilizzando le funzionalità di CSS3

• Testing e debug del sito web per garantire la compatibilità con i diversi browser e dispositivi

•  

  Modulo 4: Progetti e Revisione Finale (15 ore)

   

  Sessione 31-32: Progetti Pratici (4 ore)

• Sviluppo di progetti pratici che integrano HTML e CSS

• Applicazione delle competenze acquisite per creare layout complessi e responsive

• Sessione 37-38: Revisione Finale (4 ore)

• Ripasso dei concetti chiave di HTML e CSS

• Riepilogo delle tecniche e delle best practice apprese durante il corso

• Sessione di domande e risposte per chiarire eventuali dubbi rimasti

• Consigli per il proseguimento degli studi e le opportunità di carriera nel campo dello sviluppo web Sessione 39-40: Revisione Finale (4 ore)

• Ulteriori esercizi pratici o ripasso su argomenti richiesti dagli studenti

• Approfondimenti su argomenti specifici o tecnologie correlate (ad esempio, preprocessori CSS, framework CSS, principi di design responsivo avanzati)

• Conclusioni e congratulazioni per il completamento del corso

•  

• Implementazione di design avanzati e interattività utilizzando CSS e JavaScript (se appropriato)

• Test e debugging dei progetti per garantire la qualità e la compatibilità cross-browser Sessione 33-34: Progetti Pratici (4 ore)

• Continuazione dello sviluppo dei progetti pratici avviati nella sessione precedente

• Approfondimento delle funzionalità e dei dettagli di design dei progetti

• Collaborazione e scambio di feedback tra gli studenti per migliorare i propri progetti Sessione 35-36: Progetti Pratici (4 ore)

• Ultimazione e rifinitura dei progetti pratici in corso

• Ottimizzazione delle prestazioni e dell'accessibilità dei progetti

• Presentazione dei progetti agli altri studenti e discussione dei processi di sviluppo e delle sfide incontrate