CSS, améliorer facilement le visuel des liens d'une barre de nav
CSS, améliorer facilement le visuel des liens d'une barre de nav
Voici le 2ème volet dédié au framework CSS : Bulma.
Dans ce tuto en vidéo, nous allons nous concentrer sur la mise en colonnes des différents contenus.
- Nous verrons ensemble les colonnes virtuelles créées par Bulma lors de la déclaration d'un conteneur.
- C'est à partir de ces colonnes, que nous allons pouvoir déclarer des colonnes physiques et les positionner au sein des colonnes virtuelles.
Ce cours Bulma est très important, car c'est le coeur de son fonctionnement responsif (design fluide).
Une fois la théorie acquise, vous pourrez pratiquer grâce à un exercice concret !
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Tous les fichiers de travail sont fournis !
Des connaissances dans la technologie des flexbox et un très grand plus, afin de mieux prendre en main de framework Bulma.
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Mise en page en colonne
Mise en page en colonne
Chapitre 2
Exercice Pratique
Exercice Pratique
Chapitre 3
Conclusion
Conclusion
Plan détaillé du cours
Chapitre 1 : Mise en page en colonne
1h03
Leçon 1Présentation
Leçon 2Modifier la taille des colonnes
Leçon 3Compter le nombre de colonnes
Leçon 4Décalage de l'affichage d'une colonne
Leçon 5Donner pour largeur à une colonne ce qu'elle contient
Leçon 6Résumé de ce que nous avons appris
Leçon 7Le côté responsive des colonnes
Leçon 8Le côté responsive d'une colonne
Leçon 9Retour à la ligne des colonnes
Leçon 10Créer une gouttière entre les colonnes 1/3
Leçon 11Créer une gouttière entre les colonnes 2/3
Leçon 12Créer une gouttière entre les colonnes 3/3
Leçon 13Créer une gouttière selon les écrans
Chapitre 2 : Exercice Pratique
25m32
Leçon 1Mise en place des bases
Leçon 2Mise en place des 2 premières zones
Leçon 3Mise en place de la zone 3
Leçon 4Mise en place de la zone 4
Chapitre 3 : Conclusion
01m12
Leçon 1Conclusion
Avis des apprenants