Intégration d'un Portfolio responsive en Mobile First
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
2h05
de formation
12
leçons vidéo
1
chapitre
Intermédiaire
niveau requis
Adrien Gazaix
Adrien Gazaix
Formateur certifié

Intégration d'un Portfolio responsive en Mobile First

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

Dans cette formation HTML & CSS en vidéo, je vous propose de découvrir ensemble comment intégrer une maquette de Portfolio (dans notre exemple, cette maquette a été créée sur Figma) en utilisant la technique du Mobile first.

Le Mobile First qu'est-ce que c'est ?

C'est tout simplement le fait de commencer notre intégration responsive de la maquette en partant de la version mobile et de l'adapter petit à petit pour les écrans plus grands (tablette & bureau) grâce aux media queries.

Les maquettes graphiques que nous allons intégrer sont fournies avec la formation.
Si vous souhaitez apprendre à designer le portfolio sur le logiciel Figma, je vous invite à suivre les 2 premiers épisodes :

Aucun Framework tel que Bootstrap ne sera utilisé.
Nous utiliserons seulement les langages HTML & CSS ainsi que des techniques modernes d'intégration telles que les Flexbox et les Grid pour créer ce portfolio.
La librairie JQuery nous sera utile pour créer le système de filtres et pour le switch du dark mode.
Les fichiers sources sont inclus avec le tuto.
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 vidéo.

Bon tuto !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Intro, Google Fonts, Librairie icônes
Leçon 2
Création du CSS de base : titres, variables, container...
Leçon 3
Mettre en place la structure HTML de base
Leçon 4
Intégrer le header en version mobile
Leçon 5
Intégrer le contenu d'intro ainsi que le footer en version mobile
Leçon 6
Intégrer la partie portfolio avec le système de filtres en version mobile
Leçon 7
Adapter le site pour les écrans plus grands grâce aux media queries

Table des matières

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

Aperçus

Avis des apprenants

Détail des avis
2
Commentaires
5/5
Note moyenne
5/5
2
4/5
0
3/5
0
2/5
0
1/5
0
Frédéric Chretien
Frédéric Chretien
Publié le 12/05/2022
Toujours aussi clair et précis, j'aime beaucoup le résultat, j'espère pouvoir m'en inspirer pour mon portfolio, encore merci pour tous ces tutos et à bientôt !
Adrien Gazaix
Adrien Gazaix
Encore merci à toi de suivre mes tuto ça fait plaisir :) Inspire toi c'est fait pour ça ! En avant pour la création de ton propre portfolio. A très bientôt pour de nouveaux tuto !
Pierre-Franck Sentenac
Pierre-Franck Sentenac
Publié le 11/05/2022
Super tuto sur l'intégration du portfolio :)
Adrien Gazaix
Adrien Gazaix
Super merci a toi 😁 a bientôt sur de nouveaux tuto !

Vos questions sur le cours

Que contient le fichier source ?

La maquette Figma, les fichiers de départ et l'intégration complète obtenue à la fin de la formation.

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
17,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
2h05 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 754 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 1421 tutos gratuits

Notre politique de protection des données