Samedi matin, 9h. Un étudiant de terminale ouvre son ordinateur. Vendredi soir, il avait une idée. Dimanche à 18h, il avait un site en ligne, accessible depuis n'importe quel téléphone dans le monde, avec un formulaire de contact fonctionnel et un design qu'il avait choisi lui-même.

Il n'avait jamais écrit une ligne de HTML de sa vie.

Ce scénario n'est pas exceptionnel. Il est reproductible. Et si tu as une idée, un projet, un service à présenter, une landing page à construire : ce guide est pour toi.

Claude Code est un outil en ligne de commande créé par Anthropic. Il permet de construire des projets numériques complets en décrivant ce que tu veux en français, ou dans la langue de ton choix. Il génère le code, corrige les erreurs, adapte le design, déploie. Pas à la perfection, pas tout seul, mais avec toi : en dialogue.

Ce tutoriel couvre les 48h du week-end, de l'installation à la mise en ligne.

Avant de commencer : ce dont tu as besoin

Avant de lancer quoi que ce soit, vérifie que tu as :

Prévois aussi : une idée claire de ce que tu veux construire. Pas un roman, pas un cahier des charges de 15 pages. Deux paragraphes suffisent. Qu'est-ce que le site doit faire ? Pour qui ? À quoi doit-il ressembler grossièrement ?

Vendredi soir : préparer le brief (30 minutes)

La première erreur que font presque tous les débutants : lancer Claude Code avant d'avoir réfléchi. L'IA est rapide. Toi, tu dois être clair.

Prends une feuille, numérique ou papier, et réponds à ces quatre questions :

1. C'est quoi le site ?

Un portfolio ? Une landing page pour un service ? Un blog ? Un outil qui fait quelque chose de précis ?

2. Qui va le visiter ?

Des recruteurs ? Des clients potentiels ? Des amis à qui tu veux montrer un projet ?

3. Qu'est-ce que tu veux que le visiteur fasse ?

Te contacter ? S'inscrire à une liste email ? Lire tes articles ? Acheter quelque chose ?

4. À quoi ça doit ressembler ?

Simple et épuré, coloré et dynamique, professionnel et sobre ? Note deux ou trois adjectifs.

Voici un exemple de brief concret :

"Je veux un site vitrine pour proposer des cours de guitare dans ma ville. La page d'accueil présente mes tarifs, mon parcours en quelques lignes et un formulaire de contact. Design simple, couleurs sombres, ambiance musicale sans être kitsch. Un seul objectif : que les parents d'élèves m'envoient un message."

Ce brief va piloter tout le week-end. Plus il est précis, plus Claude Code sera efficace.

Samedi matin : installer Claude Code et créer le projet (1h)

Installer Claude Code

Ouvre le terminal de ton ordinateur. Sur Mac, c'est l'application "Terminal". Sur Windows, cherche "PowerShell" dans le menu démarrer.

Tape cette commande et appuie sur Entrée :

```

npm install -g @anthropic-ai/claude-code

```

L'installation prend deux à trois minutes.

Ensuite, lance Claude Code avec :

```

claude

```

Il te demandera de te connecter à ton compte Anthropic. Suis les instructions à l'écran.

Créer le dossier du projet

Crée un dossier vide quelque part sur ton ordinateur. Appelle-le comme ton projet : `cours-guitare`, `portfolio-sarah`, `landing-projet-x`. Dans le terminal, navigue jusqu'à ce dossier avec la commande `cd` suivie du chemin, puis lance Claude Code depuis ce dossier.

Sur Mac, tu peux aussi glisser le dossier dans le terminal après avoir tapé `cd ` pour obtenir le chemin automatiquement.

Donner la première instruction

C'est le moment. Tu vas coller ton brief dans Claude Code. Ne sois pas timide, ne simplifie pas. Donne-lui tout.

Exemple :

