Cours Interactif

Crée ton premier site interactif

Bienvenue dans ce cours d'introduction au développement web. Nous allons construire une application complète en étapes progressives.

1. HTML

HyperText Markup Language : Le squelette. Il définit la structure et le contenu de la page (titres, paragraphes, images).

2. CSS

Cascading Style Sheets : L'habillage. Il permet de mettre en forme le contenu (couleurs, polices, disposition).

3. JavaScript

Le cerveau : C'est le langage de programmation qui rend la page interactive (clics, calculs, animations).

Objectif : Comprendre comment ces trois langages travaillent ensemble pour créer une expérience utilisateur moderne.

Mode d'emploi : Apprends en modifiant le code directement sur cette page. Écris ton code dans la zone noire, puis clique sur le bouton bleu "▶ Exécuter" pour voir le résultat.

🐣 Étape 0 : Le Strict Minimum

Pour commencer, voici la structure minimale d'une page HTML.

<!DOCTYPE html>
<html>
<body>
    <h1>Hello World !</h1>
    <p>Change ce texte et clique sur Exécuter !</p>
</body>
</html>

Résultat :

🏗️ Étape 1 : Le Squelette Structuré

Ajoutons des boutons et des champs de saisie.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Structure</title>
</head>
<body>
    <header>
        <h1>Mon Site</h1>
    </header>
    <section>
        <label>Ton prénom :</label>
        <input type="text" id="monInput" placeholder="...">
        <button>Clique ici</button>
    </section>
    <footer>
        <p>Pied de page</p>
    </footer>
</body>
</html>

🧠 Étape 2 : L'Intelligence (JS)

Rendons le bouton vivant avec du JavaScript interne.

<!DOCTYPE html>
<html>
<body>
    <h1>Test JS</h1>
    <input type="text" id="monInput" placeholder="Ton nom">
    <button id="monBouton">Saluer</button>
    <div id="zoneResultat" style="margin-top:10px; color:blue;"></div>

    <script>
        const btn = document.getElementById('monBouton');
        const input = document.getElementById('monInput');
        const zone = document.getElementById('zoneResultat');

        btn.addEventListener('click', function () {
            let nom = input.value;
            if (nom) {
                zone.innerHTML = "Bonjour <b>" + nom + "</b> !";
            } else {
                alert("Écris un nom !");
            }
        });
    </script>
</body>
</html>

📁 Étape 3 : JS Externe (Multi-fichiers)

Ici, nous simulons deux fichiers. Clique sur les onglets pour passer du HTML au JavaScript.

<!DOCTYPE html>
<html>
<body>
    <h1>Fichiers Séparés 📁</h1>
    <input type="text" id="inp3" placeholder="Nom...">
    <button id="btn3">Valider</button>
    <p id="res3"></p>
    
    <!-- Le script est lié ici, mais nous le simulons dans l'onglet JS -->
    <script src="script.js"></script>
</body>
</html>

🎨 Étape 4 : Le Design Artisanal (CSS Interne)

Maintenant que le code est bien rangé, occupons-nous du style. Le site est fonctionnel mais brut. Pour cette étape, nous allons écrire du CSS dans l'entête du fichier HTML pour comprendre comment cela fonctionne.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Étape 4 : CSS Classique</title>
    <!-- CSS ÉCRIT À LA MAIN DANS LE FICHIER HTML -->
    <style>
        /* Style général de la page */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        /* La carte blanche au centre */
        .carte {
            background-color: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            width: 350px;
            text-align: center;
        }

        /* Les champs et boutons */
        input {
            width: 80%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
            font-size: 16px;
            transition: background 0.3s;
        }

        button:hover {
            background-color: #0056b3;
        }

        .resultat-box {
            margin-top: 20px;
            font-weight: bold;
            color: #28a745;
        }
    </style>
</head>
<body>
    <main class="carte">
        <header>
            <h1 style="margin-top:0;">Hello World ! 🎨</h1>
            <p style="color: #666;">Design CSS Interne + JS Externe</p>
        </header>
        <section>
            <label style="display:block; text-align:left; margin-bottom:5px;">Ton prénom :</label>
            <input type="text" id="monInput" placeholder="Écris ici...">
            <button id="monBouton">Lancer le script</button>
            <div id="zoneResultat" class="resultat-box"></div>
        </section>
        <footer style="margin-top: 20px; font-size: 12px; color: #999;">
            <p>CSS Interne</p>
        </footer>
    </main>

    <!-- Lien vers notre script externe créé à l'étape précédente -->
    <script src="script.js"></script>
</body>
</html>

🎨 Étape 5 : HTML + CSS + JS Séparés

Le Saint Graal du développeur web. 3 onglets pour tout gérer.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="carte">
        <h1>Projet Complet</h1>
        <p>Modifie le CSS pour changer la couleur !</p>
        <input type="text" id="inp5" placeholder="Ton nom">
        <button id="btn5">Go !</button>
        <div id="res5"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

🚀 Étape 6 : Tailwind CSS

On importe Tailwind via un lien CDN et on utilise les classes directement.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 p-8 flex justify-center">

    <div class="bg-white p-6 rounded-xl shadow-lg w-full max-w-sm border-t-4 border-indigo-500">
        <h1 class="text-2xl font-bold text-slate-800 text-center mb-4">Hello Tailwind</h1>
        
        <div class="space-y-3">
            <input id="inp6" type="text" placeholder="Ton nom..." 
                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none">
                
            <button id="btn6" 
                class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 rounded-lg transition">
                Valider
            </button>
            
            <div id="res6" class="hidden p-3 bg-green-100 text-green-700 rounded-lg text-center font-bold"></div>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

🤖 Étape 7 : Le Prompt Engineering

Copie ce prompt pour générer du code similaire avec une IA.

Agis comme un **Développeur Front-End Senior** expert en standards web modernes (2026).

**Objectif :**
Crée une carte interactive simple 'Hello World' qui demande le prénom de l'utilisateur.

**Stack Technique :**
1. **HTML5 Sémantique** (Accessible).
2. **Tailwind CSS** (via CDN).
3. **Vanilla JS (ES6+)**.

**Fonctionnalités requises :**
* Un champ input et un bouton 'Valider'.
* Validation : Erreur visuelle si vide.
* Succès : Affiche 'Bonjour [Prénom]'.
* **Séparation** : Fournis index.html et script.js séparés.

**Design** :
* Minimaliste, coins arrondis, ombres douces.
* Typographie lisible (Inter).