Designer & Intégrer un Portfolio en Mobile First
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
4h06
de formation
29
leçons vidéo
3
formations
Débutant
niveau requis
Adrien Gazaix
Adrien Gazaix
Formateur certifié

Designer & Intégrer un Portfolio en Mobile First

Promo -37%
4.8/5 Trustpilot (1391 avis) Satisfait ou remboursé
4h06
de formation
29
leçons vidéo
3
formations

Dans cette formation complète de plus de 4h de vidéo, je vous propose de découvrir ensemble comment designer un Portfolio sur Figma en version mobile/tablette/bureau et ensuite comment l’intégrer en utilisant du HTML, CSS et jQuery.

Nous prendrons pour exemple le portfolio d'une photographe qui voudrait présenter son travail classé dans différentes catégories.
On mettra en place un système de scroll horizontal pour les filtres, un dark mode pour améliorer le confort de lecture dans une pièce sombre, une lightbox pour visionner les photos en grand format…

Au programme de ce bundle Design & Intégration d’un Portfolio :

  • Episode 1 : Designer la version mobile du portfolio avec la mise en place d’une grille, d’une palette de couleurs, créer un header avec des icônes de réseaux sociaux, simuler une lightbox sur le prototype animé, et mise en situation des 2 versions sur un mockup.
  • Episode 2 : Décliner le design créé précédemment sur tablette/bureau avec une adaptation de la grille des projets du portfolio, découverte des composants interactifs et tests sur prototypes animés.
  • Episode 3 : Intégration responsive de la maquette en partant de la version mobile et l'adapter petit à petit pour les écrans plus grands (tablette & bureau) grâce aux media queries.

Je vous invite à regarder l’extrait vidéo pour vous rendre compte du résultat final obtenu à la fin de la formation.
Toutes les sources sont fournies avec la formation.
N'hésitez pas à me soumettre des questions dans le salon d'entraide si vous rencontrez des difficultés pendant ou après le visionnage de la formation.
Bonne formation !

Cours dans ce bundle

Designer un Portfolio - Episode 1 : la version mobile Cours 1

Designer un Portfolio - Episode 1 : la version mobile

Designer un Portfolio - Episode 2 : Tablette & Bureau Cours 2

Designer un Portfolio - Episode 2 : Tablette & Bureau

Intégration d'un Portfolio responsive en Mobile First Cours 3

Intégration d'un Portfolio responsive en Mobile First

Plan détaillé des cours

 
Leçon 1

Création de la grille et choix de la palettes de couleurs

07m22
Leçon 2

Designer le header avec le logo, les réseaux sociaux et l'icône dark mode

08m30
Leçon 3

Ajouter le contenu texte de présentation

04m22
Leçon 4

Designer les filtres du portfolio avec un effet de scroll horizontal

06m30
Leçon 5

Ajouter la galerie photo et créer le footer

06m44
Leçon 6

Créer un prototype pour modifier le filtre appliqué et donc les images affichées

05m53
Leçon 7

Créer un effet de lightbox au clic sur une image

06m32
Leçon 8

Mettre en place le dark mode lors du clic sur l'icône présent dans le header

05m55
Leçon 9

Mise en situation sur un mockup des 2 versions light & dark

08m40
 
Leçon 1

Intro, création de la frame tablette, grille & colonnes

05m32
Leçon 2

Créer le header sur tablette

03m22
Leçon 3

Positionner le titre et le sous titre sur tablette

04m54
Leçon 4

Filtres, galerie photos et footer sur tablette

07m36
Leçon 5

Mise en place d'une lightbox sur tablette

06m15
Leçon 6

Création de la version bureau

12m50
Leçon 7

Découverte et utilisation des composants interactifs

08m54
Leçon 8

Prototype sur le filtrage des images, dark mode et conclusion

11m
 
Leçon 1

Intro, Google Fonts, Librairie icônes

08m05
Leçon 2

Création du CSS de base : titres, variables, container...

15m15
Leçon 3

Mettre en place la structure HTML de base

16m18
Leçon 4

Intégrer le header en version mobile

10m01
Leçon 5

Intégrer le contenu d'intro ainsi que le footer en version mobile

04m39
Leçon 6

Intégrer la partie portfolio avec le système de filtres en version mobile

13m07
Leçon 7

Adapter le site pour les écrans plus grands grâce aux media queries

15m43
Leçon 8

Ajouter le nom du projet par dessus la photo lors du passage de la souris

10m45
Leçon 9

Le système de filtres pour filtrer les projets par catégorie

11m41
Leçon 10

Création du dark mode pour faciliter lecture du site quand il fait sombre

10m08
Leçon 11

Ajouter une fancybox pour ouvrir les photos ou vidéos par dessus le site

08m02
Leçon 12

Conclusion

01m54

Avis des apprenants

Détail des avis
2
Commentaires
4,5/5
Note moyenne
5/5
1
4/5
1
3/5
0
2/5
0
1/5
0
Amourmarius
Amourmarius
Publié le 28/08/2022
Super tuto ! Rapide et efficace. De plus le design du site est top 👌. Merci beaucoup !
Adrien Gazaix
Adrien Gazaix
Merci merci !!! Bonne continuation :)
Samia Baum
Samia Baum
Publié le 05/12/2022
Bonjour, il manque les fichiers sources à ce tutoriel, cela m'aurait été d'une grande aide...
Adrien Gazaix
Adrien Gazaix
Tous les fichiers sources sont dispos avec la formation :) Demandez au staff de tuto.com de vous aider, il y a peut être un bug quelque part...

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
37,99€ 24€
Promo -37%
Paiement unique, sans abonnement
Accès à vie à cette formation
4h06 de vidéo
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 781 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 1425 tutos gratuits

Notre politique de protection des données