Autoplay
Completamento Automatico
Lezione Precedente
Completa e Continua
Master con Diploma in Web Graphic Design Specialist
INTRODUZIONE
Presentazione del Master con Diploma in Web Graphic Design Specialist (2:37)
Cosa è il Web Design (6:24)
Strumenti e competenze del Web Designer (3:23)
Consigli per seguire il corso e codice HTML di esempio (5:26)
STRUMENTI ESSENZIALI PER IL WEB DESIGN
Editor di codice (15:16)
Strumenti di Chrome per sviluppatori (8:27)
Strumenti online per la gestione della grafica (13:05)
Strumenti per ottimizzazione delle immagini (8:23)
Risorse online per media liberi da copyright (14:02)
Strumenti per la generazione di favicon (10:39)
Strumenti per la creazione di mockup (12:27)
Reference per i linguaggi del web (4:48)
I PRINCIPI DEL WEB DESIGN
Anatomia di una pagina web: gli elementi del Web Design (10:54)
Anatomia di una pagina web: i principi del Web Design (16:33)
Anatomia di una pagina web: i criteri del Web Design (9:40)
Tipografia nel Web Design (5:36)
Utilizzo di Google Fonts (8:36)
Utilizzo di FontAwesome (5:46)
La scienza dei colori (14:39)
Creare una palette colori (11:34)
Introduzione agli stili grafici (12:00)
LA GRAMMATICA DEL WEB DESIGN
Introduzione all' HTML e CSS (7:07)
Struttura di base dell'HTML (14:31)
Come si struttura una pagina web (8:37)
La sintassi di base (10:31)
Gli elementi di formattazione (10:45)
Le liste (9:00)
I link (17:15)
Le tabelle (10:17)
Inseriamo un video in una pagina HTML (11:29)
Utilizzare i fogli di stile (15:50)
Integriamo i Google Fonts (10:26)
La gestione dei colori (7:28)
Formattiamo una tabella (9:39)
Le classi (15:05)
L'attributo unico id (6:19)
Formattiamo le liste (11:53)
I tag section e div: differenze e utilizzo (8:21)
L'organizzazione logica di una pagina web (13:04)
La disposizione degli elementi - 1 (14:58)
La disposizione degli elementi - 2 (13:58)
Integriamo i FontAwesome (21:10)
Formattiamo un menu dropdown (21:20)
LA GRAMMATICA DEL WEB DESIGN: APPROFONDIAMO HTML E CSS
Utilizzare margin e padding (18:12)
La proprietà position - 1 (10:34)
La proprietà position - 2 (11:44)
Gestione dei form (21:05)
Impaginazione a colonne multiple (13:29)
Le animazioni con CSS3 (8:10)
Le transizioni con CSS3 (9:45)
Creiamo dei bottoni (14:22)
Creiamo un menu con i bottoni (9:06)
La gestione delle immagini: galleria di foto (18:29)
Galleria di foto con caption: formattazione (6:13)
Le immagini di cover (9:01)
I gradienti con CSS3 (9:01)
Highlights: le pseudo-classi -1 (22:14)
Highlights: le pseudo-classi -2 (17:25)
Highlights: gli pseudo-elementi (16:30)
MINI PROGETTO: SVILUPPO DI UNA LANDING PAGE CON HTML E CSS
Impostazioni del progetto (9:59)
Impostazione del form (18:19)
Formattazione degli stili: menu e background 1 (14:50)
Formattazione degli stili: menu e background 2 (14:57)
Uno sticky footer (5:02)
Formattazione del form e ultimi ritocchi (4:26)
INTRODUZIONE ALLA GRAFICA SVG CON HTML5
Introduzione a SVG (3:31)
Disegno di linee con SVG (11:40)
Disegno di forme con SVG (12:55)
Lo strumento polyline (7:26)
Disegno di un testo con SVG (9:27)
Effetti di blur e gradiente con SVG (13:44)
Disegno di un logo con SVG (16:44)
TECNICHE DI RESPONSIVE WEB DESIGN
Introduzione al RWD (6:59)
Lo strumento di reattività di Chrome (4:21)
Il metatag viewport (4:27)
Misure relative in percentuale (8:48)
Misure relative: em e rem (13:23)
Applichiamo misure relative al nostro layout (17:31)
Il grid system responsivo (19:00)
Breakpoint e media queries - 1 (11:22)
Breakpoint e media queries - 2 (16:12)
FLEXBOX E CSS GRID LAYOUT
Le regole di base degli elementi flessibili parent (6:48)
Allineamento dei flexbox (10:18)
Disposizione dei flexbox (5:49)
Le regole di base degli elementi flessibili children (11:58)
Grandezze degli elementi flessibili (6:59)
Layout responsivo con flexbox -1 (13:43)
Layout responsivo con flexbox -2 (11:13)
Layout responsivo con flexbox -3 (19:25)
Layout responsivo con flexbox -4 (18:37)
CSS Grid Layout: impostazioni di base (10:38)
CSS Grid Layout: gli elementi innestati (15:05)
CSS Grid Layout: posizionamento dei blocchi singoli (16:52)
CSS Grid Layout: galleria masonry style -1 (12:53)
CSS Grid Layout: galleria masonry style -2 (14:42)
INTRODUZIONE A JQUERY PER WEB DESIGNER
Introduzione a jQuery (6:22)
La preparazione dell'ambiente (5:04)
Cambiare gli stili (7:16)
La gestione delle classi (12:24)
La gestione dei contenuti (15:23)
Gli eventi del mouse (12:24)
Introduzione alle animazioni (6:29)
Animazioni con fading (5:44)
Animazioni con sliding (3:32)
Animazioni personalizzate (14:12)
Plugin jQuery: regola font e slide panel (13:32)
Plugin jQuery: photo zoom e popup scorrevole (11:22)
Plugin jQuery: slideshow con impostazioni base (7:12)
WEB DESIGN RESPONSIVO CON BOOTSTRAP
Introduzione a Bootstrap (8:56)
Integrare Bootstrap nei nostri progetti (15:10)
Download customizzato di Bootstrap (6:57)
Il grid system di Bootstrap (13:44)
Barra di navigazione (15:15)
Sovrascivere le classi di Bootstrap -1 (14:56)
Sovrascivere le classi di Bootstrap -2 (7:07)
Il componente jumbotron (13:03)
Le immagini (5:48)
Menu fisso con personalizzazione (13:37)
Impaginare le immagini (10:33)
Il componente thumbnail (13:13)
Il componente modal (8:22)
Il componente tab (14:11)
Elementi collassabili: bottoni e accordion (19:20)
Uso degli snippet di Bootstrap (9:42)
LAVORIAMO CON BOOTSTRAP: GALLERIA FOTO E VIDEO
Impostazione del progetto (19:54)
Impostazione della galleria video (11:58)
Impostazione della galleria di foto (10:42)
LAVORIAMO CON BOOTSTRAP: REALIZZAZIONE DI UN TEMPLATE ONE PAGE
Impostazione del nostro layout (17:50)
Impostazione dello scrollspy (9:49)
Struttura del layout (14:14)
Impostazione del carousel (13:04)
Lavoriamo con i CSS -1 (12:58)
Lavoriamo con i CSS -2 (6:00)
Customizzazione del carousel (15:08)
Customizzazione del footer (3:43)
Customizzazione della barra di navigazione (10:43)
Valutazione dei media queries e dei breakpoints (7:50)
Inseriamo un audio nel nostro progetto (10:49)
Gestione della traccia audio con jQuery (13:01)
Ottimizzazione meta tag description e keywords (4:20)
Inseriamo una favicon e un back to top (13:21)
Ottimizzazione del file CSS: strumenti di compressione (5:52)
LAVORIAMO CON BOOTSTRAP: PORTFOLIO, GOOGLE MAPS E FORM CONTATTO
Impostazione del progetto di portfolio (22:17)
Utilizzo degli pseudo-elementi (13:40)
Customizzazione del portfolio (11:21)
Impostazione del modal per il portfolio (15:32)
Sezione contatti (10:18)
Inseriamo una mappa di Google (18:36)
Inseriamo il form nei contatti (15:05)
Lezione bonus: codice PHP per il form contatti (10:41)
CONOSCIAMO BOOTSTRAP 4 E LE SUE NUOVE SPECIFICHE
Panoramica di Bootstrap 4 -1 (18:39)
Panoramica di Bootstrap 4 -2 (23:52)
Iniziamo un progetto BS con Animate.css (18:10)
Iniziamo un progetto BS: le material icons (17:10)
Progettiamo un template con Bootstrap 4: esercizio pratico 1 (21:58)
Progettiamo un template con Bootstrap 4: esercizio pratico 2 (12:47)
Progettiamo un template con Bootstrap 4: esercizio pratico 3 (14:51)
Progettiamo un template con Bootstrap 4: uso creativo dei gradienti (8:09)
Progettiamo un template con Bootstrap 4: animate.css con wow.js (17:13)
PUBBLICAZIONE DI UN SITO WEB
Il servizio di hosting (8:25)
Utilizzo di un FTP e upload dei file per la pubblicazione (6:40)
Invio di mail del form contatti (6:07)
LEZIONI CONCLUSIVE E RIEPILOGO
Riepilogo: le fasi di sviluppo di un progetto web (14:07)
Consigli per proseguire con la formazione (5:38)
QUESTIONARIO DI GRADIMENTO
Questionario di gradimento del Master Social Media Management Specialist
Consulenza Strategica Life Learning
La nostra consulenza strategica (2:21)
ESAME DI PROFITTO
Master con Diploma in Web Graphic Design Specialist
Progettiamo un template con Bootstrap 4: animate.css con wow.js
La lezione è bloccata
Se sei già iscritto,
hai bisogno di effettuare il login
.
Iscriviti al corso per Sbloccare