28,00

Tuto Formation Bulma #5 - Les éléments avec CSS

28,00

  • Une formation vidéo de 2h46m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Formation Bulma #5 - Les éléments

ajouter ce cours aux favoris retirer ce cours des favoris

Retrouvez cette formation dans le bundle :

Bundle : Tout savoir ou presque sur le framework CSS BULMA

-30% de réduction

voir les détails du bundle


Pour ce 5ème volet de ma formation en ligne dédiée au framework CSS Bulma et plus précisément aux éléments.
Nous allons voir entre autre :

  • Comment customiser les tableaux,
  • Comment gérer les images,
  • Comment créer un fil d'ariane,
  • Comment personnaliser Bulma.

Au cours de ce tutoriel en vidéo, nous verrons également, de manière pratique, comment mettre en place :

  • Un menu à onglets,
  • Une fenêtre modale,
  • Un menu responsive.

A cela, nous ajouterons du JavaScript moderne afin de pouvoir les faire fonctionner. Je rappelle que Bulma n'a pas vocation à fournir du JavaScript, mais uniquement du CSS. Nous allons donc mobiliser nos connaissances dans ce domaine. Si vous avez besoin d'apprendre le JavaScript moderne, je mets à votre disposition un Bundle complet sur ce sujet. 

A la fin du cours, vous pourrez valider vos nouvelles connaissances en passant un QCM.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions dédiés à la gestion d'éléments dans ce framework.

Pour aller plus loin avec Bulma

Voici les liens de mes précédentes formations dédiées à Bulma :

Table des matières de cette formation CSS (durée : 2h46m)

  • 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



Formateur : Carl Brison

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

5,0
note moyenne

1
avis laissé
5 étoiles
1
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de aleksander2008 laissé le 28/12/2020
    Merci beaucoup pour cette série de cours, vraiment interessante et prenante. Il me tarde de mettre en oeuvre, pour essayer en réel. Toujours aussi profesionnel Mr Brison
    "Merci beaucoup pour votre commentaire très gentil !"

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    Bulma
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
  • Que contient le fichier source ?
    Les sources du tuto.
Parcours Developpeur Front End
accédez à plus de 1294 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données