Corso Web Design e creazione siti: HTML, CSS

• Nozioni di base di grafica digitale
• Differenze tra grafica raster e grafica vettoriale
• Basi teoriche di usabilità (UX - User Experience) 
• Basi teoriche per un design adeguato e coerente (UI - User Interface)
• Introduzione a Adobe Photoshop

• Gestione e teoria del colore (CMYK, RGB, HSB, LAB, i Pantone)

PHOTOSHOP:

• Fotomontaggio e fotorittocco
• Il testo in Photoshop
• Le regolazioniI livelli: i metodi di fusione, gli stili livello
• Uso delle maschere di livello
• Uso dei tracciati e delle forme
• Esportazione d’immagini ottimizzate per il web
• Basi di animazione in Photoshop

• La struttura del sito: creazione del wireframe e impostazioni di base, flow chart.
• Progettare responsive - Desktop/Mobile
• Gestione del progetto grafico del sito: immagini, corretta UI (Interfaccia grafica)
• Creazione del progetto grafico del sito - Mockup

Introduzione al web, all’HTML 5 e CSS3; primi passi con Visual Studio Code.

• Introduzione al concetto di sito web e sito web responsivo; struttura HTML di una pagina web (header, area dei contenuti, footer, ecc.).
• Panoramica sui principali tag HTML e meta tag, differenza tra tag semantici e non semantici, preview di pagine web nei principali browser, utilizzo della console dei browser per l’analisi strutturale delle pagine web e relativo codice.
• Primi passi con i CSS; associazione di fogli di stile a pagine HTML e applicazione delle prime regole CSS a tag HTML (ridefinizione di tag e classi), il box model (contenuto, padding, bordi e margini).

Approfondimento sui tag HTML 5 semantici.

• Introduzione a Flexbox per la creazione di un sito web responsivo e studio del layout finale da ottener, utilizzo della console dei browser per visualizzare i layout sia in modalità desktop che modalità tablet e smartphone.
• Studio e applicazione delle principali proprietà di Flexbox. Studio delle media query.
• Utilizzo delle liste, costruzione di un menu di navigazione.Associazione di più classi CSS a singoli elementi HTML, i selettori gerarchici.
• Inserimento di immagini raster nella struttura HTML.
• Gestione di immagini responsive.
• Inserimento di contenuti testuali nella struttura HTML e gestione della formattazione dei testi tramite CSS.
• Testing finale dell’applicazione tramite i principali browser.

Introduzione a Bootstrap per la produzione di un’applicazione web responsiva, relazione tra Flexbox e Bootstrap.

• Studio della griglia di base di Bootstrap.
• Panoramica sulle principali caratteristiche di Bootstrap; contenitori e media query.
• Analisi del layout/wireframe del sito da realizzare con HTML 5/CSS3 e Bootstrap.
• Menù di navigazione fluidi e uso dell’icona “hamburger” per display smartphone; menù a tendina.
• Sperimentazione dei più popolari moduli grafico/interattvi di Bootstrap.
• Testing finale dell’applicazione tramite i principali browser;