Tailwind CSS #3/5. Créer des mises en page responsives avec Grid
Tailwind CSS #3/5. Créer des mises en page responsives avec Grid
Dans ce tuto CSS & jQuery nous allons voir ensemble comment créer un menu responsive (menu burger), afin de le rendre compatible avec la version mobile de votre site. Pour cela, nous utiliserons la technique du mobile first qui consiste à créer en premier, le menu pour le mobile et de l'adapter petit à petit pour les écrans plus grands.
A la fin de ce tuto nous verrons une petite astuce pour que la transition du menu mobile/bureau, lors du redimensionnement du navigateur, soit parfaite.
Aucun framework (comme Bootstrap par exemple) ne sera utilisé dans ce tuto, nous ferons tout à la main, pas à pas, pour que vous puissiez rapidement le mettre en place vos prochains sites mobile.
Les fichiers de départ & ceux du tuto terminé sont fournis pour que vous puissiez suivre la vidéo plus facilement.
Je vous invite à regarder l'extrait vidéo pour rendre compte du résultat final.
Bon visionnage !
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Leçon 1
Introduction
Introduction
Leçon 2
Rendre le container du site responsive
Rendre le container du site responsive
Leçon 3
Créer & styliser le menu responsive
Créer & styliser le menu responsive
Leçon 4
Bouton pour ouvrir le menu, icônes vectorielles & adaptation du menu pour les écrans larges
Bouton pour ouvrir le menu, icônes vectorielles & adaptation du menu pour les écrans larges
Leçon 5
Partie javascript pour créer des actions sur le bouton ainsi que des animations
Partie javascript pour créer des actions sur le bouton ainsi que des animations
Plan détaillé du cours
Leçon 1Introduction
02m40
Leçon 2Rendre le container du site responsive
05m20
Leçon 3Créer & styliser le menu responsive
12m
Leçon 4Bouton pour ouvrir le menu, icônes vectorielles & adaptation du menu pour les écrans larges
17m23
Leçon 5Partie javascript pour créer des actions sur le bouton ainsi que des animations
12m32
Aperçus
Avis des apprenants