Il corso ? 10% teoria, 90% pratica.

Diventa Web Designer partendo da zero. Dall'HTML alla creazione di un E-Commerce.

Impara e metti in pratica tutte le tecniche e le strategie per lo sviluppo di siti web professionali dal design moderno e responsivo.

Il primo corso a Messina a convogliare tutti gli strumenti necessari per sviluppare in autonomia progetti digitali complessi

Cosa imparerai in questo corso ?

*Non è richiesto nessun requisito minimo per frequentare il corso.

Osserva da più vicino il corso

Il programma del corso

Impara a progettare e fai il primo passo per diventare Web Designer ed avviare la tua nuova carriera!

  • Introduzione al web design
  • Differenza tra UI Design e UX Design
  • Strumenti essenziali per il web designer
  • I principi del web design
  • Introduzione all’HTML E CSS
  • Struttura di base HTML
  • Come si struttura una pagina web
  • La sintassi di base
  • Gli elementi di formattazione
  • liste
  • I link
  • Le tabelle
  • Video
  • Utilizzare i fogli di stile
  • Integrazione dei Google font
  • La gestione dei colori
  • Come formattare una tabella
  • Le classi
  • L’attributo unico ID
  • Formattazione delle liste
  • I tag section e div: differenze ed utilizzo
  • L’organizzazione logica-progettuale di una pagina web
  • La disposizione degli elementi
  • Utilizzo del margine e del padding
  • La proprietà position
  • Gestione dei form
  • Impaginazione a colonne multiple
  • Le animazioni con CSS3
  • le transazioni con CSS3
  • Creazioni dei bottoni
  • Creazioni menù con bottone
  • La gestione delle immagini : galleria di foto
  • Galleria di foto con caption : formattazione
  • Le immagini di cover
  • I gradienti con CSS3
  • Le pseudo-classi
  • Impostazione del progetto
  • Impostazione del form di contatto
  • Formattazione degli stili : menù e background
  • Uno Sticky footer
  • Formattazione del form
  • 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
  • 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
  • Il grid system responsivo
  • Breakpoint e media queries
  • 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
  • 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
  • Impostazione del progetto
  • Impostazione della galleria video
  • Impostazione della galleria di foto
  • Impostazione del nostro layout
  • Impostazione dello scrollspy
  • Struttura del layout
  • Impostazione del carousel
  • Lavoriamo con i CSS
  • 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
  • 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
  • Panoramica di Bootstrap 4
  • 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
  • Aggiornamento su Bootstrap 5
  • Cosa è SASS
  • Installazione di SASS
  • Configurazione editor di codice per sviluppare con SASS
  • Sintassi di base e uso delle variabili in SASS
  • Ottimizzazione del codice e utilizzo dei partials
  • La direttiva @extend
  • Introduzione all’uso dei mixin
  • Il servizio di hosting
  • Utilizzo di un FTP e upload dei file per la pubblicazione
  • Invio di mail del form contatti
  • Introduzione a WordPress
  • Come installare WordPress in locale sul computer
  • La Dashboard iniziale
  • Articoli e pagine
  • L’editor Gutemberg
  • Libreria dei media e copyright delle immagini
  • Gestire i commenti
  • Sidebar e widgets
  • Creazione menu
  • Strumento personalizza
  • Gestione temi
  • Installare Plugin
  • La gestione degli utenti
  • Impostazioni del sito
  • Classic Editor
  • Yoast SEO
  • Multiple Sidebar
  • Popup per newsletter, sconti ecc..
  • Google Analytics sul proprio sito
  • Come mettere pubblicità su wordpress con AdSense
  • La grande differenza tra wordpress.org e .com
  • Come fare backup di un Sito WordPress
  • Come velocizzare un sito WordPress
  • Come creare Sitemap per sito WordPress
  • Creare Indici per articoli automaticamente
  • Come creare dei Moduli di Contatto (Contact Form 7)
  • Come mettere un sito offline/manutenzione
  • Installazione Elementor e il tema Hello Elementor
  • Impostazioni di Elementor
  • Analisi della struttura base sulle pagine
  • L’editore di Elementor
  • Configurazione del sito
  • Panoramica Theme Builder
  • Concetto di template e kit in Elementor
  • Header
  • Footer
  • Home Page parte 1 (sezione hero in alto)
  • Home Page parte 2 (sezioni con immagini, intestazioni e testo)
  • Home Page parte 3 (contenuto dinamico, i post)
  • Page template con sidebar
  • Concetto di post: pagine, articoli e prodotti
  • Template Single Post
  • Template Archivio
  • Template Single Page
  • About us page
  • 404
  • Layout responsivo 
  • Modulo di contatto avanzato
  • Modulo di contatto avanzato multistep
  • I popup
  • Come funziona il Custom CSS nei widget
  • Immagine nel testo
  • Bordi creativi
  • Bordi immagini creativi
  • Sfondo pulsanti
  • Image blob
  • Integrazione di Mailchimp
  • Introduzione alla sezione
  • Aggiunta di custom code
  • Funzionalità sperimentale: Import/Export Template Kits
  • Nuova responsive view
  • Widget Text Path
  • Nuova Mask Option
  • Landing Pages
  • Pulsante PayPal
  • Form Submissions
  • Introduzione alla sezione
  • Importare ed esportare Template Kit + libreria template
  • Color Sampler
  • Performance migliorate per CSS e JS
  • Introduzione alla sezione
  • Novità sul Menù Carrello WooCommerce
  • WooCommerce Dynamic Tags
  • Load More – Widget Posts
  • Integrazione Mailchimp migliorata
  • Introduzione alla sezione
  • Custom Breakpoints
  • Panoramica delle novità
  • WooCommerce Checkout widget
  • WooCommerce Cart Widget (carrello)
  • WooCommerce My Account Widget
  • WooCommerce Site Settings
  • Widget barra di progressione pagina (Tracker Bar)
  • Introduzione alle novità – WooCommerce sempre più friendly!
  • WooCommerce Purchase Summary widget
  • WooCommerce Notices: posizionamento e stile
  • Animazione di transizione delle pagine (esperimento)
  • Introduzione alla sezione
  • Ottimizzazione del layout
  • Ottimizzazione delle immagini
  • Plugin di ottimizzazione: Asset Cleanup
  • Hosting
  • Panoramica e installazione WooCommmerce
  • Impostazioni del sito
  • Impostazioni di WooCommerce
  • Impostazioni di WooCommerce: Prodotti
  • Impostazioni di WooCommerce: Imposte
  • Imspotazioni di WooCommerce: Spedizioni
  • Imspotazioni di WooCommerce: Pagamenti
  • Impostazioni di WooCommerce: Account
  • Impostazioni di WooCommerce: E-mail
  • Impostazioni di WooCommerce: Avanzate
  • Gestione dei prodotti
  • Editor dei prodotti
  • I dati del prodotto
  • Prodotto Semplice
  • Gli attributi del prodotto
  • Prodotti virtuali e/o scaricabili
  • Gruppo di prodotti
  • Prodotti affiliati
  • Prodotti variabili
  • Gestione degli ordini
  • Carrello
  • Gestione ordini nel backend
  • Codici promozionali
  • Statistiche e dati analizzati ordini
  • Statistiche e dati analizzati clienti
  • Versione mobile
  • Alcuni temi e loro differenze
  • AddOn di WooCommerce
Apri chat
Inizia la chat con Fabio
Ciao! sono qui per offrirti assistenza