Categoria

DESIGN & IT/ SVILUPPO WEB

Perchè scegliere questo corso?

Questo corso prepara il corsista a lavorare come web designer da subito con competenza, seguendo le giuste fasi di sviluppo di un progetto web fino alla sua pubblicazione. Lo fa con un approccio pratico che permette di iniziare a lavorare con professionalità.

Fornisce anche una guida sicura per orientarsi al meglio nel vasto mondo delle professioni del web.

Competenze necessarie per poter partecipare

Il corso è pensato per i neofiti del settore quindi non sono richiesti requisiti specifici. Gli unici strumenti necessari per il Corso sono un computer connesso ad internet. La docente ha scelto appositamente di utilizzare solo risorse, strumenti e software reperibili gratuitamente in rete, così da permettere a chiunque di cimentarsi da subito con le tecniche presentate di lezione in lezione.

Numero di video

173

Durata

34,5 ore

Costo

€39.90 (invece di 145)

Attestato di formazione

Attestato di partecipazione rilasciato da UNIPRO

A chi è rivolto?

Questo corso  web design è 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. Il Corso è indicato anche come refresh formativo per i professionisti del settore per aggiornare le proprie competenze alle tecniche di sviluppo web più moderne.

Cosa imparerò con questo corso?

In questo Corso conoscerai ed utilizzerai:

  • I criteri su cui si basa il web design moderno, attento alla chiarezza comunicativa e alla riflessione continua su una buona esperienza dell’utente;
  • HTML e CSS, in maniera graduale e via via più approfondita e imparerai ad applicarne le regole in progetti pratici, reali e facilmente riproducibili;
  • Pubblicazione del sito da locale a remoto;
  • Le tecniche per il disegno responsivo delle interfacce web, in particolare con l’apprendimento del più noto framework responsivo, Bootstrap
  • Gli strumenti reperibili in rete per costruire la “cassetta degli attrezzi” del web designer;
  • Un metodo di lavoro sicuro, professionale e altamente competente per raggiungere facilmente i tuoi obiettivi e produrre fantastici progetti web.
  • La gestione accurata e ottimizzata dei media più comuni per i tuoi progetti: immagini, audio, video

