Quand tu veux une landing page ou portfolio en un fichier HTML ouvert dans ton navigateur, sans website builder.
Tu aides des personnes sans bagage technique à obtenir un site web ou une landing page très simple et statique.
Objectif : Un seul fichier HTML en HTML brut. CSS et JavaScript intégrés dans le même fichier. Pas de frameworks, pas d'outils de build, pas de npm, pas de React, pas de fichiers supplémentaires.
Contexte :
- Usage de la page : [OBJECTIF DU SITE, EX. PROMENADE DE CHIENS, INVITATION MARIAGE, PETITE BOUTIQUE]
- Titre principal : [ACCROCHE OU NOM DE L'ACTIVITÉ]
- Description courte : [UN OU DEUX PHRASES SUR CE QUE TU PROPOSES]
- Contact ou appel à l'action : [E-MAIL, TÉLÉPHONE, LIEN OU TEXTE DU BOUTON]
- Couleurs ou style (optionnel) : [COULEURS, AMBIANCE OU SITE QUE TU AIMES]
- Sections en plus (optionnel) : [SERVICES, TARIFS, FAQ OU EMPLACEMENTS PHOTO]
Critères de succès :
- Un fichier index.html avec HTML, CSS intégré et JS dans ce seul fichier
- Mise en page qui tient sur mobile et sur ordinateur
- Langage clair. Pas de jargon
- Le style visuel colle aux couleurs ou à l'ambiance que j'ai indiquées
Instructions :
1. Avant le code, un court message en français simple :
- C'est une page statique très simple. Pas de base de données, pas de login, pas de boutique en ligne.
- Enregistrer le fichier sous index.html sur l'ordinateur.
- Pour la voir : clic droit sur le fichier HTML, « Ouvrir avec », puis choisir le navigateur web (par exemple Chrome ou Firefox).
- Les textes peuvent être modifiés plus tard dans un éditeur de texte basique.
2. Écrire le fichier index.html complet. HTML brut avec CSS intégré et JavaScript simple.
3. Si des photos sont nécessaires : blocs placeholder avec étiquette plutôt que liens d'image cassés.
Format de sortie :
- Commencer par le message du point 1.
- Puis la index.html complète dans un bloc de code.
- Finir avec deux courts conseils pour des retouches que la personne peut faire seule.
Règles de style :
- Pas de dépendances externes sauf une police gratuite Google Fonts si besoin
- Pas de faux avis ni d'infos inventées sur l'activité. Seulement ce que j'ai donné ou des placeholders clairs comme <TON TÉLÉPHONE>
Comment l'utiliser
- Parfait pour matérialiser une idée, pas pour des applis web interactives.
- Demander une deuxième version avec un autre look si le premier jet ne convient pas.
- Coller l'e-mail ou le numéro réel dans le fichier sauvegardé après avoir copié le code depuis le chat.
Conseils
- Une page suffit pour un premier jet. Demander d'autres sections seulement si besoin.
- Si le chat coupe le code, écrire « continue la index.html où tu t'as arrêté ».
Exemple de sortie
Avant d'utiliser cette page
C'est un site web statique très simple. Un seul fichier sur l'ordinateur. Pas de paiement, pas de mots de passe, pas de mises à jour automatiques.
Enregistrer le code ci-dessous sous index.html. Pour ouvrir : clic droit sur le fichier, « Ouvrir avec », puis le navigateur web.
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Promenades Canines Soleil</title>
<style>
/* styles de mise en page simples ici */
...
</style>
</head>
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
</html>
```
Deux retouches rapides : changer le nom dans le titre principal. Remplacer [TON TÉLÉPHONE] par le vrai numéro.