Flexbox CSS - Le guide complet par la pratique

Apprenez à utiliser le module Flexbox Layout en CSS3 pour créer des sites web responsive plus simplement !

4.40 (332 reviews)
Udemy
platform
Français
language
Web Development
category
1,298
students
3 hours
content
Jul 2022
last update
$59.99
regular price

What you will learn

Utiliser le module Flexbox Layout

Créer des sites Responsive

Aligner horizontalement & verticalement

Ecrire du CSS plus efficacement

+ 5 projets pour s’entraîner

Description

A la fin de cours vous serez capable de...

  • Aligner vos éléments verticalement

  • Créer une galerie / grille moderne

  • Répartir correctement l'espacement

  • Rendre tous vos sites responsives

  • et bien plus !

 

Vous aurez accès à :

  • Une F.A.Q où je répondrai à tout(es) vos questions / problèmes

  • 5 projets (challenges) où vous serez mis à l'épreuve pour appliquer vos nouvelles connaissances (+ la correction pour chaque projet)


Dans ce cours, nous verrons le module Flexbox dans son intégralité :

Comprendre toutes propriétés du Container :

  1. flex-direction

  2. justify-content

  3. align-items

  4. flex-wrap

  5. align-content

  6. flex-flow

Puis toutes les propriétés des items :

  1. order

  2. flex-grow

  3. flex-shrink

  4. flex-basis

  5. flex

  6. align-self

Nous irons même plus loin avec les media queries qui nous permettrons de rendre nos sites responsives (adapté sur ordinateur, tablette et smartphone)

A la fin de ce cours, vous serez capable d'écrire du code CSS plus propre et plus professionnel.


BONUS : Vous aurez accès à un PDF récapitulatif avec des schémas simples et clairs !

Content

Introduction

Présentation du cours
C’est quoi Flexbox ?
Comment on faisait avant ?

Flexbox : Les bases

Les navigateurs supportent Flexbox ?
Avant-propos : La terminologie
Comment utiliser Flexbox ?
Quizz
Installer votre environnement

Tout comprendre du Container

flex-direction : Axe & sens de distribution des items
Quizz : flex-direction
display : flex ou inline-flex
justify-content : Aligner les items sur l'axe principal (main axis)
Quizz : justify-content
flex-wrap : Forcer ou non l'alignement horizontal de tous nos items
Quizz : flex-wrap
align-items : Aligner les items verticalement
Quizz : align-items
flex-flow : Combiner la direction et le wrap
Quizz: flex-flow

Tout comprendre des Items

order : Changer l'ordre d'apparition de chaque item
Quizz : order
flex-grow : Grossir nos items avec de la proportionnalité
Quizz : flex-grow
flex-basis : Donner une taille initiale à nos items
Quizz : flex-basis
flex-shrink : Diminuer la taille de nos items avec de la proportionnalité
Quizz : flex-shrink
flex : Combiner les propriétés flex-grow, flex-shrink et flex-basis
Quizz : flex
align-self : Définir l'alignement précis d'un item
Quizz : align-self

Aller plus loin

Centrer avec Flexbox
Les media queries
Terminologie avancée

Flexbox par la pratique !

Projet 1 : menu reponsive
Projet 2 : Pagination
Projet 3 - Layout de site web
Projet 4 - Sticky Footer
Projet 5 : Grille responsive

Bonus

Ressource : Un jeu pour apprendre Flexbox !
Entrainez-vous à Flexbox !
Cheatsheet PDF (document récapitulatif)
Mes autres formations
Le mot de la fin…

Screenshots

Flexbox CSS - Le guide complet par la pratique - Screenshot_01Flexbox CSS - Le guide complet par la pratique - Screenshot_02Flexbox CSS - Le guide complet par la pratique - Screenshot_03Flexbox CSS - Le guide complet par la pratique - Screenshot_04

Reviews

