Le Responsive Design avec Flexbox et Bootstrap

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 :

• A la découverte du Responsive Design
• Comment fonctionne l’intégration CSS avec Flexbox ?
• Intégrez vos sites Web avec Bootstrap 4

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.