Master con Diploma in Web Graphic Design Specialist

Impara e metti in pratica tutte le tecniche per sviluppare siti dal design moderno e responsivo

Ciao, sono Simona Tocci, web developer freelance con la passione dell'insegnamento. Ho voluto creare questo percorso di Master per il neofita assoluto e guidarlo pian piano verso l'acquisizione di competenze professionali per poter svolgere l'attività di web designer. Non è richiesto alcun requisito, né alcuna conoscenza pregressa. Solo passione per questo fantastico mondo.

Perché scegliere questo corso?

Un percorso completo! Un percorso professionale! Un percorso pratico! Da zero a professionista del web come front end developer per lo sviluppo di siti statici. Per iniziare a lavorare come web designer da subito con competenza, seguendo le giuste fasi di sviluppo di un progetto web fino alla sua pubblicazione. In questo master conoscerai ed utilizzerai: HTML e CSS, in maniera graduale e via via più approfondita e imparerai ad applicarne le regole in progetti pratici, reali e facilmente riproducibili; i criteri su cui si basa il web design moderno, attento alla chiarezza comunicativa e alla riflessione continua su una buona esperienza dell'utente; le tecniche per il disegno responsivo delle interfacce web; Bootstrap, il più noto e utilizzato framework per il responsive web design; le basi di jQuery, per l'animazione degli elementi delle tue pagine; gli strumenti reperibili in rete per costruire la "cassetta degli attrezzi" del web designer; la gestione accurata e ottimizzata dei media più comuni per i tuoi progetti: immagini, audio, video; un metodo di lavoro sicuro, professionale e altamente competente per raggiungere facilmente i tuoi obiettivi e produrre fantastici progetti web. Fedele alla metodologia del "learning by doing", il Corso è altamente pratico con l'invito continuo a utilizzare il codice dei progetti proposti non solo per l'esercizio personale, ma anche e soprattutto per la creazione di cose nuove in cui mettere in gioco competenza e creatività. Il Corso è concepito e realizzato in prima istanza per i neofiti, per gli appassionati privi di qualsivoglia conoscenza nel campo oppure per chi ha una conoscenza superficiale e necessita di un percorso sistematico e graduale in cui l'approfondimento delle tecniche proposte segue un ritmo costante nel corso delle diverse sezioni. Le sezioni del Corso seguono un percorso logico e non sono del tutto autonome le une dalle altre, in linea di massima si consiglia, quindi, di seguirle dalla prima all'ultima per trarne il maggior profitto e beneficio. Non è richiesto alcun requisito, solo tanta passione, tanta voglia di lavorare, tanto desiderio di ricerca personale per diventare autonomi e produttivi in un lavoro altamente qualificato e gratificante. Gli unici strumenti necessari per il Corso sono un computer connesso ad internet perché si è scelto di utilizzare solo risorse, strumenti e software reperibili gratuitamente in rete, così da permettere a chiunque di cimentarsi da subito con le tecniche presentate. Allora, sei pronto o pronta per iniziare?

Cosa imparerai con questo corso?

Iscriviti al mio corso online "Master con Diploma in Web Graphic Design Specialist" e avrai accesso alle mie lezioni dove imparerai:

Gestire completamente il processo di sviluppo di un sito web fino alla pubblicazione,

Conoscere HTML e CSS, jQuery e saper utilizzare altre librerie di integrazione di un progetto web,

Impostare un moderno progetto web responsivo e utilizzare il framework Bootstrap,

Conoscere e utilizzare gli strumenti tecnici grafici di una pagina web,

Gestire uno spazio hosting, utilizzare un FTP e pubblicare un sito on line.

La grammatica del web design: approfondiamo html e css

Presentazione del Master con Diploma in Web Graphic Design Specialist

157 sec

Cosa è il Web Design

384 sec

Strumenti e competenze del Web Designer

203 sec

Consigli per seguire il corso e codice HTML di esempio

325 sec

Editor di codice

916 sec

Strumenti di Chrome per sviluppatori

507 sec

Strumenti online per la gestione della grafica

784 sec

Strumenti per ottimizzazione delle immagini

503 sec

Risorse online per media liberi da copyright

842 sec

