Ton premier site d'une page, pas à pas

On passe à la pratique. L'objectif : un site vitrine d'une seule page, sur ton ordinateur, que tu peux ouvrir dans ton navigateur et tester en version téléphone. On suit le chemin le plus simple, avec un assistant de conversation (ChatGPT, Claude, Gemini). En fin de leçon, tu verras comment faire la même chose avec les autres familles d'outils.

L'exemple suivi : Salon Coralie, coiffeuse dans un village.

Étape 1 : prépare ton contenu avant le code

L'IA peut inventer une mise en page. Elle ne doit pas inventer ton contenu. Rassemble dans une note :

• ton nom, ton métier, ta ville ;
• un texte de présentation de 5 à 8 lignes (la ressource Les prompts pour écrire tout son site t'aide à l'écrire) ;
• tes prestations, une ligne chacune ;
• tes horaires, ton adresse, ton téléphone, ton e-mail ;
• l'action principale : appeler, réserver, venir.

Choisis aussi 3 à 5 photos. Allège-les avant (un outil gratuit comme Squoosh le fait dans le navigateur) : des photos de plusieurs mégaoctets ralentissent ta page sur téléphone.

Étape 2 : crée ton dossier

Sur ton ordinateur, crée un dossier salon-coralie (sans accent ni espace, c'est plus sûr). À l'intérieur, crée un dossier images et mets-y tes photos, renommées simplement : salon.jpg, coupe.jpg, coralie.jpg.

Étape 3 : le cahier des charges

Colle ce prompt dans ton assistant, en remplaçant les [crochets] par ta note.

Tu es un développeur web soigneux. Crée le site vitrine d'une seule page de mon activité.

Contraintes techniques :
- un seul fichier index.html, avec le CSS dans une balise <style>, sans framework ni bibliothèque externe ;
- pensé d'abord pour le téléphone, puis adapté aux grands écrans ;
- textes en français, encodage UTF-8, balise <html lang="fr"> ;
- une balise <title> et une meta description que tu me proposes ;
- les images sont dans le dossier images/ : [noms des fichiers], chacune avec un texte alternatif ;
- le numéro de téléphone cliquable (lien tel:) et l'adresse cliquable vers une carte ;
- aucun cookie, aucun outil de statistiques, aucun formulaire pour l'instant ;
- un code commenté simplement, pour que je comprenne chaque partie.

Contenu (ne rien inventer, ne rien ajouter) :
[ta note complète]

Style : [par exemple sobre et chaleureux, couleurs : vert sauge et blanc cassé, police lisible].
Sections : en-tête avec nom et bouton d'action, présentation, prestations, photos, horaires, contact, pied de page avec un lien « Mentions légales ».

Donne-moi le fichier complet en une seule fois, puis explique en 5 lignes comment l'ouvrir sur mon ordinateur.

Les deux lignes les plus importantes : « un seul fichier » (pas de copier-coller entre plusieurs fichiers) et « ne rien inventer » (sinon l'IA ajoute de faux avis ou de faux tarifs pour remplir).

Étape 4 : enregistre le fichier

1. Copie tout le code donné par l'assistant.
2. Sous Windows, ouvre le Bloc-notes, colle, puis « Enregistrer sous ». Nom : index.html. Type : « Tous les fichiers ». Encodage : UTF-8. Enregistre-le dans ton dossier salon-coralie.
3. Sur Mac, avec TextEdit, passe d'abord le document en texte brut (menu Format), puis enregistre en index.html.

Étape 5 : ouvre et teste

Double-clique sur index.html : ta page s'ouvre dans ton navigateur. Pour voir la version téléphone dans Chrome ou Edge, appuie sur F12 puis sur Ctrl + Maj + M (sur Mac : Cmd + Option + I, puis Cmd + Maj + M). Choisis un modèle de téléphone en haut de l'écran.

Vérifie :

• Le nom, le métier et la ville se lisent sans faire défiler
• Les photos s'affichent (sinon, vérifie les noms de fichiers)
• Les accents s'affichent correctement (sinon, le fichier n'est pas en UTF-8)
• Aucun texte n'a été inventé : relis tout, ligne par ligne
• Rien ne dépasse de l'écran sur la version téléphone

Étape 6 : améliore, une demande à la fois

Voici mon fichier index.html actuel : [colle le fichier complet].
Modification demandée : [une seule chose, précise].
Ne change rien d'autre. Rends-moi le fichier complet, puis liste en 3 lignes ce que tu as modifié.

Une seule demande à la fois, et toujours le fichier complet en retour. Garde une copie de chaque version qui marche (index-v1.html, index-v2.html) : si une modification casse tout, tu reviens en arrière en dix secondes.

Avec les autres familles d'outils

• Avec un assistant dans tes fichiers (Claude Code, Cursor) : ouvre le dossier salon-coralie dans l'outil, puis donne le même cahier des charges en remplaçant la dernière ligne par « Crée le fichier index.html dans ce dossier ». L'assistant crée et modifie le fichier lui-même. Relis chaque modification proposée avant de l'accepter.
• Avec un outil en ligne (Lovable, Bolt) : colle le contenu et le style, mais retire les contraintes techniques, qui dépendent de l'outil. Vérifie ensuite où ton site est enregistré et comment le récupérer.

L'exemple de Coralie

Coralie a lancé le cahier des charges un dimanche soir. Première version : l'IA avait ajouté une section « Avis clients » avec trois faux témoignages. Elle a demandé de la supprimer. Deuxième demande : agrandir le bouton « Appeler le salon ». Troisième : mettre les horaires avant les photos. En une heure, elle avait une page propre, sur son ordinateur. Il lui restait à la mettre en ligne, et c'est là que les vraies questions ont commencé : la leçon sur les pièges y répond.

À toi de jouer

Suis les étapes 1 à 5 avec ton propre contenu. Coche la liste de vérification de l'étape 5. Puis fais trois améliorations, une à la fois, avec le prompt de l'étape 6, en gardant une copie de chaque version.