Le Responsive Design avec Flexbox et Bootstrap
ERROR
00:00
00:00

TUTO Le Responsive Design avec Flexbox et Bootstrap

Steven Sil
Promo -29%
42,00€59,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Voici un bundle de 3 formations d’une durée totale de plus de 5h20 avec lequel vous allez apprendre à maîtriser le responsive design (adaptation de votre site à toutes les tailles d’écran) avec des techniques modernes d’intégration :

  • Utilisation du module CSS3 Flexbox pour gérer la disposition de vos designs,
  • Utilisation du framework front-end le plus célèbre, Bootstrap 4 pour faciliter toutes vos futures intégrations.

Ce pack a été créé pour que vous n’ayez pas besoin d’une autre formation afin d’apprendre à maîtriser complètement le responsive design et Bootstrap 4. Ce dernier nécessitant la connaissance du responsive design et Flexbox, ce bundle prend donc tout son sens !

Pour comprendre pleinement le contenu des 3 formations, il vous suffit de connaître simplement les bases des langages HTML et CSS. Ce pack comprend donc les 3 formations suivantes à un prix plus intéressant :

 

Partez à la découverte du Responsive Design (2h43)

Actuellement, les sites Web sont consultés à plus de 50% par des téléphones mobiles, à 7% par des tablettes et à plus de 40% par des ordinateurs. Cet usage grandit au fur et à mesure des mois (+ 10% de visite via des smartphones entre janvier 2017 et décembre 2017 en France). Il est donc important pour chaque site, d’adapter son contenu et la disposition de celui-ci en fonction de la taille de l’écran qui l’affiche. C’est ce qu’on appelle le Responsive Web Design et le but de cette formation est de vous y former. Un projet concret : Nous viendrons réaliser un site onepage qui s’adaptera à toutes les tailles d’écran.
 

Comment fonctionne l'intégration CSS avec Flexbox ? (1H00)

Vous allez apprendre à utiliser le module CSS 3 Flexbox qui va vous permettre d'intégrer vos futurs sites Web avec la plus grande des facilités. Finie l'utilisation des flottants ou encore des display inline-block pour gérer l'intégration de vos designs ! Vous allez enfin avoir un ensemble de propriétés CSS pour gérer l'intégralité de la disposition de vos éléments HTML. Associée à la maîtrise du responsive design que vous aurez vu dans une des autres formations du bundle, Flexbox sera le module parfait pour gérer l'affichage de vos éléments aux différentes tailles d'écrans.
 

Intégrez vos sites Web avec Bootstrap 4 (1h40)

Dans cette formation, vous allez découvrir Bootstrap 4 pour gérer plus facilement l’intégration de tous vos futurs sites Web. Ce framework met une grille responsive à notre disposition qui nous permettra de facilement adapter nos sites Web à toutes les tailles d’écrans sans devoir passer nous-même par l’utilisation des media queries. On regardera également des classes CSS qui nous permettront de disposer nos éléments HTML avec Flexbox sans devoir directement utiliser les propriétés propres à celui-ci. Cette formation est dédiée à l’aspect responsive design de Bootstrap et non à la partie stylisation de Bootstrap.
La formation comprend également un mémento qui reprendra l'ensemble du contenu de la formation que vous pourrez imprimer et un fichier PSD qui contiendra la grille de base pour vos futurs sites Web créés avec Bootstrap.
Un projet concret sera abordé : l'intégration d’une page responsive complète à l’aide de Bootstrap.

Je reste disponible dans le salon d'entraide pour répondre à vos questions.
Tous les fichiers de travail sont fournis avec ce cours.

Cours dans ce bundle

A la découverte du Responsive Design Cours 1

A la découverte du Responsive Design

Comment fonctionne l'intégration CSS avec Flexbox ? Cours 2

Comment fonctionne l'intégration CSS avec Flexbox ?

Intégrez vos sites Web avec Bootstrap 4 Cours 3

Intégrez vos sites Web avec Bootstrap 4

Plan détaillé des cours

 
Chapitre 1 : Ce qu'il faut savoir
1h43m
 
Leçon 1Introduction
Leçon 2Le responsive design
Leçon 3Le document HTML de base
Leçon 4Media types et media queries
Leçon 5Utiliser les unités relatives
Leçon 6Organiser un projet avec le mobile first
Leçon 7Gérer les textes
Leçon 8Des médias flexibles
Leçon 9Des images adaptatives
Leçon 10Initiation à Flexbox
Leçon 11Créer une grille responsive avec Flexbox
Chapitre 2 : Cas concret : Une landing page responsive
1h31s
 
Leçon 1Préparation de notre projet
Leçon 2Le header
Leçon 3Les compétences
Leçon 4Le formulaire d'abonnement à la Newsletter
Leçon 5Le footer
Leçon 6Conclusion
 
Leçon 1Introduction
01m23s
Leçon 2Créer un conteneur Flexbox
11m54s
Leçon 3Direction des éléments flexibles
06m28s
Leçon 4Alignement des éléments flexibles
12m34s
Leçon 5Les pouvoirs du margin: auto
09m19s
Leçon 6Ordre et alignement individuel des éléments flexibles
05m17s
Leçon 7Gérer la taille d'un élément flexible
12m53s
Leçon 8Conclusion
27s
 
Chapitre 1 : Découverte de la grille Bootstrap et des classes utilitaires
57m47s
 
Leçon 1Introduction
Leçon 2Le fichier grid
Leçon 3La grille responsive
Leçon 4Classes pour Flexbox
Leçon 5Classes pour la propriété display
Chapitre 2 : Projet : Réaliser une page complète responsive avec Bootstrap
42m25s
 
Leçon 1Bonus : Un PSD pour vos futurs projets
Leçon 2Le header
Leçon 3Le reste de la page
Leçon 4Conclusion

Avis des apprenants

Détail des avis
112
Apprenants
10
Commentaires
4,7/5
Note moyenne
5/5
7
4/5
3
3/5
0
2/5
0
1/5
0
Membre-3551-8872
Membre-3551-8872
Publié le 18/09/2021
Merci beaucoup Steven :)
Steven Sil
Steven Sil
Merci à vous ! :D
Bruno Roullier
Bruno Roullier
Publié le 04/11/2020
Je viens de me la revoir, et c'est toujours sympas pour les trous de mémoire. Vraiement bien expliqué cette formation. je la recommande !
Steven Sil
Steven Sil
Merci beaucoup Bruno !
Stéphane Leenart
Stéphane Leenart
Publié le 18/04/2020
Juste parfait. Bravo
Steven Sil
Steven Sil
Un grand merci ! :D

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

HTML 5, Bootstrap 4

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données