Apprendre le Framework Bootstrap en partant de zéro
Accélérer le développement d'interface graphique frontend grâce à Bootstrap, framework HTML, CSS & JavaScript
Description
Depuis longtemps déjà, le développement des sites web a fortement évolué. Vous devez créer des sites avec une architecture solide, qui soient élégants, ergonomiques et qui puissent être parfaitement affichés dans tous les types de support actuel, c’est-à-dire sur un écran d’ordinateur, sur une tablette ou un smartphone.
Cela nécessite une très bonne connaissance des langages fondateurs du Web (HTML, CSS et JavaScript) de sorte à pouvoir mener à bien les projets. Mais il ne faut pas se leurrer, c’est parfois long et difficile.
Pour nous aider dans cette tâche, nous pouvons utiliser des frameworks (ou des cadriciels selon la terminologie française). Les frameworks sont des collections de brique de code (HTML, CSS et JavaScript) bien structurées et prêtes à l’emploi qui nous permettent de partir sur de solides bases pour la création de nos sites web.
Il existe de très nombreux frameworks, mais le plus utilisé est sans conteste Bootstrap. Au départ il a été créé en interne, pour unifier les interfaces des applications de Twitter. Puis un des deux architectes, Mark Otto en a créé un projet ouvert à tous en le mettant à disposition sur GitHub.
Actuellement Bootstrap, est disponible en version 5.
Bootstrap propose de très solides fonctionnalités pour développer nos sites web, avec une approche résolument « Responsive Web Design ». Bootstrap utilise aussi les dernières fonctionnalités de mise en page, avec l’utilisation des modules CSS3 Flexbox et Grid, proposés par le W3C.
Voici les fonctionnalités que nous propose Bootstrap :
Une grille de mise en page pour agencer les différentes boîtes d’affichage des sites. Cette grille est immédiatement « Responsive Web Design », cela veut dire que l’affichage va s’adapter aux écrans de diffusion : ordinateurs, tablette et smartphone.
Des styles CSS pour mettre en forme le texte, les tableaux et les formulaires...
Des styles CSS permettant d’afficher des boutons attrayants et des images design.
Des composants d’interface pour dynamiser vos sites web : barre de menus, groupe de bouton, fil d’Ariane, pagination, vignette d’image, liste...
De nombreuses règles CSS qui viennent vous aider pour améliorer le design de vos pages web de manière élégante : des jeux de couleurs, des bordures, des flottements et des positions pour les blocs d’information, des marges supplémentaires...
Dans cette formation, vous commencerez par apprendre à installer Bootstrap selon plusieurs méthodes en fonction de l'objectif de vos projets de développement web.
Ensuite, vous apprendrez les techniques de mise en page de Bootstrap qui sont basées sur le module CSS3 Flexbox, pour concevoir des sites Responsive Web Design dont l'affichage s'adaptera automatiquement selon l'écran de diffusion (écran d'ordinateur, tablette ou smartphone).
Vous exploiterez les différents composants CSS Bootstrap afin d'optimiser vos pages web : pour le texte, les images, les tableaux, les formulaires, les composants d'interface et les boutons.
Vous apprendrez comment créer la navigation, avec l'utilisation des barres et des menus de navigation.
Vous étudierez des exemples d'utilisation de règles CSS qui vont vous permettre de mettre en forme des éléments d'interface comme des bordures, des jeux de couleurs, des flottements, des marges et remplissages...
Prérequis
De la motivation.
Avec un ordinateur (C'est mieux!).
What You Will Learn!
- Dans ce cous vous allez apprendre tous les fondamentaux du Framework Bootstrap
- Utiliser Bootstrap dans sa dernière version pour tous vos projets
- Utiliser des animations fluides avec Bootstrap
- Implémenter les classes et les composants de Bootstrap
- Comprendre ce qu'est une grille CSS
- Avoir un design beau et professionnel sans passer des heures sur le design
- Créer des projets complexes avec Bootstrap
Who Should Attend!
- Développeur Web ou mobile tous niveaux