"Crée un site vitrine d'une page pour un professeur de guitare. La page contient : un titre accrocheur avec slogan, une section 'Mes cours' avec trois offres et leurs tarifs, une section 'Mon parcours' avec un court texte, et un formulaire de contact avec nom, email et message. Design sobre avec un fond foncé (#1a1a2e), texte blanc, et accents en orange doux (#e07b39). Le site doit être responsive et fonctionner sur mobile."

Claude Code va générer une arborescence complète : fichiers HTML, CSS, peut-être un peu de JavaScript pour le formulaire. Il va te présenter ce qu'il fait au fur et à mesure. Lis-le. Tu n'as pas besoin de comprendre chaque ligne, mais suis le fil.

Samedi milieu de journée : itérer et affiner (3 à 4h)

C'est la phase la plus longue et la plus instructive.

Claude Code a produit une première version. Pour la voir, ouvre le fichier `index.html` dans ton navigateur (clic droit, "Ouvrir avec", ton navigateur). C'est votre version de travail locale.

Elle ne ressemble probablement pas exactement à ce que tu imaginais. C'est normal. C'est le début, pas la fin.

Comment formuler les corrections

La règle d'or : une correction à la fois, formulée précisément.

Pas ça :

"C'est pas terrible, refais le design"

Ça :

"La section des tarifs a les trois cartes trop collées les unes aux autres. Ajoute plus d'espace entre elles. Et change la couleur de fond des cartes en blanc cassé (#f5f0eb) avec une légère ombre."

Plus tu es précis, plus le résultat correspond à ce que tu voulais. Si tu ne sais pas comment nommer quelque chose, décris ce que tu vois et ce que tu voudrais voir à la place.

Ce que Claude Code gère bien

Ce qui demande plus de précision

Pour les formulaires de contact, la solution la plus simple est Formspree. Crée un compte gratuit sur formspree.io, récupère ton endpoint de formulaire, et demande à Claude Code : "Connecte le formulaire à Formspree avec cet endpoint : [ton endpoint]". Il s'en charge en deux minutes.

Samedi soir : peaufiner et tester (2h)

Avant de mettre en ligne, fais une revue sérieuse.

Teste sur mobile. Dans ton navigateur, appuie sur F12 pour ouvrir les outils de développement. Clique sur l'icône de téléphone en haut. Est-ce que le site s'affiche bien sur un écran de 390px de large (iPhone standard) ?

Vérifie les textes. Les fautes, les formulations maladroites, les majuscules manquantes. Claude Code génère du contenu exemple, tu dois le remplacer par le vrai.

Teste le formulaire. Si tu l'as branché à Formspree, envoie un test depuis ton propre site. Reçois-tu bien le message dans ta boîte email ?