Strumenti per la generazione di favicon

639 sec

Strumenti per la creazione di mockup

747 sec

Reference per i linguaggi del web

288 sec

Anatomia di una pagina web: gli elementi del Web Design

654 sec

Anatomia di una pagina web: i principi del Web Design

993 sec

Anatomia di una pagina web: i criteri del Web Design

580 sec

Tipografia nel Web Design

336 sec

Introduzione

Utilizzo di Google Fonts

516 sec

Utilizzo di FontAwesome

346 sec

La scienza dei colori

879 sec

Creare una palette colori

694 sec

Strumenti essenziali per il web design

Introduzione agli stili grafici

720 sec

Codici del corso di Web Graphic Design

120 sec

Introduzione all'HTML e CSS

427 sec

Struttura di base dell'HTML

870 sec

Come si struttura una pagina web

517 sec

La sintassi di base

631 sec

Gli elementi di formattazione

645 sec

Le liste

540 sec

I principi del web design

I link

1035 sec

Le tabelle

617 sec

Inseriamo un video in una pagina HTML

689 sec

Utilizzare i fogli di stile

949 sec

Integriamo i Google Fonts

626 sec

La gestione dei colori

447 sec

Formattiamo una tabella

579 sec

Le classi

905 sec

L'attributo unico id

379 sec

La grammatica del web design

Formattiamo le liste

713 sec

I tag section e div: differenze e utilizzo

501 sec

L'organizzazione logica di una pagina web

784 sec

La disposizione degli elementi - 1

898 sec

La disposizione degli elementi - 2

838 sec

Integriamo i FontAwesome

1270 sec

Formattiamo un menu dropdown

1280 sec

Utilizzare margin e padding

1092 sec

La proprietà position - 1

634 sec

La proprietà position - 2

704 sec

Gestione dei form

1265 sec

Impaginazione a colonne multiple

809 sec

Le animazioni con CSS3

490 sec

Le transizioni con CSS3

584 sec

Creiamo dei bottoni

862 sec

Creiamo un menu con i bottoni

546 sec

La gestione delle immagini: galleria di foto

1109 sec

Galleria di foto con caption: formattazione

373 sec

Le immagini di cover

541 sec

I gradienti con CSS3

541 sec

Highlights: le pseudo-classi -1

1334 sec

Highlights: le pseudo-classi -2

1045 sec

Highlights: gli pseudo-elementi

990 sec

Mini progetto: sviluppo di una landing page con html e css

Impostazioni del progetto

890 sec

Impostazione del form

266 sec

Formattazione degli stili: menu e background 1

302 sec

Formattazione degli stili: menu e background 2

897 sec

Uno sticky footer

599 sec

Formattazione del form e ultimi ritocchi

1099 sec

Introduzione alla grafica svg con html5

Introduzione a SVG

211 sec

Disegno di linee con SVG

700 sec

Disegno di forme con SVG

775 sec

Lo strumento polyline

446 sec

Disegno di un testo con SVG

567 sec

Effetti di blur e gradiente con SVG

824 sec

Disegno di un logo con SVG

1004 sec

Tecniche di responsive web design

Introduzione al RWD

419 sec

Lo strumento di reattività di Chrome

261 sec

Il metatag viewport

267 sec

Misure relative in percentuale

528 sec

Misure relative: em e rem

802 sec

Applichiamo misure relative al nostro layout

1051 sec

Il grid system responsivo

1140 sec

Breakpoint e media queries - 1

682 sec

Breakpoint e media queries - 2

972 sec

Flexbox e css grid layout

Le regole di base degli elementi flessibili parent

408 sec

Allineamento dei flexbox

618 sec

Disposizione dei flexbox

349 sec

Le regole di base degli elementi flessibili children

718 sec

Grandezze degli elementi flessibili

419 sec

Layout responsivo con flexbox -1

823 sec

Layout responsivo con flexbox -2

672 sec

Layout responsivo con flexbox -3

1165 sec

Layout responsivo con flexbox -4

1117 sec

CSS Grid Layout: impostazioni di base

638 sec

CSS Grid Layout: gli elementi innestati

905 sec

CSS Grid Layout: posizionamento dei blocchi singoli

