Development
Web Development
CSS Flexbox
Flexbox CSS - Le guide complet par la pratique
4.6 (142 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
657 students enrolled

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 !
Bestseller
4.6 (142 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
657 students enrolled
Created by Axel Paris Adobe XD | UI/UX design | Web Design | PHP
Last updated 5/2020
French
Preview this course
Flexbox CSS - Le guide complet par la pratique
Current price: $104.99 Original price: $149.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 3 hours on-demand video
  • 3 articles
  • 7 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Utiliser le module Flexbox Layout
  • Créer des sites Responsive
  • Aligner horizontalement & verticalement
  • Ecrire du CSS plus efficace
  • + 5 projets pour s’entraîner
Course content
Expand all 32 lectures 02:49:17
+ – Flexbox : Les bases
4 lectures 11:39
Les navigateurs supportent Flexbox ?
01:59
Avant-propos : La terminologie
Preview 01:49
Comment utiliser Flexbox ?
05:01
Quizz
3 questions
Installer votre environnement
02:50
+ – Tout comprendre du Container
6 lectures 29:47
flex-direction : Axe & sens de distribution des items
Preview 05:25
Quizz : flex-direction
2 questions
display : flex ou inline-flex
03:15
justify-content : Aligner les items sur l'axe principal (main axis)
06:33
Quizz : justify-content
2 questions
flex-wrap : Forcer ou non l'alignement horizontal de tous nos items
Preview 04:52
Quizz : flex-wrap
2 questions
align-items : Aligner les items verticalement
07:20
Quizz : align-items
2 questions
flex-flow : Combiner la direction et le wrap
02:22
Quizz: flex-flow
2 questions
+ – Tout comprendre des Items
6 lectures 39:01
order : Changer l'ordre d'apparition de chaque item
Preview 03:06
Quizz : order
2 questions
flex-grow : Grossir nos items avec de la proportionnalité
03:11
Quizz : flex-grow
2 questions
flex-basis : Donner une taille initiale à nos items
15:37
Quizz : flex-basis
1 question
flex-shrink : Diminuer la taille de nos items avec de la proportionnalité
10:59
Quizz : flex-shrink
1 question
flex : Combiner les propriétés flex-grow, flex-shrink et flex-basis
03:42
Quizz : flex
2 questions
align-self : Définir l'alignement précis d'un item
02:26
Quizz : align-self
1 question
+ – Aller plus loin
3 lectures 16:08
Centrer avec Flexbox
03:03
Les media queries
07:09
Terminologie avancée
05:56
+ – Flexbox par la pratique !
5 lectures 01:00:18
Projet 1 : menu reponsive
07:21
Projet 2 : Pagination
07:52
Projet 3 - Layout de site web
11:44
Projet 4 - Sticky Footer
07:41
Projet 5 : Grille responsive
25:40
+ – Bonus
5 lectures 04:07
Ressource : Un jeu pour apprendre Flexbox !
01:53
Entrainez-vous à Flexbox !
00:09
Cheatsheet PDF (document récapitulatif)
00:13
Mes autres formations
00:10
Le mot de la fin…
01:42
Requirements
  • Connaitre les bases de HTML & CSS
  • Avoir un éditeur de texte
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 !

Who this course is for:
  • Développeur / intégrateur web qui cherche à améliorer la qualité de son code
  • Designer qui souhaite gagner en efficacité et en productivité
  • Quiconque voulant maîtriser le module Flexbox en CSS3