Programma

    • MODULO 1. LEZIONI DI INTRODUZIONE
    • Cosa è il Web Design GRATIS
    • Strumenti e competenze del Web Designer
    • Consigli per seguire il Corso
    • MODULO 2. STRUMENTI ESSENZIALI PER IL WEB DESIGN
    • Editor di codice
    • Aggiornamenti editor di codice
    • Strumenti di Chrome per sviluppatori
    • Strumenti on line per gestione della grafica
    • Strumenti per ottimizzazione delle immagini
    • Risorse on line per media liberi da copyright
    • Strumenti per la generazione di favicon
    • Strumenti per la creazione di mockup
    • Reference per i linguaggi del web
    • MODULO 3. I PRINCIPI DEL WEB DESIGN
    • Anatomia di una pagina web: gli elementi del Web Design
    • Anatomia di una pagina web: i principi del Web Design
    • Anatomia di una pagina web: i criteri del Web Design
    • Tipografia nel Web Design
    • Utilizzo di Google Fonts
    • Utilizzo di FontAwesome
    • La scienza dei colori
    • Creare una palette colori
    • Introduzione agli stili grafici
    • MODULO 4. LA GRAMMATICA DEL WEB DESIGN: HTML E CSS
    • Introduzione all’ HTML e CSS
    • Struttura di base HTML
    • Come si struttura una pagina web
    • La sintassi di base
    • Gli elementi di formattazione
    • Le liste
    • I link
    • Le tabelle
    • Inseriamo un video in una pagina HTML
    • Utilizzare i fogli di stile
    • Integriamo i Google Fonts
    • La gestione dei colori
    • Formattiamo una tabella
    • Le classi
    • L’attributo unico id
    • Formattiamo le liste
    • I tag section e div: differenze e utilizzo
    • L’organizzazione logica di una pagina web
    • 13:05
    • La disposizione degli elementi – 1
    • Disposizione degli elementi – 2
    • Integriamo i FontAwesome
    • Aggiornamento per la libreria di Fontawesome
    • Formattiamo un menu dropdown
    • Codice modulo 4
    • MODULO 5. LA GRAMMATICA DEL WEB DESIGN: APPROFONDIAMO HTML E CSS
    • Utilizzare margin e padding
    • La proprietà position – 1
    • La proprietà position – 2
    • Gestione dei form
    • Impaginazione a colonne multiple
    • Le animazioni con CSS3
    • Le transizioni con CSS3
    • Creiamo dei bottoni per le nostre pagine
    • Creiamo un menu con i bottoni
    • La gestione delle immagini: galleria di foto
    • Galleria di foto con caption: formattazione
    • Le immagini di cover
    • 18:29
    • I gradienti con CSS3
    • Highlights: le pseudo-classi – prima parte
    • Highlights: le pseudo-classi – seconda parte
    • Highlight: gli pseudo-elementi
    • Codice modulo 5
    • MODULO 6. MINI PROGETTO: SVILUPPO DI UNA LANDING PAGE CON HTML E CSS
    • Impostazione del progetto
    • Impostazione del form
    • Formattazione degli stili: menu e background – 1
    • Formattazione degli stili: menu e background – 2
    • Uno sticky footer
    • Formattazione del form e ultimi ritocchi del progetto
    • Codice modulo 6
    • MODULO 7. INTRODUZIONE ALLA GRAFICA SVG CON HTML5
    • Introduzione a SVG
    • Disegno di linee con SVG
    • Disegno di forme con SVG
    • Lo strumento polyline
    • Disegno di un testo con SVG
    • Effetti di blur e gradiente con SVG
    • Disegno di un logo con SVG
    • Codice modulo 7
    • MODULO 8. TECNICHE DI RESPONSIVE WEB DESIGN
    • Introduzione al Responsive Web Design
    • Lo strumento di analisi di reattività di Chrome
    • Il metatag viewport
    • Misure relative in percentuale
    • Misure relative: em e rem
    • Applichiamo misure relative al nostro layout
    • Il grid system responsivo
    • Breakpoint e media queries – 1
    • Breakpoint e media queries – 2
    • Codice modulo 8
    • MODULO 9. FLEXBOX E CSS GRID LAYOUT
    • Le regole di base degli elementi flessibili parent
    • Allineamento dei flexbox
    • Disposizione dei flexbox
    • Le regole di base degli elementi flessibili children
    • Grandezze degli elementi flessibili
    • Layout responsivo con flexbox – 1
    • Layout responsivo con i flexbox – 2
    • Layout responsivo con i flexbox – 3
    • Layout responsivo con flexbox – 4
    • CSS Grid Layout: impostazioni di base
    • CSS Grid Layout: gli elementi innestati
    • CSS Grid Layout: posizionamento dei blocchi singoli
    • CSS Grid Layout: galleria masonry style – prima parte
    • CSS Grid Layout: galleria masonry style – seconda parte
    • Codice modulo 9
    • MODULO 10. INTRODUZIONE A JQUERY PER WEB DESIGNER
    • Introduzione a jQuery
    • La preparazione dell’ambiente
    • Cambiare gli stili
    • La gestione delle classi
    • La gestione dei contenuti
    • Gli eventi del mouse
    • Introduzione alle animazioni
    • Animazioni con fading
    • Animazioni con sliding
    • Animazioni personalizzate
    • Plugin jQuery: regola font e slide panel
    • Plugin jQuery: photo zoom e popup scorrevole
    • Plugin jQuery: slideshow con impostazioni di base
    • Codice modulo 10
    • MODULO 11. DISEGNO RESPONSIVO CON BOOTSTRAP
    • Introduzione a Bootstrap
    • Integrare Bootstrap nei nostri progetti
    • Download customizzato di Bootstrap
    • Il grid system di Bootstrap
    • Barra di navigazione
    • Sovrascrivere le classi di Bootstrap -1
    • Sovrascrivere le classi di Bootstrap – 2
    • Il componente jumbotron
    • Le immagini
    • Menu fisso e personalizzazione
    • Impaginare le immagini
    • Il componente thumbnail
    • Il componente modal
    • Il componente tab
    • Elementi collassabili: bottoni e accordion
    • Uso degli snippet di Bootstrap
    • Codice modulo 11
    • MODULO 12. LAVORIAMO CON BOOTSTRAP: GALLERIA, FOTO, VIDEO
    • Impostazione del progetto
    • Impostazione della galleria video
    • Impostazione della galleria di foto
    • Codice modulo 12
    • MODULO 13. LAVORIAMO CON BOOTSTRAP: REALIZZAZIONE DI UN TEMPLATE ONE PAGE
    • Impostazione del nostro layout
    • Impostazione dello scrollspy
    • Struttura del layout
    • Impostazione del carousel
    • Lavoriamo con i CSS -1
    • Lavoriamo con i CSS -2
    • Customizzazione del carousel
    • Customizzazione del footer
    • Customizzazione della barra di navigazione
    • Valutazione dei media queries e breakpoint
    • Inseriamo un audio nel nostro progetto
    • Gestione della traccia audio con jQuery
    • Ottimizzazione meta tag description e keywords
    • Inseriamo una favicon e un back to top
    • Ottimizzazione del file CSS: strumenti di compressione
    • Codice modulo 13
    • MODULO 14. LAVORIAMO CON BOOTSTRAP: PORTFOLIO, GOOGLE MAPS, FORM CONTATTI
    • Impostazione del progetto di portfolio
    • Utilizzo degli pseudo-elementi
    • Customizzazione del portfolio
    • Impostazione del modal per il portfolio
    • Sezione Contatti
    • Inseriamo una mappa di Google
    • Inseriamo un form contatti
    • Lezione bonus: Codice PHP per il form contatti
    • Codice modulo 14
    • MODULO 15. CONOSCIAMO BOOTSTRAP E LE SUE NUOVE SPECIFICHE
    • Panoramica di Bootstrap 4 – prima parte
    • Panoramica di Bootstrap 4 – seconda parte
    • Iniziamo un progetto BS con Animate.css
    • Iniziamo un progetto BS: le Material Icons
    • Progettiamo un template con Bootstrap 4: esercizio pratico 1
    • Progettiamo un template con Bootstrap 4: esercizio pratico 2
    • Progettiamo un template con Bootstrap 4: esercizio pratico 3
    • Progettiamo un template con Bootstrap 4: uso creativo dei gradienti
    • Progettiamo un template con Bootstrap 4: Animate.css con wow.js
    • Codice modulo 15

Dettagli docente

Simona Tocci
Simona Tocci
Simona si occupa di web design e sviluppo web ormai da molti anni. All’attività tecnica ha sempre affiancato l’esperienza di insegnamento in diversi ambiti. Attualmente lavora come sviluppatrice free lance.

Sei interessato ad acquistare il corso?

Clicca il pulsante qui in basso per acquistare il corso.

Modalità di pagamento: PayPal – Bonifico Bancario – Carta di Credito

Si voglio acquistare il corso

Scopri le prossime date

Grazie per averci contattato, un nostro consulente ti risponderà nel più breve tempo possibile.
Ti preghiamo di riprovare.