Voici le 2ème volet dédié au framework CSS : Bulma.
Dans ce tuto en vidéo, nous allons nous concentrer sur la mise en colonnes des différents contenus.
- Nous verrons ensemble les colonnes virtuelles créées par Bulma lors de la déclaration d'un conteneur.
- C'est à partir de ces colonnes, que nous allons pouvoir déclarer des colonnes physiques et les positionner au sein des colonnes virtuelles.
Ce cours Bulma est très important, car c'est le coeur de son fonctionnement responsif (design fluide).
Une fois la théorie acquise, vous pourrez pratiquer grâce à un exercice concret !
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Tous les fichiers de travail sont fournis !
Des connaissances dans la technologie des flexbox et un très grand plus, afin de mieux prendre en main de framework Bulma.
Table des matières de cette formation CSS (durée : 1h30m)
-
Mise en page en colonne
- Présentation gratuit 00: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
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
De plus en plus simple pour monter un site web qui tienne la route... et comme toujours, pas à pas avec des explications claires ! Merci Carl, vous méritez largement cette belle audience actuelle. CactusXXL
-
Que dire, c'est dur de vouloir se renouveler dans l'exercice d'encenser cet excellent formateur qu'est Carl Brison. Parfait, clair, comme d'habitude ;o) Patrick
-
Encore un grand merci Carl
-
Avec quelle version de logiciel ce tuto est-il compatible ?Bulma
-
Que contient le fichier source ?Le code source de l'exercice.
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés