Votre première demande à Codex

Introduction

L'interface de Codex est installée. Votre projet est ouvert. Le curseur clignote dans la barre de chat. Et là... c'est le blocage.

De nombreux débutants fixent cet écran vide pendant de longues minutes. "Qu'est-ce que je suis censé écrire ? Et si je demande mal ? Et s'il casse mon projet ?"

Cette paralysie est parfaitement normale. Vous n'êtes pas habitué à donner des ordres à une machine en langage naturel. Ce chapitre est conçu pour vous décomplexer. Vous allez réaliser vos premières interactions à travers des demandes inoffensives et exploratoires. L'objectif n'est pas encore de coder la prochaine application révolutionnaire, mais simplement de prendre confiance en découvrant comment l'IA réagit à vos mots.

Avant d'écrire son premier prompt

Pour que cette première expérience soit un succès absolu, prenez 30 secondes pour vérifier cette courte checklist :

[ ] Le bon dossier est ouvert : Vérifiez dans VS Code que vous avez bien ouvert le dossier du projet (ex: mon-site-web) et non un dossier global.
[ ] L'objectif est clair : Ne tapez pas au hasard. Demandez-vous : "Est-ce que je veux qu'il m'explique quelque chose ou qu'il modifie quelque chose ?"
[ ] La demande est simple : Une seule instruction pour commencer. Pas de listes à rallonge.
[ ] Le stress est à zéro : Rappelez-vous qu'il n'y a pas de mauvais prompt. Si la réponse est fausse, vous ne payez aucune amende, vous la reformulez simplement.

Première demande : dire bonjour

Oui, de manière tout à fait volontaire et littérale. Tapez ceci dans la barre de Codex :

Bonjour ! Je suis un développeur débutant et c'est ma première utilisation.

Ce que l'on observe :
Codex va générer une réponse bienveillante. Il se présentera, vous expliquera brièvement ses capacités (lire le code, proposer des modifications, corriger des bugs) et vous demandera sur quoi vous souhaitez travailler. Cette étape brise la glace : elle vous prouve que l'IA comprend un langage conversationnel humain et qu'elle n'attend pas de code informatique strict de votre part.

Demander à Codex d'expliquer le projet

Si vous reprenez un modèle téléchargé sur internet ou un vieux dossier, laissez l'IA faire le tour du propriétaire pour vous.

Explique-moi ce projet globalement. Quel est son but ?

Pourquoi c'est utile : Cela oblige Codex à scanner la racine. S'il voit un fichier `package.json`, il devinera que c'est une application Node.js. S'il voit du HTML/CSS, il devinera que c'est un site statique.
Ce qu'il devrait répondre : "C'est un projet de site vitrine statique composé de 3 pages HTML et d'un fichier de style..."

Résume l'arborescence du projet. Où sont rangées les images et le CSS ?

Pourquoi c'est utile : Vous obtenez une cartographie mentale instantanée.
Ce qu'il devrait répondre : "Vos images sont situées dans le dossier /assets/img/ et le CSS est dans le dossier /styles/."

Quels sont les 3 fichiers les plus importants de ce projet pour modifier l'accueil ?

Pourquoi c'est utile : Cela filtre le bruit. Au lieu de regarder 50 fichiers, vous vous concentrez sur l'essentiel.
Ce qu'il devrait répondre : "Vous devez regarder index.html (pour le contenu), main.css (pour le design) et app.js (pour les animations)."

Demander à comprendre un fichier

Descendons d'un cran de précision. Ouvrez un fichier dans votre éditeur (par exemple `style.css`), puis posez ces questions :

```
Explique-moi le fichier style.css de manière simple.
```
Il vous listera les grandes sections : les couleurs globales, la typographie, puis les classes spécifiques (boutons, formulaires).
```
À quoi sert index.html ?
```
Il vous expliquera la structure globale (le <head> pour la configuration, et le <body> contenant le menu, le contenu central et le pied de page).
```
Peux-tu résumer ce que fait ce composant React Button.jsx ?
```
Cette approche est miraculeuse pour analyser un code complexe que l'on n'a pas écrit. Codex traduira la technique en fonctionnel : "Ce bouton reçoit une couleur et déclenche un événement quand on clique dessus."

