Lezioni di introduzione
  • Cosa è il Web Design
  • Strumenti e competenze del Web Designer
  • Consigli per seguire il Corso
Strumenti essenziali per il Web Design
  • Editor di codice
  • Strumenti di Chrome per sviluppatori
  • Strumenti on line per gestione della grafica
  • Strumenti per ottimizzazione delle immagini
  • Risorse on line per media liberi da copyright
  • Strumenti per la generazione di favicon
  • Strumenti per la creazione di mockup
  • Reference per i linguaggi del web
I principi del Web Design
  • Anatomia di una pagina web: gli elementi del Web Design
  • Anatomia di una pagina web: i principi del Web Design
  • Anatomia di una pagina web: i criteri del Web Design
  • Tipografia nel Web Design
  • Utilizzo di Google Fonts
  • Utilizzo di FontAwesome
  • La scienza dei colori
  • Creare una palette colori
  • Introduzione agli stili grafici
  • Quiz I principi del web design
La grammatica del Web Design: HTML e CSS
  • Introduzione all' HTML e CSS
  • Struttura di base HTML
  • Come si struttura una pagina web
  • La sintassi di base
  • Gli elementi di formattazione
  • Le liste
  • I link
  • Le tabelle
  • Inseriamo un video in una pagina HTML
  • Utilizzare i fogli di stile
  • Integriamo i Google Fonts
  • La gestione dei colori
  • Formattiamo una tabella
  • Le classi
  • L'attributo unico id
  • Formattiamo le liste
  • I tag section e div: differenze e utilizzo
  • L'organizzazione logica di una pagina web
  • La disposizione degli elementi - 1
  • Disposizione degli elementi - 2
  • Integriamo i FontAwesome
  • Aggiornamento per la libreria di Fontawesome
  • Formattiamo un menu dropdown
  • Quiz La grammatica del web: HTML e CSS di base
La grammatica del Web Design: approfondiamo HTML e CSS
  • Utilizzare margin e padding
  • La proprietà position - 1
  • La proprietà position - 2
  • Gestione dei form
  • Impaginazione a colonne multiple
  • Le animazioni con CSS3
  • Le transizioni con CSS3
  • Creiamo dei bottoni per le nostre pagine
  • Creiamo un menu con i bottoni
  • La gestione delle immagini: galleria di foto
  • Galleria di foto con caption: formattazione
  • Le immagini di cover
  • I gradienti con CSS3
  • Highlights: le pseudo-classi - prima parte
  • Highlights: le pseudo-classi - seconda parte
  • Highlight: gli pseudo-elementi
  • Quiz HTML e CSS: approfondimenti
Mini progetto: sviluppo di una landing page con HTML e CSS
  • Impostazione del progetto
  • Impostazione del form
  • Formattazione degli stili: menu e background - 1
  • Formattazione degli stili: menu e background - 2
  • Uno sticky footer
  • Formattazione del form e ultimi ritocchi del progetto
Introduzione alla grafica SVG con HTML5
  • Introduzione a SVG
  • Disegno di linee con SVG
  • Disegno di forme con SVG
  • Lo strumento polyline
  • Disegno di un testo con SVG
  • Effetti di blur e gradiente con SVG
  • Disegno di un logo con SVG
  • Quiz SVG con HTML5
Tecniche di Responsive Web Design
  • Introduzione al Responsive Web Design
  • Lo strumento di analisi di reattività di Chrome
  • Il metatag viewport
  • Misure relative in percentuale
  • Misure relative: em e rem
  • Applichiamo misure relative al nostro layout
  • Il grid system responsivo
  • Breakpoint e media queries - 1
  • Breakpoint e media queries - 2
  • Quiz Tecniche di Responsive Web Design
Flexbox e CSS Grid Layout
  • Le regole di base degli elementi flessibili parent
  • Allineamento dei flexbox
  • Disposizione dei flexbox
  • Le regole di base degli elementi flessibili children
  • Grandezze degli elementi flessibili