$ 24.00

Tuto Flexbox : mise en page flexible en CSS avec CSS, HTML

$ 24.00

  • Une formation vidéo de 2h21m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Bundle : Tout sur Flexbox CSS
Retrouvez cette formation dans le bundle :

Bundle : Tout sur Flexbox CSS

-31% de réduction

voir les détails du bundle


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



Formateur : Carl Brison

Carl Brison a publié 135 tutoriels et obtenu une note moyenne de 4,9/5 sur 8 161 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

14
avis laissés
5 étoiles
14
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de kiafaaa laissé le 20/12/2019
    Cours utile ! Le cours est bien expliqué! Ce cours est utile ! Formateur professionnelle ! Comme tous ses cours ! Grande transparence !
    "Merci beaucoup pour votre commentaire ;-)"

  • 5
    avis de shrek74 laissé le 11/12/2019
    Merci Carl pour cette formation sur Flexbox. Dans ma prise de note sur le parcours Pro concernant le display:flex 1ère vidéo à 5:40 tu dis que leurs types block ont complètement disparus que l'on est plus sur une notion de block ou inline mais sur une notion de flex. Alors quand dans le QCM dans la question : un conteneur avec la propriété display: flex est-il de type block ou inline? Pour tout te dire quelle est la bonne réponse? Merci d'avance pour ta réponse.
    "Hello Merci beaucoup pour ta question, elle est très pertinente et elle prouve que tu es très assidu ! Je vais tenter d'être clair dans ma réponse. Quand je dis que block et inline n'existent plus au profit de flex, je parle des contenus ( le comportement des items). Quand je parle du comportement block, je parle des conteneurs ensembles les uns vis à vis des autres et qui ont chacun un display flex. Voilà, j'espère que c'est plus clair pour toi ;-)"

  • 5
    avis de destmich laissé le 09/08/2019
    Bonne méthode pour mettre en forme et plus simple et plus léger que Bootstrap. Je connaissais un peu Flexbox par d'autres tuto de Carl que j'ai suivi. Encore merci à toi Carl pour cette super formation ;-) En ce qui me concerne pour l'avenir j'utiliserais plutôt cette méthode pour mes mise en forme.
    "Merci beaucoup ;-) Regarde aussi du côté de Grid, si ce n'est déjà fait. Car Grid et Flexbox ensemble, tu vas te régaler ;-) A bientôt et encore merci pour ta confiance."

  • 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
accédez à plus de 1147 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données