Recréer le pricing table de Framer avec Bootstrap
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Recréer le pricing table de Framer avec Bootstrap

Benoît Philibert
6,00€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Nous apprendrons ensemble à réaliser un Pricing table tendance en s'inspirant de ce que propose le site Framer. La formation tournera autour de deux axes importants.

  • Le premier point sera de dynamiser l'affichage de nos éléments avec des animations CSS3 à l'aide des @keyframes.
  • Le second, sera d'apprendre à afficher un contenu différent lorsque le switch sera activé par l'utilisateur à l'aide d'un script JavaScript simple.

La démarche de cette formation sera de comprendre comment le composant card de Bootstrap fonctionne et ce qu'on peut faire avec la classe card-deck et l'utilisation (entre autre) de Flexbox.
 

Au programme de ce tuto recréer un pricing table moderne et animé avec Bootstrap

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

  • Flexbox (flex-column, align-items, justify-content, ...)
  • le composant cards (card-deck, card-header, card-body, ...)
  • les classes h-* et vh-*
  • les nouvelles media queries
  • le tout nouveau composant switch
  • 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 HTML
Chapitre 2
Stylisation CSS du template et ajustements
Chapitre 3
JavaScript & Responsive design

Plan détaillé du cours

Chapitre 1 : Création du template HTML
48m04s
 
Leçon 1Analyse du template Framer.com
Leçon 2Télécharhement des fichiers sources
Leçon 3Mise en place des fichiers sources
Leçon 4Compilateur CSS
Leçon 5Mise en place des fondations HTML
Leçon 6Intégration du composant "card-deck"
Leçon 7Intégration des différentes parties de l'élément "card"
Leçon 8Mise en place du composant "switch"
Leçon 9Finalisation du template HTML
Chapitre 2 : Stylisation CSS du template et ajustements
1h12m
 
Leçon 1Stylisation du "block-top"
Leçon 2Mise en forme du composant "card-deck"
Leçon 3Intégration des icônes avec Material Icons
Leçon 4Animation CSS3 avec Animista
Leçon 5Ajustements stylistiques
Chapitre 3 : JavaScript & Responsive design
32m24s
 
Leçon 1Création du script lorsque le "switch" est à l'état ":checked"
Leçon 2Mise en place du responsive design

Aperçus

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

Existe-t-il une présentation complète du framework Bootstrap ?

Non. La présentation globale reste succincte. Cependant, tout les éléments utilisés dans la formation sont détaillés et expliqués.

Payer plus tard

Prix d'achat : 6,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1366 tutos gratuits

Notre politique de protection des données