Formation Bootstrap 5
| 1800€ HT / personne |
| 3 jours (21 heures) |
Présentation
Notre formation Bootstrap vous apprendra à créer des pages web rapidement en profitant de toute la puissance du HTML et du CSS. Avec Bootstrap 5, la conception de site mobile et responsive n’est plus un calvaire.
En effet, grâce à son approche « mobile-first », Bootstrap 5 vous permettra une compatibilité multiplateforme pour les éléments essentiels d’un site web : la navigation, la grid, les forms, les carousels, les cards, les boutons, les accordéons ou encore les tables.
La maîtrise de cet outil est un avantage conséquent pour accélérer la vitesse de développement d’un site web.
Durant notre formation bootstrap, nous vous présenterons les bases de ce framework CSS, que ce soit en termes de conception d’éléments UI et UX ou de styles (typographie, icônes, les popups et popovers).
Suite à ce cours, vous saurez comment personnaliser un site rapidement. Nous vous enseignerons également l’utilisation du JavaScript et de JQuery afin de créer des animations dynamiques
Objectifs
- Présenter les différentes fonctionnalités afin de vous permettre de maîtriser Bootstrap 5
- Être à même d’adapter vous-même le code source de Bootstrap 5
- Intégrer son propre design grâce Bootstrap
- L’utiliser comme socle fondateur dans vos sites web
Public visé
Développeur Web, Webdesigner et Webmaster
Pré-requis
Connaissances en HTML/CSS
Programme de notre formation Bootstrap 5
Introduction
- Qu’est-ce qu’un framework CSS ?
- Évolution des technologies web : rappels sur HTML5 / CSS3
- Les alternatives à Bootstrap
- Pourquoi utiliser Bootstrap ?
- Mise en place de Bootstrap dans son projet
La mise en pages avec la grille
Bootstrap 5 permet de créer rapidement des layouts (mise en pages) complexes, adaptés autant aux mobiles qu’aux ordinateurs.
Nous verrons comment tirer parti de la grille de bootstrap pour créer des pages web.
- Principe de structuration et d’intégration
- Faire une mise en pages responsive
- Passage en revue des responsive breakpoints (différentes tailles d’écran)
- Du pixel au root em (rem)
- Mise en place de la grille
- Container, Row, Columns
- Utilisation de Flexbox avec la grille Bootstrap
Les contenus HTML et CSS
- Titres et mise en pages du texte
- Les Images responsives
- Tableaux et liste d’éléments
Les composants HTML et CSS
Bootstrap 5 intègre de nombreux composants, facilitant toutes les parties de la création d’une page :
- Navs et Navbars pour la navigation
- Breadcrumb ou fil d’Ariane
- Medias objects
- Cards
- Les listes
- Boutons, groupes de boutons et boutons déroulants
- Pagination
- Formulaires et Inputs
- Les alertes
- Un peu de déco : les badges, les spinners
- Jumbotron
- Lecteurs vidéos et audios personnalisés
- Intégrer du CSS personnalisé dans votre projet
Utiliser Bootstrap avec JavaScript et jQuery
Bootstrap possède aussi de nombreux composants tirant parti de JavaScript pour proposer une plus grande interactivité, et flexibilité via l’utilisation de scripts personnalisés.
- Carrousels de photos, accordéons
- Collapse elements
- Modals ou Boîtes modales
- Popovers
- Progress ou Barre de progression
- Scrollspy
- Toasts
- Tooltips
- Menus déroulants
- Tabulations
La magie des Utilities
Bootstrap 5 a intégré des dizaines de classes utilitaires qui accélèrent et simplifient de développement.
- Utilities layout, flexbox , float, clearfix, position, visibilité & display
- Utilities borders
- Utilities overflow
- Utilities couleurs
- Utilities shadow
- Utilities sizing & spacing
- Utilities textes
- Utilities alignement
Le pré-processeur SASS
SASS est le pré-processeur utilisé pour le développement du bootstrap. Savoir manipuler des fichiers SASS permet de mieux comprendre et de personnaliser le framework.
- Qu’est-ce qu’un pré-processeur ?
- Avantages de SASS
- SASS et Bootstrap 5
- Variables et mixins
Ateliers & Intégration
- Intégration d’une maquette pour un site full responsive
- Introduction à WebPack
- Utiliser Bootstrap 5 avec Angular
- Utiliser Bootstrap 5 avec Symfony
Bootstrap avancé (Module sur demande +2 jours)
- Créer un site avec un des modèles / Templates
- l’API Bootstrap
- Plugins externes (Calendar, Clip-One…)
- Mise en place de bootstrap avec npm et bower
- Intégration d’une maquette pour un site full responsive
- Déploiement du projet
- Créer une page à partir d’un modèle en surchargeant le fichier CSS
- Utiliser Bootstrap 5 avec SASS (préprocesseur) et Gulp (Taskrunner)
- Utiliser des fichiers SASS et un serveur Nodejs
- Intégration avec Angular et React
- Les nouveautés futurs de Bootstrap 5 et l’avenir du projet : la fin de jQuery
- Optimiser son site web
- CSS optimization
- Inline styles
- Long identifier and class names
- Shorthand rules
- Grouping selectors
- Rendering times
- Minifying CSS & JavaScript
- JavaScript concatenation
- Supprimer les CSS et les commentaires inutilisés de notre site Web
- Traitement du HTML
- Déploiement des ressources
- Automatiser les tâches
- Mise en place de l’environnement avec Gulp
- Extends & placeholder, les différences
- Fonctions internes
- Compass & bourbon, des frameworks pour SASS
Pour aller plus loin
Formation Angular
Formation Ionic
Formation Firebase avec Angularfire
Formation Redux et RxJS
Formation MEAN Stack
Formation D3.js
Langues et Lieux disponibles
Langues
- Français
- Anglais / English
Lieux
-
France entière
- Paris
- Lille
- Reims
- Lyon
- Toulouse
- Bordeaux
- Montpellier
- Nice
- Sophia Antipolis
- Marseille
- Aix-en-Provence
- Nantes
- Rennes
- Strasbourg
- Grenoble
- Dijon
- Tours
- Saint-Étienne
- Toulon
- Angers
-
Belgique
- Bruxelles
- Liège
-
Suisse
- Genève
- Zurich
- Lausanne
-
Luxembourg
Nos Formateurs Référents
Témoignages
L’aspect intégration du framework CSS au framework JS best practice
le support de cours
dès le choix du framework JS opéré, une formation sur ce framework JS
Afficher tous les témoignages
L’aspect intégration du framework CSS au framework JS best practice
le support de cours
dès le choix du framework JS opéré, une formation sur ce framework JS
La bonne connaissance du formateur par rapport au sujet de la formation et de tout l’environnement autour du sujet de formation
RAS
Comment écraser certaines restrictions bootstrap, La découverte d’angular qui est un framework fréquemment utilisé
Peut-être moins se baser sur la doc pour présenter davantage d’exemples
Probablement des formations en machine learning ou big data avec Spark
Je recommande la formation
Adaptation de la formation au public,
vue global du css et application Bootstrap
Merci au formateur (Fabien Lainé) pour l’écoute et l’adaptation dynamique de sa formation à nos besoins
Points forts de la formation :
– Permet de bien poser les bases pour commencer à utiliser bootstrap et sass correctement.
– Les démonstrations de code et de rendu.
– Plusieurs sites plutôt pratique à regarder.
exemple concret, pédagogie de l’enseignant.
Formateur à l’écoute et qui, par son expérience professionnelle, expose beaucoup de cas pratiques
Super formation. Fabian était très cool, à l’écoute et s’est adapté à notre niveau et nos connaissances. J’ai appris plein de choses, maintenant il faut pratiquer.
Et sinon, locaux super, accueil chaleureux. Je recommande vivement cet organisme.
Noter la formation
| 1800€ HT / personne |
| 3 jours (21 heures) |
UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?
Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.
ILS SE SONT FORMÉS CHEZ NOUS
