Créez des designs simples et élégants avec Bootstrap 5

Maîtrisez Bootstrap 5 en créant de véritables projets professionnels et modernes !

Créez des designs simples et élégants avec Bootstrap 5
7 heures
Tous les niveaux

Présentation

Bienvenue sur le cours sur BOOSTRAP 5, le seul cours dont vous avez besoin pour apprendre à utiliser BOOTSTRAP, même en partant de zéro.

Avec plus de 7 heures, ce cours est sans doute celui qui trouve le meilleur compromis entre une formation ultra complète et une formation concise. Même si vous n'avez aucune expérience en programmation avec BOOTSTRAP, vous passerez du niveau débutant à celui de professionnel grâce à ce cours. Voici pourquoi :

  • Ce cours est enseigné par le formateur emblématique de BELIEVEMY, l'un des meilleurs acteurs de la pédagogie dans le domaine du développement web

  • Ce cours a été entièrement mis à jour pour la toute dernière version de BOOTSRAP, vous apprendrez les toutes dernières nouveautés et les meilleures astuces de programmation du moment

  • Ce cours n'est pas un cours magistral : vous allez passer par toutes les émotions et vous allez pratiquer dans des dizaines de cas concrets, avec notamment trois vrais projets

  • L'ensemble du contenu du cours a été vu et revu pendant un an par plusieurs développeurs professionnels de BOOTSTRAP pour être parfaitement en adéquation avec les besoins professionnels des entreprises

  • Plus de 25.000 étudiants ont déjà appris le développement web grâce à nos cours

  • Ce cours est constamment mis à jour avec de nouveaux contenus et de nouveaux projets proposés par les étudiants : c'est-à-dire par vous !

Nous allons y aller pas à pas, nous avancerons méthodiquement et astucieusement pour que vous puissiez toujours comprendre ce que vous faites et pour que vous puissiez apprécier vos résultats.

Prérequis

Des bases en HTML et en CSS sont nécessaires pour profiter de ce cours à 100%.

Plan du cours

