-31% de réduction
Jamais le CSS n'aura été aussi facile pour positionner des éléments !
Flexbox est une technique très simple du CSS pour positionner tous les éléments d'un site Internet, exactement comme on le souhaite.
Un peu d'histoire
Je réalise des sites Internet depuis le début des années 2000. À cette époque, nous nous servions des tableaux HTML pour gérer la mise en page de nos sites !
Puis, de nouveaux supports pour naviguer sur le web sont apparus sur le marché : les smartphones et les tablettes. Il a alors fallu penser à un nouveau mode de mise en page afin que les sites Internet puissent s'adapter à ces nouveaux supports. De là, la mise en page par tableaux a été abandonnée au profit d'une mise en page basée sur le langage CSS.
Cependant, des propriétés CSS telles que FLOAT ne sont pas adaptées à la mise en page d'un site Internet. Et parfois, il peut même être extrêmement laborieux de mettre en page un site internet à l'aide des propriétés classiques du CSS. C'est d'ailleurs pour cela, que des frameworks tels que Bootstrap ont vu le jour ; pour aider les concepteurs de sites à réaliser des mises en pages plus facilement. Oui mais voilà, Bootstrap n'est pas une technique officielle et le CCS ne peut pas se faire voler la vedette par un framework ! D'où la naissance de Flexbox.
Au programme de cette formation Flexbox en vidéo
Dans ce tuto très complet, nous allons apprendre toutes les propriétés liées au Flexbox ainsi que toutes leurs valeurs.
Au dernier chapitre nous réaliserons le squelette d'un site internet totalement responsive en utilisant la technique des flexbox. Vous pourrez ainsi vous entrainer avec un atelier pratique. Un QCM complet est également fourni pour vérifier vos acquis. Je reste disponible dans le salon d'entraide pour répondre à vos questions ou bien si vous êtes bloqué dans le cours.
A la fin de ce tuto, je suis certain que vous ne pourrez plus vous passer de Flexbox !
Je préconise quelques petites connaissances en HTML ainsi qu'en CSS pour pouvoir bien apprécier ce cours ! Je mets à votre disposition une formation complète sur l'apprentissage du HTML5 & CSS3.
Table des matières de cette formation CSS, HTML (durée : 2h21m)
-
Les propriétés et leurs valeurs
- Une nouvelle valeur pour la propriété display 00:08:35
- Différence entre un flex et un inline-flex 00:04:41
- Définir la direction des contenus 00:06:30
- Le retour à la ligne 00:05:36
- L'axe principal et l'axe secondaire 00:04:54
- Alignement sur l'axe principal 00:10:44
- Faisons un petit récapitulatif de ce que nous savons 00:02:35
- Alignement sur l'axe secondaire 1/2 00:05:01
- Alignement sur l'axe secondaire 2/2 00:04:31
- Alignement d'un contenu particulier 00:06:12
- Alignement de plusieurs lignes ou colonnes 00:06:21
- Gérer les ordres d'affichage 00:03:23
- Augmenter la largeur d'un contenu 00:03:44
- Diminuer ou définir la largeur d'un contenu 00:04:12
-
Consolidation des nouveaux acquis
- Intro 00:01:35
- Q.R. 1 à 4 00:06:28
- Q.R. 5 à 8 00:05:15
- Q.R. 9 à 12 00:05:26
- Q.R. 13 à 16 00:05:14
- Q.R. 17 à 20 00:04:44
- Q.R. 21 à 24 00:07:37
- Conclusion 00:01:11
-
Création d'une maquette d'un site responsive
- Présentation du travail 00:00:55
- 1ère partie 00:13:22
- 2ème partie 00:10:53
- Conclusion 00:01:39
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Excellent cours sur le flexbox, merci.
-
Petit rafraichissement extra, avant de m'attaquer à plus “lourd”.
-
Merci pour ce cours très complet avec des explications claires. J'ai pu améliorer ma compréhension de Flexbox comme quoi avec des mots simples et explications simples. C'est faisable. Merci beaucoup
-
Avec quelles versions de logiciels ce tuto est-il compatible ?CSS 3, HTML 5
-
Que contient le fichier source ?Le code complet de l'exercice du chapitre 3.
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés