CORSO DI RESPONSIVE WEB DESIGN COMPLETO
Il Corso prende in esame tutte le tecniche dello sviluppo web per progetti di siti perfettamente visualizzabili e fruibili su ogni tipo di dispositivo: dal desktop con display large ed extralarge allo smartphone.
Per il web designer è una necessità conoscere e saper utilizzare le tecniche di disegno responsivo per le sue pagine web, così come conoscere e utilizzare i principali framework che offrono tutte le utilità per sviluppare velocemente e professionalmente i moderni layout.
Il Corso oltre a fornire le nozioni teoriche delle tecniche responsive, dedica due moduli di studio a Bootstrap, il più diffuso e utilizzato framework per il disegno responsivo.
Il Corso è molto pratico, con il codice scritto al vivo e dettagliatamente spiegato con esempi pratici.
Il codice viene messo a disposizione per lo studio e l’esercitazione personale.
Il corso richiede come unico requisito una conoscenza almeno di base di HTML e CSS.
Il Corso è costituito da 69 video per un numero totale di 16 ore di lezione oltre il codice su cui lavorare.
Sommario
- Introduzione al Corso
- Tools utili
- Il meta tag viewport
- Contenuti flessibili
- Grid View
- Media Queries
- Media Queries – Esercizi
- Conoscere ed utilizzare le misure relative
- Introduzione a flexbox
- Grid View con flexbox
- Layout Holy Grail con flexbox
- Presentazione del progetto
- Configurazione del progetto
- Integrazione di Google Fonts e Font Awesome
- Sviluppo della header
- Sviluppo della header con la barra di navigazione
- Sviluppo di un menu responsivo
- Personalizzazione di header e menu
- Gli altri contenuti del layout – prima parte
- Gli altri contenuti del layout – seconda parte
- Aggiungere altri plugins JS al progetto
- Media Queries e conclusione del progetto
- Panoramica dei più framework – prima parte
- Panoramica dei più framework – seconda parte
- Conoscere Foundation
- Introduzione al framework w3.css
- Presentazione del progetto
- Codifica del nostro progetto
- Immagine in parallasse
- Area Chi sono
- Area portfolio e gallery
- Area social
- Area contatti
- Conclusione e customizzazione finale del progetto
- Introduzione a Bootstrap
- Integrazione di Bootstrap nei nostri progetti
- Il grid system di Bootstrap
- Colonne con offset
- Colonne con push e pull
- Barra di navigazione orizzontale
- Personalizzare la barra di navigazione – prima parte
- Personalizzare la barra di navigazione – seconda parte
- Menu dropdown
- Menu off canvas
- Panoramica sulle helper classes di Bootstrap
- Tabelle e form
- Accordion con Bootstrap
- Progettare una landing page con Bootstrap – prima parte
- Progettare una landing page con Bootstrap – seconda parte
- Presentazione del progetto
- Configurazione del progetto
- Sviluppo della barra di navigazione
- Immagine cover nel jumbotron
- Il componente thumbnail
- Componenti well e panel
- Un carousel con Bootstrap
- Sezione social
- Sezione team
- Area contatti
- Sviluppo del footer
- Modal con Bootstrap
- Customizzazione del progetto – prima parte
- Customizzazione del progetto – seconda parte
- Customizzazione del progetto – terza parte
- Conclusione del progetto
- Uno sguardo alla nuova versione di Bootstrap
- Esercizio con il nuovo componente card
- Esercizio con il nuovo componente card – altre opzioni
- Conclusione del Corso e ringraziamenti