UPDATE: Tags, Title id, Links, Wrong sentences for CSS Layout page - Issue #447 (#478)

* UPDATE: Tags, Title id, Links, Wrong sentences

* Review - LA CSS Layout - added up-to-date english paragraphs + various rewordings

Co-authored-by: julieng <julien.gattelier@gmail.com>

1 files changed, 52 insertions, 38 deletions

diff --git a/files/fr/learn/css/css_layout/index.html b/files/fr/learn/css/css_layout/index.html
index 0c88cf7e24..fac781b37b 100644
--- a/files/fr/learn/css/css_layout/index.html
+++ b/files/fr/learn/css/css_layout/index.html
@@ -1,73 +1,87 @@
 ---
-title: La mise en page avec le CSS
+title: La mise en page avec CSS
 slug: Learn/CSS/CSS_layout
 tags:
+  - Beginner
   - CSS
-  - Débutant
   - Floating
+  - Grids
   - Guide
   - Landing
   - Layout
   - Learn
   - Module
-  - Positionnement
-  - colonne multiple
+  - Multiple column
+  - Positioning
+  - alignment
   - flexbox
   - float
-  - grid
+  - table
 translation_of: Learn/CSS/CSS_layout
 original_slug: Apprendre/CSS/CSS_layout
 ---
 <div>{{LearnSidebar}}</div>
 
-<p class="summary">À ce stade, les principes fondamentaux du CSS ont été vus, comment composer 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 dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec le CSS, en regardant les différents paramètres d'affichage, les outils modernes tels « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.</p>
+<p class="summary">À ce stade, les principes fondamentaux du CSS ont été vus : comment composer le texte et comment mettre en forme et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires ont été examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec CSS, en regardant les différents paramètres d'affichage, les outils modernes tels que « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.</p>
 
-<h2 id="Prérequis">Prérequis</h2>
+<div class="callout">
+  <h4 id="Looking_to_become_a_front-end_web_developer">Vous cherchez à devenir développeuse ou développeur web front-end&nbsp;?</h4>
+  <p>Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p>
+  <p><a class="button primary" href="/fr/docs/Learn/Front-end_web_developer">Commencer</a>
+  </p>
+</div>
+
+<h2 id="prerequisites">Prérequis</h2>
 
 <p>Avant de commencer ce module, vous devriez déjà :</p>
 
 <ol>
- <li>connaître les bases du HTML, telles qu'exposées dans le module <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML.</a></li>
- <li> être à l'aise avec les fondamentaux du CSS, telles qu'exposés dans <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction à CSS</a>.</li>
- <li> savoir <a href="https://developer.mozilla.org/fr/Apprendre/CSS/styliser_boites">styliser les boîtes.</a></li>
+  <li>Connaître les bases du HTML, telles qu'exposées dans le module <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML.</a></li>
+  <li>Être à l'aise avec les fondamentaux du CSS, telles qu'exposés dans <a href="/fr/docs/Learn/CSS/First_steps">Introduction à CSS</a>.</li>
+  <li>Savoir <a href="/fr/docs/Learn/CSS/Building_blocks">mettre en forme les boîtes.</a></li>
 </ol>
 
-<div class="note">
-<p><strong>Note</strong> : Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans un programme de codage en ligne tel que <a href="http://jsbin.com/">JSBin ou</a> <a href="https://codepen.io/#">Thimble</a></p>
+<div class="notecard note">
+  <p><b>Note :</b></p>
+  <p>Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans des sites de développement en ligne tels que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://glitch.com/">Glitch</a></p>
 </div>
 
-<h2 id="Guides">Guides</h2>
+<h2 id="guides">Guides</h2>
 
 <p>Ces articles fourniront des instructions sur les outils et techniques de mise en page fondamentaux disponibles dans CSS. À la fin des leçons, un exercice vous permettra de vérifier la compréhension des méthodes de mise en page en créant votre propre page web.</p>
 
 <dl>
