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
Pour ce 5ème volet de ma formation en ligne dédiée au framework CSS Bulma et plus précisément aux éléments.
Nous allons voir entre autre :
- Comment customiser les tableaux,
- Comment gérer les images,
- Comment créer un fil d'ariane,
- Comment personnaliser Bulma.
Au cours de ce tutoriel en vidéo, nous verrons également, de manière pratique, comment mettre en place :
- Un menu à onglets,
- Une fenêtre modale,
- Un menu responsive.
A cela, nous ajouterons du JavaScript moderne afin de pouvoir les faire fonctionner. Je rappelle que Bulma n'a pas vocation à fournir du JavaScript, mais uniquement du CSS. Nous allons donc mobiliser nos connaissances dans ce domaine. Si vous avez besoin d'apprendre le JavaScript moderne, je mets à votre disposition un Bundle complet sur ce sujet.
A la fin du cours, vous pourrez valider vos nouvelles connaissances en passant un QCM.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions dédiés à la gestion d'éléments dans ce framework.
Pour aller plus loin avec Bulma
Voici les liens de mes précédentes formations dédiées à Bulma :
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Les éléments
Les éléments
Chapitre 2
Les composants
Les composants
Chapitre 3
Menu à onglet
Menu à onglet
Chapitre 4
Fenêtre modale
Fenêtre modale
Chapitre 5
Barre de navigation
Barre de navigation
Chapitre 6
Bonus : Personnaliser Bulma
Bonus : Personnaliser Bulma
Chapitre 7
Conclusion
Conclusion
Plan détaillé du cours
Chapitre 1 : Les éléments
41m37
Leçon 1La classe box
Leçon 2La classe button
Leçon 3Ajout d'une icone sur un bouton
Leçon 4Les listes ordonnées
Leçon 5La classe delete
Leçon 6Les icones
Leçon 7Les images
Leçon 8Les tags
Leçon 9Les tableaux
Chapitre 2 : Les composants
17m47
Leçon 1Le fil d'ariane
Leçon 2Les cartes
Leçon 3La classe message
Leçon 4La pagination
Chapitre 3 : Menu à onglet
29m15
Leçon 1Mise en forme des onglets
Leçon 2On ajoute du CSS et du JavaScript moderne
Leçon 3On met en relation les onglets avec les contenus
Leçon 4On active le bon onglet
Chapitre 4 : Fenêtre modale
22m
Leçon 1Présentation
Leçon 2Création de la boîte modale
Leçon 3On affiche la fenêtre modale
Leçon 4On ferme la fenêtre modale
Leçon 5On améliore la fermeture de la fenêtre modale
Chapitre 5 : Barre de navigation
30m16
Leçon 1Faire apparaître un menu burger
Leçon 2Transformer le menu burger en croix
Leçon 3Déclaration de la boîte mère, navbar-brand
Leçon 4Création du menu
Leçon 5Apparition du menu pour les écrans de type touch
Chapitre 6 : Bonus : Personnaliser Bulma
23m31
Leçon 1Présentation
Leçon 2Création du fichier package.json
Leçon 3Installation des dépendances
Leçon 4Création d'un fichier html
Leçon 5Création du fichier css de bulma
Leçon 6Personnalisation des variables de bulma
Chapitre 7 : Conclusion
01m43
Leçon 1Conclusion
Avis des apprenants