89,00 au lieu de 127,00

Tuto Bundle : Tout savoir ou presque sur le framework CSS BULMA avec CSS bundle -30%

89,00 au lieu de 127,00

  • Une formation vidéo de 11h53m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
Bundle : Tout savoir ou presque sur le framework CSS BULMA

ajouter ce cours aux favoris retirer ce cours des favoris

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

Carl Brison a publié 306 tutoriels et obtenu une note moyenne de 4,9/5 sur 18 551 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

4
avis laissés
5 étoiles
4
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de ameb2908 laissé le 20/03/2023
    Tutoriel bien expliqué, merci Carl

  • 5
    avis de membre-7379-9153 laissé le 26/12/2022
    Excellente formation,le formateur explique trés bien.
    "Merci beaucoup, c'est très gentil ;-)"

  • 5
    avis de zolb laissé 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).
    "Merci beaucoup pour votre commentaire très gentil "

  • 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 .
Parcours Developpeur Front End
accédez à plus de 1422 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données