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

à voir aussi dans le même domaine...

Formation continue

Transformation digitale

NE005

Accessibilité fonctionnelle et graphique

Connaître et évaluer les critères d’accessibilité Savoir piloter la prise en compte de l’accessibilité aux différentes étapes d’un projet web Avoir des indicateurs de coût et de complexité Identifier les enjeux et éléments clés pour réussir la prise en compte de l’accessibilité

7 heures de formations sur 1 Jours
En savoir plus

Formation continue

Transformation digitale

AS201

Technologies du Web, la synthèse

21 heures de formations sur 3 Jours
En savoir plus

Formation continue

Transformation digitale

W-HT4

Conception d’interfaces graphiques full JavaScript avec Angular, TypeScript et Bootstrap

Evaluer les enjeux du développement d'une application web, et son intérêt Disposer des connaissances et compétences nécessaires pour rendre une application "offline" Maîtriser l'utilisation du Framework proposé par Google : Angular 2+ (versions 2 et ultérieures) Comprendre comment tirer parti de Bootstrap pour développer rapidement des pages Web "responsive" Être capable de prendre en charge l'intégralité du développement de la partie "front"    

35 heures de formations sur 5 Jours
En savoir plus

Formation continue

Transformation digitale

NE157

Design Thinking, devenez un Design Thinker

Comprendre l’état d’esprit du design thinking en mode "design thinking sprint" Acquérir une méthodologie d’innovation efficace centrée sur l’utilisateur pour rapidement évaluer et valider des produits Faire l’apprentissage du processus et de ses outils Expérimenter une culture de travail collaboratif et agile basée sur l’empathie, le prototypage, le test et l’itération

14 heures de formations sur 2 Jours
En savoir plus

Formation continue

Transformation digitale

SP78039

Référencement naturel / SEO AVANCE

Comprendre le fonctionnement des moteurs de recherche - Connaître les techniques d'optimisation d'une page web – Savoir créer de bons backlinks  

7 heures de formations sur 1 Jours
En savoir plus

Formation continue

Transformation digitale

W-INI

Créer un site Internet pour non informaticien

Savoir préparer et organiser les contenus prévus pour le site Comprendre comment élaborer la navigation entre les pages du site Internet Maîtriser l'écriture du HTML Comprendre et maîtriser la mise en page à l’aide des feuilles de style en cascade (CSS) Disposer des bases pour configurer un serveur Web Être capable d'enrichir le contenu d'un site (vidéos, liens dynamiques)  

28 heures de formations sur 4 Jours
En savoir plus