Corso Front End Developer

Contenuti del corso

• Personal empowerment

  40 ore

  • Consapevolezza di sé, autostima e sviluppo del potenziale personale
  • Autoimprenditorialità: atteggiamento proattivo, iniziativa e responsabilità
  • Differenza tra lavoratore autonomo, freelance, startupper e impresa tradizionale
  • Forme giuridiche dell’autoimprenditorialità
  • Tasse, contributi, agevolazioni
  • Come nasce un’idea di business (osservare bisogni, problemi, tendenze)
  • Analisi di mercato, concorrenza, prezzi
  • Nozioni base di branding personale e d’impresa
  • Organizzazione del tempo e delle risorse
  • Comunicazione efficace: ascolto attivo, empatia e gestione delle relazioni

• Bootstrap

  16 ore

  • Introduzione a Bootstrap: installazione, struttura dei file e vantaggi del framework
  • Layout system: utilizzo di container, grid system, breakpoints e utility classes per costruire layout responsive
  • Tipografia e colori: gestione di testi, palette cromatiche e temi personalizzati
  • Componenti principali: uso pratico di Navbar, Accordion, Carousel, Collapse, Modal, Tabs, Buttons, Cards, Forms e altri elementi interattivi
  • Utility avanzate: gestione di Flexbox, spaziature, allineamenti e visibilità sui diversi dispositivi
  • Interattività: attivazione dei componenti dinamici tramite Bootstrap JavaScript

• Javascript e DOM

  36 ore

  • Concetti fondamentali: differenze tra linguaggi lato client e lato server e panoramica sul funzionamento di JavaScript
  • Cos’è JavaScript: finalità, ambiti di applicazione e utilizzo nel web development
  • Sintassi di base: regole per scrivere e interpretare correttamente il codice JavaScript
  • Elementi principali del linguaggio: variabili, funzioni, oggetti, metodi, eventi, strutture condizionali e cicli
  • Integrazione con HTML5 e CSS3: come JavaScript interagisce con il DOM per modificare contenuti, stili e comportamenti della pagina
  • Programmazione a oggetti (OOP): principi base della programmazione orientata agli oggetti in JavaScript, gestione di proprietà e metodi
  • Introduzione al DOM: cos’è, come si relaziona all’HTML e come rappresenta la pagina come struttura ad albero
  • Selezione degli elementi: utilizzo dei principali metodi JavaScript (getElementById, querySelector, querySelectorAll, ecc.) e differenze tra le varie tecniche
  • Manipolazione dei contenuti e attributi: modifica di testo, valori, attributi e gestione dinamica degli elementi HTML
  • Gestione di classi e stili: uso di classList e modifiche CSS tramite JavaScript nel rispetto delle best practice
  • Creazione e rimozione di elementi: aggiunta, sostituzione o eliminazione dinamica di nodi all’interno della pagina
  • Eventi e interattività: comprensione del modello degli eventi, uso di addEventListener(), gestione dei principali eventi del browser e dell’oggetto event
  • Event delegation: ottimizzazione della gestione degli eventi attraverso bubbling e capturing

• Progettazione web e Figma

  32 ore

  • Approccio alla progettazione web
  • Interazione con il committente del progetto: individuazione della tipologia di prodotto e del target di riferimento
  • Studio della concorrenza attraverso l’analisi dei “Best in class” del settore
  • Nozioni di base di UI/UX design
  • Organizzazione dei contenuti e della mappatura del prodotto web Introduzione a Figma: cos’è, vantaggi e panoramica dell’interfaccia
  • Elementi fondamentali: frame, componenti, livelli, pagine e scorciatoie principali
  • Struttura e layout: differenze tra frame e artboard, uso dell’auto-layout, gestione di grid e layout responsive
  • Progettazione efficiente: allineamento, spacing, creazione di componenti riutilizzabili, varianti e design system base (colori, testi, effetti)
  • Collaborazione e gestione: librerie condivise, token di design, versioni, commenti e co-design in tempo reale
  • Prototipazione interattiva: creazione di interazioni, animazioni e transizioni (smart animate, overlay, scorrimento, aree cliccabili)
  • Condivisione e permessi: pubblicazione e gestione dell’accesso ai progetti

• HTML 5

  16 ore

  • Sintassi e struttura dell’HTML5: analisi dei principali elementi di markup (tag) e delle regole di base per costruire una pagina web corretta e semantica
  • Organizzazione del contenuto: creazione della struttura base di una pagina HTML5 e utilizzo dei tag per la formattazione del testo e degli altri elementi visivi
  • Attributi e SEO: impostazione dei tag e attributi utili all’indicizzazione sui motori di ricerca (SEO), come meta tag, title e alt text
  • Identificazione e stile degli elementi: uso corretto degli attributi ID e class per la gestione del layout e l’integrazione con i fogli di stile CSS
  • Creazione di moduli interattivi: progettazione e formattazione di form per la raccolta dati (richiesta, contatto, ricerca), con tecniche di validazione e invio del contenuto.ricerca), validazione e invio del contenuto

• CSS

  24 ore

  • Introduzione agli stili: cosa sono e come definire gli stili in un progetto web
  • Selettori e attributi: utilizzo degli attributi ID e class per identificare e personalizzare gli elementi HTML
  • Tipologie di stili: inline, interni ed esterni — quando e come applicarli correttamente
  • Gestione dei caratteri: uso delle font nei CSS3 e integrazione con Google Fonts
  • Applicazione degli stili: collegamento e assegnazione dei fogli di stile a una pagina HTML5
  • Il box model: gestione di spaziature, opacità, trasparenze, sfumature, bordi, ombre e trasformazioni (rotazione, inclinazione, distorsione)
  • Web design responsive: principi fondamentali, viewport e gestione dei codici per l’adattabilità su diversi dispositivi
  • Layout flessibili: utilizzo di Flexbox per la distribuzione degli elementi e CSS Grid per la creazione di strutture complesse e modulari
  • Ottimizzazione per mobile: uso delle media queries per rendere un sito completamente responsive e compatibile con tutti i dispositivi
  • Animazioni e transizioni: creazione di effetti dinamici con CSS3

