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
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