Vos premières modifications avec Codex

Introduction

Créer une application en partant d'un dossier vide est un exercice fascinant. Cependant, dans la réalité du développement, la majorité du temps est consacrée à modifier, améliorer et maintenir des projets existants.

Modifier du code que vous n'avez pas entièrement écrit (ou que vous avez oublié) peut générer une forte appréhension. L'idée de "tout casser" en rajoutant une virgule paralyse souvent les débutants.

Avec l'intelligence artificielle, cette peur doit disparaître. L'objectif de ce chapitre est de vous donner la confiance nécessaire pour altérer un projet en toute sécurité. Vous n'allez plus simplement poser des questions théoriques ; vous allez ordonner des modifications précises et observer la magie opérer sous vos yeux.

Comprendre comment Codex lit un projet

Avant d'effectuer des modifications, il est vital de comprendre le champ de vision de l'IA.

Lorsque vous lancez Codex dans votre terminal, il ne lit pas l'intégralité de votre disque dur. Son regard est strictement confiné au dossier de projet dans lequel il s'exécute. Imaginez un mécanicien automobile : avant de réparer une pièce, il doit ouvrir le capot du véhicule concerné. S'il ouvre le capot de la voiture d'à côté, il ne trouvera jamais votre panne.

Si vous demandez à Codex "Modifie la couleur du titre", il va parcourir les fichiers de ce dossier, trouver le fichier HTML ou CSS concerné, et proposer sa modification. Si vous êtes dans le mauvais dossier, il vous répondra poliment qu'il ne trouve aucun fichier de style.

Demander une modification simple

Commençons par les modifications les moins risquées : le texte et les couleurs de base.

Exemple 1 : Modifier un titre

Dans le fichier index.html, remplace le titre principal "Nos services" par "Nos expertises métiers".

Explication : Vous ciblez le fichier précis et donnez la valeur avant/après exacte.
Résultat attendu : Codex mettra à jour la balise H1 correspondante sans toucher au reste du site.

Exemple 2 : Changer une couleur

Modifie le CSS pour que tous les boutons d'alerte (.btn-alert) soient en rouge foncé au lieu de jaune.

Explication : Vous mentionnez la classe CSS spécifique plutôt qu'une consigne floue comme "les boutons dangereux".
Résultat attendu : Seuls les boutons dotés de cette classe changeront de couleur.

Exemple 3 : Ajouter une image

Ajoute la photo "hero-banner.jpg" juste au-dessus du titre principal de la page d'accueil. Centre-la.

Explication : L'emplacement ("au-dessus de") et le nom du fichier sont clairement établis.
Résultat attendu : Une nouvelle balise <img> est insérée au bon endroit avec une classe de centrage.

Demander une modification de style

Les ajustements visuels nécessitent une grande précision sémantique. Une "belle carte" n'est pas un concept informatique. Une "carte avec une ombre légère et des bords arrondis" en est un.

Augmenter les espacements : "Aère la section 'Contact' en ajoutant une marge intérieure (padding) de 40px en haut et en bas."
Arrondir les boutons : "Modifie la classe bouton globale pour que les angles soient parfaitement arrondis (effet pilule)."
Changer la police : "Remplace l'ancienne police par la police Google 'Inter' sur l'ensemble des titres H1, H2 et H3."
Créer un mode sombre : "Génère les règles CSS permettant d'inverser le fond en noir profond et le texte en gris clair lorsque la classe .dark est active sur le corps de page."
Ajouter une animation : "Fais en sorte que les cartes de produits remontent légèrement de 5 pixels et gagnent une ombre lorsqu'on les survole avec la souris."

Plus vous traduisez votre envie visuelle en propriétés physiques (taille, mouvement, couleur), plus la proposition de Codex sera proche de vos attentes.

Demander une nouvelle fonctionnalité

C'est ici que l'IA dévoile sa véritable force : la création de blocs complets.

Ajouter un formulaire de contact

Crée un formulaire de contact sémantique en HTML contenant un nom, un email obligatoire, et une zone de message de 5 lignes. Ajoute un bouton d'envoi.

