Temps estimé : 30mn / 1 heure maximum
1. Introduction
Dans cette rubrique, vous allez soumettre une maquette à une IA, lui demander de l’intégrer en HTML/CSS, puis comparer son résultat avec un corrigé de référence déjà validé dans ce cours — pour juger objectivement ce qui fonctionne, ce qui manque, et ce qu’il faut corriger dans votre prompt pour obtenir un meilleur résultat.
2. Exercice 1 — Intégration HTML/CSS pur
Récupérez les 3 maquettes du chapitre 1000 (desktop, mobile, mobile navigation dépliée), soumettez-les à une IA, et demandez-lui l’intégration complète en HTML/CSS. Comparez ensuite son résultat avec le corrigé de référence du chapitre 1000.
Méthode : votre prompt doit demander à l’IA de respecter la maquette — les couleurs, les textes, les espacements, la structure visuelle — sans rien ajouter ni omettre. Demandez-lui de reformuler ce qu’elle a compris de votre demande avant de produire quoi que ce soit — pas de code sans votre GO. Si la reformulation est exacte, alors seulement, vous donnez votre GO.
3. Exercice 2 — Intégration avec Bootstrap
Même logique, cette fois à partir des maquettes du chapitre Framework, en demandant explicitement à l’IA d’utiliser Bootstrap. Comparez avec le corrigé du chapitre Framework.
Méthode : le prompt doit préciser que l’IA doit utiliser les modèles de composants présentés dans la documentation officielle Bootstrap — et l’idéal est de redonner directement les URL de cette documentation (déjà fournies dans le chapitre Framework), pour éviter que l’IA n’invente sa propre version d’un composant. Demandez-lui de reformuler ce qu’elle a compris de votre demande avant de produire quoi que ce soit — pas de code sans votre GO. Si la reformulation est exacte, alors seulement, vous donnez votre GO.
4. Conclusion
Comparez, identifiez les écarts, comprenez pourquoi ils existent, corrigez votre prompt en conséquence. La compétence visée n’est pas d’obtenir le bon résultat du premier coup, mais de savoir mener cette comparaison et cette itération.