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

Il corso è rivolto a tutti.

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.

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

Questo corso ha l’obiettivo di fornire allo studente le basi fondamentali dello sviluppo di layout e interfacce utente.