Bundle : Tout savoir ou presque sur le framework CSS BULMA
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Bundle : Tout savoir ou presque sur le framework CSS BULMA

Carl Brison
Promo -30%
89,00€126,99€
3 paiements de 29,67€ avec Klarna. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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 !
 

Cours dans ce bundle

Formation Bulma #1 - Les bases Cours 1

Formation Bulma #1 - Les bases

Formation Bulma #2 - Les colonnes Cours 2

Formation Bulma #2 - Les colonnes

Formation Bulma #3, Gestion des contenus Cours 3

Formation Bulma #3, Gestion des contenus

Formation Bulma #4, Les formulaires Cours 4

Formation Bulma #4, Les formulaires

Formation Bulma #5 - Les éléments Cours 5

Formation Bulma #5 - Les éléments

Formation Bulma #6 - Réalisation d'un site Web Cours 6

Formation Bulma #6 - Réalisation d'un site Web

Plan détaillé des cours

 
Chapitre 1 : Présentation
09m02
 
Leçon 1A propos de Bulma
Leçon 2Installation de Bulma
Chapitre 2 : Manipulation des éléments HTML
1h03
 
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
15m49
 
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
30m41
 
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
48m23
 
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
03m15
 
Leçon 1Conclusion
 
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
 
Chapitre 1 :  Les dispositions
40m33
 
Leçon 1La classe container
Leçon 2Fixer les marges pour tous les écrans
Leçon 3Donner des marges pour certaines écrans
Leçon 4Les niveaux
Leçon 5Placement des niveaux
Leçon 6Centrer les niveaux
Leçon 7Empêcher la direction column des mobiles
Leçon 8Les médias
Leçon 9Exemple d'utilisation des médias
Leçon 10Création d'une classe section
Leçon 11Créer une classe footer
Chapitre 2 : Les bannières
08m18
 
Leçon 1La base
Leçon 2Couleur de fond en dégradé
Leçon 3Hauteur de la bannière
Leçon 4Zone head et zone foot
Chapitre 3 : Les tuiles
37m56
 
Leçon 1Présentation
Leçon 2Création de nos premières tuiles
Leçon 3Modifier la largeur des tuiles
Leçon 4Modifier la direction des tuiles
Leçon 5Le sens des tuiles
Leçon 6Application 1
Leçon 7Application 2
Chapitre 4 : Conclusion
01m03
 
Leçon 1Conclusion
 
Chapitre 1 : Les formulaires
57m31
 
Leçon 1Le champ input 1/2
Leçon 2Le champ input 2/2
Leçon 3Label et champ input, mise en page
Leçon 4Ajout d'icônes
Leçon 5Le textarea
Leçon 6Le select
Leçon 7Ajout d'un icône au select
Leçon 8La case à cocher
Leçon 9Le bouton radio
Leçon 10Le bouton de type file 1/2
Leçon 11Le bouton de type file 2/2
Chapitre 2 : Exercice
23m46
 
Leçon 1Présentation du job
Leçon 2Mise en place du header
Leçon 3Mise en place du champ NOM
Leçon 4Mise en place l'icone USER
Leçon 5Mise en place du champ EMAIL
Leçon 6Mise en place du textarea et du bouton
Chapitre 3 : Conclusion
01m15
 
Leçon 1Conclusion
 
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
 
Leçon 1Présentation du job
03m05
Leçon 2Mise en place des zones
06m27
Leçon 3Mise en place des bases de la barre de nav
07m29
Leçon 4Mise en place du menu de navigation
06m45
Leçon 5Mise en place du menu burger
05m14
Leçon 6Mise en place du JavaScript moderne
07m
Leçon 7Mise en place de la section 1
05m11
Leçon 8Mise en place de la boîte notification
06m39
Leçon 9Mise en place de la boîte card
11m03
Leçon 10Finition de la section 1
04m47
Leçon 11Mise en place de la section 2
05m21
Leçon 12Mise en place de la section 3
04m45
Leçon 13Mise en place des boîtes box
06m13
Leçon 14Mise en place du footer
02m53
Leçon 15Mise en place du fichier contact
04m09
Leçon 16Mise en place des sections
05m53
Leçon 17Mise en place du fil d'ariane
04m26
Leçon 18Mise en place des bases du formulaire
07m33
Leçon 19Finition du formulaire
06m08
Leçon 20Conclusion
04m53

Avis des apprenants

Détail des avis
55
Apprenants
4
Commentaires
5/5
Note moyenne
5/5
4
4/5
0
3/5
0
2/5
0
1/5
0
Cyrille Monstard
Cyrille Monstard
Publié le 20/03/2023
Tutoriel bien expliqué, merci Carl
Carl Brison
Carl Brison
Merci beaucoup ;-)))
Sebastien Fluchon
Sebastien Fluchon
Publié le 26/12/2022
Excellente formation,le formateur explique trés bien.
Carl Brison
Carl Brison
Merci beaucoup, c'est très gentil ;-)
Bernard Chabloz
Bernard Chabloz
Publié le 06/04/2021
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).
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil

Vos questions sur le cours

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 .

Payer plus tard ou en 3x

Prix d'achat : 89,00 €
Pour payer plus tard ou en plusieurs versements échelonnés, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez plus tard ou en plusieurs fois

3 paiements de 29,67 €
tous les mois, sans intérêts
Total : 89,00 €
Afficher les conditions : Klarna
Klarna : conditions d'utilisation du paiement différé en 3 échéances.

Attendez ! 🤗

Accédez à plus de 1429 tutos gratuits

Notre politique de protection des données