Développer avec Bootstrap 4 - Le Cours Complet

*** Cours mis à jour avec la version 4.5.3 ***

• Nouvelles ressources et fichiers téléchargeables avec la version la plus récente Bootstrap4 (4.5.3)

• Nouvelle section d' 1H+ pour découvrir les nouvelles annonces de Bootstrap 5 Alpha 2

• Introduction au nouvel outil CLI bootstrap npm starter pour générer un nouveau projet en un tour de main

• Un tutoriel sur comment customizer et surcharger les fichiers sources et variables Sass

***  *** *** *** *** *** ***  BONUS : projets et templates Bootstrap 5 inclus ***  *** *** *** *** *** ***

Nouvelle formation complète Bootstrap V4 pour une prise en main simple et rapide des méthodes de développement web universel et cross-plateform. Atout majeur pour tous les métiers du web, connaître la librairie HTML, CSS & JS Bootstrap aide à créer rapidement et facilement des pages responsives pour les écrans de mobiles, tablettes et ordinateurs de bureau.

En développement depuis 2014, Bootstrap V4 annonce finalement sa version Beta. Les nouveautés incluent :

• Un système de grille avec la Flexbox pour plus d’options et flexibilité

• L'utilisation de Sass

• Des nouveaux composants CSS comme les cards

  
  

Ce cours vous aidera, avec plusieurs démonstrations et projets, à comprendre le développement cross-plateform mobile. À l'issu de la formation, vous pourrez afficher fièrement vos nouvelles compétences de conception web adaptif avec une page portfolio professionnelle et responsive. Au programme :

• Créer des pages responsive pour les écrans larges (ordinateurs portables et de bureau) et réduits (tablettes et mobiles)

• Utiliser les nouveautés de Bootstrap V4 avec la Flexbox et autres composants nouveaux comme les cards

• inclure des plugins jQuery, prêts à l’emploi et extrêmement faciles à configurer, pour créer une page dynamique en un rien de temps

• En extra, jQuery et Animation CSS pour ajouter de l’interactivité et des effets visuels 

Les projets :

(1) - Un premier exemple de page Bootstrap pour apprendre les éléments de base et découvrir :

• Comment intégrer les ressources Bootstrap avec l’option CDN

• Le système de grille pour créer rapidement une mise en page responsive

• Les classes CSS et les composants Bootstrap avec le concept de mobile first

• Les plugins jQuery. Avec une configuration minimum et simple d’utilisation, les composants Javascript seront faciles à intégrer

(2) - On poursuit, plus fort, avec projet de page portfolio pour apprendre à créer une mise en page en moins d’une heure, avec en démonstration :

• L’utilisation des options de grille responsive avec la Flexbox

• L’intégration des composants bootstraps : Jumbotron,  Navbar, et Form ...

• L’ajout de classes utilitaires responsive pour adapter la mise en page aux différentes tailles d’écran. Ce sera, sans trop d’effort, que vous pourrez cibler les écrans larges et d’appareils mobile.

• En bonus, animations et transitions avec CSS Animation et jQuery

(3) - On passera, ensuite, à un niveau plus avancé avec un projet de template d’application mobile. Au final, vous aurez une page fonctionnelle et responsive pour présenter vos projets en ligne, un portfolio numérique, vos compétences web ou autre.

(4) - Vous apprendrez également à personnaliser votre page Bootstrap en utilisant la syntaxe de Sass et Grunt.

Et, pourquoi utiliser Bootstrap ?

• La bibliothèque Bootstrap est simple et facile à apprendre

• Plusieurs options disponibles pour démarrer un projet : le CDN, les fichiers CSS ou Sass

• Bootstrap offre, dans sa documentation, plusieurs exemples de pages et templates pour vos projets

• Une documentation claire et informative avec des codes snippets prêts à l'emploi, pour un usage rapide des classes et composants CSS

Pour qui ?

• Les designers et développeurs web

• Les Intégrateurs html et css

• Pour les débutants surtout, qui souhaitent rapidement se familiariser avec le développement mobile

• Et, les utilisateurs de Bootstrap 3 pour rester au fait des nouveautés annoncées pour la version 4