Lesieur
July 14, 2023
c'était un bon cours. Il faudrait néanmoins parler de la propriété "gap" et de "align-content". Pour ma part la différence entre align-content et align-items n'est pas clair...
Bruno
May 23, 2023
les explications sont dans l'ensembles assez clair. Par moment quelques notions pourraient être mieux expliqués. La formation reste de bonne qualité tout de même un grand merci à toi.
Le
February 13, 2023
Très bon cours, juste il faudrait ajouter le css pour centrer le texte dans les divs dans la section "Align Items" pour pouvoir pratiquer le align-items : baseline comme vous faites.
Demba
January 11, 2023
Merci pour ce cours très instructif et accessible j'ai pu mieux comprendre flexbox en un rien de temps!
Marechal
September 9, 2022
La partie sur les flex-shrink, grow et basis demandent de l'exercice pour les assimiler en cas concret !!!!
Michaël
August 21, 2021
J'ai attendu presque la fin du cours pour donner mon avis. Très sincèrement, je ne peux que féliciter le formateur pour la clarté et la maîtrise de son cours. En quelques heures, on a fait le tour de la technologie CSS Flexbox et par-dessus le marché, on en comprend tout l'intérêt dans la construction d'un site Internet responsive moderne. Cela va m'aider pour mes futurs projets bien que je ne sois pas au départ un développeur Web. Je recommande fortement ce tutoriel! Encore une fois, toutes mes félicitations au formateur pour la qualité du cours.
Claudia
January 25, 2021
Les explications du formateur étaient très claires et bien illustrées. Formation parfaitement adaptée à mes attentes, j'ai beaucoup appris. A recommander.
Alain
December 23, 2020
Je reçois régulièrement des annonces de ce formateur mais il ne répond JAMAIS aux messages des étudiants est-ce normal pour moi NON je mets 1 étoile dommage qu'il n'y a aucune possibilité de mettre 0/5. Je comprend d'ailleurs pas que UDEMY accepte ça si on fait une formation c'est justement dans le but d'avoir aussi une interactivité avec le formateur. Il est vrai qu'il n'a pas toujours le temps mais 10 jours sans réponse et à cela on reçois de lui des promotions etc... on a le temps pour ça ;)
Thierry
December 11, 2020
Très bonne présentation du sujet, le cours est très clair, les exercices proposés très intéressants, les liens dans la partie bonus permettent de pratiquer de façon ludique, cette formation est très utile.
Samuel
November 1, 2020
Cette formation sur flex-box ? Un must have en Français ! Les explications sont claires et détaillées. J'ai bien progressé sur le sujet grâce à ce cours. Je suis vraiment ravis !
Nacer
August 14, 2020
Cours CSS très complet et à jour des sujets débutants aux sujets avancés. Idéal pour créer une base CSS solide et apprendre comment fonctionne réellement CSS! Après avoir suivi ce cours, je me sens en confiance et à l'aise avec CSS. Max et Manuel sont des professeurs extraordinaires. Fortement recommandé de suivre ce cours pour amener vos connaissances CSS à un niveau différent.
Makrerougrass
July 11, 2020
Très bien expliqué, même si la partie illustration sur paint (cours sur la grille) m'a un peu embrouillé, mais cela n’enlève en rien a la qualité des cours, le formateur est très pédagogue, je le conseille vraiment.
Martial
May 28, 2020
Cours complet sur flexbox, très bien expliqué avec en prime des liens vers des sites pour s'entrainer ou pour se rappeler les différentes propriétés de flexbox.
Yannick
May 26, 2020
Excellent cours sur flexbox. Agrémenté de quelques astuces et conseils dans l'écriture css. J'y vois déjà beaucoup plus clair, merci Axel !
Jonathan
March 30, 2020
Bonne formation. Juste un petit bémol sur la dernière partie concernant " Flex-basis" Il faut je pense, refaire 2 ou 3 fois la formation pour bien intégrer tout ça, même si je pense que nous pouvons nous passer du flex-basis.

Charts

Price

Flexbox CSS - Le guide complet par la pratique - Price chart

Rating

Flexbox CSS - Le guide complet par la pratique - Ratings chart

Enrollment distribution

Flexbox CSS - Le guide complet par la pratique - Distribution chart

Related Topics

1906804
udemy ID
9/11/2018
course created date
6/30/2019
course indexed date
Bot
course submited by