Intégration web et mobile avec Bootstrap 4
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Intégration web et mobile avec Bootstrap 4

Sandy Ludosky
35,00€
3 paiements de 11,67€ avec Klarna. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Voici une formation complète Bootstrap V4 pour une prise en main simple et rapide des méthodes de développement web universel et cross-platform (mobile, tablette, desktop).

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

 

Pourquoi utiliser Bootstrap ?

  • La bibliothèque Bootstrap est simple et facile à apprendre,
  • Plusieurs options sont 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.

 

Au programme de cette formation Bootstrap 4 en vidéo

Ce cours complet vous aidera, avec plusieurs démonstrations et projets, à comprendre l'intégration cross-platform 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. 

Vous apprendrez à 

  • Créer des pages responsives 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 animés.

 

Les projets pratiques inclus avec la formation

Cette formation se veut centrer sur la pratique. Elle propose donc des projets concrets d'intégration : 

Un premier exemple de page Bootstrap pour apprendre les éléments de base :

  • 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
     

On poursuit, plus fort, avec un 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 Bootstrap : Jumbotron,  Navbar, et Form ...
  • L’ajout de classes utilitaires responsives 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 les appareils mobiles.
  • En bonus, animations et transitions avec CSS Animation et jQuery

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 de développement web ou autre.

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

Une formation 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 cross-platform,
  • Et, les utilisateurs de Bootstrap 3 pour rester au fait des nouveautés annoncées pour la version 4

Des fichiers de travail sont fournis avec le cours. Je reste disponible dans le salon d'entraide pour répondre à vos questions sur Bootstrap 4 !

Bonne formation.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Introduction de la formation
Chapitre 2
Première Page Responsive avec Bootstrap
Chapitre 3
Page Portfolio
Chapitre 4
Template App Mobile
Chapitre 5
Bootstrap Sass

Plan détaillé du cours

Chapitre 1 : Introduction de la formation
10m39s
 
Leçon 1Bienvenue dans ce cours
Leçon 2Objectifs de Cours
Leçon 3Prérequis
Leçon 4Présentation de Bootstrap
Leçon 5Nouveautés Bootstrap 4
Chapitre 2 : Première Page Responsive avec Bootstrap
1h21m
 
Leçon 1Projet de Démarrage
Leçon 2Documentation Bootstrap
Leçon 3La Barre de Navigation
Leçon 4En-tête (Composant Jumbotron)
Leçon 5Système de Grille
Leçon 6Image Responsive
Leçon 7Section Main
Leçon 8Composant CSS Cards
Leçon 9[Challenge] - Système de Grille
Leçon 10[Challenge] - Solution
Leçon 11Footer
Leçon 12Page Responsive
Leçon 13JQuery - carousel.js
Leçon 14JQuery - modal.js
Leçon 15[Challenge] - Personnaliser Page
Leçon 16[Challenge] - Solution
Chapitre 3 : Page Portfolio
1h18m
 
Leçon 1Projet de Démarrage 1/2
Leçon 2Projet de Démarrage 2/2
Leçon 3Ajouter une Barre de Navigation
Leçon 4Ajouter En-tête
Leçon 5Ajouter Image d'Arrière Plan
Leçon 6Section Portfolio avec Système de Grille
Leçon 7Section Services avec Système de Grille et la Flexbox
Leçon 8Ajouter des icônes avec Font Awesome 4.7
Leçon 9Ajouter un Slideshow avec carousel.js
Leçon 10Section Contact
Leçon 11Section Contact - Icônes Réseaux Sociaux
Leçon 12Section Contact - Bootstrap Form
Leçon 13Pied de Page (Footer)
Leçon 14Personnaliser et Animer Barre de Navigation
Leçon 15JQuery - scrollspy.js
Leçon 16Ajouter Page Scroll avec jQuery
Chapitre 4 : Template App Mobile
32m33s
 
Leçon 1Projet de Démarrage
Leçon 2Ajouter Image Arrière Plan
Leçon 3Section Download (Google Play & App Store)
Leçon 4Section Features avec Font Awesome 4.7
Leçon 5Ordering avec le Système de Grille
Leçon 6Section Showcase
Leçon 7Section Contact - Animation CSS
Leçon 8Animation avec jQuery
Chapitre 5 : Bootstrap Sass
26m51s
 
Leçon 1Package.json & npm install
Leçon 2Gruntfile.js
Leçon 3Compiler Sass en CSS
Leçon 4Sass - les Variables
Leçon 5Sass - les Mixins

Aperçus

Avis des apprenants

