IA Challenge - HTML & CSS

Dans cet atelier, tu vas devoir analyser le code généré par une IA à partir d’un prompt, détecter les erreurs ou les malfaçons et proposer des corrections ou des améliorations.
Cet atelier peut être réalisé en groupe ou individuellement, selon les consignes de ton formateur.

Le prompt

Voici le prompt qui a été soumis à l’IA pour générer le code HTML/CSS.

J'ai besoin de réaliser l'intégration HTML CSS à partir d'un fichier .png.  
Peux-tu réaliser cela ?  

Le fichier PNG ci-dessous a été fourni à l’IA pour qu’elle puisse s’en inspirer.

La réponse de l’IA

Et voici la réponse de l’IA à ce prompt.

Parfait ! Je vois votre maquette d'une page produit pour un laptop. Je vais créer une intégration HTML/CSS fidèle à ce design avec un style moderne et responsive.

Immédiatement après, l’IA a généré le code HTML et CSS dont voici le rendu visuel. Réalisé avec Claude - Sonnet 4.5 (octobre 2025).

À toi de jouer !

À première vue, le résultat semble tout à fait correct et honorable.
Est-ce vraiment le cas ? C’est à toi de le vérifier !

Commence par cloner ce dépôt grâce au lien donné en haut de la page ⬆.

Le code généré par l’IA est disponible dans le fichier index.html.
Ouvre-le dans ton navigateur pour voir le rendu actuel.

Maintenant, c’est à toi d’inspecter avant d’améliorer le code généré par l’IA.

Ne te lance pas tout de suite dans la correction complète du code. Tu le feras dans une seconde étape. Pour l’instant, concentre-toi sur l’analyse critique.
Prends des notes afin de pouvoir restituer tes observations.
Si tu sollicites une IA pour t’aider (tu as le droit !), pense aussi à noter tes différents prompts, quelle IA tu as utilisée et comment tu as procédé (nettoyage du code en amont, demande de conseils ou d’analyses, etc.).

Prends le temps d’explorer chaque aspect et de proposer des améliorations concrètes. Bonne chance !

💡 Quelques pistes de réflexion

Structure HTML : Les balises utilisées sont-elles appropriées ?
Styles CSS : Le CSS respecte-t-il les bonnes pratiques ? Y aurait-il des modifications à apporter pour améliorer la lisibilité, la maintenabilité et la qualité du code ?
Accessibilité : Pense à l’accessibilité de la page. Les images ont-elles des attributs alt adaptés ? Les contrastes de couleurs sont-ils suffisants ? Les informations importantes sont-elles accessibles uniquement par la couleur ou par la forme ?
Optimisation : Comment pourrais-tu optimiser l’écriture du CSS et alléger le code HTML ?

🕰️

Restitution par groupe à l’issue du temps qui a été communiqué par ton formateur