Pourquoi il fonctionne : Les champs requis sont explicites.
Résultat attendu : Un code HTML complet et accessible prêt à être copié-collé.

Ajouter un menu responsive

Transforme le menu de navigation actuel pour qu'il se cache derrière une icône 'burger' sur les écrans de moins de 768px de large.

Pourquoi il fonctionne : La taille de l'écran (breakpoint) est définie techniquement.
Résultat attendu : L'ajout d'une règle "media query" CSS et éventuellement d'un script d'ouverture.

Bouton Retour en haut

Ajoute un bouton fixe en bas à droite de l'écran qui, lorsqu'on clique dessus, ramène l'utilisateur tout en haut de la page de manière fluide.

Pourquoi il fonctionne : L'emplacement (fixe, bas à droite) et le comportement (ramène en haut de manière fluide) sont détaillés.
Résultat attendu : Un bouton ancré en CSS avec un léger script de défilement.

Demander une correction de bug

Face à un bug, le premier réflexe est souvent la panique. Codex est votre filet de sécurité ultime. Voici comment le guider.

Le menu déborde sur une autre ligne :
Symptôme : Les liens passent à la ligne sur tablette.
Prompt conseillé : "Sur un écran de 800px, les liens du menu principal passent à la ligne et cassent le design. Réduis légèrement leur taille ou l'espacement entre eux pour que tout tienne sur une seule ligne."
Le bouton ne déclenche aucune action :
Symptôme : On clique, rien ne se passe.
Prompt conseillé : "Le bouton 'Valider' dans le fichier main.js ne déclenche pas la fonction d'envoi. Vérifie si l'écouteur d'événement est correctement attaché à la bonne ID."
Une image est écrasée (déformée) :
Symptôme : Le ratio de la photo n'est pas respecté.
Prompt conseillé : "L'image de profil est écrasée quand on réduit la fenêtre. Modifie son CSS pour qu'elle conserve toujours ses proportions (object-fit)."

Modifier uniquement un fichier

L'un des meilleurs moyens de ne rien casser est d'isoler la zone de travail. Par défaut, Codex peut proposer de modifier plusieurs fichiers s'il juge cela pertinent. Pour un débutant, c'est un risque.

Imposez vos conditions :

Modifie le style de la barre latérale. Ne modifie QUE le fichier style.css. Ne touche absolument pas au HTML.

Cette approche chirurgicale vous garantit que la logique de l'application (JavaScript) ou sa structure (HTML) restera intacte. Si la modification CSS est mauvaise, vous saurez exactement où chercher pour l'annuler.

Demander une explication avant la modification

C'est sans doute le secret le mieux gardé des développeurs experts : ne laissez jamais l'IA coder avant de l'avoir entendue réfléchir.

❌ Approche risquée (demande directe) :
Le formulaire de contact ne marche pas. Corrige-le.
L'IA va immédiatement injecter du code de correction. Vous n'aurez rien appris, et vous ne saurez pas ce qu'elle a modifié.

✅ Approche experte (analyse préalable) :
Le formulaire de contact ne marche pas. Analyse le fichier, explique-moi la cause probable du problème avec des mots simples, et propose-moi une stratégie de résolution. N'écris encore aucun code.
L'IA va vous répondre que vous avez oublié de lier la balise <form> ou qu'il manque un attribut action. Une fois que vous avez compris, vous répondez : "Parfait, applique cette solution."

Travailler étape par étape

Un projet complexe n'est qu'une succession de tâches simples. Ne dites jamais : "Fais un tableau de bord avec des graphiques, une base de données et un système d'export PDF."

Privilégiez ce scénario :

"Génère la structure HTML vide d'un tableau de bord avec une barre latérale et une zone de contenu principal." (On vérifie le résultat).
"Parfait. Ajoute maintenant le CSS pour que la barre latérale soit bleu foncé et prenne 100% de la hauteur de l'écran." (On vérifie le résultat).
"Excellent. Dans la zone principale, crée 3 cartes blanches avec des ombres pour afficher des statistiques fictives." (On vérifie le résultat).

