Découvrir les Variables en CSS avec 2 exemples concrets
Découvrir les Variables en CSS avec 2 exemples concrets
Voici une nouvelle série de tutos vidéo entièrement dédiés à Bulma.
Qu'est-ce que Bulma ?
Bulma est un framework CSS qui permet de faire des mises en pages rapides et efficaces, 100% responsives et de manière beaucoup moins lourde qu'avec Bootstrap. Bulma est en train de prendre beaucoup d'ampleur. Il devient donc intéressant de l'étudier. Surtout pour sa simplicité. Un seul fichier CSS suffit pour faire fonctionner Bulma. A noter que ce framework repose sur Flexbox.
Au programme de ce tuto Bulma dédié aux bases du framework
Dans ce premier volet, nous allons nous familiariser avec le framework.
- Nous allons étudier tout ce qui est formatage d'un document web.
- Nous verrons comment modifier la taille des textes, ainsi que leur couleur.
- Comment les aligner, comment les mettre en gras ou en italique.
- Comment les rendre responsive de façon individuelle.
Nous terminerons ce premier volet par un petit exercice pratique, afin de bien nous familiariser avec nos nouvelles connaissances.
A la fin de ce premier cours Bulma en vidéo, vous connaîtrez toutes les bases nécessaires afin de bien démarrer avec le framework Bulma.
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.
Bonne découverte !
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Présentation
Présentation
Chapitre 2
Manipulation des éléments HTML
Manipulation des éléments HTML
Chapitre 3
Responsive appliqué aux éléments HTML
Responsive appliqué aux éléments HTML
Chapitre 4
Manipulation des éléments de type block
Manipulation des éléments de type block
Chapitre 5
Exercice
Exercice
Chapitre 6
Conclusion
Conclusion
Plan détaillé du cours
Chapitre 1 : Présentation
09m02s
Leçon 1A propos de Bulma
Leçon 2Installation de Bulma
Chapitre 2 : Manipulation des éléments HTML
1h03m
Leçon 1Premières manipulations
Leçon 2La couleur liées aux boutons
Leçon 3La largeur liée aux boutons
Leçon 4Style et état liés aux boutons
Leçon 5Manipulation des heading 1/2
Leçon 6Manipulation des heading 2/2
Leçon 7Manipulation des paragraphes
Leçon 8Modifier la couleur des textes
Leçon 9Modifier l'alignement des textes
Leçon 10Transformation des textes
Leçon 11Transformation de la largeur des lettres
Leçon 12Mettre le texte en italique
Leçon 13Modifier la police
Leçon 14Conclusion
Chapitre 3 : Responsive appliqué aux éléments HTML
15m49s
Leçon 1Présentation
Leçon 2Adaptation des textes en mode responsive
Leçon 3Réunion de la tablette et du mobile
Chapitre 4 : Manipulation des éléments de type block
30m41s
Leçon 1Définir une couleur de fond
Leçon 2Définir des marges
Leçon 3Définir les types de boîtes
Leçon 4Cacher des éléments HTML
Leçon 5Cacher des éléments HTML sous le côté responsive
Chapitre 5 : Exercice
48m23s
Leçon 1Enoncé
Leçon 2Mise en place des titres et sous-titres
Leçon 3Mise en place des classes Bulma
Leçon 4Mise en place des contenus des boîtes Div
Leçon 5Nouveau chapitre sur la classe title
Leçon 6Manipulation des textes 1/3
Leçon 7Manipulation des textes 2/3
Leçon 8Manipulation des textes 3/3
Chapitre 6 : Conclusion
03m15s
Leçon 1Conclusion
Avis des apprenants