18,00

Tuto Intégration d'un Portfolio responsive en Mobile First avec HTML, CSS, jQuery

18,00

  • Une formation vidéo de 2h05m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Intégration d'un Portfolio responsive en Mobile First

ajouter ce cours aux favoris retirer ce cours des favoris

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 !

Table des matières de cette formation HTML, CSS, jQuery (durée : 2h05m)

    • Intro, Google Fonts, Librairie icônes gratuit 00:08:05
    • Création du CSS de base : titres, variables, container... 00:15:15
    • Mettre en place la structure HTML de base 00:16:18
    • Intégrer le header en version mobile 00:10:01
    • Intégrer le contenu d'intro ainsi que le footer en version mobile 00:04:39
    • Intégrer la partie portfolio avec le système de filtres en version mobile 00:13:07
    • Adapter le site pour les écrans plus grands grâce aux media queries 00:15:43
    • Ajouter le nom du projet par dessus la photo lors du passage de la souris 00:10:45
    • Le système de filtres pour filtrer les projets par catégorie 00:11:41
    • Création du dark mode pour faciliter lecture du site quand il fait sombre 00:10:08
    • Ajouter une fancybox pour ouvrir les photos ou vidéos par dessus le site 00:08:02
    • Conclusion 00:01:54



Formateur : Adrien Gazaix

Adrien Gazaix a publié 191 tutoriels et obtenu une note moyenne de 4,8/5 sur 56 819 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

2
avis laissés
5 étoiles
2
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de pixelfrey laissé 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 !
    "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 !"

  • 5
    avis de pierrefranck laissé le 11/05/2022
    Super tuto sur l'intégration du portfolio :)
    "Super merci a toi 😁 a bientôt sur de nouveaux tuto !"

  • 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
Parcours Developpeur Front End
accédez à plus de 1440 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données