Création de Landing Page
Assistée par IA
L’IA est ton ouvrier, tu es l’architecte. Apprends à piloter la génération de code et fais les finitions comme un pro.
🧠 1. Création Assistée par IA (Tu restes le boss !)
❌ Ce que ce N’EST PAS
Appuyer sur un bouton magique et croiser les doigts.
✅ Ce que C’EST
Utiliser l’IA pour construire les murs rapido, mais faire toutes les finitions toi-même.
« Pourquoi on utilise VS Code ? Parce que le code généré par l’IA n’est jamais parfait du premier coup. Tu dois pouvoir l’ouvrir, le lire et le modifier. »
📖 2. Parle couramment avec ton IA
HTML (index.html)
Le squelette de ta page. C’est lui qui dit « Ici il y a une vidéo » ou « Ici c’est un titre ».
CSS / Tailwind
Le maquilleur. L’IA utilise Tailwind pour mettre ton site en beauté directement dans le HTML (couleurs, marges).
Lucide
Une bibliothèque d’icônes gratuites et modernes pour rendre le site super propre.
Responsive
La capacité magique de ton site à s’adapter parfaitement aux écrans de smartphones.
✨ 3. Le Prompt Parfait
Le secret est dans le détail. Personnalise tes couleurs puis copie le prompt.
1. Renseigne ta palette Canva/Coolors :
💻 4. Mets les mains dans le cambouis
L’IA a fait 90% du travail. À toi de faire les 10% restants dans Visual Studio Code !
Étape 1 :
Ouvre ton fichier
index.html dans VS Code.
Étape 2 :
Cherche la balise
<img src="...">. Remplace le faux lien par ta photo (ex: "ma-photo.jpg").
Étape 3 :
Cherche la balise
<video>. Modifie la source pour cibler ta vidéo de 30s (ex: "ma-video.mp4").
🚀 Checklist de validation
🩹 Dépannage Express
- Casse de fichier : Attention à
.jpgvs.JPG! - Chemin brisé : En local, retire le premier
/devant le dossier de ton image/vidéo.
💡 Astuces de Pro
- Format WebP : Convertis tes images pour diviser leur poids par 5 sans perdre en qualité.
- Poids Vidéo : Utilise un iframe YouTube pour un chargement instantané sans surcharger ton serveur.