Travailler par incrémentations courtes limite les risques, facilite le débogage et vous donne un sentiment de contrôle total sur l'évolution du projet.

Vérifier les modifications

Ne faites pas une confiance aveugle à la machine. L'IA génère du texte probable, pas de la vérité absolue. Après chaque intervention de Codex, appliquez cette checklist de vérification :

[ ] Le résultat visuel : L'élément modifié apparaît-il comme prévu sur la page web ?
[ ] La fonctionnalité : Si c'est un bouton, déclenche-t-il l'action attendue ?
[ ] Le dommage collatéral : En réparant la marge de gauche, l'IA a-t-elle cassé l'alignement de droite ?
[ ] Le responsive : Réduisez la fenêtre de votre navigateur. La modification tient-elle la route sur mobile ?
[ ] La console : Faites un clic droit sur votre site > Inspecter > Console. Y a-t-il des erreurs rouges inattendues ?

Cette étape est indispensable. Si vous accumulez 10 modifications sans tester, vous ne saurez jamais laquelle a cassé votre projet.

Atelier pratique

Entraînez-vous mentalement à structurer des requêtes parfaites avec ces 10 exercices de mise en situation.

Exercice 1 : Changer la couleur d'un bouton
Contexte : Le bouton Valider est gris. Vous le voulez vert vif.
Prompt : Modifie la couleur de fond de la classe `.btn-submit` pour qu'elle devienne vert vif (#22c55e).

Exercice 2 : Modifier un titre global
Contexte : Vous souhaitez que tous les titres secondaires soient plus petits.
Prompt : Dans le fichier de style global, réduis la taille de police de tous les balises `<h2>` à 1.5rem.

Exercice 3 : Ajouter une carte d'information
Contexte : Il manque un encart "Promotion" sur l'accueil.
Prompt : Insère une carte div sous le header avec un fond orange clair et le texte "Promo : -20% aujourd'hui".

Exercice 4 : Modifier le footer
Contexte : L'année est restée à 2024.
Prompt : Dans index.html, mets à jour le texte du copyright du footer pour afficher l'année 2026.

Exercice 5 : Ajouter une animation de chargement
Contexte : Le site fige lors du clic sur Envoyer.
Prompt : Ajoute un spinner de chargement CSS (petit cercle qui tourne) dans le bouton d'envoi lorsqu'on clique dessus.

Exercice 6 : Créer une page Contact
Contexte : La page contact.html est vide.
Prompt : Pour la page contact.html, génère le code d'une grille avec les informations (adresse/tel) à gauche et un formulaire à droite.

Exercice 7 : Optimiser une image
Contexte : Une image de 4000px prend trop de place à l'écran.
Prompt : Applique une largeur maximale de 100% sur l'image d'illustration pour qu'elle ne déborde jamais du conteneur parent.

Exercice 8 : Ajouter un lien de retour
Contexte : Les pages secondaires n'ont pas de lien vers l'accueil.
Prompt : En haut à gauche de toutes les pages d'article, ajoute un lien discret "← Retour à l'accueil" pointant vers index.html.

Exercice 9 : Rendre une liste lisible
Contexte : Une longue liste à puces est trop dense.
Prompt : Augmente l'interligne (line-height) et l'espacement (margin-bottom) entre chaque élément `<li>` de la liste principale.

Exercice 10 : Mettre en place un menu collant (sticky)
Contexte : Le menu disparaît quand on défile.
Prompt : Modifie le CSS de la barre de navigation pour qu'elle reste toujours visible en haut de l'écran lors du défilement (position sticky).

Les erreurs les plus fréquentes

Voici les pièges classiques lors des premières modifications et comment les esquiver.

