Aller au contenu
Version de test La formation s'écrit au fur et à mesure : tes retours comptent.
Autivia Formation

Étape 10 · Créer une page web et un petit outil

Faire évoluer ta page ou ton outil sans tout casser

  • 30 à 45 min
  • 0 € de plus (abonnement de l'agent déjà en place)
  • Leçon 5 sur 7
  • Relue le 26 octobre 2026
Suivre cette leçon avec le compagnon dans Claude Code
/formation-ia:suivre m10-l05

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

  • Demander une seule amélioration à la fois, et la vérifier avant la suivante.
  • Garder des points de sauvegarde pour revenir en arrière en cas de problème.
  • Tenir un fichier idees.md pour trier tes envies d’amélioration.
  • Tenir un changelog simple : ce qui a changé, quand, pourquoi.

2. Pourquoi ça t’intéresse

Pierre a demandé d’un coup à l’agent : « ajoute une galerie photo, change les couleurs et mets un formulaire de contact ». Résultat : une page jolie, mais dont le titre avait disparu sur téléphone. Impossible de savoir lequel des trois changements en était la cause, et l’ancienne version n’existait plus. Il a tout recommencé. Faire évoluer un projet, c’est comme monter un escalier : une marche à la fois, et on vérifie qu’on tient debout avant de lever l’autre pied.

3. Avant de commencer

Il te fautTa page ou ton outil des leçons précédentes, sa fiche, le fichier idees.md créé en leçon 1
CoûtRien de plus
Durée30 à 45 minutes, puis à chaque évolution

4. Comprendre en 3 minutes

Un changement à la fois, une vérification après chaque changement, un point de sauvegarde avant chaque risque, et une ligne dans l’historique quand c’est fait.

Image mentale : un jeu vidéo avec des points de sauvegarde. Avant le passage difficile, tu sauvegardes. Si tu tombes, tu repars de là, pas du début.

Trois façons de garder un point de sauvegarde, de la plus simple à la plus solide :

MéthodeEn pratique
Revenir en arrière dans Claude CodeÉchap deux fois permet de revenir à un moment antérieur de la conversation. Pratique tout de suite après une modification ratée ; consulte code.claude.com/docs pour savoir précisément ce qui est restauré.
Copie datée du dossierAvant un gros changement, tu copies le dossier et tu le renommes avec la date. Rustique, mais impossible à rater.
GitUn outil qui enregistre l’historique de chaque version. Tu peux demander à l’agent de le mettre en place et d’enregistrer une version après chaque étape réussie, en t’expliquant ce qu’il fait.

Et deux fichiers texte très simples :

  • idees.md : tout ce que tu as envie d’ajouter, en vrac. C’est une salle d’attente, pas une liste de choses à faire.
  • CHANGELOG.md : l’historique, du plus récent au plus ancien. Une ligne par changement : date, ce qui a changé, pourquoi.

5. Faire ensemble

Étape 1 · Trier les idées

  1. Ouvre idees.md et complète-le avec tout ce qui te vient.
  2. Lance claude dans le dossier du projet :
Lis idees.md et la fiche du projet. Ne modifie rien.
Classe chaque idée : utile pour mes visiteurs, utile pour moi, gadget.
Pour les idées utiles, estime si le changement est petit ou gros,
et signale celles qui risquent de casser quelque chose d'existant.
  1. Choisis une seule idée, petite et utile.

Étape 2 · Poser un point de sauvegarde

Choisis ta méthode : copie datée du dossier, ou demande à l’agent :

Je voudrais garder l'historique de mon projet avec Git.
Explique-moi en quelques lignes ce que ça fait, puis mets-le en place
et enregistre la version actuelle avec le message « Version stable avant [idée] ».
Demande-moi la permission avant chaque commande.

Étape 3 · Faire le changement, et seulement lui

Ajoute uniquement ceci : [ton idée, décrite précisément].
Ne change rien d'autre. Dis-moi ensuite quels passages tu as modifiés.

Ouvre la page, repasse tes cas de test et ta vérification sur téléphone (leçon 4).

Étape 4 · Garder ou revenir

  1. Si tout va bien : enregistre un nouveau point de sauvegarde.
  2. Si quelque chose casse et que la correction n’est pas évidente : reviens au point de sauvegarde, et note dans idees.md ce que tu as appris.

Étape 5 · Écrire le changelog

Ajoute une ligne en haut de CHANGELOG.md :

## 2026-10-26
- Ajout : [ce qui a changé], pour [la raison].

Si la page est en ligne, republie-la en suivant la documentation de ton hébergeur, puis vérifie sur téléphone.

6. Faire toi-même

Réalise deux évolutions successives de ton projet, chacune avec le cycle complet : choix dans idees.md, point de sauvegarde, changement unique, tests, ligne dans le changelog. Entraîne-toi au moins une fois à revenir à un point de sauvegarde, même si tout allait bien, pour savoir le faire le jour où tu en auras besoin.

Résultat attendu : un idees.md trié, un CHANGELOG.md avec deux entrées, au moins deux points de sauvegarde, et un projet qui marche toujours.

7. Vérifier

  • Chaque demande à l’agent portait sur une seule amélioration.
  • J’avais un point de sauvegarde avant chaque changement.
  • J’ai réussi au moins une fois à revenir à une version précédente.
  • Après chaque changement, mes cas de test et la vérification téléphone sont passés.
  • Mon CHANGELOG.md contient deux entrées datées, avec leur raison.
  • Les idées non retenues sont toujours dans idees.md, pas oubliées.

8. Ce que tu gardes

Dans ton carnet de bord, note le cycle : « une idée, une sauvegarde, un changement, un test, une ligne d’historique ». C’est la méthode Dire, Discuter, Faire, Vérifier, Noter, en version courte. Garde idees.md et CHANGELOG.md dans tous tes futurs projets, y compris le projet final.

9. Pour aller plus loin

  • Si tu publies avec GitHub Pages, Git te sert déjà : chaque version enregistrée peut devenir la version en ligne (voir pages.github.com).
  • Une fois par mois, relis ton idees.md et supprime ce qui ne t’intéresse plus : une liste trop longue décourage.

Vérifie ta compréhension

3 questions, sans note. L'explication s'affiche après ta réponse.

1Tu veux ajouter un mode sombre, un bouton de partage et un historique. Comment t'y prends-tu ?
2À quoi sert un point de sauvegarde ?
3Quelle est la différence entre le fichier « idées » et le changelog ?

Pour vérifier par toi-même : code.claude.com, pages.github.com

Fin de la leçon