Ton identité web · Leçon 1/11Claude Code, ton constructeur
Claude Code, ton constructeur 🏗️
Tu as installé Claude et rempli ta fiche d'identité dans le socle (Module 3). Ici, tu vas t'en servir autrement : plus pour écrire, mais pour construire. Ton site, tes pages, ta page de liens, ton portfolio, ton app : tout ce module sort de Claude Code.
📁
Ce que Claude Code lit avant de construire
Dans ton dossier de projet, Claude Code retrouve deux fichiers que tu as créés au socle, et il s'en sert à chaque page :
🪪
FICHE D'IDENTITÉ.md qui tu es, ce que tu vends, à qui : c'est ce qui rend les textes justes
🎨
CHARTEGRAPHIQUE.md tes couleurs et tes polices : c'est ce qui rend les pages cohérentes
💡 Pas encore faits ? Passe d'abord par le Module 3 · Claude & ton identité. Sans ces deux fichiers, les leçons de ce module produiront des pages génériques.
Ton identité web · Leçon 2/11Le guide des effets web
Le guide des effets web 🪄
Comme pour tes photos, il te faut le bon mot pour bien guider l'IA. Chaque effet ci-dessous est vivant : tape dessus pour le voir jouer, puis copie la phrase toute prête pour l'ajouter à ta page.
🌈
Fonds & ambiances5▼
DÉGRADÉ ANIMÉ→ fonds de hero, pages de vente, sections d'intro
Ton accroche ici
AURORA (taches floues en mouvement)→ fonds de section plus atmosphériques, pages produit
Contenu par-dessus
VERRE DÉPOLI (glassmorphism)→ cartes qui flottent sur une image ou un dégradé
Carte en verre
GRAIN (texture subtile)→ donner du relief à un fond uni, effet moins "plat"
Fond avec grain
HALO LUMINEUX (qui pulse doucement)→ mettre en valeur une image ou un titre sur fond sombre
Halo derrière le sujet
🔤
Typographies5▼
KICKER + TITRE (petit label au-dessus)→ annoncer une section, style éditorial
Nouvelle collectionLe minimalisme, réinventé
TEXTE DÉGRADÉ→ mettre un mot en valeur sans encadré ni couleur pleine
Studio Créatif
SOULIGNEMENT QUI SE DESSINE→ liens de menu, mots-clés dans un texte
Découvrir l'offre
tape pour lancer
MACHINE À ÉCRIRE (texte qui s'écrit)→ accroche de hero, message qui doit se remarquer
|
tape pour rejouer
SURLIGNAGE MARQUEUR→ mettre un mot-clé en valeur dans une phrase
le mot important
tape pour lancer
🔘
Boutons & CTA4▼
GROSSIT AU SURVOL→ le bouton d'action principal, celui qui doit se remarquertape pour lancer
LUEUR PULSANTE→ attirer l'œil sur LE bouton qui compte, sans en abuser
FLÈCHE QUI GLISSE→ boutons "en savoir plus", "découvrir", liens de navigationtape pour lancer
VAGUE AU CLIC (ripple)→ boutons importants, pour un retour tactile satisfaisanttape le bouton pour l'essayer
⚡
Urgence & engagement4▼
ÉLÉMENT FLOTTANT→ badge promo, pastille "nouveau", attirer l'œil sans être agressif
🔥 -20% aujourd'hui
BOUTON FIXE (suit le scroll)→ garder ton bouton d'action visible en permanence sur une page longue
Fais défiler ce petit encadré vers le bas…
…le bouton en dessous reste collé, même quand tu scrolles.
C'est exactement l'effet obtenu sur une vraie page.
COMPTE À REBOURS→ créer de l'urgence avant la fin d'une offre ou d'un lancement
02H
:
14MIN
:
33SEC
BADGE QUI PULSE→ signaler une info limitée (places restantes, stock)
3 places restantes
🗂️
Cartes & sections5▼
SE SOULÈVE AU SURVOL→ grilles d'offres, de témoignages, de réalisations
Ma carte
tape pour lancer
BORDURE QUI TOURNE→ mettre une seule carte en avant (l'offre recommandée)
Offre populaire
IMAGE QUI ZOOME→ galeries, portfolio, aperçus de réalisations
Survole l'image
tape pour lancer
CARTE QUI SE RETOURNE (flip)→ révéler plus d'infos sans surcharger la carte de départ
Recto
Verso
tape pour lancer
SÉPARATEUR EN VAGUE→ transition douce entre deux sections de couleurs différentes
✨
Animations d'apparition5▼
FONDU AU SCROLL→ chaque section de ta page, pour un effet vivant sans être criard
Cette section apparaît
tape pour rejouer
CASCADE (l'un après l'autre)→ une liste de points, des icônes, des étapes
Étape 1Étape 2Étape 3
tape pour rejouer
COMPTEUR ANIMÉ→ tes chiffres clés (nombre de clientes, d'abonnés, d'avis)
0
tape pour rejouer
BARRE DE PROGRESSION→ taux de satisfaction, avancement, statistique à mettre en scène
Satisfaction client82%
tape pour rejouer
GLISSADE DEPUIS LES CÔTÉS→ 2 éléments qui se répondent (avant/après, problème/solution)
Depuis la gauche
Depuis la droite
tape pour rejouer
🔍
Détails qui font pro3▼
OMBRE DOUCE→ partout où tu veux du relief sans dureté
Carte avec ombre douce
SÉPARATEUR DÉGRADÉ→ remplacer les lignes de séparation trop franches
MICRO-CLIC (effet d'enfoncement)→ tous tes boutons, pour que ça se sente réactif au tap
💡 Garde cette page dans tes favoris (le petit cœur en haut 💛) : tu vas y revenir à chaque page que tu construis dans ce module.
Ton identité web · Leçon 3/11Tes pages de conversion
Tes pages de conversion 💰
Ce sont les pages qui font agir un visiteur : découvre-les ci-dessous.
📖
Quelle page pour quel besoin ?
+
Site vitrine
ta carte d'identité en ligne : qui tu es, ce que tu fais, comment te contacter. Pas de vente directe, juste la confiance.
Page de vente
une seule offre, un seul objectif : faire acheter. Chaque section pousse vers le bouton d'achat.
Page de capture
un cadeau gratuit contre un email, pour construire ta liste. Toujours suivie d'une page de remerciement.
📌 Claude a déjà ta fiche d'identité et ta charte graphique (leçon 2) : il connaît ton activité, ton offre, ta cible et tes couleurs. Réponds seulement à ce qui est propre à cette page.
🌐
Site vitrine
Une page, trois questions
Trois questions suffisent à convaincre : pourquoi toi, qu'est-ce que ça change pour ton visiteur, comment te joindre. Le reste n'est que décor.
✓
Copie le prompt généré ci-dessous
Prompt · Ton site vitrine
✓
Clique sur "Télécharger" puis clique sur les "…" en haut à droite, télécharge le fichier et range-le dans ton dossier de projet
Écris le nom de ton projet et colle le prompt tel quelLaisse Claude générer ta page.
✓
Ouvre le fichier et découvre ta pageDouble-clique dessus, ou glisse-le dans un onglet de ton navigateur.
✓
Des détails ne te plaisent pas ? Dis-le directement à Claude, dans la discussion"Le bouton est trop grand", "je veux la photo plus haute"… il ajuste.
✓
La page te convient ? Télécharge le fichier htmlC'est celui que tu mettras en ligne juste après.
🎁
Capture & remerciement
Le duo qui alimente ta liste email
Un cadeau gratuit contre un email, puis une confirmation qui indique la suite. Deux pages, une seule génération, même charte.
📌 Ce formulaire fonctionne tout seul, de A à Z avec Netlify : pas besoin de Systeme.io, Brevo ou un autre outil d'emailing. Une fois ta page déployée (leçon suivante), tes emails apparaissent automatiquement dans ton tableau de bord Netlify, onglet "Forms".
✓
Copie le prompt généré ci-dessous
Prompt · Ta capture et ta page de remerciement
✓
Clique sur "Télécharger" puis clique sur les "…" en haut à droite pour les 2 templates, télécharge-les et range-les dans ton dossier de projet
Écris le nom de ton projet et colle le prompt tel quelLaisse Claude générer ta page.
✓
Ouvre les 2 fichiers et découvre tes pagesDouble-clique dessus, ou glisse-les dans un onglet de ton navigateur.
✓
Des détails ne te plaisent pas ? Dis-le directement à Claude, dans la discussion"Le bouton est trop grand", "je veux la photo plus haute"… il ajuste.
✓
Les pages te conviennent ? Télécharge les 2 fichiers htmlCe sont eux que tu mettras en ligne juste après.
☁️
Avant de publier
+
Ta page a besoin d'une adresse pour exister sur internet et pour ça on utilise Netlify.
✓
Crée un compte sur netlify.comAvec ton email, en 2 minutes.
✓
Le plan Free suffit largementPas besoin de payer quoi que ce soit pour une page de conversion.
✓
C'est quoi "déployer" ?Publier ton site en ligne pour qu'il soit accessible avec une adresse, il faudra le refaire à chaque fois que tu voudras mettre ta page à jour. Attention : déployer te coûte des crédits ! Tu en as 300/mois sur le plan gratuit et un déploiement te coûte 15 crédits.
🚀
Mets-la en ligne
+
✓
Crée un fichier zip avec à l'intérieur ton fichier html et les médias utilisés dans ton fichier html (logo, photos, vidéos…)Sélectionne-les tous, puis "Compresser" (Mac) ou "Envoyer vers → Dossier compressé" (Windows).
✓
Sur Netlify, clique sur "Add new project"C'est le bouton en haut à droite de ton tableau de bord.
✓
Pour déployer ton site, dépose ton fichier zip dans la zone "Upload your project files"Glisse-le directement dedans, ou clique sur "browse files to upload". Ton site est en ligne en quelques secondes.
✓
Nom de domaine personnalisé (facultatif)Tu peux très bien garder l'adresse Netlify automatique et passer à l'étape suivante. Si tu veux ta propre adresse (ex : tonsite.com), achète-la sur Infomaniak, puis reviens ici et clique sur "Domain management" dans le menu de gauche pour la relier à ton site.
✓
Personnalise ton adresse en cliquant sur "Quick setup"Netlify te propose une adresse lisible à choisir, à la place de la suite de lettres par défaut.
💡 Pour changer quelque chose plus tard : tu redemandes à Claude, tu refais un zip, tu redéposes. Le site se met à jour. Pas de plugin, pas de mise à jour de sécurité, pas de facture mensuelle (juste tes crédits de déploiement, vus plus haut).
Ton identité web · Leçon 4/11Ta page de liens premium
Ta page de liens premium 🔗
C'est le seul lien de ta bio Instagram. C'est ici que tu ajoutes tes pages de conversion, tes freebies, tes réseaux sociaux (Instagram, TikTok, YouTube…).
⚖️
Page personnalisée vs Linktree, Beacons…
+
VS
Chez qui elle vit
✕
Locataire de leur plateforme : leur marque, leur domaine, pas le tien
✓
100% chez toi : ton nom de domaine, ta marque, zéro trace d'un outil tiers
Mise en page
✕
Une liste de boutons empilés, zéro liberté
✓
Vidéo, storytelling, effets : autant de sections que tu veux
Style
✕
Reconnue entre mille : le même template que des millions d'autres
✓
Unique : ton univers, elle ne ressemble à aucune autre
Prix
✕
Stats, liens illimités… les vraies fonctions sont payantes
✓
Gratuite à vie, tu la fais évoluer avec Claude, à l'infini
🪄
Donne tes infos à Claude
📌 Ajoute tous les médias photos et/ou vidéos dans ton dossier de projet xyz que tu veux voir apparaître sur ta page de liens, et renomme-les en fonction de leur utilité.
Claude ne peut utiliser que ce qu'il trouve dans ce dossier : dépose-les avant de continuer !
✓
Copie le prompt généré ci-dessous
Prompt · Ta page de liens
✓
Clique sur "Télécharger" puis clique sur les "…" en haut à droite, télécharge le fichier et range-le dans ton dossier de projet
Écris le nom de ton projet et colle le prompt tel quelLaisse Claude générer ta page.
✓
Ouvre le fichier et découvre ta page de liens premiumDouble-clique dessus, ou glisse-le dans un onglet de ton navigateur.
✓
Des détails ne te plaisent pas ? Dis-le directement à Claude, dans la discussion"Le bouton est trop grand", "je veux la photo plus haute"… il ajuste.
✓
La page te convient ? Télécharge le fichier htmlC'est celui que tu mettras en ligne juste après.
☁️
Avant de publier
+
Ta page a besoin d'une adresse pour exister sur internet et pour ça on utilise Netlify.
✓
Crée un compte sur netlify.comAvec ton email, en 2 minutes.
✓
Le plan Free suffit largementPas besoin de payer quoi que ce soit pour une page de liens.
✓
C'est quoi "déployer" ?Publier ton site en ligne pour qu'il soit accessible avec une adresse, il faudra le refaire à chaque fois que tu voudras mettre ta page à jour. Attention : déployer te coûte des crédits ! Tu en as 300/mois sur le plan gratuit et un déploiement te coûte 15 crédits.
🚀
Mets-la en ligne
+
✓
Crée un fichier zip avec à l'intérieur ton fichier html et les médias utilisés dans ton fichier html (logo, photos, vidéos…)Sélectionne-les tous, puis "Compresser" (Mac) ou "Envoyer vers → Dossier compressé" (Windows).
✓
Sur Netlify, clique sur "Add new project"C'est le bouton en haut à droite de ton tableau de bord.
✓
Pour déployer ton site, dépose ton fichier zip dans la zone "Upload your project files"Glisse-le directement dedans, ou clique sur "browse files to upload". Ton site est en ligne en quelques secondes.
✓
Nom de domaine personnalisé (facultatif)Tu peux très bien garder l'adresse Netlify automatique et passer à l'étape suivante. Si tu veux ta propre adresse (ex : tonsite.com), achète-la sur Infomaniak, puis reviens ici et clique sur "Domain management" dans le menu de gauche pour la relier à ton site.
✓
Personnalise ton adresse (avec ou sans ton domaine) en cliquant sur "Quick setup"Netlify te propose une adresse lisible à choisir, à la place de la suite de lettres par défaut.
✓
Ajoute le lien dans ta bio Instagram🎉 Ta page de liens premium est en ligne.
💡 Pour changer quelque chose plus tard : tu redemandes à Claude, tu refais un zip, tu redéposes. Le site se met à jour. Pas de plugin, pas de mise à jour de sécurité, pas de facture mensuelle (juste tes crédits de déploiement, vus plus haut).
Ton identité web · Leçon 5/11Ton guide & ta présentation
Ton guide & ta présentation 📖
Ici, tu crées un document qui se lit écran par écran : un guide à offrir, un ebook à vendre, ou une présentation pour tes masterclass et rendez-vous.
💡
Bon à savoir avant de commencer
+
Claude crée ton document comme il crée tes pages : un fichier que tu partages avec un simple lien, ou que tu exportes en PDF si tu préfères. À toi de choisir.
Et le template n'est qu'un point de départ : demande ensuite à Claude d'ajouter des images, des vidéos, des effets… presque tout est possible.
📖
Ton ebook
Couverture, sommaire, contenu, conclusion
Un document qui se lit seul, page par page. À héberger avec un lien, ou à exporter en PDF si tu préfères.
✓
Copie le prompt généré ci-dessous
Prompt · Ton ebook
✓
Clique sur "Télécharger" puis clique sur les "…" en haut à droite, télécharge le fichier et range-le dans ton dossier de projet
Écris le nom de ton projet et colle le prompt tel quelLaisse Claude générer ta présentation.
✓
Ouvre le fichier et découvre ta présentationDouble-clique dessus, ou glisse-le dans un onglet de ton navigateur.
✓
Des détails ne te plaisent pas ? Dis-le directement à Claude, dans la discussion"Le titre est trop grand", "ajoute une diapo"… il ajuste.
✓
Ta présentation te convient ? Télécharge le fichier htmlC'est celui que tu ouvriras en plein écran pour la projeter.
☁️
Avant de publier
+
Comme tes autres pages, ton ebook ou ta présentation a besoin d'une adresse pour exister sur internet et pour ça on utilise Netlify.
✓
Crée un compte sur netlify.comAvec ton email, en 2 minutes.
✓
Le plan Free suffit largementPas besoin de payer quoi que ce soit pour un ebook ou une présentation.
✓
C'est quoi "déployer" ?Publier ton site en ligne pour qu'il soit accessible avec une adresse, il faudra le refaire à chaque fois que tu voudras mettre ta page à jour. Attention : déployer te coûte des crédits ! Tu en as 300/mois sur le plan gratuit et un déploiement te coûte 15 crédits.
🚀
Mets-la en ligne
+
✓
Crée un fichier zip avec à l'intérieur ton fichier html et les médias utilisés dans ton fichier html (logo, photos, vidéos…)Sélectionne-les tous, puis "Compresser" (Mac) ou "Envoyer vers → Dossier compressé" (Windows).
✓
Sur Netlify, clique sur "Add new project"C'est le bouton en haut à droite de ton tableau de bord.
✓
Pour déployer ton site, dépose ton fichier zip dans la zone "Upload your project files"Glisse-le directement dedans, ou clique sur "browse files to upload". Ton site est en ligne en quelques secondes.
✓
Nom de domaine personnalisé (facultatif)Tu peux très bien garder l'adresse Netlify automatique et passer à l'étape suivante. Si tu veux ta propre adresse (ex : tonsite.com), achète-la sur Infomaniak, puis reviens ici et clique sur "Domain management" dans le menu de gauche pour la relier à ton site.
✓
Personnalise ton adresse en cliquant sur "Quick setup"Netlify te propose une adresse lisible à choisir, à la place de la suite de lettres par défaut.
💡 Pour changer quelque chose plus tard : tu redemandes à Claude, tu refais un zip, tu redéposes. Le site se met à jour. Pas de plugin, pas de mise à jour de sécurité, pas de facture mensuelle (juste tes crédits de déploiement, vus plus haut).
🖨️
Tu préfères un PDF à télécharger ? (facultatif)
+
Pas besoin d'exporter en PDF si tu partages déjà ton document par lien, que ce soit un ebook ou une présentation : c'est juste une option, si jamais tu veux un fichier téléchargeable.
Option 1 · Depuis ton navigateur
✓
Ouvre ton fichier index.html directement dans ton navigateur
✓
Fais Cmd/Ctrl + P (imprimer)
✓
Choisis "Enregistrer en PDF" comme destination
✓
Vérifie qu'aucune page n'est coupéeSi besoin, redemande à l'IA d'ajuster les marges pour l'impression.
Option 2 · Demande à Claude
✓
Dis-lui simplement, dans la discussion : "transforme ce fichier en PDF"Il s'occupe de l'export à ta place.
Ton identité web · Leçon 6/11Ton site scrollytelling, 3D et interactif
Ton site scrollytelling, 3D et interactif 🎥
Le scroll ne fait plus défiler la page : il pilote une caméra, fait basculer un objet, fait répondre un outil. Tu peux appliquer ça à un seul élément, à une section, ou à un site entier. Même méthode dans les trois cas : tu décris l'effet, Claude Code l'écrit.
🎚️
Trois niveaux, à toi de choisir
+
1
Un élément ton produit en 3D, un titre qui réagit à la souris, un calculateur dans un coin : 5 minutes, sur une page que tu as déjà
2
Une section un seul bloc de ta page dont l'image zoome au scroll, ou des couches qui glissent : le reste de la page ne bouge pas
3
Un site entier le scrollytelling : une seule photo, et la caméra qui voyage dedans du haut en bas de la page. Pour une entrée mémorable, un projet à part
👀
Regarde l'effet, en vrai
+
Un vrai site livré à une cliente immobilière : ce n'est pas une vidéo, c'est UNE SEULE photo, et la caméra qui zoome dedans au fil du scroll.
Exemple : Léman Privé, agence immobilière de prestige.
🧩
Animer un élément ou une section
🧊
La profondeur 3D ton produit ou ton visuel qui bascule en perspective quand on bouge la souris ou qu'on scrolle, comme un objet qu'on tient en main
Prompt · Effet 3D sur un élément
Sur ma page [nom], ajoute un effet de profondeur 3D sur [le visuel produit / la carte principale] : l'élément bascule légèrement en perspective en suivant la souris sur ordinateur, et suit le scroll sur téléphone, avec une ombre qui se déplace. Effet subtil (jamais plus de 12 degrés), fluide, sans bibliothèque externe, désactivé si la personne a réduit les animations. Garde ma charte et le reste de la page identiques.
🪂
Les couches qui glissent fond, sujet et texte qui avancent à des vitesses différentes au scroll : la section prend du relief
Prompt · Couches qui glissent
Sur la section [nom de la section] de ma page, ajoute un effet de parallaxe : le fond, le sujet (image ou visuel principal) et le texte avancent à trois vitesses différentes quand on scrolle, le fond le plus lentement, le texte le plus vite. L'effet doit être subtil, fluide, jamais saccadé, et rester lisible. Le reste de la page défile normalement. Sur mobile, réduis l'amplitude ou désactive l'effet si ça ralentit.
🎥
Le scrollytelling sur une section l'image de ce bloc reste fixe et la caméra zoome dedans pendant qu'on scrolle, le reste de la page défile normalement
Prompt · Scrollytelling sur une section
Sur la section [nom de la section] de ma page, ajoute un effet scrollytelling : l'image de fond de cette section reste fixe pendant qu'on la scrolle, et la caméra zoome doucement vers [le détail à mettre en valeur], puis se déplace vers [un deuxième détail]. Le texte de la section apparaît par-dessus, en fondu, à mi-parcours.
Le reste de la page défile normalement : l'effet ne concerne que cette section. Mouvement fluide, jamais saccadé. Sur mobile, garde l'effet simple (un seul zoom lent) pour que ça reste rapide.
🎛️
L'outil interactif un calculateur, un quiz, un configurateur : le visiteur touche, la page répond, il repart avec un résultat à lui
Prompt · Outil interactif
Sur ma page [nom], ajoute [un calculateur de … / un quiz de 5 questions qui … / un configurateur qui …]. Le visiteur répond, le résultat s'affiche sans recharger la page, dans ma charte, avec un bouton final vers [mon offre / ma page de contact]. Mobile d'abord, aucune donnée envoyée nulle part sauf si la personne clique sur le bouton. Montre-moi une maquette avant de coder.
✓
Copie le prompt de l'effet que tu veux
✓
Ouvre Claude Code et la discussion de ta pageCelle où tu as construit la page (leçons 3 à 6). Si elle n'existe plus, ouvre ton projet web et glisse le fichier html dans la discussion.
✓
Colle le prompt et dis-lui oùRemplace les crochets : « seulement sur l'image du hero », « seulement la section Résultats ». Sans ça, il applique l'effet partout.
✓
Ouvre le fichier et teste sur ton téléphoneDouble-clique dessus, ou glisse-le dans un onglet de ton navigateur.
✓
Ajuste dans la discussion, puis remets la page en ligne« Moins fort », « plus lent », « retire-le sur mobile » : il corrige. Puis même manipulation que « Mets-la en ligne » (leçon 3).
🎬
Un site scrollytelling entier
🏛️
Immobilier de prestige, hôtellerie, lieux d'exception on visite un endroit avant même d'y mettre les pieds
🎨
Portfolio ou site d'agence l'effet EST la preuve de ton niveau, avant même le premier mot lu
💍
Produit ou marque haut de gamme une pièce de joaillerie, une collection capsule, un lancement événement
🖼️ Choisis une photo large et nette (paysage, haute résolution : la caméra va zoomer dedans) et repère 3 à 5 détails à mettre en valeur.
✓
Copie le prompt généré ci-dessous
Prompt · Ton site scrollytelling
✓
Clique sur "Claude Code" clique sur "Nouveau"
✓
Écris le nom de ton projet, colle le prompt tel quel et joins ta photoLaisse Claude Code écrire la page.
✓
Ouvre le fichier et teste le scrollDouble-clique dessus, ou glisse-le dans un onglet de ton navigateur. Teste aussi sur ton téléphone.
✓
Des détails ne te plaisent pas ? Dis-le directement à Claude, dans la discussion« L'arrêt 2 arrive trop vite », « zoome moins sur l'arrêt 3 » : il ajuste.
✓
La page te convient ? Télécharge le fichier html et mets-la en ligneMême manipulation que « Mets-la en ligne » à la leçon 3.
Ton identité web · Leçon 7/11Ta page de rendez-vous
Ta page de rendez-vous 📅
Un appel découverte, une consultation, un essai : les gens réservent seuls, dans ton agenda, sans un seul message échangé. Une page à ta charte, un calendrier dedans, et le lien en bio.
📅
Pourquoi une page de réservation
+
⏱️
Zéro ping-pong de messages « Tu es dispo quand ? » disparaît : la personne choisit un créneau libre, c'est confirmé
🌙
Ça réserve pendant que tu dors une visiteuse à 23h prend rendez-vous pour jeudi, tu le découvres au réveil
🎯
Un rendez-vous, un cadre durée, lieu (visio, téléphone, sur place), questions à remplir avant : tout est fixé d'avance
🔗
Un seul lien partout bio Instagram, page de liens, site vitrine, DM : le même lien, la même page
🗓️
Crée ton compte Cal.com (gratuit)
+
Cal.com gère le calendrier (créneaux, fuseau horaire, rappels, visio). Ta page, elle, l'habille à ta charte.
1
Crée ton compte et connecte ton agenda Google ou Apple : il bloque automatiquement tes créneaux déjà pris
2
Crée un type d'événement ex : « Appel découverte · 30 min » : durée, lieu (Google Meet, téléphone, adresse), tes disponibilités
3
Ajoute 1 ou 2 questions à remplir « Ton activité ? », « Ton objectif ? » : tu arrives en rendez-vous en sachant à qui tu parles
4
Copie le lien de l'événement c'est lui que tu colles ci-dessous
Tu utilises déjà Calendly ? Même principe, colle son lien.
📅
Ta page de rendez-vous
Décris-la, Claude Code la construit autour de ton calendrier
✓
Copie le prompt généré ci-dessous
Prompt · Ta page de rendez-vous
✓
Clique sur "Claude Code" clique sur "Nouveau"
✓
Écris le nom de ton projet et colle le prompt tel quelLaisse Claude générer ta page.
✓
Ouvre le fichier et découvre ta pageDouble-clique dessus, ou glisse-le dans un onglet de ton navigateur. Teste aussi sur ton téléphone.
✓
Des détails ne te plaisent pas ? Dis-le directement à Claude, dans la discussion"Le bouton est trop grand", "je veux la photo plus haute"… il ajuste.
✓
La page te convient ? Télécharge le fichier htmlC'est celui que tu mettras en ligne juste après.
☁️
Avant de publier
+
Ta page a besoin d'une adresse pour exister sur internet et pour ça on utilise Netlify.
✓
Crée un compte sur netlify.comAvec ton email, en 2 minutes.
✓
Le plan Free suffit largementPas besoin de payer quoi que ce soit pour une page de conversion.
✓
C'est quoi "déployer" ?Publier ton site en ligne pour qu'il soit accessible avec une adresse, il faudra le refaire à chaque fois que tu voudras mettre ta page à jour. Attention : déployer te coûte des crédits ! Tu en as 300/mois sur le plan gratuit et un déploiement te coûte 15 crédits.
🚀
Mets-la en ligne
+
✓
Crée un fichier zip avec à l'intérieur ton fichier html et les médias utilisés dans ton fichier html (logo, photos, vidéos…)Sélectionne-les tous, puis "Compresser" (Mac) ou "Envoyer vers → Dossier compressé" (Windows).
✓
Sur Netlify, clique sur "Add new project"C'est le bouton en haut à droite de ton tableau de bord.
✓
Pour déployer ton site, dépose ton fichier zip dans la zone "Upload your project files"Glisse-le directement dedans, ou clique sur "browse files to upload". Ton site est en ligne en quelques secondes.
✓
Nom de domaine personnalisé (facultatif)Tu peux très bien garder l'adresse Netlify automatique et passer à l'étape suivante. Si tu veux ta propre adresse (ex : tonsite.com), achète-la sur Infomaniak, puis reviens ici et clique sur "Domain management" dans le menu de gauche pour la relier à ton site.
✓
Personnalise ton adresse en cliquant sur "Quick setup"Netlify te propose une adresse lisible à choisir, à la place de la suite de lettres par défaut.
💡 Pour changer quelque chose plus tard : tu redemandes à Claude, tu refais un zip, tu redéposes. Le site se met à jour. Pas de plugin, pas de mise à jour de sécurité, pas de facture mensuelle (juste tes crédits de déploiement, vus plus haut).
Tu vends un service, un atelier, un produit digital : pas besoin d'une boutique. Un lien de paiement Stripe, un bouton sur ta page, et l'argent arrive sur ton compte.
💳
Quand un lien de paiement suffit
+
✅
Un service, un atelier, un accompagnement un prix, un bouton, c'est réglé : pas besoin de panier ni de stock
✅
Un produit digital un guide, une formation courte, un template : le paiement puis un email avec l'accès
✅
Un acompte ou une réservation 30 % maintenant, le reste plus tard : deux liens
🛒
Plusieurs produits, des variantes, du stock là, il te faut une vraie boutique (Shopify) : ce n'est pas cette leçon
🔐
Crée ton lien de paiement Stripe
+
Stripe encaisse par carte, Apple Pay, Google Pay, et Klarna si tu l'actives. Le lien se crée en deux minutes, sans code.
1
Crée ton compte Stripe identité, IBAN : c'est là que l'argent arrive
2
Crée un lien de paiement Paiements → Liens de paiement → nouveau : nom de l'offre, prix, devise, et une image si tu veux
3
Règle ce qui se passe après message de confirmation, ou redirection vers ta page de remerciement (leçon 3)
4
Copie le lien il commence par buy.stripe.com : c'est lui que tu colles ci-dessous
Écris le nom de ton projet et colle le prompt tel quelLaisse Claude générer ta page.
✓
Ouvre le fichier et découvre ta pageDouble-clique dessus, ou glisse-le dans un onglet de ton navigateur. Teste aussi sur ton téléphone.
✓
Des détails ne te plaisent pas ? Dis-le directement à Claude, dans la discussion"Le bouton est trop grand", "je veux la photo plus haute"… il ajuste.
✓
La page te convient ? Télécharge le fichier htmlC'est celui que tu mettras en ligne juste après.
☁️
Avant de publier
+
Ta page de commande a besoin d'une adresse pour exister sur internet et pour ça on utilise Netlify.
✓
Crée un compte sur netlify.comAvec ton email, en 2 minutes.
✓
Le plan Free suffit largementPas besoin de payer quoi que ce soit pour une page de conversion.
✓
C'est quoi "déployer" ?Publier ton site en ligne pour qu'il soit accessible avec une adresse, il faudra le refaire à chaque fois que tu voudras mettre ta page à jour. Attention : déployer te coûte des crédits ! Tu en as 300/mois sur le plan gratuit et un déploiement te coûte 15 crédits.
🚀
Mets-la en ligne
+
✓
Crée un fichier zip avec à l'intérieur ton fichier html et les médias utilisés dans ton fichier html (logo, photos, vidéos…)Sélectionne-les tous, puis "Compresser" (Mac) ou "Envoyer vers → Dossier compressé" (Windows).
✓
Sur Netlify, clique sur "Add new project"C'est le bouton en haut à droite de ton tableau de bord.
✓
Pour déployer ton site, dépose ton fichier zip dans la zone "Upload your project files"Glisse-le directement dedans, ou clique sur "browse files to upload". Ton site est en ligne en quelques secondes.
✓
Nom de domaine personnalisé (facultatif)Tu peux très bien garder l'adresse Netlify automatique et passer à l'étape suivante. Si tu veux ta propre adresse (ex : tonsite.com), achète-la sur Infomaniak, puis reviens ici et clique sur "Domain management" dans le menu de gauche pour la relier à ton site.
✓
Personnalise ton adresse en cliquant sur "Quick setup"Netlify te propose une adresse lisible à choisir, à la place de la suite de lettres par défaut.
💡 Pour changer quelque chose plus tard : tu redemandes à Claude, tu refais un zip, tu redéposes. Le site se met à jour. Pas de plugin, pas de mise à jour de sécurité, pas de facture mensuelle (juste tes crédits de déploiement, vus plus haut).
Les mêmes questions reviennent en DM, en commentaire, par email. Une page qui y répond une fois pour toutes, dans ton ton : tu envoies le lien au lieu de réécrire. C'est aussi la base de ton SAV automatisé (Automatiser ton business, leçon 4).
❓
Pourquoi une page FAQ
+
📉
Moins de messages délais, tailles, retours, paiement : 80 % des questions ont une réponse écrite d'avance
🤝
Plus de confiance une FAQ honnête rassure avant l'achat : la personne trouve la réponse sans oser demander
🔗
Un lien à envoyer « Regarde ici 👉 » remplace un pavé réécrit pour la dixième fois
🔎
Google et les IA adorent une vraie question, une vraie réponse : c'est exactement ce qu'ils citent
❓
Ta page FAQ
Tes questions, tes réponses fermes, Claude Code écrit la page en accordéons
✓
Copie le prompt généré ci-dessous
Prompt · Ta page FAQ
✓
Clique sur "Claude Code" clique sur "Nouveau"
✓
Écris le nom de ton projet et colle le prompt tel quelLaisse Claude générer ta page.
✓
Ouvre le fichier et découvre ta pageDouble-clique dessus, ou glisse-le dans un onglet de ton navigateur. Teste aussi sur ton téléphone.
✓
Des détails ne te plaisent pas ? Dis-le directement à Claude, dans la discussion"Le bouton est trop grand", "je veux la photo plus haute"… il ajuste.
✓
La page te convient ? Télécharge le fichier htmlC'est celui que tu mettras en ligne juste après.
☁️
Avant de publier
+
Ta page FAQ a besoin d'une adresse pour exister sur internet et pour ça on utilise Netlify.
✓
Crée un compte sur netlify.comAvec ton email, en 2 minutes.
✓
Le plan Free suffit largementPas besoin de payer quoi que ce soit pour une page de conversion.
✓
C'est quoi "déployer" ?Publier ton site en ligne pour qu'il soit accessible avec une adresse, il faudra le refaire à chaque fois que tu voudras mettre ta page à jour. Attention : déployer te coûte des crédits ! Tu en as 300/mois sur le plan gratuit et un déploiement te coûte 15 crédits.
🚀
Mets-la en ligne
+
✓
Crée un fichier zip avec à l'intérieur ton fichier html et les médias utilisés dans ton fichier html (logo, photos, vidéos…)Sélectionne-les tous, puis "Compresser" (Mac) ou "Envoyer vers → Dossier compressé" (Windows).
✓
Sur Netlify, clique sur "Add new project"C'est le bouton en haut à droite de ton tableau de bord.
✓
Pour déployer ton site, dépose ton fichier zip dans la zone "Upload your project files"Glisse-le directement dedans, ou clique sur "browse files to upload". Ton site est en ligne en quelques secondes.
✓
Nom de domaine personnalisé (facultatif)Tu peux très bien garder l'adresse Netlify automatique et passer à l'étape suivante. Si tu veux ta propre adresse (ex : tonsite.com), achète-la sur Infomaniak, puis reviens ici et clique sur "Domain management" dans le menu de gauche pour la relier à ton site.
✓
Personnalise ton adresse en cliquant sur "Quick setup"Netlify te propose une adresse lisible à choisir, à la place de la suite de lettres par défaut.
💡 Pour changer quelque chose plus tard : tu redemandes à Claude, tu refais un zip, tu redéposes. Le site se met à jour. Pas de plugin, pas de mise à jour de sécurité, pas de facture mensuelle (juste tes crédits de déploiement, vus plus haut).
Mentions légales, conditions de vente, politique de confidentialité : obligatoires dès que tu as un site, un formulaire ou que tu vends. Personne n'aime les écrire. Claude Code les génère à partir de tes infos, tu vérifies, tu publies.
⚖️
Ce qui est obligatoire, et quand
+
🪪
Mentions légales dès que tu as un site : qui tu es (nom, statut, SIRET), comment te joindre, qui héberge (Netlify)
📜
Conditions générales de vente dès que tu vends en ligne : prix, paiement, livraison, rétractation, garanties
🔒
Politique de confidentialité dès que tu collectes un email ou un nom (formulaire, capture, rendez-vous) : quoi, pourquoi, combien de temps, les droits
🍪
Bandeau cookies seulement si tu utilises des outils qui en posent (statistiques, pixel) : pas de pixel, pas de bandeau
⚠️ Ces pages sont générées à partir de modèles courants. Si tu vends, fais-les relire une fois par un professionnel : c'est toi qui es responsable de leur contenu.
⚖️
Tes 3 pages légales
Tes infos, Claude Code écrit les 3 fichiers dans ta charte
✓
Copie le prompt généré ci-dessous
Prompt · Tes pages légales
✓
Clique sur "Claude Code" clique sur "Nouveau"
✓
Écris le nom de ton projet et colle le prompt tel quelIl crée mentions-legales.html, cgv.html et confidentialite.html, et ajoute les liens en bas de tes pages. Laisse Claude générer ta page.
✓
Ouvre le fichier et découvre ta pageDouble-clique dessus, ou glisse-le dans un onglet de ton navigateur. Teste aussi sur ton téléphone.
✓
Des détails ne te plaisent pas ? Dis-le directement à Claude, dans la discussion"Le bouton est trop grand", "je veux la photo plus haute"… il ajuste.
✓
La page te convient ? Télécharge le fichier htmlC'est celui que tu mettras en ligne juste après.
☁️
Avant de publier
+
Ces pages ont a besoin d'une adresse pour exister sur internet et pour ça on utilise Netlify.
✓
Crée un compte sur netlify.comAvec ton email, en 2 minutes.
✓
Le plan Free suffit largementPas besoin de payer quoi que ce soit pour une page de conversion.
✓
C'est quoi "déployer" ?Publier ton site en ligne pour qu'il soit accessible avec une adresse, il faudra le refaire à chaque fois que tu voudras mettre ta page à jour. Attention : déployer te coûte des crédits ! Tu en as 300/mois sur le plan gratuit et un déploiement te coûte 15 crédits.
🚀
Mets-la en ligne
+
✓
Crée un fichier zip avec à l'intérieur ton fichier html et les médias utilisés dans ton fichier html (logo, photos, vidéos…)Sélectionne-les tous, puis "Compresser" (Mac) ou "Envoyer vers → Dossier compressé" (Windows).
✓
Sur Netlify, clique sur "Add new project"C'est le bouton en haut à droite de ton tableau de bord.
✓
Pour déployer ton site, dépose ton fichier zip dans la zone "Upload your project files"Glisse-le directement dedans, ou clique sur "browse files to upload". Ton site est en ligne en quelques secondes.
✓
Nom de domaine personnalisé (facultatif)Tu peux très bien garder l'adresse Netlify automatique et passer à l'étape suivante. Si tu veux ta propre adresse (ex : tonsite.com), achète-la sur Infomaniak, puis reviens ici et clique sur "Domain management" dans le menu de gauche pour la relier à ton site.
✓
Personnalise ton adresse en cliquant sur "Quick setup"Netlify te propose une adresse lisible à choisir, à la place de la suite de lettres par défaut.
💡 Pour changer quelque chose plus tard : tu redemandes à Claude, tu refais un zip, tu redéposes. Le site se met à jour. Pas de plugin, pas de mise à jour de sécurité, pas de facture mensuelle (juste tes crédits de déploiement, vus plus haut).
Ton identité web · Leçon 11/11Être trouvée par Google et les IA
Être trouvée par Google et les IA 🔎
Une belle page que personne ne trouve ne sert à rien. Ici, tu apprends ce que Google et ChatGPT lisent sur une page, et Claude Code règle tout ça sur les tiennes sans toucher au design.
🔎
Ce que Google et les IA lisent
+
🏷️
Le titre et la description les deux lignes qui s'affichent dans les résultats : elles doivent contenir les mots que tes clientes tapent
🧱
La structure un seul grand titre, des sous-titres clairs, des paragraphes courts : l'IA comprend de quoi parle la page
🖼️
Les images décrites chaque image a une description en texte (alt) : Google ne voit pas les photos, il les lit
🗺️
Le plan du site sitemap, robots, et un fichier llms.txt qui explique aux IA qui tu es et ce que tu proposes
📍
Ta zone si tu travailles localement, ta ville dans les textes et une fiche Google Business
🔎
Optimise une page
Une page à la fois. Commence par ta page d'accueil ou ta page de vente
✓
Copie le prompt généré ci-dessous
Prompt · Ton référencement
✓
Clique sur "Claude Code" clique sur "Nouveau"
✓
Écris le nom de ton projet et colle le prompt tel quelIl modifie ta page existante : titre, description, structure, images, sitemap, robots, llms.txt. Le design ne bouge pas. Laisse Claude générer ta page.
✓
Ouvre le fichier et découvre ta pageDouble-clique dessus, ou glisse-le dans un onglet de ton navigateur. Teste aussi sur ton téléphone.
✓
Des détails ne te plaisent pas ? Dis-le directement à Claude, dans la discussion"Le bouton est trop grand", "je veux la photo plus haute"… il ajuste.
✓
La page te convient ? Télécharge le fichier htmlC'est celui que tu mettras en ligne juste après.
🧭
Déclare ton site à Google
+
Une fois la page remise en ligne, dis-le à Google au lieu d'attendre qu'il passe.
1
Ouvre Google Search Console connecte-toi avec ton compte Google et ajoute ton site (type « préfixe d'URL »)
2
Prouve que c'est le tien Google te donne un petit fichier ou une balise : demande à Claude Code de l'ajouter, redéploie
3
Envoie ton sitemap Sitemaps → colle sitemap.xml → envoyer. Google passe dans les jours qui suivent
4
Regarde une fois par mois quelles expressions t'amènent des visites : c'est ta prochaine page à écrire
Ta page optimisée a besoin d'une adresse pour exister sur internet et pour ça on utilise Netlify.
✓
Crée un compte sur netlify.comAvec ton email, en 2 minutes.
✓
Le plan Free suffit largementPas besoin de payer quoi que ce soit pour une page de conversion.
✓
C'est quoi "déployer" ?Publier ton site en ligne pour qu'il soit accessible avec une adresse, il faudra le refaire à chaque fois que tu voudras mettre ta page à jour. Attention : déployer te coûte des crédits ! Tu en as 300/mois sur le plan gratuit et un déploiement te coûte 15 crédits.
🚀
Mets-la en ligne
+
✓
Crée un fichier zip avec à l'intérieur ton fichier html et les médias utilisés dans ton fichier html (logo, photos, vidéos…)Sélectionne-les tous, puis "Compresser" (Mac) ou "Envoyer vers → Dossier compressé" (Windows).
✓
Sur Netlify, clique sur "Add new project"C'est le bouton en haut à droite de ton tableau de bord.
✓
Pour déployer ton site, dépose ton fichier zip dans la zone "Upload your project files"Glisse-le directement dedans, ou clique sur "browse files to upload". Ton site est en ligne en quelques secondes.
✓
Nom de domaine personnalisé (facultatif)Tu peux très bien garder l'adresse Netlify automatique et passer à l'étape suivante. Si tu veux ta propre adresse (ex : tonsite.com), achète-la sur Infomaniak, puis reviens ici et clique sur "Domain management" dans le menu de gauche pour la relier à ton site.
✓
Personnalise ton adresse en cliquant sur "Quick setup"Netlify te propose une adresse lisible à choisir, à la place de la suite de lettres par défaut.
💡 Pour changer quelque chose plus tard : tu redemandes à Claude, tu refais un zip, tu redéposes. Le site se met à jour. Pas de plugin, pas de mise à jour de sécurité, pas de facture mensuelle (juste tes crédits de déploiement, vus plus haut).
