Formation Bulma #1 - Les bases
Formation Bulma #1 - Les bases
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 #2 - Les colonnes
Formation Bulma #2 - Les colonnes
Formation Bulma #3, Gestion des contenus
Formation Bulma #3, Gestion des contenus
Formation Bulma #4, Les formulaires
Formation Bulma #4, Les formulaires
Formation Bulma #5 - Les éléments
Formation Bulma #5 - Les éléments
Formation Bulma #6 - Réalisation d'un site Web
Formation Bulma #6 - Réalisation d'un site Web
Plan détaillé des 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
Chapitre 1 : Mise en page en colonne
1h03m
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
25m32s
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
01m12s
Leçon 1Conclusion
Chapitre 1 : Les dispositions
40m33s
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
08m18s
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
37m56s
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
01m03s
Leçon 1Conclusion
Chapitre 1 : Les formulaires
57m31s
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
23m46s
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
01m15s
Leçon 1Conclusion
Chapitre 1 : Les éléments
41m37s
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
17m47s
Leçon 1Le fil d'ariane
Leçon 2Les cartes
Leçon 3La classe message
Leçon 4La pagination
Chapitre 3 : Menu à onglet
29m15s
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
30m16s
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
23m31s
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
01m43s
Leçon 1Conclusion
Leçon 1Présentation du job
03m05s
Leçon 2Mise en place des zones
06m27s
Leçon 3Mise en place des bases de la barre de nav
07m29s
Leçon 4Mise en place du menu de navigation
06m45s
Leçon 5Mise en place du menu burger
05m14s
Leçon 6Mise en place du JavaScript moderne
07m
Leçon 7Mise en place de la section 1
05m11s
Leçon 8Mise en place de la boîte notification
06m39s
Leçon 9Mise en place de la boîte card
11m03s
Leçon 10Finition de la section 1
04m47s
Leçon 11Mise en place de la section 2
05m21s
Leçon 12Mise en place de la section 3
04m45s
Leçon 13Mise en place des boîtes box
06m13s
Leçon 14Mise en place du footer
02m53s
Leçon 15Mise en place du fichier contact
04m09s
Leçon 16Mise en place des sections
05m53s
Leçon 17Mise en place du fil d'ariane
04m26s
Leçon 18Mise en place des bases du formulaire
07m33s
Leçon 19Finition du formulaire
06m08s
Leçon 20Conclusion
04m53s
Avis des apprenants