Responsive Web Design - Il Corso Completo

Corso completo sulle tecniche responsive per lo sviluppo di siti web
4.8 (5 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.
34 students enrolled
$19
$25
24% off
Take This Course
  • Lectures 70
  • Length 16 hours
  • Skill Level Beginner Level
  • Languages Italian
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2016 Italian

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

What are the requirements?

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

What am I going to get from this course?

  • 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

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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Le basi del Responsive Web Design
02:53

Presentazione e consigli per seguire proficuamente il corso

06:56

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

09:28

Definiamo il viewport e integriamo il metatag relativo nei nostri progetti

13:52

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

18:18

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

12:51

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

20:57

Esercitiamoci nell'utilizzo delle media queries.

12:06

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

19:50

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

11:53

Costruire una griglia responsiva con flexbox

18:49

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

Cosa sai del Responsive Web Design?
4 questions
Section 2: Il nostro primo layout responsivo
07:06

Presentazione degli elementi che strutturano il progetto

15:40

Preparazione dei file per la compilazione di un layout responsivo

19:46

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

Compilazione della Header - Prima Parte
12:52
Compilazione della header con la barra di navigazione
11:21
12:29

Integrazione nel progetto di un plugin jquery per un menu responsivo

13:44

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

17:55

Creazione delle altre sezioni del nostro layout

14:31

Conclusione dell'architettura del nostro progetto.

05:50

Fogli di stile per le altre sezioni del nostro layout

15:17

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

11:55

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

Layout responsivo
3 questions
Section 3: Panoramica dei più comuni framework ed esercizi con w3.css
10:17

Introduzione al framework Skeleton

14:42

Introduzione a UI Kit e Gumby

13:01

Introduzione al framework Foundation, vera alternativa  a Bootstrap

12:54

Introduzione alle regole del framework responsivo w3.css

11:27

Esame degli elementi strutturali del template responsivo con w3.css

Codifica del nostro progetto
13:32
18:58

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

12:00

Compilazione dell' area chi sono

18:34

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

08:33

Aggiunta delle icone dei social con font awesome e personalizzazione

15:23

Compilazione di un'area contatti con un form

11:57

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

Progettare un layout responsivo con w3.css
3 questions
Section 4: Conosciamo Twitter Bootstrap
14:39

Conoscenza di base del framework responsivo Bootstrap

16:39

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

13:25

Esame del grid system di Bootstrap e del suo funzionamento

16:16

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

12:00

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

14:52

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

12:32

Fogli di stile per una completa personalizzazione della barra di navigazione 

14:15

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

16:34

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

11:25

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

14:56

Conoscenza e utilizzo delle classi di utilità in Bootstrap

17:52

Compilare tabelle e form responsivi con Bootstrap

15:57

Compilare un accordion collassabile con Bootstrap

16:39

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

18:13

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

Conosci Twitter Bootstrap?
4 questions
Section 5: Template Responsivo con Bootstrap Twitter
05:43

Esame degli elementi strutturali del nostro progetto

05:00

Preparazione dei file necessari per la codifica del template con Bootstrap

Compilazione della barra di navigazione
19:30
11:52

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

10:46

Utilizzo della classe thumbnail per la struttura di box di contenuto

10:36

Utilizzo delle classi well e panel

18:55

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

09:46

Compiliamo la sezione social del nostro progetto.

17:33

Compiliamo la sezione team del nostro progetto

17:09

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

03:37

Compiliamo il footer del nostro progetto

15:34

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

19:43

Fogli di stile per una piena customizzazione del nostro template

17:36

Fogli di stile per una piena customizzazione del nostro template

18:14

Fogli di stile per una piena customizzazione del nostro template

10:59

Concludiamo e aggiungiamo le regole media queries

Un progetto con Bootstrap
3 questions
Section 6: Sezione Bonus: Verso Bootstrap 4
12:57

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

Esercizio con il nuovo componente Card
15:48
Esercizio con il nuovo componente Card - Altre opzioni
13:10
02:35

Complimenti, ringraziamenti e suggerimenti su come continuare la formazione

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Simona Tocci, 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 di HTML, CSS e JS e curo la grafica dei miei progetti con Photoshop e Illustrator. Negli ultimi anni mi sto appassionando di programmazione in PHP per trasformare i miei progetti statici in siti dinamici, in particolare sviluppo template per Word Press. Amo compilare e scrivere codice e vedere come le stringhe scritte nel mio editor di codice prendono vita per la creazione di progetti di siti e layout. Per quanto ho tanti anno di esperienza come docente, amo anche stare continuamente dall'altra parte e imparare ogni giorno cose nuove.  

Ready to start learning?
Take This Course