Designer & Intégrer un Portfolio en Mobile First
ERROR
00:00
00:00

TUTO Designer & Intégrer un Portfolio en Mobile First

Adrien Gazaix
Promo -37%
24,00€38,00€

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
07m22s
Leçon 2Designer le header avec le logo, les réseaux sociaux et l'icône dark mode
08m30s
Leçon 3Ajouter le contenu texte de présentation
04m22s
Leçon 4Designer les filtres du portfolio avec un effet de scroll horizontal
06m30s
Leçon 5Ajouter la galerie photo et créer le footer
06m44s
Leçon 6Créer un prototype pour modifier le filtre appliqué et donc les images affichées
05m53s
Leçon 7Créer un effet de lightbox au clic sur une image
06m32s
Leçon 8Mettre en place le dark mode lors du clic sur l'icône présent dans le header
05m55s
Leçon 9Mise en situation sur un mockup des 2 versions light & dark
08m40s
 
Leçon 1Intro, création de la frame tablette, grille & colonnes
05m32s
Leçon 2Créer le header sur tablette
03m22s
Leçon 3Positionner le titre et le sous titre sur tablette
04m54s
Leçon 4Filtres, galerie photos et footer sur tablette
07m36s
Leçon 5Mise en place d'une lightbox sur tablette
06m15s
Leçon 6Création de la version bureau
12m50s
Leçon 7Découverte et utilisation des composants interactifs
08m54s
Leçon 8Prototype sur le filtrage des images, dark mode et conclusion
11m
 
Leçon 1Intro, Google Fonts, Librairie icônes
08m05s
Leçon 2Création du CSS de base : titres, variables, container...
15m15s
Leçon 3Mettre en place la structure HTML de base
16m18s
Leçon 4Intégrer le header en version mobile
10m01s
Leçon 5Intégrer le contenu d'intro ainsi que le footer en version mobile
04m39s
Leçon 6Intégrer la partie portfolio avec le système de filtres en version mobile
13m07s
Leçon 7Adapter le site pour les écrans plus grands grâce aux media queries
15m43s
Leçon 8Ajouter le nom du projet par dessus la photo lors du passage de la souris
10m45s
Leçon 9Le système de filtres pour filtrer les projets par catégorie
11m41s
Leçon 10Création du dark mode pour faciliter lecture du site quand il fait sombre
10m08s
Leçon 11Ajouter une fancybox pour ouvrir les photos ou vidéos par dessus le site
08m02s
Leçon 12Conclusion
01m54s

Avis des apprenants

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

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données