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

TUTO Designer & Intégrer un Portfolio en Mobile First

Adrien Gazaix
Promo -37%
24,00€37,99€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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 1Création de la grille et choix de la palettes de couleurs
07m22
Leçon 2Designer le header avec le logo, les réseaux sociaux et l'icône dark mode
08m30
Leçon 3Ajouter le contenu texte de présentation
04m22
Leçon 4Designer les filtres du portfolio avec un effet de scroll horizontal
06m30
Leçon 5Ajouter la galerie photo et créer le footer
06m44
Leçon 6Créer un prototype pour modifier le filtre appliqué et donc les images affichées
05m53
Leçon 7Créer un effet de lightbox au clic sur une image
06m32
Leçon 8Mettre en place le dark mode lors du clic sur l'icône présent dans le header
05m55
Leçon 9Mise en situation sur un mockup des 2 versions light & dark
08m40
 
Leçon 1Intro, création de la frame tablette, grille & colonnes
05m32
Leçon 2Créer le header sur tablette
03m22
Leçon 3Positionner le titre et le sous titre sur tablette
04m54
Leçon 4Filtres, galerie photos et footer sur tablette
07m36
Leçon 5Mise en place d'une lightbox sur tablette
06m15
Leçon 6Création de la version bureau
12m50
Leçon 7Découverte et utilisation des composants interactifs
08m54
Leçon 8Prototype sur le filtrage des images, dark mode et conclusion
11m
 
Leçon 1Intro, Google Fonts, Librairie icônes
08m05
Leçon 2Création du CSS de base : titres, variables, container...
15m15
Leçon 3Mettre en place la structure HTML de base
16m18
Leçon 4Intégrer le header en version mobile
10m01
Leçon 5Intégrer le contenu d'intro ainsi que le footer en version mobile
04m39
Leçon 6Intégrer la partie portfolio avec le système de filtres en version mobile
13m07
Leçon 7Adapter le site pour les écrans plus grands grâce aux media queries
15m43
Leçon 8Ajouter le nom du projet par dessus la photo lors du passage de la souris
10m45
Leçon 9Le système de filtres pour filtrer les projets par catégorie
11m41
Leçon 10Création du dark mode pour faciliter lecture du site quand il fait sombre
10m08
Leçon 11Ajouter une fancybox pour ouvrir les photos ou vidéos par dessus le site
08m02
Leçon 12Conclusion
01m54

Avis des apprenants

Détail des avis
68
Apprenants
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

Avec quelles versions de logiciels ce tuto est-il compatible ?

HTML , CSS

Quel est le niveau requis pour suivre ce tuto ?

débutant

Payer plus tard

Prix d'achat : 24,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1422 tutos gratuits

Notre politique de protection des données