Responsive Web Design - Il Corso Completo
4.6 (24 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
120 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Responsive Web Design - Il Corso Completo to your Wishlist.

Add to Wishlist

Responsive Web Design - Il Corso Completo

Corso completo sulle tecniche responsive per lo sviluppo di siti web
4.6 (24 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
120 students enrolled
Created by Simona Tocci
Last updated 3/2017
Italian
Learn Fest Sale
Current price: $10 Original price: $25 Discount: 60% off
19 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 16 hours on-demand video
  • 6 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
Requirements
  • Il corso non richiede particolari consocenze 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 is the target audience?
  • 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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 70 Lectures Collapse All 70 Lectures 15:50:54
+
Le basi del Responsive Web Design
11 Lectures 02:27:53

Presentazione e consigli per seguire proficuamente il 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

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

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

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

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
+
Sezione Bonus: 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
About the Instructor
Simona Tocci
4.6 Average rating
24 Reviews
120 Students
1 Course
Web Designer and Developer

Sono una web designer con la passione dell'insegnamento. Amo il mondo dello sviluppo web che non considero solo dal lato tecnico ma di cui apprezzo la grande possibilità di espressione creativa. Ho lavorato per molti anni come formatrice di insegnanti nei corsi di multimedialità applicata alla didattica. Negli ultimi anni ho invece collaborato con l'Università di Firenze nella creazione di siti web per eventi e corsi e nello sviluppo di piattaforma per la formazione a distanza. Sono competente in HTML, CSS e JS/JQuery, PHP con MySQL e curo la grafica dei miei progetti con Photoshop e Illustrator. Negli ultimi anni sto lavorando con passione alla programmazione back end in PHP per trasformare i miei progetti statici in siti dinamici, in particolare sviluppando template per Word Press. Amo compilare e scrivere codice e vedere come le stringhe scritte nel mio editor  prendono vita per la creazione di progetti di siti, layout ed applicazioni. Per quanto abbia tanti anni di esperienza come docente, amo anche stare continuamente dall'altra parte e imparare ogni giorno cose nuove.