J'ai codé mes flyers et mon CV en HTML/CSS au lieu d'utiliser Canva

T
Par Thibault Leture
31 Mar 2026
Sources & Contexte

developer.mozilla.org

CSS @page rule — print media queries

web.dev

CSS for printing: @page, page-break, and media print

github.com/TeeBo8

TeeBo8 — Projets open source TeeboStudio

Tout le monde utilise Canva. C'est drag-and-drop, c'est joli, ça marche. Mais quand t'es dev, y'a quelque chose de bizarre à ouvrir un outil no-code pour créer tes supports visuels. Alors j'ai fait comme d'habitude : j'ai codé.

Le déclic : pourquoi pas du HTML ?

J'avais besoin d'un flyer A5 pour promouvoir TeeboStudio. J'ai failli ouvrir Canva. Puis j'ai réalisé : je connais CSS, je connais les tokens de design de mon propre site, j'ai Claude Code à portée de main. HTML + CSS + une directive @page { size: A5; margin: 0; } dans le CSS, et tu génères un document print-ready que tu exportes directement depuis Chrome en Ctrl+P → Enregistrer en PDF. Pas d'abonnement, pas de filigrane, zéro friction.

Le flyer A5 : du dark mode au format imprimeur

Pour le flyer, j'ai réutilisé exactement la palette oklch de ce site : background dark charcoal, accent terracotta, typographie Geist. Le résultat ? Un flyer cohérent avec mon identité visuelle, en 148×210mm parfait pour l'imprimeur. Deux variantes dans le même fichier HTML : version DARK pour impression couleur, version LIGHT pour les imprimantes laser économiques. Tout le code est dispo sur GitHub, vous pouvez le forker et l'adapter à votre propre identité.

Le CV : même approche, contrôle total

Même logique pour le CV. Les templates Canva ou Word ont tous un problème : ils imposent leur mise en page. En HTML/CSS, je contrôle chaque pixel, chaque couleur, chaque espacement. Bonus : deux variantes dans le même fichier — une version dark (pour les candidatures digitales, impact garanti) et une version light (pour l'impression ou les RH old-school). Je peux versionner avec Git, faire des branches pour différentes versions (français, anglais, version consulting...). Et surtout, le rendu est identique partout — pas de surprise selon l'OS du recruteur.

Workflow : Claude Code comme outil de création

Ces deux projets ont été construits avec Claude Code, mon assistant de dev au quotidien. Ce qui aurait pu prendre 2-3h à designer from scratch a été bouclé en quelques échanges. Claude génère le HTML/CSS de base, je valide visuellement dans le navigateur, j'itère. C'est exactement le même workflow que pour du code production — mais appliqué à du design print. La preuve que l'IA permet de déborder du scope purement technique.

Le meilleur outil de design pour un développeur, c'est celui qu'il maîtrise déjà : un éditeur de texte et un navigateur.

Conclusion

Les deux fichiers sont open source sur GitHub (liens ci-dessous) et téléchargeables en PDF directement depuis cette page. Si vous bossez en freelance ou que vous voulez sortir de Canva, c'est un point de départ solide à forker. Et si vous voulez un site construit avec le même niveau de soin que ces supports — c'est exactement ce que je fais pour mes clients chez TeeboStudio.

Téléchargements

Flyer A5 — Version Dark

Premium · Impression couleur / numérique · HTML/CSS open source

Flyer A5 — Version Light

Économique · Imprimante laser / impression large · HTML/CSS open source

CV — Version Dark

CV développeur · Thème sombre · Format A4 · HTML/CSS open source

CV — Version Light

CV développeur · Thème clair · Format A4 · HTML/CSS open source

Prêt à passer à la vitesse supérieure ?

T
TeeboStudio

© 2026 TeeboStudio — All rights reserved.

⚡ Eco-designed — not because we changed the color.
TeeboStudio