Étape 2 : Structure HTML de base et En-tête

Nous allons maintenant construire l’interface utilisateur. Nous commencerons par le conteneur principal et l’en-tête de l’application.

1. Le Conteneur Principal

Pour centrer notre application et lui donner un aspect “carte” (card UI), nous allons tout envelopper dans une div avec la classe app-container.

Dans index.html, à l’intérieur de la balise <body>, ajoutez ceci :

<body>
    <div class="app-container">
        <!-- Tout le contenu de l'application sera ici -->
    </div>

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

2. Ajout de l’En-tête (Header)

Nous allons ajouter un titre et un sous-titre pour présenter l’application.

Ajoutez le code suivant à l’intérieur de <div class="app-container"> :

<header class="app-header">
    <h1>TaskMaster <span class="accent">Pro</span></h1>
    <p class="subtitle">Gérez vos tâches avec élégance</p>
</header>

Explication

• <header class="app-header"> : Utilisation sémantique de la balise <header> pour définir l’intro de notre composant.
• <span class="accent">Pro</span> : Nous entourons le mot “Pro” d’un <span> avec une classe spécifique. Cela nous permettra en CSS de lui donner une couleur différente (par exemple, la couleur primaire de notre thème) pour le faire ressortir.
• <p class="subtitle"> : Un petit texte descriptif pour ajouter du contexte.

---

À ce stade, votre fichier index.html (partie body) ressemble à ceci :

<body>
    <div class="app-container">
        <header class="app-header">
            <h1>TaskMaster <span class="accent">Pro</span></h1>
            <p class="subtitle">Gérez vos tâches avec élégance</p>
        </header>
    </div>

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