Tout ouvrir
    Partie 1 : Introduction
  • 1. Bienvenue dans ce cours
    Extrait
  • 2. À quoi sert Bootstrap ?
    Extrait
  • 3. Bootstrap 4 VS Bootstrap 5
    Extrait
  • 4. Prérequis
    Extrait
  • Partie 2 : Lançons-nous dans Bootstrap 5
  • 5. Comment utiliser Bootstrap ?
  • 6. Utiliser la superbe option "live server"
  • 7. Utiliser Bootstrap sur CodePen
  • 8. Le fonctionnement de Bootstrap
    Extrait
  • 9. Ajouter des couleurs
  • 10. Changer la couleur du fond
  • 11. Changer la largeur d'un élément
  • 12. Gérer les marges (margin / padding)
  • 13. Récapitulatif de la section
  • Partie 3 : Continuons sur notre lancée
  • 14. Aligner des textes
  • 15. Transformer des textes
  • 16. Gérer les bordures de décoration
  • 17. La mise en forme (gras / etc)
  • 18. Les polices disponibles avec Bootstrap
  • 19. Ajouter des ombres
  • 20. Gérer les bordures
  • 21. Et si on mettait des bordures arrondies ?
  • 22. Gérer les flottants et les positions fixes
  • 23. The Magic One : rendre les iframes responsives
  • 24. Permettre la sélection ou non
  • 25. Récapitulatif de la section
  • Partie 4 : Tout sur les tableaux
  • 26. Initialiser un tableau avec Bootstrap
  • 27. Mettre en couleur notre tableau
  • 28. Dissocier chaque ligne d'un tableau
  • 29. Ajouter des bordures à un tableau
  • 30. Faire de "petits" tableaux
  • 31. Aligner verticalement les cellules
  • 32. Rendre notre tableau responsive
  • 33. Ajouter un texte descriptif
  • 34. Récapitulatif de la section
  • Partie 5 : Projet - Un clone de Tinder
  • 35. Voici ce que nous allons faire dans ce projet
    Extrait
  • 36. Téléchargez les fichiers de base
  • 37. Qu'est-ce que la classe container ?
  • 38. Etape 1 : l'entête
  • 39. Etape 2 : la première section
  • 40. Etape 3 : la deuxième section
  • 41. Etape 4 : le pied de page
  • 42. Conclusion
  • Partie 6 : Découvrons les composants CSS
  • 43. Qu'est-ce qu'un composant CSS ?
  • 44. Les boutons
  • 45. Les messages de notification
  • 46. Les barres de navigation
  • 47. Les badges
  • 48. Les champs de formulaire
  • 49. Regrouper ses champs de formulaire
  • 50. Les cartes d'affichage
  • 51. Les barres de progression
  • 52. Les fils d'ariane
  • 53. Récapitulatif de la section
  • Partie 7 : Projet - Le site de Tesla !
  • 54. Voici ce que nous allons faire dans ce projet
    Extrait
  • 55. Téléchargez les fichiers de base
  • 56. Etape 1 : l'entête
  • 57. Etape 2 : le bandeau
  • 58. Etape 3 : la première section
  • 59. Etape 4 : la deuxième section
  • 60. Etape 5 : la troisième section
  • 61. Etape 6 : le pied de page
  • 62. Correction
  • Partie 8 : Utilisons le potentiel des grilles avec Bootstrap
  • 63. Qu'est-ce qu'une grille CSS ?
  • 64. La grille CSS intégrée à Bootstrap
  • 65. Prioriser nos éléments
  • 66. Décaler d'un certains nombre de colonnes
  • 67. Espacer nos éléments
  • 68. Aligner verticalement nos éléments
  • 69. Récapitulatif de la section
  • Partie 9 : Entraînons-nous sur les grilles
  • 70. Exercice 1 : Corrigeons notre projet Tesla
  • 71. Exercice 1 : Correction
  • Partie 10 : Les composants d'animation
  • 72. Qu'est-ce qu'un composant d'animation ?
  • 73. Avant de commencer : inclure la librairie JavaScript de Bootstrap
  • 74. Les barres de navigation responsives
  • 75. Les carrousels
  • 76. Les listes déroulantes
  • 77. Les fenêtres modales
  • 78. Les infobulles
  • 79. Les "Scrollspy"
  • 80. Les spinners
  • 81. Récapitulatif de la section
  • Partie 11 : Projet - Le site d'Harry Potter
  • 82. Voici ce que nous allons faire dans ce projet
    Extrait
  • 83. Téléchargez les fichiers de base
  • 84. Etape 1 : l'entête
  • 85. Etape 2 : la barre de navigation
  • 86. Etape 3 : le bandeau
  • 87. Etape 4 : les meilleures ventes
  • 88. Etape 5 : le pied de page
  • 89. Correction
  • Partie 12 : Et si on souhaite utiliser Flexbox ?
  • 90. Utiliser Flexbox avec Bootstrap
  • 91. Aligner nos éléments
  • 92. Donner des proportions identiques
  • 93. Wrapper les éléments et désigner leur ordre
  • 94. Récapitulatif de la section
  • Partie 13 : SASS et Bootstrap
  • 95. Pourquoi utiliser SASS avec Bootstrap ?
    Extrait
  • 96. Installons notre environnement
  • 97. Modifier les couleurs par défaut et créer un thème
  • 98. Ajouter des puissances aux marges
  • 99. Ajouter de nouveaux breakpoints
  • 100. Trouver la variable désirée
  • Partie 14 : Conclusion
  • 101. Bravo ! Vous avez terminé ce cours
Proposé par Believemy

Gratuit

Disponible depuis partout : ordinateur, smartphone, tablette
Contenus vidéos en Full HD
Certificat de fin de formation