Demander une petite modification

Passons à l'action. Commençons par des modifications mineures et sans risque.

Changer un titre :

Dans index.html, remplace le grand titre "Accueil" par "Bienvenue sur notre site".

Résultat : Il modifie la ligne exacte.
Pourquoi c'est une bonne première modif : C'est instantané, facile à vérifier dans le navigateur, et sans impact sur le code logique.

Modifier une couleur :

Passe le fond de la page principale (body) en noir clair (#1a1a1a) dans le fichier CSS.

Résultat : Il met à jour la propriété `background-color`.
Pourquoi c'est une bonne première modif : Le résultat visuel est flagrant, ce qui donne confiance dans la capacité d'exécution de l'outil.

Ajouter une image :

Ajoute la balise image pour "logo.png" tout en haut de la page.

Résultat : Il insère la balise `<img src="logo.png" alt="Logo">`.
Pourquoi c'est une bonne première modif : Cela vous montre comment l'IA génère et injecte de nouvelles balises HTML sémantiquement correctes.

Demander uniquement une explication

C'est une règle d'or pour les débutants : utilisez l'IA comme un professeur particulier avant de l'utiliser comme un outil d'automatisation.

Demande de modification directe (dangereuse) :
"Corrige le bouton qui ne marche pas."
Codex va écraser votre code. Le bouton marchera, mais vous n'aurez rien appris.

Demande d'explication pédagogique (sécurisée) :
"Le bouton Valider ne marche pas. N'effectue AUCUNE modification. Analysons ensemble ce fichier. Décris son fonctionnement actuel étape par étape et trouve d'où vient l'erreur."

Avec cette phrase de protection ("N'effectue aucune modification"), l'IA va jouer son rôle de mentor. Elle vous dira : "Étape 1, vous avez créé le bouton. Étape 2, vous n'avez pas ajouté la fonction 'onClick'. Voici ce qu'il faudrait faire."

Vous êtes alors libre de comprendre, de taper le code vous-même pour apprendre, ou de lui dire "D'accord, effectue la correction proposée".

Poser des questions à Codex

N'ayez aucune gêne à transformer Codex en moteur de recherche interne pour votre projet.

"Pourquoi ce bouton utilise-t-il la classe `.btn-lg` et non `.btn` ?"
"Quel est le rôle du fichier `robots.txt` dans mon dossier ?"
"Comment pourrais-je améliorer visuellement cette section de présentation ?"
"Y a-t-il des images trop lourdes dans le dossier `/assets/` ?"
"Où est stockée la palette de couleurs principales de ce site ?"
"Est-ce que mon code HTML respecte bien les balises modernes (header, main, footer) ?"
"Que se passera-t-il si je supprime la fonction `validateEmail()` ?"
"Pourquoi as-tu utilisé `rem` au lieu de `px` pour la taille du texte ?"
"Ce code te semble-t-il rapide ou mal optimisé ?"
"Peux-tu me réécrire ce paragraphe pour qu'il soit plus vendeur ?"
"Comment faire pour centrer verticalement ce gros bloc bleu ?"
"Quelles sont les bibliothèques externes installées dans ce projet ?"
"Comment ajouter une police personnalisée depuis Google Fonts ?"
"Pourquoi le texte déborde-t-il sur mon téléphone portable ?"
"Est-ce que ma page est accessible pour les malvoyants ?"

Comprendre les réponses de Codex

Lorsque Codex répond, il ne renvoie pas qu'un bloc de code. Il fournit une analyse. Il est crucial d'apprendre à lire cette analyse.

Si la réponse est très détaillée : C'est qu'il vous explique la logique d'une modification complexe. Prenez le temps de lire le texte avant de regarder le code.
S'il pose des questions : Ce n'est pas un bug. Il manque de contexte (ex: "Vous voulez centrer le texte, mais par rapport à l'écran entier ou à son conteneur parent ?"). Répondez-lui simplement.
S'il propose plusieurs solutions : En développement, on peut résoudre un problème de 5 manières différentes. Codex peut vous proposer "La solution rapide" vs "La solution optimisée". Choisissez celle qui correspond à votre niveau.

Une bonne réponse est une réponse que vous comprenez. Si vous copiez/collez un code sans savoir ce qu'il fait, vous prenez un risque pour la maintenance future de votre projet.

Continuer naturellement la conversation

Une session Codex n'est pas une recherche Google (une requête = un résultat final). C'est un dialogue. Les informations se cumulent.

Vous : Crée une carte de produit avec un titre et un prix.

Codex : [Génère un bloc HTML/CSS simple, blanc avec du texte noir]

Vous : Ajoute une image au-dessus du titre.

Codex : [Met à jour la même carte en insérant une balise img]

Vous : Rends les coins de la carte arrondis.

Codex : [Ajoute un border-radius au CSS existant]

Vous : Parfait, applique ces modifications.

Codex : [Modifie physiquement les fichiers locaux]

Dans cet exemple, vous avez sculpté votre résultat au fil de la discussion, exactement comme vous le feriez en dirigeant un développeur junior derrière son épaule.

Les erreurs les plus fréquentes

Voici les 15 erreurs classiques lors des premiers échanges :

Symptôme : Demander "Fais-moi un site web".
Cause : Un prompt beaucoup trop vaste sans aucune précision de contexte.
Solution : Commencer petit : "Génère l'ossature HTML d'une page d'accueil vide".
Symptôme : Écrire un roman de 3 pages d'un coup.
Cause : Vouloir tout anticiper. L'IA va zapper la moitié des consignes.
Solution : Une seule idée forte par prompt.
Symptôme : Poser 4 questions différentes (couleur, JS, SEO, base de données).
Cause : Impatience.
Solution : Résolvez le design. Puis le JS. Puis le SEO. Étape par étape.
Symptôme : Ignorer le texte explicatif et ne copier que le code.
Cause : Vouloir aller trop vite.
Solution : Le texte contient souvent des avertissements vitaux (ex: "Attention, ce code nécessite d'importer telle bibliothèque"). Lisez-le.
Symptôme : Ne pas répondre à une question de Codex.
Cause : Penser que la question était rhétorique.
Solution : Si l'IA demande une précision, donnez-la lui, sinon elle va stagner.
Symptôme : Valider une modification qu'on ne comprend pas du tout.
Cause : Excès de confiance aveugle.
Solution : "Attends, pourquoi as-tu ajouté ce fichier bizarre ? Explique."
Symptôme : Crier sur la machine en majuscules ("MAIS NON C'EST FAUX !").
Cause : Frustration face à une erreur répétée.
Solution : Restez factuel : "Le code précédent génère l'erreur X. Utilise l'approche Y à la place."
Symptôme : Relancer 10 fois le même prompt qui ne marche pas.
Cause : L'entêtement.
Solution : Changez votre formulation. Si l'IA ne comprend pas "l'espace du milieu", appelez-le "le gap de la flexbox".

Atelier pratique

Prenez 15 minutes pour réaliser ces petits exercices inoffensifs sur votre éditeur.

Exercice 1 : Demander une explication générale
Contexte : Ouvrez un fichier complexe au hasard.
Prompt : "Résume ce que fait ce fichier en 3 phrases maximum pour un enfant de 10 ans."
Utilité : Prouve la capacité de vulgarisation de l'outil.

Exercice 2 : Modifier un texte inoffensif
Contexte : Le fichier `index.html`.
Prompt : "Change le texte 'Copyright 2024' en 'Copyright 2026'."
Utilité : Permet de voir la modification en direct sur l'écran.

Exercice 3 : Le test d'identification
Contexte : Votre dossier est ouvert.
Prompt : "Combien de fichiers CSS différents possède mon projet actuel ?"
Utilité : Valide que Codex a bien scanné votre arborescence locale.

Exercice 4 : Comprendre une ligne précise
Contexte : Une balise <meta> dans l'en-tête HTML.
Prompt : "À quoi sert exactement la ligne contenant `viewport` ?"
Utilité : Apprendre la technique morceau par morceau.

Exercice 5 : La protection maximale
Contexte : Le fichier CSS principal.
Prompt : "Analyse ce fichier, repère 3 améliorations possibles, mais n'écris aucune ligne de code."
Utilité : Démontre l'utilité du mode "audit" passif.

Exercice 6 : Comparer deux solutions
Contexte : Une section de design CSS.
Prompt : "Quels sont les avantages d'utiliser Grid au lieu de Flexbox pour cette grille ?"
Utilité : Comprendre les choix architecturaux de l'IA.

Exercice 7 : L'art du commentaire
Contexte : Un fichier JavaScript opaque.
Prompt : "Ajoute des commentaires traduisant chaque étape technique en français."
Utilité : Rendre un code incompréhensible limpide pour l'humain.

Exercice 8 : Créer un élément détaché
Contexte : Demande isolée.
Prompt : "Génère juste le code HTML pour un gros bouton vert. Ne modifie pas mon projet."
Utilité : S'en servir comme d'un générateur de code à la volée.

Exercice 9 : La remise en cause
Contexte : Après qu'il ait généré un code.
Prompt : "Es-tu sûr que c'est la méthode la plus optimisée ?"
Utilité : Pousser l'IA à s'auto-évaluer et à proposer mieux.

Exercice 10 : Le retour en arrière
Contexte : Après une mauvaise proposition.
Prompt : "Oublie tout ce qu'on vient de dire sur ce bouton. Repartons sur l'idée de départ."
Utilité : Gérer la fenêtre de contexte et réorienter la discussion.

Conseils

Astuce

Ne cherchez pas à impressionner Codex
Inutile d'utiliser des termes techniques si vous n'êtes pas certain de leur sens. "Le bloc d'en haut qui contient les liens" est souvent mieux compris par l'IA qu'une phrase confuse employant de travers les mots "navbar component route handler".

Bonnes pratiques

N'hésitez pas à relancer
Si la réponse n'est pas claire, le prompt suivant doit être : "C'est un peu trop technique pour moi, peux-tu réexpliquer plus simplement ?". C'est un dialogue, utilisez-le comme tel.

Tableau récapitulatif

Objectif	Exemple de prompt	Ce que Codex devrait faire
Découvrir un projet	Explique-moi l'architecture de ce dossier.	Lister et résumer le rôle des dossiers principaux.
Comprendre un fichier	À quoi sert exactement index.html ?	Détailler le contenu et le rôle de la page d'accueil.
Trouver un élément	Dans quel fichier se trouve la couleur bleue du header ?	Indiquer le fichier CSS et la ligne exacts.
Analyser une fonction	Explique la fonction calculerTotal étape par étape.	Traduire la logique mathématique en français clair.
Prévoir un risque	Si je modifie cette variable, que va-t-il se passer ?	Anticiper les bugs liés aux dépendances.
Changer un texte	Remplace "Envoyer" par "Valider" dans le bouton.	Mettre à jour la balise HTML correspondante.
Ajouter du style	Rends le titre principal (H1) plus grand et en gras.	Proposer ou injecter la modification CSS.
Ajouter une alerte	Ajoute un message d'alerte quand on clique sur l'image.	Créer un écouteur d'événement JS (onclick).
Cacher un élément	Masque la barre latérale sur la page de contact.	Appliquer un display: none via CSS.
Comprendre un bug	Pourquoi l'image ne s'affiche-t-elle pas ?	Vérifier le chemin de l'image et le code HTML.
Traduire un code	Traduis cette boucle for en fonction .map().	Réécrire le bloc de code en JavaScript moderne.
Nettoyer le fichier	Supprime tout le code commenté inutile dans script.js.	Purger le fichier des restes de développement.
Créer de la donnée	Génère un faux fichier JSON avec 5 utilisateurs.	Créer une structure de données fictive.
Sécuriser	Y a-t-il une faille de sécurité dans ce formulaire ?	Auditer le code et proposer des sécurités.
Commenter	Ajoute des commentaires explicatifs au-dessus du JS.	Documenter le fichier pour la relecture.
Demander un avis	Penses-tu que ce design est moderne ?	Évaluer le CSS selon les standards actuels.
Lancer un test	Écris un test pour vérifier que la fonction retourne 4.	Créer un fichier de test unitaire.
Renommer en masse	Renomme la variable "x" en "prixTotal" partout.	Scanner et remplacer intelligemment.
Bloquer la casse	Ajoute cette carte, mais sans toucher au CSS global.	Utiliser du style local ou des classes précises.
Finaliser	Le résultat est parfait, merci beaucoup !	Clôturer la conversation proprement.

Foire aux questions

Absolument. Codex comprend parfaitement le langage naturel humain. Vous n'avez pas besoin d'utiliser un jargon technique complexe ou des formules mathématiques. Parlez-lui comme à un collègue développeur à côté de vous.

Non. Si un prompt court comme 'Change le fond en rouge' suffit à exprimer votre besoin, ne le compliquez pas. Les longs prompts sont réservés aux tâches très complexes nécessitant beaucoup de contexte.

Parce qu'il manque d'informations pour coder correctement. S'il vous demande 'Souhaitez-vous que le bouton rouge ait des bords arrondis ?', répondez simplement 'Oui' ou 'Non'.

Bien sûr. Écrivez simplement : 'Ah pardon, je me suis trompé. Finalement, mets-le en bleu et non en rouge'. Codex adaptera immédiatement sa logique.

Si Codex vous donne exactement ce que vous aviez en tête du premier coup, votre demande était bonne. S'il génère quelque chose d'inattendu, relisez votre prompt : était-il sujet à interprétation ?

C'est possible, mais déconseillé lors de vos premières utilisations. Demandez d'abord A. Une fois A validé, demandez B. Cela limite considérablement le risque de bugs en cascade.

Dites : 'Stop. Annule tout ce qu'on vient de faire. Repartons de zéro sur la fonction de calcul.' ou utilisez le raccourci de votre interface pour vider la session.

Dans la plupart des éditeurs liés à Codex, vous avez une icône '+', 'New Chat' ou une commande pour effacer le contexte actuel et démarrer une conversation vierge.

S'il juge que votre demande est dangereuse (effacer le disque dur), contraire à ses règles éthiques (générer du code malveillant), ou qu'il ne trouve absolument aucun fichier correspondant à votre demande.

Ajoutez simplement à la fin de votre prompt : 'Explique ta démarche étape par étape et justifie tes choix techniques de manière détaillée'.

C'est la norme. L'art de prompter s'acquiert par l'essai-erreur. Acceptez de rater vos premiers prompts pour comprendre comment l'IA réfléchit.

Non, c'est une machine. Elle n'a aucun ego, aucune mémoire à long terme de vos erreurs, et aucune capacité de jugement. N'ayez jamais honte de poser une question qui vous semble 'stupide'.

Oui, il comprend l'humour, mais cela allonge inutilement la conversation. Restez clair et direct pour des résultats professionnels rapides.

Le français fonctionne parfaitement. L'anglais est parfois un tout petit peu plus précis sur des concepts de programmation très niches, mais pour 99% des usages, le français est excellent.

C'est une limite de caractères (tokens). Tapez simplement : 'Continue exactement là où tu t'es arrêté'.

À retenir

Le plus dur est fait : vous avez brisé la glace.

Votre premier prompt n'a pas besoin d'être un chef-d'œuvre. Un simple "Explique-moi ce fichier" suffit pour démarrer.
Privilégiez les demandes exploratoires ("Analyse", "Explique") avant les demandes destructrices ("Modifie", "Remplace").
L'interaction avec Codex se construit au fil de la discussion. Ne demandez pas un produit fini dès la première phrase.
En cas d'erreur ou d'incompréhension, n'ayez jamais peur d'effacer la conversation et de recommencer une nouvelle session avec un esprit clair.

Transition vers le chapitre suivant

Maintenant que vous savez comment poser vos premières questions et engager la conversation, vous avez toutes les clés en main pour vos besoins quotidiens.

Mais pour passer au niveau supérieur et éviter des bugs frustrants lors de la modification de vos projets, il est indispensable de comprendre ce qu'il se passe "sous le capot". Dans le prochain chapitre, nous allons décortiquer le fonctionnement interne de Codex : comment il analyse votre projet, comment il choisit les fichiers à lire, et pourquoi la notion de "contexte" va devenir votre nouvelle obsession.

Chapitre terminé