Créer ta page web personnelle avec Claude Code

1. À la fin de cette leçon, tu sauras

Écrire une fiche projet pour une page web d’une seule page.
Faire construire cette page par Claude Code, en mode plan, par petites étapes.
Ouvrir le fichier dans ton navigateur et juger le résultat.
Demander des corrections précises, une à la fois.

2. Pourquoi ça t’intéresse

Fatou anime un atelier de couture solidaire le samedi matin. Les gens lui demandent sans cesse les horaires, l’adresse et ce qu’il faut apporter. Elle répond au cas par cas, par message. Une page web simple, avec ces trois informations et une photo, réglerait la question : un lien à partager, et c’est fini. Elle n’a jamais écrit une ligne de code, et elle n’en a pas besoin pour décrire ce qu’elle veut.

3. Avant de commencer


Il te faut	Claude Code installé (module 5), un dossier vide pour le projet, les textes de ta page (même en brouillon)
Coût	Rien de plus que ton abonnement
Durée	45 à 60 minutes

4. Comprendre en 3 minutes

Une page web, c’est un fichier texte écrit en HTML que ton navigateur sait afficher. Tu n’as pas besoin de lire ce langage : tu décris, l’agent écrit, tu regardes le résultat.

Image mentale : une affiche. Le HTML pose le texte et les images à leur place, le CSS (une autre partie du fichier) choisit les couleurs, les tailles et la mise en page. Une page d’une seule page, c’est une seule affiche, sans menus vers d’autres pages.

Mot	Ce que ça veut dire
HTML	Le contenu et sa structure : titres, paragraphes, images, liens.
CSS	L’apparence : couleurs, polices, espacements.
index.html	Le nom habituel du fichier principal d’un site.
Navigateur	Le logiciel qui affiche les pages (celui que tu utilises tous les jours).

On reste volontairement sur un seul fichier, sans outil à installer. C’est la version la plus simple qui marche, et la plus facile à publier ensuite.

La méthode de la formation s’applique telle quelle : tu dis ce que tu veux dans la fiche, tu discutes le plan avec l’agent, il fait par petites étapes, tu vérifies dans le navigateur, tu notes tes choix.

5. Faire ensemble

Étape 1 · Écrire la fiche projet

Dans un nouveau dossier (par exemple ma-page), crée un fichier fiche-projet.md :

# Fiche projet : ma page

Pour qui : [les personnes qui vont la lire]
But : [ce qu'elles doivent savoir ou faire après l'avoir lue]
Contenu, dans l'ordre :
- Titre :
- Présentation (3 à 5 phrases) :
- Informations pratiques :
- Contact (moyen public uniquement) :
Ambiance : [sobre, chaleureuse, colorée…] ; couleurs souhaitées si tu en as.
Contraintes : une seule page, un seul fichier index.html, lisible sur téléphone,
aucune donnée personnelle que je ne veux pas rendre publique.

Remplis-la avec tes vrais textes. Pas de numéro de téléphone personnel ni d’adresse privée si tu n’es pas sûr de vouloir les montrer.

Étape 2 · Discuter le plan

Lance claude dans ce dossier, passe en mode plan (Maj+Tab jusqu’au mode plan), puis :

Lis fiche-projet.md. Propose-moi un plan pour créer une page web
d'une seule page, dans un seul fichier index.html, avec le style dans le même fichier.
Découpe en 3 étapes courtes. Pose-moi tes questions avant de commencer.

Réponds aux questions, ajuste le plan, puis valide-le.

Étape 3 · Construire par petites étapes

Laisse l’agent faire la première étape (la structure et les textes).
Ouvre index.html dans ton navigateur : double-clic sur le fichier, ou glisse-le dans une fenêtre du navigateur.
Regarde. Puis passe à l’étape suivante (l’apparence), et ainsi de suite.

Étape 4 · Corriger une chose à la fois

Pour chaque défaut, une demande précise :

Le titre est trop petit sur mon écran. Agrandis-le, sans rien changer d'autre.

Après chaque modification, recharge la page dans le navigateur.

6. Faire toi-même

Crée ta propre page : présentation de toi (activité, compétences, contact public) ou de ton association, ton club, ton projet. Pars d’une fiche projet remplie avec tes textes réels. Fais au moins trois allers-retours « je regarde, je demande une correction précise ».

Résultat attendu : un dossier contenant fiche-projet.md et index.html, qui s’ouvre dans ton navigateur et que tu serais prêt à montrer à quelqu’un.

7. Vérifier

Ma page s’ouvre dans le navigateur en double-cliquant sur index.html.
Tout le contenu prévu dans la fiche est présent, dans l’ordre voulu.
Il n’y a aucun texte de remplissage (faux latin, « votre texte ici »).
Rien de personnel n’apparaît que je ne veux pas rendre public.
En réduisant la fenêtre du navigateur, la page reste lisible.
J’ai noté dans mon carnet les corrections demandées qui ont bien marché.

8. Ce que tu gardes

Garde ta fiche projet : c’est le modèle de toutes tes futures pages. Dans ton carnet de bord, note les formulations de correction efficaces (« sans rien changer d’autre » en fait partie) et crée un fichier idees.md pour tout ce que tu as eu envie d’ajouter mais que tu as remis à plus tard.

9. Pour aller plus loin

Pour comprendre ce que l’agent a écrit, parcours les bases du HTML sur developer.mozilla.org (rubrique d’apprentissage, en français).
Demande à l’agent : « Explique-moi en dix lignes comment est organisé index.html. » Comprendre un peu, c’est mieux vérifier.