Analogia: Inquadramento, muri, stanze ed etichette di una casa.

2. CSS — La Pelle (Presentazione e Layout)

Cascading Style Sheets definisce come appare il contenuto.

• Proprietà: `color`, `font-family`, `font-size`, `background`, `margin`, `padding`, `border`, `display` (flex, grid, block).
• Selettori: Target elementi per tag (`p`), classe (`.button`), ID (`#hero`), attributo (`[type="submit"]`), stato (`:hover`, `:focus`).
• Responsive Design: Media queries (`@media (max-width: 768px)`) adattano layout per mobile/desktop.
• Animazioni: `@keyframes`, `transition`, `transform`.

Analogia: Vernice, carta da parati, disposizione mobili, illuminazione—identità visiva.

3. JavaScript — I Muscoli (Comportamento e Interattività)

JS rende la pagina capace di fare cose.

• Manipolazione DOM: Crea, modifica, elimina elementi HTML dinamicamente (`document.createElement`, `element.classList.toggle`).
• Gestione Eventi: Risponde a click, scroll, tocchi, touch (`addEventListener('click', ...)`).
• Operazioni Async: Recupera dati da API (`fetch()`, `async/await`), aggiorna UI senza ricarica (AJAX/SPA).
• Logica e Stato: Variabili, cicli, condizionali, moduli, framework (React, Vue, Svelte).

Analogia: Elettricità, idraulica, sistemi smart-home—rendere la casa funzionale.

Come Lavorano Insieme

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> <!-- CSS --> </head> <body> <button id="btn" class="primary">Click Me</button> <!-- HTML --> <script src="app.js"></script> <!-- JS --> </body> </html> 

Il browser analizza HTML → costruisce DOM → applica CSS → esegue JS. JS può poi modificare DOM/CSS in tempo reale.

Aggiunte Moderne

• WebAssembly (Wasm): Esegui C++/Rust/Go nel browser a velocità quasi nativa.
• Web Components: Elementi HTML personalizzati riutilizzabili (``).
• Progressive Web Apps (PWA): Offline, installabili, notifiche push tramite Service Worker (JS).

Padroneggiare il trio—HTML semantico, CSS moderno (Grid/Flex/Container Queries) e fondamentali JS vanilla—è il fondamento di tutto lo sviluppo web.