TD – Mise en pratique

De l’inspiration à la mise en ligne

HTML • CSS • Claude Code • Personnalisation

Objectif du TD

Observer des sites internet de marques reconnues, identifier des éléments interactifs , puis utiliser Claude Code pour générer, intégrer et personnaliser du code HTML / CSS afin de créer une expérience web adaptée à vos besoins.

Déroulement du TD

1. Observer des sites de marques connues

Explorez les sites web de grandes marques et agences créatives.

2. Repérer une situation web intéressante

Identifiez un élément que vous souhaitez reproduire ou adapter :

  • Carrousel d’images ou de produits.

  • Animation au survol ou au défilement.

  • Menu animé.

  • Effet de transition entre sections.

  • Apparition progressive de textes ou d’images.

  • Bouton interactif ou effet visuel original.

3. Générer le code avec Claude Code

Transmettez à Claude Code les éléments nécessaires à la réalisation de votre projet :

  1. Le lien URL du site internet qui vous inspire.

  2. Une capture d’écran de l’élément que vous souhaitez créer.

  3. Une description précise du fonctionnement attendu.

  4. Vos contraintes graphiques et techniques.

Exemple de demande :

Je souhaite créer un carrousel d’images inspiré de ce site : [URL]. Voici une capture d’écran de l’effet recherché. Génère le code HTML, CSS et JavaScript nécessaire. Le carrousel doit être responsive et facilement personnalisable.

4. Intégrer et personnaliser le code

Intégrez le code généré dans votre page web, puis modifiez-le pour l’adapter à votre projet.

  • Modifier les couleurs et la typographie.

  • Adapter les images et les textes.

  • Ajuster les dimensions et les espacements.

  • Personnaliser les animations.

  • Vérifier l’affichage sur ordinateur et mobile.

  • Corriger les erreurs avec l’aide de Claude Code.

Consigne importante : l’objectif n’est pas de copier intégralement un site existant, mais de s’en inspirer pour concevoir une réalisation originale, adaptée à vos besoins et à votre identité graphique.

Mon exemple

j’ai remarqué un carrousel dynamique et tendance sur le site de https://biensur-assurances.com/

Claude code : 

Résultat : 

Intégration : 

Résultat : 

Carrousel d'articles en arc

Faire les modifications  : couleurs, titre, texte, image, liens extérieurs etc.