Symptôme : Le projet est totalement cassé.
Cause : Vous avez demandé 15 modifications graphiques et techniques dans un seul prompt.
Comment l'éviter : Une modification = un prompt = une vérification.
Symptôme : L'IA modifie le mauvais fichier.
Cause : Plusieurs fichiers s'appellent `index.js` ou vous n'avez pas donné de nom.
Comment l'éviter : Précisez toujours le chemin exact : "Dans le fichier /src/components/Header.js...".
Symptôme : La couleur modifiée n'apparaît pas.
Cause : Une autre classe CSS est plus forte (spécificité) et l'écrase.
Comment l'éviter : Demandez à l'IA : "Pourquoi ma nouvelle couleur ne s'applique-t-elle pas ? Y a-t-il un conflit CSS ?"
Symptôme : Le code JavaScript génère une page blanche.
Cause : Une erreur de syntaxe fatale (une virgule oubliée).
Comment l'éviter : Regardez toujours la console du navigateur. Copiez le message d'erreur rouge à Codex pour qu'il corrige sa propre faute.
Symptôme : Vous ne reconnaissez plus votre propre code.
Cause : L'IA a refactorisé tout le fichier au lieu de changer une ligne.
Comment l'éviter : "Modifie la ligne 42, mais laisse tout le reste du fichier strictement intact."
Symptôme : Le design est beau sur PC, horrible sur mobile.
Cause : Vous n'avez pas demandé une approche responsive.
Comment l'éviter : "Assure-toi que cette nouvelle grille s'adapte sur les petits écrans (mobile-first)."
Symptôme : Une fonctionnalité qui marchait hier est cassée aujourd'hui.
Cause : L'IA a supprimé une ancienne fonction en écrivant la nouvelle.
Comment l'éviter : Apprenez à lire les "Diff" (les lignes rouges supprimées et vertes ajoutées) avant de valider la réponse.
Symptôme : L'IA invente un nom de classe qui n'existe pas dans votre projet.
Cause : Elle utilise un nom générique par défaut.
Comment l'éviter : Fournissez le contexte visuel : "Le titre utilise actuellement la classe `.title-hero`."

Conseils essentiels

Bonnes pratiques

L'importance de la sauvegarde (Git)
Ne considérez jamais une modification comme anodine. Avant de demander à Codex de réécrire un bloc entier, faites un "Commit" via Git. C'est votre sauvegarde de sécurité (save state). En cas de désastre, vous pourrez revenir à ce point en deux clics.

Astuce

Lisez le code proposé
Codex est votre assistant, pas votre remplaçant. Même si vous êtes débutant, forcez-vous à lire les mots en anglais du code généré (`color`, `padding`, `if`, `return`). Le développement informatique n'est qu'une langue étrangère logique. Plus vous la lirez, plus elle vous semblera familière.

Tableau récapitulatif des stratégies

