Workshop Claude Code et Codex

Pendant la journée, chaque étape restait brouillée jusqu’à ce que je projette son code au tableau. Voici les neuf, dans l’ordre, telles qu’elles figurent sur la page des participants.

1. 01S’équipercode 100

   Les deux comptes, pour tout le monde : GitHub et Vercel, avec le bouton Google.

   Ton outil, au choix : Codex, dans l’app ChatGPT (rien à demander à l’informatique), ou Claude Code sur claude.ai/code si tu as un abonnement Claude payant.

   À chaque fois, le bouton Google. Aucun mot de passe à inventer, aucun mail de vérification à attendre.

2. 02Ta page de départcode 101

   Fais-moi une page web qui me présente. Il faut mon prénom (PRÉNOM), quelques phrases sur moi (invente s’il faut) et un moyen de me contacter (invente aussi). Une seule page. Ne me pose pas de question, fais des choix à ma place, je corrigerai après.

   Un seul mot à changer : remplace PRÉNOM par le tien avant d’envoyer. Le reste, il l’invente, le contenu n’a aucune importance aujourd’hui.

3. 03Le style, trois demandescode 202

   Une demande à la fois. On regarde le résultat, puis on passe à la suivante.

   Par exemple

   • Je veux des couleurs sombres, bleu nuit, avec de l’orange pour les boutons.
   • Mets mon prénom tout en haut, très gros, et le reste en dessous.
   • Ajoute une photo de profil ronde.

   Les exemples sont là pour démarrer, pas pour être copiés. C’est exactement là que tu apprends à demander.

4. 04Une chose qui bougecode 303

   Demande-lui quelque chose qui réagit quand on touche à la page.

   Par exemple

   • Quand la souris passe sur un bouton, il change de couleur.
   • Ajoute un bouton qui fait apparaître un texte caché.

   Toujours une seule chose à la fois. Deux demandes dans la même phrase, et tu ne sais plus laquelle a marché.

5. 05Casser ta pagecode 404

   Ajoute un compte à rebours, un carrousel de photos, un formulaire de contact, une carte, et fais que tout bouge en permanence.

   Regarde bien ta page avant d’envoyer. Tu vas vouloir la retrouver. C’est la seule fois de la journée où on te demande de rater quelque chose.

6. 06La réparercode 405

   Reviens en arrière, je veux la version d’avant.

   Retiens celle-là. C’est elle qui te sortira de la plupart des galères de l’après-midi.

7. 07Mettre en lignecode 505

   Crée un nouveau dépôt GitHub pour ce projet et pousse le code dedans. Ensuite crée un projet Vercel lié à ce dépôt et déploie-le. Quand c’est en ligne, donne-moi l’adresse du site.

   Puis, pour tout le monde : tu colles ton adresse dans le groupe.

   Cette adresse est à toi. Tu peux l’envoyer à qui tu veux, ce soir, depuis ton téléphone.

8. 08La conversation avant de construirecode 606

   Ouvre un chat normal, celui que tu utilises déjà tous les jours. Discute de ton idée cinq minutes avec lui, en répondant à trois questions :

   Les trois questions

   • Qu’est-ce que la personne voit en arrivant ?
   • Qu’est-ce qu’elle peut faire ?
   • À quoi ça ressemble ?

   Ensuite, donne le résultat de cette discussion à l’agent. Tu viens de transformer une envie en commande.

9. 09Ton projet à toicode 707

   Je veux un ___ qui permet de ___.

   Ou pars d’une famille de projets

   • Un site : portfolio, page de présentation.
   • Une application : suivi d’objectifs, convertisseur, minuteur.
   • Un jeu : casse-briques, snake, quiz.
   • Une scène 3D : un objet qui tourne, un système solaire.

   Une seule règle : ça tourne dans le navigateur, en un ou deux fichiers. C’est ce qui garantit que ça marche ce soir.

Le soir, treize projets en ligne : chaque participant est reparti avec le sien.