Article original : Learn Bootstrap 4 in this free 10-part course
Par Per Harald Borgen
_Cliquez ici pour accéder au cours._
Bootstrap 4 représente une réécriture complète de toute la bibliothèque, et il apporte avec lui plusieurs nouvelles fonctionnalités et concepts à assimiler. Il peut donc sembler écrasant de plonger directement dans la documentation pour l'apprendre.
C'est pourquoi nous nous sommes associés à Neil Rowe (précédemment connu sous le nom de CodersGuide) et avons créé un cours complet gratuit sur Bootstrap 4. Neil a précédemment créé l'un des cours les plus populaires sur Bootstrap 3 sur YouTube, nous sommes donc très heureux qu'il ait choisi d'utiliser Scrimba pour son cours de suivi.
Vous pouvez suivre le cours dès aujourd'hui. Rendez-vous simplement sur la page du cours et vous deviendrez un expert de Bootstrap 4 en une heure.
Examinons maintenant de plus près ce que vous allez apprendre !
#1 Introduction au cours
Dans le premier screencast, vous obtiendrez un aperçu de Bootstrap lui-même, ainsi que des utilitaires et composants qu'il apporte. Neil passe également en revue les principaux avantages de la version 4.
#2 Le système de grille responsive
Le cours aborde ensuite l'un des composants les plus importants de Bootstrap, le système de grille responsive. Neil explique comment créer diverses grilles, avec différents points de rupture, tailles de colonnes et décalages.
#3 Barres de navigation responsives
Le composant de barre de navigation est une raison majeure pour laquelle beaucoup de gens utilisent Bootstrap. Dans cette leçon, vous apprendrez à construire une barre de navigation responsive qui se réduit en un menu hamburger sur les petits écrans.
#4 Modales
Bootstrap facilite également la création de modales, qui sont souvent utiles. Dans cette leçon, vous apprendrez à les construire étape par étape.
#5 Formulaires
Les formulaires sont essentiels pour la plupart des sites web, il est donc bon de savoir comment les créer. Dans cette leçon, vous apprendrez à créer un formulaire d'inscription responsive. Ici, vos compétences acquises dans la leçon sur les grilles responsives seront également utiles.
#6 Groupes de listes
Les groupes de listes peuvent être utilisés pour de nombreuses fins différentes. Ils peuvent, par exemple, être utilisés comme une barre latérale, un menu, une liste d'articles, ou tout ce que vous voulez, essentiellement.
#7 Cartes
Bootstrap 4 introduit un tout nouveau composant appelé cartes, qui remplacent les panels, wells et thumbnails. Une carte est un conteneur de contenu flexible et extensible. Dans cette leçon, vous apprendrez à en construire une en utilisant divers composants qui constituent généralement une carte.
#8 Tableaux
Bootstrap 4 propose également un ensemble de classes pour modifier les tableaux, et cette leçon en démontrera la plupart. Elles sont optionnelles, ce qui signifie que vous devez activement ajouter une classe de tableau pour transformer un tableau en un tableau Bootstrap. Cela diffère de la manière dont cela fonctionnait auparavant, où les tableaux HTML réguliers étaient automatiquement transformés en tableaux Bootstrap.
#9 Alertes
Les alertes ne sont pas particulièrement excitantes, et il n'y a pas trop de changements par rapport aux versions précédentes de la bibliothèque, donc si vous avez utilisé Bootstrap 2 ou 3, vous devriez être assez familier avec tout cela. Cependant, il est important de les connaître, car donner des messages et des notifications à vos utilisateurs via des alertes peut aider à rendre votre site web plus convivial.
#10 Options de navigation
Enfin, le cours se termine là où il a commencé, en vous donnant plus d'outils pour les barres de navigation, comme les onglets et les menus déroulants. C'est utile à savoir, mais pas aussi fondamental que le contenu de la deuxième leçon, c'est pourquoi cela vient à la fin du cours.
En suivant toutes ces leçons à la suite, vous devriez être en mesure de commencer à construire des sites web avec Bootstrap 4. Et si vous êtes bloqué, vous serez bien équipé pour plonger dans la documentation pour résoudre les problèmes que vous pourriez rencontrer.
Le format Scrimba
Enfin, examinons également rapidement la technologie derrière le cours. Il est construit en utilisant Scrimba, un outil de screencast de codage interactif. Un "scrim" ressemble à une vidéo normale, cependant, il est entièrement interactif. Cela signifie que vous pouvez modifier le code à l'intérieur du screencast.
Voici un gif qui explique le concept :
Pausez le screencast → Modifiez le code → Exécutez-le ! → Voyez vos modifications
C'est idéal lorsque vous sentez que vous devez expérimenter avec le code pour bien le comprendre, ou lorsque vous souhaitez simplement copier un morceau de code.
Alors, qu'attendez-vous ? Allez-y et suivez le cours dès aujourd'hui !
Merci d'avoir lu ! Je m'appelle Per, je suis le cofondateur de Scrimba, et j'adore aider les gens à apprendre de nouvelles compétences. Suivez-moi sur Twitter si vous souhaitez être informé des nouveaux articles et ressources.
Merci d'avoir lu ! Je m'appelle Per Borgen, je suis le cofondateur de Scrimba – la manière la plus simple d'apprendre à coder. Vous devriez consulter notre bootcamp de conception web responsive si vous souhaitez apprendre à construire des sites web modernes de manière professionnelle.
_