8,00

Tuto Créer un carrousel innovant avec Bootstrap avec Bootstrap, CSS

8,00

  • Une formation vidéo de 1h53m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
Créer un carrousel innovant avec Bootstrap

ajouter ce cours aux favoris retirer ce cours des favoris

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)

Table des matières de cette formation Bootstrap, CSS (durée : 1h53m)

  • Création du template
    • Getting started & Template 00:02:10
    • Téléchargement des fichiers sources 00:02:03
    • Découverte du template carousel 00:04:28
    • Intégration des images de notre carousel 00:03:47
    • Intégration de la classe Bootstrap h-100 00:05:57
    • La notion de spacing 00:03:02
    • La notion de sizing 00:02:20
    • Mise en forme de la colonne image du carousel 00:06:24
    • Intégration du carousel-caption 00:05:31
  • Customisation CSS
    • Compiler notre code en CSS 00:09:28
    • Changer le mouvement de rotation du carousel 00:05:00
    • Suppression de la navigation et stylisation des carousel-indicators 00:14:38
    • Création du carousel-caption-block 00:08:02
    • Animation CSS3 avec Animista et intégration de Google Font 00:05:26
    • Finaliser la stylisation de carousel-caption-block 00:11:59
  • Responsive design
    • Responsive design & Media Queries Bootstrap 4 00:23:05



Formateur : Benoît Philibert

Benoît Philibert a publié 23 tutoriels et obtenu une note moyenne de 4,3/5 sur 15 499 tutoriels vendus. Voir les autres formations de Benoît Philibert

5,0
note moyenne

2
avis laissés
5 étoiles
2
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • Avec quelle version de logiciel ce tuto est-il compatible ?
    Bootstrap 4
  • Quel est le niveau requis pour suivre ce tuto ?
    intermédiaire
accédez à plus de 1402 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données