Comment créer sa première page web avec Claude Code ?

En clair, en 30 secondes

• Tu ouvres un dossier vide dans VS Code, tu décris ta page à Claude Code, et tu vois un premier résultat dans ton navigateur dès la première demande.
• Tu améliores ensuite par petites touches, en relisant chaque modification avant de l'accepter.
• Pour la publier, GitHub Pages, le service d'hébergement de GitHub, la met en ligne gratuitement si ton dépôt (le dossier de ton projet sur GitHub) est public.

Pour créer ta première page web avec Claude Code, tu ouvres un dossier vide dans VS Code et tu demandes à Claude de créer un seul fichier, index.html, à partir d'une description précise de ta page. Tu ouvres ce fichier dans ton navigateur pour voir le résultat, puis tu corriges une chose à la fois avant de la mettre en ligne.

En bref

• Commence petit : une seule page, un seul fichier index.html. Tu la vois tout de suite en double-cliquant dessus.
• Ta première demande (le brief) dit qui tu es, à quoi sert la page et ce qu'elle contient. Demande à Claude de te poser ses questions avant d'écrire.
• Teste sur une largeur de téléphone avant de publier, puis sur ton vrai téléphone une fois la page en ligne [1].

Il te faut Claude Code installé dans VS Code : lis d'abord « Comment installer Claude Code dans VS Code quand on débute ? ».

Étape 1 : crée un dossier vide et ouvre-le

1. Crée un dossier vide, par exemple ma-premiere-page. Claude Code travaille dans le dossier ouvert : un dossier dédié évite de mélanger ta page avec d'autres fichiers [3].
2. Ouvre-le dans VS Code. L'exercice « Ouvrir ton dossier de projet et poser ta première question » montre comment.
3. Si VS Code te demande si tu fais confiance aux auteurs des fichiers, accepte : c'est ton dossier. En mode restreint, l'extension Claude Code ne marche pas [3] [4].

Étape 2 : choisis un mode qui te laisse la main

En bas de la zone de saisie du panneau Claude, un indicateur affiche le mode de permission. Clique dessus et choisis [3] :

• Plan pour ta première demande : Claude décrit ce qu'il va faire et attend ton accord avant de toucher à quoi que ce soit ;
• Manual ensuite : Claude te montre chaque modification à côté de l'original, et tu acceptes ou refuses.

Étape 3 : donne ta demande de départ

Le brief, c'est la description de ce que tu veux. Plus il est précis, moins tu auras de corrections [5]. Copie ce modèle et remplace ce qui est entre crochets :

```text Je veux créer une page web personnelle simple. Je ne suis pas développeur.

Qui je suis : [ton prénom, ton métier ou ton projet, en une phrase]. À quoi sert la page : [par exemple, qu'on puisse me contacter pour un devis]. Ce qu'elle contient, dans cet ordre : [un titre, trois points forts, mes horaires, un bouton pour m'écrire]. Le ton : [chaleureux et simple].

Contraintes :

• un seul fichier index.html, sans outil à installer ;
• lisible sur téléphone ;
• textes provisoires entre crochets quand une info me manque ;
• aucune info privée (adresse personnelle, mot de passe).

Avant de créer quoi que ce soit, pose-moi tes questions une à la fois. Ensuite, propose-moi un plan court et attends mon accord. ```

Réponds à ses questions, relis le plan, puis valide-le. Pour t'entraîner à écrire ce brief, fais l'exercice « Cadrer ton projet en 5 lignes ».

Étape 4 : accepte ou refuse chaque modification

Ce que tu vois à l'écran en mode Manual : l'original et la proposition de Claude côte à côte, puis une demande de permission. Tu peux accepter, refuser, ou dire à Claude quoi faire à la place [3].

Ne clique pas sur Accepter par réflexe. Si tu ne comprends pas un passage, demande : « Explique-moi ce bloc en deux phrases simples. »

Étape 5 : regarde ta page

Dans ton explorateur de fichiers, double-clique sur index.html. La page s'ouvre dans ton navigateur. C'est ton premier résultat visible.

À chaque modification acceptée, recharge la page pour voir la dernière version : F5 sur Windows, Cmd + Maj + R dans Chrome sur Mac [11].

Étape 6 : améliore par petits morceaux

Une demande, une vérification, puis la suivante. Par exemple : « Agrandis le bouton de contact et mets-le en haut de la page. » Deux astuces pour être précis [3] :

• sélectionne un passage dans le fichier avant d'écrire ta demande : Claude voit le texte sélectionné ;
• colle une capture d'écran directement dans la zone de saisie pour montrer ce qui ne va pas.

L'exercice « Construire ta page par petits morceaux » te fait pratiquer ce rythme.

Tester sur mobile

Avant de publier, simule un téléphone dans Chrome [1] [6] :

1. Ouvre ta page, puis appuie sur F12 (Cmd + Option + I sur Mac) pour ouvrir les outils de développement.
2. Appuie sur Ctrl + Maj + M (Cmd + Maj + M sur Mac) pour afficher la barre des appareils.
3. Dans le menu Dimensions, choisis une largeur de téléphone, par exemple Mobile M (375px).