1011 sec

CSS Grid Layout: galleria masonry style -1

773 sec

CSS Grid Layout: galleria masonry style -2

882 sec

Introduzione a jquery per web designer

Introduzione a jQuery

382 sec

La preparazione dell'ambiente

304 sec

Cambiare gli stili

436 sec

La gestione delle classi

744 sec

La gestione dei contenuti

922 sec

Gli eventi del mousee

744 sec

Introduzione alle animazioni

389 sec

Animazioni con fading

344 sec

Animazioni con sliding

212 sec

Animazioni personalizzate

852 sec

Plugin jQuery: regola font e slide panel

48720 sec

Plugin jQuery: photo zoom e popup scorrevole

682 sec

Plugin jQuery: slideshow con impostazioni base

432 sec

Web design responsivo con bootstrap

Introduzione a Bootstrap

32160 sec

Integrare Bootstrap nei nostri progetti

910 sec

Download customizzato di Bootstrap

417 sec

Il grid system di Bootstrap

824 sec

Barra di navigazione

915 sec

Sovrascivere le classi di Bootstrap -1

896 sec

Sovrascivere le classi di Bootstrap -2

427 sec

Il componente jumbotron

783 sec

Le immagini

348 sec

Menu fisso con personalizzazione

817 sec

Impaginare le immagini

633 sec

Il componente thumbnail

793 sec

Il componente modal

502 sec

Il componente tab

851 sec

Elementi collassabili: bottoni e accordion

1159 sec

Uso degli snippet di Bootstrap

582 sec

Lavoriamo con bootstrap: galleria foto e video

Impostazione del progetto

1194 sec

Impostazione della galleria video

718 sec

Impostazione della galleria di foto

642 sec

Lavoriamo con bootstrap: realizzazione di un template one page

Impostazione del nostro layout

1070 sec

Impostazione dello scrollspy

589 sec

Struttura del layout

854 sec

Impostazione del carousel

784 sec

Lavoriamo con i CSS -1

778 sec

Lavoriamo con i CSS -2

360 sec

Customizzazione del carousel

908 sec

Customizzazione del footer

223 sec

Customizzazione della barra di navigazione

643 sec

Valutazione dei media queries e dei breakpoints

470 sec

Inseriamo un audio nel nostro progetto

649 sec

Gestione della traccia audio con jQuery

781 sec

Ottimizzazione meta tag description e keywords

259 sec

Inseriamo una favicon e un back to top

801 sec

Ottimizzazione del file CSS: strumenti di compressione

352 sec

Lavoriamo con bootstrap: portfolio, google maps e form contatto

Impostazione del progetto di portfolio

1336 sec

Utilizzo degli pseudo-elementi

820 sec

Customizzazione del portfolio

680 sec

Impostazione del modal per il portfolio

932 sec

Sezione contatti

618 sec

Inseriamo una mappa di Google

1116 sec

Inseriamo il form nei contatti

905 sec

Lezione bonus: codice PHP per il form contatti

640 sec

Conosciamo bootstrap 4 e le sue nuove specifiche

Panoramioca di Bootstrap 4 -1

1119 sec

Panoramioca di Bootstrap 4 -2

1090 sec

Iniziamo un progetto BS con Animate css

1318 sec

Iniziamo un progetto BS: le material icons

891 sec

Progettiamo un template con Bootstrap 4: esercizio pratico 1

1432 sec

Progettiamo un template con Bootstrap 4: esercizio pratico 2

1030 sec

Progettiamo un template con Bootstrap 4: esercizio pratico 3

767 sec

Progettiamo un template con Bootstrap 4: uso creativo dei gradienti

489 sec

Progettiamo un template con Bootstrap 4: animate css con wow js

1033 sec

Pubblicazione di un sito web

Il servizio di hosting

505 sec

Utilizzo di un FTP e upload dei file per la pubblicazione

400 sec

Invio di mail del form contatti

367 sec

Lezioni conclusive e riepilogo

Riepilogo: le fasi di sviluppo di un progetto web

847 sec

Consigli per proseguire con la formazione

338 sec

Test finale

Master con Diploma in Web Graphic Design Specialist

600 sec