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
Flexbox : mise en page flexible en CSS

ajouter ce cours aux favoris retirer ce cours des favoris

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é 293 tutoriels et obtenu une note moyenne de 4,9/5 sur 18 284 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

26
avis laissés
5 étoiles
26
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0

  • 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
Parcours Developpeur Front End
accédez à plus de 1402 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données