Code HTML pour site web
Du prompt à la landing page publiable.
Une vraie page web en quinze minutes, sans toucher au code.
Cinq blocs incontournables
Bloc d'accroche
Titre fort, sous-titre clair, bouton d'action. La première seconde décide si le visiteur reste.
Trois bénéfices clés
Pas dix. Trois. Le visiteur scanne, il ne lit pas. Format icône + titre court + une phrase.
Témoignages ou logos
Citation client, étoiles, logo de référence. Pour rassurer celui qui hésite.
Objections anticipées
Les 3-4 questions que tout le monde se pose avant d'acheter. Réponses courtes, directes.
Appel à l'action final
Bloc dédié, contraste fort. Une seule action proposée — pas trois.
Un prompt structuré par bloc
Contexte
« Je suis [métier], pour [cible], qui propose [offre]. La landing doit servir à [objectif]. »
Consigne
« Crée une landing page complète en HTML/CSS, single-page, responsive, sans framework. »
Données
« Brand colors : terracotta #a8472a et crème #faf7f2. Témoignages : [coller 2-3 vrais témoignages]. »
Format
« Cinq blocs : hero, valeur, preuve, FAQ, CTA. Style sobre, espacé, typographie serif pour les titres. »
Le prompt complet
Contexte + consigne + données + format. Une fois pour toutes.
Première version
Claude génère la landing entière en un artefact. Rendu immédiat dans le panneau.
Premier zoom
Voir le hero, les bénéfices, la preuve sociale.
FAQ et CTA
Scroll dans le panneau pour vérifier les sections du bas.
Cinq retouches typiques
« Rends les boutons plus contrastés »
Claude ajuste sans tout réécrire. Itération rapide.
« Plus d'espace entre les sections »
Le respiratoire change radicalement la perception de qualité.
« Vérifie le rendu mobile »
Claude ajoute les media queries manquantes. Toujours tester sur petit écran.
« Le sous-titre est trop long, fais 15 mots max »
L'écrit pour le web n'est pas l'écrit pour le print. Plus court, plus direct.
Du panneau au monde entier
Bouton Publish
En haut à droite du panneau d'artefact. Un clic, un lien public est généré.
URL partageable
Format claude.site/p/abc123. Vous pouvez l'envoyer en SMS, par mail, l'afficher sur LinkedIn.
Pas de maintenance
Anthropic héberge, met à jour, sécurise. Vous payez zéro et n'avez rien à administrer.
Limites à connaître
Pas de domaine personnalisé, pas de base de données, pas d'authentification. Pour ça : exportez le HTML et hébergez ailleurs.
Pour aller plus loin
Téléchargez l'HTML, déposez-le sur Netlify, Vercel, ou un FTP classique. Hébergement gratuit ou à 5€/mois.
Bon réflexe
Avant Publish, vérifiez qu'aucune donnée sensible n'est dans la page — adresses, téléphones perso, informations clients.
À tout de suite en leçon 08
Vous savez générer une landing page complète, l'itérer rapidement, et la publier. Sans une ligne de code écrite à la main.
Exercice — appropriation
Générez une mini-landing page d'une seule section qui présente votre activité. Hero avec accroche, trois points-clés, formulaire de contact factice. Testez Publish et partagez le lien à un proche pour avoir un avis.
Quiz · Code HTML pour site web
8 questions · une seule bonne réponse par question · vous pouvez recommencer autant de fois que nécessaire.
Combien de blocs incontournables structurent une bonne landing page ?
Cinq blocs : hero (accroche), valeur (3 bénéfices clés), preuve (témoignages/logos), FAQ (objections), CTA (appel à l'action final).
Combien de bénéfices clés faut-il mettre dans le bloc valeur d'une landing ?
Trois bénéfices. Pas dix. Le visiteur scanne, il ne lit pas. Format icône + titre court + une phrase.
Le bloc CTA final doit proposer plusieurs actions différentes pour laisser le choix au visiteur.
Faux. Un CTA final = une seule action proposée, pas trois. Contraste fort, message clair. Plusieurs CTAs diluent la décision.
Que génère le bouton « Publish » sur un artefact landing page ?
Publish génère un lien public partageable au format claude.site/p/abc123. Anthropic héberge gratuitement, met à jour, sécurise.
Quelles limites a une landing publiée via Publish ?
Limites : pas de domaine personnalisé, pas de base de données, pas d'authentification. Pour ces fonctionnalités : télécharger le HTML et héberger sur Netlify, Vercel ou FTP.
Pour itérer rapidement sur une landing, il vaut mieux régénérer entièrement à chaque fois plutôt que d'ajuster.
Faux. Claude ajuste sans tout réécrire. « Rends les boutons plus contrastés », « Plus d'espace entre sections », « Vérifie le rendu mobile » — chaque itération est rapide et ciblée.
Que faire si vous voulez un domaine personnalisé pour votre landing générée par Claude ?
Téléchargez l'HTML avec le bouton Download, puis hébergez sur Netlify (gratuit), Vercel (gratuit) ou un FTP classique (~5€/mois). Vous gardez le contrôle complet.
Avant de publier une landing, il faut vérifier qu'aucune donnée sensible (adresse perso, téléphone, info client) n'y figure.
Vrai. Publish génère un lien public. Le réflexe : avant Publish, vérifier qu'aucune donnée privée n'apparaît dans le code ou le contenu.