Créez le site de votre entreprise avec IndexDock Starter
Pour les grands débutants, sans expérience du code ni des outils d'IA : créez et publiez un vrai site pour votre petite entreprise avec un agent de codage IA, et découvrez au passage comment les développeurs travaillent réellement avec ces outils aujourd'hui.
- Gratuit
- Aucun compte chez nous
- 19 modules
- 59 leçons
Première session publique de ce cours — nous ajoutons encore les captures d'écran de chaque étape.
Ce cours est gratuit, GitHub et Cloudflare aussi. La seule chose que vous payez est un forfait Claude, parce que l'agent IA qui construit votre site fonctionne dessus : c'est un abonnement chez Anthropic, pas chez nous.
Les coches sont enregistrées uniquement dans ce navigateur : rien n'est envoyé nulle part.
Bienvenue
Module 01 · 5 lessons
À la fin de ce cours, vous aurez un vrai site pour votre entreprise, en ligne sur internet, et il vous appartiendra. Il portera le nom de votre entreprise, vos prestations et vos coordonnées, et il sera construit selon un standard technique professionnel, alors même que vous n'écrirez pas une seule ligne de code.
Vous n'avez besoin d'aucune expérience informatique au-delà de l'usage d'un navigateur web. Vous n'avez pas besoin de savoir ce qu'est GitHub, ce qu'est Cloudflare ni ce qu'est un agent de codage IA. Ce cours explique chacune de ces choses en langage simple, une petite étape à la fois, précisément au moment où vous en avez besoin.
Tout dans ce cours se passe dans votre navigateur web. Vous cliquerez sur des boutons, taperez des réponses à des questions, téléverserez des fichiers quand on vous le demandera et validerez ce qui vous convient. Rien de plus technique ne vous est demandé.
Ce cours a un second bénéfice, moins évident, qu'il vaut la peine de connaître dès le départ. La façon dont vous allez travailler ici — décrire ce que vous voulez, examiner ce que produit l'agent et demander des changements jusqu'à ce que ce soit juste — est exactement la façon dont un très grand nombre de développeurs professionnels construisent des logiciels aujourd'hui. Les agents de codage IA comme celui que vous utiliserez ici ne sont pas une version simplifiée, réservée aux débutants, de la vraie chose ; ils font réellement partie, et de plus en plus, de la manière dont les logiciels se construisent, chez les amateurs comme chez les développeurs expérimentés.
Ainsi, même si le résultat concret de ce cours est votre site terminé, ce que vous pratiquez en chemin est une compétence réelle et transférable : travailler efficacement aux côtés d'un agent de codage IA. Cela vaut en soi, bien au-delà de ce seul projet.
Deux participants construisent votre site : vous, et un agent de codage IA (un assistant automatisé capable de lire et d'écrire du code informatique pour votre compte). Il est utile de comprendre exactement de quoi chaque partie est responsable, pour que vous n'ayez jamais l'impression de devoir savoir quelque chose qu'on ne vous a jamais appris.
L'agent réalise tout le travail technique. Il écrit le code du site, vérifie que ce code fonctionne, corrige les problèmes qu'il trouve et publie les mises à jour. Il ne vous demande jamais d'écrire du code, d'utiliser un outil appelé Git, de gérer quoi que ce soit appelé branche, ni de faire quoi que ce soit d'autre de technique.
Vous êtes responsable d'autre chose, tout aussi important : la vérité sur votre entreprise. Vous dites à l'agent ce que fait votre entreprise, qui sont vos clients, ce qui vous distingue et ce que vous voulez que les visiteurs fassent en arrivant sur votre site. Vous fournissez le logo et les photos que vous souhaitez voir utilisés. Et à une poignée de moments clés, vous validez la direction avant que l'agent ne poursuive. L'agent n'a pas le droit de deviner ni d'inventer des faits sur votre entreprise : ce sont donc vos réponses honnêtes et détaillées qui font la qualité du site final.
Voyez cela comme engager un constructeur de sites chevronné qui ne vous a jamais rencontré : il peut tout construire, mais seulement si vous lui dites clairement ce dont vous avez besoin.
Deux choses découlent de cette répartition. Ce que l'agent écrit est un brouillon que vous approuvez, pas un livrable professionnel fini : relisez-le avant de publier, car l'agent peut se tromper. Et le site qui en résulte est le vôtre : son contenu, ses affirmations et sa conformité aux règles de votre pays relèvent de votre responsabilité, pas de celle d'IndexDock.
Vous apportez la vérité sur votre entreprise et quatre validations. L'agent écrit, construit, répare et publie.
Ce que vous apportez
Ce que fait l'agent
Ce cours, et le kit de départ gratuit qu'il utilise, est conçu pour un type de site précis et très répandu : un site d'information ou de génération de contacts pour un indépendant, une entreprise de services locale ou un professionnel seul. Génération de contacts signifie simplement un site dont le rôle principal est d'amener les visiteurs intéressés à vous contacter, plutôt que de vendre des produits directement sur le site.
Un site construit ainsi compte généralement entre une et cinq pages principales, toutes dans une seule langue. Il peut expliquer votre activité, lister vos prestations, montrer des exemples de travaux passés, inspirer confiance aux visiteurs et offrir des moyens simples de vous joindre : un numéro de téléphone, une adresse e-mail ou un lien de messagerie.
Ce cours ne convient pas pour construire une boutique en ligne avec panier et paiement, un site où les utilisateurs créent des comptes et se connectent, un système de réservation développé de zéro, ou tout ce qui doit stocker des données clients privées dans une base de données. Si votre idée comprend l'un de ces éléments, pas d'inquiétude : votre agent IA vous expliquera une version plus simple de votre idée, qui fonctionne bien en tant que site de ce type, ou vous indiquera qu'un autre type d'outil est nécessaire. Le savoir maintenant vous évite seulement d'être surpris plus tard.
Avant de continuer, une chose rassurante à garder en tête : ce cours se suit entièrement à votre rythme. Aucun chronomètre ne tourne, aucune échéance n'est à tenir. Si à un moment vous vous sentez dépassé, perdu ou simplement fatigué, il est tout à fait normal de vous arrêter, de fermer l'onglet et de revenir plus tard — dans une heure, demain ou la semaine prochaine. Rien de votre progression, de votre site ou de vos comptes ne sera perdu pendant votre absence. Avancez à la vitesse qui vous convient.
Les outils, expliqués comme si vous n'en aviez jamais entendu parler
Module 02 · 4 lessons
GitHub est un site qui stocke des fichiers et conserve l'historique complet de chaque modification qui leur a été apportée. Pour ce cours, GitHub stockera tous les fichiers qui composent votre site : ses textes, ses images, sa mise en page, tout.
L'endroit où vivent les fichiers de votre site sur GitHub s'appelle un dépôt. Vous pouvez voir un dépôt comme un unique dossier de projet hébergé en ligne, que vous et votre agent IA pouvez consulter et dans lequel vous pouvez travailler. Vous créerez votre propre dépôt tôt dans ce cours, et il vous appartiendra.
Créer un compte GitHub est gratuit, et c'est l'une des toutes premières étapes de ce cours.
Écrire les fichiers d'un site n'est que la moitié du travail. Ces fichiers doivent aussi être placés quelque part où n'importe qui sur internet peut les consulter et les charger dans son propre navigateur. Cela s'appelle l'hébergement, et le fait de rendre une version nouvelle ou mise à jour de votre site accessible aux visiteurs s'appelle le déploiement.
Cloudflare est le service que ce cours utilise pour héberger votre site. Une fois relié à votre dépôt GitHub, Cloudflare prend automatiquement la dernière version des fichiers de votre site et les rend accessibles à une adresse web que tout le monde peut ouvrir. Chaque fois que votre agent IA termine une partie du travail et l'enregistre, Cloudflare le remarque et met à jour votre site en ligne automatiquement, sans que vous ayez à cliquer sur quoi que ce soit.
Créer un compte Cloudflare est également gratuit pour ce dont ce cours a besoin.
Un agent de codage IA est un programme informatique capable de converser avec vous en langage courant, et aussi de lire, écrire et tester du code par lui-même. Vous décrivez ce que vous voulez avec vos propres mots, et il réalise le travail technique qui transforme cela en un site réel et fonctionnel.
Ce cours utilise Claude Code, créé par une entreprise appelée Anthropic. Vous l'utiliserez dans un navigateur, sur un site appelé Claude Code on the web, et il est capable de mener ce cours entier du début à la fin.
Vous échangerez avec votre agent presque entièrement à travers une seule conversation continue, semblable à une application de messagerie. Vous tapez un message décrivant ce que vous voulez, ou répondant à une question qu'il vous a posée, et il répond et se met au travail.
Un prompt est simplement le message que vous écrivez à un agent IA. C'est toute l'idée : de simples instructions écrites, dans votre langage de tous les jours, qui disent à l'IA ce que vous voulez qu'elle fasse ou qui répondent à une question qu'elle vous a posée.
Vous n'avez besoin d'aucune compétence particulière ni d'aucune formule secrète pour écrire un bon prompt. Les meilleurs prompts sont simplement clairs et précis, comme vous expliqueriez soigneusement quelque chose à un nouvel employé désireux d'aider mais incapable de lire dans vos pensées. Si vous voulez quelque chose de précis, dites-le franchement. Si quelque chose semble faux, décrivez exactement ce qui semble faux. Plus loin dans ce cours, dans la leçon sur les demandes de modifications, vous verrez cette idée mise en pratique en détail.
Tout au long de ce cours, vous enverrez plusieurs prompts : celui qui lance tout le projet, et d'autres chaque fois que vous voudrez poser une question ou demander un changement.
Pourquoi un abonnement payant est nécessaire — aucune option gratuite ne suffit
Module 03 · 3 lessons
Claude Code on the web exige un forfait Claude payant pour mener ce projet à bien. Il n'existe actuellement aucune version gratuite offrant assez d'usage pour construire un site complet avec ce cours. Si vous vous inscrivez en espérant qu'une option gratuite suffira, vous épuiserez votre quota en cours de route : mieux vaut le savoir d'emblée et passer directement à un forfait payant.
La bonne nouvelle, c'est que vous n'avez pas besoin du forfait le plus cher. Le forfait Claude payant d'entrée de gamme vous donne assez d'usage pour construire, avec ce cours, un site complet de petite entreprise. Vous pouvez tout à fait choisir un forfait plus cher si vous voulez davantage de marge ou l'accès à des modèles plus performants, mais ce n'est pas nécessaire pour terminer ce cours avec succès.
Rapporté à ce que vous obtenez en retour, un petit abonnement mensuel pendant un ou deux mois en échange d'un site d'entreprise professionnel et terminé est un bon marché.
Il vaut la peine de savoir que l'argent dépensé ici vous achète un abonnement IA polyvalent, et non un ticket à usage unique qui expire une fois votre site terminé. Le même abonnement Claude continue de vous servir ensuite, pour toutes sortes de choses du quotidien qui n'ont rien à voir avec la création de sites : analyser ou décrire des photos, chercher et expliquer des informations, générer des images, et d'innombrables autres tâches ordinaires pour lesquelles on utilise ces outils.
Cela signifie aussi que le même abonnement est prêt dès que vous voudrez construire un autre site. Si vous lancez une deuxième activité, ou si vous voulez simplement réessayer avec un autre design ou d'autres informations d'entreprise, vous pouvez créer un nouveau dépôt à partir du modèle IndexDock Starter et refaire ce même cours, avec l'abonnement que vous avez déjà. Rien dans votre forfait payant ne vous limite à un seul site.
Pourquoi ce site sera prêt pour la recherche par IA
Module 04 · 3 lessons
Vous avez peut-être entendu l'expression « visibilité IA », ou vous êtes demandé si un site peut être trouvé non seulement par des moteurs de recherche comme Google, mais aussi par les assistants IA auxquels les gens posent des questions. Ce kit de départ est conçu avec cette préoccupation en tête, et il vaut la peine de comprendre précisément ce que cette promesse signifie — et ce qu'elle ne signifie pas.
Ce que le site issu de ce cours vous apporte, c'est une préparation technique. Cela veut dire que votre site est construit de façon que les programmes informatiques, moteurs de recherche et assistants IA compris, puissent lire correctement vos pages, comprendre ce que fait votre entreprise et le décrire avec exactitude si quelqu'un le demande. Rien dans votre site ne bloquera ni n'embrouillera discrètement ces programmes.
Ce que ce cours ne promet pas, ce sont des positions garanties, un trafic garanti, ou la garantie qu'un assistant IA citera votre entreprise par son nom. Personne ne peut honnêtement promettre de tels résultats, car ils dépendent de nombreux facteurs extérieurs à un site donné : la concurrence, le lieu, le moment. Méfiez-vous de quiconque promet le contraire. Ce que vous obtenez, c'est un site sans barrière technique qui empêcherait d'être trouvé et correctement compris.
Quelques définitions courtes sont utiles ici, uniquement parce qu'elles expliquent pourquoi cela compte, et non parce que vous auriez à employer ces mots vous-même.
Explorable signifie qu'un programme informatique peut ouvrir et lire correctement les pages de votre site, comme vous les consultez dans votre navigateur. Certains sites sont construits de façon à cacher involontairement leur contenu à ces programmes ; les sites que ce cours construit n'en font pas partie.
Informations structurées signifie que les faits importants concernant votre entreprise — son nom, ses prestations, son lieu — sont clairement étiquetés dans le code sous-jacent du site, et pas seulement visibles sous forme d'image ou de texte épars. Cet étiquetage aide les programmes informatiques à comprendre ce qu'un morceau de texte signifie réellement, au lieu de n'y voir que des lettres sur une page.
Accessible, dans ce contexte, signifie que votre site fonctionne bien pour le plus grand nombre possible de visiteurs et d'appareils, y compris les personnes utilisant un lecteur d'écran ou une autre technologie d'assistance, et celles utilisant des navigateurs différents.
Ensemble, ces trois éléments forment ce que « prêt pour la recherche par IA » veut dire dans ce cours : un site où rien n'empêche d'être lu, compris et restitué correctement, par les humains comme par les programmes informatiques.
Créer vos comptes
Module 05 · 3 lessons
Ouvrez votre navigateur web et rendez-vous sur [github.com](https://github.com). Cherchez le bouton permettant de s'inscrire ou de créer un compte. On vous demandera de choisir un nom d'utilisateur, d'indiquer une adresse e-mail et de créer un mot de passe. Suivez les instructions affichées par GitHub, qui comprennent généralement la confirmation de votre adresse e-mail en cliquant sur un lien que GitHub vous envoie. Une fois votre e-mail confirmé, votre compte est prêt à l'emploi.
Conservez votre nom d'utilisateur, votre e-mail et votre mot de passe en lieu sûr. Vous devrez vous connecter à GitHub plusieurs fois encore au cours de ce cours.
Ouvrez votre navigateur web et rendez-vous sur [cloudflare.com](https://cloudflare.com). Cherchez le bouton d'inscription. On vous demandera une adresse e-mail et un mot de passe. Suivez les instructions affichées par Cloudflare, qui comprennent également la confirmation de votre adresse e-mail. Une fois confirmée, votre compte Cloudflare est prêt.
Vous n'avez rien à acheter ni aucune coordonnée bancaire à saisir pour créer un compte Cloudflare correspondant aux besoins de ce cours.
C'est maintenant le moment de créer votre compte chez Anthropic, l'entreprise derrière Claude Code.
Rendez-vous sur [claude.ai](https://claude.ai) et créez un compte, en suivant les instructions à l'écran pour confirmer votre adresse e-mail. Passez ensuite à un forfait Claude payant, puisque Claude Code on the web en exige un, comme expliqué plus haut dans ce cours.
Prenez cette étape au sérieux même si vous n'avez jamais utilisé d'outil de discussion avec une IA ; l'inscription elle-même est courte et guidée, et ce cours vous dira exactement quoi faire de ce compte une fois créé.
Créer le dépôt de votre site
Module 06 · 2 lessons
Un modèle est un projet de départ tout prêt que vous pouvez copier dans votre propre nouveau dépôt en un clic, au lieu de partir de rien. IndexDock Starter est un modèle : il contient déjà un petit site de départ fonctionnel et tout ce dont votre agent IA a besoin pour construire votre vrai site par-dessus. Utiliser un modèle signifie que vous commencez avec quelque chose qui fonctionne déjà, plutôt qu'avec un dossier vide.
Ouvrez votre navigateur et rendez-vous sur [github.com/IndexDock/website-from-scratch](https://github.com/IndexDock/website-from-scratch). Assurez-vous d'abord d'être connecté à votre propre compte GitHub.
Sur cette page, trouvez et cliquez sur le bouton intitulé « Use this template », puis choisissez « Create a new repository » parmi les options proposées. GitHub vous demandera de donner un nom à votre nouveau dépôt ; choisissez quelque chose en lien avec votre entreprise, son nom par exemple. Lorsque GitHub demande si le dépôt doit être Public ou Private, choisissez Private. Votre site sera malgré tout mis en ligne pour tout le monde ; ce réglage détermine seulement qui peut lire vos fichiers sur GitHub. Cliquez ensuite sur le bouton pour créer le dépôt.
Une fois créé, laissez-le exactement tel quel. À part l'envoi de votre logo et de vos photos plus tard, quand l'agent vous le demandera, vous n'ouvrez et ne modifiez jamais un fichier vous-même. Votre nouveau dépôt est désormais votre propre copie du kit de départ, il vous appartient et il est prêt pour les étapes suivantes de ce cours.
Mettre votre site de départ en ligne (Cloudflare)
Module 07 · 6 lessons
Un Worker, dans le vocabulaire de Cloudflare, est l'élément du système de Cloudflare qui sert réellement les pages de votre site aux visiteurs. Quand quelqu'un tape l'adresse de votre site dans son navigateur, c'est le Worker de Cloudflare qui répond avec le contenu de votre site. Vous n'avez pas besoin de comprendre son fonctionnement interne ; vous devez seulement en créer un et le relier à votre dépôt GitHub, ce que la leçon suivante détaille clic par clic.
Assurez-vous d'être connecté à votre compte Cloudflare, puis suivez exactement ces étapes, dans l'ordre. Deux d'entre elles vous demandent de taper une courte commande dans un champ. Vous copiez deux lignes dans un formulaire, vous n'écrivez pas de code : le cours vous donne le texte exact, et vous n'avez jamais besoin de comprendre ce qu'il fait.
- Dans la barre latérale gauche, cliquez sur Build.
- Sous Build, cliquez sur Compute (Workers & Pages).
- Cliquez sur le bouton bleu intitulé « Create application ».
- Cliquez sur « Continue with GitHub ».
- Sélectionnez le dépôt GitHub que vous avez créé à partir du modèle IndexDock Starter.
- Lorsqu'une build command vous est demandée, saisissez npm run build.
- Lorsqu'une deploy command vous est demandée, saisissez npx wrangler deploy.
- Si vous voyez un réglage nommé « Builds for non-production branches », laissez-le désactivé. Ce réglage n'est pas nécessaire pour ce cours, et l'activer consomme le quota de compilations gratuites de Cloudflare plus vite que nécessaire.
- Cliquez sur le bouton Deploy.
Si, pendant cette opération, Cloudflare vous demande de configurer le sous-domaine workers.dev de votre compte, faites-le maintenant. C'est une étape de configuration unique qui n'apparaît que la première fois : si vous la voyez, terminez-la avant de poursuivre.
Cloudflare va maintenant compiler et déployer votre site de départ. Cela prend généralement une à deux minutes.
Une fois votre Worker créé, un réglage supplémentaire doit être activé chez Cloudflare avant que votre site ne soit joignable à son adresse web. Suivez exactement ces étapes.
- Dans la barre latérale gauche, cliquez sur Build.
- Sous Build, cliquez sur Compute (Workers & Pages).
- Cliquez sur le Worker que vous venez de créer pour l'ouvrir.
- Cliquez sur l'onglet Domains.
- Repérez l'entrée intitulée « production » et activez-la.
Une fois cela activé, votre site de départ devient joignable à son adresse workers.dev.
Dans le tableau de bord Cloudflare, sur la page de votre Worker, cliquez sur le bouton « Visit » en haut à droite pour ouvrir l'adresse workers.dev de votre site dans un nouvel onglet. Vous devriez voir la page de départ d'IndexDock Starter, ce qui confirme que votre site est en ligne. Ce n'est pas encore le site fini de votre entreprise ; c'est une page de départ provisoire qui confirme que tout est bien relié. Votre véritable site d'entreprise apparaîtra à cette même adresse à mesure que l'agent le construira, plus loin dans ce cours.
Si une erreur s'affiche au lieu de votre site lorsque vous ouvrez l'adresse, pas d'inquiétude. Cela signifie généralement que Cloudflare termine encore le déploiement en coulisses. Attendez environ une minute, puis rechargez la page : le site de départ devrait alors apparaître.
Prenez un instant pour savourer : l'adresse de votre site fonctionne désormais absolument partout sur internet. Ouvrez-la sur votre ordinateur, sur une tablette, sur votre téléphone — elle fonctionnera de la même façon partout. Vous pouvez même envoyer le lien dès maintenant à un ami ou à un proche et le laisser compter parmi les premiers à le voir. C'est une petite étape, mais une vraie, et il reste encore beaucoup à venir.
Sur GitHub, une étoile est une façon simple de montrer son appréciation pour un projet, semblable au « j'aime » d'autres sites. Quand vous mettez une étoile à un dépôt, il devient plus visible pour les autres personnes qui parcourent GitHub, et cela indique à celles qui ont construit le kit de départ gratuit que vous utilisez qu'il aide réellement quelqu'un.
Vous venez de déployer avec succès votre propre copie du kit de départ : c'est donc un bon moment pour lui donner une étoile, si vous le souhaitez.
Pour cela, ouvrez votre navigateur et rendez-vous sur [github.com/IndexDock/website-from-scratch](https://github.com/IndexDock/website-from-scratch), la page du modèle d'origine, et non votre propre copie. En haut de la page, vous verrez un bouton intitulé « Star ». Cliquez dessus.
Donner une étoile est entièrement facultatif et n'est jamais nécessaire pour poursuivre ce cours. Ni votre site ni votre progression n'en dépendent.
Vous avez vu que ça marche — lisez maintenant la suite du cours
Module 08 · 1 lesson
Vous venez d'accomplir quelque chose de réel : vous avez créé un compte GitHub, un compte Cloudflare, votre propre dépôt et une adresse web en ligne, et vous avez vu une vraie page se charger dans votre navigateur. C'est la preuve que tout ce processus fonctionne vraiment.
Maintenant, avant d'ouvrir votre agent IA et de commencer le vrai travail de construction du site de votre entreprise, lisez la suite de ce cours d'un bout à l'autre, d'ici jusqu'à la fin. Ce n'est pas long, et rien ne vous demande encore d'agir. L'objectif est de vous préparer : cette lecture explique ce que votre agent IA vous demandera, à quoi ressemble chaque étape du processus, et une poignée de détails importants — comment téléverser correctement votre logo, comment demander des modifications efficacement — qu'il est bien plus facile de réussir du premier coup que de corriger après coup.
Une fois que vous aurez lu jusqu'à la fin de ce cours, revenez au module intitulé « Lancer l'agent et le chemin qui vous attend » pour commencer le vrai travail.
Relier votre agent IA à GitHub
Module 09 · 2 lessons
Claude Code a besoin d'une autorisation pour voir votre dépôt GitHub et y travailler avant de pouvoir construire quoi que ce soit. Cela passe par une étape d'autorisation, où vous indiquez à GitHub que Claude Code a le droit d'accéder à vos dépôts. Cette étape se fait une seule fois, dans votre navigateur, et ne prend qu'une minute.
Ouvrez votre navigateur, rendez-vous sur [claude.ai/code](https://claude.ai/code) et connectez-vous. Si vous n'avez pas encore relié GitHub, Claude Code vous invitera à le faire ; suivez cette invitation pour installer l'application GitHub de Claude et lui accorder l'accès à vos dépôts. Si on vous laisse le choix entre accorder l'accès à tous les dépôts ou seulement à certains, choisir tous les dépôts est l'option la plus simple et évite toute confusion ultérieure.
Préparer votre agent avant de commencer
Module 10 · 5 lessons
Dans Claude Code on the web, vous choisissez vous-même quel modèle d'IA effectue le travail, depuis un petit menu ou une liste déroulante située près du champ de message de votre conversation. Repérez-le avant d'envoyer votre tout premier message, car il est plus simple de le régler correctement dès le départ.
Ce menu liste plusieurs modèles, les uns sous les autres, classés du plus puissant en haut aux plus modestes plus bas. Un modèle plus puissant produit généralement un travail plus réfléchi et de meilleure qualité, mais il consomme aussi davantage de votre quota d'usage pour la même quantité de travail. Un modèle plus bas dans la liste est moins puissant, mais il ménage votre quota : vous pouvez donc en faire plus avant d'atteindre les limites expliquées deux leçons plus loin. Choisir un modèle relève donc d'un petit arbitrage propre entre qualité et durée de votre quota, en plus de l'arbitrage sur l'effort de raisonnement abordé dans la leçon suivante.
À côté du choix du modèle, vous verrez également une option d'effort de raisonnement, parfois étiquetée low, medium ou high. Elle détermine le temps et la réflexion que l'IA consacre à chaque étape du travail. Un effort de raisonnement plus élevé produit généralement un résultat plus abouti et mieux pesé, mais il prend plus de temps.
Cela compte à cause d'une limite d'usage expliquée dans la leçon suivante : un effort de raisonnement plus faible — low, ou medium dans certains cas — a plus de chances de terminer un site complet au sein d'une seule session de travail de cinq heures. Un effort plus élevé mettra très probablement plus de cinq heures à aboutir d'une traite, ce qui signifie que votre session s'interrompra en cours de route. Ce n'est pas un échec ; cela veut simplement dire que vous poursuivrez lors d'une session ultérieure, comme l'explique la leçon suivante — et le résultat final est en général un site de meilleure qualité.
Il n'y a pas de choix unique correct ici. Si vous préférez avoir un site terminé plus tôt, quitte à ce qu'il soit un peu plus simple, choisissez un effort de raisonnement plus faible. Si cela ne vous dérange pas de revenir plusieurs fois en échange d'un résultat plus abouti, choisissez-en un plus élevé. C'est entièrement votre décision, et les deux chemins aboutissent.
Claude Code a une limite d'usage qui se réinitialise toutes les cinq heures. Si vous l'atteignez pendant que votre agent travaille, celui-ci s'arrêtera simplement et vous dira qu'il doit attendre. Une fois cinq heures écoulées depuis le début de votre session, la limite se renouvelle et vous pouvez poursuivre en tapant un court message comme « Continue working ». Votre agent reprendra exactement là où il s'était arrêté, car sa progression est enregistrée, comme l'explique plus loin un autre module.
Il existe aussi une limite d'usage hebdomadaire distincte. Pour un projet de la taille du site que vous construisez dans ce cours, ce quota hebdomadaire suffit largement pour terminer en une seule semaine, même en tenant compte des pauses de cinq heures décrites ci-dessus.
Quoi qu'il arrive, retenez ceci : votre progression est toujours enregistrée. Revenir après une courte pause, après une nuit, ou même après des semaines ou des mois ne vous coûte rien. Votre agent reprend exactement là où vous l'avez laissé.
Claude Code vous laisse choisir à quel point il vous consulte avant d'apporter des modifications, via ce qu'il appelle Accept Edits ou Auto mode. Dans les modes les plus prudents, l'agent s'arrête et vous demande la permission avant chaque modification qu'il souhaite faire, ce qui vous oblige à rester devant l'écran à valider une petite étape après l'autre. En Auto mode, l'agent enchaîne de nombreuses étapes de lui-même, sans avoir besoin de votre accord à chaque fois.
Pour ce cours, Auto mode est généralement recommandé. Le site que vous construisez est une application légère qui ne demande pas l'accès à des parties sensibles de votre ordinateur : le risque de laisser l'agent avancer sans validation constante est donc faible, et cela vous permet de faire autre chose pendant qu'il travaille au lieu de rester assis à cliquer sur « valider » encore et encore.
Une précision importante : Auto mode ne signifie pas totalement sans surveillance. Vous devrez tout de même revenir vérifier de temps en temps où en est votre agent, en particulier lorsqu'il vous envoie une notification, car il continuera de s'arrêter aux véritables points de décision — valider un design, examiner le site terminé — que vous seul pouvez trancher.
Pendant que vous écrivez dans Claude Code, vous remarquerez parfois une suggestion grisée déjà présente dans le champ de message, qui vous montre un message pertinent à envoyer ensuite. Quand vous la voyez, vous pouvez appuyer sur la touche Tab de votre clavier pour insérer instantanément ce message suggéré dans le champ, au lieu de le taper vous-même. C'est un petit confort bon à connaître, car il reviendra tout au long de votre travail avec l'agent.
Lancer l'agent et le chemin qui vous attend
Module 11 · 2 lessons
Ouvrez Claude Code on the web et ouvrez-y le dépôt que vous avez créé précédemment à partir du modèle IndexDock Starter. Une fois votre modèle et votre mode choisis, comme vu dans le module précédent, tapez ou collez exactement ce message pour commencer :
Start or continue my IndexDock Starter website. Read the repository state first, tell me where we are, and guide me through the next approved step.
Envoyez ce message, et votre agent prendra le relais, en commençant par une courte série de questions.
La construction de votre site se déroule en une série d'étapes, et il est utile de savoir lesquelles avant d'être en plein dedans. Voici le parcours, en termes simples.
- Une courte étape de mise en place, où l'agent vérifie que tout est bien relié.
- Une courte étape de cadrage, où l'agent pose deux ou trois questions rapides pour confirmer que votre idée correspond à ce que ce Starter peut construire et, si besoin, propose une version plus simple qui convient.
- Une étape pour comprendre votre entreprise, où l'agent vous interroge sur votre activité, vos clients et ce que vous attendez du site.
- Une étape de design, où plusieurs directions visuelles différentes vous sont présentées et où vous choisissez celle qui vous plaît le plus.
- Une étape de construction, où l'agent écrit tout le code réel du site à partir de tout ce que vous avez validé.
- Une étape de contrôle qualité, où l'agent teste automatiquement le site qu'il a construit et corrige ce qu'il trouve.
- Une étape de publication, où votre site terminé et validé devient la version réelle et indexable que le public voit.
Chacune de ces étapes fait l'objet d'un module dédié plus loin dans ce cours, dans l'ordre où elles surviennent : vous aurez donc une explication plus complète de chacune juste avant de l'atteindre.
Dix étapes, dans l'ordre, de votre premier compte au site publié. Quatre sont des validations : tant que vous n'avez pas dit oui, la suivante ne commence pas.
Les quatre validations sont les seuls endroits où l'avancée dépend de vous et non de l'agent
Étape : comprendre votre entreprise
Module 12 · 3 lessons
Une fois l'étape de mise en place terminée, votre agent vous posera d'abord deux ou trois questions rapides de cadrage, simplement pour confirmer que votre idée correspond à ce que ce Starter peut construire. Si votre idée comprend quelque chose hors de ce cadre, l'agent proposera une version plus simple qui fonctionne bien malgré tout, plutôt que de vous éconduire.
Ce rapide contrôle fait, votre agent commencera à vous poser les vraies questions sur votre entreprise : ce que vous faites, qui sont vos clients idéaux, quels problèmes vous leur résolvez, quelles prestations vous proposez, ce qui vous distingue de la concurrence, ce que vous voulez que les visiteurs fassent sur votre site, et si vous disposez déjà de photos, de logos ou d'autres éléments.
L'agent pose toutes ces questions parce qu'il n'a pas le droit de deviner ni d'inventer des faits sur votre entreprise. Chaque affirmation de votre site fini doit venir de quelque chose que vous lui avez réellement dit. C'est une protection volontaire : votre site ne montrera jamais une statistique inventée, un faux avis client ou une promesse que vous n'avez jamais faite.
En répondant à ces questions, résistez à l'envie de rester bref ou vague. Plus vous donnez à l'agent de détails réels et précis sur votre entreprise, mieux il peut structurer votre site : quelles pages créer, quoi dire sur chacune et quels éléments mettre en avant. Des réponses vagues donnent un site générique ; des réponses détaillées donnent un site qui ressemble vraiment à votre entreprise.
Il n'y a pas d'excès de détail ici. Si un fait vous paraît petit ou évident au sujet de votre entreprise, mentionnez-le quand même. Vous êtes la seule source de vérité dont dispose l'agent.
Une fois vos questions d'entreprise traitées, l'agent réunira un ensemble récapitulant votre entreprise, la liste des pages que votre site comportera et le contenu de chacune. Lisez-le attentivement. Rien ne passe à l'étape de design tant que vous n'avez pas dit oui. Si quelque chose semble faux, manquant ou pas tout à fait juste, c'est précisément le moment de le dire, comme détaillé dans le module sur les demandes de modifications, plus loin dans ce cours.
Téléverser votre logo et vos photos
Module 13 · 3 lessons
C'est l'un des détails techniques les plus importants de tout ce cours : lisez-le attentivement. Si vous joignez un logo ou une photo directement dans votre conversation avec l'agent, celui-ci peut regarder l'image et décrire ce qu'il voit, mais il ne peut pas enregistrer le fichier réel de cette image dans votre site. Joindre une image au chat n'équivaut pas à la livrer. Si vous vous contentez de joindre des images dans la conversation, votre site fini ne les contiendra pas réellement, même si l'agent pouvait techniquement les voir.
Le seul moyen de faire entrer vos vrais fichiers de logo et de photos dans votre site est la méthode de téléversement décrite dans la leçon suivante.
Pourquoi un fichier bien visible dans le chat n'apparaît jamais sur votre site.
Joindre au chat
Le fichier n'est pas dans le dépôt — il n'est donc pas sur votre site.
LE CHAT NE FAIT QUE MONTRER
Téléverser dans le dépôt
FRANCHIT LA LIMITE → VIT SUR LE SITE
LE DÉPÔT CONSERVE
Quand votre agent aura besoin de votre logo ou de vos photos, il vous donnera un lien direct qui ouvre la page de téléversement de GitHub pour votre dépôt précis. Cliquez sur ce lien. Il vous mènera directement à une page prête à recevoir des fichiers, sans rien d'autre à chercher ni à choisir.
Sur cette page, faites glisser vos fichiers de logo ou de photos dans la zone de téléversement, ou utilisez le bouton pour les sélectionner depuis votre ordinateur. Une fois vos fichiers ajoutés, cliquez sur le bouton que GitHub a déjà sélectionné pour confirmer le téléversement. Vous n'avez pas besoin de choisir un dossier, de saisir un chemin de fichier ni de sélectionner une branche ; rien de tout cela n'est nécessaire. Une fois les fichiers téléversés de cette façon, dites-le à votre agent : il les trouvera et placera chacun exactement là où il doit être sur votre site.
Pas d'inquiétude si vous n'avez pas de logo. Dans ce cas, l'agent proposera un substitut simple et honnête — le nom de votre entreprise mis en forme dans une police choisie, ou son initiale ou ses initiales sous forme de marque simple — et vous le montrera pour validation avant de l'utiliser où que ce soit. Vous pourrez toujours le remplacer par un vrai logo plus tard, à n'importe quel moment de ce cours ou après.
Étape : design
Module 14 · 3 lessons
Une fois les informations sur votre entreprise validées, l'agent créera un petit nombre de directions visuelles différentes pour votre page d'accueil, généralement trois, ou deux si vos exemples pointent nettement dans une direction, afin que vous puissiez comparer de vraies options plutôt que d'en imaginer une à partir d'une description. Chacune utilisera votre contenu d'entreprise réel et validé, simplement présenté autrement : polices, couleurs, mises en page et impression générale différentes. Vous les regarderez et choisirez la direction qui convient le mieux à votre entreprise, ou demanderez des modifications.
Avant cette étape, rassemblez des captures d'écran de sites dont le design vous plaît sincèrement, pour n'importe quel type d'activité, pas nécessairement proche de la vôtre. Votre agent en demandera huit à quinze en une seule fois, et davantage sont les bienvenues. Elles passent par le même lien d'envoi GitHub que votre logo et vos photos, il est donc utile de les capturer à l'avance. Avoir de vrais exemples sous la main fait une différence énorme sur la fidélité du design final à ce que vous aviez en tête.
C'est encore plus utile si vous pouvez dire précisément ce qui vous plaît dans chaque exemple : est-ce la police, les couleurs, le fait que les boutons aient des angles droits ou arrondis, la quantité d'espace vide, la taille des images, ou tout autre chose ? Il en va de même pour ce que vous savez ne pas aimer en général, sur n'importe quel site que vous avez vu. Vous n'avez besoin ni d'être designer ni d'employer le vocabulaire exact du design pour l'expliquer. Toute description honnête avec vos propres mots, même imparfaite, donne à votre agent quelque chose de concret, et vaut bien mieux qu'aucune préférence exprimée.
Quand vos directions de design seront prêtes, l'agent vous les montrera sur un aperçu vivant et fonctionnel, pour que vous puissiez en juger correctement plutôt que de regarder une image figée. Examinez chacune attentivement. Plusieurs possibilités s'offrent à vous : valider celle qui vous plaît, demander une version révisée de celle qui vous plaît presque, les refuser toutes et demander une direction entièrement différente, ou panacher — par exemple, dire à l'agent que vous voulez un concept comme base mais avec un élément précis emprunté à un autre, comme sa palette de couleurs ou sa mise en page. Rien du design n'est définitif tant que vous ne l'avez pas validé : prenez donc votre temps ici.
Étape : construction et vérifications
Module 15 · 2 lessons
Une fois que vous validez une direction de design, l'agent passe à la construction du vrai site. En termes simples, il écrit le code sous-jacent du site, section après section, à partir du contenu d'entreprise que vous avez validé et du design que vous avez choisi. En chemin, il exécute aussi ses propres vérifications de base sur ce qu'il vient d'écrire et corrige ce qui est manifestement cassé avant de poursuivre.
Au-delà de cette première passe, une seconde série de vérifications plus approfondies s'exécute automatiquement en coulisses après que l'agent a enregistré son travail. Elle couvre notamment le bon affichage du site sur téléphone comme sur ordinateur, et le respect des normes d'accessibilité afin que les personnes utilisant des technologies d'assistance puissent aussi s'en servir. L'agent lit les résultats de ces vérifications et corrige ce qu'elles révèlent ; vous n'avez ni à lancer ni à surveiller cette étape.
Vous n'avez besoin de comprendre aucun détail technique derrière tout cela. Il est simplement utile de savoir que « construire » n'est pas une action unique et instantanée : cela se fait par couches, avec des vérifications à la fois pendant que l'agent écrit et, de nouveau, automatiquement ensuite.
Tout se joue aux contrôles. Réussis, la modification est à votre adresse. Échoués, votre site en ligne n'a pas bougé.
Adresse mise à jour
UNE À DEUX MINUTES
Site en ligne intact
Tout au long de l'étape de construction, votre site en ligne — à la même adresse que vous avez confirmée plus tôt dans ce cours — se met à jour tout seul à mesure que l'agent termine des parties du travail. Chaque fois que votre agent vous dit que c'est un bon moment pour regarder, ouvrez de nouveau cette adresse dans votre navigateur et examinez ce qui a changé. Vous n'avez jamais rien à faire pour qu'une mise à jour apparaisse ; elle se produit d'elle-même une fois que l'agent a enregistré son travail.
Le vrai prompt engineering : demander des modifications
Module 16 · 4 lessons
Une chose mérite d'être dite franchement : vous avez le droit — et vous êtes encouragé — à demander des modifications à tout moment de ce processus, que vous examiniez le récapitulatif de votre entreprise, votre design ou votre site terminé. Vous n'avez pas à vous sentir difficile ou ingrat parce que vous demandez que quelque chose soit différent. Dire clairement ce que vous voulez voir changer, à chaque étape, n'est pas un effet secondaire d'un bon usage de ces outils ; c'est la véritable compétence qu'implique le travail avec un agent IA. Ceux qui obtiennent les meilleurs résultats sont ceux qui regardent attentivement et demandent exactement ce qu'ils veulent, autant de fois qu'il le faut.
Un schéma simple rend les demandes de modification efficaces. Premièrement, regardez ce que l'agent vient de vous montrer : un récapitulatif, un design ou le site en ligne. Deuxièmement, examinez-le attentivement plutôt que d'y jeter un œil ; lisez le texte réel, observez les espacements et les couleurs, cliquez un peu partout s'il s'agit du site en ligne. Troisièmement, identifiez précisément ce qui est faux, ce qui manque ou ce qui pourrait être mieux. Quatrièmement, demandez exactement cette modification en langage simple. Répétez cette boucle autant de fois que nécessaire, à n'importe quelle étape, jusqu'à être sincèrement satisfait du résultat.
Quatre gestes en boucle. Chaque tour rapproche le site de ce que vous vouliez vraiment.
Si quelque chose sur votre site s'affiche mal d'une façon plus facile à montrer qu'à décrire, faites-en une capture d'écran et joignez-la à votre message à l'agent, accompagnée d'une description en langage simple de ce qui devrait être différent : en indiquant par exemple quelle partie de l'image vous visez et ce que vous aimeriez voir à la place. Une capture accompagnée d'une courte explication est souvent plus rapide et plus claire que de tenter de décrire un problème visuel avec des mots seuls.
- Sous Windows, appuyez simultanément sur la touche Windows, Maj et S pour ouvrir l'outil de capture, puis faites glisser sur la zone à capturer.
- Sur un Mac, appuyez simultanément sur Maj, Commande et 4, puis faites glisser sur la zone à capturer.
Comme beaucoup de visiteurs consulteront votre site sur un téléphone, il vaut la peine de le vérifier vous-même là aussi, et pas seulement sur l'ordinateur avec lequel vous avez travaillé. Envoyez-vous l'adresse en ligne de votre site d'une manière facile à ouvrir sur le téléphone : un message à vous-même dans une application de messagerie, ou un e-mail à votre propre adresse. Ouvrez ensuite ce lien dans le navigateur de votre téléphone et parcourez votre site comme le ferait un vrai visiteur : vérifiez que le texte est lisible, que les boutons sont faciles à toucher et que rien ne paraît comprimé ou coupé. Si vous repérez un problème, utilisez la même démarche de demande de modification décrite plus haut dans ce module.
Si ce que vous repérez est un problème visuel qui mérite d'être capturé, faites une capture d'écran directement sur votre téléphone, comme vous le feriez d'habitude. Ouvrez ensuite [claude.ai/code](https://claude.ai/code) dans le navigateur de votre téléphone, sélectionnez la conversation où se déroule le travail sur votre site, et joignez-y la capture à votre message, accompagnée d'une description en langage simple de ce qui devrait être différent.
Relier un vrai nom de domaine
Module 17 · 2 lessons
Pour l'instant, l'adresse de votre site se termine par workers.dev, une adresse gratuite que Cloudflare attribue à chaque projet. Un nom de domaine est une adresse web que vous choisissez et enregistrez spécialement pour votre entreprise, comme nomdevotreentreprise.fr : plus professionnelle et plus facile à retenir pour vos clients.
Une fois votre site terminé et à votre goût, votre agent vous guidera pour relier un vrai nom de domaine si vous en voulez un. Il vous montrera le nom de domaine exact disponible et le prix exact avant que quoi que ce soit ne se produise, et il attendra votre validation claire avant d'enregistrer ou d'acheter quoi que ce soit. Rien n'est jamais acheté automatiquement ni sans que vous ayez explicitement accepté le domaine et le prix exacts qui vous ont été présentés.
Si vous décidez de ne pas vouloir de domaine personnalisé pour le moment, c'est tout à fait bien. Votre site continue de fonctionner parfaitement à son adresse workers.dev, et vous pourrez toujours ajouter un vrai domaine plus tard.
Revenir plus tard : modifier après le lancement
Module 18 · 2 lessons
Une fois votre site publié, il n'est pas gravé dans le marbre. Vous pouvez revenir à tout moment, la semaine prochaine ou l'an prochain, rouvrir la même tâche avec votre agent, décrire ce que vous souhaitez changer, et l'agent s'en charge exactement comme il a construit le site la première fois. Il n'y a aucune configuration distincte à refaire et rien de plus à régler ; vous décrivez simplement la modification.
Toutes les modifications ne suivent pas exactement les mêmes étapes, mais vous n'avez jamais à déterminer de quel type est la vôtre ; l'agent s'en occupe automatiquement. Si vous demandez un vrai changement de direction de design, l'agent vous présente de nouvelles options et attend votre validation, comme la première fois. Si vous demandez un autre type de changement visible — un nouveau texte, une nouvelle page, une photo mise à jour —, l'agent effectue la modification, relance discrètement ses vérifications habituelles en coulisses et vous montre le résultat pour confirmation avant la mise en ligne. Si la modification est minime et purement interne, au point qu'aucun visiteur ne la remarquerait, elle peut être mise en ligne sans nouvelle validation de votre part. Dans tous les cas, votre site en ligne ne change jamais que pour quelque chose que vous avez vu et qui vous convient.
Pour finir
Module 19 · 4 lessons
Lorsque l'agent estime votre site achevé, il vous demandera d'examiner une dernière fois l'ensemble du site terminé avant qu'il ne devienne la version publique et réelle de votre site. Parcourez-le attentivement, comme décrit dans le module sur les demandes de modifications, et demandez tous les derniers ajustements que vous souhaitez avant de valider. C'est votre dernière occasion de demander des changements avant la publication.
Vous avez créé votre dépôt en privé dès le départ : il n'y a donc très probablement rien à changer ici. Ceci est une vérification finale. Votre site en ligne est public et le reste ; ce sont vos fichiers sur GitHub qui restent privés.
Ouvrez votre dépôt sur GitHub et regardez à côté de son nom, en haut de la page. Une petite étiquette indiquant Private devrait s'y trouver. Si elle indique Public, c'est que vous avez choisi l'autre option à la création : changez-la maintenant.
- Cliquez sur Settings.
- Restez sur l'onglet General.
- Descendez tout en bas, jusqu'à la section appelée Danger Zone.
- Cliquez sur Change visibility.
- Choisissez Make private, puis confirmez.
Dans les deux cas, votre site en ligne n'est pas affecté. Rendre un dépôt privé change qui peut lire vos fichiers, jamais qui peut visiter votre site.
Ce modèle et ce cours vous sont fournis tels quels, sans garantie de résultat. Il vaut mieux dire clairement où passe cette limite, pour que rien d'important ne reste sous-entendu.
- C'est un agent IA qui écrit le site, et il peut se tromper. Relisez ce qu'il produit avant de publier. Considérez-le comme un brouillon que vous approuvez, pas comme un travail professionnel fini.
- Aucune position, aucun trafic et aucun résultat commercial ne sont promis. Le site est construit pour que les moteurs de recherche et les assistants IA puissent le lire correctement. Qu'ils le placent bien, le citent ou vous envoient des clients, personne ne peut le garantir.
- Les services utilisés ici appartiennent à d'autres entreprises. GitHub, Cloudflare et Anthropic fixent leurs propres conditions, tarifs et disponibilités, et peuvent les changer à tout moment.
- Rien dans ce cours ne constitue un conseil juridique, fiscal ou professionnel. Un site d'entreprise a souvent besoin de sa propre politique de confidentialité, de mentions légales ou d'un bandeau cookies, selon votre pays et celui de vos clients. Cette partie-là, c'est à vous de la traiter correctement.
Rien de tout cela n'est une raison d'hésiter. C'est le même partage que ce cours décrit depuis le début : le travail technique est pris en charge, et la vérité sur votre entreprise reste la vôtre.
Il n'y a ni examen ni devoir à rendre à la fin de ce cours. Vous avez terminé lorsque votre site est en ligne et que votre dépôt est passé en privé, comme vu dans la leçon précédente. Voilà : vous possédez désormais un vrai site d'entreprise, fonctionnel, que vous avez construit sans écrire une seule ligne de code.
Si, plus tard, vous souhaitez aller plus loin — stratégie approfondie, étude de la concurrence, accompagnement continu de votre site —, IndexDock propose aussi des prestations professionnelles pour cela. Mais c'est entièrement facultatif : ce cours gratuit et le site que vous avez construit avec se suffisent à eux-mêmes.
Prêt à créer le vôtre ?
Le cours vous guide pas à pas. Le modèle est le projet que vous construisez en le suivant : copiez-le dans votre propre dépôt et l'agent fait le reste.