Retour sur l’enseignement en développement Web en contexte d’intelligence artificielle

En novembre 2025, nous avons publié un article sur le vibe coding. Cet article était en fait une préparation pour un cours que nous allions donner de novembre 2025 à janvier 2026. Nous allons partager ici notre expérience et montrer comment nous avons intégré l’intelligence artificielle (IA) dans notre cours. Le cours que nous donnons – nous le donnons en tandem – est pour des débutants en développement Web. Il enseigne les bases du développement frontal soit le HTML, les CSS et les fondements du JavaScript. La durée d’enseignement pour ce premier cours intitulé « Développer des interfaces Web » est de 52 heures. Il fait partie du curriculum de l’attestation d’études collégiale « Développement Web en contexte d’intelligence artificielle » au Cégep de Saint-Félicien, offert à 100% en formation en ligne.

Le « défi classique » élevé : utiliser la génération de contenu par IA...

Durant le cours, les étudiants doivent construire un petit site à la main, un carnet touristique, où ils présentent trois points d’intérêt dans leur quartier ou leur pays d’origine qu’ils voudraient nous faire découvrir. Chaque point d’intérêt a un titre, une accroche, une description, une image, un clip audio (voir Figure 1). Le site doit être disponible en français et en anglais, alors les contenus doivent être traduits. Les étudiants construisent le site du début à la fin, alors de devoir en devoir durant le cours, ils ajoutent des volets. Dans le premier devoir, ils doivent planifier leur site, dans le deuxième, ils font le HTML, dans le troisième devoir ils développent les CSS, dans le quatrième devoir ils créent le contenu et dans le cinquième ils ajoutent de l’intéractivité avec le JavaScript (carrousel, lecteur audio, décoration d’étiquettes dans un formulaire, etc).

Ce plan de match est utilisé depuis plusieurs années pour cette formation. Cette année, nous avons encouragé et parfois forcé l’utilisation de l’intelligence artificielle (l’an dernier, nous avions suggéré la possibilité d’utiliser ChatGPT pour les descriptifs). Les utilisations proposées étaient :

• Pour la création des descriptions, utilisation de Gemini ou ChatGPT, mais non obligatoire
• Pour les traductions, utilisation de Gemini ou ChatGPT ou de Google Translate ou Deepl, fortement suggérée
• Pour les images, utilisation de Nano Banana, mais non obligatoire
• Pour les clips audio, utilisation du service texte à synthèse vocale d’ElevenLabs ou autre, mais pour ces contenus, c’était obligatoire
• Pour le JavaScript, si aucun indice n’était donné en classe

Au niveau de la génération de contenu texte ou image, seulement quelques étudiants ont utilisé l’IA. Pour la création des images, la plupart ont opté des images sur wikicommons, ce qui amène un peu plus d’authenticité. Au niveau des clips audio, le résultat généré par IA était très bien, mais un étudiant s’est démarqué des autres sur un de ces 6 clips audio (3 en français et 3 en anglais). Il a expérimenté plus que les autres avec la génération et au lieu d’utiliser ElevenLabs, il a travaillé avec Suno AI. Ce fut ardu, mais le résultat se démarque. Vous écouter le résultat à la Figure 2.

Noter qu’une des choses que nous n’avons pas faites dans le cours, car nous voulions que les étudiants fassent à la main, est de montrer l’utilisation d’assistance IA pour coder avec Copilot (car l’outil pour créer le code était VS Code). Les étudiants avaient reçu plusieurs indices pour 4 des 5 défis du devoir de programmation JavaScript. Pour le dernier défi, il devaient trouver par eux-mêmes. Plusieurs se sont faits aider par l’IA (fort probablement avec des agents conversationnels) et j’étais étonné cette année de la qualité du code rendu sans qu’il soit trop complexe.

Le nouveau défi : créer une application Web avec IA

Le sixième devoir pour cette formation allait dans une autre direction. Dans la portion JavaScript du cours, les étudiants avaient construit étape par étape un calculateur de taxes québécoises simple. Ceci leur fait pratiquer les fonctions, les objets du JavaScript dont l’objet Math, la manipulation du DOM pour afficher les résultats et les messages d’erreur et configurer la gestion des événements. Dans leur dernier défi, nous leur demandions de créer une application avec IA qui devait calculer les taxes de vente du Québec avec la possibilité d’ajouter un pourboire. Les requis en gros étaient :

• Calcul de la TPS, TVQ et du total avec taxes et permettre calculer la taxe inverse (où nous donnons en entrée le total et non le sous-total)
• L’application doit fonctionner en français et en anglais (français par défaut)
• L’application doit permettre de calculer un pourboire en pourcentage sur le sous-total ou avec un montant fixe
• Le total avec les taxes ne doit pas avoir d’erreur d’arrondi
• Idéalement, les montants doivent être présentés selon la localisation $ 100.00 en anglais et 100,00 $ en français, si ce n’est pas fait comme ça avec le prompt original
• (optionnellement) L’application devrait avoir des métadonnées OpenGraph pour contrôler les cartes enrichies sur les médias sociaux et autres plateformes comme Slack et Teams
• (optionnellement) L’application devrait pouvoir être utilisée hors ligne : concept de Progressive Web App

Nous avions pratiqué le tout entre les deux formateurs, pour s’assurer que le défi était faisable. Une des choses que notre répétition générale nous avait fait réaliser est que le même prompt utilisé presqu’au même moment avec le même générateur de code donne des résultats différents : l’apparence de l’application est légèrement différente, le code et son organisation sont différents. Comme le code allait au-delà de ce que les étudiants avaient appris, je devais trouver un morceau qu’ils reconnaîtraient et un morceau qu’ils comprendraient facilement. Le morceau qu’ils pouvaient reconnaître était le calcul des taxes. Le morceau qui était facile à comprendre était le traitement des chaînes de caractères pour chaque langue. Je savais donc que je devais montrer mon code et l’expliquer et après prendre le code d’un étudiant volontaire et l’expliquer en se basant sur ces deux points.

