Responsive Web Design - Il Corso Completo

907 students enrolled

Responsive Web Design - Il Corso Completo

Corso completo sulle tecniche responsive per lo sviluppo di siti web

907 students enrolled

Created by Simona Tocci

Last updated 3/2017

Italian

Preview this course

Responsive Web Design - Il Corso Completo

$55.99 $79.99 30% off

5 hours left at this price!

30-Day Money-Back Guarantee

16 hours on-demand video
6 downloadable resources
Full lifetime access
Access on mobile and TV

Certificate of Completion

Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business

What you'll learn

Conoscere le regole di base dello sviluppo di layout responsivi
Valutare professionalmente diverse soluzioni tecniche da adattare a specifiche impostazioni di layout
Saper progettare, sviluppare e sviluppare un intero progetto web in totale autonomia
Conoscere il mondo del responsive web design, i più noti framework e le regole che li strutturano e implementare autonomamente le proprie conoscenze

+ – Le basi del Responsive Web Design

11 lectures 02:27:53

Presentazione e consigli per seguire proficuamente il corso

Introduzione al Corso

Preview 02:53

Suggerimento su alcuni programmi free di base per lo svolgimento del corso

Preview 06:56

Definiamo il viewport e integriamo il metatag relativo nei nostri progetti

Il meta tag viewport

09:28

Con poche e semplici regole i nostri contenuti diventano flessibili e adattabili ad ogni display per una corretta visualizzazione

Contenuti flessibili

13:52

Costruire e lavorare con un grid system con righe e colonne responsivo

Preview 18:18

Le regole CSS3 di media queries ci permettono di compilare regole specifiche di visualizzazione del nostro layout per una piena adattabilità ad ogni display.

Media Queries - Prima parte

12:51

Esercitiamoci nell'utilizzo delle media queries.

Media Queries - Esercizi

20:57

Conoscere ed utlilizzare i vw/vh, gli em e i rem oltre le misure in percentuale.

Conoscere ed utilizzare le misure relative

12:06

Conoscere ed utilizzare la potenza e la versatilità delle regole che gestiscono i flexbox per un corretto ed agevole allineamento dei nostri contenuti.

Introduzione a Flexbox

19:50

Costruire una griglia responsiva con flexbox

Grid con Flexbox

11:53

Costruire un layout di base del tipo Holy Grail con il supporto di Flexbox

Layout Holy Grail con Flexbox

Preview 18:49

Cosa sai del Responsive Web Design?

4 questions

+ – Il nostro primo layout responsivo

12 lectures 02:38:26

Presentazione degli elementi che strutturano il progetto

Presentazione del progetto

07:06

Preparazione dei file per la compilazione di un layout responsivo

Configurazione del progetto

15:40

Come utilizzare Google Font e la libreria di Font Awesome nei nostri progetti

Integrazione di Google Fonts e di Font Awesome

19:46

Compilazione della Header - Prima Parte

12:52

Compilazione della header con la barra di navigazione

11:21

Integrazione nel progetto di un plugin jquery per un menu responsivo

Compilazione di un menu responsivo

12:29

Fogli di stile per la customizzazione di header con la barra di navigazione

Personalizzazione di header e menu

13:44

Creazione delle altre sezioni del nostro layout

Gli altri contenuti del layout - Prima Parte

17:55

Conclusione dell'architettura del nostro progetto.

Gli altri contenuti del layout - Seconda Parte

14:31

Fogli di stile per le altre sezioni del nostro layout

Personalizzazione dei contenuti

05:50

Integrazione di plugin JS per l'area social e il carousel

Aggiungere altri plugins JS al progetto

Preview 15:17

Compilare regole media queries per la piena responsività del nostro progetto

Media Queries e conclusione del progetto

11:55

Layout responsivo

3 questions

+ – Panoramica dei più comuni framework ed esercizi con w3.css

12 lectures 02:41:18

Introduzione al framework Skeleton

Panoramica dei più comuni framework - Prima Parte

10:17

Introduzione a UI Kit e Gumby

Panoramica dei più comuni framework - Seconda Parte

14:42

Introduzione al framework Foundation, vera alternativa a Bootstrap

Conoscere Foundation

13:01

Introduzione alle regole del framework responsivo w3.css

Introduzione a w3.css

Preview 12:54

Esame degli elementi strutturali del template responsivo con w3.css

Presentazione del progetto

11:27

Codifica del nostro progetto

13:32

Aggiungere e configurare un'immagine in parallasse in un progetto responsivo

Immagine in parallasse

18:58

Compilazione dell' area chi sono

Area CHI SONO

12:00

Compilazione di un'area portfolio e di una gallery con effetto modal

Area Portfolio e Gallery

18:34

Aggiunta delle icone dei social con font awesome e personalizzazione

Area Social

08:33

Compilazione di un'area contatti con un form

Area contatti

15:23

Conclusione del foglio di stile per una completa personalizzazione del layout responsivo.

Conclusione e customizzazione finale del progetto

11:57

Progettare un layout responsivo con w3.css

3 questions

+ – Conosciamo Bootstrap

15 lectures 03:46:14

Conoscenza di base del framework responsivo Bootstrap

Introduzione a Bootstrap

14:39

Esame dei file e dei collegamenti necessari per il funzionamento corretto della libreria di Bootstrap

