Créer un portfolio filtrable avec historique de navigation
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
2h16
de formation
3
leçons vidéo
1
chapitre
Débutant
niveau requis
Adrien Gazaix
Adrien Gazaix
Formateur certifié

Créer un portfolio filtrable avec historique de navigation

4.8/5 Trustpilot (1385 avis) Satisfait ou remboursé
2h16
de formation
3
leçons vidéo
1
chapitre

Dans ce tuto vidéo PHOTOSHOP, HTML5, CSS3 et JQUERY nous allons voir comment créer un portfolio filtrable avec un historique de navigation. Les photos/projets qui seront triés dans le portfolio auront une hauteur variable et grâce à la puissance de Jquery, tous se replaceront au bon endroit pour ne laisse aucun espace vide. On mettra en place un petit bouton qui permettra de cacher/montrer le header du site.
Grâce à de nouvelles propriétés CSS3, nous mettrons facilement les images en noir & blanc et nous ferons bouger l'échelle de celles-ci. Nous ajouterons un système de filtre avec plusieurs catégories grâce à des animations fluides.
Et enfin, nous verrons comment ajouter un historique de navigation pour que les filtres appliqués soient gardés en mémoire et que l'internaute puisse revenir en arrière ou mettre en favoris une catégorie sélectionnée.

Sommaire de la formation

  • Partie 1 : Création du design sur Photoshop
  • Partie 2 : Découpage des images & Intégration du header
  • Partie 3 : Intégration & Développement du portfolio

Je vous invite à regarder l'extrait personnalisé que j'ai réalisé pour vous rendre compte de ce que l'on va obtenir ensemble à la fin de ce tutoriel. Le PSD ainsi que les fichiers HTML, CSS, & JQUERY sont fournis avec la formation.
Bon tuto !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Design sous Photoshop
Leçon 2
Découpage de la maquette
Leçon 3
Intégration et Développement

Table des matières

Leçon 1

Design sous Photoshop

40m29
Leçon 2

Découpage de la maquette

42m17
Leçon 3

Intégration et Développement

54m09

Aperçus

Avis des apprenants

Détail des avis
579
Apprenants
32
Commentaires
5/5
Note moyenne
5/5
29
4/5
3
3/5
0
2/5
0
1/5
0
Didigaga
Didigaga
Publié le 27/01/2015
Merci mille fois pour ce tuto ! Moi qui suis complètement débutante, je n'ai eu aucun mal à l'appliquer à mon propre projet. Bravo
Adrien Gazaix
Adrien Gazaix
Hello! Si tu est débutante et que tu as tout compris c'est super pour toi et aussi pour moi car j'essaye d'être précis et aller lentement pour que tout le monde puisse suivre et ce n'est pas toujours facile. Merci de ton retour et bonne continuation ;)
Patricia Neve
Patricia Neve
Publié le 30/12/2014
Très bien expliqué ! J'apprécie beaucoup le petit bouton pour la disparition du menu. Bravo !
Adrien Gazaix
Adrien Gazaix
Merci ! Oui l'effet est sympa ;)
Stephan Fodor
Stephan Fodor
Publié le 03/05/2014
Hello Spykrew, j'ai un gros souci qui m'empêche d'avancer sur le tuto : "Designez et Intégrez un site onepage". Je t'écris par le biais de ce Tuto car je n'ai à ce jour aucune réponse concernant la question suivante : " Lorsque je change les images (vignettes) du slider > images rectangulaires > La div id="content_news" tronque la section class="single_news" sur firefox et chrome ?!!? exemple : fodor.serveqo.ws > site tests??J'ai beau bidouiller dans tous les sens...je ne trouve pas la solution... merci à toi !!!

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
11,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
2h16 de vidéo • 1 chapitre
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 752 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1420 tutos gratuits

Notre politique de protection des données