À ce stade, nous avons déjà examiné les principes fondamentaux de CSS, comment styler le texte et comment styliser et manipuler les boîtes dans lesquelles se trouve votre contenu. Maintenant, il est temps de regarder comment placer vos boîtes au bon endroit par rapport à la fenêtre, et les uns les autres.Nous avons couvert les prérequis nécessaires afin que nous puissions plonger profondément dans la mise en page CSS, en regardant les différents paramètres d'affichage, les méthodes de mise en page traditionnelles impliquant  les flottants et le positionnement, et les outils de mise en page modernes comme flexbox.

Prérequis

Avant de commencer ce module, vous devriez déjà :

  1. Avoir une familiarité de base avec HTML, comme indiqué dans le module Introduction au HTML.
  2.  Soyez à l'aise avec les fondamentaux CSS, comme discuté dans Introduction à CSS.
  3.  Comprendre comment styliser les boîtes.

Note: Si vous travaillez sur un ordinateur / une tablette / un autre périphérique sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) les exemples de code dans un programme de codage en ligne tel que JSBin, Thimble ou Codepen

Guides

Ces articles fourniront des instructions sur les outils et techniques de mise en page fondamentaux disponibles dans CSS.

Introduction à la mise en page CSS ( en attente de traduction )
Cet article récapitulera quelques-unes des fonctionnalités de mise en page CSS que nous avons déjà abordées dans les modules précédents - telles que différentes valeurs display - et présentera certains des concepts que nous couvrirons tout au long de ce module.
Flotants ( en attente de traduction )
À l'origine, pour les images flottantes à l'intérieur de blocs de texte, la propriété float est devenue l'un des outils les plus couramment utilisés pour créer plusieurs mises en page de colonnes sur des pages Web. Cet article explique tout.
Positionnement ( en attente de traduction )
Le positionnement vous permet d'extraire des éléments du flux de mise en page normal du document et de les faire se comporter différemment, par exemple en se mettant l'un sur l'autre ou en restant toujours au même endroit dans la fenêtre du navigateur. Cet article explique les différentes valeurs position et comment les utiliser.
Exemples pratiques de positionnement ( en attente de traduction )
Avec les bases du positionnement couvertes dans le dernier article, nous allons maintenant chercher à construire quelques exemples du monde réel, pour illustrer ce que vous pouvez faire avec le positionnement.
Flexbox ( en attente de traduction )
Une nouvelle technologie, mais avec un support maintenant largement répandu dans les navigateurs, Flexbox commence à être prêt pour une utilisation généralisée. Flexbox fournit des outils pour permettre la création rapide de mises en page complexes et flexibles, ainsi que des fonctionnalités qui se sont avérées historiquement difficiles avec CSS. Cet article explique tous les fondamentaux.
Grilles ( en attente de traduction )
Les systèmes de grille sont un autre moyen très utilisée dans les mises en page CSS, qui ont tendance à être implémentées en utilisant des flottants ou d'autres fonctionnalités de mise en page. Vous imaginez votre mise en forme comme un ensemble de colonnes (par exemple 4, 6 ou 12), puis adaptez vos colonnes de contenu à l'intérieur de ces colonnes imaginaires. Dans cet article, nous explorerons l'idée de base de la création d'un système de grille, utiliserons un système de grille prêt à l'emploi fourni par un framework de grille et terminerons par expérimenter les CSS Grids. Cela le Web beaucoup plus facile.

Évaluations

Les évaluations suivantes testeront votre capacité à mettre en page des pages Web avec CSS.

Création d'une mise en page multicolonne flexible (TBD)
 Cette évaluation teste votre capacité à créer une mise en page multicolonne standard, avec quelques fonctionnalités intéressantes.
Création d'un widget de contrôle fixe (TBD)
 Cette évaluation vous met au défi de comprendre le positionnement en vous demandant de créer un widget de contrôle de position fixe qui permet à l'utilisateur d'accéder aux commandes d'une application Web, quel que soit l'endroit où elles se trouvent.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : tonybengue
 Dernière mise à jour par : tonybengue,