Corso Online: Front end base – HTML, CSS, Bootstrap

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.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