Objectif	Exemple de prompt	Bonne pratique
Changer un texte	Remplace le titre "Bienvenue" par "Accueil" dans index.html.	Citer le fichier exact.
Modifier une couleur	Passe la couleur du bouton .btn-primary en bleu foncé (#1a2b3c).	Fournir le code hexadécimal exact.
Ajouter une image	Ajoute l'image logo.png avec une hauteur de 50px au-dessus du titre.	Préciser les dimensions attendues.
Créer un formulaire	Crée un formulaire de contact (Email, Message, Valider) en HTML.	Lister explicitement les champs voulus.
Corriger un bug visuel	Le texte du footer déborde sur mobile. Modifie le CSS pour l'empêcher.	Préciser le type d'écran (mobile/desktop).
Comprendre un bug	J'ai l'erreur X à la ligne 12. Analyse la cause sans modifier le code.	Demander l'analyse avant l'action.
Refactoriser	Simplifie cette longue fonction if/else en utilisant un switch.	Imposer la méthode de refactoring.
Optimiser	Réduis la complexité de cette boucle pour qu'elle soit plus rapide.	Définir l'objectif d'optimisation.
Traduire	Traduis tout le texte visible de ce fichier en anglais, mais pas le code.	Protéger la logique technique.
Documenter	Ajoute des commentaires au-dessus de chaque fonction complexe.	Cibler uniquement la complexité.
Sécuriser	Ajoute une vérification pour empêcher les mots de passe trop courts.	Définir la règle de sécurité (ex: longueur).
Limiter le scope	Ne modifie QUE le fichier style.css, ignore les fichiers JS.	Restreindre l'accès de l'IA.
Mode sombre	Ajoute une classe .dark-mode qui inverse les couleurs de fond.	Expliquer le comportement de la classe.
Animation	Fais en sorte que le bouton grossisse légèrement au survol (hover).	Décrire visuellement l'effet attendu.
Responsive	Passe la grille de 3 colonnes à 1 colonne sur les écrans de moins de 768px.	Donner la valeur de rupture (breakpoint).

Foire aux questions

Techniquement oui, mais c'est déconseillé pour un débutant. Si vous demandez de modifier le CSS, le HTML et le JavaScript d'un coup, le risque de bug invisible est élevé.

Utilisez Git ! Si vous avez bien versionné votre projet avant la demande, vous pouvez annuler la modification en un clic via l'interface de contrôle de code source de VS Code.

Il essaie de ne pas le faire, mais dans le cadre d'un refactoring, il peut remplacer 50 lignes par 10 lignes plus efficaces. Demandez-lui toujours d'expliquer ce qu'il enlève.

Oui, toujours. Relire le code vous permet non seulement d'éviter les bugs, mais surtout de comprendre et d'apprendre comment la modification a été réalisée techniquement.

Dans VS Code, vous pouvez utiliser le raccourci `Ctrl + Z` (ou `Cmd + Z`) pour annuler la frappe dans un fichier, à condition de ne pas l'avoir fermé.

Le test visuel est roi. Si vous avez demandé un bouton rouge, ouvrez votre page web. Est-il rouge ? Si vous cliquez dessus, fait-il ce qui est prévu ? Testez immédiatement.

Dites simplement à Codex : 'Ta dernière modification a causé ce bug : [description]. Explique pourquoi et corrige-le'.

Vous pouvez demander : 'Propose 3 idées pour moderniser ce menu, puis attends mon choix avant de modifier le code'.

Une refonte complète demande de modifier des dizaines de fichiers. Découpez cette demande : refaites d'abord l'en-tête, puis le pied de page, puis la page d'accueil.

Placez Codex dans le dossier de votre thème WordPress. Précisez-lui toujours que vous êtes sur WordPress pour qu'il utilise les fonctions PHP natives (ex: `get_template_part()`).

Parfaitement. Il connaît les meilleures pratiques de la plupart des frameworks modernes. Mentionnez le framework dans votre prompt initial pour fixer le contexte.

Vérifiez que le fichier n'est pas en lecture seule, ou qu'il ne s'agit pas d'un fichier système généré automatiquement (comme le dossier `node_modules`).

Oui. Ajoutez toujours 'Ajoute des commentaires explicatifs en français sur tes modifications' à la fin de votre prompt.

Il peut écrire des tests automatisés, mais il ne peut pas ouvrir un navigateur et vérifier visuellement si le bouton est bien aligné. Ce test humain reste de votre responsabilité.

Oui, c'est le syndrome de l'apprenti sorcier. Mais rappelez-vous : c'est votre ordinateur, votre dossier local, rien de ce que vous faites ne peut casser Internet. Expérimentez !

À retenir

Félicitations, vous n'êtes plus un simple observateur : vous êtes un créateur.

Codex excelle dans la modification chirurgicale d'un projet existant, à condition de bien le guider.
Ne laissez pas l'IA deviner : spécifiez le fichier, l'objectif et la contrainte de style.
Privilégiez la méthode de l'analyse préalable : "Explique le problème avant de proposer du code".
Procédez par incrémentations minuscules (bébé pas) et testez visuellement après chaque prompt.

Transition vers le chapitre suivant

Vous savez maintenant construire, modifier et ajouter de nouvelles pierres à votre édifice. Mais que se passe-t-il lorsque l'édifice s'effondre ?

Le développement informatique est pavé d'erreurs, de pages blanches et de comportements inattendus. Dans le prochain chapitre, nous aborderons l'art subtil de réparer ce qui est cassé, et comment utiliser Codex comme l'ultime détective pour traquer et corriger les bugs de vos applications.

Chapitre terminé