- <dt><a href="/fr/docs/Apprendre/CSS/CSS_layout/Introduction">Introduction à la mise en page CSS</a></dt>
- <dd>Cet article récapitule 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 les diverses valeurs de {{cssxref ("display")}} — et présente certains des concepts que nous couvrirons dans de ce module.</dd>
- <dt><a href="/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow">Cours normal</a></dt>
- <dd>Les éléments se placent d'eux‑même sur les pages web selon un <em>cours normal</em> — sauf à ce nous fassions quelque chose pour changer cela. Cet article explique les fondamentaux du cours normal pour permettre de comprendre comment le modifier.</dd>
- <dt><a href="/fr/docs/Apprendre/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
- <dd><a href="/fr/docs/Glossaire/Flexbox">Flexbox</a> est une méthode de mise en page unidimensionnelle pour disposer les éléments en lignes ou en colonnes. Les éléments s'adaptent pour remplir de l'espace supplémentaire et se rétractent pour s'insérer dans des espaces plus petits. Cet article explique tous les fondamentaux.</dd>
- <dt><a href="/fr/docs/Apprendre/CSS/CSS_layout/Grids">Grilles</a></dt>
- <dd>CSS Grid Layout est un système de mise en page bidimensionnelle pour le web. Il vous permet de disposer le contenu en lignes et en colonnes, et possède de nombreuses fonctionnalités qui simplifient la construction de mises en page complexes. Cet article vous donnera tout ce que vous devez savoir pour commencer avec la mise en page.</dd>
- <dt><a href="/fr/docs/Apprendre/CSS/CSS_layout/Floats">Flotteurs</a></dt>
- <dd>À l'origine, pour les images flottantes à l'intérieur de blocs de texte, la propriété {{cssxref ("float")}} est devenue l'un des outils les plus couramment utilisés pour créer des mises en page sur plusieurs colonnes sur des pages Web. Avec l'avènement de Flexbox et de Grid, il est maintenant revenu à son objectif initial, comme l'explique cet article.</dd>
- <dt><a href="/fr/docs/Apprendre/CSS/CSS_layout/Positioning">Positionnement</a></dt>
- <dd>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 indique les différentes valeurs pour {{cssxref ("position")}} et comment les utiliser.</dd>
- <dt><a href="/fr/docs/Apprendre/CSS/CSS_layout/Multiple-column_Layout">Disposition sur plusieurs colonnes</a></dt>
- <dd>L'indication d'une disposition sur plusieurs colonnes vous permet de placer le contenu en colonnes, comme vous pouvez le voir sur un journal. Cet article explique comme utiliser cette fonctionnalité.</dd>
- <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page traditionnelles</a></dt>
- <dd>Les systèmes de grilles sont une fonctionnalité très courante pour les mises en page avec les CSS. Avant la mise en œuvre de « CSS Grid Layout », celle‑ci s'opérait avec des flotteurs ou autres dispositions. Imaginez la mise en page comme un ensemble de colonnes (par ex. 4, 6 ou 12), puis disposez les colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous exposerons comment ces méthodes plus anciennes fonctionnent, afin que vous compreniez comment elles étaient utilisées si vous travaillez sur un projet ancien.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Prise en charge des navigateurs plus anciens</a></dt>
- <dd>
- <p>Dans ce module, nous vous recommandons d'utiliser Flexbox et Grid comme principales méthodes de mise en page pour votre design. Cependant, il y aura des visiteurs de votre site utilisant des navigateurs plus anciens ou des navigateurs ne prenant pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le web — au fur et à mesure du développement de nouvelles fonctionnalités, les priorités données varieront. Cet article explique comment utiliser les techniques modernes du web sans exclure les utilisateurs des anciennes.</p>
- </dd>
- <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Compréhension des fondamentaux de la mise en page</a></dt>
- <dd>Une évaluation pour tester vos connaissances des différentes méthodes de mise en page Web.</dd>
+  <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction à la mise en page en CSS</a></dt>
+  <dd>Cet article récapitule 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 les diverses valeurs de <a href="/fr/docs/Web/CSS/display"><code>display</code></a> — et présente certains des concepts que nous couvrirons dans de ce module.</dd>
+  <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Flux normal des éléments</a></dt>
+  <dd>Les éléments se placent d'eux‑même sur les pages web selon un <em>flux normal</em> sauf à ce que nous modifions la disposition avec CSS. Cet article explique les fondamentaux du flux normal pour permettre de comprendre comment le modifier.</dd>
+  <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
+  <dd><a href="/fr/docs/Glossary/Flexbox">Flexbox</a> est une méthode de mise en page unidimensionnelle pour disposer les éléments en lignes ou en colonnes. Les éléments s'adaptent pour remplir de l'espace supplémentaire et se rétractent pour s'insérer dans des espaces plus petits. Cet article explique les bases de cet outil CSS.</dd>
+  <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grilles</a></dt>
+  <dd>Les grilles CSS permettent de composer un document avec une mise en page bidimensionnelle. Elles permettent de disposer le contenu en lignes et en colonnes, et possèdent de nombreuses fonctionnalités qui simplifient la construction de mises en page complexes. Cet article vous fournira l'ensemble des informations pour commencer avec la mise en page via les grilles CSS.</dd>
+  <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Le flottement</a></dt>
+  <dd>À l'origine destinée aux images flottantes à l'intérieur de blocs de texte, la propriété <a href="/fr/docs/Web/CSS/float"><code>float</code></a> fut pendant un moment l'un des outils les plus utilisés pour créer des mises en page sur plusieurs colonnes sur des pages web. Avec l'avènement de flexbox et des grilles, cette propriété retrouve son usage initial. Nous verrons ce qu'il en est dans cet article.</dd>
+  <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Le positionnement</a></dt>
+  <dd>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 les positionnant toujours au même endroit dans la fenêtre du navigateur. Cet article indique les différentes valeurs pour la propriété CSS <a href="/fr/docs/Web/CSS/position"><code>position</code></a> et comment les utiliser.</dd>
+  <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Disposition en colonnes</a></dt>
+  <dd>Ce type de disposition permet d'organiser le contenu en colonnes, comme dans un journal papier. Cet article explique comment utiliser cette fonctionnalité.</dd>
+  <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design"><i>Responsive design</i></a></dt>
+ <dd>Avec l'apparition d'écrans de tailles diverses pour naviguer sur le Web, le concept de « <i>responsive design</i> » (ou conception de sites web réactifs en français) est apparu. Il s'agit d'un ensemble de pratiques qui permettent d'adapter la disposition et l'apparence du contenu web pour s'afficher au mieux sur les différents écrans (quelle que soit leur largeur ou leur résolution par exemple). Cette méthode a changé la façon de concevoir des sites et applications web pour les différents appareils. Dans cet article, nous verrons les techniques principales associées et ce qu'il faut connaître pour maîtriser cette méthode.</dd>
+ <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Guide pour débuter avec les <i>media queries</i></a></dt>
+ <dd>Les <i>media queries</i> (ou requêtes média en français) permettent d'appliquer des règles CSS en fonction de conditions sur l'environnement ou l'appareil. On peut ainsi choisir de déclencher une règle lorsque la zone d'affichage est plus large que 480 pixels. Les requêtes média sont une brique fondamentale pour la conception de sites web réactifs car elles permettent de créer différentes dispositions en fonction de la taille de la zone d'affichage. Elles permettent également de détecter d'autres notions relatives à l'environnement de navigation comme l'utilisation d'un écran tactile ou d'une souris. Dans cet article, nous verrons la syntaxe utilisée pour les <i>media queries</i> puis appliquerons cela à un exemple pour le rendre réactif.</dd>
+  <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page historiques</a></dt>
+  <dd>Les systèmes de grilles sont une fonctionnalité courramment utilisée pour les mises en page avec CSS. Avant l'implémentation des grilles CSS, il fallait utiliser le flottement ou d'autres techniques de disposition. Dans cet article, nous exposerons comment ces méthodes plus anciennes fonctionnent afin que vous compreniez comment elles étaient utilisées si vous travaillez sur un projet historique.</dd>
+  <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Prise en charge des anciens navigateurs</a></dt>
+  <dd>
+  <p>Dans ce module, nous vous recommandons d'utiliser flexbox et les grilles CSS comme méthodes de mise en page pour vos pages et applications. Cependant, il y aura des visiteurs de votre site utilisant des navigateurs plus anciens ou des navigateurs ne prenant pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web — au fur et à mesure du développement de nouvelles fonctionnalités, les implémentations des navigateurs pourront varier. Cet article explique comment utiliser les techniques modernes du Web sans exclure les personnes utilisant des navigateurs plus anciens.</p>
+  </dd>
+  <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Compréhension des fondamentaux de la mise en page</a></dt>
+  <dd>Une évaluation pour tester vos connaissances des différentes méthodes de mise en page web.</dd>
 </dl>
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+<h2 id="see_also">Voir aussi</h2>
 
 <dl>
- <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemples pratiques de positionnement</a></dt>
- <dd> Cet article montre comment construire quelques exemples réalistes pour illustrer les possibilités du positionnement.</dd>
+  <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemples pratiques de positionnement</a></dt>
+  <dd>Cet article montre comment construire quelques exemples réalistes pour illustrer les possibilités du positionnement.</dd>
 </dl>