fr - Update / revamp translation after pr337 (#340)

* Update / revamp translation after pr337

Co-authored-by: tristantheb <tristantheb@users.noreply.github.com>

1 files changed, 31 insertions, 34 deletions

diff --git a/files/fr/web/css/tutorials/index.html b/files/fr/web/css/tutorials/index.html
index 638d8a2914..58b0c426b2 100644
--- a/files/fr/web/css/tutorials/index.html
+++ b/files/fr/web/css/tutorials/index.html
@@ -8,53 +8,50 @@ tags:
   - Tutorial
 translation_of: Web/CSS/Tutorials
 ---
-<p>Apprendre CSS peut sembler être une tâche impressionnante. Cependant pour vous aider nous avons écrit de nombreux <strong>tutoriels à propos de CSS</strong>. Certains d'entre eux sont à l'attention des non-initiés, tandis que d'autres présentent des fonctionnalités complexes qui peuvent être utiles aux utilisateurs expérimentés.</p>
+<p>Apprendre CSS peut sembler une tâche impressionnante. Cependant, pour vous aider, nous avons écrit de nombreux <strong>tutoriels à propos de CSS</strong>. Certains d'entre eux sont à l'attention des non-initiés, tandis que d'autres présentent des fonctionnalités complexes qui peuvent être utiles aux utilisateurs expérimentés.</p>
 
-<p>Cette page les listes tous, avec une courte description. <span id="result_box" lang="fr"><span class="hps">Ils sont regroupés</span> <span class="hps">par complexité,</span> <span class="hps">de sorte que vous</span> <span class="hps">puissiez</span> <span class="hps">choisir la plus adaptée</span> <span class="hps">à votre niveau</span><span>.</span></span></p>
+<p>Cette page liste l'ensemble des tutoriels, avec une courte description. Ils sont regroupés par complexité, de sorte que vous puissiez choisir le plus adapté à votre niveau.</p>
 
-<div class="note">
-<p><strong>Note de l'éditeur:</strong> Vous devriez penser à utiliser les tags "niveau de difficulté", sur les pages de tutoriel donc les listes basées sur la difficulté peuvent être construites automatiquement.</p>
-</div>
 
-<h2 id="Tutoriel_CSS_pour_Débutants">Tutoriel CSS pour Débutants</h2>
+<h2 id="Beginner-level_CSS_tutorials">Tutoriels pour les débutants</h2>
 
 <dl>
- <dt><a href="/fr/docs/CSS/Premiers_pas" title="/fr/docs/CSS/Premiers_pas">Débuter</a></dt>
- <dd>Ce guide est destiné aux non-initiés : vous n'avez jamais écrit une seule ligne de CSS ? — Cet article est pour vous ! Il explique les concepts fondamentaux du langage et vous guide via la rédaction de feuilles de style basiques.</dd>
- <dt><a href="/fr/docs/Web/CSS/Fonds_multiples" title="/fr/docs/Web/CSS/Fonds_multiples">Utiliser les arrière-plans multiples</a></dt>
- <dd>Les arrière-plans sont fondamentaux afin d'obtenir un beau design : CSS vous permet d'en définir plusieurs pour chaque boite. Ce tutoriel explique comment elles interagissent et comment les utiliser pour réaliser de jolis effets.</dd>
- <dt><a href="/en-US/docs/CSS/Scaling_background_images" title="/en-US/docs/CSS/Scaling_background_images">Mise à l'échelle des images d'arrière-plan (en anglais)</a></dt>
- <dd>CSS vous permet de redimensionner des images utilisées comme élément d'arrière-plan. Ce tutoriel décrit comment faire cela simplement.</dd>
- <dt><a href="/fr/docs/Web/CSS/Media_queries" title="/fr/docs/Web/CSS/Media_queries">Media queries</a></dt>
- <dd>La taille des écrans, ou la nature des appareils comme les écrans tactiles ou feuilles imprimées, varie grandement de nos jours. Les <em>Media queries</em> sont des briques fondamentales pour construire des sites Web avec un rendu de grande qualité sur n'importe quel appareil.</dd>
- <dt><a href="/fr/docs/Web/CSS/Comprendre_z-index" title="/fr/docs/Web/CSS/Comprendre_z-index">Comprendre le z-index</a></dt>
- <dd>Contrôler la superposition des boites est une <span id="result_box" lang="fr"><span class="hps">caractéristique fondamentale</span></span> pour les développeurs Web. Il ne s'agit pas de quelque chose de difficile cependant cela requiert une connaissance basique du CSS.</dd>
+ <dt><a href="/fr/docs/Learn/CSS/First_steps">Débuter en CSS</a></dt>
+ <dd>Ce guide est destiné aux non-initiés : vous n'avez jamais écrit une seule ligne de CSS ? Cet article est pour vous ! Il explique les concepts fondamentaux du langage et vous guide via la rédaction de feuilles de style basiques.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Utiliser plusieurs arrière-plans</a></dt>
+ <dd>Les arrière-plans sont fondamentaux afin d'obtenir une mise en forme appréciable. CSS vous permet d'en définir plusieurs pour chaque boîte. Ce tutoriel explique comment les arrière-plans interagissent et comment utiliser ces interactions pour réaliser des effets.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images">Mise à l'échelle des images d'arrière-plan</a></dt>
+ <dd>CSS vous permet de redimensionner des images utilisées comme élément d'arrière-plan. Ce tutoriel décrit comment faire.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Media_Queries"><i>Media queries</i> (requêtes de média)</a></dt>
+ <dd>La taille des écrans ou la nature des appareils varie grandement (cela va des écrans tactiles aux documents imprimés). Les <i>Media queries</i> sont des briques fondamentales pour construire des sites web avec un rendu de grande qualité sur n'importe quel appareil.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Comprendre le z-index</a></dt>
+ <dd>Cet indice vous permet de contrôler la superposition des boites qui sont affichées sur une page web. Vous verrez ici comment il est calculé et utilisé.</dd>
 </dl>
 
-<h2 id="Tutoriel_intermédiaire_en_CSS">Tutoriel intermédiaire en CSS</h2>
+<h2 id="Intermediate-level_CSS_tutorials">Tutoriels de niveau intermédiaire</h2>
 
-<p>Après la sortie de CSS2 (Niveau 1), les nouvelles fonctionnalités ont été ajoutées dans CSS. Certaines d'entre elles sont élégantes et autonomes. Elles sont faciles à utiliser par quiconque avec une bonne compréhension des concepts basique.</p>
+<p>Certaines fonctionnalités, parfois plus récemment apparues, sont plus avancées. Une fois les bases acquises, vous pourrez les utiliser distinctement si besoin.</p>
 
 <dl>
- <dt><a href="/fr/docs/Web/CSS/Compteurs_CSS" title="/fr/docs/Web/CSS/Compteurs_CSS">Compteur CSS</a></dt>
- <dd>Compter les éléments et pages est une tâche aisée en CSS. Apprenez à utiliser {{cssxref("counter-reset")}}, {{cssxref("counter-increment")}}, {{cssxref("counters", "counters()")}}, et {{cssxref("counter", "counter()")}}.</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Animations CSS</a></dt>
- <dd>Les animations CSS vous permettent de définir des configurations de style, comme les <em><a href="/fr/docs/Web/CSS/Animations_CSS" title="/fr/docs/Web/CSS/Animations_CSS">keyframes</a></em>, et de réaliser une transition entre elles pour définir une animation.</dd>
- <dt><a href="/en-US/docs/CSS/Tutorials/Using_CSS_transitions" title="/en-US/docs/CSS/Using_CSS_transitions">Transitions CSS</a></dt>
- <dd>Les transitions CSS vous permettent de définir une animation entre plusieurs styles et contrôlent la voie manière laquelle les transitions s'appliquent.</dd>
- <dt><a href="/fr/docs/Web/CSS/Utilisation_des_transformations_CSS">Transformations CSS</a></dt>
- <dd>Les transformations CSS vous permettent de changer la position d'éléments en modifiants leurs coordonnées spatiales : comme des translations, rotations et déformations en espaces 3D et 2D.</dd>
- <dt><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS" title="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Gradients CSS</a></dt>
- <dd>Les gradients CSS sont des images qui changent de façon homogène d'une couleur à une autre. Il y a différents types de gradients possibles en CSS : linéaire ou radial, répétable ou non. Ce tutoriel décrit comment les utiliser.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Compteurs CSS</a></dt>
+ <dd>Compter les éléments et pages est une tâche aisée en CSS. Apprenez à utiliser <a href="/fr/docs/Web/CSS/counter-reset"><code>counter-reset</code></a>, <a href="/fr/docs/Web/CSS/counter-increment"><code>counter-increment</code></a>, <a href="/fr/docs/Web/CSS/counters()"><code>counters()</code></a>, et <a href="/fr/docs/Web/CSS/counter()"><code>counter()</code></a>.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Animations CSS</a></dt>
+ <dd>Les animations CSS vous permettent de définir des configurations de style via des <i><a href="/fr/docs/Web/CSS/CSS_Animations">keyframes</a></i>, et de réaliser une transition entre elles pour définir une animation.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Transitions CSS</a></dt>
+ <dd>Les transitions CSS vous permettent de définir une animation entre plusieurs styles et contrôlent la manière dont elles s'appliquent.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Transformations CSS</a></dt>
+ <dd>Les transformations CSS vous permettent de changer la position d'éléments en modifiant leurs coordonnées spatiales. On peut ainsi réaliser des translations, rotations et déformations en espaces 3D et 2D.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Dégradés CSS</a></dt>
+ <dd>Les dégradés CSS forment des images via un dégradé entre plusieurs couleurs. Il existe différents types de dégradés CSS : linéaire ou radial, répétable ou non. Ce tutoriel décrit comment les utiliser.</dd>
 </dl>
 
-<h2 id="Tutoriels_avancés_en_CSS">Tutoriels avancés en CSS</h2>
+<h2 id="Advanced-level_CSS_tutorials">Tutoriels avancés</h2>
 
-<p>CSS3 possède de nouvelles fonctionnalités vous permettant de créer des mises en pages complexes. Même les plus simples de ces méthodes, peuvent être complexes pour un débutant.</p>
+<p>CSS possède différentes méthodes pour organiser la disposition du contenu dans un document.</p>
 
 <dl>
- <dt><a href="/fr/docs/Web/CSS/Colonnes_CSS3" title="/fr/docs/Web/CSS/Colonnes_CSS3">Mises en pages Multi-colonnes CSS</a></dt>
- <dd>CSS3 introduit une nouvelle mise en page vous autorisant à définir facilement des éléments sur plusieurs multiples colonnes. Cependant les textes sur plusieurs colonnes ne sont pas si communs sur des écrans. Pourtant cela s'avère très pratique lorsque l'on imprime des pages ou pour indexer.</dd>
- <dt><a href="/fr/docs/Web/Guide/CSS/Flexible_boxes" title="/fr/docs/Web/Guide/CSS/Flexible_boxes">Mises en pages flexibles de boites</a></dt>
- <dd>Cette nouvelle mise en page vous permet de donner de la flexibilité aux boites, permettant à celles-ci d'être redimensionnées de façon fluide. Il s'agit d'une façon puissante de décrire des interfaces complexes.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Mise en page avec les colonnes</a></dt>
+ <dd>Il est possible d'organiser une mise en page selon plusieurs colonnes. Si ce n'est pas une méthode visuelle fréquente pour les écrans, on la retrouve souvent sur les documents imprimés.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Mise en page avec les boîtes flexibles (<i>Flexbox</i>)</a></dt>
+ <dd>Cette mise en page permet de donner de la flexibilité aux boîtes, celles-ci pouvant alors être redimensionnées de façon fluide.</dd>
 </dl>