Lis le titre et la description de la page. Dans le fichier HTML, il y a une section `` avec un `` et une balise `<meta name="description">`. Vérifie que ces deux éléments décrivent correctement ton site. Ce sont eux que Google et les réseaux sociaux lisent quand quelqu'un partage ton lien.</p> <p>Si quelque chose ne va pas, retourne voir Claude Code avec une description précise du problème. Cette boucle test/correction/test est le coeur du travail.</p> <h2>Dimanche matin : mettre en ligne avec Vercel (30 minutes)</h2> <p>C'est le moment de rendre le site accessible au monde.</p> <h3>Créer un dépôt Git</h3> <p>Si tu n'as jamais utilisé Git, voici le minimum pour ce week-end.</p> <p>Dans ton terminal, dans le dossier du projet, tape :</p> <p>```</p> <p>git init</p> <p>git add .</p> <p>git commit -m "Premier commit du site"</p> <p>```</p> <p>Puis crée un compte sur GitHub si tu n'en as pas, crée un nouveau dépôt (repository), et suis les instructions pour pousser ton code. GitHub affiche exactement les commandes à copier-coller.</p> <h3>Déployer sur Vercel</h3> <p>Sur <a href="https://vercel.com">vercel.com</a>, connecte-toi avec ton compte GitHub. Clique sur "Add New Project", sélectionne ton dépôt, et valide. Vercel détecte automatiquement que c'est un site statique et le déploie en moins de deux minutes.</p> <p>Tu obtiens une URL du type `ton-projet.vercel.app`. C'est ton site, en ligne, accessible depuis n'importe quel appareil.</p> <p>Si tu veux ton propre nom de domaine (type `monguitare.fr`), tu peux en acheter un pour environ 10-15 euros par an sur Namecheap ou OVH, puis le brancher à Vercel en quelques clics depuis le tableau de bord.</p> <h2>Ce que tu sais faire maintenant</h2> <p>En 48h, sans formation technique préalable, tu as appris à :</p> <ul> <li>Écrire un brief technique utilisable par un outil IA</li> <li>Créer une arborescence HTML/CSS complète</li> <li>Itérer sur un design par instructions en langage naturel</li> <li>Connecter un formulaire à un service d'envoi d'emails</li> <li>Utiliser Git pour versionner ton code</li> <li>Déployer un site en production sur Vercel</li> </ul> <p>Ces compétences ne font pas de toi un développeur professionnel. Mais elles te donnent quelque chose de concret : la capacité de créer et publier un outil numérique seul, rapidement, pour tester une idée sans dépendre d'un prestataire.</p> <p>C'est précisément ce que l'Anthropic Economic Index de 2026 décrit comme le changement le plus significatif induit par l'IA générative : la compression du délai entre l'idée et la mise en ligne, qui passe de semaines à heures pour des projets de complexité faible à moyenne.</p> <h2>Les limites à connaître honnêtement</h2> <p>Claude Code ne fait pas tout. Les projets qui nécessitent une base de données dynamique, un espace membre avec authentification, ou des traitements complexes côté serveur demanderont soit des compétences techniques réelles, soit un développeur.</p> <p>Ce que tu as construit ce week-end : un site statique. Très adapté à une landing page, un portfolio, un site vitrine, une page de présentation. Pas adapté à une marketplace, un outil SaaS, ou une application mobile.</p> <p>La frontière n'est pas rigide. Avec quelques semaines de pratique supplémentaires, tu peux aller plus loin. Mais le week-end vous permettra de valider une idée, de créer une présence en ligne professionnelle, ou de lancer une offre simplement.</p> <h2>La prochaine étape</h2> <p>Si ce que tu as construit ce week-end est le début d'un vrai projet, les questions qui arrivent ensuite sont celles de la croissance : comment trouver les premiers utilisateurs, comment itérer sur le produit, comment transformer un site en activité réelle.</p> <p>C'est exactement ce que nous travaillons au Launch Lab : construire, tester, ajuster, en neuf mois, avec des outils IA et un cadre structuré. Si tu veux en savoir plus sur ce que ressemble concrètement cette année, tu peux <a href="/blog/annee-cesure-creer-entreprise-ia">lire comment une année de césure peut devenir une expérience fondatrice</a>, ou explorer <a href="/summer">notre programme</a> directement.</p> <p>Ce que tu viens de faire ce week-end, beaucoup ne le font jamais. Ils attendent d'avoir les compétences parfaites. Toi, tu as commencé.</p> </article> <div class="author-bio"> <div class="author-avatar">LL</div> <div class="author-info"> <h4>L’équipe du Launch Lab</h4> <p>Ingénieurs, entrepreneurs et pédagogues. 25 ans d’expérience cumulée en création d’entreprise, intelligence artificielle et accompagnement de jeunes. Nous écrivons ici ce que nous aurions voulu lire avant de lancer nos propres projets.</p> </div> </div> <div class="article-cta"> <h3>Votre enfant a un profil atypique ?</h3> <p>20 places pour la rentrée de septembre 2026. Les entretiens ont commencé.</p> <a href="/quiz-entrepreneur">Découvrir si le Launch Lab est fait pour lui →</a> </div> <footer class="blog-footer"> <p><a href="/">Le launch lab</a>, Première école d’entrepreneuriat IA en France</p> <p style="margin-top: 0.5rem;"><a href="/blog">Blog</a> · <a href="/eleves">Pour les élèves</a> · <a href="/bootcamp">Weekend Claude Code/Codex</a></p> </footer> </body> </html>