Formation HTML/CSS Bootstrap - Initiation
Construisez des pages web responsives avec Bootstrap : bases HTML et CSS, système de grille et composants prêts à l'emploi.
Notre équipe vous conseille
Est-ce la bonne formation pour vous ?
Votre objectif, votre niveau, votre financement : notre équipe vérifie avec vous que cette formation vous correspond, ou vous oriente vers celle qui vous conviendra mieux.
- Pour qui
- Graphistes web, webdesigners, community managers, webmasters, développeurs web, Intégrateurs web...
- Prérequis
Bonne connaissance de l’environnement informatique (pratique courante d’OS X ou de Windows)
- Durée
- 35 h · 5 jours
En bref
Ce que vous saurez faire
- Maîtriser les bases du HTML5 sémantique et du CSS3 nécessaires pour utiliser un framework.
- Mettre en place Bootstrap 5 dans un projet et exploiter son système de grille responsive.
- Construire une interface avec les composants et les classes utilitaires de Bootstrap.
- Personnaliser un thème Bootstrap (couleurs, variables, mode sombre) selon une charte.
- Intégrer et publier un site responsive, en s’appuyant si besoin sur un assistant de code par IA.
Programme
Formation Bootstrap - sites en responsive
01Rappels HTML5 et CSS3 utiles
- Le fonctionnement d’un site web et les standards (W3C / WHATWG)
- La structure sémantique d’une page (header, nav, main, section, article, footer)
- Les bases du CSS : sélecteurs, modèle de boîte, unités modernes
- Introduction à Flexbox (socle du fonctionnement de Bootstrap)
02Découvrir Bootstrap 5
- Qu’est-ce qu’un framework CSS ; l’intérêt de Bootstrap
- Bootstrap 5 aujourd’hui : projet indépendant, sans jQuery (JavaScript natif)
- Installer Bootstrap : CDN ou fichiers locaux
- La documentation officielle comme outil de travail
- L’approche mobile-first et les points de rupture (breakpoints)
03Le système de grille
- Conteneurs, lignes et colonnes
- La grille responsive à 12 colonnes
- Les classes de colonnes par point de rupture (sm, md, lg, xl, xxl)
- Alignement, décalage (offset) et imbrication
04Les classes utilitaires
- Espacements (marges, paddings)
- Affichage, Flex et alignement
- Couleurs, arrière-plans et bordures
- Typographie et texte
05Les composants Bootstrap
- Boutons, badges, alertes et cartes (cards)
- Barre de navigation (navbar) et menus
- Formulaires et validation
- Modales, onglets, accordéons, carrousels
- Icônes (Bootstrap Icons)
06Personnalisation et thème
- Personnaliser via les variables CSS et les classes
- Le mode sombre (dark mode) natif de Bootstrap 5
- Adapter les couleurs et la typographie à une charte graphique
- Notions de personnalisation avancée (Sass, aperçu)
07Accessibilité et bonnes pratiques
- Les apports d’accessibilité de Bootstrap et leurs limites
- Structure, contrastes et navigation clavier
- Performance : n’inclure que le nécessaire
08L’IA comme assistant de code
- Générer et adapter des composants Bootstrap avec un assistant IA (ex. GitHub Copilot)
- Expliquer et corriger (debug) du code d’intégration
- Bonnes pratiques : relecture, compréhension et limites
09Mise en ligne
- L’hébergement et le nom de domaine
- Le transfert des fichiers (FTP/SFTP) et la publication
10Atelier
- Réaliser et publier un site vitrine responsive complet avec Bootstrap 5
Qui vous forme
Pierre Prevost
Création web · Développement et informatique
Développeur web freelance depuis 2007, il conçoit des sites vitrines et e-commerce et forme à leur création et à leur maintenance.
Prochaines sessions
Les dates peuvent s'adapter : en individuel, la formation démarre quand vous êtes prêt(e).
- 12 novembre 2026 – 18 novembre 2026
- 17 mars 2027 – 22 mars 2027
- 30 juin 2027 – 5 juillet 2027
- 17 novembre 2027 – 22 novembre 2027
Financer cette formation
Selon votre situation, tout ou partie de la formation peut être pris en charge. Notre équipe vérifie vos droits avec vous.
Votre employeur (OPCO), France Travail, la Région ou un financement personnel peuvent prendre en charge cette formation.
Notre équipe identifie la bonne solution et monte le dossier avec vous.
Informations pratiques
- Type de reconnaissance
- Attestation de fin de formation
- Accessibilité
- Locaux accessibles aux personnes à mobilité réduite (PMR) et aux personnes en situation de handicap (PSH).
Référent handicap : Bénédicte Guilloteau, benedicte@mandyben.com
Fiche mise à jour le 29 octobre 2026
En savoir plus sur cette formation
Objectifs :
• Maîtriser les bases du HTML5 sémantique et du CSS3 nécessaires pour utiliser un framework.
• Mettre en place Bootstrap 5 dans un projet et exploiter son système de grille responsive.
• Construire une interface avec les composants et les classes utilitaires de Bootstrap.
• Personnaliser un thème Bootstrap (couleurs, variables, mode sombre) selon une charte.
• Intégrer et publier un site responsive, en s’appuyant si besoin sur un assistant de code par IA.
Rappels HTML5 et CSS3 utiles
• Le fonctionnement d’un site web et les standards (W3C / WHATWG)
• La structure sémantique d’une page (header, nav, main, section, article, footer)
• Les bases du CSS : sélecteurs, modèle de boîte, unités modernes
• Introduction à Flexbox (socle du fonctionnement de Bootstrap)
Découvrir Bootstrap 5
• Qu’est-ce qu’un framework CSS ; l’intérêt de Bootstrap
• Bootstrap 5 aujourd’hui : projet indépendant, sans jQuery (JavaScript natif)
• Installer Bootstrap : CDN ou fichiers locaux
• La documentation officielle comme outil de travail
• L’approche mobile-first et les points de rupture (breakpoints)
Le système de grille
• Conteneurs, lignes et colonnes
• La grille responsive à 12 colonnes
• Les classes de colonnes par point de rupture (sm, md, lg, xl, xxl)
• Alignement, décalage (offset) et imbrication
Les classes utilitaires
• Espacements (marges, paddings)
• Affichage, Flex et alignement
• Couleurs, arrière-plans et bordures
• Typographie et texte
Les composants Bootstrap
• Boutons, badges, alertes et cartes (cards)
• Barre de navigation (navbar) et menus
• Formulaires et validation
• Modales, onglets, accordéons, carrousels
• Icônes (Bootstrap Icons)
Personnalisation et thème
• Personnaliser via les variables CSS et les classes
• Le mode sombre (dark mode) natif de Bootstrap 5
• Adapter les couleurs et la typographie à une charte graphique
• Notions de personnalisation avancée (Sass, aperçu)
Accessibilité et bonnes pratiques
• Les apports d’accessibilité de Bootstrap et leurs limites
• Structure, contrastes et navigation clavier
• Performance : n’inclure que le nécessaire
L’IA comme assistant de code
• Générer et adapter des composants Bootstrap avec un assistant IA (ex. GitHub Copilot)
• Expliquer et corriger (debug) du code d’intégration
• Bonnes pratiques : relecture, compréhension et limites
Mise en ligne
• L’hébergement et le nom de domaine
• Le transfert des fichiers (FTP/SFTP) et la publication
Atelier
• Réaliser et publier un site vitrine responsive complet avec Bootstrap 5
Avis
Ils sont passés par là. Des stagiaires.
J'ai pu créer ma boutique en ligne et réaliser des ventes en lançant ma marque :-)
Ce stage m'a permis de tester plusieurs appareils photo, et de me mettre en situation pour mieux comprendre les problématiques.
Les explications claires et bien ciblées ont permis à notre collaborateur à la fois de se former et de rectifier ses procédures. Objectif atteint donc et nous en remercions le formateur.
Je vous confirme que la formation s’est excellemment bien déroulée. Le contenu était très intéressant et devrait m’apporter beaucoup dans mon travail à venir. J’en profite pour vous féliciter sur le choix de vos formateurs, le formateur fait preuve d’une grande pédagogie et d’une extrême gentillesse.
Questions fréquentes
Par quel langage commencer ?
Pour le web, HTML et CSS puis JavaScript. Pour l'analyse de données ou l'automatisation, Python. Nous vous orientons selon votre objectif.
Peut-on se reconvertir dans le développement ?
Oui, avec les titres professionnels Développeur front end et Développeur back end, accessibles en blocs de compétences.
Les formations sont-elles pratiques ?
Oui, chaque notion est mise en pratique sur des exercices et des projets.
Proposez-vous des formations en administration système ?
Oui : Linux, Docker, Zabbix, Oracle et sécurité des systèmes d'information.
Où se déroulent les formations ?
Dans nos locaux au 146 rue Paradis, à Marseille (6e), dans vos locaux pour les formations intra-entreprise, ou à distance en visio, en direct avec le formateur. Les modalités possibles sont indiquées sur chaque fiche.
Pas sûr(e) d'être fait(e) pour ça ?
Chacun sa façon d'atteindre son objectif. Notre équipe vous rappelle pour trouver la formation et le financement adaptés à votre situation.
- QualiopiOrganisme certifié
- 1 780personnes formées en 2026
- 98 %de satisfaction
- Depuis 2006à Marseille, 146 rue Paradis