Étape 1 : Initialisation et Structure du Projet

Dans cette première étape, nous allons mettre en place la structure de base de notre projet “TaskMaster Pro”. L’objectif est de préparer l’environnement de travail avec les fichiers nécessaires.

1. Création du dossier du projet

Créez un nouveau dossier sur votre ordinateur, par exemple nommé todo-app. À l’intérieur de ce dossier, nous allons créer trois fichiers vides qui constitueront le cœur de notre application.

2. Création des fichiers

Créez les fichiers suivants :

1. index.html : Ce sera la structure de notre page web (le squelette).
2. style.css : Ce fichier contiendra tous les styles pour rendre notre application belle (l’habillage).
3. script.js : Ce fichier contiendra la logique et l’interactivité de l’application (le cerveau).

3. Structure initiale du fichier HTML

Ouvrez le fichier index.html et ajoutez la structure HTML5 de base. Nous allons inclure la police “Inter” depuis Google Fonts pour un look moderne et lier nos fichiers CSS et JS.

Fichier : index.html

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>TaskMaster Pro</title>
        <!-- Importation de la police Inter depuis Google Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
        <!-- Lien vers notre feuille de style personnalisée -->
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <!-- Le contenu de l'application ira ici -->

        <!-- Lien vers notre script JavaScript (à la fin du body pour ne pas bloquer le chargement) -->
        <script src="script.js"></script>
    </body>
</html>

Explication des balises

• <!DOCTYPE html> : Indique au navigateur qu’il s’agit d’un document HTML5 moderne.
• <meta name="viewport" ...> : Essentiel pour que l’application s’affiche correctement sur les mobiles (responsive).
• <link href="...fonts..."> : Nous chargeons la police “Inter” avec différentes graisses (300 à 700) pour avoir de la flexibilité dans le design.
• <link rel="stylesheet" href="style.css"> : Connecte notre fichier CSS au HTML.
• <script src="script.js"></script> : Connecte notre fichier JS. Placé juste avant la fermeture de </body> pour s’assurer que tout le HTML est chargé avant d’exécuter le script.

---

Rendu actuel : Si vous ouvrez index.html dans un navigateur, vous aurez une page blanche. C’est normal, nous n’avons pas encore ajouté de contenu visible !