OBIETTIVI E PROGRAMMA
Il corso insegna ad applicare correttamente il linguaggio di marcatura HTML5 sviluppando pagine e strutture web responsive e a formattarle con i CSS3.
Parte fondamentale delle lezioni sarà dedicato alle tecniche di responsive web design, essenziale per la creazione di interfacce scalabili su ogni dispositivo. Inoltre, verrà effettuato anche il caricamento di un sito web in remoto con la gestione di uno spazio hosting e di un client FTP.
Il corso si può seguire su qualsiasi sistema operativo e gli strumenti software necessari sono gratuiti e disponibili in rete.
OBIETTIVI
Questo corso ha l’obiettivo di fornire allo studente le basi fondamentali dello sviluppo di layout e interfacce utente.
PROGRAMMA
Questo corso ha una durata complessiva di 33 ore.
Cap.01 Lezioni di introduzione
- Lezione 1.1 Cosa è il Web Design | 06:24 minuti
- Lezione 1.2 Strumenti e competenze del Web Designer | 03:23 minuti
- Lezione 1.3 Consigli per seguire il Corso | 05:26 minuti
Cap.02 Strumenti per il Web Design
- Lezione 2.1 Editor di codice | 15:16 minuti
- Lezione 2.1a Altri Editor | 13:28 minuti
- Lezione 2.2 Strumenti di Chrome per sviluppatori | 08:28 minuti
- Lezione 2.3 Strumenti on line per gestione della grafica | 13:05 minuti
- Lezione 2.4 Strumenti per ottimizzazione delle immagini | 08:23 minuti
- Lezione 2.5 Risorse on line per media liberi da copyright | 14:02 minuti
- Lezione 2.6 Strumenti per la generazione di favicon | 10:39 minuti
- Lezione 2.7 Strumenti per la creazione di mockup | 12:27 minuti
- Lezione 2.8 Reference per i linguaggi del web | 04:48 minuti
Cap.03 Principi fondamentali
- Lezione 3.1 Anatomia di una pagina web: gli elementi del Web Design | 10:55 minuti
- Lezione 3.2 Anatomia di una pagina web: i principi del Web Design | 16:33 minuti
- Lezione 3.3 Anatomia di una pagina web: i criteri del Web Design | 09:41 minuti
- Lezione 3.4 Tipografia nel Web Design | 05:36 minuti
- Lezione 3.5 Utilizzo di Google Fonts | 08:37 minuti
- Lezione 3.6 La scienza dei colori | 14:40 minuti
- Lezione 3.7 Creare una palette colori | 11:34 minuti
- Lezione 3.8 Introduzione agli stili grafici | 12:00 minuti
Cap.04 Principi di HTML e CSS
- Lezione 4.1 Introduzione all’ HTML e CSS | 07:07 minuti
- Lezione 4.2 Struttura di base HTML | 14:31 minuti
- Lezione 4.3 Come si struttura una pagina web | 08:38 minuti
- Lezione 4.4 La sintassi di base | 10:31 minuti
- Lezione 4.5 Gli elementi di formattazione | 10:46 minuti
- Lezione 4.6 Le liste | 09:00 minuti
- Lezione 4.7 I link | 17:16 minuti
- Lezione 4.8 Le tabelle | 10:18 minuti
- Lezione 4.9 Inseriamo un video in una pagina HTML | 11:30 minuti
- Lezione 4.10 Utilizzare i fogli di stile | 15:50 minuti
- Lezione 4.11 Integriamo i Google Fonts | 10:26 minuti
- Lezione 4.12 La gestione dei colori | 07:28 minuti
- Lezione 4.13 Le classi | 15:06 minuti
- Lezione 4.13a Formattiamo una tabella | 09:40 minuti
- Lezione 4.14 L’attributo unico id | 06:20 minuti
- Lezione 4.15 Formattiamo le liste | 11:54 minuti
- Lezione 4.16 I tag section e div: differenze e utilizzo | 08:21 minuti
- Lezione 4.17 L’organizzazione logica di una pagina web | 13:05 minuti
- Lezione 4.18 La disposizione degli elementi – 1 | 14:58 minuti
- Lezione 4.19 La disposizione degli elementi – 2 | 13:58 minuti
- Lezione 4.20 Integriamo i FontAwesome | 21:10 minuti
- Lezione 4.20a Aggiornamento per la libreria di Fontawesome | 05:03 minuti
- Lezione 4.21 Formattiamo un menu dropdown | 21:20 minuti
Cap.05 Approfondimenti di HTML e CSS
- Lezione 5.1 Utilizzare margin e padding | 18:12 minuti
- Lezione 5.2 La proprietà position – 1 | 10:34 minuti
- Lezione 5.3 La proprietà position – 2 | 11:44 minuti
- Lezione 5.4 Gestione dei form | 21:06 minuti
- Lezione 5.5 Impaginazione a colonne multiple | 13:29 minuti
- Lezione 5.6 Le animazioni con CSS3 | 08:11 minuti
- Lezione 5.7 Le transizioni con CSS3 | 09:45 minuti
- Lezione 5.8 Creiamo dei bottoni per le nostre pagine | 14:22 minuti
- Lezione 5.9 Creiamo un menu con i bottoni | 09:07 minuti
- Lezione 5.10 La gestione delle immagini: galleria di foto | 18:29 minuti
- Lezione 5.11 Galleria di foto con caption: formattazione | 06:13 minuti
- Lezione 5.12 Le immagini di cover | 09:01 minuti
- Lezione 5.13 I gradienti con CSS3 | 09:02 minuti
- Lezione 5.14 Highlights: le pseudo-classi – 1 | 22:15 minuti
- Lezione 5.15 Highlights: le pseudo-classi – 2 | 17:26 minuti
- Lezione 5.16 Highlight: gli pseudo-elementi | 16:30 minuti
Cap.06 Landing page con HTML e CSS
- Lezione 6.1 Impostazione del progetto | 14:50 minuti
- Lezione 6.2 Impostazione del form | 04:26 minuti
- Lezione 6.3 Formattazione degli stili: menu e background – 1 | 05:03 minuti
- Lezione 6.4 Formattazione degli stili: menu e background – 2 | 14:57 minuti
- Lezione 6.5 Uno sticky footer | 10:00 minuti
- Lezione 6.6 Formattazione del form e ultimi ritocchi del progetto | 18:20 minuti
Cap.07 Introduzione a SVG
- Lezione 7.1 Introduzione a SVG | 03:31 minuti
- Lezione 7.2 Disegno di linee con SVG | 11:41 minuti
- Lezione 7.3 Disegno di forme con SVG | 12:55 minuti
- Lezione 7.4 Lo strumento polyline | 07:27 minuti
- Lezione 7.5 Disegno di un testo con SVG | 09:28 minuti
- Lezione 7.6 Effetti di blur e gradiente con SVG | 13:44 minuti
- Lezione 7.7 Disegno di un logo con SVG | 16:45 minuti
Cap.08 Responsive Web Design
- Lezione 8.1 Introduzione al Responsive Web Design | 06:59 minuti
- Lezione 8.2 Lo strumento di analisi di reattività di Chrome | 04:21 minuti
- Lezione 8.3 Il metatag viewport | 04:28 minuti
- Lezione 8.4 Misure relative in percentuale | 08:48 minuti
- Lezione 8.5 Misure relative: em e rem | 13:23 minuti
- Lezione 8.6 Applichiamo misure relative al nostro layout | 17:31 minuti
- Lezione 8.7 Il grid system responsivo | 19:00 minuti
- Lezione 8.8 Breakpoint e media queries – 1 | 11:23 minuti
- Lezione 8.9 Breakpoint e media queries – 2 | 16:12 minuti
Cap.09 FlexBox e Grid Layout
- Lezione 9.1 Le regole di base degli elementi flessibili parent | 06:49 minuti
- Lezione 9.2 Allineamento dei flexbox | 10:19 minuti
- Lezione 9.3 Disposizione dei flexbox | 05:50 minuti
- Lezione 9.4 Le regole di base degli elementi flessibili children | 11:59 minuti
- Lezione 9.5 Grandezze degli elementi flessibili | 06:59 minuti
- Lezione 9.6 Layout responsivo con i flexbox – 1 | 13:43 minuti
- Lezione 9.7 Layout responsivo con i flexbox – 2 | 11:13 minuti
- Lezione 9.8 Layout responsivo con i flexbox – 3 | 19:25 minuti
- Lezione 9.9 Layout responsivo con i flexbox – 4 | 18:37 minuti
- Lezione 9.10 CSS Grid Layout: impostazioni di base | 10:38 minuti
- Lezione 9.11 CSS Grid Layout: gli elementi innestati | 15:05 minuti
- Lezione 9.12 CSS Grid Layout: posizionamento dei blocchi singoli | 16:51 minuti
- Lezione 9.13 CSS Grid Layout: galleria masonry style – 1 | 12:53 minuti
- Lezione 9.14 CSS Grid Layout: galleria masonry style – 2 | 14:42 minuti
Cap.10 Le basi di jQuery
- Lezione 10.1 Introduzione a jQuery | 06:22 minuti
- Lezione 10.2 La preparazione dell’ambiente | 05:05 minuti
- Lezione 10.3 Cambiare gli stili | 07:16 minuti
- Lezione 10.4 La gestione delle classi | 12:25 minuti
- Lezione 10.5 La gestione dei contenuti | 15:23 minuti
- Lezione 10.6 Gli eventi del mouse | 12:24 minuti
- Lezione 10.7 Introduzione alle animazioni | 06:29 minuti
- Lezione 10.8 Animazioni con fading | 05:44 minuti
- Lezione 10.9 Animazioni con sliding | 03:33 minuti
- Lezione 10.10 Animazioni personalizzate | 14:12 minuti
- Lezione 10.11 Plugin jQuery: regola font e slide panel | 13:33 minuti
- Lezione 10.12 Plugin jQuery: photo zoom e popup scorrevole | 11:23 minuti
- Lezione 10.13 Plugin jQuery: slideshow con impostazioni di base | 07:12 minuti
Cap.11 Introduzione a Bootstrap
- Lezione 11.1 Introduzione a Bootstrap | 08:56 minuti
- Lezione 11.2 Integrare Bootstrap nei nostri progetti | 15:10 minuti
- Lezione 11.3 Download customizzato di Bootstrap | 06:57 minuti
- Lezione 11.4 Il grid system di Bootstrap | 13:45 minuti
- Lezione 11.5 Barra di navigazione | 15:15 minuti
- Lezione 11.6 Sovrascrivere le classi di Bootstrap | 14:56 minuti
- Lezione 11.7 Il componente jumbotron | 13:03 minuti
- Lezione 11.8 Le immagini | 05:48 minuti
- Lezione 11.9 Menu fisso e personalizzazione | 13:37 minuti
- Lezione 11.10 Impaginare le immagini | 10:33 minuti
- Lezione 11.11 Il componente thumbnail | 13:14 minuti
- Lezione 11.12 Il componente modal | 08:23 minuti
- Lezione 11.13 Il componente tab | 14:11 minuti
- Lezione 11.14 Elementi collassabili: bottoni e accordion | 19:20 minuti
- Lezione 11.15 Uso degli snippet di Bootstrap | 09:42 minuti
Cap.12 Galleria di foto e video
- Lezione 12.1 Impostazione del progetto | 19:55 minuti
- Lezione 12.2 Impostazione della galleria video | 11:58 minuti
- Lezione 12.3 Impostazione della galleria di foto | 10:42 minuti
Cap.13 Sito web one page
- Lezione 13.1 Impostazione del nostro layout | 17:51 minuti
- Lezione 13.2 Impostazione dello scrollspy | 09:49 minuti
- Lezione 13.3 Struttura del layout | 14:14 minuti
- Lezione 13.4 Impostazione del carousel | 13:04 minuti
- Lezione 13.5 Lavoriamo con i CSS – 1 | 12:59 minuti
- Lezione 13.6 Lavoriamo con i CSS – 2 | 06:01 minuti
- Lezione 13.7 Customizzazione del carousel | 15:08 minuti
- Lezione 13.8 Customizzazione del footer | 03:43 minuti
- Lezione 13.9 Customizzazione della barra di navigazione | 10:43 minuti
- Lezione 13.10 Valutazione dei media queries e breakpoint | 07:51 minuti
- Lezione 13.11 Inseriamo un audio nel nostro progetto | 10:49 minuti
- Lezione 13.11a Gestione della traccia audio con jQuery | 13:01 minuti
- Lezione 13.12 Ottimizzazione meta tag description e keywords | 04:19 minuti
- Lezione 13.13 Inseriamo una favicon e un back to top | 13:21 minuti
- Lezione 13.14 Ottimizzazione del file CSS: strumenti di compressione | 05:52 minuti
Cap.14 Realizzazione di un portfolio
- Lezione 14.1 Impostazione del progetto di portfolio | 22:16 minuti
- Lezione 14.2 Utilizzo degli pseudo-elementi | 13:41 minuti
- Lezione 14.3 Customizzazione del portfolio | 11:20 minuti
- Lezione 14.4 Impostazione del modal per il portfolio | 15:32 minuti
- Lezione 14.5 Sezione Contatti | 10:18 minuti
- Lezione 14.6 Inseriamo una mappa di Google | 18:36 minuti
- Lezione 14.7 Inseriamo un form contatti | 15:05 minuti
- Lezione 14.8 Codice PHP per il form contatti | 10:40 minuti
Cap.15 Bootstrap 4
- Lezione 15.1 Panoramica di Bootstrap 4 – prima parte | 18:39 minuti
- Lezione 15.2 Panoramica di Bootstrap 4 – seconda parte | 18:10 minuti
- Lezione 15.3 Iniziamo un progetto BS con Animate css | 21:58 minuti
- Lezione 15.4 Iniziamo un progetto BS: le Material Icons | 14:51 minuti
- Lezione 15.5 Progettiamo un template con Bootstrap 4: esercizio pratico 1 | 23:53 minuti
- Lezione 15.6 Progettiamo un template con Bootstrap 4: esercizio pratico 2 | 17:10 minuti
- Lezione 15.7 Progettiamo un template con Bootstrap 4: esercizio pratico 3 | 12:47 minuti
- Lezione 15.8 Progettiamo un template con Bootstrap 4: uso dei gradienti | minuti
- Lezione 15.9 Progettiamo un template con Bootstrap 4: Animate css con wow js | 17:13 minuti
Cap.16 Pubblicazione di un sito
- Lezione 16.1 Il servizio di hosting | 08:25 minuti
- Lezione 16.2 Utilizzo di un FTP e upload dei file per la pubblicazione | 06:40 minuti
- Lezione 16.3 Invio di mail del form contatti | 06:07 minuti
Cap.17 Consigli utili
- Lezione 17.1 Riepilogo: le fasi di sviluppo di un progetto web | 14:07 minuti
- Lezione 17.2 Le novità di Bootsrap 5 | 11:09 minuti
- Lezione 17.3 Consigli per proseguire con la formazione | 05:57 minuti
- Lezione 17.4 Le novità di Bootstrap | 11:09 minuti
RICHIEDI INFORMAZIONI
PROCEDURA DI ISCRIZIONE
Per iscriversi al corso basta semplicemente cliccare sul pulsante “Aggiungi al Carrello” per verificare eventuali promozioni in corso e seguire la procedura guidata di registrazione e pagamento.
E’ possibile pagare sia tramite Carta di Credito/Paypal (senza costi aggiuntivi) oppure Bonifico Bancario (in caso di pagamento con Bonifico Bancario il corso sarà disponibile solo dopo avvenuto accredito presso la nostra Banca, in genere dai 3/5 giorni lavorativi).
Se si ha un Coupon sconto consigliamo di procedere come indicato sopra per l’iscrizione, una volta arrivati sulla pagina che mostra prezzo finale, occorre inserire il codice coupon qui 
e cliccare su “Verifica”. Successivamente, avviata la procedura di iscrizione, è necessario inserire nuovamente il coupon qui e cliccare su “Applica”, così il coupon sarà calcolato nel prezzo finale.
MODALITA’ DI ACCESSO E UTILIZZO
Il corso online è fruibile sulla nostra piattaforma attraverso tutti i dispositivi: smartphone, tablet e pc collegati ad internet, l’accesso è sempre disponibile (24/24). Il corso ha una validità di 6 mesi dalla data di iscrizione e dovrà essere completato entro tale termine.
Per accedere al corso, una volta acquistato (vedi modalità di iscrizione) basta cliccare sulla scritta in alto del sito “Accedi”.
Accedendo all’Area Utente con PC/Notebook o Tablet il pulsante “Accedi” è in alto a destra, come nell’immagine qui disponibile.
Se accediamo all’Area Utente da Smartphone, il pulsante “Accedi” è nella voce di menù a destra; occorre cliccare quindi l’icona del menù (cerchiata in rosso nell’immagine qui sotto) per visualizzarlo.
Si accede quindi al proprio account (usando le credenziali di registrazione) dove è disponibile l’accesso al corso online scelto, nella sezione “PROSPETTO CORSI” evidenziata in rosso nell’immagine qui sotto.
ATTESTATO E BENEFIT
A conclusione del percorso formativo sarà possibile scaricare nella propria area utente un certificato di frequenza personalizzato.
Richiedi informazioni
Campi richiesti