Corso di Responsive Web Design e Sviluppo Front-End

Modulo 1: Web Design Cos’è il Web Design: panoramica storica ed evoluzione Differenza tra design statico e design dinamico Panoramica del front-end e del back-end Importanza dell’esperienza utente (UX) e dell’interfaccia utente (UI) Modulo 2: Principi di Base del Responsive Web Design Cos’è il Responsive Web Design (RWD) I 3 principi fondamentali del RWD: fluid grids, flexible media, media queries Importanza della compatibilità cross-browser Differenza tra design reattivo, adattivo e mobile-first Modulo 3: Strumenti e Tecniche di Layout in HTML e CSS Fondamenti di HTML e CSS per il layout di una pagina web Creazione di layout con HTML5 e CSS3 Box model e gestione degli spazi (padding, margin, border) Tecniche di layout: float, inline-block, display grid, flexbox Modulo 4: Flexbox: Il Layout Responsive Cos'è il Flexbox e come funziona Flex container e flex items Proprietà principali di Flexbox: justify-content, align-items, flex-grow, flex-shrink Creazione di layout complessi con Flexbox Modulo 5: CSS Grid Layout Cos’è il CSS Grid e come si differenzia dal Flexbox Creazione di griglie a due dimensioni: righe e colonne Progettare layout avanzati con CSS Grid Responsività e adattamento della griglia su dispositivi diversi Modulo 6: Media Queries per la Responsività le media queries in CSS Scrittura di regole CSS per schermi di diverse dimensioni Utilizzo di breakpoints e approccio mobile-first Gestione di layout e stile per tablet, smartphone e desktop Modulo 7: Ottimizzazione delle Immagini per il Web Formati di immagine comuni (JPG, PNG, SVG, WebP) Compressione e ottimizzazione delle immagini per migliorare le performance Immagini responsive con l’attributo srcset in HTML Caricamento differito (lazy loading) per immagini e media Modulo 8: Typography nel Responsive Web Design Fondamenti della tipografia nel design per il web Scelta di font adatti e accessibili (Google Fonts, Typekit) Gestire la tipografia su schermi di diverse dimensioni Tecniche per migliorare la leggibilità sui dispositivi mobili Modulo 9: Design Mobile-First Filosofia e principi del design mobile-first Adattamento del design a dispositivi mobili prima di desktop Come scrivere il CSS mobile-first Vantaggi e svantaggi di questo approccio Modulo 10: Componenti e UI Design Responsivi Creazione di componenti UI modulari (bottoni, form, menu di navigazione) Uso di frameworks CSS per componenti responsivi (Bootstrap, Foundation) Adattamento di componenti UI per schermi di diverse dimensioni Gestire la navigazione: menu a discesa, hamburger menu, barra laterale Modulo 11: Frameworks CSS per il Responsive Web Design Introduzione ai principali frameworks CSS: Bootstrap, Foundation, Bulma Vantaggi e svantaggi nell’utilizzo di un framework Personalizzazione e utilizzo di framework per creare un design responsivo Costruire layout complessi con Bootstrap e Grid System Modulo 12: Animazioni e Transizioni CSS nel Web Design Concetti base di animazioni e transizioni in CSS Come implementare animazioni per migliorare l’interattività Tecniche per la gestione delle performance durante l'uso di animazioni Applicare animazioni e transizioni ai componenti responsivi Modulo 13: Accessibilità (A11y) nel Web Design Responsivo Principi di accessibilità nel design web Creare siti web inclusivi per utenti con disabilità Uso corretto dei tag semantici HTML Strumenti per il testing dell'accessibilità (screen reader, contrasto colori) Modulo 14: Performance e Ottimizzazione nel Responsive Web Design Tecniche per ottimizzare la performance di un sito web responsivo Ridurre il tempo di caricamento (minificazione CSS/JS, caching) Gestire le risorse per mobile (media queries, dimensioni ottimizzate) Best practices per l’ottimizzazione delle performance nei dispositivi mobili Modulo 15: Tendenze Future del Responsive Web Design Evoluzione delle tecniche di web design responsivo Nuove tecnologie e strumenti: CSS Grid 2, Flexbox avanzato, framework moderni Web Design progressivo: PWA (Progressive Web Apps) L’impatto della nuova generazione di dispositivi (foldable, 5G, AR/VR)