Vibecoding · mode d’emploi

Parlez web.
Dirigez l’IA.

Une IA construit exactement ce que vous savez nommer. Ce site vous apprend comment fonctionne un site web et le nom de chacune de ses pièces, pour que vos demandes soient comprises du premier coup.

Commencer le parcours → Explorer le catalogue
  • 54composants vivants
  • 131termes expliqués
  • 8expériences interactives
Vous

Le déclic

Le bon mot change tout

Chaque terme technique est un raccourci vers des dizaines de décisions déjà prises. Plus votre vocabulaire est précis, moins l’IA improvise.

Sans le vocabulaire
« Fais un truc qui s’ouvre quand je clique, avec un fond sombre, et que ça disparaisse. »
  • L’IA devine la forme
  • Le fond, le bouton, la fermeture : au hasard
  • 5 allers-retours pour y arriver
Avec le vocabulaire
« Une modale avec overlay flouté, fermable avec Échap, en fondu de 250ms. »
  • Un composant précis, un comportement clair
  • Les détails sont décidés par vous
  • Résultat juste dès le premier jet
Les fondations

Trois langages, trois métiers

HTML

Le squelette

Ce qu’il y a dans la page : titres, textes, images, boutons. La structure et le sens.

Voir en action →
CSS

La décoration

À quoi ça ressemble et où ça se place : couleurs, espaces, tailles, mise en page, animations.

Jouer avec les boîtes →
JavaScript

Le comportement

Ce qui se passe quand on agit : cliquer, survoler, taper, scroller. Il donne vie à la page.

Voir les événements →
Le parcours

Cinq étapes, du zéro à l’aisance

  1. 1

    Comprendre l’anatomie

    Les 3 couches, un ou plusieurs fichiers, le DOM, le modèle de boîte, flexbox, événements, responsive. En manipulant.

    →
  2. 2

    Visiter un vrai site

    Un site fictif où les 54 composants sont assemblés et se présentent eux-mêmes : « je suis une modale ». Scrollez, cliquez, survolez.

    →
  3. 3

    Explorer le catalogue

    Chaque composant en détail : démo, code HTML/CSS/JS, leviers à nommer, prompt prêt à copier, pièges.

    →
  4. 4

    S’approprier le glossaire

    Les mots du web expliqués simplement, avec la phrase à dire à l’IA pour chacun.

    →
  5. 5

    Parler à l’IA, puis vérifier

    La méthode des 5 questions, un générateur de prompts, décrire un bug… puis le quiz pour valider vos nouveaux mots.

    →
Un aperçu du catalogue

Pioche : voici quelques composants

Voir les 54 composants →

Mode d’emploi

Chaque fiche tient en six blocs

Chaque composant du catalogue suit le même schéma : on le voit, on le comprend, on sait le demander.

  1. Définition et quand l’utiliser
  2. Démo vivante à tester
  3. Qui fait quoi : HTML · CSS · JS
  4. Le code simplifié, copiable
  5. Les leviers : ce qu’on peut régler
  6. La phrase à dire à l’IA + pièges à éviter

Prêt·e à diriger l’IA ?

Commencez par l’anatomie : 15 minutes pour comprendre comment un site se construit.

Commencer maintenant →