Cette simulation reste une approximation, prévient Google [1]. Donc, après la publication, ouvre l'adresse de ta page sur ton propre téléphone. Vérifie trois choses : le texte se lit sans zoomer, chaque bouton se touche facilement du doigt, et la page ne défile pas de gauche à droite. L'exercice « Tester ta page comme un visiteur » donne une liste complète.

Publier ta page avec GitHub Pages

GitHub Pages met en ligne des fichiers HTML, CSS et JavaScript directement depuis un dépôt, c'est-à-dire un dossier de projet stocké sur GitHub [2].

Les grandes lignes [7] [8] :

1. Ton dossier doit être envoyé sur GitHub. Avec un compte GitHub Free, le dépôt doit être public.
2. GitHub cherche un fichier d'entrée nommé index.html à la racine du dossier publié : c'est pour ça qu'on l'a appelé ainsi.
3. Sur GitHub, dans ton dépôt : Settings, puis Pages, puis Deploy from a branch. Choisis la branche, puis Save.
4. Attends : la publication peut prendre jusqu'à 10 minutes.
5. Ta page a une adresse de la forme https://ton-pseudo.github.io/nom-du-depot.

Le pas à pas complet est dans l'exercice « Mettre ta page en ligne avec GitHub Pages ». Avant, sauvegarde ton travail avec Git : VS Code s'en sert mais ne l'installe pas, il faut le faire à part [9].

Relis avant de publier. Un site GitHub Pages est visible par tout le monde sur internet [8]. Retire toute donnée sensible de ton dossier avant.

Les limites à connaître

• Pas de boutique. Selon GitHub, Pages ne doit pas servir d'hébergement gratuit pour une activité commerciale en ligne, un site de vente ou un site dont le but principal est de faciliter des transactions. Il ne doit pas non plus servir à envoyer des mots de passe ou des numéros de carte bancaire [10].
• Une taille plafonnée. Un site publié ne doit pas dépasser 1 Go, avec une limite souple de 100 Go de bande passante par mois [10].
• Un site statique. Pages héberge des sites statiques [2]. Un formulaire qui enregistre des messages, un espace client ou un paiement demandent d'autres outils.
• Claude se trompe parfois. C'est toi qui valides. Quand un problème apparaît, lis l'article « Claude Code fait une erreur : comment la décrire et la corriger ? ».

FAQ

Faut-il savoir coder pour créer cette page ?

Non. Tu décris, Claude écrit, tu vérifies. Prends quand même l'habitude de demander ce que fait chaque bloc : c'est le sujet de notre article sur les débutants et l'IA qui écrit du code.

Puis-je utiliser mon propre nom de domaine ?

Oui. GitHub Pages accepte ton propre nom de domaine à la place de l'adresse en github.io [2].

Mon dépôt peut-il rester privé ?

Avec GitHub Free, non : le dépôt doit être public pour utiliser Pages [7]. Et même sur une offre qui accepte un dépôt privé, le site publié reste public [8].

La suite

Pour enchaîner les 7 étapes, télécharge le guide Claude Code pour débutants, gratuit. Puis continue avec le parcours débutant.

Les mots de l'article, expliqués simplement

• Brief : la description de départ de ce que tu veux, donnée à Claude avant qu'il écrive.
• HTML : le langage qui décrit le contenu d'une page web.
• Mode de permission : le réglage qui décide si Claude te demande ton accord avant d'agir.
• Dépôt : un dossier de projet stocké sur GitHub, avec son historique.
• GitHub Pages : le service de GitHub qui met en ligne les fichiers d'un dépôt.

Sources

Pages consultées le 10 octobre 2026.

[1] Google. Simulate mobile devices with device mode. Chrome for Developers. https://developer.chrome.com/docs/devtools/device-mode

[2] GitHub. What is GitHub Pages?. GitHub Docs. https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages

[3] Anthropic. Use Claude Code in VS Code. Claude Code Docs. https://code.claude.com/docs/en/vs-code

[4] Microsoft. Workspace Trust. https://code.visualstudio.com/docs/editor/workspace-trust

[5] Anthropic. Best practices for Claude Code. Claude Code Docs. https://code.claude.com/docs/en/best-practices

[6] Google. Open Chrome DevTools. Chrome for Developers. https://developer.chrome.com/docs/devtools/open

[7] GitHub. Creating a GitHub Pages site. GitHub Docs. https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site

[8] GitHub. Configuring a publishing source for your GitHub Pages site. GitHub Docs. https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site

[9] Microsoft. Source Control in VS Code. https://code.visualstudio.com/docs/sourcecontrol/overview

[10] GitHub. GitHub Pages limits. GitHub Docs. https://docs.github.com/en/pages/getting-started-with-github-pages/github-pages-limits

[11] Google. Raccourcis clavier de Chrome. Aide Google Chrome. https://support.google.com/chrome/answer/157179?hl=fr

Par Kemy Guerouine, le 10 octobre 2026. Cet article a été rédigé pour Formez-vous à l'IA (FVIA).