Dans cette formation en vidéo, vous allez apprendre à utiliser le Framework Bulma.
Le Framwework CSS Bulma permet de créer des sites et des applications responsives, et de gérer le design général, les couleurs, la taille,
les alignements, à l'aide d'un système de classes et d'une grille composée de 12 colonnes.
Ce Framework est une alternative et un concurrent sérieux à Bootstrap, le plus connu des Frameworks CSS.
Il n'est composé que de fichiers CSS ; pas de fichier JavaScript dans ce Framework. Il y a donc moins de risques de bugs et un poids total plus léger que d'autres Frameworks. C'est également un Framework qui permet de personnaliser les classes qu'il propose, à l'aide de variables SASS, (une section de ce cours en ligne est d'ailleurs dédiée à ce sujet).
Au programme de ce tuto Bulma
En suivant cette formation, vous allez avoir accès à une succession de tutoriels en vidéo qui vous expliqueront le fonctionnement de Bulma.
Vous allez pouvoir la télécharger pour suivre et coder en même temps que vous regardez les vidéos, pour une meilleure compréhension.
Enfin, nous finirons cette formation par deux projets pratiques, et vous aurez accès aux codes sources de ces projets.
Un petit QCM de fin vous permettra de valider vos nouvelles compétences sur Bulma.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.
Alors n'hésitez plus et suivez ce cours dès à présent !
Table des matières de cette formation CSS (durée : 3h10m)
-
Introduction
- Introduction gratuit 00:02:04
- Éditeur de texte gratuit 00:02:18
- Fonctionnement du bac à sable. gratuit 00:01:00
-
Les Modificateurs
- Typographie partie 1 00:07:20
- Typographie partie 2 00:10:07
- Les couleurs 00:03:57
- Aides 00:04:24
- Display Responsive 00:03:39
-
La Grille, le système de colonnes
- Base et taille 00:07:53
- Responsive 00:03:08
- Écart 00:03:19
- Alignement 00:01:33
-
La Disposition
- Conteneur et Niveaux 00:06:21
- Media et Hero 00:03:33
- Section et Footer 00:01:13
- Fil 00:04:02
-
Les Formulaires
- Inputs et Textarea 00:04:03
- Select et Checkbox 00:02:39
- Radio et fichier 00:03:05
-
Les Élements
- Box et bouton 00:03:25
- Contenu et icônes 00:06:19
- Image, notif et tag 00:03:35
- Progressbar et Tableau 00:02:33
-
Composants
- Fil d'Ariane et Carte 00:04:31
- Bouton déroulant et Menu 00:06:18
- Message et modale 00:04:37
- Navigation et pagination 00:09:19
- Onglets 00:03:13
-
Personnaliser les classes
- Personnaliser partie 1 00:08:58
- Personnaliser partie 2 00:04:32
-
Projet 1 : Site Immo
- Mise en place 00:03:24
- Barre de navigation 00:05:18
- Titre et input 00:07:34
- Résultat et fin 00:05:55
-
Projet 2 : Portfolio
- Mise en place 00:04:27
- Barre de navigation 00:04:39
- Page d'accueil 00:04:21
- Section à propos 00:03:11
- Réalisations 00:08:36
- Formulaire 00:07:04
- Footer et fin 00:03:28
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Enzo Ustariz
-
Génial ! Explications très ditactiques avec plein d'astuces sur Bulma qui est un produit que je trouve excellent. J'avais déjà essayé SASS sur le quel Bulma s'appuie complètement pour le plus grand bonheur du développeur. Adieu CSS pure et autre Bootstrap que j'ai toujours eu du mal à maitriser. Je travaille beaucoup avec python et Django auquel j'intègre Bulma et après installation et paramètrages cela devient un vrai plaisir de faire du responsive maitrisé Merci encore à Enzo dont je ne rate aucune formation ! Question: à mon avis il ne manque plus qu'une étape un générateur qui extraierait seulement le code de Bulma utilisé pour en faire un css minimisé
-
Les explications sont claires, dommage qu'il manque les finalisations qui auraient été intéressantes pour le débutant que je suis, genre faire le vrai bouton d 'envoi du formulaire.
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés