Contrôle tous les éléments de ton site web grâce aux FLEXBOX by Thomas Giraud

Contrôle tous les éléments de ton site web grâce aux FLEXBOX

Il est temps d'éliminer les contraintes de disposition liées au CSS pour l'utiliser d'une manière efficiente et moderne !

Tu as peur de voir le rendu de ton site sur mobile ?

J'étais comme toi !

👉 Je disais tout le temps à mes collègues : "Ne fais pas attention au site sur mobile, je suis au courant. Je vais gérer ça à la fin !"

En vérité j'en avais marre

  • Marre d'ajouter 200 media queries pour que mon site soit adaptable ;
  • Marre d'ajouter une marge ou un padding à un endroit et de foutre en l'air toute la structure de mon site ;
  • Marre qu'après 1000 tests, quelqu'un vienne me dire : "Regarde il y a un problème sur tablette !" ;
  • Marre de coller des "bouts de scotch" sur l'intégralité de mes sites web.

Heureusement, j'ai rencontré FlexBox...

À qui s'adresse ce cours ?

  • Tu as quelques bases en HTML et CSS ?
  • Tu es développeur et tu veux devenir meilleur en développement Front-End et Web Design ?
  • Tu souhaites te tenir à jour sur les évolutions des standards sur le net ?
  • Tu es développeur Front-End ou intégrateur web et tu n'utilises pas FlexBox ?
Alors ce cours est fait pour toi !

Quels sont les Pré-requis ?

  • Savoir utiliser un éditeur de texte ;
  • Avoir des bases en HTML et CSS ;
  • Une tasse de café ☕️ 

... Tu auras accès à une formation HTML/CSS offerte au cas ou.

Une fois ce cours terminé, tu seras capable de :

🍺  Remplir (ou faire remplir) intelligemment l'espace vide sur ta page web ;
🍺  Écrire du code CSS de qualité ;
🍺  Créer une structure de site web adaptable à tout type d'écran et réutilisable ;
🍺  Aligner verticalement et horizontalement des éléments sans contraintes ;
🍺  Créer des designs modernes et adaptables ;
🍺  Ajouter de l'espace entre les éléments sans marge interne ou externe ;
🍺  Implémenter toute la structure d'un site web adaptable à 100% ;
🍺  Et bien plus encore !

Détail de chaque module :

Découvre pourquoi les FlexBox existent et comment elles fonctionnent
Introduction
5 min
C'est quoi FlexBox et pourquoi l'utiliser
7 min
Comment FlexBox est supporté par les navigateurs
4 min
Découvre le principe d'axes associé à FlexBox
6 min
Les propriétés de FlexBox liées aux conteneurs
Flex-Direction
6 min
Justify-Content
7 min
Align-Items
7 min
Flex-Wrap
3 min
Align-Content
4 min
Flex-Flow
3 min
Les propriétés de FlexBox liées aux éléments du conteneur
Align-Self
5 min
Order
3 min
Flex-Basis
2 min
Flex-Grow
4 min
Flex-Shrink
4 min
Flex
3 min
Exemple pratique - Construction d'un site web depuis 0 grâce à FlexBox
Structure du site : Placer son footer en bas de page par défaut
6 min
Créer un menu de navigation
9 min
Créer un footer
13 min
Section principale : Centrer un élément horizontalement et verticalement
9 min
Mettre en place des cartes responsive
8 min
Créer une galerie d'images
12 min
Créer une section texte + image alternatif
13 min
Ressources
slides-deck.pdf
361 ko
site-demo.zip
79,1 ko

🎁 Les bonus, les bonus !

  1. Accès au groupe privé d'entre-aide. Nous sommes là pour répondre à toutes tes questions ;
  2. Nous adaptons le cours en fonction de tes demandes ;
  3. Un module est consacré à la mise en pratique de toutes les notions. Nous construirons un site web fait avec Flexbox depuis 0 ;
  4. Tu auras accès aux slides (diaporama) de tout le cours ;
  5. Même si un module est orienté exclusivement sur la pratique, toutes les vidéos théoriques sont découpées en 2 parties : Théorie sur slide  |  Pratique sur page web ;
  6. Toutes les vidéos sont tournées dans la joie et la bonne humeur, chacun va à son rythme.
    On est entre nous ! 

Contrôle tous les éléments de ton site web grâce aux FLEXBOX


Prêt à faire passer tes compétences en Web Design au stade supérieur ?

⬇️