Coder avec l'IA : Claude & Artifacts

Mode d'emploi (lis ça, 30 secondes)

0. Démarrer (2 minutes)

Étape 1 — Ouvre Claude

Dans ton navigateur : va sur claude.ai, crée un compte gratuit avec ton mail. Tu arrives sur une page avec un grand champ de saisie en bas.

Étape 2 — Colle ce premier prompt

Crée une page web complète (un seul fichier HTML avec le CSS
à l'intérieur) que je puisse prévisualiser : un portfolio
d'étudiant en BTS SIO SLAM. En-tête avec le nom "[TON NOM]"
et "BTS SIO SLAM". Style sobre et moderne. Commente le CSS.

Étape 3 — Regarde à droite

Après quelques secondes, une page web s'affiche dans un panneau à droite : c'est ton Artifact. En haut de ce panneau, deux onglets :

Il y a aussi un bouton plein écran (pour voir grand) et, en haut, un bouton Publier (on y vient au ch. 7).

1. Les 3 gestes de base

Tout le TP tient sur 3 gestes. Fais-les tout de suite sur ta page.

Geste 1 — Modifier : tu le dis, ça change

Tu ne touches pas au code toi-même : tu décris le changement. Colle :

Change le fond de l'en-tête en gris très foncé (#1b2a4a)
et le texte en blanc.

L'aperçu se met à jour tout seul : l'en-tête devient
gris foncé, le texte passe en blanc.

Geste 2 — Revenir en arrière : les versions

Chaque modification crée une version. En haut de l'Artifact, des flèches permettent de parcourir les versions et de revenir à l'une d'elles. Tu peux aussi le demander :

reviens à la version précédente de la page

Geste 3 — Publier : un lien public

Quand la page te plaît, clique sur Publier (haut de l'Artifact) → Claude te donne une adresse (URL) publique que tu peux ouvrir et partager. On s'en sert pour de vrai au chapitre 7.

2. Le prompt qui marche

Un prompt vague = un résultat vague et 10 allers-retours. Un prompt précis = bon du premier coup. La différence, sur de vrais exemples portfolio :

Le test « 1 humain »

Avant d'envoyer : « Si je donnais cette phrase à quelqu'un qui ne connaît pas mon projet, saurait-il quoi faire sans me reposer de question ? » Si non → il manque le Où, le Quoi ou le Comment.

Atelier (2 min) — répare ces 3 prompts

3. Construis ton portfolio (le build)

Le cœur de la séance. Tu enchaînes les prompts ci-dessous sur la même page, un par un, dans l'ordre. Après chaque prompt : regarde l'aperçu, puis passe au suivant. Adapte les […] à toi.

Prompt 1 — La structure

Structure la page en 4 sections avec les id : accueil,
apropos, competences, projets. Donne un titre (h2) à
chacune. Ajoute une barre de navigation collée en haut
avec 4 liens qui mènent vers ces sections. Ne supprime
pas le contenu déjà présent.

Aperçu : une barre de nav en haut + 4 sections titrées.
Cliquer un lien fait défiler vers la bonne section.

Prompt 2 — À propos

Dans la section À propos, écris un court texte (3 lignes) :
étudiant en BTS SIO SLAM à [TON ÉCOLE], j'aime [CE QUE TU AIMES],
objectif : [TON OBJECTIF]. Ajoute dessous un bouton
"Télécharger mon CV" (href="#" pour l'instant).

Prompt 3 — Compétences

Dans la section Compétences, fais une liste de 5 compétences
en cours : HTML, CSS, le terminal, créer une machine
virtuelle, travailler avec une IA.

Prompt 4 — Les cartes projets

Dans la section Projets, crée 3 cartes. Chaque carte :
un titre, une phrase de description, et une ligne
"Compétences : …".
Carte 1 : "Ma première page web" (HTML/CSS).
Carte 2 : "[UN AUTRE TP que tu as fait]".
Carte 3 : "Portfolio avec une IA" (ce TP).

Aperçu : 3 cartes… mais empilées les unes sous les autres.
On corrige au prompt suivant.

Prompt 5 — Mettre les cartes en grille

Mets les 3 cartes côte à côte en grille de 3 colonnes
égales, avec un espace de 16px entre elles.

Prompt 6 — Styliser les cartes

Donne aux cartes : fond blanc, une bordure fine gris clair,
coins arrondis, un peu de padding, et une légère ombre.
Au survol, la carte se soulève un peu.

Prompt 7 — Ta couleur

Change la couleur principale (titres, nav, bouton CV) en
[TA COULEUR, ex: #1b2a4a bleu nuit]. Garde un texte bien
lisible (contraste suffisant).

Prompt 8 — La version mobile

Sur écran mobile (largeur inférieure à 600px), passe les
3 cartes sur une seule colonne et réduis un peu la taille
des grands titres.

Claude ajoute une "media query" @media (max-width:600px).
Pour la tester : ouvre l'aperçu en grand → F12 → icône
téléphone → choisis "iPhone SE". Les cartes s'empilent.

4. Lire & comprendre le code

Ouvre l'onglet Code de ton Artifact. Tu dois pouvoir lire ce que Claude a écrit — sinon tu ne pourras pas le défendre. Entraîne-toi sur un vrai bout : le bouton CV du prompt 2.

<a href="#" class="btn-cv">Télécharger mon CV</a>

.btn-cv {
  display: inline-block;
  background-color: #1b2a4a;
  color: #ffffff;
  padding: 10px 24px;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.btn-cv:hover { background-color: #2c3f66; }

5. Quand ça coince

Les blocages réels du jour, et le correctif exact. Repère ton cas, applique, continue.

6. Teste pour de vrai

« Ça a l'air bon » ≠ « ça marche ». Trois vérifs rapides, à chaque étape importante.

1. L'aperçu : l'effet demandé est là, et le reste de la page n'a pas bougé ?
2. Le mobile : aperçu en grand → F12 → icône téléphone → « iPhone SE » (375px). Rien ne déborde ?
3. Les liens de nav : cliquer « Projets » emmène bien à la section Projets ?

Repérer une « hallucination »

L'IA peut inventer une propriété qui n'existe pas (ex. rounded-corners au lieu de border-radius). Le navigateur l'ignore en silence → l'effet n'apparaît pas, sans message d'erreur.

Bien signaler un bug (sinon Claude corrige mal)

Règle : ce que tu vois vs ce que tu attendais, et où.

7. Publier & livrer

Publier

En haut de l'Artifact → Publier → tu obtiens une URL publique. Ouvre-la dans un nouvel onglet pour vérifier qu'elle marche. C'est le lien que tu montreras.

Récupérer le fichier

Dans le menu de l'Artifact → Télécharger le .html. Garde-le : à la prochaine séance (Git & GitHub), tu l'hébergeras sous ta propre adresse.

Défis bonus (si tu as fini)

A — ajoute une section « Veille » avec 2 liens tech que tu suis.
B — demande à Claude 2 palettes de couleurs différentes, choisis-en une (et dis pourquoi).
C — fais-toi expliquer un terme CSS que tu ne connaissais pas, puis réutilise-le.

8. 3 règles (non négociables)

Pour finir

Antisèche — les réflexes

Vérifie tes acquis

1. Quelle phrase déclenche la création d'un Artifact plutôt qu'une réponse texte ?
2. Tu as supprimé une section par erreur via un prompt : les 2 façons de la récupérer ?
3. Les 3 ingrédients d'un bon prompt ?
4. Où lis-tu le code généré, et pourquoi dois-tu le lire ?
5. Comment tester la version mobile sans smartphone ?
6. Une propriété CSS ne fait rien : comment vérifier si elle existe ?
7. Cite 3 choses à ne jamais coller dans le chat.
8. Comment obtiens-tu un lien public de ton portfolio ?

Corrigé du quiz

Glossaire