$ 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é 42 tutoriels et obtenu une note moyenne de 4,9/5 sur 2 862 tutoriels vendus. Voir les autres formations de Carl Brison

5,0
note moyenne

7
avis laissés
5 étoiles
7
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de cactusxxxl laissé le 25/02/2018
    Un vrai pédagogue qui ne s'écoute pas parler comme certains. Pas de mots ou de phrases inutiles, pas de circonlocutions fumeuses. Tout dans la simplicité et l'efficacité. Et surtout une authentique connaissance du sujet. Bien évidemment, je ne manquerai pas de m'intéresser aux autres formations de ce technicien sérieux. Merci.
    "Merci à vous ! Je suis ravi que ce tuto vous ai plu et qu'il vous apporte de nouvelles compétences."

  • 5
    avis de darkwolf74000 laissé le 22/02/2018
    Bonjour et Bravo pour ce tuto, très clair, hyper facile à suivre et à comprendre. Boortstrap a du souci à se faire avec flexbox, au moins pour la partie responsive.
    "Oui absolument ! L'avenir s'assombrit pour bootstrap. Merci pour votre commentaire ;-)"

  • 5
    avis de psyion laissé le 21/02/2018
    Bonjour, c'est une bonne découverte pour moi. Les explications sont claires, précises. Merci pour votre travail.
    "Cela me fait énormèment plaisir ;-) !"

  • 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 1104 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données