Dernière mise à jour : 2026
Un portfolio codé « from scratch » (HTML/CSS/JS ou React) prouve vos compétences techniques mieux qu’un thème générique. La méthode qui fonctionne : prototyper avant de coder (Figma), rédiger le contenu avant le design, penser mobile first, choisir une stack maîtrisée plutôt que la plus tendance, et boucler sur SEO, accessibilité et performance avant publication. Ci-dessous : la méthode complète, la stack recommandée selon votre niveau, les 7 pièges à éviter, et une checklist imprimable.
Votre portfolio n’est pas une galerie d’images. C’est votre meilleur argument commercial : la première preuve concrète de ce que vous savez faire, avant même le premier entretien.
Que vous soyez développeur·se front-end ou designer web, coder son portfolio à la main (from scratch) n’est plus une option : c’est une déclaration de compétences.
Pourquoi un portfolio « fait main » change tout
Un site construit avec un constructeur de sites ou un thème générique produit plusieurs problèmes :
- le même rendu que 80 % des autres candidats
- peu de crédibilité technique aux yeux des recruteurs et clients
- une personnalisation limitée
- aucun apprentissage réel pour vous
À l’inverse, un portfolio de développeur codé sur mesure :
- prouve vos compétences réelles (HTML, CSS, JavaScript, React…)
- montre votre rigueur : responsive design, accessibilité, performance
- reflète votre univers créatif, pas celui d’un template
- devient un projet vivant, que vous améliorez au fil du temps
Avant de coder : la phase que 90 % des gens sous-estiment
1. Wireframes et prototypage
Utilisez Figma (ou Penpot, Sketch) pour :
- poser l’architecture du site (arborescence des pages)
- tester le parcours utilisateur (quel clic mène où ?)
- valider couleurs, typographies et espacements dans un style guide
2. Le contenu avant le design (ne faites jamais l’inverse)
Listez, pour votre portfolio de développeur ou de designer :
- vos 3 à 6 projets phares (la qualité prime sur la quantité)
- pour chacun : contexte, technologies utilisées, défis rencontrés, résultats concrets (avec des chiffres si possible)
- deux captures d’écran par projet (avant/après, ou mobile/desktop)
- un lien vers le dépôt (GitHub, GitLab) ou une démo en ligne
3. Rédigez votre histoire (votre « story »)
Pas un CV déguisé, une histoire :
- Qui êtes-vous ?
- Qu’est-ce qui vous anime dans le web ?
- Quelle est votre signature créative ?
4. Mobile first, dès le premier pixel
Commencez par l’écran de poche (320 px), puis ajoutez les breakpoints. C’est plus simple, plus propre, plus accessible et mieux référencé, puisque Google indexe en mobile first.
Quelle stack technique choisir pour son portfolio, selon son niveau
| Niveau | Stack recommandée | Pourquoi |
|---|---|---|
| Débutant | HTML5 + CSS3 (flexbox/grid) + JavaScript vanilla | Maîtriser les fondamentaux avant tout |
| Intermédiaire | Bootstrap 5 ou Tailwind + animations CSS + JS modulaire | Rapidité d’exécution et cohérence de l’UI |
| Avancé | React + Gatsby ou Next.js (SSG/SSR) + GSAP ou Framer Motion | Performance, SEO, expérience utilisateur poussée |
| Expert | Astro + React/Vue + Tailwind + animations au scroll | Légèreté maximale, Island Architecture |
Règle d’or : choisissez une stack que vous maîtrisez vraiment, pas la plus à la mode. Un portfolio mal codé en React vaut moins qu’un portfolio parfait en HTML/CSS.
30 compétences indispensables du développeur
- Compétences développeur web : Identifiez les savoir-faire techniques, méthodologiques et transversaux incontournables pour structurer votre profil et faire la différence sur le marché. Découvrir les 30 compétences indispensables
Ce que recruteurs et clients regardent vraiment, dans l’ordre
- Le responsive : testez sur mobile, tablette, desktop et sur de vrais appareils, pas seulement en émulation.
- La performance : visez un score Lighthouse ≥ 90 sur desktop et ≥ 80 sur mobile.
- Le soin du détail : transitions, états de survol, cohérence visuelle, micro-interactions.
- La clarté des projets : pas de blabla, des faits, des visuels, des résultats mesurables.
- Une vraie page « à propos » : qui vous êtes, ce qui vous motive, votre philosophie de travail.
- Un formulaire de contact fonctionnel, avec confirmation visuelle à l’envoi.
- Des liens vers vos réseaux pro : LinkedIn, GitHub, X, Dribbble.
SEO et accessibilité : les 5 oublis les plus fréquents
- Balises
<title>et<meta description>uniques sur chaque page - Structure de titres (H1 à H6) logique et hiérarchisée
- Attributs
altdescriptifs sur toutes les images (jamais juste « image ») - Contraste des couleurs suffisant, conforme au niveau WCAG AA
- Navigation complète au clavier, avec focus visible
Où trouver l’inspiration sans copier
- Dribbble / Behance : tendances UI et mises en page
- Awwwards / SiteInspire : innovation et motion design
- Undraw / Storyset / Humaaans : illustrations libres (à personnaliser pour garder votre propre style)
- Codrops / CodePen : effets et animations originaux
Les 7 pièges à éviter absolument
| Piège | Solution |
|---|---|
| Mettre tous ses projets sans sélection | Gardez les 3 à 6 meilleurs, avec une description solide |
| Utiliser des images trop lourdes | Convertissez en WebP, compressez avec Squoosh ou ImageOptim |
| Négliger la page « Contact » | Ajoutez un formulaire, un email et un lien LinkedIn |
| Copier un template existant | Inspirez-vous, mais personnalisez couleurs, typographies, animations |
| Oublier les liens vers les projets en ligne | Un dépôt seul ne suffit pas : ajoutez une démo ou un lien |
| Mettre un CV en PDF sans lien actif | Intégrez-le en HTML ou renvoyez vers votre profil LinkedIn |
| Publier sans relecture | Faites relire par un tiers : orthographe, clarté, cohérence |
25 erreurs de code à éviter : sécurisez vos projets
- Erreurs de code portfolio : Évitez les pièges techniques et les maladresses de conception les plus fréquentes en découvrant les 25 erreurs de code à éliminer absolument pour professionnaliser votre portfolio de développeur. Consulter les pièges à éviter absolument pour un portfolio
FAQ – Créer son portfolio web
Combien de projets faut-il mettre dans un portfolio ? Entre 3 et 6 projets maximum, choisis pour leur qualité et leur diversité plutôt que pour leur nombre. Chaque projet doit inclure le contexte, les technologies utilisées, les défis rencontrés et des résultats concrets.
Faut-il coder son portfolio ou utiliser un constructeur de site (Wix, Squarespace…) ? Pour un développeur ou un designer web, coder son portfolio à la main est fortement recommandé : cela prouve des compétences techniques réelles, contrairement à un thème générique utilisé par la majorité des candidats.
Quelle stack technique choisir pour un portfolio de développeur débutant ? HTML5, CSS3 (flexbox/grid) et JavaScript vanilla suffisent largement, et permettent surtout de bien maîtriser les fondamentaux avant d’ajouter des frameworks.
Quel score Lighthouse viser pour son portfolio ? Au moins 90 sur desktop et 80 sur mobile, pour garantir de bonnes performances et un bon référencement.
Faut-il partir du mobile ou du desktop en premier ? Toujours du mobile (mobile first), à partir de 320 px de large, avant d’ajouter les breakpoints pour tablette et desktop. Google indexe les sites en mobile first, ce qui influence directement le référencement.
Accompagnement sur mesure
J’accompagne les designers web qui préparent le Titre Professionnel, ainsi que toute personne souhaitant professionnaliser son portfolio. Chaque portfolio est unique : couleurs, grille, animations, ton, narration.
Je ne fournis pas de template. Je transmets une méthode éprouvée :
- audit de votre portfolio actuel
- définition de votre identité visuelle
- prototypage et relecture UI/UX
- optimisation technique : performance, SEO, accessibilité
- conseils pour la mise en ligne et la maintenance
Checklist finale à imprimer
- Prototypage Figma validé (wireframes + style guide)
- Contenu rédigé par projet (contexte, technologies, résultats)
- Page « À propos » rédigée (histoire, valeurs, ambitions)
- Mobile first intégré et testé sur 3 tailles d’écran
- Code propre et lisible (commenté si utile)
- SEO de base en place (balises, meta, structure de titres, alt)
- Accessibilité minimale respectée (contraste, navigation clavier)
- Liens vers réseaux pro et GitHub visibles
- Formulaire de contact fonctionnel, avec réponse automatique
- Performance Lighthouse ≥ 80 (mobile) / ≥ 90 (desktop)
- Nom de domaine personnalisé (prenomnom.com)
- Hébergement fiable (Vercel, Netlify, GitHub Pages)
Prêt à démarrer ?
Contactez-moi pour un audit gratuit de votre portfolio actuel, ou pour un accompagnement pas à pas. Je vous aide à transformer votre vitrine en un véritable outil de conviction.
Stéphane ARRAMI – Designer web, formateur, accompagnateur de projets créatifs
