


# CRITIQUE DU CODE DE LA CARTE PRODUIT

## 1. Qualité du code

Le code initial fourni par l’IA **n’était pas parfaitement structuré**. Le HTML et le CSS étaient combinés dans un seul fichier, ce qui rendait le code **difficile à maintenir et peu modulable**. Certaines sections étaient répétitives et manquaient de clarté, notamment le slider et les images. 

Malgré ces défauts, la **structure de base était fonctionnelle et compréhensible**, ce qui m’a permis de l’améliorer sans repartir de zéro. J’ai donc séparé le HTML et le CSS dans des fichiers distincts pour rendre le code plus **propre, modulable et facile à réutiliser**, conformément aux bonnes pratiques que nous avons apprises.

---

## 2. Esthétique et fonctionnalité de l’UI

L’interface utilisateur est **globalement esthétique et fonctionnelle** : 

- La carte est **visuellement agréable**, avec des bords arrondis et un design clair. 
- Le composant est **responsive**, s’adaptant correctement à différentes tailles d’écran. 
- J’ai ajouté des **effets d’ombre et de relief au survol**, pour améliorer la perception de profondeur et le rendu interactif. 
- Le **slider** a aussi été corrigé pour que toutes les images du produit soient affichées correctement et que la navigation via les flèches soit intuitive, sur le code généré par l'IA,  quand on slidait à gauche c'etais l'image de droite qui etait visible et inversement (donc probleme de cohérence). 

En résumé, l’UI fonctionne bien et est agréable à utiliser, même si certains éléments comme le compteur d’images n’ont pas été intégrés pour simplifier le code final.

---

## 3. Modifications manuelles

Pour obtenir un résultat conforme à mes attentes, j’ai dû : 

- Séparer le HTML et le CSS pour améliorer la lisibilité et la modularité. 
- Corriger le **slider** afin que toutes les images s’affichent correctement et que les flèches naviguent dans le sens attendu. 
- Créer un **dossier `img`** pour organiser les images du produit de manière structurée. 
- Ajouter des **ombres et des effets de relief au survol** pour rendre la carte plus dynamique. 
- Nettoyer et simplifier certaines sections répétitives ou complexes pour rendre le code plus lisible et facile à maintenir. 
- Ajuster la **position verticale de la carte** pour qu’elle soit centrée sur la page et visuellement harmonieuse.

---

## 4. Gain de temps

L’utilisation de l’IA a permis un **gain de temps considérable (70%)** par rapport à un codage complet depuis zéro. La structure initiale était déjà présente et fonctionnelle : il a suffi de **corriger, réorganiser et améliorer certains détails** pour obtenir un résultat propre et professionnel. 

Cette expérience montre que l’IA est un outil extrêmement utile, mais **elle ne remplace pas l’expertise humaine** : un bon développeur sait détecter les problèmes, structurer le code et l’adapter pour obtenir un résultat optimal, alors qu’un développeur moins expérimenté pourrait ne pas identifier les limites ou erreurs du code généré par l’IA.

