Tailwind CSS #3/5. Créer des mises en page responsives avec Grid
Tailwind CSS #3/5. Créer des mises en page responsives avec Grid
Pour ce nouveau tuto vidéo dédié au framework Bulma, nous allons nous attarder sur la mise en forme des différents éléments qui constituent un formulaire HTML !
Au programme de ce tuto Bulma : les formulaires
Nous allons apprendre quelles sont les classes à utiliser pour mettre en forme :
- Les champs input,
- Les textarea,
- Les cases à cocher,
- Les boutons radio,
- Les menus déroulants.
Nous verrons également comment Bulma permet de mettre en forme les champs input de type file, ceux permettant d'uploader des fichiers.
Nous importerons la librairie fontawesome afin de placer des icônes au sein des champs de formulaire.
Après la théorie, la pratique. Pour conclure cette formation en ligne, je vous propose un petit exercice pratique .
Celui de créer un formulaire de contact en utilisant nos connaissances acquises jusqu'à maintenant !
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Pour aller plus loin avec Bulma
Pour accéder aux versions précédentes des autres cours dédiés à Bulma :
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Les formulaires
Les formulaires
Chapitre 2
Exercice
Exercice
Chapitre 3
Conclusion
Conclusion
Plan détaillé du cours
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
Avis des apprenants