Hey hey hey !! Aujourd’hui, on va voir ensemble comment faire une page de portfolio pour ton site ! À l’heure des recherches de stage, il faut que ton site soit attractif, et pour ça, quelques petites animations et une présentation propre et épurée est très souvent appréciée.

Voici ce que nous allons faire aujourd’hui : DEMO

Créer son portfolio avec tri : Le but du tutoriel

  • Objectifs visés : Apprendre et comprendre l’utilisation des transitions CSS3 et des suites mathématiques en CSS, ainsi que la logique derrière un tri en jQuery.
  • Langages : HTML5, CSS3 et jQuery
  • Temps approximatif : 1h

Non, ne quitte pas ce tuto parce que tu as lu le mot « mathématique », c’est pas si dur que ça, j’te promet ! :)

Avant de commencer le tutoriel, je te conseille de préparer tes images pour les différents travaux que tu mettras dans ton portfolio, ainsi qu’un peu de contenu (un titre et un petit texte pour chacun). Pour l’exemple, j’utiliserais ici des images qui proviennent de Unsplash.

Le cahier des charges

Avant de coder, il faut un petit peu réfléchir à ce que tu veux ! Avoir un plan pour savoir où tu vas avant de foncer tête baissée, tu seras beaucoup plus productif ! Voici ce que moi j’attendais de ce faux projet :

  • Je veux construire une page « portfolio »
  • Je veux avoir une image représentative de mon projet
  • Je veux un titre ainsi qu’un peu de contenu et la possibilité de me rediriger vers une page propre au projet sur lequel je clique
  • Je veux quelques animations, pour rajouter un côté dynamique
  • Je veux un système de tri permettant de mettre en avant les éléments retenus, et pas de cacher complètement les autres

En ce qui concerne la mise en page, j’ai fais un choix très basique : 2 colonnes.

Maintenant que l’on sait ce qu’il nous faut, on est prêt, on peut attaquer ! Fais chauffer ton éditeur de code

Le HTML pour coder ton portfolio

Je vais partir du principe que tu as tout ton document de base (!DOCTYPE, <head>, etc … et si c’est pas le cas, go Schnaps.it), et je vais mettre en avant dans cette partie uniquement la structure du portfolio.

1. Le tri

Pour le tri, j’ai décidé de faire une espèce de barre de menu qui sera au dessus de mon contenu : En gardant à l’esprit que chaque élément de mon menu sera en float, j’ai déjà prévu le coup en ajoutant une <div> avec la classe clear, qui, dans mon CSS, ajoutera une propriété clear: both; afin de réinitialiser le flux de ma page après le menu.

 

Quelques explications aussi sur les <li> : Je leur ai donné à tous un id qui me permettra plus tard de les trier avec mon jQuery. De manière générale, je te conseille de prendre le même nom que leur dénomination, tu t’y retrouveras plus facilement.
J’ai également entouré tout mon code d’un .wrapper, afin de centrer mon contenu plus tard dans mon CSS. En fait, avec tout ça tu peux vraiment voir à quel point c’est important de préparer ton projet sur le papier avant de te lancer dans le code, sinon tu risques d’oublier trois tonnes d’éléments et de devoir recommencer plusieurs fois !

2. La structure des travaux

Ici, je vais te montrer comment faire la structure d’un seul élément. Ensuite, tu auras juste à faire des copier/coller pour répéter ça ! Ne t’inquiète pas encore pour les colonnes, on règlera ça avec le CSS de manière complètement automatique !

Quelques explications s’imposent, évidemment ! Chaque élément (item) sera une ancre, afin que tes visiteurs puissent accéder au contenu complet en cliquant n’importe où sur ton élément, et pas juste sur un bouton.

Deuxième information très importante : dans les classes de chaque « item », il faut préciser la catégorie. Ici tu vois que pour moi c’est print par exemple. Tu dois faire attention à ce que cette catégorie corresponde à la manière dont tu as écris tes id pour chaque item de ton tri ! C’est grâce à ça que le tri fonctionnera plus tard.

Et enfin, l’image de chaque objet est insérée via du CSS : C’est une question de goût, je trouve ça plus clean de cette manière, moins encombrant. Je te conseille de suivre le tutoriel à la lettre si tu n’es pas forcément très à l’aise au début, et par la suite tu pourras personnaliser la chose !

Pour le HTML, c’est déjà tout ! Tu suis pour l’instant ? Bien

Le CSS pour coder ton portfolio

Le CSS, c’est le moment de s’occuper de la mise en page ainsi que des animations !

1. Le wrapper et le menu de tri

FIOU ! Le CSS est toujours un peu plus long, ne t’inquiète pas ! Les explications sont dans les commentaires du code, donc n’hésite pas à relire plusieurs fois si tu as du mal à comprendre un point.

2. Les items du portfolio

Ca va se compliquer un petit peu, tiens bon !

Vraiment désolé pour le mur de texte ! Mais le code c’est ça, et plus particulièrement le CSS On est presque arrivé au bout, ne lâche rien !

3. Prévoir pour le jQuery

Tout-à-l’heure dans la partie jQuery, nous allons utiliser des classes CSS qu’il faut que l’on définisse. C’est ici que je vais le faire !

Et voilà ! La partie la plus longue est terminée ! Si tout se passe bien, en vérifiant, quand tu passes ta souris sur tes items de portfolio, tes animations devraient déjà être fonctionnelles ! Cependant, il faut encore régler le problème du menu, et pour ça..

jQuery

Précision : Pour faire fonctionner ce script, il est nécessaire d’inclure jQuery d’abord et ENSUITE seulement ce script. Pour la bonne pratique, il est préférable d’inclure le javascript juste avant le tag.

Le code pour appliquer un tri par catégorie

Et voilà ! Si tout se passe bien, lorsque tu cliques sur les items de ton menu, ça devrait minimiser certains éléments (en fonction des catégories que toi tu as choisis, bien évidemment) ! Si tu as un problème, ou si tu penses que je t’ai berné sur la facilité/la durée de ce tutoriel, n’hésite pas à me le faire savoir dans les commentaires, je ferais mon possible pour t’aider ! De même, si tu as des petites techniques ou des bouts de code à partager qui permettent d’atteindre le même genre de résultats, fais-toi plaisir ! MMI c’est aussi et surtout une grande communauté

On se retrouve très vite pour d’autres tutoriels !

Tutoriel pour créer un portfolio avec tri
4.8 (96.67%) 18 votes

Ce qui pourrait également t'intéresser ...

33 réflexions sur “ Tutoriel pour créer un portfolio avec tri ”

  1. Bonjour,j’aimerai bien comprendre comment liée le fichier HTML au deux autre fichier car je n’arrive pas a comprendre comment on fait pour obtenir le résultat. Merci

    1. Salut Nicolas!

      Je me permet de te corriger : On lie le fichier CSS et le fichier JS au HTML et non l’inverse!

      Pour le fichier CSS il faut rajouter cette ligne dans la balise head de ton fichier HTML :

      dans le href il faut mettre le chemin vers ta feuille de style, ici c’est par exemple quand elle est au même endroit que le html.

      Pour le fichier JS il faut rajouter avant le tag de ton HTML la ligne suivante :

      Pareil, dans src il faut mettre le chemin vers ton fichier. Ici le mien s’appelle script.js et se trouve au même endroit que le fichier HTML !

      J’espère que ça t’auras aidé, et si tu n’y arrives pas n’hésites pas à redemander de l’aide!

        1. Mince, désolé c’est ma faute. J’ai oublié une fermeture de div dans le code de l’article.. C’est désormais corrigé !

          La div portant les classe « wrapper » et « portfolio » doit s’étendre jusqu’à après le dernier item du portfolio, et non pas se fermer juste après le tri!

          1. Ok merci beaucoup !! ça marche, mais j’ai toujours les petits points entre les menus de la barre en haut c’est bizarre !

          2. Merci beacoup ! Et pourquoi après avoir fait tout cela je n’arrive toujours pas a cliquez sur une de mes icônes en haut sa reste sur all !

          3. il faut que tu integre jquery dans le dossier avec ton site ! En tout cas merci a toi maximaLzdnb et comme les portes de APB sont ouvertes j’ai pu metre MMI en premier j’espère vraiment être pris !! Juste par curiosité, tu avais un super dossier pour y rentrer ?

          4. Hello, 7 mois ça fait un peu long pour te répondre x) En espérant que tu as été pris Pour répondre à ta question, non, j’avais un dossier exécrable, et j’ai faillit ne pas être pris pour tout te dire. Je suis passé avant dernier au recrutement. Au bac je me suis défoncé et j’ai eu le double mes moyennes annuelles c’est grâce à ça que j’ai été pris. Pour autant, j’ai fini second de promotion (sur une 50 aine) pendant 2 ans. Le dossier ne fait pas tout, et ça ça concerne aussi les profs réticents quand ils voient qu’un étudiant n’a pas 15 de moyenne en maths. Ce qui compte, c’est les motivations et la passion, pas des chiffres stupides qui sont donnés à un moment X auquel tu ne peux rien changer. Petit coup de gueule, désolé, mais merci à toi d’avoir posé la question

          5. Merci c’est super !! et dites moi comment je peux faire pour que mon image soit centrée dans chaque block ?

    1. Salut ! Merci à toi de l’avoir suivi

      Pour mettre sur 4 colonnes au lieu de 2, il te suffit de changer 2 choses :
      * La largeur de chaque colonne (width: 48%) et de le passer à 24% par exemple (soit (100%/4 colonnes) – (nbColonnes – 1) * (100 – 3*24) pour le calcul précis, laissant ainsi 1,33% de marge sur chaque colonne))
      * La gestion des float : Au lieu d’alterner float left et float right, il faut mettre un float left général sur .item et une marge générale également (le 1,33% calculé plus haut par exemple) et ensuite se servir de la suite mathématique (qui était 2n et 2n+1) : On va plutôt faire un margin-right: 0; tous les 4n, afin de ne pas avoir de marge sur le dernier élément de chaque ligne.

      Si les calculs t’embêtent, et si ton code est du simple html (donc non généré par une boucle en php ou autre), tu peux aussi mettre une classe sur les derniers .item de chaque ligne (donc tous les 4 .item tu mets une classe du genre « last ») et dans ton css lui mettre un margin-right: 0;

      Voilà, j’espère que ça répond à ta question

    1. C’est du CSS3 Bien sûr depuis je me suis mis à Flex et à toutes ces belles choses.

      Si tu y tiens tant que ça..

      Container :
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      Items :

      width: 48%;

      Mieux ?

      1. Juste une dernière question, quand j’utilise flex-wrap: wrap; mes items s’alignent en colonne alors que je voudrait 3 items sur la même ligne, sachant que chacune de mes images est à width : 33%, comment faire q’il-te-plaît…?

      2. Je parlais pas de la structure mais du système de trie en lui-même
        C’est fout tout ce que l’on peut faire avec des checkbox et la pseudo-classes :cheched

  2. Bonjour,

    J’ai réaliser le tutoriel et je souhaite l’intégrer dans un thème WordPress. Le thème que j’ai pour mon site pro, le portfolio fonctionne très mal. Du coup, je voulais vous demander comment je peux intégrer le fichier HTML et CSS dans le thème ? Est-ce que je devrais coder pour chaque nouveau article portfolio dans l’HTML ? Ou est-ce qu’il se fera automatiquement à partir du Worpress ?
    Est-ce que c’est réalisable ?

    Merci pour votre blog, qui m’aide beaucoup (vu que je suis étudiante en 2ème année MMI ^^)

    Merci par avance de votre réponse

    1. Hello Roxane, et désolé pour la réponse tardive, j’ai pas vu le mail !

      Pour l’intégrer dans un thème WordPress, c’est effectivement un peu plus complexe. Mon avis de développeur, c’est que si tu ne développe pas le thème toi même, entièrement, ce n’est pas le bon plan d’intégrer ce bout de code dans le thème du développeur qui l’a fait. Tu vas avoir des ennuis sans fin, et si tu le fais mal (c’est à dire pas dans un thème enfant), à la première mise à jour du thème tu vas tout perdre et ça va être un vrai calvaire pour tout refaire dans l’urgence etc..

      Si tu utilise des thèmes tout fait, le mieux est encore d’en trouver un avec exactement ce que tu veux. En 2ème année MMI je ne pense pas que l’on enseigne le développement de thèmes WordPress malheureusement (vraiment malheureusement parce que c’est un standard de l’industrie pourtant). Je ferais très prochainement un article d’introduction à WordPress qui expliquera ce que c’est, comment ça marche, et où trouver des réponses à (presque) toutes ses questions ! Stay tuned et bon courage pour ton portfolio

  3. Bonjour,
    J’ai suivi la moitié de ton tuto car j’avais déjà un portfolio composé d’une liste d’images, j’ai donc ajouté le menu que tu as proposé avec des liens autour de chaque image pour y intégrer les class item. Au niveau du CSS j’ai arrangé à ma sauce et tout marche, le javascript par contre ne semble pas bien fonctionner car il ne trie pas mes images… Mais le menu avec « active » marche bien pourtant, je ne sais pas d’où cela vient, peut-être une ligne que j’ai supprimée ou une balise que je n’ai pas bien nommée…? Je ne comprend pas pourquoi on parle de .sorteDown sachant qu’il n’apparaît pas dans le HTML…? Car je voudrais que tous mes travaux print s’effacent quand on clique sur web etc… Merci par avance pour ton aide, je joins des screens de mes fichiers

    1. Hello Ophélie

      Pour t’expliquer simplement : Dans le javascript, on va affecter des classes aux éléments (.sortDown par exemple), afin qu’ils réagissent au css. Ça veut dire que oui, tu ne les verras pas dans ta fiche HTML, par contre il est nécessaire que tu les déclare dans ta feuille de style CSS, comme ça dès l’instant ou le javascript leur ajoutera la classe « sortDown », ils prendront son style en compte, dans notre cas c’était un scale. Je t’invite à relire la partie 3 « Prévoir pour le jQuery », si ce n’est toujours pas plus clair pour toi n’hésite pas à recommenter !

      Ensuite en ce qui concerne ton problème, c’est tout simple, c’est une simple faute d’inattention (ça arrive à tout le monde, si si je te jure !), si tu regarde dans ton js tu as portItem = $(« .port .item »); alors que dans ton HTML tes item de portfolio sont dans un ul de classe « portfolio ». Donc soit tu renomme la classe « portfolio » en « port » soit tu renomme « port » en « portfolio » dans ton js ! À toi de voir !

      Pour aller plus loin et t’aider à débugguer de manière extrêmement simpliste, je t’invite à inspecter un élément lorsque tu as un problème avec du JS, et à ouvrir la console du navigateur (il y a un onglet pour ça dans le truc qui s’ouvre pour inspecter l’élément !), tu verras que ce genre de problème t’apparaîtra beaucoup plus rapidement puisque la console te le dira, cet élément n’existe pas !

      Voilou ! Bon courage

      1. Merci beaucoup pour ces précisions en un temps recors aha !

        J’ai donc laissé la classe .sortedDown dans mon CSS, et ai changé le .port .item en .portfolio .item mais ça ne fonctionne toujours pas…

        1. Content que ça marche pour toi !

          C’est du détail et c’est une notion relativement compliqué, mais c’est préférable d’utiliser quelque chose du genre « visibility: hidden; opacity: 0; » plutôt que de toucher à top/bottom/left/right. Ces quatres propriétés déclenchent une réaction du navigateur qui doit s’adapter (surtout des chiffres aussi grands que -9999 !), alors sur ordi ça va ça se voit pas trop, mais sur des ordis moins puissants ou des smartphones / tablettes, c’est ce genre de détails qui font ramer les animations ! L’optimisation des performances c’est une compétence à part entière, pour autant je n’essaye pas de t’y convertir, c’est du détail et ça n’impactera pas ton site, à moins que tu intègres mon portfolio à un site qui fait + de 1 000 000 visites par jour

          Bonne continuation et n’hésite pas à nous contacter si tu as des questions !

          1. En effet j’ai un peu joué la carte de la facilité… Mais j’ai opté pour un display:none; finalement ! Mais du coup les transitions ne fonctionnent pas…

  4. Bonjour! J’ai essayé ce portfolio, super design, et vraiment propre et complet bravo! Je l’ai adapté à mon site et mes goûts, mais merci pour le code :)! Juste une petite question, j’essaye de rendre ce portfolio responsive mais en vain.. quelques conseils à me donner ?
    Bon week end!

    1. bonjour, As tu trouvé réponse à ta question (rendre ton portfolio responsive) ?
      Mon portfolio : MENU -(Accueil – a propos – PORTFOLIO — déroulant MATERNITE – MARIAGE…etc.)
      Chaque item « MATERNITE, MARIAGE »…etc amène à un Slider de quelques images (diaporama)

      Sur ordinateur aucun problème pour visualiser ces Sliders . Mais dès qu’on passe sur mobile ou tablette. Les Sliders disparaissent. Donc pas responsive.

      Peux tu m’aider?

      1. J’avais réussi à le rendre responsive, mais c’était pas propre.. j’avais modifié la width = 33% dans mon css pour la mettre à 100% en dessous de 960px de taille d’écrans, mais c’était pas propre.. Du coup j’ai juste changé de porfolio et j’en ai pris un bootstrap

  5. Bonjour

    Merci pour ce très beau portfolio!

    J’ai juste un soucis avec les photos, tu dis les intégrer via le CSS, hors dans ton tuto tu mets le background ds le html, es ce normal ?

    d’autre part, je mets ma photos en remplacement de la tienne, et quand je regardes sous chrome, la photo ne s’affiche pas, es ce qu’il y a une taille particulière ?

    Merci encore

    Audrey

  6. Bonjour, merci pour le super tuto !

    Je voudrais savoir, si par exemple je veux pas rétrécir les images mais les faire disparaître est ce que je peux faire

    .sortedDown {

    transform: hidden;
    }

    ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je veux Contribuer

C'est parti

Je suis un Professionnel

Voyons voir