Votre premier projet, de A à Z

On assemble tout avec un vrai projet : le petit outil de partage des frais entre colocataires (ou entre amis, pour un week-end). Il tient dans un seul fichier, ne demande rien d'installer, et peut se mettre en ligne gratuitement.

1. La description

« Je veux une page web, en un seul fichier HTML, qui s'ouvre dans le navigateur sans rien installer. On y saisit des prénoms, puis des dépenses (qui a payé, combien). L'outil affiche qui doit combien à qui, à parts égales. Pas de compte, rien n'est envoyé sur un serveur. Lisible sur téléphone. Avant d'écrire le code, pose-moi tes questions. »

2. La version minimale

Après avoir répondu aux questions, demandez seulement la première étape : deux prénoms, deux montants, un total. Copiez le code dans un fichier texte, enregistrez-le sous le nom « frais.html », puis ouvrez-le d'un double clic. Il s'affiche dans votre navigateur : c'est votre premier programme.

3. Fonction par fonction

• Ajoutez une chose à la fois : plus de deux personnes, puis le calcul de qui doit quoi, puis la mise en forme.
• Après chaque étape, testez avec un cas connu : Léa 30 euros, Tom 10 euros, donc Tom doit 10 euros à Léa.
• Gardez une copie de chaque version qui marche : frais-v1.html, frais-v2.html…

4. Quand ça coince

Touche F12, onglet Console, copiez le message complet et donnez-le à l'IA avec ce que vous faisiez et ce que vous attendiez. Si deux corrections échouent, revenez à la dernière copie qui marchait.

5. La relecture avant publication

Demandez à l'IA : « Relis ce fichier. Contient-il un secret ? Envoie-t-il des données quelque part ? Que se passe-t-il si on saisit des lettres au lieu d'un montant, ou un montant négatif ? » Corrigez ce qui doit l'être, puis testez sur votre téléphone.

6. La mise en ligne

Plusieurs services hébergent gratuitement une page comme celle-ci, par exemple Netlify, GitHub Pages ou Cloudflare Pages : souvent, il suffit de déposer le fichier. Votre outil ne contient aucun secret et n'enregistre rien sur un serveur : c'est justement ce qui le rend sûr à publier. Vous obtenez une adresse à partager avec vos colocataires.

Et ensuite ?

Tenez un petit fichier de notes : votre description, les demandes qui ont bien marché, les erreurs rencontrées. Puis choisissez le projet suivant, un cran plus ambitieux, avec la même méthode.