14 août 2025·8 min
Créer un site portfolio sans coder : guide pas à pas
Apprenez à créer un site portfolio soigné sans coder — du choix du constructeur no‑code aux modèles, contenu, SEO et publication.
Apprenez à créer un site portfolio soigné sans coder — du choix du constructeur no‑code aux modèles, contenu, SEO et publication.
Un site portfolio est un lieu simple et professionnel pour présenter votre travail — un seul lien à partager partout. Bien fait, il remplit trois tâches à la fois : il instaure la confiance, montre des preuves concrètes, et facilite la prise de contact.
Crédibilité : Quand quelqu’un cherche votre nom ou clique sur votre lien, il doit voir immédiatement une présentation propre et cohérente qui paraît « réelle ». Un site personnel signale que vous prenez votre travail au sérieux.
Opportunités (leads) : Votre site doit orienter les visiteurs vers une prochaine étape claire — vous envoyer un e-mail, réserver un appel, demander un devis ou télécharger un CV. Si les gens aiment votre travail mais ne savent pas comment vous joindre, le site ne fait pas son travail.
Preuves de travail : Les réseaux sociaux et marketplaces sont utiles, mais n’affichent pas toujours votre meilleur travail dans son contexte. Votre portfolio en ligne vous permet d’expliquer l’objectif, votre rôle et le résultat — pour que les visiteurs comprennent réellement ce que vous savez faire.
Cette méthode pas-à-pas est conçue pour les personnes qui veulent un site portfolio sans code qu’elles peuvent publier rapidement :
Si vous savez faire glisser, déposer et modifier du texte, vous pouvez utiliser un créateur de site portfolio ou un outil glisser-déposer pour réaliser ceci.
Remarque : Si vous voulez quelque chose un peu plus flexible que le no‑code classique (mais sans coder à la main), une plateforme de type « chat-to-app » comme Koder.ai peut aussi être une très bonne option. Vous décrivez ce que vous voulez en conversation, et elle génère une vraie application web publiable — pratique si votre portfolio nécessite des pages personnalisées, des formulaires ou des sections interactives au‑delà des modèles habituels.
À la fin de ce guide, vous disposerez de :
La plupart des gens peuvent publier une première version en un week-end (ou quelques soirées concentrées) si le contenu est prêt.
Le budget dépend de vos choix :
L’objectif n’est pas la perfection, mais de lancer un site propre et clair que vous améliorerez avec le temps.
Avant de toucher à un constructeur ou de parcourir des modèles, clarifiez deux choses : ce que vous voulez que le site fasse pour vous, et qui vous devez convaincre dans les 30 premières secondes.
Un site portfolio sans code est le plus simple à construire quand chaque décision (mise en page, projets, textes, boutons) est filtrée par : « Est‑ce que ça aide mon visiteur idéal à faire la prochaine étape ? »
Choisissez le résultat principal qui compte le plus maintenant :
Les objectifs secondaires vont bien, mais donnez la priorité à un seul pour que votre page d’accueil ne soit pas une liste d’options non reliées.
Votre audience peut être un recruteur, un manager de recrutement, un client potentiel ou un collaborateur. Chacun cherche des preuves différentes.
Demandez‑vous :
Être « ouvert à tout » rend votre site oubliable. Choisissez un rôle cible (par ex. « UX Designer junior ») ou un service principal (par ex. « identité de marque pour startups »), et éventuellement une seconde option proche.
Votre site glisser‑déposer doit guider les visiteurs vers une étape suivante :
Placez ce CTA dans l’en‑tête et répétez‑le vers la fin de la page d’accueil (par exemple en lien vers /contact).
Avant de toucher un modèle, décidez ce que votre site doit accomplir : aider quelqu’un à comprendre qui vous êtes, ce que vous pouvez faire, et comment vous contacter — rapidement. Une structure simple rend tout constructeur no‑code plus facile à utiliser et évite que les visiteurs se perdent sur mobile.
La plupart des portfolios fonctionnent mieux avec un petit « cœur » qui tient dans une barre de navigation en haut :
Si vous n’êtes pas sûr, commencez par ces quatre pages. Vous pourrez toujours ajouter plus tard sans tout reconstruire.
Les pages optionnelles aident si elles facilitent la décision du visiteur :
Utilisez des libellés attendus : « Work » ou « Projets », pas des noms trop créatifs. Mettez votre lien le plus important en premier (souvent Work) et votre lien de conversion en dernier (Contact). Un ordre fréquent :
Accueil → Projets → À propos → Contact
Sur téléphone, le menu devient une petite icône, donc limitez les éléments principaux à 4–6. Si vous avez du contenu supplémentaire, regroupez‑le sous un item (par ex. « Plus » ou « Ressources ») ou placez‑le dans le pied de page.
Avant de toucher aux modèles ou aux couleurs, choisissez l’outil dans lequel vous allez construire. Le « meilleur » constructeur est celui que vous mettrez à jour — privilégiez la simplicité et l’adéquation au lieu de fonctionnalités que vous n’utiliserez jamais.
Constructeurs de sites (les plus flexibles) : Wix, Squarespace, Webflow, Framer, WordPress.com. Ce sont des sites complets avec pages, menus et publication intégrée.
Plateformes portfolio (démarrage le plus rapide) : Behance, Dribbble, Adobe Portfolio. Idéales pour publier rapidement et bénéficier d’une communauté intégrée, mais moins de contrôle sur la structure et l’identité.
Outils tout‑en‑un (minimalistes, bien pour les portfolios simples) : sites basés sur Notion, Carrd, ou des constructeurs « one‑page ». Parfaits pour une présence légère et rapide.
Constructeurs chat‑to‑app (rapides, plus personnalisés que les modèles) : Si vous voulez un portfolio qui se comporte comme une petite application web (formulaires personnalisés, pages projets dynamiques, contenus protégés), considérez une plateforme conversationnelle comme Koder.ai. Vous décrivez ce que vous voulez, vous itérez en conversation, et vous publiez — sans démarrer depuis zéro dans un éditeur visuel.
Cherchez ces éléments de base (ils comptent plus que de belles animations) :
Les plans gratuits sont utiles pour tester, mais incluent souvent :
Si vous postulez ou démarcherez des clients, un plan payant avec domaine personnalisé vaut souvent le coût.
Choisissez 2–3 outils, créez un brouillon rapide de la page d’accueil dans chacun, puis décidez selon votre objectif :
Une fois choisi, engagez‑vous — changer d’outil en cours de route est la manière la plus rapide de stagner.
Un modèle est votre raccourci vers un portfolio qui semble intentionnel dès le départ. L’objectif n’est pas de trouver le « design parfait », mais de démarrer avec une mise en page qui correspond aux attentes de votre domaine, puis de l’adapter pour qu’elle vous ressemble.
La plupart des constructeurs filtrent les modèles par cas d’usage. Cela vous fait gagner du temps car les sections et types de pages sont déjà alignés avec vos besoins.
Ouvrez la prévisualisation du modèle et évaluez‑le comme un visiteur.
Cherchez :
Si possible, prévisualisez sur votre téléphone (ou réduisez la fenêtre du navigateur) avant de choisir.
Certains modèles servent à montrer des effets, pas votre travail. Évitez les modèles avec animations excessives, navigation cachée, vidéo en lecture automatique ou texte gris clair sur fond blanc. Si un visiteur doit « deviner » comment lire votre site, il partira — surtout sur mobile.
Avant de passer du temps à remplir, assurez‑vous que le constructeur vous permet d’ajuster rapidement les éléments qui créent une marque cohérente :
Règle pratique : si vous ne pouvez pas rendre le modèle personnel en 15–20 minutes (couleurs, polices, espacement, quelques changements de section), prenez un modèle plus simple. Votre portfolio doit mettre en valeur vos projets, pas le modèle.
Avant d’ouvrir un constructeur, rassemblez ce que vous allez mettre sur le site. Cette étape vous fera gagner des heures car vous ne vous arrêterez pas toutes les deux minutes pour chercher une photo, réécrire une bio ou redimensionner une capture d’écran.
Votre titre est la première chose que les gens lisent — rendez‑le immédiatement compréhensible. Visez une phrase qui dit ce que vous faites et qui vous aidez.
Exemples adaptables :
Si vous êtes multi‑compétent, ne listez pas tout. Choisissez le service que vous voulez davantage maintenant.
Créez un dossier unique (avec sous‑dossiers) pour que la construction ressemble à un assemblage, pas à une recherche perpétuelle.
À préparer :
Astuce : exportez les images en formats web (JPG/PNG ; WebP si votre outil le supporte) et nommez les fichiers de façon descriptive (ex. refonte‑marque‑homepage.jpg).
Un petit nombre de projets solides convainc plus qu’une longue liste moyenne. Pour chaque projet, rédigez 3–5 puces simples :
Si vous débutez, utilisez :
Vous n’avez pas besoin d’un guide complet. Il faut de la cohérence.
Quand le contenu est prêt, la construction no‑code devient surtout du glisser‑déposer — le vrai travail (la clarté) est déjà fait.
La page d’accueil a un seul travail : aider quelqu’un à comprendre qui vous êtes, ce que vous faites, et quoi faire ensuite — en quelques secondes. Si un visiteur doit « vous deviner », il partira en général.
Ouvrez avec une introduction simple combinant rôle + spécialité + résultat. Visez une phrase que client ou recruteur pourrait chercher.
Exemple :
« Product Designer spécialisé en SaaS B2B — j’aide les équipes à livrer des parcours plus clairs et à améliorer l’activation. »
Ajoutez une deuxième ligne qui soutient (votre niche, outils, types de projets). Restez concis.
Ne faites pas chercher votre travail. Ajoutez une zone « Projets mis en avant » directement sur la page d’accueil.
Gardez chaque vignette lisible :
Si vous êtes en début de carrière, mettez en avant des projets perso, bénévoles, concepts de refonte ou travaux scolaires — la clarté et la présentation comptent plus que le logo.
Choisissez un seul bouton principal et répétez‑le en 1–2 emplacements (en haut et vers le bas) : Contact ou Réserver un appel. Liez‑le à /contact.
Évitez plusieurs boutons concurrents comme « Télécharger CV », « Envoyez‑moi un email », « Suivez‑moi » et « Réserver » — choisissez une action principale et rendez le reste secondaire.
Utilisez de courtes sections, des titres clairs et de l’espace blanc. Une structure simple suffit souvent :
Intro → Projets mis en avant → Petit extrait À propos → Témoignages/clients (optionnel) → CTA
Les pages projet sont là où votre portfolio gagne la confiance. Un format simple et répétable aide les visiteurs à comprendre ce que vous avez fait — sans leur demander de lire un roman.
Créez un « modèle de page projet » dans votre constructeur no‑code, puis dupliquez‑le pour chaque projet. Visez un flux clair :
Les débutants pensent souvent qu’ils n’ont « pas assez » à montrer. Le processus comble cette lacune et signale une vraie compétence. Incluez des aperçus rapides de votre réflexion — croquis, brouillons, décisions clés, ou comparaisons avant/après.
Règle utile : si quelqu’un demande « Comment êtes‑vous passé de l’idée au résultat ? », votre page doit répondre.
Quelques lignes de contexte peuvent rendre un petit projet substantiel :
Pour des travaux clients confidentiels, rédigez une étude de cas « assainie » : expliquez l’objectif, vos responsabilités, votre approche et l’impact en termes généraux. Remplacez les visuels sensibles par des versions simplifiées (wireframes, captures redigées, exemples recréés) et notez ce qui a été retiré.
Terminez chaque projet par un petit CTA : « Envie de quelque chose comme ça ? Contactez‑moi via /contact. »
Votre page À propos est l’endroit où un visiteur se demande si vous êtes « la bonne personne ». Restez chaleureux, précis et facile à parcourir — surtout sur mobile.
Rédigez un court paragraphe qui répond : que faites‑vous, qui vous aidez, et quels résultats vous visez. Ajoutez un détail qui vous rend mémorable (une niche, une méthode, une valeur).
Structure d’exemple : « Je suis [rôle] qui aide [audience] pour [type de travail]. Je me spécialise en [focus]. Récemment, j’ai travaillé sur [types de projets/résultats]. Je suis basé·e à [lieu/fuseau] et disponible pour [CDI/freelance/collabs]. »
Choisissez 3–6 signaux de crédibilité pertinents pour votre travail :
Si vous débutez, utilisez des preuves existantes : projets scolaires, bénévolat, stages ou un processus de travail clair.
Une courte liste de services réduit les échanges inutiles. Restez concret et précisez généralement ce qui est inclus (et ce qui ne l’est pas) :
Proposez plusieurs options et fixez les attentes :
Ajoutez une ligne du type : « Je réponds sous 1–2 jours ouvrés » et ce pour quoi vous êtes ouvert·e (« missions freelance, postes fixes, collaborations »). Ce petit détail installe la confiance et fait gagner du temps.
Vous n’avez pas besoin de faire du SEO comme un pro pour être trouvable. Quelques réglages aident les moteurs et les personnes à utiliser votre site.
Chaque page doit avoir son title et sa meta description. Pensez au title comme au titre affiché dans Google, et à la meta description comme au court pitch.
Si votre constructeur propose des réglages SEO par page, c’est là que ça se configure.
Utilisez les titres pour créer une structure claire :
Conservez des URLs lisibles et cohérentes comme :
/ (accueil)\n- /about\n- /work/project-name\n- /contactÉvitez les slugs auto‑générés du type /page123.
Les portfolios chargent beaucoup d’images, donc gardez les pages rapides :
Le texte alternatif aide les lecteurs d’écran et clarifie aussi votre travail pour les moteurs de recherche.
Ajoutez un pied de page simple sur chaque page avec :
Cela améliore l’utilisabilité et facilite la prise de contact depuis n’importe quelle page.
Un domaine personnalisé (comme votrenom.com) rend votre portfolio plus professionnel et plus facile à partager sur CV, LinkedIn et signatures d’e-mail. L’objectif ici est simple : choisir un nom facile à taper, le connecter à votre constructeur, et publier après une vérification rapide.
Faites le test « à l’oral » : si on l’entend une fois, peut‑on l’épeler ?
Bonnes options :
prenomnom.com (le plus courant)\n- nom.design / nom.dev / nom.photo (si adapté)\n- prenomcreates.com (si votre nom est pris)Évitez les tirets, les doubles lettres sujettes aux fautes et les jeux de mots trop alambiqués.
Quand vous achetez un domaine, il est chez un registrar. Votre portfolio est chez un constructeur (Squarespace, Wix, Webflow, Framer, Carrd, etc.). Le DNS est l’ensemble des « panneaux » qui disent à Internet où diriger les visiteurs. En pratique, vous copiez quelques enregistrements fournis par le constructeur dans l’interface du registrar :
www vers votre siteLa plupart des constructeurs proposent un guide pas‑à‑pas et confirment quand la connexion fonctionne. Les changements peuvent prendre de quelques minutes à quelques heures.
Si vous utilisez une plateforme qui inclut hébergement et déploiement (par exemple, Koder.ai prend en charge le déploiement/l’hébergement et les domaines personnalisés), la publication peut être encore plus simple — utile si vous souhaitez exporter le code source plus tard.
Avant de publier, vérifiez :
Faites une dernière vérification :
Quand tout est OK, publiez — puis partagez votre domaine partout où vous voulez être trouvé.
Publier votre portfolio n’est pas la ligne d’arrivée — c’est le point où il commence à travailler pour vous. Un peu d’entretien le garde précis, facile à naviguer et centré sur les résultats que vous voulez (messages, appels, réservations, entretiens).
La plupart des constructeurs offrent des stats intégrées ou des intégrations simples. Activez des analytics basiques pour répondre à des questions comme :
Si vous préférez, connectez Google Analytics ou une alternative respectueuse de la vie privée. Gardez‑le simple : consultez une fois par mois et cherchez des tendances, pas du bruit quotidien.
Les vues font plaisir, mais les conversions montrent la valeur. Choisissez 1–3 actions importantes et suivez‑les :
Notez rapidement : date, changement effectué et résultats après quelques semaines. C’est suffisant pour apprendre ce qui améliore les réponses.
L’entretien est plus facile quand il est programmé :
Visez « à jour et clair », pas « parfait ».
Rendez votre portfolio difficile à manquer :
Les petites améliorations s’additionnent — surtout si vous mesurez, ajustez et restez visible.
Un site portfolio doit remplir trois fonctions :
Si les visiteurs aiment votre travail mais ne peuvent pas vous contacter rapidement, le site ne remplit pas encore son rôle.
La plupart des personnes peuvent publier une première version solide en un week-end (ou quelques soirées concentrées) si le contenu est prêt.
Un plan pratique :
Commencez simple ; vous pourrez améliorer après la mise en ligne.
Prévoyez :
votrenom.com.Si vous postulez à des emplois ou proposez vos services à des clients, passer à un plan payant pour un domaine personnalisé vaut généralement l'investissement.
Choisissez un objectif principal pour qu'la page d'accueil ne ressemble pas à un menu fourre-tout :
Ensuite, définissez un CTA principal qui y correspond (par ex. « Contact », « Réserver un appel » ou « Télécharger le CV ») et répétez-le dans l'en-tête et vers le bas de la page d'accueil.
Commencez avec les quatre pages de base :
Ajoutez des pages supplémentaires seulement si elles soutiennent votre objectif (par ex. pour freelances, pour la candidature).
Choisissez en fonction de ce que vous allez vraiment maintenir :
Faites une courte liste de 2–3 outils, construisez une page d'accueil rapide dans chacun, puis engagez-vous sur un seul.
Évitez les modèles qui mettent en avant des effets au détriment de votre travail.
Vérifiez :
Écartez les animations envahissantes, la navigation cachée, les vidéos en lecture automatique et le texte à faible contraste. Si vous ne pouvez pas rendre le modèle votre en (couleurs, polices, espacement), choisissez un modèle plus simple.
Rendez-le léger et cohérent :
Construire devient de l'assemblage plutôt que de la recherche de contenu.
Utilisez une structure répétable pour publier plus vite :
Si vous êtes débutant, le processus est votre avantage—incluez croquis, brouillons, décisions ou comparaisons avant/après.
Faites les bases qui améliorent la découvrabilité et l'accessibilité :
/about, /work/project-name, /contact.Avant la publication, vérifiez le rendu mobile, les liens cassés, le formulaire, les fautes et la qualité des images.