Dans ce bundle de près de 12h de formation en vidéo, nous allons apprendre à nous servir du framework Bulma.
Ce framewok CSS permet de construire des sites Internet responsives en se servant des différentes classes que met à notre disposition cette librairie moderne.
Bulma, un concurrent sérieux à Bootstrap ?
Oui et cela grâce à sa simplicité.
Bulma propose exclusivement du CSS formaté. Aucun code jQuery ou bien JavaScript.
Au programme de cette formation Bulma complète en ligne
Dans ce bundle, nous allons apprendre à manipuler tous les éléments HTML de nos pages web afin de les mettre en forme en utilisant des classes CSS mises à notre disposition par le framework Bulma.
Je vous propose d'apprendre :
- Le système de colonnes.
- La gestion des tuiles.
- La mise en forme des formulaires.
- La mise en place d'une barre de navigation.
- Le cours se terminera par un exercice pratique : la création d'un site web complet en nous servant exclusivement de Bulma CSS.
A la fin de ce cours, le framework Bulma n'aura plus aucun secret pour vous. Vous saurez tout ou presque !
Un QCM vous permettra de valider vos connaissances.
Je reste disponible dans le salon d'entraide pour répondre à vos questions sur Bulma.
Bonne formation !
Tuto composant ce bundle :
Formation Bulma #1 - Les bases (voir la fiche produit)
Présentation
- A propos de Bulma gratuit00:03:26
- Installation de Bulma gratuit00:05:36
Manipulation des éléments HTML
- Premières manipulations 00:12:29
- La couleur liées aux boutons 00:05:14
- La largeur liée aux boutons 00:02:39
- Style et état liés aux boutons 00:04:21
- Manipulation des heading 1/2 00:08:40
- Manipulation des heading 2/2 00:06:22
- Manipulation des paragraphes 00:02:50
- Modifier la couleur des textes 00:05:17
- Modifier l'alignement des textes 00:03:19
- Transformation des textes 00:02:35
- Transformation de la largeur des lettres 00:03:42
- Mettre le texte en italique 00:00:54
- Modifier la police 00:02:05
- Conclusion 00:03:31
Responsive appliqué aux éléments HTML
- Présentation 00:04:01
- Adaptation des textes en mode responsive 00:09:17
- Réunion de la tablette et du mobile 00:02:31
Manipulation des éléments de type block
- Définir une couleur de fond 00:08:56
- Définir des marges 00:07:13
- Définir les types de boîtes 00:07:38
- Cacher des éléments HTML 00:02:35
- Cacher des éléments HTML sous le côté responsive 00:04:19
Exercice
- Enoncé gratuit00:02:51
- Mise en place des titres et sous-titres 00:04:21
- Mise en place des classes Bulma 00:10:14
- Mise en place des contenus des boîtes Div 00:08:39
- Nouveau chapitre sur la classe title 00:03:56
- Manipulation des textes 1/3 00:06:37
- Manipulation des textes 2/3 00:07:18
- Manipulation des textes 3/3 00:04:27
Conclusion
- Conclusion 00:03:15
Formation Bulma #2 - Les colonnes (voir la fiche produit)
Mise en page en colonne
- Présentation gratuit00:08:15
- Modifier la taille des colonnes 00:06:27
- Compter le nombre de colonnes 00:04:09
- Décalage de l'affichage d'une colonne 00:06:12
- Donner pour largeur à une colonne ce qu'elle contient 00:03:27
- Résumé de ce que nous avons appris 00:06:05
- Le côté responsive des colonnes 00:05:33
- Le côté responsive d'une colonne 00:06:01
- Retour à la ligne des colonnes 00:03:06
- Créer une gouttière entre les colonnes 1/3 00:03:52
- Créer une gouttière entre les colonnes 2/3 00:03:07
- Créer une gouttière entre les colonnes 3/3 00:05:18
- Créer une gouttière selon les écrans 00:02:04
Exercice Pratique
- Mise en place des bases 00:06:57
- Mise en place des 2 premières zones 00:06:20
- Mise en place de la zone 3 00:08:01
- Mise en place de la zone 4 00:04:14
Conclusion
- Conclusion 00:01:12
Formation Bulma #3, Gestion des contenus (voir la fiche produit)
Les dispositions
- La classe container 00:03:44
- Fixer les marges pour tous les écrans 00:04:12
- Donner des marges pour certaines écrans 00:03:01
- Les niveaux 00:04:06
- Placement des niveaux 00:06:46
- Centrer les niveaux 00:02:20
- Empêcher la direction column des mobiles 00:00:50
- Les médias 00:04:19
- Exemple d'utilisation des médias 00:08:17
- Création d'une classe section 00:01:37
- Créer une classe footer 00:01:21
Les bannières
- La base 00:03:17
- Couleur de fond en dégradé 00:01:21
- Hauteur de la bannière 00:01:38
- Zone head et zone foot 00:02:02
Les tuiles
- Présentation 00:04:51
- Création de nos premières tuiles 00:08:52
- Modifier la largeur des tuiles 00:01:52
- Modifier la direction des tuiles 00:03:26
- Le sens des tuiles 00:01:48
- Application 1 00:07:06
- Application 2 00:10:01
Conclusion
- Conclusion 00:01:03
Formation Bulma #4, Les formulaires (voir la fiche produit)
Les formulaires
- Le champ input 1/2 00:05:41
- Le champ input 2/2 00:04:33
- Label et champ input, mise en page 00:08:50
- Ajout d'icônes 00:09:20
- Le textarea gratuit00:04:59
- Le select 00:05:00
- Ajout d'un icône au select 00:04:08
- La case à cocher 00:02:22
- Le bouton radio 00:01:49
- Le bouton de type file 1/2 00:06:04
- Le bouton de type file 2/2 00:04:45
Exercice
- Présentation du job gratuit00:01:11
- Mise en place du header 00:06:19
- Mise en place du champ NOM 00:07:15
- Mise en place l'icone USER 00:02:07
- Mise en place du champ EMAIL 00:02:23
- Mise en place du textarea et du bouton 00:04:31
Conclusion
- Conclusion 00:01:15
Formation Bulma #5 - Les éléments (voir la fiche produit)
Les éléments
- La classe box 00:03:16
- La classe button 00:05:45
- Ajout d'une icone sur un bouton 00:03:03
- Les listes ordonnées 00:05:20
- La classe delete 00:03:15
- Les icones 00:04:31
- Les images 00:04:53
- Les tags 00:05:48
- Les tableaux 00:05:46
Les composants
- Le fil d'ariane 00:04:24
- Les cartes 00:04:42
- La classe message 00:03:41
- La pagination 00:05:00
Menu à onglet
- Mise en forme des onglets 00:06:54
- On ajoute du CSS et du JavaScript moderne 00:08:15
- On met en relation les onglets avec les contenus 00:08:39
- On active le bon onglet 00:05:27
Fenêtre modale
- Présentation 00:05:23
- Création de la boîte modale 00:02:45
- On affiche la fenêtre modale 00:07:31
- On ferme la fenêtre modale 00:02:01
- On améliore la fermeture de la fenêtre modale 00:04:20
Barre de navigation
- Faire apparaître un menu burger 00:05:44
- Transformer le menu burger en croix 00:04:45
- Déclaration de la boîte mère, navbar-brand 00:09:23
- Création du menu 00:06:53
- Apparition du menu pour les écrans de type touch 00:03:31
Bonus : Personnaliser Bulma
- Présentation 00:04:43
- Création du fichier package.json 00:03:39
- Installation des dépendances 00:04:12
- Création d'un fichier html 00:04:46
- Création du fichier css de bulma 00:02:45
- Personnalisation des variables de bulma 00:03:26
Conclusion
- Conclusion 00:01:43
Formation Bulma #6 - Réalisation d'un site Web (voir la fiche produit)
- Présentation du job gratuit00:03:05
- Mise en place des zones 00:06:27
- Mise en place des bases de la barre de nav 00:07:29
- Mise en place du menu de navigation 00:06:45
- Mise en place du menu burger 00:05:14
- Mise en place du JavaScript moderne 00:07:00
- Mise en place de la section 1 00:05:11
- Mise en place de la boîte notification 00:06:39
- Mise en place de la boîte card 00:11:03
- Finition de la section 1 00:04:47
- Mise en place de la section 2 00:05:21
- Mise en place de la section 3 00:04:45
- Mise en place des boîtes box 00:06:13
- Mise en place du footer 00:02:53
- Mise en place du fichier contact 00:04:09
- Mise en place des sections 00:05:53
- Mise en place du fil d'ariane 00:04:26
- Mise en place des bases du formulaire 00:07:33
- Finition du formulaire 00:06:08
- Conclusion 00:04:53
Formateur : Carl Brison
-
Tutoriel bien expliqué, merci Carl
-
Excellente formation,le formateur explique trés bien.
-
De retour sur un de vos tutos. Très clair et immédiatement concret, comme toujours! (Et, euh, pourquoi "pz-..."? Je me suis dit que "p-..." ferait l'affaire... tout comme m-... ) #3: ça roule. #4: ça roule toujours. J'obtiens un meilleur centrage du bouton de validation en insérant l'input.button -submit dans un paragraphe ou une boîte affublé(e) de la classe buttons. #5: merci pour ce joli jouet! Pour la personnalisation sur macOS, j'ai dû (?) suivre le tuto "With sass-cli" (et ça fonctionne).
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
EST CE QUE LE FRAMEWORK BULMA EST UTILISABLE OU PEUT FACILITER LA MAITRISE DU CODE HTML ET CSS sur WORDPRESS. J'ai appris ces codes il y a de cela plusieurs années mais je n'ai pas pratiqué suffisamment pour être à l'aise. J'aurais besoin d'une remise à niveau digne de ce nom pour pouvoir de nouveau être à l'aise. C'est dans l'optique de son utilisation dans wordpress uniquement. Merci de votre réponse.Bonjour,
L'avantage avec Bulma est qu'il n'y a pas besoin d'écrire du CSS, mais simplement d'appeler des classes dans des tags html.
Cela reste relativement simple (toutes proportions gardées), il suffit tout simplement d'inclure la librairie à n'importe quelle page web, même celles dépendantes à wordpress.
En espérant avoir répondu à votre interrogation .
note moyenne
avis laissés