Integrazione di Bootstrap nei nostri progetti

16:39

Esame del grid system di Bootstrap e del suo funzionamento

Il grid system di Bootstrap

13:25

Conoscenza della proprietà di offset per il corretto allineamento delle colonne

Colonne con offset

16:16

Conoscenza delle proprietà di push e pull per lo slittamento delle colonne a destar e sinistra

Colonne con push and pull

12:00

Compilazione di una barra di navigazione orizzontale con le classi di Bootstrap

Barra di navigazione orizzontale

14:52

Fogli di stile per una completa personalizzazione della barra di navigazione

Personalizzare la barra di navigazione

12:32

Fogli di stile per una completa personalizzazione di una barra di navigazione

Personalizzare la barra di navigazione - Seconda Parte

14:15

Compiliamo una barra di navigazione con sotto-menu ed effetto dropdown

Menu Dropdown

16:34

L'off canvas dispone i menu ai lati del layout. E' una funzionalità avanzata ma essendo di grande utilizzo, se ne esamina il codice

Lezione bonus: Menu Off Canvas

11:25

Conoscenza e utilizzo delle classi di utilità in Bootstrap

Panoramica sulle Helper Classes di Bootstrap

14:56

Compilare tabelle e form responsivi con Bootstrap

Preview 17:52

Compilare un accordion collassabile con Bootstrap

Accordion con Bootstrap

15:57

Sviluppo di un mini progetto di una landing page per presentare un'ipotetica app con Boostrap

Progettare una landing page con Bootstrap - Prima Parte

16:39

Conclusione dello sviluppo di un mini progetto di una landing page per presentare un'ipotetica app con Boostrap

Progettare una landing page con Bootstrap - Seconda Parte

18:13

Conosci Twitter Bootstrap?

4 questions

+ – Template Responsivo con Bootstrap

16 lectures 03:32:33

Esame degli elementi strutturali del nostro progetto

Presentazione del progetto

05:43

Preparazione dei file necessari per la codifica del template con Bootstrap

Configurazione del progetto

05:00

Compilazione della barra di navigazione

19:30

Utilizzo della classe jumbotron e configurazione di un'immagine in cover

Immagine cover nel jumbotron

11:52

Utilizzo della classe thumbnail per la struttura di box di contenuto

Il componente thumbnail

Preview 10:46

Utilizzo delle classi well e panel

Componenti well e panel

10:36

Esame e compilazione del codice per lo sviluppo di un carousel con slider di immagini e testo

Un carousel con Bootstrap

18:55

Compiliamo la sezione social del nostro progetto.

Sezione social

09:46

Compiliamo la sezione team del nostro progetto

Sezione Team

17:33

Compiliamo la sezione contatti con un form responsivo e l'utilizzo di Google Maps

Area contatti

17:09

Compiliamo il footer del nostro progetto

Footer

03:37

Esame e compilazione del codice per la configurazione di pop up con effetto modal

Modal con Bootstrap

15:34

Fogli di stile per una piena customizzazione del nostro template

Customizzazione del progetto - Prima Parte

19:43

Fogli di stile per una piena customizzazione del nostro template

Customizzazione del progetto - Seconda Parte

17:36

Fogli di stile per una piena customizzazione del nostro template

Customizzazione del progetto - Terza Parte

18:14

Concludiamo e aggiungiamo le regole media queries

Conclusione del progetto

10:59

Un progetto con Bootstrap

3 questions

+ – Verso Bootstrap 4

4 lectures 44:30

Esame delle novità attese con la quarta versione di Bootsrap attualmente in versione alpha

Uno sguardo alla nuova versione di Bootstrap

12:57

Esercizio con il nuovo componente Card

15:48

Esercizio con il nuovo componente Card - Altre opzioni

13:10

Complimenti, ringraziamenti e suggerimenti su come continuare la formazione

Conclusione e ringraziamenti

02:35

Requirements

Il corso non richiede particolari conoscenze se non una base di HTML e CSS

Description

Il corso prende in considerazione le regole del disegno web responsivo e le tecniche per la corretta visualizzazione di un template su ogni device attraverso l'applicazione delle regole di media queries. Il corso introduce alla conoscenza dei più comuni framework per il disegno responsivo e dell'architettura che li governa. Il corso prevede la progettazione completa di tre layout responsivi e di una landing page, esaminando quelle che sono le strutture del moderno web design. Introduce alla tecnica dei flexbox, esamina e lavora con grid system di diversa struttura. Due sezioni sono dedicate al framework per eccellenza per il responisve web design: Bootstrap. In una sezione bonus si esaminano anche le novità dell'ultima versione del framework Bootstrap 4. Il corso è molto pratico, compilando decine di esercizi dal vivo. Tutto il codice sorgente e i file dei progetti completi sarà messo a disposizione per l'esercizio e il lavoro personale. Tutte le lezioni video sono scaricabili per poter essere visionate off line in piena libertà.

Who this course is for:

Il corso è adatto a tutti: web designer, sviluppatori web, appassionati di web e grafica, persone che vogliono completare la loro formazione di base nel mondo del web design. Coloro che vogliono dare una rinfrescata alle loro nozioni. Per coloro che sono curiosi e non smettono mai di imparare.