Créer un site responsive avec le framework Bootstrap

Objectifs

Augmentez vos capacités de création de site responsive web design grâce au pré-processeur CSS LESS et son framework Bootstrap associé. La complexité de la demande s'accroissant, apprenez à maîtriser les outils et les méthodologies de production hautement optimisées Découvrez les meilleures pratiques de l'intégration HTML/CSS.

Public

Graphistes, webdesigners, webmasters, intégrateurs, développeurs, chefs de projet, ou toute autre personne en charge de la création de pages web.

Durée

21 heures en présentiel sur 3 jours

Pré-requis

Posséder des notions en HTML5 et CSS3.

Formateur

Formateur expérimenté, développeur de site Web, et spécialiste du Web.

Méthode pédagogique

8 participants maximum, un poste par stagiaire et un support de cours est remis en fin de stage. La formation est constituée d'apports théoriques, de démonstrations et de mises en pratique basées sur des exercices.

Modalité de validation des acquis

Évaluation en ligne des acquis via un questionnaire. Attestation de fin de stage.

Déroulé

 

Fondamentaux de Bootstrap

  • Pourquoi utiliser un framework CSS ?
  • Mise en place du code Bootstrap
  • Principe de structuration et d'intégration
  • Système de grille
  • Vers des grilles fluides et adaptives
  • Mise en forme structurelle et textuelle
  • Templates Bootstrap

Les composants CSS

  • Boutons et groupe de boutons
  • Navigation
  • Breadcrumb ( fil d'ariane )
  • Pagination: contenus longs
  • Badge
  • Barre de progression
  • Alertes
  • Vignettes et medias

Les composants Javascript

  • API Bootstrap
  • Boîtes modales, Popover...
  • Menus déroulants
  • Scrollspy
  • Tabulations
  • Caroussel

Atelier

  • Intégration d'une maquette en responsive web design

Le pré-processeur LESS

  • Qu'est ce qu'un pré-processeur ? LESS is CSS
  • Avantages: LESS is more
  • Outils pour le workflow de production
  • Variables et mixins
  • Opérations, règles imbriquées...
  • Fonctions internes
  • Optimisation RWD
  • Semantic UI

S'approprier Bootstrap

  • depuis LESS
  • Optimiser Bootstrap avec les customs builds

Atelier

  • Workflow complet de mise en production