Créer un carrousel innovant avec Bootstrap
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Créer un carrousel innovant avec Bootstrap

Benoît Philibert
8,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tutoriel en vidéo vous apprendrez a créer un carrousel innovant en adaptant son apparence avec la toute dernière version de Bootstrap 4 sans toucher une seule ligne du script JavaScript du composant.

La démarche de cette formation sera de comprendre comment le composant carrousel fonctionne et ce qu'on peut faire avec, sans aucune connaissance en JavaScript.
 

Au programme de ce tuto carrousel Bootstrap

Nous aborderons plusieurs points importants listés ci-dessous :

  • Flexbox (flex-column, align-items, justify-content, ...)
  • les classes h-* et w-* ou encore les spacing
  • les nouvelles media queries
  • la notion de theming dans Bootstrap 4
  • les animations CSS3 avec keyframes
  • l'adaptation responsive du rendu sur mobile et tablette
  • un QCM de fin pour valider vos nouvelles connaissances !

Ce tutoriel vidéo s'adresse à des personnes d'un niveau intermédiaire en HTML/CSS qui connaissent un minimum le framework Bootstrap. Cependant, il reste accessible à des débutants volontaires. Nous découvrirons plusieurs aspects du framework ensemble, cependant, il est bon de connaitre quelques notions ou de parcourir la documentation avant de vous lancer. 

Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.
 

Ce tutoriel n'est pas :

  • Une formation complète à Bootstrap 4
  • Ne contient pas de suite (rendu dynamique, etc...)
  • N'apprend pas a compiler votre SCSS en CSS manuellement (on utilise un compilateur gratuit)
  • Fait pour des débutant en HTML/CSS/SASS (même si les plus motivés y arriveront)

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Création du template
Chapitre 2
Customisation CSS
Chapitre 3
Responsive design

Plan détaillé du cours

Chapitre 1 : Création du template
35m42s
 
Leçon 1Getting started & Template
Leçon 2Téléchargement des fichiers sources
Leçon 3Découverte du template carousel
Leçon 4Intégration des images de notre carousel
Leçon 5Intégration de la classe Bootstrap h-100
Leçon 6La notion de spacing
Leçon 7La notion de sizing
Leçon 8Mise en forme de la colonne image du carousel
Leçon 9Intégration du carousel-caption
Chapitre 2 : Customisation CSS
54m33s
 
Leçon 1Compiler notre code en CSS
Leçon 2Changer le mouvement de rotation du carousel
Leçon 3Suppression de la navigation et stylisation des carousel-indicators
Leçon 4Création du carousel-caption-block
Leçon 5Animation CSS3 avec Animista et intégration de Google Font
Leçon 6Finaliser la stylisation de carousel-caption-block
Chapitre 3 : Responsive design
23m05s
 
Leçon 1Responsive design & Media Queries Bootstrap 4

Aperçus

Avis des apprenants

Détail des avis
276
Apprenants
2
Commentaires
5/5
Note moyenne
5/5
2
4/5
0
3/5
0
2/5
0
1/5
0
André Theron
André Theron
Publié le 31/03/2020
excellent tuto très bien expliqué qui m'a permis de comprendre beaucoup de choses sur bootstrap.
Benoît Philibert
Merci c'est sympa
Membre-7560-3610
Membre-7560-3610
Publié le 31/03/2020
i'm very happy......
Benoît Philibert
thanks ;)

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

Bootstrap 4

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Attendez ! 🤗

Accédez à plus de 1337 tutos gratuits

Notre politique de protection des données