Détail des avis
61
Apprenants
3
Commentaires
4/5
Note moyenne
5/5
2
4/5
0
3/5
0
2/5
1
1/5
0
Eden Sahilé
Eden Sahilé
Publié le 19/03/2018
Cours Génial ! Très bien expliqué ! Il y a certaines choses qui me paraissaient hyper complexes et avec ce cours j’ai tout compris facilement ! Un grand merci à vous vous . En revanche , j’ai un petit souci , mes pages ne sont pas vraiment responsives. Dois-je régler ce problème en indiquant les tailles pour les différents points de ruptures ? Pourrais-je vous envoyer mes pages afin que puissiez me donner des conseils ? Merci
Laraweb
Laraweb
Publié le 16/11/2017
bravo pour ce cours.
Lionel Gibaudan
Lionel Gibaudan
Publié le 25/10/2017
Tuto très décevant et superficiel. Bootstrap 4 a introduit des modifications importantes au niveau de la grille avec un nouveau point de rupture supplémentaire et un décalage des points de rupture existants, ceci est très important et n'est pas expliqué en détail. Il n'est jamais montré comment on peut exécuter des mises en forme responsive et adaptées aux différents périphériques, en utilisant la conjonction des diverses classes col col-sm col-md col-lg col-xl etc.... pour expliquer la véritable force de Bootstrap. L'auteur parle souvent de 'mobile first', qui consiste à développer un site à partir de la taille du téléphone et à l'élargir progressivement lorsque l'on passe sur des supports de taille supérieure, mais il n'en est jamais question ici car l'on reste tout le temps dans le contexte d'un grand écran dans les exemples. L'auteur créé des classes CSS spécifiques personnalisées (je faisais cela dans Bootstrap 3) pour rajouter des marges ou bien du padding dans les éléments, alors que cette fonctionnalité a été rajoutée dans Bootstrap 4 avec les classes 'm' et 'p' (exemple .mt-3 pour un margin-top de 1rem), ceci montre une méconnaissance du sujet par l'auteur. Au niveau du javascript, il faudra aussi signaler à l'auteur que la fonction jQuery bind() est 'deprecated' depuis la version 3.0 et qu'elle avait été remplacée par on() depuis la version 1.7. Le chapitre sur Grunt est inutile car c'est juste un survol qui ne permet pas d'en comprendre le fonctionnement.
Sandy Ludosky
Sandy Ludosky
Bonjour, Merci pour tes commentaires Doctor-pixel. Concernant les options du système de grille, je fais bien référence aux méthodes de développement cross-plateform mobile et aux différent breakpoints en combinant col et col-md dans certains exemples. Dans ce cours, je privilégie la méthode de la Flexbox, puisqu'il s'agit de la nouveauté Bootstrap 4. Oui, j'utilise des classes CSS personalisées. Pourquoi pas? Ce ne serait pas franchement une erreur dans un contexte de production en même temps. Nulle part, on ne te reprochera de créer ton propre css ou de te reposer unniquement sur les ressources d'une librairie. Il n'existe aucune règle à ce niveau là. En tant que développeur, tu utilises Bootstrap, pure.css, ton custom css. No limit ! J'ai bien rappelé en présentant ce cours que le but est d'apprendre à se familiariser avec une documentation, qui est aussi amenée à évoluer. Pour l'instant, c'est Bootstrap 4.0. Donc, un cours ne pourra jamais faire l'étalage complet d'une documentation. Et, ce n'est pas que je m'y refuserais, ça deviendrait juste très vite redondant. Une approche didactique par l'exemple sera mieux pour satisfaire un public large. Grunt est une partie optionnelle et plus avancée. Pour apprendre grunt ou sass, c'est sera bien et vivement recommandé de visionner un autre cours sur le sujet. Pour finir, une méthode dépréciée ne signifie qu'il n'est pas sécuritaire de l'utiliser, c'est simplement retirée des documentations futures. Mais, c'est encore tout à fait valable.

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

Bootstrap 4

Quel est le niveau requis pour suivre ce tuto ?

débutant

Payer plus tard ou en 3x

Prix d'achat : 35,00 €
Pour payer plus tard ou en plusieurs versements échelonnés, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez plus tard ou en plusieurs fois

3 paiements de 11,67 €
tous les mois, sans intérêts
Total : 35,00 €
Afficher les conditions : Klarna
Klarna : conditions d'utilisation du paiement différé en 3 échéances.

Attendez ! 🤗

Accédez à plus de 1362 tutos gratuits

Notre politique de protection des données