Étape 1 : Initialisation du Générateur de Bulles

Pour ce projet, nous allons créer une animation relaxante : des bulles qui montent doucement vers le ciel. Le thème imposé est Clair (Light Mode).

1. Création du dossier

Créez un dossier bubble-generator et les fichiers habituels :

1. index.html
2. style.css
3. script.js

2. Structure HTML de base

Ouvrez index.html. La structure sera extrêmement simple. Nous n’avons besoin que d’un conteneur qui occupera tout l’écran, et d’une petite zone de contrôles (optionnelle).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Générateur de Bulles</title>
        <!-- Police douce et ronde pour aller avec les bulles -->
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <!-- Ce conteneur va recevoir toutes nos bulles générées en JS -->
        <div id="bubble-container"></div>

        <!-- Un petit titre discret -->
        <div class="overlay">
            <h1>Bubble Generator</h1>
            <p>Cliquez n'importe où pour créer des bulles manuellement !</p>
        </div>

        <script src="script.js"></script>
    </body>
</html>

Contrairement aux autres projets, ici le “contenu” principal sera généré à 100% par le code. Le HTML sert juste de toile de fond.