• Php e MySql

  64 ore

  • Cos’è la programmazione Server Side
  • Differenze tra siti statici e siti dinamici
  • Panoramica sui linguaggi del web dinamico: PHP
  • Pianificare un progetto dinamico in PHP
  • Installare e configurare un server locale (MAMP/XAMPP)
  • Struttura di un file PHP e integrazione nel codice HTML
  • Variabili, operatori ed espressioni
  • Strutture di controllo: condizioni e cicli
  • Funzioni e inclusioni di file per strutturare il progetto
  • Creazione del template di base
  • Introduzione alla Programmazione Orientata agli Oggetti (OOP): oggetti e classi
  • Gestione delle sessioni e delle aree riservate
  • Cos’è un database e come funziona
  • Progettazione e creazione di un database
  • Gestione con phpMyAdmin
  • Linguaggio SQL: query di lettura, inserimento, modifica ed eliminazione
  • Relazioni tra tabelle e campi
  • Connessione PHP ↔ MySQL e lettura dei dati
  • Popolare, importare, esportare database
  • Creare pagine dinamiche collegate ai dati
  • Inserire, modificare ed eliminare contenuti dal database
  • Inviare form strutturati dal sito (metodo POST)
  • Gestire le pagine di amministrazione e contenuti
  • Come pubblicare un sito dinamico online
  • Pubblicare e configurare il database MySQL

• Wordpress e Woocommerce

  38 ore

  • Installazione e configurazione di WordPress in locale
  • Configurazione delle impostazioni di base
  • Struttura del sito e gestione dei contenuti
  • Differenza tra articoli (post) e pagine
  • Creazione e organizzazione di contenuti: categorie, tag e menu
  • Gestione del blog e dei commenti
  • Impostazioni di lettura, scrittura, permalink e media
  • Gestione degli utenti, ruoli e permessi
  • Utilizzo e configurazione dei principali plugin
  • Aspetto e temi grafici: scelta, installazione e personalizzazione dei temi
  • Personalizzazioni avanzate con CSS3, JavaScript e PHP
  • Creazione di child theme per modifiche sicure e aggiornabili
  • Plugin essenziali per sicurezza, SEO e prestazioni
  • Backup e aggiornamenti
  • Gestione di errori e ottimizzazione del sito
  • Introduzione a WooCommerce
  • Installazione e configurazione del plugin
  • Creazione e gestione del catalogo prodotti
  • Impostazione di categorie, attributi e varianti
  • Configurazione di pagamenti, spedizioni e tasse
  • Gestione di ordini, clienti e coupon
  • Personalizzazione grafica del negozio e ottimizzazione UX
  • Impostazioni avanzate e manutenzione
  • Traduzioni, email automatiche e gestione delle notifiche
  • Analisi e monitoraggio delle vendite
  • Trasferimento da locale a remoto (hosting e dominio)
  • Messa online del sito e-commerce completo, test di funzionamento

• Accessibilità Web (Web Accessibility)

  24 ore

  • Definizione di A11Y
  • Disabilità permanenti, temporanee e situazionali
  • Dati e normative (WCAG, EN 301 549, AGID, ADA)
  • Accessibilità ≠ usabilità: differenze e punti di contatto
  • I 4 principi: Percepibile, Utilizzabile, Comprensibile, Robusto (POUR)
  • Struttura delle WCAG (livelli A, AA, AAA)
  • Linee guida chiave per web e mobile Introduzione alle checklist operative
  • Contrasti e colori: linee guida e test
  • Tipografia, spaziatura, gerarchia visiva
  • Focus state, hover, e affordance visiva ovvero la capacità di un elemento di suggerire visivamente come va usato
  • Design di icone e simboli accessibili
  • Test di leggibilità e strumenti (Contrast Checker, Stark, etc.)
  • Struttura semantica HTML (header, main, nav, footer, aria-label)
  • Focus e navigazione da tastiera (tabindex, focus-visible)
  • Uso corretto dei form e delle label
  • ARIA: cosa è e quando usarla (e quando non usarla)
  • Validatori automatici (Lighthouse, axe DevTools, WAVE)
  • Test manuali con tastiera e screen reader (NVDA/VoiceOver)
  • Analisi contrasto e struttura semantica
  • Come scrivere un Accessibility Report di base
  • Come integrare l’A11Y nel workflow di design e sviluppo
  • Checklist e risorse per continuare a migliorare
  • Certificazioni e ruoli (es. CPACC, WAS, CPWA)

• Sicurezza sui luoghi di lavoro

  8 ore

  SICUREZZA GENERALE DEI LAVORATORI

  • Concetto di rischio
  • Concetto di danno
  • Concetto di prevenzione
  • Concetto di protezione
  • Organizzazione della prevenzione aziendale
  • Diritti, doveri e sanzioni per i vari soggetti aziendali
  • Organi di vigilanza, controllo e assistenza

  SICUREZZA SPECIFICA RISCHIO BASSO

  • Rischi specifici legati all'attività lavorativa
  • DPI
  • Movimentazione manuale dei carichi
  • Utilizzo scale portatili
  • Rischio chimico
  • Tutela delle lavoratrici madri
  • Incidenti stradali
  • Near miss
  • Utilizzo di videoterminali
  • Stress lavoro-correlazione
  • Gestione delle emergenze