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

TUTO Intégration d'un Portfolio responsive en Mobile First

Adrien Gazaix
17,99€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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

Plan détaillé du cours

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

Aperçus

Avis des apprenants

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

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

HTML 5, CSS 3

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

Payer plus tard

Prix d'achat : 17,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