Dernière mise à jour le 12/12/2024
BootStrap – Développement de pages Web Responsive
Informations générales
Type de formation : Formation continue
Domaine : Développement
Filière : Transformation digitale
Rubrique : HTML - CSS - JavaScript - XML
Formation éligible au CPF : Non
Formation Action collective : Non
Objectifs & compétences
Connaître les spécificités de Bootstrap
Maitriser la création d'interfaces
Mobiles First avec Bootstrap
Rendre des pages responsives avec Bootstrap
Comprendre comment manipuler les objets de base et les composants
Découvrir des Frameworks concurrents
Public visé
Chefs de projet Web, architectes techniques, développeurs front-end
Pré-requis
Bonne connaissance de JavaScript Avoir suivi le formation "Les fondamentaux du développement d'interfaces graphiques avec HTML5, CSS3 et JavaScript" (W-HT3) ou disposer des compétences équivalente
Programme
INTRODUCTION
Présentation de BootStrap
Qu'est ce que Bootstrap ?
Rapide tour d'horizon
POURQUOI BOOTSTRAP 3?
Designers vs.
Développeurs
Le web mobile
Responsive web design et Mobile First responsive web design Bootstraping the web
CRÉER UN PROJET AVEC BOOTSTRAP (ET BOWER)
Récupérer Bootstrap (avec et sans bower)
Ajouter Bootstrap à une page web
Présentation de la 12-row-grid
Utiliser la grille Offsets et Rows
Images et Responsive helpers
Ajouter un thème
LES OBJETS DE BASE
Les typographies
Les boutons
Les font d’icônes
La navigation
Les listes
Les tableaux
Les formulaires
LES COMPOSANTS
Headers et breadcrumbs
Groupes de boutons Dropdowns
Inputs Pagination
Miniatures Panels
LES PLUGINS
Accordéons Fenêtres Modales Onglets Tooltips Alertes Carousels
LES FRAMEWORKS CONCURRENTS
Foundation Bulma UIKit Semantic UI
LE FUTUR BOOTSTRAP
1 - Introduction
- Historique du produit, licence
- Les apports de Bootstrap
- Navigateurs et devices compatibles
2 - Affichage
- Définition de grilles
- Gestion de contenus responsive (images, tableaux, schémas, ...)
- Typographie, paramétrage des polices
3 - Composants
- Présentation des composants standards : messages d'alertes, boutons, carrousels, barres de navigation, etc...
- Travaux pratiques : réalisation d'un site de démonstration avec les composants classiques
4 - Gestion des thèmes
- Principe de Sass, structure des fichiers
- Travaux pratiques : import des fichiers sources Sass
- Modification des variables Sass par défaut
- Configuration d'un thème personnalisé
- Utilisation des fonctions Sass de gestion des couleurs, des contrastes
- Principales options de Sass
5 - Accessibilité
- Possibilités de bootstrap
- Compatibilité WCAG 2.0
- Gestion des composants interactifs, du contraste, ...
6 - JavaScript
- Plugins basés sur jQuery, API JavaScript
- Fonctionnalités disponibles
- Travaux pratiques : exemples avec les plugins fournis en standard
7 - Compléments
- Fichiers CSS précompilés
- Outils disponibles : sources et fichiers compilés JSS et JavaScript
- Compilateur Sass
- BootstrapCDN
- Packages NPM, YARN et RubyGems, Composer, NuGet, ...
- Packs d'icônes, Tooltip
Modalités
Modalités : en présentiel, distanciel ou mixte . Toutes les formations sont en présentiel par défaut mais les salles sont équipées pour faire de l'hybride. – Horaires de 9H à 12H30 et de 14H à 17H30 soit 7H – Intra et Inter entreprise.
Pédagogie : essentiellement participative et ludique, centrée sur l’expérience, l’immersion et la mise en pratique. Alternance d’apports théoriques et d’outils pratiques.
Ressources techniques et pédagogiques : Support de formation au format PDF ou PPT Ordinateur, vidéoprojecteur, Tableau blanc, Visioconférence : Cisco Webex / Teams / Zoom.
Pendant la formation : mises en situation, autodiagnostics, travail individuel ou en sous-groupe sur des cas réels.
Méthodes
Fin de formation : entretien individuel.
Satisfaction des participants : questionnaire de satisfaction réalisé en fin de formation.
Assiduité : certificat de réalisation.
Validations des acquis : grille d'evalution des acquis établie par le formateur en fin de formation.
Code de formation : W-BST
Tarifs
Prix public : 1360 €
Tarif & financement :
Nous vous accompagnons pour trouver la meilleure solution de financement parmi les suivantes :
Le plan de développement des compétences de votre entreprise : rapprochez-vous de votre service RH.
Le dispositif FNE-Formation.
L’OPCO (opérateurs de compétences) de votre entreprise.
France Travail: sous réserve de l’acceptation de votre dossier par votre conseiller Pôle Emploi.
CPF -MonCompteFormation
Contactez nous pour plus d’information : contact@aston-institut.com
Lieux & Horaires
Durée : 14
heures
Délai d'accès : Jusqu'a 8 jours avant le début de la formation, sous condition d'un dossier d'insciption complet
Prochaines sessions
Handi-accueillante
Accessible aux personnes en situations de handicap.
Pour toutes demandes, contactez notre référente,
Mme Rizlene Zumaglini
Mail : rzumaglini@aston-ecole.com