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.
- Modalità: Presenza
- Inizio : Febbraio 2022
- Giorni : Martedì - Giovedì
- Orari : 09:00 - 13:00
- Durata : 3 mesi
- Assenze : Massimo 3
- Rilascio attestai : 2
- Prezzo : 1500€ rateizzabile
- Assistenza : Per sempre
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.
- Gestire completamente il processo di sviluppo di un sito web fino alla pubblicazione
- Impostare un moderno progetto web responsivo
- Gestire uno spazio hosting, utilizzare un FTP e pubblicare un sito on line
- Conoscere HTML e CSS e saperli utilizzare con professionalità e creatività
- Conoscere ed utilizzare un framework responsivo
- Conoscere e utilizzare gli strumenti tecnici grafici di una pagina web
- Progettazione grafica professionale di un sito web dinamico
- Uso professionale del Page Builder Elementor Pro per gestire progetti online
- Costruire un tema WordPress partendo da zero
- Conoscere il CMS WordPress
- Configurare un negozio online con WooCommerce
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