Analogie : Charpente, murs, pièces, et étiquettes d'une maison.

2. CSS — La Peau (Présentation et Mise en page)

Cascading Style Sheets définit à quoi ressemble le contenu.

• Propriétés : `color`, `font-family`, `font-size`, `background`, `margin`, `padding`, `border`, `display` (flex, grid, block).
• Sélecteurs : Ciblent éléments par balise (`p`), classe (`.bouton`), ID (`#hero`), attribut (`[type="submit"]`), état (`:hover`, `:focus`).
• Design Responsive : Requêtes média (`@media (max-width: 768px)`) adaptent mise en page mobile/desktop.
• Animations : `@keyframes`, `transition`, `transform`.

Analogie : Peinture, papier peint, arrangement meubles, éclairage — identité visuelle.

3. JavaScript — Les Muscles (Comportement et Interactivité)

JS fait agir la page.

• Manipulation DOM : Créer, modifier, supprimer éléments HTML dynamiquement (`document.createElement`, `element.classList.toggle`).
• Gestion événements : Réagir clics, défilement, frappes, toucher (`addEventListener('click', ...)`).
• Opérations Asynchrones : Récupérer données APIs (`fetch()`, `async/await`), maj UI sans rechargement (AJAX/SPA).
• Logique et État : Variables, boucles, conditions, modules, frameworks (React, Vue, Svelte).

Analogie : Électricité, plomberie, domotique — rendre la maison fonctionnelle.

Comment ils travaillent ensemble

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

Navigateur parse HTML → construit DOM → applique CSS → exécute JS. JS peut alors modifier DOM/CSS en direct.

Ajouts modernes

• WebAssembly (Wasm) : Exécute C++/Rust/Go dans navigateur vitesse quasi-native.
• Web Components : Éléments HTML personnalisés réutilisables (``).
• Progressive Web Apps (PWA) : Hors-ligne, installable, notifications push via Service Workers (JS).

Maîtriser le trio — HTML sémantique, CSS moderne (Grid/Flex/Container Queries), et fondamentaux JS vanilla — est le socle de tout développement web.