$ 35.00

Tuto Intégration web et mobile avec Bootstrap 4 avec Bootstrap

$ 35.00

  • Une formation vidéo de 3h50m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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.

Table des matières de cette formation Bootstrap (durée : 3h50m)

  • Introduction de la formation
    • Bienvenue dans ce cours 00:01:48
    • Objectifs de Cours 00:03:45
    • Prérequis 00:01:38
    • Présentation de Bootstrap 00:02:04
    • Nouveautés Bootstrap 4 00:01:24
  • Première Page Responsive avec Bootstrap
    • Projet de Démarrage 00:03:14
    • Documentation Bootstrap 00:02:18
    • La Barre de Navigation 00:05:24
    • En-tête (Composant Jumbotron) 00:02:16
    • Système de Grille 00:08:48
    • Image Responsive 00:06:18
    • Section Main 00:06:14
    • Composant CSS Cards 00:04:39
    • [Challenge] - Système de Grille 00:01:47
    • [Challenge] - Solution 00:03:32
    • Footer 00:04:17
    • Page Responsive 00:07:27
    • JQuery - carousel.js 00:10:24
    • JQuery - modal.js 00:04:01
    • [Challenge] - Personnaliser Page 00:03:11
    • [Challenge] - Solution 00:07:57
  • Page Portfolio
    • Projet de Démarrage 1/2 00:06:27
    • Projet de Démarrage 2/2 00:05:24
    • Ajouter une Barre de Navigation 00:04:24
    • Ajouter En-tête 00:07:51
    • Ajouter Image d'Arrière Plan 00:01:29
    • Section Portfolio avec Système de Grille 00:05:57
    • Section Services avec Système de Grille et la Flexbox 00:05:02
    • Ajouter des icônes avec Font Awesome 4.7 00:04:49
    • Ajouter un Slideshow avec carousel.js 00:04:06
    • Section Contact 00:05:00
    • Section Contact - Icônes Réseaux Sociaux 00:06:37
    • Section Contact - Bootstrap Form 00:07:17
    • Pied de Page (Footer) 00:03:52
    • Personnaliser et Animer Barre de Navigation 00:04:52
    • JQuery - scrollspy.js 00:04:10
    • Ajouter Page Scroll avec jQuery 00:01:26
  • Template App Mobile
    • Projet de Démarrage 00:08:52
    • Ajouter Image Arrière Plan 00:03:39
    • Section Download (Google Play & App Store) 00:01:45
    • Section Features avec Font Awesome 4.7 00:05:05
    • Ordering avec le Système de Grille 00:02:53
    • Section Showcase 00:04:11
    • Section Contact - Animation CSS 00:02:04
    • Animation avec jQuery 00:04:04
  • Bootstrap Sass
    • Package.json & npm install 00:08:40
    • Gruntfile.js 00:06:56
    • Compiler Sass en CSS 00:02:16
    • Sass - les Variables 00:01:14
    • Sass - les Mixins 00:07:45



Formateur : Sandy Ludosky

Sandy Ludosky a publié 20 tutoriels et obtenu une note moyenne de 4,2/5 sur 2 862 tutoriels vendus. Sandy Ludosky est un formateur certifié tuto.com. Voir les autres formations de Sandy Ludosky

4,0
note moyenne

3
avis laissés
5 étoiles
2
4 étoiles
0
3 étoiles
0
2 étoiles
1
1 étoile
0
  • 5
    avis de membre-2558-2849 laissé 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

  • 5
    avis de laraweb laissé le 16/11/2017
    Bravo pour ce cours.

  • 2
    avis de doctor-pixel laissé 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.
    "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."

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    Bootstrap 4
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1121 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données