Le grand soir

Nous sommes le 15 janvier 2026. C’est le grand soir. Le travail de présentation de Bolt se fait dans le dernier 90 minutes de cette dernière séance de cours. Nous avions demandé aux étudiants de s’ouvrir leur compte Bolt la veille. Si le temps le permettait, ils étaient invités à lire l’article Le making-of d’une application créée par vibe coding. Comme c’était la première fois que nous faisions ça et qu’ils avaient eu une session assez lourde avec beaucoup de devoirs, nous avons pris la décision de simplifier le devoir et finalement ne leur laisser qu’une chose à faire après le cours, tout le reste aurait été fait en classe.

Nous leur avons donc donné le prompt original à utiliser¹ :

I would like you to build a tax calculator for Quebec with the possibility 
of including tip (as a percentage of the subtotal or a fixed amount). 
The tip should be optional. By default the amount for the calculator 
should be for the subtotal but it should also be possible to invoke 
inverse tax on this Quebec tax calculation component.
... (reste du prompt donné en classe)

Et pour tous avec ce prompt, nous avions des erreurs d’arrondi avec entre autres 57,90 $ dans l’application générée.

Je leur ai donc donné un deuxième prompt pour qu’ils puissent voir comment faire améliorer l’application par conversation :

Make sure you round the QST and GST amounts before calculating the total
with taxes.

Nous avons examiné le code avant et après le correctif du calcul des taxes. Ils étaient familiers avec la technique qu’il fallait utiliser pour corriger les calculs puisque nous l’avions fait en classe sur notre projet de calculateur de taxes de base.

Le devoir ensuite consistait à améliorer leur application. Nous leur avons donné une liste d’améliorations possibles et ils choisissaient laquelle faire. Dans un fichier README.md, ils devaient me dire ce qu’ils avaient choisi comme amélioration – ils pouvaient en choisir plus d’une – et comment ils avaient procédé. Après, ils devaient exporter l’application, l’amener localement et la pousser sur le serveur git pour la voir publiée sur le serveur du cours.

Le défi de notre situation

Comme mentionné plus tôt, les étudiants devaient à la fin exporter leur code de Bolt et après le pousser sur le serveur git du cours que nous avions mis en place. Les applications se retrouvaient en bout de ligne dans un des 10 répertoires pour chaque étudiant. Un pipeline côté serveur faisait l’installation des composantes, la construction de l’application et sa publication. Pour que tout marche bien, il fallait connaître comment l’application était construite. Il fallait aller changer le fichier vite.config.ts pour rajouter l’attribut base pour forcer l'utlisation de chemins relatifs dans l'application.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  base: './',
  plugins: [
    react()
  ],
  optimizeDeps: {
    exclude: ['lucide-react'],
  },
});

Avec cette modication de configuration, l’application fonctionnait bien en prévisualisation dans Bolt, en publication dans Bolt et en publication sur nos serveurs.

Leçons tirées de cet exercice

Pour le travail avec le générateur de code pour l’application Web :

• J’avais demandé aux étudiants d’ouvrir un compte Bolt la veille du cours. Ils devaient lier le compte avec leur courriel d’école. L’idée était d’utiliser le forfait gratuit de Bolt qui donne 1M de tokens pour un mois avec une limite de 300K tokens par jour. Ce que j’avais oublié de leur dire était de ne pas essayer Bolt avant le cours. J’ai donc eu deux étudiants qui avaient atteint leur limite avant même que nous puissions commencer l’exercice le soir du cours. Un étudiant était débrouillard et s’était ouvert un compte Lovable pour lui permettre de faire l’exercice avec nous. Finalement c’était une bonne idée car on pouvait voir ce que Lovable produisait et comparer avec le code généré par Bolt. Je lui ai donc demandé de partager son écran lorsque je montrais comment l’application était organisée.
• J’ai travaillé avec des prompts en anglais, un peu par habitude. La prochaine fois nous essaierons avec des prompts en français.

Pour le devoir des circuits touristiques, la provenance des contenus n’était pas toujours claire lors de la correction. L’an prochain, nous demanderons à ce que ça soit mis spécifiquement, soit par un attribut visuel, soit par un crédit associé à l’image ou au fichier audio.

Conclusion

L’expérience fut concluante. Il faut voir comment elle pourrait être poussée plus loin et peut-être même plus intégrée dans la formation. Lors de la présentation de la plateforme Bolt, les étudiants ont été avertis des dangers du vibe coding. Une utilisation sans compréhension du code risque de donner beaucoup de soucis et de créer une dette technologique importante. Par contre, si nous maîtrisons notre métier, nous pouvons utiliser le vibe coding comme un outil : il faudra vérifier et valider ce que le code fait et ainsi utiliser l’outil pour améliorer notre productivité.

Beaucoup d’inquiétudes montent aujourd’hui sur la baisse d’embauches de « juniors » dans différents métiers : les travaux qu’ils faisaient peuvent maintenant être faits par l’intelligence artificielle à moindre coût. Il est donc essentiel que la relève apprenne à utiliser ces outils tout en assimilant les principes fondamentaux du développement Web (dans notre cas). Nous devons cependant encourager cette relève en l’intégrant dans nos équipes, en les laissant utiliser l’intelligence artificielle dans le cadre de leur travail, mais en les supervisant avec des revues de code régulières, en leur expliquant ce qui est généré, ce qui est bien et ce qui l’est moins. Cette relève est clé car c’est elle qui nous donnera les « séniors » de demain.