Carte de punchline partageable
Une mini-app à un fichier : génère et partage une punchline de dev. On code avec l'IA, on relit en humain.
HTML · CSS · JSGénérateur de palette de couleurs
DOM, événements, et un vrai réflexe d'accessibilité : div cliquable contre bouton, et un texte lisible sur chaque couleur (luminance).
JSSuivi d'habitudes
localStorage et persistance : coche tes jours, ça se mémorise. Relecture : stockage fragile, XSS sur texte saisi, cases au clavier.
JS · localStorageMini-dashboard météo (API)
fetch et données réelles (Open-Meteo, sans clé). Relecture : états chargement/erreur, données externes échappées.
JS · fetchPetit jeu de réflexe
Logique et état : clique quand c'est vert. Relecture : annuler le timer (anti-triche), cas limites du score, clavier.
JSLanding animée d'un produit fictif
Intégration : sections, animations au scroll. Relecture : contenu visible sans JS, reduced-motion, sémantique.
HTML · CSS · JSCarte en image (Canvas)
Canvas : dessiner une carte et l'exporter en PNG. Relecture : retour à la ligne manuel, netteté Retina, accessibilité d'un canvas.
JS · CanvasTableau Kanban (glisser-déposer)
Glisser-déposer + persistance. Relecture : le drop refusé sans preventDefault, et surtout rendre le déplacement utilisable au clavier.
JS · drag & dropExplorer une base SQL (sql.js)
Une vraie base SQLite dans le navigateur. Relecture : injection SQL → requêtes paramétrées, résultats échappés, chargement d'une dépendance.
JS · SQL · sql.jsFormulaire validé en PHP (le serveur)
Capstone : le premier projet côté serveur, et la vraie boucle avec l'IA (impasses et bug compris). Relecture : validation serveur, XSS en sortie, CSRF.
PHP · serveurLivre d'or persistant (base SQLite)
Le premier projet qui STOCKE : un livre d'or branché sur une base SQLite. Relecture : injection SQL → requêtes paramétrées, XSS stocké échappé, base hors du dossier public.
PHP · SQLiteConnexion sécurisée (mots de passe)
Protéger un accès par mot de passe. Relecture : jamais de mot de passe en clair (password_hash/verify), erreurs génériques anti-énumération, session régénérée, et le bug de la colonne trop courte.
PHP · sessionsComment ça marche
Chaque projet est un TD corrigé. On part d'une idée simple, on la construit avec l'IA en montrant les vrais prompts, puis on prend le temps de relire en humain : sécurité, contraste, accessibilité, cas limites. À la fin, le projet est en ligne et tu peux l'ouvrir, le copier, le remixer.
Une précision honnête : pour rester lisibles, ces TD condensent l'échange en 2 ou 3 prompts. En vrai, tu feras bien plus d'allers-retours — des essais, des impasses, du debug. C'est normal, et c'est même comme ça qu'on apprend ; on montre ici la version au propre pour que la leçon reste claire.