fixes fr #1440 (#1448)

* fixes #1440 for fr * UPDT: Update Backgrounds_and_borders * UPDT: Update The_web_and_web_standards * UPDT: Update First_steps/Arrays * UPDT: Update First_steps/Math * UPDT: Update Silly_story_generator * UPDT: Update Django/development_environment * UPDT: Update Client-side_JavaScript_frameworks * UPDT: Update Command_line * UPDT: Update API/tabs * RMV: Removing tags * UPDT: Cleanup html of Add-ons/WebExtensions * UPDT: Fix flaws on WebExtensions/Native_messaging * FIX: Fix flaws on Accessibility_inspector/Simulation * UPDT: Html cleanup on Color_contrast * UPDT: Mega html cleanup for Document_Object_Model/Introduction * FIX: Fix flaws for API/Element * UPDT: Update BCD * FIX: Wrong link lang * UPDT: Fix flaws/links * FIX: Img flaws and link lang * FIX: links error and html * UPDT: Links and cleanup html * FIX: link lang * FIX: link lang * FIX: broken example * FIX: fix broken example and html Co-authored-by: tristantheb <tristantheb@users.noreply.github.com>
author: SphinxKnight <SphinxKnight@users.noreply.github.com> 2021-07-14 10:39:25 +0200
committer: GitHub <noreply@github.com> 2021-07-14 10:39:25 +0200
commit: 110a7a1592789759f0f427f40856899ea2c3cfd7 (patch)
tree: 1b4854c4a2f6bbdb4cf716a0bb7ddb108a7b4751 /files/fr/learn
parent: f4473fd7bab0912ce8a39d8523079a7cbdbdf68e (diff)
download: translated-content-110a7a1592789759f0f427f40856899ea2c3cfd7.tar.gz
translated-content-110a7a1592789759f0f427f40856899ea2c3cfd7.tar.bz2
translated-content-110a7a1592789759f0f427f40856899ea2c3cfd7.zip
8 files changed, 448 insertions, 462 deletions
diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html
index 2fedb26439..27b6617080 100644
--- a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html
+++ b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html
@@ -12,7 +12,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
  <tbody>
   <tr>
    <th scope="row">Prérequis:</th>
-   <td>Compétences informatique basiques , <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">logicels de base installés</a>, connaissance simple en <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. )</td>
+   <td>Compétences informatique basiques , <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logicels de base installés</a>, connaissance simple en <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. )</td>
   </tr>
   <tr>
    <th scope="row">Objectif:</th>
@@ -21,25 +21,24 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
  </tbody>
 </table>
 
-<h2 id="Mettre_en_forme_larrière-plan_avec_CSS">Mettre en forme l'arrière-plan avec CSS</h2>
+<h2 id="Mettre_en_forme_larrière-plan_avec_CSS">Mettre en forme l'arrière-plan avec CSS</h2>
 
-<p>La propriété CSS {{cssxref("background")}} est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété <code>background</code> difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.</p>
+<p>La propriété CSS {{cssxref("background")}} est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété <code>background</code> difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">.box {
   background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
   url(big-star.png) center no-repeat, rebeccapurple;
-} </code>
-</pre>
+}</pre>
 
-<p>Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.</p>
+<p>Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.</p>
 
 <h3 id="Couleur_de_fond">Couleur de fond</h3>
 
-<p>La propriété {{cssxref("background-color")}} définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code>. La <code>background-color</code> s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.</p>
+<p>La propriété {{cssxref("background-color")}} définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <code><a href="/fr/docs/Web/CSS/color_value">&lt;color&gt;</a></code>. La <code>background-color</code> s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.</p>
 
-<p>Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément {{htmlelement("span")}}.</p>
+<p>Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément {{htmlelement("span")}}.</p>
 
-<p><strong>Expérimentez avec ce code, en faisant varier les valeurs  <a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a> dans les différentes déclarations.</strong></p>
+<p><strong>Expérimentez avec ce code, en faisant varier les valeurs <a href="/fr/docs/Web/CSS/color_value">&lt;color&gt;</a> dans les différentes déclarations.</strong></p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p>
 
@@ -47,15 +46,15 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
 
 <p>La propriété {{cssxref("background-image")}} permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande, l'autre avec comme fond une petite image représentant une étoile.</p>
 
-<p>Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimension de la boîte, on n'en voit qu'un coin, alors qu'un image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.</p>
+<p>Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimension de la boîte, on n'en voit qu'un coin, alors qu'un image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p>
 
-<p><strong>Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par dessus la couleur. Expérimentez ce comportement en ajoutant une propriété </strong><code>background-color</code><strong> dans l'exemple ci-dessus.</strong></p>
+<p><strong>Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par dessus la couleur. Expérimentez ce comportement en ajoutant une propriété </strong><code>background-color</code><strong> dans l'exemple ci-dessus.</strong></p>
 
-<h4 id="Contrôler_le_background-repeat">Contrôler le background-repeat</h4>
+<h4 id="Contrôler_le_background-repeat">Contrôler le background-repeat</h4>
 
-<p>La propriété {{cssxref("background-repeat")}} permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :</p>
+<p>La propriété {{cssxref("background-repeat")}} permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :</p>
 
 <ul>
  <li><code>no-repeat</code> — aucune répétition de l'arrière-plan.</li>
@@ -64,106 +63,104 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
  <li><code>repeat</code> — comportement par défaut : répétition dans les deux directions.</li>
 </ul>
 
-<p><strong>Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à  </strong><code>no-repeat</code><strong>, une seule étoile apparaît donc. Remplacez par </strong><code>repeat-x</code><strong> et </strong><code>repeat-y</code><strong>  et observez.</strong></p>
+<p><strong>Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à <code>no-repeat</code>, une seule étoile apparaît donc. Remplacez par <code>repeat-x</code> et <code>repeat-y</code><strong> et observez.</strong></p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p>
 
 <h4 id="Dimensionner_limage_de_fond">Dimensionner l'image de fond</h4>
 
-<p>Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété {{cssxref("background-size")}} — avec comme valeur une  <a href="/fr/docs/Web/CSS/length">longueur</a> ou un <a href="/fr/docs/Web/CSS/percentage">pourcentage</a>, permet d'adapter l'image à l'élément pour en occuper tout le fond.</p>
+<p>Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété {{cssxref("background-size")}} — avec comme valeur une  <a href="/fr/docs/Web/CSS/length">longueur</a> ou un <a href="/fr/docs/Web/CSS/percentage">pourcentage</a>, permet d'adapter l'image à l'élément pour en occuper tout le fond.</p>
 
 <p>On peut aussi utiliser les mots-clé :</p>
 
 <ul>
  <li><code>cover</code> — le navigateur redimensionne l'image pour que tout le fond soit couvert, en conservant le format de l'image. La plupart du temps, une partie de l'image est en dehors de la boîte.</li>
- <li><code>contain</code> — le navigateur donne à l'image la plus grande taille possible à l'intérieur de la boîte. Quand le format de l'image ne coïncide pas avec celui de la boîte, on se retrouve avec des bandes laissées vides en haut et en bas ou sur les côtés de l'image.</li>
+ <li><code>contain</code> — le navigateur donne à l'image la plus grande taille possible à l'intérieur de la boîte. Quand le format de l'image ne coïncide pas avec celui de la boîte, on se retrouve avec des bandes laissées vides en haut et en bas ou sur les côtés de l'image.</li>
 </ul>
 
-<p>Dans l'exemple ci-dessous, l'image trop grande vue plus haut est retaillée aux dimensions de la boîte en précisant les valeurs numériques des côtés. On voit comment cela a déformé l'image.</p>
+<p>Dans l'exemple ci-dessous, l'image trop grande vue plus haut est retaillée aux dimensions de la boîte en précisant les valeurs numériques des côtés. On voit comment cela a déformé l'image.</p>
 
 <p>Essayez ce qui suit :</p>
 
 <ul>
  <li>Changez les dimensions de l'arrière-plan.</li>
- <li>Supprimez les dimensions numériques et observez ce qui se passe en les remplaçant par <code>background-size: cover</code> ou <code>background-size: contain</code>.</li>
- <li>Si votre image est plus petite que la boîte, vous pouvez changer la valeur de <code>background-repeat</code> pour répéter l'image.</li>
+ <li>Supprimez les dimensions numériques et observez ce qui se passe en les remplaçant par <code>background-size: cover</code> ou <code>background-size: contain</code>.</li>
+ <li>Si votre image est plus petite que la boîte, vous pouvez changer la valeur de <code>background-repeat</code> pour répéter l'image.</li>
 </ul>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p>
 
-<h4 id="Positionner_limage_de_fond">Positionner l'image de fond</h4>
+<h4 id="Positionner_limage_de_fond">Positionner l'image de fond</h4>
 
-<p>La propriété {{cssxref("background-position")}} permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine <code>(0,0)</code> au coin en haut à gauche de la boîte, l'axe (<code>x</code>) étant horizontal, l'axe (<code>y</code>) vertical.</p>
+<p>La propriété {{cssxref("background-position")}} permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine <code>(0,0)</code> au coin en haut à gauche de la boîte, l'axe (<code>x</code>) étant horizontal, l'axe (<code>y</code>) vertical.</p>
 
 <div class="blockIndicator note">
-<p><strong>Note </strong>: La valeur par défaut de  <code>background-position</code> est <code>(0,0)</code>.</p>
+<p><strong>Note </strong>: La valeur par défaut de <code>background-position</code> est <code>(0,0)</code>.</p>
 </div>
 
-<p>Les valeurs les plus communes pour <code>background-position</code> se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.</p>
+<p>Les valeurs les plus communes pour <code>background-position</code> se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.</p>
 
-<p>Vous pouvez utiliser les mots-clé tels que <code>top</code> et <code>right</code> (vous trouverez les autres valeurs possibles sur la page {{cssxref("background-image")}}):</p>
+<p>Vous pouvez utiliser les mots-clé tels que <code>top</code> et <code>right</code> (vous trouverez les autres valeurs possibles sur la page {{cssxref("background-image")}}):</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top center;
-} </code>
-</pre>
+}</pre>
 
-<p>Et <a href="/fr/docs/Web/CSS/length">Longueurs</a>, ou <a href="/fr/docs/Web/CSS/percentage">pourcentages</a> :</p>
+<p>Et <a href="/fr/docs/Web/CSS/length">Longueurs</a>, ou <a href="/fr/docs/Web/CSS/percentage">pourcentages</a> :</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: 20px 10%;
-} </code>
-</pre>
+}</pre>
 
-<p>On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :</p>
+<p>On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :</p>
 
-<pre class="brush: css notranslate">.box {
+<pre class="brush: css">.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top 20px;
 }</pre>
 
-<p>La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédene. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite : </p>
+<p>La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédene. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite :</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css notranslate">.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top 20px right 10px;
-} </code></pre>
+}</pre>
 
-<p><strong>Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.</strong></p>
+<p><strong>Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.</strong></p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p>
 
-<div class="blockIndicator note">
-<p><strong>Note </strong>: <code>background-position</code> est un raccourci pour{{cssxref("background-position-x")}} et {{cssxref("background-position-y")}}, qui permettent de fixer individuellement les positions sur chaque axe.</p>
+<div class="note">
+<p><strong>Note :</strong> <code>background-position</code> est un raccourci pour{{cssxref("background-position-x")}} et {{cssxref("background-position-y")}}, qui permettent de fixer individuellement les positions sur chaque axe.</p>
 </div>
 
 <h3 id="Arrière-plan_dégradé">Arrière-plan dégradé</h3>
 
-<p>Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété {{cssxref("background-image")}}.</p>
+<p>Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété {{cssxref("background-image")}}.</p>
 
-<p>Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <code><a href="/en-US/docs/Web/CSS/gradient">&lt;gradient&gt;</a></code>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple <a href="https://cssgradient.io/">celui là</a>. Créez votre dégradé puis copiez-collez le code source qui l'a généré.</p>
+<p>Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <code><a href="/fr/docs/Web/CSS/gradient">&lt;gradient&gt;</a></code>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple <a href="https://cssgradient.io/">celui là</a>. Créez votre dégradé puis copiez-collez le code source qui l'a généré.</p>
 
 <p>Essayez différents dégradés dans l'exemple ci-dessous. Dans les deux boîtes on trouve respectivement un dégradé linéaire étendu sur toute la boîte et un dégradé circulaire de taille donné, qui du coup se répète.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p>
 
-<h3 id="Images_de_fond_multiples"> Images de fond multiples</h3>
+<h3 id="Images_de_fond_multiples">Images de fond multiples</h3>
 
-<p>Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour <code>background-image</code> , chacune séparé par une virgule.</p>
+<p>Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour <code>background-image</code>, chacune séparé par une virgule.</p>
 
 <p>Quand vous faîtes cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.</p>
 
-<div class="blockIndicator note">
-<p><strong>Note </strong>: on peut joyeusement mélanger gradients et images de fond classiques.</p>
+<div class="note">
+<p><strong>Note :</strong> on peut joyeusement mélanger gradients et images de fond classiques.</p>
 </div>
 
-<p>Les autres propriété <code>background-*</code> peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que  <code>background-image</code>:</p>
+<p>Les autres propriété <code>background-*</code> peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que <code>background-image</code>:</p>
 
 <pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
 background-repeat: no-repeat, repeat-x, repeat;
@@ -185,9 +182,9 @@ background-position: 10px 20px,  top right;</pre>
  <li><code>local</code>: This value was added later on (it is only supported in Internet Explorer 9+, whereas the others are supported in IE4+) because the <code>scroll</code> value is rather confusing and doesn't really do what you want in many cases. The <code>local</code> value fixes the background to the element it is set on, so when you scroll the element, the background scrolls with it.</li>
 </ul>
 
-<p>The {{cssxref("background-attachment")}} property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at <a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (also <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">see the source code</a> here).</p>
+<p>The {{cssxref("background-attachment")}} property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at <a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (also <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">see the source code</a> here).</p>
 
-<h3 id="Utiliser_la_propriété_raccourci_background">Utiliser la propriété raccourci background </h3>
+<h3 id="Utiliser_la_propriété_raccourci_background">Utiliser la propriété raccourci background</h3>
 
 <p>As I mentioned at the beginning of this lesson, you will often see backgrounds specified using the {{cssxref("background")}} property. This shorthand lets you set all of the different properties at once.</p>
 
@@ -208,7 +205,7 @@ background-position: 10px 20px,  top right;</pre>
 
 <p>Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessu une image, déclarez toujours une <code>background-color</code> qui rendra le texte lisible si l'image n'est pas chargée.</p>
 
-<p>Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.</p>
+<p>Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.</p>
 
 <h2 id="Bordures">Bordures</h2>
 
@@ -216,34 +213,34 @@ background-position: 10px 20px,  top right;</pre>
 
 <p>We can set a border for all four sides of a box with {{cssxref("border")}}:</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">*.box {
   border: 1px solid black;
-} </code></pre>
+}*</pre>
 
 <p>Or we can target one edge of the box, for example:</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">.box {
   border-top: 1px solid black;
-} </code></pre>
+}</pre>
 
 <p>The individual properties for these shorthands would be:</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">.box {
   border-width: 1px;
   border-style: solid;
   border-color: black;
-} </code></pre>
+}</pre>
 
 <p>And for the longhands:</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">.box {
   border-top-width: 1px;
   border-top-style: solid;
   border-top-color: black;
-} </code></pre>
+}</pre>
 
-<div class="blockIndicator note">
-<p><strong>Note </strong>: These top, right, bottom, and left border properties also have mapped <em>logical</em> properties which relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers <a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">handling different text directions</a>.</p>
+<div class="note">
+<p><strong>Note :</strong> These top, right, bottom, and left border properties also have mapped <em>logical</em> properties which relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers <a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">handling different text directions</a>.</p>
 </div>
 
 <p><strong>There are a variety of styles that you can use for borders. In the example below we have used a different border style for the four sides of my box. Play with the border style, width, and color to see how borders work.</strong></p>
@@ -252,19 +249,19 @@ background-position: 10px 20px,  top right;</pre>
 
 <h3 id="Coins_arrondis">Coins arrondis</h3>
 
-<p>On peut arrondir les coins d'une boîte avec la propriété {{cssxref("border-radius")}}  and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases you will only pass in one value, which will be used for both.</p>
+<p>On peut arrondir les coins d'une boîte avec la propriété {{cssxref("border-radius")}} and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases you will only pass in one value, which will be used for both.</p>
 
-<p>Par exemple, Pour donner par exemple un rayon de  10px à chacun des quatre coins :</p>
+<p>Par exemple, Pour donner par exemple un rayon de 10px à chacun des quatre coins :</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">.box {
   border-radius: 10px;
-} </code></pre>
+}</pre>
 
 <p>Ou de donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">.box {
   border-top-right-radius: 1em 10%;
-} </code></pre>
+}</pre>
 
 <p>Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jettez un œil à la page de documentation de {{cssxref("border-radius")}}, vous y trouverez la syntaxe pour les différentes options.</p>
 
@@ -272,23 +269,23 @@ background-position: 10px 20px,  top right;</pre>
 
 <h2 id="Jouer_avec_les_arrière-plans_et_les_bordures">Jouer avec les arrière-plans et les bordures</h2>
 
-<p>Testons vos nouvelles connaissances : en partant  de l'exemple fourni plus bas :</p>
+<p>Testons vos nouvelles connaissances : en partant de l'exemple fourni plus bas :</p>
 
 <ol>
- <li>Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px.</li>
- <li>Ajouter une image de fond (utiliser l'URL <code>balloons.jpg</code>) à redimensionner pour qu'elle recouvre la boîte.</li>
- <li>Donnez au <code>&lt;h2&gt;</code> une couleur de fond noire semi-transparente, avec un texte en blanc.</li>
+ <li>Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px.</li>
+ <li>Ajouter une image de fond (utiliser l'URL <code>balloons.jpg</code>) à redimensionner pour qu'elle recouvre la boîte.</li>
+ <li>Donnez au <code>&lt;h2&gt;</code> une couleur de fond noire semi-transparente, avec un texte en blanc.</li>
 </ol>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}</p>
 
-<div class="blockIndicator note">
-<p><strong>Note </strong>: Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> — mais essayez d'abord de la trouver par vous-même !</p>
+<div class="note">
+<p><strong>Note </strong>: Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> — mais essayez d'abord de la trouver par vous-même !</p>
 </div>
 
 <h2 id="Résumé">Résumé</h2>
 
-<p>Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou  une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.</p>
+<p>Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou  une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.</p>
 
 <p>Dans la leçon suivante nous découvrirons comment le mode d'écriture de votre document interagit avec CSS. Que se passe-t-il quand le texte ne se déroule pas de la gauche vers la droite ?</p>
 
@@ -297,23 +294,23 @@ background-position: 10px 20px,  top right;</pre>
 <h2 id="Dans_ce_cours">Dans ce cours</h2>
 
 <ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
   <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
   </ul>
  </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
 </ol>
diff --git a/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
index dba86cd1c1..e37f991a39 100644
--- a/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
+++ b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
@@ -2,78 +2,77 @@
 title: Le web et ses normes
 slug: Learn/Getting_started_with_the_web/The_web_and_web_standards
 tags:
-  - Apprendre
-  - Débutant
+  - Beginner
   - Front-end
-  - Normes Web
-  - Standards Web
+  - Learn
   - Web
+  - Web Standards
 translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards
 original_slug: Apprendre/Commencer_avec_le_web/The_web_and_web_standards
 ---
-<p dir="ltr">{{learnsidebar}}</p>
+<p>{{learnsidebar}}</p>
 
-<p dir="ltr">Cet article apporte des connaissances générales sur le Web — Comment il est né, quelles sont les technologies usuelles du web, comment interagissent-elles ensemble, pourquoi "développeur web" est un excellent choix de carrière, et quels types de bonnes pratiques pourrez-vous apprendrez au fil de ce cours.</p>
+<p>Cet article apporte des connaissances générales sur le Web — Comment il est né, quelles sont les technologies usuelles du web, comment interagissent-elles ensemble, pourquoi "développeur web" est un excellent choix de carrière, et quels types de bonnes pratiques pourrez-vous apprendrez au fil de ce cours.</p>
 
-<h2 dir="ltr" id="Une_brève_histoire_du_web">Une brève histoire du web</h2>
+<h2 id="Une_brève_histoire_du_web">Une brève histoire du web</h2>
 
-<p dir="ltr">Nous allons passer très rapidement sur ce sujet puisqu'il existe de nombreux articles (plus) détaillés de l'histoire du web, vers lesquelles nous pourrons créer des liens un peu plus loin (si cela vous passionne, vous pouvez également rechercher "histoire du web" dans votre moteur de recherche favori et regarder ce que vous trouverez.)</p>
+<p>Nous allons passer très rapidement sur ce sujet puisqu'il existe de nombreux articles (plus) détaillés de l'histoire du web, vers lesquelles nous pourrons créer des liens un peu plus loin (si cela vous passionne, vous pouvez également rechercher "histoire du web" dans votre moteur de recherche favori et regarder ce que vous trouverez.)</p>
 
-<p dir="ltr">À la fin des années 60, l'armée américaine a développé un réseau de communication nommé <a href="/en-US/docs/Glossary/Arpanet">ARPANET</a>. On peut le considérer comme un précurseur du Web puisqu'il travaillait sur la <a href="https://fr.wikipedia.org/wiki/Commutation_de_paquets">commutation de paquets</a> et constituait la première implémentation de la suite de protocoles <a href="https://fr.wikipedia.org/wiki/Suite_des_protocoles_Internet">TCP/IP</a>. Ces deux technologies forment la base de l'infrastructure sur laquelle est construit Internet</p>
+<p>À la fin des années 60, l'armée américaine a développé un réseau de communication nommé <a href="/fr/docs/Glossary/Arpanet">ARPANET</a>. On peut le considérer comme un précurseur du Web puisqu'il travaillait sur la <a href="https://fr.wikipedia.org/wiki/Commutation_de_paquets">commutation de paquets</a> et constituait la première implémentation de la suite de protocoles <a href="https://fr.wikipedia.org/wiki/Suite_des_protocoles_Internet">TCP/IP</a>. Ces deux technologies forment la base de l'infrastructure sur laquelle est construit Internet</p>
 
-<p dir="ltr">En 1980, Tim Berners-Lee (souvent abrégé TimBL) a écrit un programme nommé ENQUIRE, basé sur le concept de liens entre différents points. Cela vous dit quelque chose ?</p>
+<p>En 1980, Tim Berners-Lee (souvent abrégé TimBL) a écrit un programme nommé ENQUIRE, basé sur le concept de liens entre différents points. Cela vous dit quelque chose ?</p>
 
-<p dir="ltr">Avance rapide jusqu'en 1989, où TimBL a écrit <a href="https://www.w3.org/History/1989/proposal.html">Information Management: A Proposal</a> et HyperText at CERN; Ces deux ouvrages fournissent tout le contexte du fonctionnement du Web. Ils ont bénéficié d'une renommé forte, suffisante pour convaincre les patrons de TimBL de le laisser aller de l'avant et de créer un système hypertexte global.</p>
+<p>Avance rapide jusqu'en 1989, où TimBL a écrit <a href="https://www.w3.org/History/1989/proposal.html">Information Management: A Proposal</a> et HyperText at CERN; Ces deux ouvrages fournissent tout le contexte du fonctionnement du Web. Ils ont bénéficié d'une renommé forte, suffisante pour convaincre les patrons de TimBL de le laisser aller de l'avant et de créer un système hypertexte global.</p>
 
-<p dir="ltr">À la fin des années 90, TimBL avait créé tout le nécessaire pour faire fonctionner une première version du web — <a href="/fr/docs/Web/HTTP">HTTP</a>, <a href="/fr/docs/Web/HTML">HTML</a>, le premier navigateur, qui s'appelait <a href="https://fr.wikipedia.org/wiki/WorldWideWeb_(navigateur)">WorldWideWeb</a>, un serveur HTTP et quelques pages web à lire.</p>
+<p>À la fin des années 90, TimBL avait créé tout le nécessaire pour faire fonctionner une première version du web — <a href="/fr/docs/Web/HTTP">HTTP</a>, <a href="/fr/docs/Web/HTML">HTML</a>, le premier navigateur, qui s'appelait <a href="https://fr.wikipedia.org/wiki/WorldWideWeb_(navigateur)">WorldWideWeb</a>, un serveur HTTP et quelques pages web à lire.</p>
 
-<p dir="ltr">Les années suivantes ont vu l'explosion du web, avec la sortie de nombreux navigateurs, la mise en place de milliers de serveurs web et la création de millions de pages web. Ce résumé est très simpliste mais nous vous avions promis qu'il serait bref.</p>
+<p>Les années suivantes ont vu l'explosion du web, avec la sortie de nombreux navigateurs, la mise en place de milliers de serveurs web et la création de millions de pages web. Ce résumé est très simpliste mais nous vous avions promis qu'il serait bref.</p>
 
-<p dir="ltr">Un dernier point important à évoquer est la fondation en 1994 par TimBL du <a href="https://fr.wikipedia.org/wiki/World_Wide_Web_Consortium">World Wide Web Consortium</a> (W3C), une organisation rassemblant des représentants de plusieurs entreprises du numérique pour travailler ensemble à la définition de normes pour les technologies du web. D'autres technologies ont ensuite vu le jour comme le <a href="/fr/docs/Web/CSS">CSS</a> et le <a href="/fr/docs/Web/JavaScript">JavaScript</a>, et le web a commencé à ressembler à ce que nous connaissons aujourd'hui.</p>
+<p>Un dernier point important à évoquer est la fondation en 1994 par TimBL du <a href="https://fr.wikipedia.org/wiki/World_Wide_Web_Consortium">World Wide Web Consortium</a> (W3C), une organisation rassemblant des représentants de plusieurs entreprises du numérique pour travailler ensemble à la définition de normes pour les technologies du web. D'autres technologies ont ensuite vu le jour comme le <a href="/fr/docs/Web/CSS">CSS</a> et le <a href="/fr/docs/Web/JavaScript">JavaScript</a>, et le web a commencé à ressembler à ce que nous connaissons aujourd'hui.</p>
 
-<h2 dir="ltr" id="Les_standards_du_Web">Les standards du Web</h2>
+<h2 id="Les_standards_du_Web">Les standards du Web</h2>
 
-<p dir="ltr"><strong>Les normes Web sont les technologies que nous utilisons pour créer des sites Web. Ces normes existent sous forme de longs documents techniques appelés spécifications, qui détaillent exactement comment la technologie doit fonctionner. Ces documents ne sont pas très utiles pour apprendre à utiliser les technologies qu'ils décrivent (c'est pourquoi nous avons des sites comme MDN Web Docs), mais sont plutôt destinés à être utilisés par des ingénieurs logiciel pour implémenter ces technologies (généralement dans des navigateurs Web).</strong></p>
+<p><strong>Les normes Web sont les technologies que nous utilisons pour créer des sites Web. Ces normes existent sous forme de longs documents techniques appelés spécifications, qui détaillent exactement comment la technologie doit fonctionner. Ces documents ne sont pas très utiles pour apprendre à utiliser les technologies qu'ils décrivent (c'est pourquoi nous avons des sites comme MDN Web Docs), mais sont plutôt destinés à être utilisés par des ingénieurs logiciel pour implémenter ces technologies (généralement dans des navigateurs Web).</strong></p>
 
-<p dir="ltr">Par exemple <a href="https://html.spec.whatwg.org/multipage/">HTML Living Standard</a> décrit exactement comment le HTML (tous les éléments HTML ainsi que les APIs associées et d'autres technologies proches) devraient être implémentées.</p>
+<p>Par exemple <a href="https://html.spec.whatwg.org/multipage/">HTML Living Standard</a> décrit exactement comment le HTML (tous les éléments HTML ainsi que les APIs associées et d'autres technologies proches) devraient être implémentées.</p>
 
-<p dir="ltr">Les standards Web sont définies par des organisations de normalisation — des institutions qui invite des groupes de personnes de différentes compagnies technologiques à se réunir et s'entendre sur la manière dont les technologies devraient fonctionner pour satisfaire au mieux tous les cas de figure. W3C est le plus connu des organismes de normalisation, même si d'autres existent également, comme le <a href="https://whatwg.org/">WHATWG</a> (à l'origine de la modernisation du langage HTML), <a href="https://www.ecma-international.org/">ECMA</a> (qui publie les normes ECMAScript, sur lesquelles est basé JavaScript), <a href="https://www.khronos.org/">Khronos</a> (qui publie des standards pour les graphismes 3D, comme WebGL), et d'autres encore.</p>
+<p>Les standards Web sont définies par des organisations de normalisation — des institutions qui invite des groupes de personnes de différentes compagnies technologiques à se réunir et s'entendre sur la manière dont les technologies devraient fonctionner pour satisfaire au mieux tous les cas de figure. W3C est le plus connu des organismes de normalisation, même si d'autres existent également, comme le <a href="https://whatwg.org/">WHATWG</a> (à l'origine de la modernisation du langage HTML), <a href="https://www.ecma-international.org/">ECMA</a> (qui publie les normes ECMAScript, sur lesquelles est basé JavaScript), <a href="https://www.khronos.org/">Khronos</a> (qui publie des standards pour les graphismes 3D, comme WebGL), et d'autres encore.</p>
 
-<h3 dir="ltr" id="Normes_ouvertes">Normes "ouvertes"</h3>
+<h3 id="Normes_ouvertes">Normes "ouvertes"</h3>
 
-<p dir="ltr">L'un des aspects clés des normes Web, sur lequel TimBL et le W3C se sont immédiatement mis d'accord, est que le Web (et les technologies Web) devraient être libres d'utilisation et de contribution, et non pas freinées par des brevets ou des licences. Par conséquent, n'importe qui peut écrire gratuitement du code pour créer un site Web, et n'importe qui peut contribuer au processus de création de normes et d'écriture de spécifications.</p>
+<p>L'un des aspects clés des normes Web, sur lequel TimBL et le W3C se sont immédiatement mis d'accord, est que le Web (et les technologies Web) devraient être libres d'utilisation et de contribution, et non pas freinées par des brevets ou des licences. Par conséquent, n'importe qui peut écrire gratuitement du code pour créer un site Web, et n'importe qui peut contribuer au processus de création de normes et d'écriture de spécifications.</p>
 
-<p dir="ltr">Le fait que les technologies Web soient créées librement, en collaboration entre de nombreuses entreprises différentes, signifie qu'aucune entreprise ne peut les contrôler, ce qui est une excellente chose. Vous ne voudriez pas qu'une seule entreprise décide soudainement de rendre payant l'intégralité du Web ou de publier une nouvelle version de HTML que tout le monde doive acheter pour continuer à créer des sites Web, ou pire encore, ne décide simplement qu'elle n'est plus intéressée par le Web et l'éteindre.</p>
+<p>Le fait que les technologies Web soient créées librement, en collaboration entre de nombreuses entreprises différentes, signifie qu'aucune entreprise ne peut les contrôler, ce qui est une excellente chose. Vous ne voudriez pas qu'une seule entreprise décide soudainement de rendre payant l'intégralité du Web ou de publier une nouvelle version de HTML que tout le monde doive acheter pour continuer à créer des sites Web, ou pire encore, ne décide simplement qu'elle n'est plus intéressée par le Web et l'éteindre.</p>
 
-<p dir="ltr">Cela permet au Web de rester une ressource publique librement accessible.</p>
+<p>Cela permet au Web de rester une ressource publique librement accessible.</p>
 
-<h3 dir="ltr" id="Ne_cassez_pas_le_web">Ne cassez pas le web</h3>
+<h3 id="Ne_cassez_pas_le_web">Ne cassez pas le web</h3>
 
-<p dir="ltr">Une phrase qu'on entend souvent à propos des normes web ouvertes est "Ne cassez pas le web" ("<em>don't break the web</em>") — Cela signifie que toute nouvelle technologie Web introduite devrait être rétrocompatible avec ce qui l'a précédée (donc que les anciens sites Web continueront de fonctionner), et compatible avec l'avenir (les technologies futures seront à leur tour compatibles avec ce que nous avons actuellement). En parcourant les explications présentés ici, vous découvrirez comment un travail de conception et d'implémentation bien pensé rend cela possible.</p>
+<p>Une phrase qu'on entend souvent à propos des normes web ouvertes est "Ne cassez pas le web" ("<em>don't break the web</em>") — Cela signifie que toute nouvelle technologie Web introduite devrait être rétrocompatible avec ce qui l'a précédée (donc que les anciens sites Web continueront de fonctionner), et compatible avec l'avenir (les technologies futures seront à leur tour compatibles avec ce que nous avons actuellement). En parcourant les explications présentés ici, vous découvrirez comment un travail de conception et d'implémentation bien pensé rend cela possible.</p>
 
 <h2 id="Être_développeur_web_cest_bien">Être développeur web, c'est bien</h2>
 
 <p>L'industrie du Web est un secteur très attractif si vous êtes à la recherche d'un emploi. Les derniers chiffres publiés estiment le nombre actuel de développeurs Web dans le monde à environ 19 millions, un nombre qui devrait au moins doubler au cours de la prochaine décennie. Le secteur connaissant dans le même temps une pénurie de compétences, y a-t-il un meilleur moment pour apprendre le développement Web?</p>
 
-<p>Ce n'est cependant pas juste des jeux et de l'amusement - la création de sites Web est une tâche qui se complexifie avec le temps, et vous devrez consacrer du temps à l'étude de plusieurs technologies différentes, de nombreuses méthodes et bonnes pratiques à connaître et tous les cas de figure classiques que vous serez appelé à mettre en œuvre. Vous aurez besoin de quelques mois pour vraiment entrer dans le sujet, puis vous devrez continuer à apprendre afin de maintenir vos connaissances à jour avec tous les nouveaux outils et fonctionnalités qui apparaissent sur le Web, et continuer à pratiquer afin de perfectionner votre travail.</p>
+<p>Ce n'est cependant pas juste des jeux et de l'amusement - la création de sites Web est une tâche qui se complexifie avec le temps, et vous devrez consacrer du temps à l'étude de plusieurs technologies différentes, de nombreuses méthodes et bonnes pratiques à connaître et tous les cas de figure classiques que vous serez appelé à mettre en œuvre. Vous aurez besoin de quelques mois pour vraiment entrer dans le sujet, puis vous devrez continuer à apprendre afin de maintenir vos connaissances à jour avec tous les nouveaux outils et fonctionnalités qui apparaissent sur le Web, et continuer à pratiquer afin de perfectionner votre travail.</p>
 
 <p><em>La seule constante est la variation.</em></p>
 
-<p>Cela vous semble difficile ? Pas d'inquiétude, notre objectif est de vous donner toutes les bases pour débuter, ce qui vous facilitera la suite. Une fois que vous aurez accepté le changement permanent et l'inconstance du Web, vous commencerez à vous amuser. En tant que membre de la communauté Web, vous aurez tout un réseau de contacts et de ressources web pour vous aider, qui vous aideront à profiter des possibilités créatives du web.</p>
+<p>Cela vous semble difficile ? Pas d'inquiétude, notre objectif est de vous donner toutes les bases pour débuter, ce qui vous facilitera la suite. Une fois que vous aurez accepté le changement permanent et l'inconstance du Web, vous commencerez à vous amuser. En tant que membre de la communauté Web, vous aurez tout un réseau de contacts et de ressources web pour vous aider, qui vous aideront à profiter des possibilités créatives du web.</p>
 
 <p>Vous êtes désormais un créateur du numérique. Profitez de l'expérience et trouvez votre gagne-pain.</p>
 
 <h2 id="Vue_densemble_des_outils_Web_modernes">Vue d'ensemble des outils Web modernes</h2>
 
-<p>Il existe plusieurs technologies à maîtriser si vous souhaitez devenir développeur Web front-end, que nous décrirons brièvement dans cette section. Pour une explication plus détaillée de la façon dont certains d'entre eux interagissent, lisez notre article <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Le fonctionnement du web</a>.</p>
+<p>Il existe plusieurs technologies à maîtriser si vous souhaitez devenir développeur Web front-end, que nous décrirons brièvement dans cette section. Pour une explication plus détaillée de la façon dont certains d'entre eux interagissent, lisez notre article <a href="/fr/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Le fonctionnement du web</a>.</p>
 
 <h3 id="Navigateurs_web">Navigateurs web</h3>
 
-<p>Vous êtes probablement en train de lire ces mots à l'aide d'un navigateur web (à moins que vous ne l'ayez imprimé ou que vous utilisiez un outil d'accessibilité comme un lecteur d'écran). Les navigateurs web sont des logiciels que les gens utilisent pour naviguer sur le web, comme <a href="https://www.mozilla.org/fr/firefox/">Firefox</a>, <a href="https://www.google.com/chrome/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/fr/safari/">Safari</a>, <a href="https://www.microsoft.com/fr-fr/windows/microsoft-edge">Edge</a>.</p>
+<p>Vous êtes probablement en train de lire ces mots à l'aide d'un navigateur web (à moins que vous ne l'ayez imprimé ou que vous utilisiez un outil d'accessibilité comme un lecteur d'écran). Les navigateurs web sont des logiciels que les gens utilisent pour naviguer sur le web, comme <a href="https://www.mozilla.org/fr/firefox/">Firefox</a>, <a href="https://www.google.com/chrome/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/fr/safari/">Safari</a>, <a href="https://www.microsoft.com/fr-fr/windows/microsoft-edge">Edge</a>.</p>
 
 <h3 id="HTTP">HTTP</h3>
 
-<p>Hypertext Transfer Protocol, ou <a href="/fr/docs/Web/HTTP/Basics_of_HTTP">HTTP</a>, est un protocole de communication permettant aux navigateurs web de communiquer avec des serveurs web (qui hébergent les sites web). Une conversation type ressemble à quelque chose comme</p>
+<p>Hypertext Transfer Protocol, ou <a href="/fr/docs/Web/HTTP/Basics_of_HTTP">HTTP</a>, est un protocole de communication permettant aux navigateurs web de communiquer avec des serveurs web (qui hébergent les sites web). Une conversation type ressemble à quelque chose comme</p>
 
 <pre class="notranslate">"Bonjour Serveur Web. Peux-tu me fournir les fichiers requis pour afficher bbc.co.uk"?
 
@@ -81,17 +80,17 @@ original_slug: Apprendre/Commencer_avec_le_web/The_web_and_web_standards
 
 [Télécharge les fichiers et affiche la page]</pre>
 
-<p>La véritable syntaxe des messages HTTP (appelés requêtes et réponses) ne ressemble pas vraiment à une conversation humaine, mais cela permet d'en avoir un aperçu.</p>
+<p>La véritable syntaxe des messages HTTP (appelés requêtes et réponses) ne ressemble pas vraiment à une conversation humaine, mais cela permet d'en avoir un aperçu.</p>
 
 <h3 id="HTML_CSS_et_JavaScript">HTML, CSS et JavaScript</h3>
 
-<p><a href="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/CSS">CSS</a>, et <a href="/fr/docs/Web/JavaScript">JavaScript</a> sont les trois principales technologies utilisées pour créer un site web:</p>
+<p><a href="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/CSS">CSS</a>, et <a href="/fr/docs/Web/JavaScript">JavaScript</a> sont les trois principales technologies utilisées pour créer un site web:</p>
 
 <ul>
  <li>
-  <p>Hypertext Markup Language, ou <strong>HTML</strong>, est un langage de balises consistant en un ensemble d'éléments qui permettent d'encapsuler (de baliser) du contenu pour lui donner du sens (sémantique) et le structurer. Un extrait simple ressemble à cela :</p>
+  <p>Hypertext Markup Language, ou <strong>HTML</strong>, est un langage de balises consistant en un ensemble d'éléments qui permettent d'encapsuler (de baliser) du contenu pour lui donner du sens (sémantique) et le structurer. Un extrait simple ressemble à cela :</p>
 
-  <pre class="brush: html notranslate">&lt;h1&gt;Ceci est un titre de haut niveau&lt;/h1&gt;
+  <pre class="brush: html">&lt;h1&gt;Ceci est un titre de haut niveau&lt;/h1&gt;
 
 &lt;p&gt;Voilà un paragraphe de texte&lt;/p&gt;
 
@@ -100,18 +99,18 @@ original_slug: Apprendre/Commencer_avec_le_web/The_web_and_web_standards
   <p>Si nous faisions une analogie avec la construction d'une maison, le HTML serait les fondations et les murs de la maison, qui lui fournissent une architecture et maintien l'ensemble d'un bloc.</p>
  </li>
  <li>
-  <p>Les Feuilles de Style en cascade (<strong>CSS </strong>- Cascading Style Sheets) est un langage basé sur un ensemble de règles et utilisé pour appliquer des styles à votre HTML, par exemple pour définir la couleur du texte et de l'arrière-plan, ajouter des bordures, animer des éléments, ou agencer les différentes parties d'une page. Par exemple, le code suivant rendrait notre paragraphe HTML rouge:</p>
+  <p>Les Feuilles de Style en cascade (<strong>CSS </strong>- Cascading Style Sheets) est un langage basé sur un ensemble de règles et utilisé pour appliquer des styles à votre HTML, par exemple pour définir la couleur du texte et de l'arrière-plan, ajouter des bordures, animer des éléments, ou agencer les différentes parties d'une page. Par exemple, le code suivant rendrait notre paragraphe HTML rouge:</p>
 
-  <pre class="brush: css notranslate">p  {
+  <pre class="brush: css">p  {
   color: red;
 }</pre>
 
   <p>Dans notre méthaphore domestique, le CSS serait la peinture, la tapisserie, les tapis et les tableaux que vous utiliseriez pour décorer votre maison.</p>
  </li>
  <li>
-  <p><strong>JavaScript</strong> est le langage de programmation que l'on utilise pour ajouter de l'interactivité aux sites webs, du changement de style dynamique à la récupération de mise à jour depuis le server, en passant par les animations visuelles complexes. Ce petit fragment de code JavaScript va stocker un lien vers notre paragraphe et en changer le contenu :</p>
+  <p><strong>JavaScript</strong> est le langage de programmation que l'on utilise pour ajouter de l'interactivité aux sites webs, du changement de style dynamique à la récupération de mise à jour depuis le server, en passant par les animations visuelles complexes. Ce petit fragment de code JavaScript va stocker un lien vers notre paragraphe et en changer le contenu :</p>
 
-  <pre class="brush: js notranslate">let pElem = document.querySelector('p');
+  <pre class="brush: js">let pElem = document.querySelector('p');
 pElem.textContent =  'J'ai changé le texte!';</pre>
 
   <p>Dans l'analogie de la maison, JavaScript serait le four, la télévision, le sèche-cheveux — Tout ce qui donne des fonctionnalités utiles à votre logement.</p>
@@ -120,21 +119,21 @@ pElem.textContent =  'J'ai changé le texte!';</pre>
 
 <h3 id="Outils">Outils</h3>
 
-<p>Une fois que vous maîtriserez les technologies "brutes" qui permettent de construire des pages web (comme HTML, CSS, et JavaScript), vous rencontrerez rapidement divers outils permettant de faciliter ou d'accélerer votre travail. On peut citer comme exemples :</p>
+<p>Une fois que vous maîtriserez les technologies "brutes" qui permettent de construire des pages web (comme HTML, CSS, et JavaScript), vous rencontrerez rapidement divers outils permettant de faciliter ou d'accélerer votre travail. On peut citer comme exemples :</p>
 
 <ul>
- <li>Les <a href="/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs">outils de développement</a> des navigateurs modernes qui permettent de déboguer votre code.</li>
- <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Des outils de test</a> pouvant être utilisés afin de vérifier si votre code se comporte comme vous l'aviez prévu.</li>
+ <li>Les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> des navigateurs modernes qui permettent de déboguer votre code.</li>
+ <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Des outils de test</a> pouvant être utilisés afin de vérifier si votre code se comporte comme vous l'aviez prévu.</li>
  <li>Des bibliothèques et des cadres de travail (frameworks) basés sur JavaScript qui permettent de créer certains types de sites web beaucoup plus rapidement et efficacement .</li>
- <li>Ce qu'on appelle les "Linters", des outils d'analyse qui prennent une liste de règles, parcourent votre code et listent les endroits où vous n'avez pas parfaitement suivi les règles.</li>
- <li>Des minificateurs, qui retirent tous les blancs de vos fichiers de code pour les rendre plus compacts et donc plus rapides à télécharger.</li>
+ <li>Ce qu'on appelle les "Linters", des outils d'analyse qui prennent une liste de règles, parcourent votre code et listent les endroits où vous n'avez pas parfaitement suivi les règles.</li>
+ <li>Des minificateurs, qui retirent tous les blancs de vos fichiers de code pour les rendre plus compacts et donc plus rapides à télécharger.</li>
 </ul>
 
 <h3 id="Langages_et_frameworks_«_côté_serveur_»">Langages et frameworks « côté serveur »</h3>
 
-<p>HTML, CSS et JavaScript sont des langages "front-end" (ou « côté client »), ce qui signifie qu'ils sont exécutés par le navigateur pour produire un rendu visuel du site web à destination des utilisateurs.</p>
+<p>HTML, CSS et JavaScript sont des langages "front-end" (ou « côté client »), ce qui signifie qu'ils sont exécutés par le navigateur pour produire un rendu visuel du site web à destination des utilisateurs.</p>
 
-<p>Il existe une autre catégorie de langages appelés langages "back-end" (ou « côté serveur »), qui s'exécutent sur le serveur avant que le résultat ne soit envoyé au navigateur pour être affiché. Une utilisation typique d'un langage côté serveur consiste à extraire des données d'une base de données et à générer du HTML pour les contenir avant d'envoyer le résultat au navigateur pour que celui-ci l'affiche à l'utilisateur.</p>
+<p>Il existe une autre catégorie de langages appelés langages "back-end" (ou « côté serveur »), qui s'exécutent sur le serveur avant que le résultat ne soit envoyé au navigateur pour être affiché. Une utilisation typique d'un langage côté serveur consiste à extraire des données d'une base de données et à générer du HTML pour les contenir avant d'envoyer le résultat au navigateur pour que celui-ci l'affiche à l'utilisateur.</p>
 
 <p>On peut citer comme exemples ASP.NET, Python, PHP, ou NodeJS.</p>
 
@@ -142,31 +141,31 @@ pElem.textContent =  'J'ai changé le texte!';</pre>
 
 <p>Nous avons rapidement évoqué les technologies utilisées pour créer des sites web et nous allons désormais parler des bonnes pratiques à employer pour s'assurer que vous utilisez ces outils de la meilleure manière possible.</p>
 
-<p>Lorsque l'on réalise du développement web, la principale cause d'incertitude provient du fait que l'on ne sache pas quelle combinaison de technologies va être utilisée par chacun des utilisateurs du site web:</p>
+<p>Lorsque l'on réalise du développement web, la principale cause d'incertitude provient du fait que l'on ne sache pas quelle combinaison de technologies va être utilisée par chacun des utilisateurs du site web:</p>
 
 <ul>
  <li>L'utilisateur 1 peut utiliser un iPhone avec un écran petit et étroit.</li>
- <li>L'utilisateur 2 peut se servir d'un ordinateur portable Windows avec un grand écran secondaire.</li>
+ <li>L'utilisateur 2 peut se servir d'un ordinateur portable Windows avec un grand écran secondaire.</li>
  <li>L'utilisateur 3 peut être aveugle et utiliser un lecteur d'écran pour accéder au contenu de la page web.</li>
  <li>L'utilisateur 4 utilise peut-être un très vieil ordinateur de bureau incapable de faire fonctionner les navigateurs modernes.</li>
 </ul>
 
-<p>Ne sachant pas comment vos utilisateurs vont interagir avec votre site, vous devez le concevoir de manière défensive — rendre votre site web aussi flexible que possible, de façon à ce que chacun des utilisateurs mentionnés puissent y accéder, même s'ils n'auront pas la même interaction. En bref, nous essayons de rendre le web accessible à tous, autant que possible.</p>
+<p>Ne sachant pas comment vos utilisateurs vont interagir avec votre site, vous devez le concevoir de manière défensive — rendre votre site web aussi flexible que possible, de façon à ce que chacun des utilisateurs mentionnés puissent y accéder, même s'ils n'auront pas la même interaction. En bref, nous essayons de rendre le web accessible à tous, autant que possible.</p>
 
-<p>Vous rencontrerez les concepts suivants à un moment donné de vos études.</p>
+<p>Vous rencontrerez les concepts suivants à un moment donné de vos études.</p>
 
 <ul>
- <li><strong>La compatibilité entre navigateurs</strong> consiste à essayer de garantir que votre page Web fonctionne sur autant d'appareils que possible. Cela inclut l'utilisation de technologies prises en charge par tous les navigateurs, l'offre de meilleures expériences aux navigateurs qui peuvent les gérer (amélioration progressive) et/ ou l'adaptation du code afin de revenir à une expérience plus simple mais fonctionnelle dans les navigateurs plus anciens (dégradation gracieuse). Cela implique notamment de nombreux tests pour vérifier le bon fonctionnement dans chaque navigateur, puis un travail supplémentaire pour résoudre ces problèmes.</li>
- <li><strong>La conception web réactive (responsive) </strong>consiste à rendre vos fonctionnalités et mises en page flexibles afin qu'elles puissent s'adapter automatiquement à différents navigateurs. Un exemple immédiat est un site Web qui est présenté d'une certaine manière dans un navigateur grand écran, mais qui s'affiche en une colonne unique plus compacte sur les navigateurs de téléphone mobile. Essayez d'ajuster la largeur de la fenêtre de votre navigateur maintenant pour voir ce qui se passe.</li>
- <li><strong>La performance</strong> signifie que les sites Web doivent se charger le plus rapidement possible, mais aussi qu'ils doivent être intuitifs et faciles à utiliser afin que les utilisateurs ne soient pas frustrés et ne partent pas ailleurs.</li>
- <li><strong>L'accessibilité</strong> consiste à rendre vos sites web utilisables par le plus grand nombre de catégories de personnes possible (Un concept lié est la notion de conception inclusive). Cela inclut les individus avec des déficiences visuelles, auditives, cognitives ou physiques. Cela va même au-delà des personnes handicapées — Qu'en est-il des jeunes et des personnes agées, des personnes de cultures différentes, utilisant des appareils mobiles, disposant d'une connection lente ou peu fiable ?</li>
- <li><strong>L'internationalisation </strong>signifie rendre les sites Web utilisables par des personnes de cultures différentes, qui parlent des langues différentes de la vôtre. cela inclut des considérations techniques (telles que la modification de votre mise en page pour qu'elle fonctionne également pour les langues se lisant de droite à gauche, ou même verticalement), et les considérations sociales (comme l'utilisation d'un langage simple et non argotique afin que les personnes pour qui votre langue est leur deuxième ou troisième langue soient plus susceptibles de comprendre votre texte).</li>
- <li><strong>Confidentialité et sécurité</strong>. Ces deux concepts sont liés mais différents. La confidentialité consiste à permettre aux gens de vaquer à leurs occupations en privé et à ne pas les espionner ni ne collecter plus de données que ce dont vous avez absolument besoin. La sécurité fait référence à la conception sécurisée de votre site Web afin d'empêcher des utilisateurs malveillants de voler les informations qu'il contient, et ce qu'elle vous appartiennent ou à vos utilisateurs.</li>
+ <li><strong>La compatibilité entre navigateurs</strong> consiste à essayer de garantir que votre page Web fonctionne sur autant d'appareils que possible. Cela inclut l'utilisation de technologies prises en charge par tous les navigateurs, l'offre de meilleures expériences aux navigateurs qui peuvent les gérer (amélioration progressive) et/ ou l'adaptation du code afin de revenir à une expérience plus simple mais fonctionnelle dans les navigateurs plus anciens (dégradation gracieuse). Cela implique notamment de nombreux tests pour vérifier le bon fonctionnement dans chaque navigateur, puis un travail supplémentaire pour résoudre ces problèmes.</li>
+ <li><strong>La conception web réactive (responsive) </strong>consiste à rendre vos fonctionnalités et mises en page flexibles afin qu'elles puissent s'adapter automatiquement à différents navigateurs. Un exemple immédiat est un site Web qui est présenté d'une certaine manière dans un navigateur grand écran, mais qui s'affiche en une colonne unique plus compacte sur les navigateurs de téléphone mobile. Essayez d'ajuster la largeur de la fenêtre de votre navigateur maintenant pour voir ce qui se passe.</li>
+ <li><strong>La performance</strong> signifie que les sites Web doivent se charger le plus rapidement possible, mais aussi qu'ils doivent être intuitifs et faciles à utiliser afin que les utilisateurs ne soient pas frustrés et ne partent pas ailleurs.</li>
+ <li><strong>L'accessibilité</strong> consiste à rendre vos sites web utilisables par le plus grand nombre de catégories de personnes possible (Un concept lié est la notion de conception inclusive). Cela inclut les individus avec des déficiences visuelles, auditives, cognitives ou physiques. Cela va même au-delà des personnes handicapées — Qu'en est-il des jeunes et des personnes agées, des personnes de cultures différentes, utilisant des appareils mobiles, disposant d'une connection lente ou peu fiable ?</li>
+ <li><strong>L'internationalisation </strong>signifie rendre les sites Web utilisables par des personnes de cultures différentes, qui parlent des langues différentes de la vôtre. cela inclut des considérations techniques (telles que la modification de votre mise en page pour qu'elle fonctionne également pour les langues se lisant de droite à gauche, ou même verticalement), et les considérations sociales (comme l'utilisation d'un langage simple et non argotique afin que les personnes pour qui votre langue est leur deuxième ou troisième langue soient plus susceptibles de comprendre votre texte).</li>
+ <li><strong>Confidentialité et sécurité</strong>. Ces deux concepts sont liés mais différents. La confidentialité consiste à permettre aux gens de vaquer à leurs occupations en privé et à ne pas les espionner ni ne collecter plus de données que ce dont vous avez absolument besoin. La sécurité fait référence à la conception sécurisée de votre site Web afin d'empêcher des utilisateurs malveillants de voler les informations qu'il contient, et ce qu'elle vous appartiennent ou à vos utilisateurs.</li>
 </ul>
 
-<h2 dir="ltr" id="Voir_aussi">Voir aussi</h2>
+<h2 id="Voir_aussi">Voir aussi</h2>
 
-<ul dir="ltr">
- <li><a href="https://fr.wikipedia.org/wiki/World_Wide_Web#Histoire">Histoire du World Wide Web</a></li>
- <li><a href="https://wiki.developer.mozilla.org/fr/docs/Apprendre/Fonctionnement_Internet">Le fonctionnement de l'Internet</a></li>
+<ul>
+ <li><a href="https://fr.wikipedia.org/wiki/World_Wide_Web#Histoire">Histoire du World Wide Web</a></li>
+ <li><a href="/fr/docs/Learn/Common_questions/How_does_the_Internet_work">Le fonctionnement de l'Internet</a></li>
 </ul>
diff --git a/files/fr/learn/javascript/first_steps/arrays/index.html b/files/fr/learn/javascript/first_steps/arrays/index.html
index df8d360351..f38aeee181 100644
--- a/files/fr/learn/javascript/first_steps/arrays/index.html
+++ b/files/fr/learn/javascript/first_steps/arrays/index.html
@@ -2,17 +2,19 @@
 title: Les tableaux
 slug: Learn/JavaScript/First_steps/Arrays
 tags:
-  - Apprendre
+  - Arrays
   - Article
-  - Codage
-  - Débutants
+  - Beginner
+  - CodingScripting
   - JavaScript
-  - Lier
+  - Join
+  - Learn
   - Pop
   - Push
-  - Tableaux
-  - décalage
-  - séparer
+  - l10n:priority
+  - shift
+  - split
+  - unshift
 translation_of: Learn/JavaScript/First_steps/Arrays
 original_slug: Learn/JavaScript/First_steps/tableaux
 ---
@@ -41,7 +43,7 @@ original_slug: Learn/JavaScript/First_steps/tableaux
 
 <p>Sans tableaux, nous devrions stocker chaque valeur dans une variable séparée, puis appeler le code qui effectue l'affichage ou l'impression, puis ajouter séparément chaque élément. Ce serait plus long à écrire, moins efficace et cela comporterait plus de risques d'erreurs. Si nous avions 10 articles à ajouter à la facture, ce serait déjà assez mauvais, mais qu'en serait-il de 100 articles ou de 1000 ? Nous reviendrons sur cet exemple plus loin dans l'article.</p>
 
-<p>Comme précédemment, initions‑nous aux bases pratiques des tableaux en entrant quelques exemples dans une console JavaScript. En voici une plus bas (vous pouvez aussi <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">ouvrir cette console</a> dans un onglet ou une fenêtre séparés ou utiliser la <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">console développeur de l'explorateur</a> si vous préférez).</p>
+<p>Comme précédemment, initions‑nous aux bases pratiques des tableaux en entrant quelques exemples dans une console JavaScript. En voici une plus bas (vous pouvez aussi <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">ouvrir cette console</a> dans un onglet ou une fenêtre séparés ou utiliser la <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">console développeur de l'explorateur</a> si vous préférez).</p>
 
 <div class="hidden">
 <h6 id="Hidden_code">Hidden code</h6>
@@ -174,7 +176,7 @@ let random = ['arbre', 795, [0, 1, 2]];</pre>
 
 <h3 id="Accès_aux_éléments_de_tableau_et_modification_de_ceux‑ci">Accès aux éléments de tableau et modification de ceux‑ci</h3>
 
-<p>Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant la notation crochet, de la même façon que nous avons eu <a href="/en-US/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">accès aux lettres dans une chaîne</a>.</p>
+<p>Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant la notation crochet, de la même façon que nous avons eu <a href="/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods#retrieving_a_specific_string_character">accès aux lettres dans une chaîne</a>.</p>
 
 <ol>
  <li>Entrez ceci dans la console :
@@ -214,7 +216,7 @@ for (var i = 0; i &lt; sequence.length; i++) {
 <ol>
  <li>Commencer la boucle à l'élément 0 du tableau.</li>
  <li>Arrêter de tourner quand le dernier élément du tableau sera atteint. Cela fonctionne pour n'importe quelle dimension de tableau ; dans notre cas, on sortira de la boucle à l'élément  7 (c'est bon, car le dernier élément — que nous souhaitons que la boucle traite — est le 6).</li>
- <li>Afficher chaque élément sur la console de l'explorateur avec<code> <a href="/en-US/docs/Web/API/Console/log">console.log()</a></code>.</li>
+ <li>Afficher chaque élément sur la console de l'explorateur avec<code> <a href="/fr/docs/Web/API/Console/log">console.log()</a></code>.</li>
 </ol>
 
 <h2 id="Quelques_méthodes_utiles_pour_les_tableaux">Quelques méthodes utiles pour les tableaux</h2>
@@ -306,10 +308,10 @@ removedItem;</pre>
 
 <ol>
  <li>Sous le commentaire <code>// number 1</code> il y a un certain nombre de chaînes de caractères, chacune précise le nom d'un produit et son prix séparé par deux‑points. Placez‑les dans un tableau ; enregistrez‑le sous le nom <code>products</code>.</li>
- <li>Sur la même ligne que le commentaire <code>// number 2</code> se trouve le début d'une boucle. Dans cette ligne nous avons actuellement <code>i &lt;= 0</code>, test conditionnel qui fait que la <a href="/en-US/Learn/JavaScript/First_steps/A_first_splash#Loops"> boucle</a> stoppe immédiatement, car ce test dit « stopper dès que <code>i</code> est inférieur ou égal à 0 » et <code>i</code> part de 0. Remplacez ce test par un qui  n'arrêtera pas la boucle tant que <code>i</code> sera inférieur à la taille du tableau <code>products</code>.</li>
- <li>Au dessous du commentaire <code>// number 3</code> nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (<code>nom:prix</code>) en deux éléments distincts, un contenant uniquement le nom, l'autre uniquement le prix. Si vous nous ne savez pas trop comment faire, revoyez l'article relatif aux <a href="/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile">Méthodes utiles pour les chaînes de caractères</a> pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article.</li>
- <li>En plus des lignes de code ci‑dessus, vous aurez aussi à convertir les prix de chaîne de caractères en chiffres. Si vous ne vous souvenez pas comment faire, revoyez le <a href="/fr/docs/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">premier article à propos des chaînes</a>.</li>
- <li>Il y a une variable nommée <code>total</code> créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous <code>// number 4</code>) ajoutez une ligne qui ajoute à ce total le prix de l'article courant  à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un <a href="/en-US/Learn/JavaScript/First_steps/Math#Assignment_operators">opérateur d'assignation</a> pour faire cela ;-).</li>
+ <li>Sur la même ligne que le commentaire <code>// number 2</code> se trouve le début d'une boucle. Dans cette ligne nous avons actuellement <code>i &lt;= 0</code>, test conditionnel qui fait que la <a href="/fr/docs/Learn/JavaScript/First_steps/A_first_splash#loops"> boucle</a> stoppe immédiatement, car ce test dit « stopper dès que <code>i</code> est inférieur ou égal à 0 » et <code>i</code> part de 0. Remplacez ce test par un qui  n'arrêtera pas la boucle tant que <code>i</code> sera inférieur à la taille du tableau <code>products</code>.</li>
+ <li>Au dessous du commentaire <code>// number 3</code> nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (<code>nom:prix</code>) en deux éléments distincts, un contenant uniquement le nom, l'autre uniquement le prix. Si vous nous ne savez pas trop comment faire, revoyez l'article relatif aux <a href="/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods">Méthodes utiles pour les chaînes de caractères</a> pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article.</li>
+ <li>En plus des lignes de code ci‑dessus, vous aurez aussi à convertir les prix de chaîne de caractères en chiffres. Si vous ne vous souvenez pas comment faire, revoyez le <a href="/fr/docs/Learn/JavaScript/First_steps/Strings#numbers_versus_strings">premier article à propos des chaînes</a>.</li>
+ <li>Il y a une variable nommée <code>total</code> créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous <code>// number 4</code>) ajoutez une ligne qui ajoute à ce total le prix de l'article courant  à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un <a href="/fr/docs/Learn/JavaScript/First_steps/Math#assignment_operators">opérateur d'assignation</a> pour faire cela ;-).</li>
  <li>Nous souhaitons que vous modifiez la ligne au‑dessous de  <code>// number 5</code> de sorte que la variable <code>itemText</code> soit égale à « nom actuel de l'élément — $prix actuel de l'élément », par exemple « Shoes — $23.99 » dans chaque cas, de façon à ce qu'une information correcte soit affichée sur l'envoi. Il s'agit d'une simple concaténation de chaînes de caractères, chose qui doit vous être familière.</li>
 </ol>
 
@@ -494,8 +496,7 @@ window.addEventListener('load', updateCode);
 
 <h2 id="Testez_vos_compétences_!">Testez vos compétences !</h2>
 
-<p><br>
- Vous avez atteint la fin de cet article, mais vous souvenez-vous des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien fixé ces connaissances avant de continuer — voir <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays">Test de compétences : les tableaux</a>.</p>
+<p>Vous avez atteint la fin de cet article, mais vous souvenez-vous des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien fixé ces connaissances avant de continuer — voir <a href="/fr/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays">Test de compétences : les tableaux</a>.</p>
 
 <h2 id="Conclusion">Conclusion</h2>
 
@@ -505,10 +506,8 @@ window.addEventListener('load', updateCode);
 
 <h2 id="Voir_aussi">Voir aussi</h2>
 
-
-
 <ul>
- <li><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Collections indexées</a> — un guide de niveau avancé à propos des tableaux et de leurs cousins, les tableaux typés.</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Indexed_collections">Collections indexées</a> — un guide de niveau avancé à propos des tableaux et de leurs cousins, les tableaux typés.</li>
  <li>{{jsxref("Array")}} — la page de référence de l'objet <code>Array</code> — pour un guide de référence détaillé à propos des fonctionnalités discutées dans cette page, et plus encore.</li>
 </ul>
 
@@ -517,13 +516,13 @@ window.addEventListener('load', updateCode);
 <h2 id="Dans_ce_module">Dans ce module</h2>
 
 <ul>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
 </ul>
diff --git a/files/fr/learn/javascript/first_steps/math/index.html b/files/fr/learn/javascript/first_steps/math/index.html
index 2d35ee076b..ddf396a3b7 100644
--- a/files/fr/learn/javascript/first_steps/math/index.html
+++ b/files/fr/learn/javascript/first_steps/math/index.html
@@ -2,16 +2,17 @@
 title: Mathématiques de base en JavaScript — nombres et opérateurs
 slug: Learn/JavaScript/First_steps/Math
 tags:
-  - Apprendre
   - Article
-  - Codage de scripts
-  - Débutant
+  - Beginner
+  - CodingScripting
   - Guide
-  - Incrémentation
   - JavaScript
+  - Learn
   - Math
-  - Opérateurs
-  - augmenté
+  - Operators
+  - augmented
+  - increment
+  - l10n:priority
   - maths
   - modulo
 translation_of: Learn/JavaScript/First_steps/Math
@@ -51,12 +52,12 @@ translation_of: Learn/JavaScript/First_steps/Math
  <li><strong>Doubles</strong> : (pour double précision) ce sont des nombres à virgule flottante de précision supérieure aux précédents (on les dit plus précis en raison du plus grand nombre de décimales possibles).</li>
 </ul>
 
-<p>Nous disposons même de plusieurs systèmes de numération !  Le décimal a pour base 10 (ce qui signifie qu'il se sert de chiffres entre 0 et 9 dans chaque rang), mais il en existe d'autres :</p>
+<p>Nous disposons même de plusieurs systèmes de numération ! Le décimal a pour base 10 (ce qui signifie qu'il se sert de chiffres entre 0 et 9 dans chaque rang), mais il en existe d'autres :</p>
 
 <ul>
  <li><strong>Binaire</strong> — utilisé par le plus bas niveau de langage des ordinateurs, il est composé de 0 et de 1.</li>
  <li><strong>Octal</strong> — de base 8, utilise les chiffres entre 0 et 7 dans chaque rang.</li>
- <li><strong>Hexadécimal</strong> — de base 16, utilise les chiffres entre 0 et 9 puis les lettres de a à f dans chaque rang. Vous avez peut-être déjà rencontré ces nombres en définissant des couleurs dans les <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">CSS</a>.</li>
+ <li><strong>Hexadécimal</strong> — de base 16, utilise les chiffres entre 0 et 9 puis les lettres de a à f dans chaque rang. Vous avez peut-être déjà rencontré ces nombres en définissant des couleurs dans les <a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#hexadecimal_values">CSS</a>.</li>
 </ul>
 
 <p><strong>Avant que votre cervelle ne se mette à bouillir, stop !</strong> Pour commencer, nous ne nous intéresserons qu'aux nombres décimaux dans ce cours ; vous aurez rarement besoin de vous servir des autres types, peut-être même jamais.</p>
@@ -65,15 +66,15 @@ translation_of: Learn/JavaScript/First_steps/Math
 
 <h3 id="Ce_ne_sont_que_des_nombres_pour_moi">Ce ne sont que des nombres pour moi</h3>
 
-<p>Amusons‑nous avec quelques chiffres pour nous familiariser avec la syntaxe de base dont nous aurons besoin. Entrez les commandes listées ci-dessous dans la <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">console JavaScript des outils de développement</a>, ou utilisez la simple console intégrée que vous voyez ci-dessous si vous préférez.</p>
+<p>Amusons‑nous avec quelques chiffres pour nous familiariser avec la syntaxe de base dont nous aurons besoin. Entrez les commandes listées ci-dessous dans la <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">console JavaScript des outils de développement</a>, ou utilisez la simple console intégrée que vous voyez ci-dessous si vous préférez.</p>
 
 <p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/variables/index.html", '100%', 300)}}</p>
 
 <p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/">Ouvrir la console dans une nouvelle fenêtre</a></strong></p>
 
 <ol>
- <li>Premièrement, déclarons une paire de variables et initialisons‑les respectivement  avec un entier et un nombre avec des décimales, puis saisissons les noms des variables à nouveau pour vérifier que tout est correct :
-  <pre class="brush: js notranslate">var myInt = 5;
+ <li>Premièrement, déclarons une paire de variables et initialisons‑les respectivement avec un entier et un nombre avec des décimales, puis saisissons les noms des variables à nouveau pour vérifier que tout est correct :
+  <pre class="brush: js">var myInt = 5;
 var myFloat = 6.667;
 myInt;
 myFloat;</pre>
@@ -81,7 +82,7 @@ myFloat;</pre>
  <li>Les nombres sont saisis sans guillemets — essayez de déclarer et initialiser deux ou trois variables de plus contenant des nombres avant de continuer.</li>
  <li>Maintenant vérifions que les deux variables d'origine sont du même type de donnée. En JavaScript, l'opérateur nommé {{jsxref("Operators/typeof", "typeof")}} est prévu pour cela. Entrez les deux lignes ci‑dessous comme indiqué :</li>
  <li>
-  <pre class="brush: js notranslate" dir="rtl">typeof myInt;
+  <pre class="brush: js" dir="rtl">typeof myInt;
 typeof myFloat;</pre>
  </li>
  <li><code>"number"</code> est renvoyé dans les deux cas — cela nous facilite les choses quand nous avons des nombres différents de types variés et que nous avons à les traiter de diverses façons. Ouf !</li>
@@ -89,31 +90,31 @@ typeof myFloat;</pre>
 
 <h3 id="Méthodes_de_nombres_utiles">Méthodes de nombres utiles</h3>
 
-<p>L'objet <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> , une instance qui représente tous les nombres standards que vous utiliserez dans votre JavaScript, a de nombreuses méthodes disponibles pour vous permettre de manipuler les nombres. Nous ne les étudierons pas tous en détail dans cet article car nous voulons qu'il reste une simple introduction et nous verrons seulement les bases essentielles pour le moment; cependant, une fois que vous aurez lu ce module plusieurs fois, il pourra être  utile de visiter les pages de référence d'objet et d'en apprendre plus sur ce qui est disponible.</p>
+<p>L'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> , une instance qui représente tous les nombres standards que vous utiliserez dans votre JavaScript, a de nombreuses méthodes disponibles pour vous permettre de manipuler les nombres. Nous ne les étudierons pas tous en détail dans cet article car nous voulons qu'il reste une simple introduction et nous verrons seulement les bases essentielles pour le moment; cependant, une fois que vous aurez lu ce module plusieurs fois, il pourra être utile de visiter les pages de référence d'objet et d'en apprendre plus sur ce qui est disponible.</p>
 
-<p>Par exemple, pour arrondir votre nombre avec un nombre fixe de décimales, utilisez la méthode <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed">toFixed()</a></code>. Tapez les lignes suivantes dans la <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Web_Console">console de votre navigateur</a>:</p>
+<p>Par exemple, pour arrondir votre nombre avec un nombre fixe de décimales, utilisez la méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed">toFixed()</a></code>. Tapez les lignes suivantes dans la <a href="/fr/docs/Tools/Web_Console">console de votre navigateur</a>:</p>
 
-<pre class="brush: js notranslate">let lotsOfDecimal = 1.766584958675746364;
+<pre class="brush: js">let lotsOfDecimal = 1.766584958675746364;
 lotsOfDecimal;
 let twoDecimalPlaces = lotsOfDecimal.toFixed(2);
 twoDecimalPlaces;</pre>
 
 <h3 id="Convertir_en_type_de_données_numérique">Convertir en type de données numérique</h3>
 
-<p>Parfois vous pourriez finir avec un nombre stocké de type "string", ce qui rendra difficile le fait d'effectuer un calcul avec. Ca arrive le plus souvent lorsqu'une donnée est entrée dans une entrée de <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms">formulaire</a>, et le <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text">type de donnée entré est du texte</a>. Il éxiste une façon de résoudre ce problème — passer la valeur de "string" dans le constructeur <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number">Number()</a></code> pour retourner  une version numérique de la même valeur.</p>
+<p>Parfois vous pourriez finir avec un nombre stocké de type "string", ce qui rendra difficile le fait d'effectuer un calcul avec. Ca arrive le plus souvent lorsqu'une donnée est entrée dans une entrée de <a href="/fr/docs/Learn/Forms">formulaire</a>, et le <a href="/fr/docs/Web/HTML/Element/Input/text">type de donnée entré est du texte</a>. Il éxiste une façon de résoudre ce problème — passer la valeur de "string" dans le constructeur <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/Number">Number()</a></code> pour retourner une version numérique de la même valeur.</p>
 
 <p>Par exemple, essayez de taper ces lignes dans votre console:</p>
 
-<pre class="brush: js notranslate">let myNumber = '74';
+<pre class="brush: js">let myNumber = '74';
 myNumber + 3;</pre>
 
 <p>Vous obtenez le résultat 743, et non pas 77, car <code>myNumber</code> est en fait défini en tant que "string". Vous pouvez tester en tapant la ligne suivante:</p>
 
-<pre class="brush: js notranslate">typeof myNumber;</pre>
+<pre class="brush: js">typeof myNumber;</pre>
 
 <p>Pour réparer le calcul, vous pouvez faire ceci:</p>
 
-<pre class="brush: js notranslate">Number(myNumber) + 3;</pre>
+<pre class="brush: js">Number(myNumber) + 3;</pre>
 
 <h2 id="Opérateurs_arithmétiques">Opérateurs arithmétiques</h2>
 
@@ -170,22 +171,22 @@ myNumber + 3;</pre>
 <p><strong>Note </strong>: Quelquefois les nombres impliqués dans des opérations sont nommés {{Glossary("Operand", "operands")}}.</p>
 </div>
 
-<p>Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, mais ce serait bien de tester si vous avez bien compris la syntaxe. Entrez les exemples ci‑dessous dans la <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">console des outils de développement JavaScript</a> ou servez vous de la console intégrée plus haut, comme vous préférez, pour vous familiariser avec la syntaxe.</p>
+<p>Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, mais ce serait bien de tester si vous avez bien compris la syntaxe. Entrez les exemples ci‑dessous dans la <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">console des outils de développement JavaScript</a> ou servez vous de la console intégrée plus haut, comme vous préférez, pour vous familiariser avec la syntaxe.</p>
 
 <ol>
  <li>Essayez de saisir quelques exemples simples de votre cru, comme :
-  <pre class="brush: js notranslate">10 + 7
+  <pre class="brush: js">10 + 7
 9 * 8
 60 % 3</pre>
  </li>
  <li>Déclarez et initialisez quelques variables, puis utilisez‑les dans des opérations — les variables se comporteront exactement comme les valeurs qu'elles contiennent pour les besoins de l'opération. Par exemple :
-  <pre class="brush: js notranslate">var num1 = 10;
+  <pre class="brush: js">var num1 = 10;
 var num2 = 50;
 9 * num1;
 num2 / num1;</pre>
  </li>
  <li>Pour terminer cette partie, entrez quelques expressions plus compliquées, comme :
-  <pre class="brush: js notranslate">5 + 10 * 3;
+  <pre class="brush: js">5 + 10 * 3;
 num2 % 9 * num1;
 num2 + num1 / 8 + 2;</pre>
  </li>
@@ -197,50 +198,50 @@ num2 + num1 / 8 + 2;</pre>
 
 <p>Revenons sur le dernier exemple ci‑dessus, en supposant que <code>num2</code> contient la valeur 50 et <code>num1</code> contient 10 (comme défini plus haut) :</p>
 
-<pre class="brush: js notranslate">num2 + num1 / 8 + 2;</pre>
+<pre class="brush: js">num2 + num1 / 8 + 2;</pre>
 
-<p>En tant qu'humain, vous pouvez lire  « <em>50 plus 10 égale 60 »</em>, puis « <em>8 plus 2 égale 10 »</em> et finalement « <em>60 divisé par 10 égale 6 »</em>.</p>
+<p>En tant qu'humain, vous pouvez lire « <em>50 plus 10 égale 60 »</em>, puis « <em>8 plus 2 égale 10 »</em> et finalement « <em>60 divisé par 10 égale 6 »</em>.</p>
 
-<p>Mais le navigateur <em>calcule « 10 sur 8 égale 1.25 »</em>, puis « <em>50 plus 1.25 plus 2 égale 53.25 »</em>.</p>
+<p>Mais le navigateur <em>calcule « 10 sur 8 égale 1.25 »</em>, puis « <em>50 plus 1.25 plus 2 égale 53.25 »</em>.</p>
 
 <p>Cela est dû aux <strong>priorités entre opérateurs</strong> — certains sont appliqués avant d'autres dans une opération (on parle d'une expression en programmation). En JavaScript, la priorité des opérateurs est identique à celle enseignée à l'école — Multiplication et Division sont toujours effectuées en premier, suivies d'Addition et Soustraction (le calcul est toujours exécuté de la gauche vers la droite).</p>
 
 <p>Si vous voulez contourner les règles de priorité des opérateurs, vous pouvez mettre entre parenthèses les parties que vous souhaitez voir calculées en premier. Pour obtenir un résultat égal à 6, nous devons donc écrire :</p>
 
-<pre class="brush: js notranslate">(num2 + num1) / (8 + 2);</pre>
+<pre class="brush: js">(num2 + num1) / (8 + 2);</pre>
 
 <p>Essayez-le et voyez.</p>
 
 <div class="note">
-<p><strong>Note </strong>: La liste complète de tous les opérateurs JavaScript et leur priorité peut être trouvée dans <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">Expressions and operators</a>.</p>
+<p><strong>Note </strong>: La liste complète de tous les opérateurs JavaScript et leur priorité peut être trouvée dans <a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#operator_precedence">Expressions and operators</a>.</p>
 </div>
 
 <h2 id="Opérateurs_dincrémentation_et_de_décrémentation">Opérateurs d'incrémentation et de décrémentation</h2>
 
-<p>Quelquefois vous aurez besoin d'ajouter ou retrancher 1 à une valeur de variable de manière répétitive. On effectue commodément cette opération à l'aide des opérateurs d'incrémentation (<code>++</code>) ou de décrementation (<code>--</code>). Nous nous sommes servis de <code>++</code> dans le jeu « Devinez le nombre » dans notre article <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">Première plongée dans le JavaScript</a> pour ajouter 1 à la variable <code>guessCount</code> pour décompter le nombre de suppositions restantes après chaque tour.</p>
+<p>Quelquefois vous aurez besoin d'ajouter ou retrancher 1 à une valeur de variable de manière répétitive. On effectue commodément cette opération à l'aide des opérateurs d'incrémentation (<code>++</code>) ou de décrementation (<code>--</code>). Nous nous sommes servis de <code>++</code> dans le jeu « Devinez le nombre » dans notre article <a href="/fr/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">Première plongée dans le JavaScript</a> pour ajouter 1 à la variable <code>guessCount</code> pour décompter le nombre de suppositions restantes après chaque tour.</p>
 
-<pre class="brush: js notranslate">guessCount++;</pre>
+<pre class="brush: js">guessCount++;</pre>
 
 <div class="note">
-<p><strong>Note</strong> : Ces opérateurs sont couramment utilisés dans des <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">boucles ;</a> nous les verrons plus loin dans ce cours. Par exemple, disons que vous voulez parcourir une liste de prix et ajouter les taxes à chacun. Vous utiliserez une boucle pour obtenir chaque valeur une à une et exécuterez le calcul voulu pour ajouter les taxes à chacune. L'incrément s'utilise pour aller à la valeur suivante. Nous avons mis un exemple concret montrant comment faire — voyez‑le tout de suite, examinez le code source et notez les opérateurs d'incrémentation ! Nous reverrons les boucles en détail plus loin dans ce cours.</p>
+<p><strong>Note</strong> : Ces opérateurs sont couramment utilisés dans des <a href="/fr/docs/Web/JavaScript/Guide/Loops_and_iteration">boucles ;</a> nous les verrons plus loin dans ce cours. Par exemple, disons que vous voulez parcourir une liste de prix et ajouter les taxes à chacun. Vous utiliserez une boucle pour obtenir chaque valeur une à une et exécuterez le calcul voulu pour ajouter les taxes à chacune. L'incrément s'utilise pour aller à la valeur suivante. Nous avons mis un exemple concret montrant comment faire — voyez‑le tout de suite, examinez le code source et notez les opérateurs d'incrémentation ! Nous reverrons les boucles en détail plus loin dans ce cours.</p>
 </div>
 
 <p>Jouons avec ces opérateurs dans la console. Notez d'abord qu'il n'est pas possible de les appliquer directement à un nombre, ce qui peut paraître étrange, mais cet opérateur assigne à une variable une nouvelle valeur mise à jour, il n'agit pas sur la valeur elle‑même. Ce qui suit renvoie une erreur :</p>
 
-<pre class="brush: js notranslate">3++;</pre>
+<pre class="brush: js">3++;</pre>
 
 <p>Vous ne pouvez donc incrémenter qu'une variable déjà existante. Essayez ceci :</p>
 
-<pre class="brush: js notranslate">var num1 = 4;
+<pre class="brush: js">var num1 = 4;
 num1++;</pre>
 
 <p>Ok, curieuse la ligne 2 ! En écrivant cela, elle renvoie la valeur 4 — c'est dû au fait que l'explorateur renvoie la valeur courante, <em>puis</em> incrémente la variable. Vous constaterez qu'elle a bien été incrémentée si vous demandez de la revoir :</p>
 
-<pre class="brush: js notranslate">num1;</pre>
+<pre class="brush: js">num1;</pre>
 
 <p>C'est pareil avec <code>--</code> : essayez ce qui suit</p>
 
-<pre class="brush: js notranslate">var num2 = 6;
+<pre class="brush: js">var num2 = 6;
 num2--;
 num2;</pre>
 
@@ -252,7 +253,7 @@ num2;</pre>
 
 <p>Les opérateurs d'assignation sont ceux qui fixent la valeur d'une variable. Nous avons déjà utilisé plusieurs fois le plus élémentaire, <code>=</code> — il donne à la variable de gauche la valeur indiquée à droite :</p>
 
-<pre class="brush: js notranslate">var x = 3; // x contient la valeur 3
+<pre class="brush: js">var x = 3; // x contient la valeur 3
 var y = 4; // y contient la valeur 4
 x = y; // x contient maintenant la même valeur que y, 4</pre>
 
@@ -312,12 +313,12 @@ x = y; // x contient maintenant la même valeur que y, 4</pre>
 
 <p>Notez que vous pouvez opportunément utiliser une autre variable comme opérateur sur la droite de chaque expression, par exemple :</p>
 
-<pre class="brush: js notranslate">var x = 3; // x contient la valeur 3
+<pre class="brush: js">var x = 3; // x contient la valeur 3
 var y = 4; // y contient la valeur 4
 x *= y; // x contient maintenant la valeur 12</pre>
 
 <div class="note">
-<p><strong>Note </strong>: Il y a des tas d'<a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">autres opérateurs d'assignation disponibles</a>, mais ceux‑ci sont les plus courants que vous devez les connaître dès maintenant.</p>
+<p><strong>Note </strong>: Il y a des tas d'<a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment_operators">autres opérateurs d'assignation disponibles</a>, mais ceux‑ci sont les plus courants que vous devez les connaître dès maintenant.</p>
 </div>
 
 <h2 id="Apprentissage_actif_dimensionner_une_boîte_à_canevas">Apprentissage actif : dimensionner une boîte à canevas</h2>
@@ -393,7 +394,7 @@ x *= y; // x contient maintenant la valeur 12</pre>
 </table>
 
 <div class="note">
-<p><strong>Note </strong>: Vous verrez peut‑être certaines personnes utiliser <code>==</code> et <code>!=</code> pour leurs test d'égalité ou non-égalité. Ces opérateurs sont valides en JavaScript, mais différents de <code>===</code>/<code>!==</code>. Les versions avec deux caractères testent si les valeurs sont les mêmes, mais pas si les types de données sont les mêmes.  Les versions strictes à trois caractères testent à la fois l'égalité des valeurs <em>et</em> des types de données. Il y a moins d'erreurs avec les versions strictes, donc nous vous engageons à les utiliser dans tous les cas.</p>
+<p><strong>Note </strong>: Vous verrez peut‑être certaines personnes utiliser <code>==</code> et <code>!=</code> pour leurs test d'égalité ou non-égalité. Ces opérateurs sont valides en JavaScript, mais différents de <code>===</code>/<code>!==</code>. Les versions avec deux caractères testent si les valeurs sont les mêmes, mais pas si les types de données sont les mêmes. Les versions strictes à trois caractères testent à la fois l'égalité des valeurs <em>et</em> des types de données. Il y a moins d'erreurs avec les versions strictes, donc nous vous engageons à les utiliser dans tous les cas.</p>
 </div>
 
 <p>Si vous entrez certaines de ces valeurs dans une console, vous constaterez que toutes renvoient une valeur <code>true</code>/<code>false</code> — les booléens mentionnés dans l'article précédent. Ces opérateurs sont très utiles car il nous permettent de prendre des décisions dans le code, et ils sont utilisés chaque fois que nous avons besoin de faire un choix. Par exemple, les booléens s'utilisent pour :</p>
@@ -407,11 +408,11 @@ x *= y; // x contient maintenant la valeur 12</pre>
 
 <p>Nous verrons comment coder cette logique quand nous étudierons les directives conditionnelles dans un article ultérieur. Pour le moment, regardons un exemple rapide :</p>
 
-<pre class="brush: html notranslate">&lt;button&gt;Démarrer la machine&lt;/button&gt;
+<pre class="brush: html">&lt;button&gt;Démarrer la machine&lt;/button&gt;
 &lt;p&gt;La machine est arrêtée.&lt;/p&gt;
 </pre>
 
-<pre class="brush: js notranslate">var btn = document.querySelector('button');
+<pre class="brush: js">var btn = document.querySelector('button');
 var txt = document.querySelector('p');
 
 btn.addEventListener('click', updateBtn);
@@ -443,7 +444,7 @@ function updateBtn() {
 <p>Dans l'article suivant, nous étudierons le texte et les façons dont JavaScript nous permet de le manipuler.</p>
 
 <div class="note">
-<p><strong>Note</strong> : Si les Maths vous plaisent et que vous souhaitez en savoir plus sur la manière dont elles sont implémentées en JavaScript, vous trouverez plus de précisions dans la section principale JavaScript du MDN. Une grande place est réservée dans ces articles aux <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Nombres et dates</a> et aux <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions et opérateurs</a>.</p>
+<p><strong>Note</strong> : Si les Maths vous plaisent et que vous souhaitez en savoir plus sur la manière dont elles sont implémentées en JavaScript, vous trouverez plus de précisions dans la section principale JavaScript du MDN. Une grande place est réservée dans ces articles aux <a href="/fr/docs/Web/JavaScript/Guide/Numbers_and_dates">Nombres et dates</a> et aux <a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions et opérateurs</a>.</p>
 </div>
 
 <p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p>
diff --git a/files/fr/learn/javascript/first_steps/silly_story_generator/index.html b/files/fr/learn/javascript/first_steps/silly_story_generator/index.html
index b2eae8fff5..ebc7230da3 100644
--- a/files/fr/learn/javascript/first_steps/silly_story_generator/index.html
+++ b/files/fr/learn/javascript/first_steps/silly_story_generator/index.html
@@ -36,7 +36,7 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator
 </ul>
 
 <div class="note">
-<p><strong>Note</strong>: Vous pouvez aussi utiliser un site tel que que <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour votre évaluation. Vous pouvez copier-coller le HTML, CSS et JavaScript vers l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne propose pas d'onglet JavaScript séparé, n'hésitez pas à en intégrer un dans une balise <code>&lt;script&gt;</code> au sein de la page HTML.</p>
+<p><strong>Note</strong>: Vous pouvez aussi utiliser un site tel que que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a> pour votre évaluation. Vous pouvez copier-coller le HTML, CSS et JavaScript vers l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne propose pas d'onglet JavaScript séparé, n'hésitez pas à en intégrer un dans une balise <code>&lt;script&gt;</code> au sein de la page HTML.</p>
 </div>
 
 <h2 id="Résumé_du_projet">Résumé du projet</h2>
@@ -52,9 +52,9 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator
 
 <p>Les captures d'écran suivantes montrent un exemple de ce que le programme terminé doit afficher :</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13667/assessment-1.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+<p><img alt="" src="assessment-1.png"></p>
 
-<p>Pour vous faire une idée un peu plus précise, <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">jetez un œil à l'exemple terminé</a> (mais sans regarder le code source !)</p>
+<p>Pour vous faire une idée un peu plus précise, <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">jetez un œil à l'exemple terminé</a> (mais sans regarder le code source !)</p>
 
 <h2 id="Les_étapes">Les étapes</h2>
 
@@ -119,7 +119,7 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator
  <li>
   <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'red';</pre>
  </li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> est une méthode JavaScript intégrée qui arrondit simplement le résultat d'un calcul à l'entier le plus proche.</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> est une méthode JavaScript intégrée qui arrondit simplement le résultat d'un calcul à l'entier le plus proche.</li>
 </ul>
 
 <h2 id="Évaluation">Évaluation</h2>
@@ -131,13 +131,13 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator
 <h2 id="Dans_ce_module">Dans ce module</h2>
 
 <ul>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
 </ul>
diff --git a/files/fr/learn/server-side/django/development_environment/index.html b/files/fr/learn/server-side/django/development_environment/index.html
index b47662e6ff..4ba256c3a7 100644
--- a/files/fr/learn/server-side/django/development_environment/index.html
+++ b/files/fr/learn/server-side/django/development_environment/index.html
@@ -24,19 +24,19 @@ translation_of: Learn/Server-side/Django/development_environment
 
 <h2 id="Aperçu_de_lenvironnement_de_développement_Django">Aperçu de l'environnement de développement Django</h2>
 
-<p>Django simplifie le processus de configuration de votre ordinateur pour que vous puissiez rapidement commencer à développer des applications web. Cette section explique ce que vous aurez dans l'environnement de développement, et vous fournit un aperçu de certaines options de configuration et d'installation. Le reste de l'article explique la méthode <em>recommandée </em>pour installer l'environnement de développement Django sur Ubuntu, macOS et Windows, et comment le tester.</p>
+<p>Django simplifie le processus de configuration de votre ordinateur pour que vous puissiez rapidement commencer à développer des applications web. Cette section explique ce que vous aurez dans l'environnement de développement, et vous fournit un aperçu de certaines options de configuration et d'installation. Le reste de l'article explique la méthode <em>recommandée </em>pour installer l'environnement de développement Django sur Ubuntu, macOS et Windows, et comment le tester.</p>
 
 <h3 id="Quest-ce_que_lenvironnement_de_développement_Django">Qu'est-ce que l'environnement de développement Django ?</h3>
 
 <p>L'environnement de développement correspond à une installation de Django sur votre ordinateur local que vous pouvez utiliser pour développer et tester des applications Django avant de les déployer sur un environnement de production.</p>
 
-<p>Le principal outil que fournit Django est un ensemble de scripts Python utilisés pour créer et travailler avec des projets Django, ainsi qu'un simple <em>serveur web de développement </em>que vous pouvez utiliser pour tester en local (i.e. sur votre propre ordinateur, pas sur un serveur web externe) des applications web Django dans votre navigateur web.</p>
+<p>Le principal outil que fournit Django est un ensemble de scripts Python utilisés pour créer et travailler avec des projets Django, ainsi qu'un simple <em>serveur web de développement </em>que vous pouvez utiliser pour tester en local (i.e. sur votre propre ordinateur, pas sur un serveur web externe) des applications web Django dans votre navigateur web.</p>
 
-<p>Il y a plusieurs autres outils annexes, qui font partie de l'environnement de développement, que nous ne couvrirons pas ici. Cela inclut des choses comme un <a href="/en-US/docs/Learn/Common_questions/Available_text_editors">éditeur de texte</a> ou un IDE pour éditer votre code, et un outil de gestion de contrôle de version comme Git pour gérer en toute prudence les différentes versions de votre code. Nous supposerons ici que vous avez déjà un éditeur de texte installé.</p>
+<p>Il y a plusieurs autres outils annexes, qui font partie de l'environnement de développement, que nous ne couvrirons pas ici. Cela inclut des choses comme un <a href="/fr/docs/Learn/Common_questions/Available_text_editors">éditeur de texte</a> ou un IDE pour éditer votre code, et un outil de gestion de contrôle de version comme Git pour gérer en toute prudence les différentes versions de votre code. Nous supposerons ici que vous avez déjà un éditeur de texte installé.</p>
 
-<h3 id="Quelles_sont_les_options_dinstallation_de_Django">Quelles sont les options d'installation de Django ?</h3>
+<h3 id="Quelles_sont_les_options_dinstallation_de_Django">Quelles sont les options d'installation de Django ?</h3>
 
-<p>Django est extrêmement flexible sur sa manière d'être installé et configuré. Django peut-être :</p>
+<p>Django est extrêmement flexible sur sa manière d'être installé et configuré. Django peut-être :</p>
 
 <ul>
  <li>Installé sur divers systèmes d'exploitation.</li>
@@ -45,10 +45,10 @@ translation_of: Learn/Server-side/Django/development_environment
  <li>Lancé depuis l'environnement principal de Python ou depuis des environnements virtuels Python séparés.</li>
 </ul>
 
-<p>Chacune de ces options requiert une configuration et une installation légèrement différente. Les sous-sections ci-dessous vous expliquent différents choix. Dans le reste de l'article, nous vous montrerons comment installer Django sur un nombre restreint de systèmes d'exploitation, et nous supposerons que cette installation aura été suivie pour tout le reste du module.</p>
+<p>Chacune de ces options requiert une configuration et une installation légèrement différente. Les sous-sections ci-dessous vous expliquent différents choix. Dans le reste de l'article, nous vous montrerons comment installer Django sur un nombre restreint de systèmes d'exploitation, et nous supposerons que cette installation aura été suivie pour tout le reste du module.</p>
 
 <div class="note">
-<p><strong>Note</strong>: D'autres options d'installation possibles sont traitées dans la documentation officielle de Django. Les liens vers la <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment$translate?tolocale=fr#">documentation appropriée peuvent-être trouvés ci-dessous</a>.</p>
+<p><strong>Note</strong>: D'autres options d'installation possibles sont traitées dans la documentation officielle de Django. Les liens vers la <a href="/fr/docs/Learn/Server-side/Django/development_environment">documentation appropriée peuvent-être trouvés ci-dessous</a>.</p>
 </div>
 
 <h4 id="Quels_systèmes_dexploitation_sont_supportés">Quels systèmes d'exploitation sont supportés ?</h4>
@@ -81,12 +81,12 @@ translation_of: Learn/Server-side/Django/development_environment
 
 <h4 id="Quelle_base_de_données">Quelle base de données ?</h4>
 
-<p>Django supporte quatre bases de données principales (PostgreSQL, MySQL, Oracle et SQLite), et des librairies fournies par la communauté offrent différents niveaux de support pour d'autre bases de données SQL et NoSQL populaires. Nous vous recommandons de choisir la même base de données pour la production et le développement (bien que Django puisse abstraire plusieurs différences entre les bases de données en utilisant son Mapper Relationnel-Objet (ORM), il reste tout de même certains <a href="https://docs.djangoproject.com/en/2.1/ref/databases/">problèmes potentiels</a> qu'il vaut mieux éviter).</p>
+<p>Django supporte quatre bases de données principales (PostgreSQL, MySQL, Oracle et SQLite), et des librairies fournies par la communauté offrent différents niveaux de support pour d'autre bases de données SQL et NoSQL populaires. Nous vous recommandons de choisir la même base de données pour la production et le développement (bien que Django puisse abstraire plusieurs différences entre les bases de données en utilisant son Mapper Relationnel-Objet (ORM), il reste tout de même certains <a href="https://docs.djangoproject.com/en/2.1/ref/databases/">problèmes potentiels</a> qu'il vaut mieux éviter).</p>
 
 <p>Dans cet article (et quasiment tout le module), nous utiliserons la base <em>SQLite</em>, qui sauvegarde ses données dans des fichiers. SQLite a été conçu pour être utilisé comme une base de données légère, mais elle ne peut pas supporter un haut niveau de compétition. Elle est cependant un excellent choix pour des applications qui sont prioritairement en lecture seule.</p>
 
 <div class="note">
-<p><strong>Note</strong>: Django est configuré pour utiliser SQLite par défaut lorsque vous démarrez le projet de votre site web en utilisant les outils standards (<em>django-admin</em>). C'est un très bon choix lorsque vous débutez car elle ne requiert aucune configuration ou installation particulière.</p>
+<p><strong>Note</strong>: Django est configuré pour utiliser SQLite par défaut lorsque vous démarrez le projet de votre site web en utilisant les outils standards (<em>django-admin</em>). C'est un très bon choix lorsque vous débutez car elle ne requiert aucune configuration ou installation particulière.</p>
 </div>
 
 <h4 id="Installation_globale_ou_dans_un_environnement_virtuel_Python">Installation globale ou dans un environnement virtuel Python ?</h4>
@@ -99,13 +99,13 @@ translation_of: Learn/Server-side/Django/development_environment
 
 <p>Si vous installez Django dans l'environnement par défaut/global, vous ne pourrez alors cibler qu'une seule version de Django sur votre machine. Cela peut devenir un problème si vous souhaitez créer de nouveaux sites web (utilisant la dernière version de Django) tout en maintenant d'autres sites web dépendant de versions antérieures.</p>
 
-<p>Ainsi, un développeur Python/Django confirmé lance généralement ses applications Python dans des <em>environnements virtuels Python</em> indépendants. Cela permet d'avoir plusieurs environnements Django sur un seul et même ordinateur. L'équipe de développement de Django elle-même recommande d'utiliser des environnements virtuels Python.</p>
+<p>Ainsi, un développeur Python/Django confirmé lance généralement ses applications Python dans des <em>environnements virtuels Python</em> indépendants. Cela permet d'avoir plusieurs environnements Django sur un seul et même ordinateur. L'équipe de développement de Django elle-même recommande d'utiliser des environnements virtuels Python.</p>
 
 <p>Ce module suppose que vous avez installé Django dans un environnement virtuel, et nous vous montrons comment le faire ci-dessous.</p>
 
 <h2 id="Installer_Python_3">Installer Python 3</h2>
 
-<p>Si vous souhaitez utiliser Django, vous devrez installer Python sur votre système d'exploitation. Si vous utilisez <em>Python 3</em>, vous aurez alors aussi besoin de l'outil <a href="https://pypi.python.org/pypi">Python Package Index</a> — <em>pip3</em> — qui est utilisé pour gérer (installer, mettre à jour, supprimer) les packages/librairies Python qui seront utilisés par Django et vos autres applications Python.</p>
+<p>Si vous souhaitez utiliser Django, vous devrez installer Python sur votre système d'exploitation. Si vous utilisez <em>Python 3</em>, vous aurez alors aussi besoin de l'outil <a href="https://pypi.python.org/pypi">Python Package Index</a> — <em>pip3</em> — qui est utilisé pour gérer (installer, mettre à jour, supprimer) les packages/librairies Python qui seront utilisés par Django et vos autres applications Python.</p>
 
 <p>Cette section décrit brièvement comment vérifier quelle version de Python sont disponibles, et comment installer de nouvelles versions si nécessaire, sur Ubuntu Linux 18.04, macOS et Windows 10.</p>
 
@@ -120,10 +120,9 @@ translation_of: Learn/Server-side/Django/development_environment
 <pre class="brush: bash"><span style="line-height: 1.5;">python3 -V
  Python 3.6.6</span></pre>
 
-<p>Toutefois, l'outil d'Index des Packages Python dont vous aurez besoin pour installer des packages avec Python 3 (y compris Django) n'est <strong>pas </strong>disponible par défaut. Vous pouvez installer pip3 avec le terminal bash avec :</p>
+<p>Toutefois, l'outil d'Index des Packages Python dont vous aurez besoin pour installer des packages avec Python 3 (y compris Django) n'est <strong>pas </strong>disponible par défaut. Vous pouvez installer pip3 avec le terminal bash avec :</p>
 
-<pre class="brush: bash">sudo apt install python3-pip
-</pre>
+<pre class="brush: bash">sudo apt install python3-pip</pre>
 
 <h3 id="macOS">macOS</h3>
 
@@ -132,13 +131,13 @@ translation_of: Learn/Server-side/Django/development_environment
 <pre class="brush: bash"><span style="line-height: 1.5;">python3 -V
  </span>-bash: python3: command not found</pre>
 
-<p>Vous pouvez facilement installer Python 3 (ainsi que l'outil <em>pip3</em>) sur <a href="https://www.python.org/">python.org</a>:</p>
+<p>Vous pouvez facilement installer Python 3 (ainsi que l'outil <em>pip3</em>) sur <a href="https://www.python.org/">python.org</a>:</p>
 
 <ol>
  <li>Téléchargez l'installeur requis :
   <ol>
-   <li>Allez sur <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li>
-   <li>Sélectionnez le bouton <strong>Download Python 3.7.2</strong> (le numéro de version mineure peut varier).</li>
+   <li>Allez sur <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li>
+   <li>Sélectionnez le bouton <strong>Download Python 3.7.2</strong> (le numéro de version mineure peut varier).</li>
   </ol>
  </li>
  <li>Localisez le fichier en utilisant le <em>Finder</em>, puis double-cliquez le fichier package. Suivez les consignes d'installation.</li>
@@ -161,8 +160,8 @@ translation_of: Learn/Server-side/Django/development_environment
 <ol>
  <li>Téléchargez l'installeur requis :
   <ol>
-   <li>Allez sur <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li>
-   <li>Sélectionnez le bouton <strong>Download Python 3.7.2</strong> (le numéro de version mineure peut varier).</li>
+   <li>Allez sur <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li>
+   <li>Sélectionnez le bouton <strong>Download Python 3.7.2</strong> (le numéro de version mineure peut varier).</li>
   </ol>
  </li>
  <li>Installez Python en double-cliquant sur le fichier télécharger puis en suivant les consignes d'installation</li>
@@ -186,66 +185,64 @@ translation_of: Learn/Server-side/Django/development_environment
 
 <h2 id="Utiliser_Django_dans_un_environnement_virtuel_Python">Utiliser Django dans un environnement virtuel Python</h2>
 
-<p>Les librairies que nous utiliserons pour créer nos environnements virtuels seront <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> (Linux et macOS) et <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> (Windows), , qui à leur tour utilisent l'outil <a href="https://developer.mozilla.org/en-US/docs/Python/Virtualenv">virtualenv</a>. Les outils d'habillage permettent de créer une interface consistante pour gérer les interfaces sur toutes les plateformes.</p>
+<p>Les librairies que nous utiliserons pour créer nos environnements virtuels seront <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> (Linux et macOS) et <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> (Windows), , qui à leur tour utilisent l'outil <a href="/fr/docs/Python/Virtualenv">virtualenv</a>. Les outils d'habillage permettent de créer une interface consistante pour gérer les interfaces sur toutes les plateformes.</p>
 
 <h3 id="Installer_lutilitaire_denvironnement_virtuel">Installer l'utilitaire d'environnement virtuel</h3>
 
 <h4 id="Mise_en_place_de_lenvironnement_virtuel_sur_Ubuntu">Mise en place de l'environnement virtuel sur Ubuntu</h4>
 
-<p>Après avoir installé Python et pip vous pouvez installer <em>virtualenvwrapper</em> (qui inclut <em>virtualenv</em>). Le guide d'installation officiel peut être trouvé <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">ici</a>, ou bien vous pouvez suivre les instructions ci-dessous.</p>
+<p>Après avoir installé Python et pip vous pouvez installer <em>virtualenvwrapper</em> (qui inclut <em>virtualenv</em>). Le guide d'installation officiel peut être trouvé <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">ici</a>, ou bien vous pouvez suivre les instructions ci-dessous.</p>
 
-<p>Installer l'outil en utilisant <em>pip3</em>:</p>
+<p>Installer l'outil en utilisant <em>pip3</em>:</p>
 
-<pre class="brush: bash"><code>sudo pip3 install virtualenvwrapper</code></pre>
+<pre class="brush: bash">sudo pip3 install virtualenvwrapper</pre>
 
-<p>Ajoutez ensuite les lignes suivantes à la fin de votre fichier de configuration shell (le fichier caché <strong>.bashrc</strong> dans votre répertoire home). Elles indiquent les endroits où vos environnements virtuels seront installés, l'emplacement de vos projets de développement, et l'emplacement du script installé avec ce package :</p>
+<p>Ajoutez ensuite les lignes suivantes à la fin de votre fichier de configuration shell (le fichier caché <strong>.bashrc</strong> dans votre répertoire home). Elles indiquent les endroits où vos environnements virtuels seront installés, l'emplacement de vos projets de développement, et l'emplacement du script installé avec ce package :</p>
 
-<pre class="brush: bash"><code>export WORKON_HOME=$HOME/.virtualenvs
+<pre class="brush: bash">export WORKON_HOME=$HOME/.virtualenvs
 export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
 export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 '
 export PROJECT_HOME=$HOME/Devel
-source /usr/local/bin/virtualenvwrapper.sh</code>
-</pre>
+source /usr/local/bin/virtualenvwrapper.sh</pre>
 
 <div class="note">
-<p><strong>Note</strong>: Les variables <code>VIRTUALENVWRAPPER_PYTHON</code> et <code>VIRTUALENVWRAPPER_VIRTUALENV_ARGS </code>pointent vers l'emplacement d'installation par défaut de Python3, et <code>source /usr/local/bin/virtualenvwrapper.sh</code> pointe vers l'emplacement par défaut du script <code>virtualenvwrapper.sh</code>. Si le <em>virtualenv</em> ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).<br>
+<p><strong>Note</strong>: Les variables <code>VIRTUALENVWRAPPER_PYTHON</code> et <code>VIRTUALENVWRAPPER_VIRTUALENV_ARGS </code>pointent vers l'emplacement d'installation par défaut de Python3, et <code>source /usr/local/bin/virtualenvwrapper.sh</code> pointe vers l'emplacement par défaut du script <code>virtualenvwrapper.sh</code>. Si le <em>virtualenv</em> ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).<br>
  <br>
- Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes <code>which virtualenvwrapper.sh</code> et <code>which python3</code>.</p>
+ Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes <code>which virtualenvwrapper.sh</code> et <code>which python3</code>.</p>
 </div>
 
 <p>Puis relancez le fichier de configuration en exécutant la commande suivante dans votre terminal :</p>
 
-<pre class="brush: bash"><code>source ~/.bashrc</code></pre>
+<pre class="brush: bash">source ~/.bashrc</pre>
 
 <p>Vous devriez alors voir apparaître plusieurs lignes de script semblables à celles ci-dessous :</p>
 
-<pre class="brush: bash"><code>virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject
+<pre class="brush: bash">virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject
 virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject
 ...
 virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate
 virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate
-virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details</code>
-</pre>
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details</pre>
 
-<p>Vous pouvez maintenant créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code>.</p>
+<p>Vous pouvez maintenant créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code>.</p>
 
 <h4 id="Mise_en_place_de_lenvironnement_virtuel_sur_macOS">Mise en place de l'environnement virtuel sur macOS</h4>
 
-<p>L'installation de <em>virtualenvwrapper</em> on sur macOS est quasiment identique à celle sur Ubuntu (une fois de plus, vous pouvez suivre les instructions du <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">guide officiel d'installation</a> ou suivre les indications ci-dessous).</p>
+<p>L'installation de <em>virtualenvwrapper</em> on sur macOS est quasiment identique à celle sur Ubuntu (une fois de plus, vous pouvez suivre les instructions du <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">guide officiel d'installation</a> ou suivre les indications ci-dessous).</p>
 
-<p>Installez <em>virtualenvwrapper</em> (ainsi que <em>virtualenv</em>) en utilisant <em>pip</em> comme indiqué ci-dessous.</p>
+<p>Installez <em>virtualenvwrapper</em> (ainsi que <em>virtualenv</em>) en utilisant <em>pip</em> comme indiqué ci-dessous.</p>
 
-<pre class="brush: bash"><code>sudo pip3 install virtualenvwrapper</code></pre>
+<pre class="brush: bash">sudo pip3 install virtualenvwrapper</pre>
 
 <p>Puis ajoutez les lignes suivantes à la fin de votre fichier de configuration shell.</p>
 
-<pre class="brush: bash"><code>export WORKON_HOME=$HOME/.virtualenvs
+<pre class="brush: bash">export WORKON_HOME=$HOME/.virtualenvs
 export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
 export PROJECT_HOME=$HOME/Devel
-source /usr/local/bin/virtualenvwrapper.sh</code></pre>
+source /usr/local/bin/virtualenvwrapper.sh</pre>
 
 <div class="note">
-<p><strong>Note</strong>: La variable <code>VIRTUALENVWRAPPER_PYTHON</code> pointe vers l'emplacement d'installation par défaut de Python3, et <code>source /usr/local/bin/virtualenvwrapper.sh</code> pointe vers l'emplacement par défaut du script <code>virtualenvwrapper.sh</code>. Si le <em>virtualenv</em> ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).</p>
+<p><strong>Note</strong>: La variable <code>VIRTUALENVWRAPPER_PYTHON</code> pointe vers l'emplacement d'installation par défaut de Python3, et <code>source /usr/local/bin/virtualenvwrapper.sh</code> pointe vers l'emplacement par défaut du script <code>virtualenvwrapper.sh</code>. Si le <em>virtualenv</em> ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).</p>
 
 <p>Par exemple, une installation test sur macOS a résulté en l'ajout des lignes suivantes dans le fichier startup :</p>
 
@@ -254,51 +251,49 @@ export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.
 export PROJECT_HOME=$HOME/Devel
 source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh</pre>
 
-<p>Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes <code>which virtualenvwrapper.sh</code> et <code>which python3</code>.</p>
+<p>Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes <code>which virtualenvwrapper.sh</code> et <code>which python3</code>.</p>
 </div>
 
-<p>Ce sont les mêmes lignes que pour Ubuntu, mais le nom du fichier de configuration caché du répertoire home est différent : <strong>.bash_profile</strong> dans votre répertoire home.</p>
+<p>Ce sont les mêmes lignes que pour Ubuntu, mais le nom du fichier de configuration caché du répertoire home est différent : <strong>.bash_profile</strong> dans votre répertoire home.</p>
 
 <div class="note">
 <p><strong>Note</strong>: Si vous n'arrivez pas à trouver le fichier <strong>.bash_profile</strong> depuis le finder, vous pouvez aussi l'ouvrir depuis le terminal en utilisant nano.</p>
 
 <p>La commande sera la suivante :</p>
 
-<pre><code>cd ~  # Naviguer vers le répertoire home
+<pre>>cd ~  # Naviguer vers le répertoire home
 ls -la # Listez le contenu du répertoire. Vous devriez voir .bash_profile.
 nano .bash_profile # Ouvrez le fichier avec l'éditeur de texte nano, depuis le terminal.
 # Allez à la fin du fichier, puis copiez-collez les lignes ci-dessus.
-# Utilisez Ctrl+X pour quitter nano, sélectionnez Y pour sauvegarder le fichier.</code>
-</pre>
+# Utilisez Ctrl+X pour quitter nano, sélectionnez Y pour sauvegarder le fichier.</pre>
 </div>
 
 <p>Puis relancez le fichier de configuration en appelant la ligne suivante depuis le terminal :</p>
 
-<pre class="brush: bash"><code>source ~/.bash_profile</code></pre>
+<pre class="brush: bash">source ~/.bash_profile</pre>
 
-<p>Vous devriez alors voir apparaître plusieurs lignes de script (les mêmes scripts que ceux présents dans l'installation Ubuntu). Vous devriez maintenant pouvoir créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code>.</p>
+<p>Vous devriez alors voir apparaître plusieurs lignes de script (les mêmes scripts que ceux présents dans l'installation Ubuntu). Vous devriez maintenant pouvoir créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code>.</p>
 
 <h4 id="Mise_en_place_de_lenvironnement_virtuel_sur_Windows_10">Mise en place de l'environnement virtuel sur Windows 10</h4>
 
-<p>Installer <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> est encore plus simple qu'installer <em>virtualenvwrapper</em> , parce que vous n'avez pas besoin de configurer là où l'outil enregistre les informations de l'environnement virtuel (il y a des valeurs par défaut). Tout ce que vous avez besoin de faire est de lancer la commande suivante depuis l'invite de commande :</p>
+<p>Installer <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> est encore plus simple qu'installer <em>virtualenvwrapper</em> , parce que vous n'avez pas besoin de configurer là où l'outil enregistre les informations de l'environnement virtuel (il y a des valeurs par défaut). Tout ce que vous avez besoin de faire est de lancer la commande suivante depuis l'invite de commande :</p>
 
-<pre><code>pip3 install virtualenvwrapper-win</code></pre>
+<pre>pip3 install virtualenvwrapper-win</pre>
 
-<p>Vous pouvez désormais créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code></p>
+<p>Vous pouvez désormais créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code></p>
 
 <h3 id="Créer_un_environnement_virtuel">Créer un environnement virtuel</h3>
 
-<p>Maintenant que vous avez installé <em>virtualenvwrapper</em> ou <em>virtualenvwrapper-win</em> , travailler avec des environnements virtuels sera une tâche très similaire entre chaque plateforme.</p>
+<p>Maintenant que vous avez installé <em>virtualenvwrapper</em> ou <em>virtualenvwrapper-win</em> , travailler avec des environnements virtuels sera une tâche très similaire entre chaque plateforme.</p>
 
-<p>Vous pouvez désormais créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code>. Lors de son exécution, vous pourrez voir l'environnement être configuré (ce que vous verrez changera légèrement en fonction de votre plateforme). Lorsque l'exécution de la commande sera terminée, votre environnement virtuel sera actif — vous pouvez voir au début de la ligne de commande le nom de votre environnement entre parenthèses (nous vous montrons le résultat pour Ubuntu ci-dessous, mais la dernière ligne est similaire sur Windows/macOS).</p>
+<p>Vous pouvez désormais créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code>. Lors de son exécution, vous pourrez voir l'environnement être configuré (ce que vous verrez changera légèrement en fonction de votre plateforme). Lorsque l'exécution de la commande sera terminée, votre environnement virtuel sera actif — vous pouvez voir au début de la ligne de commande le nom de votre environnement entre parenthèses (nous vous montrons le résultat pour Ubuntu ci-dessous, mais la dernière ligne est similaire sur Windows/macOS).</p>
 
-<pre><code>$ mkvirtualenv my_django_environment
+<pre>$ mkvirtualenv my_django_environment
 
 Running virtualenv with interpreter /usr/bin/python3
 ...
 virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details
-(my_django_environment) ubuntu@ubuntu:~$</code>
-</pre>
+(my_django_environment) ubuntu@ubuntu:~$</pre>
 
 <p>Maintenant que vous êtes dans votre environnement virtuel vous pouvez installer Django et commencer à développer.</p>
 
@@ -311,18 +306,17 @@ virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get
 <p>Il y a quelques commandes que vous devriez connaître (il y en a davantage dans la documentation de l'outil, mais celles-ci sont celles que vous utiliserez le plus souvent) :</p>
 
 <ul>
- <li><code>deactivate</code> — Permet de sortir de l'environnement virtuel Python actuel</li>
- <li><code>workon</code> — Lister tous les environnements virtuels disponibles</li>
- <li><code>workon name_of_environment</code> — Activer l'environnement virtuel spécifié</li>
- <li><code>rmvirtualenv name_of_environment</code> — Supprimer l'environnement virtuel spécifié</li>
+ <li><code>deactivate</code> — Permet de sortir de l'environnement virtuel Python actuel</li>
+ <li><code>workon</code> — Lister tous les environnements virtuels disponibles</li>
+ <li><code>workon name_of_environment</code> — Activer l'environnement virtuel spécifié</li>
+ <li><code>rmvirtualenv name_of_environment</code> — Supprimer l'environnement virtuel spécifié</li>
 </ul>
 
 <h2 id="Installer_Django">Installer Django</h2>
 
-<p>Une fois que vous avez créé votre environnement virtuel, et que vous avez utilisé <code>workon</code> pour y entrer, vous pouvez utiliser <em>pip3 </em>pour installer Django. </p>
+<p>Une fois que vous avez créé votre environnement virtuel, et que vous avez utilisé <code>workon</code> pour y entrer, vous pouvez utiliser <em>pip3 </em>pour installer Django. </p>
 
-<pre class="brush: bash">pip3 install django
-</pre>
+<pre class="brush: bash">pip3 install django</pre>
 
 <p>Vous pouvez tester l'installation de Django en exécutant la commande suivante (celle-ci ne fait que tester le fait que Python puisse trouver le module Django) :</p>
 
@@ -332,8 +326,7 @@ python3 -m django --version
 
 # Windows
 py -3 -m django --version
- 2.1.5
-</pre>
+ 2.1.5</pre>
 
 <div class="note">
 <p><strong>Note</strong>: Si la commande Windows ci-dessus n'indique aucun module Django présent, essayez :</p>
@@ -344,7 +337,7 @@ py -3 -m django --version
 </div>
 
 <div class="warning">
-<p><strong>Important</strong>: Le reste de ce <strong>module </strong>utilise les commandes <em>Linux</em> pour invoquer Python 3 (<code>python3</code>) . . Si vous travaillez sous <em>Windows </em>, remplacez simplement ce préfixe avec : <code>py -3</code></p>
+<p><strong>Important</strong>: Le reste de ce <strong>module </strong>utilise les commandes <em>Linux</em> pour invoquer Python 3 (<code>python3</code>) . . Si vous travaillez sous <em>Windows </em>, remplacez simplement ce préfixe avec : <code>py -3</code></p>
 </div>
 
 <h2 id="Tester_votre_installation">Tester votre installation</h2>
@@ -352,15 +345,14 @@ py -3 -m django --version
 <p>Les tests ci-dessus fonctionnent, mais ne font rien de très divertissant. Un test plus intéressant consiste à créer un projet squelette et de voir si il fonctionne. Pour ce faire, naviguez tout d'abord dans votre invite/terminal de commande à l'endroit où vous désirez stocker vos applications Django. Créez un dossier pour votre site test et placez-vous dedans.</p>
 
 <pre class="brush: bash">mkdir django_test
-cd django_test
-</pre>
+cd django_test</pre>
 
-<p>Vous pouvez ensuite créer un nouveau site squelette intitulé "<em>mytestsite</em>" utilisant l'outil <strong>django-admin</strong> omme montré. Après avoir créé le site, vous pouvez naviguer dans le dossier où vous trouverez le script principal pour gérer vos projets, intitulé <strong>manage.py</strong>.</p>
+<p>Vous pouvez ensuite créer un nouveau site squelette intitulé "<em>mytestsite</em>" utilisant l'outil <strong>django-admin</strong> omme montré. Après avoir créé le site, vous pouvez naviguer dans le dossier où vous trouverez le script principal pour gérer vos projets, intitulé <strong>manage.py</strong>.</p>
 
 <pre class="brush: bash">django-admin startproject mytestsite
 cd mytestsite</pre>
 
-<p>Nous pouvons lancer le <em>serveur web de développement</em> depuis ce dossier en utilisant <strong>manage.py</strong> et la commande <code>runserver</code> command, comme indiqué ci-dessous.</p>
+<p>Nous pouvons lancer le <em>serveur web de développement</em> depuis ce dossier en utilisant <strong>manage.py</strong> et la commande <code>runserver</code> command, comme indiqué ci-dessous.</p>
 
 <pre class="brush: bash">$ python3 manage.py runserver
 Performing system checks...
@@ -377,20 +369,18 @@ Quit the server with CONTROL-C.
 </pre>
 
 <div class="note">
-<p><strong>Note </strong>: La commande ci-dessus montre le résultat de l'exécution sur Linux/macOS. Vous pouvez ignorer les warnings à propos des "15 unapplied migration(s)" à partir de là !</p>
+<p><strong>Note </strong>: La commande ci-dessus montre le résultat de l'exécution sur Linux/macOS. Vous pouvez ignorer les warnings à propos des "15 unapplied migration(s)" à partir de là !</p>
 </div>
 
-<p>Maintenant que votre serveur est lancé, vous pouvez voir le site en naviguant vers l'URL suivante depuis votre navigateur local : <code>http://127.0.0.1:8000/</code>. Vous devriez voir un site ressemblant à celui-ci :<br>
- <img alt="Django Skeleton App Homepage - Django 2.0" src="https://mdn.mozillademos.org/files/16288/Django_Skeleton_Website_Homepage_2_1.png" style="height: 714px; width: 806px;"></p>
+<p>Maintenant que votre serveur est lancé, vous pouvez voir le site en naviguant vers l'URL suivante depuis votre navigateur local : <code>http://127.0.0.1:8000/</code>. Vous devriez voir un site ressemblant à celui-ci :</p>
 
-<ul>
-</ul>
+<p><img alt="Django Skeleton App Homepage - Django 2.0" src="django_skeleton_website_homepage_2_1.png"></p>
 
 <h2 id="Résumé">Résumé</h2>
 
 <p>Vous avez maintenant un environnement de développement Django fonctionnel et opérationnel sur votre ordinateur.</p>
 
-<p>Dans la section test vous avez aussi vu comment créer un nouveau site web Django en utilisant <code>django-admin startproject</code>, et comment aller dessus depuis votre navigateur en utilisant le serveur de développement web (<code>python3 manage.py runserver</code>). Dans le prochain article nous détaillerons ce processus, et créant un application web simple mais complète.</p>
+<p>Dans la section test vous avez aussi vu comment créer un nouveau site web Django en utilisant <code>django-admin startproject</code>, et comment aller dessus depuis votre navigateur en utilisant le serveur de développement web (<code>python3 manage.py runserver</code>). Dans le prochain article nous détaillerons ce processus, et créant un application web simple mais complète.</p>
 
 <h2 id="See_also">See also</h2>
 
@@ -405,19 +395,19 @@ Quit the server with CONTROL-C.
 <h2 id="In_this_module">In this module</h2>
 
 <ul>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+ <li><a href="/fr/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/fr/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/fr/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/fr/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/fr/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/fr/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/fr/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/fr/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/fr/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/fr/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/fr/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/fr/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/fr/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/fr/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
 </ul>
diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html
index b905f66546..2f6aa2a4b6 100644
--- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html
+++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html
@@ -1,5 +1,5 @@
 ---
-title: Understanding client-side JavaScript frameworks
+title: Comprendre les frameworks JavaScript côté client
 slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
 tags:
   - Beginner
@@ -14,24 +14,24 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
 
 <p class="summary">Les frameworks JavaScript sont une partie essentielle du développement web front-end moderne, fournissant aux développeurs des outils éprouvés pour construire des applications web évolutives et interactives. De nombreuses entreprises modernes utilisent des frameworks comme un élément normé de leur outillage, de sorte que de nombreux emplois de développement front-end requièrent désormais une expérience avec ces frameworks.</p>
 
-<p class="summary">En tant que futur développeur front-end, il peut être difficile de savoir par où commencer lors de l'apprentissage des frameworks – il y a tant de frameworks si différents les uns des autres et de nouveaux qui apparaissent sans cesse, ils fonctionnent généralement de manière similaire mais font certaines choses différemment, et il y a certaines choses spécifiques à avoir en tête lors de leur utilisation.</p>
+<p>En tant que futur développeur front-end, il peut être difficile de savoir par où commencer lors de l'apprentissage des frameworks – il y a tant de frameworks si différents les uns des autres et de nouveaux qui apparaissent sans cesse, ils fonctionnent généralement de manière similaire mais font certaines choses différemment, et il y a certaines choses spécifiques à avoir en tête lors de leur utilisation.</p>
 
-<p class="summary"><span class="tlid-translation translation" lang="fr"><span title="">Dans cet ensemble d'articles, nous chercherons à vous donner un point de départ confortable pour vous aider à commencer votre apprentissage </span></span>des frameworks. <span class="tlid-translation translation" lang="fr"><span title="">Nous ne visons pas à vous enseigner exhaustivement tout ce que vous devez savoir sur React / ReactDOM, Vue ou quelque autre framework particulier</span></span> ; <span class="tlid-translation translation" lang="fr"><span title="">les documentations fournises par les équipes de développement des frameworks font déjà ce travail.</span> N<span title="">ous souhaitons plutôt faire simple et répondre d'abord à des questions plus fondamentales telles que </span></span>:</p>
+<p>Dans cet ensemble d'articles, nous chercherons à vous donner un point de départ confortable pour vous aider à commencer votre apprentissage des frameworks. Nous ne visons pas à vous enseigner exhaustivement tout ce que vous devez savoir sur React / ReactDOM, Vue ou quelque autre framework particulier ; les documentations fournises par les équipes de développement des frameworks font déjà ce travail. Nous souhaitons plutôt faire simple et répondre d'abord à des questions plus fondamentales telles que :</p>
 
 <ul>
- <li class="summary">Pourquoi devrais-je utiliser un framework ? Quels problèmes résolvent-ils pour moi ?</li>
- <li class="summary">Quelles questions devrais-je me poser pour choisir un framework ? Ai-je au moins besoin d'un framework ?</li>
- <li class="summary">Quelles fonctionnalités proposent les frameworks ? Comment fonctionnent-ils en général et comment diffèrent leurs  implantations de ces fonctionnalités ?</li>
- <li class="summary">Comment se rapportent-ils au JavaScript "vanilla" ou à l'HTML ?</li>
+ <li>Pourquoi devrais-je utiliser un framework ? Quels problèmes résolvent-ils pour moi ?</li>
+ <li>Quelles questions devrais-je me poser pour choisir un framework ? Ai-je au moins besoin d'un framework ?</li>
+ <li>Quelles fonctionnalités proposent les frameworks ? Comment fonctionnent-ils en général et comment diffèrent leurs  implantations de ces fonctionnalités ?</li>
+ <li>Comment se rapportent-ils au JavaScript "vanilla" ou à l'HTML ?</li>
 </ul>
 
-<p class="summary">Après ceci, nous vous fournirons quelques tutoriels couvrant les notions fondamentales de certains des principaux frameworks afin de vous fournir suffisamment de contexte et de familiarité pour commencer à approfondir par vous-même. Nous voulons que vous puissiez progresser et en apprendre plus sur les frameworks de manière pragmatique sans oublier les bonnes pratiques fondamentales du web telles que l'accessibilité.</p>
+<p>Après ceci, nous vous fournirons quelques tutoriels couvrant les notions fondamentales de certains des principaux frameworks afin de vous fournir suffisamment de contexte et de familiarité pour commencer à approfondir par vous-même. Nous voulons que vous puissiez progresser et en apprendre plus sur les frameworks de manière pragmatique sans oublier les bonnes pratiques fondamentales du web telles que l'accessibilité.</p>
 
-<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Commencez dès maintenant, avec "Introduction aux frameworks côté client"</a></strong></p>
+<p><strong><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Commencez dès maintenant, avec "Introduction aux frameworks côté client"</a></strong></p>
 
 <h2 id="Prérequis">Prérequis</h2>
 
-<p>Vous devez vraiment connaitre les bases des principaux langages du web (<a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, et particulièrement <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>) avant d'essayer de vous lancer dans l'apprentissage des frameworks côté client.</p>
+<p>Vous devez vraiment connaitre les bases des principaux langages du web (<a href="/fr/docs/Learn/HTML">HTML</a>, <a href="/fr/docs/Learn/CSS">CSS</a>, et particulièrement <a href="/fr/docs/Learn/JavaScript">JavaScript</a>) avant d'essayer de vous lancer dans l'apprentissage des frameworks côté client.</p>
 
 <p>Votre code n'en sera que plus qualitatif et plus professionnel, et vous serez en mesure de résoudre vos problèmes avec plus de confiance si vous comprenez les fonctionnalités fondamentales du web sur lesquelles les frameworks s'appuient.</p>
 
@@ -39,121 +39,121 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
 
 <p>Nous avons créé un cours qui inclut toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p>
 
-<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Commencer</a></p>
+<p><a href="/fr/docs/Learn/Front-end_web_developer">Commencer</a></p>
 
 <h2 id="Guides_dintroduction">Guides d'introduction</h2>
 
 <dl>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction aux frameworks côté client</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction aux frameworks côté client</a></dt>
  <dd>Nous commençons notre aperçu des frameworks par un tour d'horizon général du domaine, notamment en regardant un bref historique de JavaScript et des frameworks, la raison pour laquelle les frameworks existent et ce qu'ils nous proposent, comment commencer à réfléchir au choix d'un framework à apprendre et quelles alternatives il y a aux frameworks côté client.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Principales caractéristiques du Framework</a></dt>
- <dd>Chaque framework JavaScript majeur a une approche différente de la mise à jour du DOM, de la gestion des évènements du navigateur et de la manière dont rendre l'expérience de développement agréable. Cet article explorera les principales caractéristiques des 4 grands frameworks, <span class="tlid-translation translation" lang="fr"><span title="">en examinant comment les frameworks ont tendance à fonctionner à un haut niveau et les différences entre eux.</span></span></dd>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Principales caractéristiques du Framework</a></dt>
+ <dd>Chaque framework JavaScript majeur a une approche différente de la mise à jour du DOM, de la gestion des évènements du navigateur et de la manière dont rendre l'expérience de développement agréable. Cet article explorera les principales caractéristiques des 4 grands frameworks, en examinant comment les frameworks ont tendance à fonctionner à un haut niveau et les différences entre eux.</dd>
 </dl>
 
 <h2 id="Tutoriels_sur_React">Tutoriels sur React</h2>
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Les tutoriels sur React ont été essayés pour la dernière fois en mai 2020, avec React/ReactDOM 16.13.1 et create-react-app 3.4.1.</p>
+<div class="note">
+<p><strong>Note :</strong> Les tutoriels sur React ont été essayés pour la dernière fois en mai 2020, avec React/ReactDOM 16.13.1 et create-react-app 3.4.1.</p>
 
 <p>Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version finale de l'exemple de code d'application React dans notre <a href="https://github.com/mdn/todo-react">todo-react repository</a>. Pour une version exécutable en direct, voir <a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p>
 </div>
 
 <dl>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Premier pas avec React</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Premier pas avec React</a></dt>
  <dd>Dans cet article, nous dirons bonjour à React. Nous découvrirons les prémices de son fonctionnement et de ses cas d'utilisation, configurerons une chaine d'outils React de base sur notre ordinateur local et créerons et jouerons avec une application de démarrage simple, en apprenant un peu plus sur le fonctionnement de React dans le processus.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Début de notre liste de tâches React</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Début de notre liste de tâches React</a></dt>
  <dd>Supposons que nous ayons été chargés de créer une preuve de concept dans React – une application qui permet aux utilisateurs d'ajouter, de modifier et de supprimer les tâches sur lesquelles ils souhaitent travailler, ainsi que de marquer les tâches comme terminées sans les supprimer. Cet article vous guidera tout au long de la mise en place de la structure et du style des composants de base de l'application, prêts pour la définition et l'interactivité des composants individuels, que nous ajouterons plus tard.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Diviser notre application React en composants</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Diviser notre application React en composants</a></dt>
  <dd>À ce stade, notre application est un monolithe. Avant de pouvoir lui faire faire des choses, nous devons le diviser en composants descriptifs gérables. React n'a pas de règles strictes pour ce qui est et n'est pas un composant - c'est à vous de décider ! Dans cet article, nous allons vous montrer un moyen judicieux de diviser notre application en composants.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. Interactivité de React: évènements et états</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. Interactivité de React: évènements et états</a></dt>
  <dd>Une fois notre plan de composants élaboré, il est maintenant temps de commencer à faire évoluer notre application d'une interface utilisateur complètement statique vers une interface qui nous permet réellement d'interagir et de modifier des choses. Dans cet article, nous allons le faire, en explorant les évènements et les états en cours de route.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. Interactivité de React: modification, filtrage, rendu conditionné</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. Interactivité de React: modification, filtrage, rendu conditionné</a></dt>
  <dd>Alors que nous approchons de la fin de notre voyage React (pour l'instant du moins), <span class="tlid-translation translation" lang="fr"><span title="">nous ajouterons la touche finale aux principaux domaines de fonctionnalités de notre application de liste de tâches</span></span>. Cela comprend la possibilité de modifier les tâches existantes et de filtrer la liste des tâches entre toutes les tâches, terminées et incomplètes. Nous examinerons le rendu conditionné de l'interface utilisateur en cours de route.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibilité dans React</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibilité dans React</a></dt>
  <dd>Dans notre avant-dernier article du tutoriel, nous nous concentrerons sur l'accessibilité, y compris la gestion de la mise au point dans React, ce qui peut améliorer la convivialité et réduire la confusion pour les utilisateurs de clavier uniquement et de lecteur d'écran.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. Ressources sur React</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. Ressources sur React</a></dt>
  <dd>Notre dernier article vous fournit une liste de ressources sur React que vous pouvez utiliser pour aller plus loin dans votre apprentissage.</dd>
 </dl>
 
 <h2 id="Tutoriels_sur_Ember">Tutoriels sur Ember</h2>
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Les tutoriels Ember ont été essayés pour la dernière fois en Mai 2020, avec Ember/Ember CLI version 3.18.0.</p>
+<div class="note">
+<p><strong>Note :</strong> Les tutoriels Ember ont été essayés pour la dernière fois en Mai 2020, avec Ember/Ember CLI version 3.18.0.</p>
 
 <p>Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version finale de l'exemple de code d'application Ember dans le Ember app code in the <a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">ember-todomvc-tutorial repository</a>. Pour une version exécutable en direct, voir <a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> (cela inclut également quelques fonctionnalités supplémentaires non couvertes dans le tutoriel).</p>
 </div>
 
 <dl>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Premiers pas avec Ember</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Premiers pas avec Ember</a></dt>
  <dd>Dans notre premier article sur Ember, nous verrons comment fonctionne Ember et ce à quoi il sert, installerons la chaine d'outils d'Ember localement, créerons un exemple d'application, puis effectuerons une configuration initiale pour la préparer au développement.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Structure et composant de l'application Ember</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Structure et composant de l'application Ember</a></dt>
  <dd>Dans cet article, nous commencerons à planifier la structure de notre application TodoMVC Ember, à ajouter du code HTML correspondant, puis nous diviserons cette structure HTML en composants.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Interactivité Ember : évènements, classes et états</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Interactivité Ember : évènements, classes et états</a></dt>
  <dd>À ce stade, nous allons commencer à ajouter de l'interactivité à notre application, offrant la possibilité d'ajouter et d'afficher de nouveaux éléments à notre liste. En cours de route, nous examinerons l'utilisation d'évènements dans Ember, la création de classes de composants pour contenir du code JavaScript pour contrôler les fonctionnalités interactives et la configuration d'un service pour suivre l'état des données de notre application.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Interactivité Ember : fonctionnalité du Footer, rendu conditionné</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Interactivité Ember : fonctionnalité du Footer, rendu conditionné</a></dt>
  <dd>Il est maintenant temps de commencer à aborder la fonctionnalité de footer dans notre application. Ici, nous allons mettre à jour le compteur de tâches pour afficher le nombre correct de tâches à compléter et appliquer correctement le style aux tâches terminées (c'est-à-dire là dont la case a été cochée). Nous allons également câbler notre bouton "Effacer terminé". En cours de route, nous découvrirons comment utiliser le rendu conditionné dans nos modèles.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routage dans Ember</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routage dans Ember</a></dt>
  <dd>Dans cet article, nous apprendrons les bases du routage avec Ember. Nous l'utiliserons pour fournir une URL unique pour chacune des trois vues à faire : "Tous", "Actif", et "Terminé".</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ressources sur Ember et dépannage</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ressources sur Ember et dépannage</a></dt>
  <dd>Notre dernier article sur Ember vous fournit une liste de ressources que vous pouvez utiliser pour aller plus loin dans votre apprentissage, ainsi que des dépannages utiles et d'autres informations.</dd>
 </dl>
 
 <h2 id="Tutoriels_sur_Vue">Tutoriels sur Vue</h2>
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Les tutoriels sur Vue ont été essayés pour la dernière fois en mai 2020, avec Vue 2.6.11.</p>
+<div class="note">
+<p><strong>Note :</strong> Les tutoriels sur Vue ont été essayés pour la dernière fois en mai 2020, avec Vue 2.6.11.</p>
 
 <p>Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version terminée de l'exemple de code d'application Vue dans notre <a href="https://github.com/mdn/todo-vue">todo-vue repository</a>. Pour une version exécutable en direct, voir <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>.</p>
 </div>
 
 <dl>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Premiers pas avec Vue</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Premiers pas avec Vue</a></dt>
  <dd>Maintenant, introduisons Vue, le troisième de nos frameworks. Dans cet article, nous allons examiner un peu le contexte de Vue, apprendre à l'installer et créer un nouveau projet, étudier la structure de haut niveau de l'ensemble du projet et d'un composant individuel, voir comment exécuter le projet localement, et préparez-le à commencer à construire notre exemple.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Création de notre premier composant Vue</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Création de notre premier composant Vue</a></dt>
  <dd>Il est maintenant temps de plonger plus profondément dans Vue et de créer notre propre composant personnalisé (nous commencerons par créer un composant pour représenter chaque élément de la liste de tâches). En cours de route, nous découvrirons quelques concepts importants tels que l'appel de composants à l'intérieur d'autres composants, leur transmission de données via des accessoires et l'enregistrement de l'état des données.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendu d'une liste de composants Vue</a></dt>
- <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">À ce stade, nous avons un composant entièrement fonctionnel ; nous sommes maintenant prêts à ajouter plusieurs composants <code>ToDoItem</code> à notre application. Dans cet article, nous examinerons l'ajout d'un ensemble de données d'élément todo à notre composant <code>App.vue</code> que nous allons ensuite parcourir et afficher à l'intérieur des composants <code>ToDoItem</code> à l'aide de la directive <code>v-for</code>. </span></dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Ajout d'un nouveau formulaire todo: évènements, méthodes, et modèles Vue</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendu d'une liste de composants Vue</a></dt>
+ <dd>À ce stade, nous avons un composant entièrement fonctionnel ; nous sommes maintenant prêts à ajouter plusieurs composants <code>ToDoItem</code> à notre application. Dans cet article, nous examinerons l'ajout d'un ensemble de données d'élément todo à notre composant <code>App.vue</code> que nous allons ensuite parcourir et afficher à l'intérieur des composants <code>ToDoItem</code> à l'aide de la directive <code>v-for</code>.</dd>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Ajout d'un nouveau formulaire todo: évènements, méthodes, et modèles Vue</a></dt>
  <dd>Nous avons maintenant des exemples de données en place et une boucle qui prend chaque bit de données et le rend dans un <code>ToDoItem</code> dans notre application. Ce dont nous avons vraiment besoin ensuite, c'est la possibilité de permettre à nos utilisateurs de saisir leurs propres éléments à faire dans l'application, et pour cela, nous aurons besoin d'un texte <code>&lt;input&gt;</code>, un évènement à déclencher lorsque les données sont soumises, une méthode de déclenchement lors de la soumission pour ajouter les données et relancer la liste, et un modèle pour contrôler les données. C'est ce que nous allons couvrir dans cet article.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styliser les composants Vue avec CSS</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styliser les composants Vue avec CSS</a></dt>
  <dd>Le moment est enfin venu de rendre notre application un peu plus jolie. Dans cet article, nous explorerons les différentes façons de styliser les composants Vue avec CSS.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Utilisation des propriétés calculées de Vue</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Utilisation des propriétés calculées de Vue</a></dt>
  <dd>Dans cet article, nous allons ajouter un compteur qui affiche le nombre d'éléments à faire terminés, en utilisant une fonctionnalité de Vue appelée propriétés calculées. Celles-ci fonctionnent de la même manière que les méthodes, mais ne sont réexécutées que lorsque l'une de leurs dépendances change.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Rendu conditionnel Vue : éditer les todos existants</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Rendu conditionnel Vue : éditer les todos existants</a></dt>
  <dd>Il est maintenant temps d'ajouter l'un des éléments majeurs de la fonctionnalité qui nous manque toujours: la possibilité de modifier les éléments todos existants. Pour ce faire, nous profiterons des capacités de rendu conditionnel de Vue — à savoir <code>v-if</code> et <code>v-else</code> — pour nous permettre de basculer entre la vue d'élément todo existante et une vue d'édition où vous pouvez mettre à jour les étiquettes d'élément todo. Nous examinerons également l'ajout de fonctionnalités pour supprimer les éléments todo.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Gestion de la mise au poinr avec les références de Vue</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Gestion de la mise au poinr avec les références de Vue</a></dt>
  <dd>Nous en avons presque terminé avec Vue. La dernière fonctionnalité à implanter est la gestion de la mise au point, ou en d'autres termes, la façon dont nous pouvons améliorer l'accessibilité du clavier de notre application. Nous allons examiner l'utilisation des références de Vue pour gérer cela, une fonctionnalité avancée qui vous permet d'avoir un accès direct aux nœuds DOM sous-jacents sous le DOM virtuel, ou un accès direct d'un composant à la structure DOM interne d'un composant enfant.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Ressources Vue</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Ressources Vue</a></dt>
  <dd>Nous allons maintenant terminer notre étude de Vue en vous donnant une liste de ressources que vous pouvez utiliser pour aller plus loin dans votre apprentissage, ainsi que d'autres conseils utiles.</dd>
 </dl>
 
 <h2 id="Tutoriels_sur_Svelte">Tutoriels sur Svelte</h2>
 
-<div class="blockIndicator note">
+<div class="note">
 <p>Note : Les tutoriels sur Svelte ont été essayés pour la dernière fois en aout 2020, avec Svelte 3.24.1.</p>
 
 <p>Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version terminée de l'exemple eu code de l'application Svelte (tel qu'il est après chaque chapitre) dans le dépôt <a href="https://github.com/opensas/mdn-svelte-tutorial">mdn-svelte-tutorial</a>. Pour une version exécutable en direct, voir <a href="https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2">https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2</a>.</p>
 </div>
 
 <dl>
- <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">1. Premiers pas avec Svelte</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">1. Premiers pas avec Svelte</a></dt>
  <dd>Dans cet articles, nous vous proposerons une brève introduction au framework Svelte. Nous verrons comment Svelte fonctionne et qu'est-ce qui le rend si différent des autrse frameworks et outils que nous avons vus jusqu'à présent. Ensuite, nous apprendronds à mettre en place notre environnement de développement, créerons une application démonstrative, appréhenderons la structure du projet et nous verrons comment la mettre en oeuvre localement puis la compiler pour la mettre en production.</dd>
 </dl>
 
 <dl>
- <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">2. Commencer notre application todolist avec Svelte</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">2. Commencer notre application todolist avec Svelte</a></dt>
  <dd>Maintenant que nous avons compris les bases du fonctionnement  de Svelte, nous pouvons commencer à construirer application démonstrative : une liste de tâches. Dans cet article, nous verrons d'abord les fonctionnalités attendues dans notre application, puis nous créerons un composant Todos.svelte et mettrons en place un HTML statique et du CSS, prêts pour commencer le développement des fonctionnalités de notre application de liste de tâches avec laquelle nous continuerons dans les articles suivants.</dd>
- <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">3. Comportements dynamiques dans Svelte : travailler avec les variables et les propriétés</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">3. Comportements dynamiques dans Svelte : travailler avec les variables et les propriétés</a></dt>
  <dd>Maintenant que nous avons HTML et notre CSS, nous pouvons commencer le développement des fonctionnalités attendues pour notre application de liste de tâches Svelte. Dans cet article, nous utiliserons des variables et propriétés pour rendre notre application dynamique, nous permettant d'ajouter et de supprimer des tâches, de les marquer comme terminées et de les filter par état.</dd>
- <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">4. Diviser notre application Svelte en composants</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">4. Diviser notre application Svelte en composants</a></dt>
  <dd>L'objectif principal de cet article est de voir comment nous pouvons diviser notre application en composants gérables et partager l'information entre eux. Nous décomposerons notre application puis y ajouterons plus de fonctionnalités pour permettre aux utilisateurs de modifier des composants existants.</dd>
- <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">5. Svelte avancé : réactivité, cycle de vie et accessibilité</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">5. Svelte avancé : réactivité, cycle de vie et accessibilité</a></dt>
  <dd>Dans cet articles, nous ajouterons les dernières fonctionnalités de l'application et nous pousserons la décomposition de notre application encore plus loin. Nous apprendrons comment résoudre des problèmes de réactivité liés à la mise à jour d'objets et de tableaux. Pour éviter les erreurs communes, nous devrons nous explorer plus profondément le système de réactivité de Svelte. nous verrons aussi comment résoudre certaines problèmes de mise au point pour l'accessibilité et plus encore.</dd>
- <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">6. Travailler avec le stockage de Svelte</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">6. Travailler avec le stockage de Svelte</a></dt>
  <dd>Dans cet article, nous vous montrerons une autre manière de gérer les états avec Svelte : les stockages Stores. Les Stores sont des répertoires de données globaux qui contiennent des valeurs. Les composants peuvent s'abonner aux stockages et recevoir des notifications que leurs valeurs changent.</dd>
- <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">7. Support de TypeScript avec Svelte</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">7. Support de TypeScript avec Svelte</a></dt>
  <dd>Nous allons maintenant apprendre à utiliser TypeScript dans nos applications Svelte. D'abord, nous apprendrons ce qu'est TypeScript et quels bénéfices il peut nous apporter, puis nous verrons ensemble comment configurer notre projet pour travailler avec des fichiers TypeScript. Enfin, nous parcourerons notre application pour voir ce que nous pouvons y changer pour tirer pleinement parti des fonctionnalités de TypeScript.</dd>
- <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">8. Déploiement et étapes suivantes</a></dt>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">8. Déploiement et étapes suivantes</a></dt>
  <dd>Dans ce dernier article, nous verrons comment déployer votre application et la mettre en ligne et nous vous partagerons quelques-unes des ressources auxquelles vous devriez jeter un oeil pour poursuivre votre apprentissage de Svelte.</dd>
 </dl>
 
@@ -166,7 +166,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
 <ul>
  <li>Ce sont des outils populaires qui dureront un certain temps – comme avec tout outil logiciel, il est bon de s'en tenir à des outils activement développés et qui ne seront probablement pas interrompus la semaine prochaine et qui constitueront des atouts considérables à vos compétences lorsque vous cherchez un emploi,</li>
  <li>Ils ont des communautés solides et de bonnes documentations. C'est très important pour être en mesure de recevoir de l'aide lors de votre apprentissage d'un sujet complexe, surtout lorsque vous débutez.</li>
- <li>Nous n'avons pas les ressources nécessaires pour couvrir <em>tous</em> les frameworks modernes. <span class="tlid-translation translation" lang="fr"><span title="">De toute façon, cette liste serait très difficile à tenir à jour car de nouveaux apparaissent tout le temps.</span></span></li>
+ <li>Nous n'avons pas les ressources nécessaires pour couvrir <em>tous</em> les frameworks modernes. De toute façon, cette liste serait très difficile à tenir à jour car de nouveaux apparaissent tout le temps.</li>
  <li>En tant que débutant, choisir sur quoi se pencher parmi le grand nombre de choix disponibles est un problème très réel. Faire en sorte que cette liste soit courte est donc utile.</li>
 </ul>
 
diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html
index cc0709e279..19933cfd0d 100644
--- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html
+++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html
@@ -24,7 +24,7 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_
    <th scope="row">Prérequis :</th>
    <td>
     <p>Être familiarisé avec les bases des langages</p>
-    <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, et <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</td>
+    <a href="/fr/docs/Learn/HTML">HTML</a>, <a href="/fr/docs/Learn/CSS">CSS</a>, et <a href="/fr/docs/Learn/JavaScript">JavaScript</a>.</td>
   </tr>
   <tr>
    <th scope="row">Objectif :</th>
@@ -35,7 +35,7 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_
  </tbody>
 </table>
 
-<h2 class="western" id="Bienvenue_sur_le_terminal">Bienvenue sur le terminal</h2>
+<h2 id="Bienvenue_sur_le_terminal">Bienvenue sur le terminal</h2>
 
 <p>Le terminal est une interface de texte pour l'exécution de programmes qui utilisent un langage lui-même textuel . Quel que soit le type d'outils que vous allez utiliser pour le développement web, il y a de grandes chances que vous soyez amené à travailler en ligne de commande pour les utiliser (vous rencontrerez aussi l'appellation "console" ou encore "CLI tools" pour désigner de tels outils d'interface en ligne de commande).</p>
 
@@ -47,7 +47,7 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_
 
 <p>.</p>
 
-<h3 class="western" id="Quelle_est_lorigine_du_terminal">Quelle est l'origine du terminal ?</h3>
+<h3 id="Quelle_est_lorigine_du_terminal">Quelle est l'origine du terminal ?</h3>
 
 <p>Elle se situe dans les années 50-60, et son aspect d'alors ne ressemble pas du tout à ce que nous connaissons aujourd'hui (heureusement). Vous pouvez en apprendre davantage sur la page de Wikipédia <a href="https://fr.wikipedia.org/wiki/Terminal_(informatique)">Terminal (informatique)</a>.</p>
 
@@ -57,19 +57,19 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_
 
 <p>En tous cas, le terminal ne va pas disparaître de si tôt.</p>
 
-<h3 class="western" id="À_quoi_ressemble_un_terminal">À quoi ressemble un terminal ?</h3>
+<h3 id="À_quoi_ressemble_un_terminal">À quoi ressemble un terminal ?</h3>
 
 <p>Vous pouvez voir ci-dessous les apparences de quelques terminaux émulés par des programmes courants.</p>
 
-<p>Les images suivantes montrent les invites de commande disponibles sous Windows – il y a une panoplie d’options, du programme « cmd » au « powershell » - qui peuvent être lancées depuis le menu de démarrage en tapant le nom du programme.</p>
+<p>Les images suivantes montrent les invites de commande disponibles sous Windows – il y a une panoplie d'options, du programme « cmd » au « powershell » - qui peuvent être lancées depuis le menu de démarrage en tapant le nom du programme.</p>
 
-<p><img alt="A vanilla windows cmd line window, and a windows powershell window" src="https://mdn.mozillademos.org/files/17183/win-terminals.png" style="border-style: solid; border-width: 1px; display: block; height: 261px; margin: 0px auto; width: 900px;"></p>
+<p><img alt="A vanilla windows cmd line window, and a windows powershell window" src="win-terminals.png"></p>
 
-<p>Et ci-dessous, vous pouvez voir l’application de terminal pour macOS.</p>
+<p>Et ci-dessous, vous pouvez voir l'application de terminal pour macOS.</p>
 
-<p><img alt="A basic vanilla mac terminal" src="https://mdn.mozillademos.org/files/17180/mac-terminal.png" style="display: block; height: 223px; margin: 0px auto; width: 500px;"></p>
+<p><img alt="A basic vanilla mac terminal" src="mac-terminal.png"></p>
 
-<h3 class="western" id="Comment_ouvrir_un_terminal">Comment ouvrir un terminal ?</h3>
+<h3 id="Comment_ouvrir_un_terminal">Comment ouvrir un terminal ?</h3>
 
 <p>Beaucoup de développeurs se servent aujourd'hui de terminaux de type Unix (c'est-à-dire le terminal en lui-même plus les outils auxquels il donne accès). Beaucoup de tutoriels sur le web sont basés sur ces terminaux Unix qu'ils considèrent (malheureusement) comme universels, mais nous allons voir dans cette section comment ouvrir un terminal sur le système de votre choix.</p>
 
@@ -85,27 +85,27 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_
 
 <h4 id="Windows">Windows</h4>
 
-<p>Comme pour d'autres outils de programmation, c’est un peu une tradition pour Windows de ne pas faciliter l’utilisation du terminal (ou ligne de commande) par rapport à d’autres systèmes d’exploitation. Mais les choses s’améliorent.</p>
+<p>Comme pour d'autres outils de programmation, c'est un peu une tradition pour Windows de ne pas faciliter l'utilisation du terminal (ou ligne de commande) par rapport à d'autres systèmes d'exploitation. Mais les choses s'améliorent.</p>
 
-<p>Traditionnellement aussi, Windows a depuis longtemps eu son propre programme de type « terminal », appelé « cmd » (« l’invite de commande »), mais celui-ci n’est en rien comparable aux commandes Unix, et il est en fait équivalent au programme DOS des temps héroïques.</p>
+<p>Traditionnellement aussi, Windows a depuis longtemps eu son propre programme de type « terminal », appelé « cmd » (« l'invite de commande »), mais celui-ci n'est en rien comparable aux commandes Unix, et il est en fait équivalent au programme DOS des temps héroïques.</p>
 
-<p>On trouve malgré tout de meilleurs programmes qui offrent une expérience de terminal sur Windows, tels que Powershell (<a href="https://github.com/PowerShell/PowerShell">voir ici pour l’installer</a>), et Gitbash (qui fait partie de la trousse à outils <a href="https://gitforwindows.org/">git for Windows</a>).</p>
+<p>On trouve malgré tout de meilleurs programmes qui offrent une expérience de terminal sur Windows, tels que Powershell (<a href="https://github.com/PowerShell/PowerShell">voir ici pour l'installer</a>), et Gitbash (qui fait partie de la trousse à outils <a href="https://gitforwindows.org/">git for Windows</a>).</p>
 
-<p>Quoi qu’il en soit, aujourd’hui, la meilleure option est le « Windows Subsystem for Linux » (WSL) – une couche de compatibilité qui permet de lancer des systèmes d’exploitation Linux directement dans Windows 10, ce qui vous permet d’avoir un « vrai terminal », sans recourir à une machine virtuelle.</p>
+<p>Quoi qu'il en soit, aujourd'hui, la meilleure option est le « Windows Subsystem for Linux » (WSL) – une couche de compatibilité qui permet de lancer des systèmes d'exploitation Linux directement dans Windows 10, ce qui vous permet d'avoir un « vrai terminal », sans recourir à une machine virtuelle.</p>
 
-<p>Vous pouvez l’installer gratuitement directement à partir du Windows store. Toute la documentation utile est disponible dans la <a href="https://docs.microsoft.com/en-us/windows/wsl">Windows Subsystem for Linux Documentation</a> .</p>
+<p>Vous pouvez l'installer gratuitement directement à partir du Windows store. Toute la documentation utile est disponible dans la <a href="https://docs.microsoft.com/fr/windows/wsl">Windows Subsystem for Linux Documentation</a> .</p>
 
-<p><img alt="a screenshot of the windows subsystem for linux documentation" src="https://mdn.mozillademos.org/files/17184/wsl.png" style="border-style: solid; border-width: 1px; display: block; height: 665px; margin: 0px auto; width: 1000px;"></p>
+<p><img alt="a screenshot of the windows subsystem for linux documentation" src="wsl.png"></p>
 
-<p>Si vous vous demandez quelle option choisir sur Windows, nous vous recommandons vivement de vous décider pour le WSL. Vous pourriez certes vous en tenir à l’invite de commande par défaut (« cmd »), et faire tourner pas mal d’outils correctement, mais tout sera bien plus facile si vous avez une meilleure équivalence avec les outils Unix.</p>
+<p>Si vous vous demandez quelle option choisir sur Windows, nous vous recommandons vivement de vous décider pour le WSL. Vous pourriez certes vous en tenir à l'invite de commande par défaut (« cmd »), et faire tourner pas mal d'outils correctement, mais tout sera bien plus facile si vous avez une meilleure équivalence avec les outils Unix.</p>
 
-<h4 class="western" id="En_passant_quelle_est_la_différence_entre_ligne_de_commande_et_terminal">En passant, quelle est la différence entre ligne de commande et terminal ?</h4>
+<h4 id="En_passant_quelle_est_la_différence_entre_ligne_de_commande_et_terminal">En passant, quelle est la différence entre ligne de commande et terminal ?</h4>
 
-<p>En général, vous rencontrerez ces deux termes utilisés de façon interchangeable. Techniquement, un terminal (ou console) est un logiciel qui se connecte à un shell au démarrage. Un shell correspond à votre session et à votre environnement de session (où des choses comme l’invite de commande et les raccourcis peuvent être personnalisés). La ligne de commande quant à elle (ou prompt) est la ligne de texte où vous entrez des commandes et où le curseur clignote.</p>
+<p>En général, vous rencontrerez ces deux termes utilisés de façon interchangeable. Techniquement, un terminal (ou console) est un logiciel qui se connecte à un shell au démarrage. Un shell correspond à votre session et à votre environnement de session (où des choses comme l'invite de commande et les raccourcis peuvent être personnalisés). La ligne de commande quant à elle (ou prompt) est la ligne de texte où vous entrez des commandes et où le curseur clignote.</p>
 
 <h3 id="Est-ce_quil_faut_se_servir_du_terminal">Est-ce qu'il <em>faut </em>se servir du terminal?</h3>
 
-<p>Bien que les outils disponibles à partir de la ligne de commande soient très riches, si vous utilisez des outils tels que <a href="https://code.visualstudio.com/">Visual Studio Code</a> vous allez avoir accès à une quantité d’extensions que vous pourrez utiliser pour vous aider dans l’édition et vous allez pouvoir vous passer presque complètement du terminal lui-même. Cependant, vous ne pourrez pas trouver une extension sur votre éditeur de code pour tout ce que vous voudrez faire – en définitive, vous devrez malgré tout vous confronter au terminal.</p>
+<p>Bien que les outils disponibles à partir de la ligne de commande soient très riches, si vous utilisez des outils tels que <a href="https://code.visualstudio.com/">Visual Studio Code</a> vous allez avoir accès à une quantité d'extensions que vous pourrez utiliser pour vous aider dans l'édition et vous allez pouvoir vous passer presque complètement du terminal lui-même. Cependant, vous ne pourrez pas trouver une extension sur votre éditeur de code pour tout ce que vous voudrez faire – en définitive, vous devrez malgré tout vous confronter au terminal.</p>
 
 <h2 id="Les_commandes_intégrées_de_base">Les commandes intégrées de base</h2>
 
@@ -128,8 +128,8 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_
  <li>Manipuler et transformer des flux de texte (par exemple remplacer toutes les occurrences de <code>&lt;div&gt;</code> dans un fichier HTML par <code>&lt;article&gt;</code>): <code>awk</code>, <code>tr</code>, <code>sed</code></li>
 </ul>
 
-<div class="blockIndicator note">
-<p><strong>Note </strong>: On trouve  sur le web un bon nombre de tutoriels de qualité qui permettent d'aller beaucoup plus loin avec la ligne de commande — ceci n'est qu'une brève introduction ! L'auteur de ces lignes lui-même a sa propre <a href="https://terminal.training/?coupon=mdn">série de vidéos de formation au terminal</a> (80% de réduction en utilisant le code mdn au moment du paiement — 19$).</p>
+<div class="note">
+<p><strong>Note </strong>: On trouve  sur le web un bon nombre de tutoriels de qualité qui permettent d'aller beaucoup plus loin avec la ligne de commande — ceci n'est qu'une brève introduction ! L'auteur de ces lignes lui-même a sa propre <a href="https://terminal.training/?coupon=mdn">série de vidéos de formation au terminal</a> (80% de réduction en utilisant le code mdn au moment du paiement — 19$).</p>
 </div>
 
 <p>Pour aller plus loin, voyons maintenant comment utiliser quelques-uns de ces outils en ligne de commande. Commencez par ouvrir votre programme de terminal (ou console) !</p>
@@ -142,17 +142,17 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_
 
 <p>Pour changer de répertoire, vous tapez <code>cd</code> dans votre terminal, suivi par le répertoire dans lequel vous voulez vous rendre. En supposant que le répertoire (ou dossier) <code>Desktop</code> se trouve dans votre répertoire utilisateur, vous allez donc taper <code>cd Desktop</code> (voir les copies d'écran ci-dessous).</p>
 
-<p><img alt="results of the cd Desktop command being run in a variety of windows terminals - the terminal location moves into the desktop" src="https://mdn.mozillademos.org/files/17182/win-terminals-cd.png" style="border-style: solid; border-width: 1px; display: block; height: 349px; margin: 0px auto; width: 500px;"></p>
+<p><img alt="results of the cd Desktop command being run in a variety of windows terminals - the terminal location moves into the desktop" src="win-terminals-cd.png"></p>
 
 <p>Sur un système en langue française, vous trouverez plus fréquemment "Bureau" plutôt que "Desktop". Essayez de taper ceci dans votre terminal système (sur un système en langue anglaise, bien sûr conservez "Desktop") :</p>
 
-<pre class="brush: bash notranslate">cd Bureau</pre>
+<pre class="brush: bash">cd Bureau</pre>
 
 <p>Si vous voulez revenir au répertoire précédent, utilisez les deux points :</p>
 
-<pre class="brush: bash notranslate">cd ..</pre>
+<pre class="brush: bash">cd ..</pre>
 
-<div class="blockIndicator note">
+<div class="note">
 <p><strong>Note</strong>: Raccourci vraiment utile sur un terminal, la touche <kbd>tab</kbd> émule la saisie automatique des mots dont vous connaissez l'existence, ce qui vous évite de les taper en entier. Par exemple, après avoir tapé les deux commandes ci-dessus, essayez de taper <code>cd B</code> puis de presser la touche <kbd>tab</kbd> — cela devrait saisir automatiquement le nom de répertoire <code>Bureau</code>, à condition qu'il soit présent dans le répertoire courant. Gardez ceci à l'esprit tout en poursuivant.</p>
 </div>
 
@@ -160,18 +160,18 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_
 
 <p>Par exemple, si vous vouliez aller dans un dossier nommé <code>src</code>, qui se trouve dans un dossier nommé <code>projet</code>, qui est lui-même sur le <code>Bureau</code>, vous pourriez taper ces trois commandes pour y arriver à partir de votre dossier utilisateur :</p>
 
-<pre class="brush: bash notranslate">cd Bureau
+<pre class="brush: bash">cd Bureau
 cd projet
 cd src</pre>
 
 <p>Mais c'est une perte de temps — à la place, vous pouvez taper une seule commande, avec les différents éléments du chemin séparés par des slashes, exactement de la même manière que lorsque vous spécifiez les chemins d'accès à des images ou autres assets en CSS, HTML, ou JavaScript :</p>
 
-<pre class="brush: bash notranslate">cd Bureau/projet/src</pre>
+<pre class="brush: bash">cd Bureau/projet/src</pre>
 
 <p>Notez que si vous commencez le chemin par un slash, vous le rendez absolu, par exemple <code>/Utilisateurs/votre-nom/Bureau</code>. Omettre le premier slash comme nous l'avons fait ci-dessus construit un chemin relatif à votre répertoire de travail actuel. C'est exactement la même chose qu'une URL dans un navigateur. Un slash au début signifie "à la racine du site web", alors qu'omettre le slash signifie "l'URL est relative à ma page courante".</p>
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. <code>cd Bureau\projet\src</code> — cela peut vous paraître vraiment étrange, mais si la question vous intéresse,<a href="https://www.youtube.com/watch?v=5T3IJfBfBmI"> regardez cette vidéo YouTube</a> (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft.</p>
+<div class="note">
+<p><strong>Note</strong>: Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. <code>cd Bureau\projet\src</code> — cela peut vous paraître vraiment étrange, mais si la question vous intéresse,<a href="https://www.youtube.com/watch?v=5T3IJfBfBmI"> regardez cette vidéo YouTube</a> (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft.</p>
 </div>
 
 <h3 id="Lister_le_contenu_dun_répertoire">Lister le contenu d'un répertoire</h3>
@@ -180,7 +180,7 @@ cd src</pre>
 
 <p>Essayez de taper ceci dans votre terminal :</p>
 
-<pre class="brush: bash notranslate">ls</pre>
+<pre class="brush: bash">ls</pre>
 
 <p>Vous obtenez la liste des fichiers et répertoires de votre répertoire de travail courant, mais l'information est vraiment basique - vous n'avez que les noms des items, sans savoir s'il s'agit d'un fichier, d'un répertoire, ou d'autre chose. Heureusement, une petite modification dans l'utilisation de la commande va vous donner beaucoup plus d'informations.</p>
 
@@ -190,19 +190,19 @@ cd src</pre>
 
 <p>Voyez par exemple ce que vous obtenez en essayant ceci :</p>
 
-<pre class="brush: bash notranslate">ls -l </pre>
+<pre class="brush: bash">ls -l</pre>
 
 <p>Avec <code>ls</code>, l'option <code>-l</code> (<em>tiret l, "dash ell</em>" en anglais) vous donne une liste avec un fichier ou répertoire par ligne et pas mal d'autres informations. Les répertoires ("directories") sont repérés pas la lettre "d" au tout début de la ligne. Nous pouvons y entrer avec la commande <code>cd</code>.</p>
 
 <p>Voici ci-dessous une copie d'écran avec un terminal macOS “vanilla” en haut, et en bas un terminal personnalisé avec quelques icônes supplémentaires et des couleurs pour le rendre plus vivant — les deux affichent le résultat de la commande <code>ls -l</code> :</p>
 
-<p><img alt="A vanilla mac terminal and a more colorful custom mac terminal, showing a file listing - the result of running the ls -l command" src="https://mdn.mozillademos.org/files/17181/mac-terminals-ls.png" style="border-style: solid; border-width: 1px; display: block; height: 360px; margin: 0px auto; width: 500px;"></p>
+<p><img alt="A vanilla mac terminal and a more colorful custom mac terminal, showing a file listing - the result of running the ls -l command" src="mac-terminals-ls.png"></p>
 
-<div class="blockIndicator note">
+<div class="note">
 <p><strong>Note</strong>: Pour savoir exactement quelles sont les options d'une commande, vous pouvez consulter sa <a href="https://fr.wikipedia.org/wiki/Man_(Unix)">page de manuel</a> (<a href="https://en.wikipedia.org/wiki/Man_page">man page</a> en anglais). Pour cela, tapez la commande <code>man</code> suivie du nom de la commande que vous cherchez, par exemple <code>man ls</code>. La page de manuel va s'ouvrir dans le lecteur de texte par défaut de votre terminal (par exemple, <code><a href="https://en.wikipedia.org/wiki/Less_(Unix)">less</a></code> sur mon terminal), et vous allez pouvoir faire défiler la page avec les touches de flèches ou un mécanisme similaire. La page de manuel liste toutes les options de façon très détaillée, ce qui peut être un peu intimidant au début, mais au moins vous savez où les trouver si vous en avez besoin. Lorsque vous avez terminé avec la page de manuel, vous la refermez avec la commande "quitter" de votre visionneur de texte (pour <code>less</code> c'est "q" ; si ce n'est pas évident cherchez sur Internet).</p>
 </div>
 
-<div class="blockIndicator note">
+<div class="note">
 <p><strong>Note</strong>: Pour lancer une commande avec des options multiples, on peut en général les regrouper dans une seule chaîne de caractères après le tiret, par exemple <code>ls -lah</code>, ou <code>ls -ltrh</code>. Exercez-vous à consulter la page man de <code>ls</code> pour savoir ce que vous donnent ces options !</p>
 </div>
 
@@ -216,14 +216,14 @@ cd src</pre>
 
 <ul>
  <li><code>mkdir</code> — crée un nouveau répertoire à l'intérieur du répertoire courant. Par exemple, <code>mkdir mon-super-site</code> va créer un nouveau répertoire nommé <code>mon-super-site</code>.</li>
- <li><code>rmdir</code> — efface le répertoire dont le nom est passé, mais seulement s'il est vide. Par exemple  <code>rmdir mon-super-site</code> va supprimer le répertoire que nous avons créé ci-dessus. Si vous voulez supprimer un répertoire qui n'est pas vide (ainsi que tout ce qu'il contient), vous pouvez utiliser l'option <code>-r</code> (<em>recursive</em>), mais cela est dangereux. Assurez-vous de n'avoir pas besoin plus tard de quelque chose qui se trouverait dans le répertoire, car il aura définitivement disparu.</li>
+ <li><code>rmdir</code> — efface le répertoire dont le nom est passé, mais seulement s'il est vide. Par exemple  <code>rmdir mon-super-site</code> va supprimer le répertoire que nous avons créé ci-dessus. Si vous voulez supprimer un répertoire qui n'est pas vide (ainsi que tout ce qu'il contient), vous pouvez utiliser l'option <code>-r</code> (<em>recursive</em>), mais cela est dangereux. Assurez-vous de n'avoir pas besoin plus tard de quelque chose qui se trouverait dans le répertoire, car il aura définitivement disparu.</li>
  <li><code>touch</code> — crée un nouveau fichier vide dans le répertoire courant. Par exemple, <code>touch mdn-exemple.md</code> crée un fichier vide nommé <code>mdn-exemple.md</code>.</li>
  <li><code>mv</code> — déplace un fichier à partir de l'emplacement spécifié en premier vers celui spécifié en second, par exemple <code>mv mdn-exemple.md mdn-exemple.txt</code> (les emplacements sont écrits sous la forme de chemins - <em>file paths</em>). Cette commande déplace un fichier nommé <code>mdn-exemple.md</code> situé dans le répertoire courant vers une fichier nommé <code>mdn-exemple.txt</code> dans le répertoire courant. Techniquement, le fichier est déplacé, mais d'un point de vue pratique, cette commande renomme en fait le fichier.</li>
  <li><code>cp</code> — d'un usage similaire à <code>mv</code>, <code>cp</code> copie le fichier à l'emplacement spécifié en premier vers celui spécifié en second. Par exemple, <code>cp mdn-exemple.txt mdn-exemple.txt.bak</code> crée une copie de <code>mdn-exemple.txt</code> nommée <code>mdn-exemple.txt.bak</code> (bien entendu vous pouvez la nommer comme vous voulez).</li>
  <li><code>rm</code> — supprimer le fichier spécifié. Par exemple, <code>rm mdn-exemple.txt</code> efface un fichier unique nommé <code>mdn-exemple.txt</code>. Notez que cet effacement est permanent et ne peut pas être annulé comme lorsque vous placez un fichier dans la corbeille de votre Bureau dans votre interface utilisateur.</li>
 </ul>
 
-<div class="blockIndicator note">
+<div class="note">
 <p><strong>Note</strong> : Beaucoup de commandes de terminal autorisent l'emploi d'astérisques comme caractère "joker", dont le sens est "une séquence de caractères quelconque". Cela vous permet d'exécuter une commande en une seule fois sur un nombre potentiellement important de fichiers qui correspondent au modèle donné. À titre d'exemple, <code>rm mdn-*</code> va effacer tous les fichiers qui commencent par <code>mdn-</code>. <code>rm mdn-*.bak</code> va effacer tous les fichiers qui commencent par <code>mdn- </code>et finissent par <code>.bak</code>.</p>
 </div>
 
@@ -235,7 +235,7 @@ cd src</pre>
 
 <p>Autre astuce intéressante : si vous n'êtes pas à l'aise avec l'idée d'essayer des lignes de commande sur votre propre machine, le site <a href="https://glitch.com/">Glitch.com</a> est un bon endroit pour le faire en toute sécurité. En plus d'être un lieu génial pour tester du code de développement web, les projets vous donnent accès à un terminal qui vous permet de lancer toutes les commandes que vous voulez, sans risquer d'endommager votre propre machine.</p>
 
-<p><img alt="a double screenshot showing the glitch.com home page, and the glitch terminal emulator" src="https://mdn.mozillademos.org/files/17179/glitch.png" style="height: 848px; width: 900px;"></p>
+<p><img alt="a double screenshot showing the glitch.com home page, and the glitch terminal emulator" src="glitch.png"></p>
 
 <p>Le site <a href="https://tldr.sh/">tldr.sh</a> est une formidable ressource pour obtenir un aperçu de commandes particulières. C'est un service de documentation géré de façon communautaire, similaire à MDN, mais dédié aux commandes de terminal.</p>
 
@@ -247,61 +247,61 @@ cd src</pre>
 
 <p>Nous avons déjà vu <code>ls</code>, qui liste le contenu du répertoire courant :</p>
 
-<pre class="brush: bash notranslate">ls</pre>
+<pre class="brush: bash">ls</pre>
 
 <p>Mais comment nous y prendre si nous voulons compter le nombre de fichiers et de répertoires à l'intérieur du répertoire courant ? <code>ls</code> n'est pas capable de faire cela à lui seul.</p>
 
 <p>Il existe un autre outil Unix nommé <code>wc</code>. Celui-ci compte les mots, lignes, caractères, ou octets de la donnée qu'on lui passe, quelle qu'elle soit. Il peut s'agir d'un fichier texte — l'exemple ci-dessous donne le nombre de lignes de <code>monfichier.txt</code> :</p>
 
-<pre class="brush: bash notranslate">wc -l monfichier.txt</pre>
+<pre class="brush: bash">wc -l monfichier.txt</pre>
 
-<p>Mais <code>wc</code> est également capable de compter les lignes de tout ce qui lui est passé par un <strong>pipe</strong>. Par exemple, la commande ci-dessous compte les lignes renvoyées par la commande <code>ls</code>  (lignes qui seraient normalement affichées sur le terminal) et affiche ce décompte à la place :</p>
+<p>Mais <code>wc</code> est également capable de compter les lignes de tout ce qui lui est passé par un <strong>pipe</strong>. Par exemple, la commande ci-dessous compte les lignes renvoyées par la commande <code>ls</code>  (lignes qui seraient normalement affichées sur le terminal) et affiche ce décompte à la place :</p>
 
-<pre class="brush: bash notranslate">ls | wc -l</pre>
+<pre class="brush: bash">ls | wc -l</pre>
 
 <p>Comme <code>ls</code> affiche chaque fichier ou répertoire sur une nouvelle ligne, on obtient bien le compte des répertoires et des fichiers.</p>
 
-<p>Comment ça marche ? Le comportement général des outils de ligne de commande (unix) consiste à afficher du texte dans le terminal (ce qu'on appelle aussi "imprimer sur la sortie standard (standard input)" ou  <code>STDOUT</code>). Un bon nombre de commandes peuvent aussi lire du contenu à partir d'un flux d'entrée (appelé "entrée standard (standard input)" ou <code>STDIN</code>).</p>
+<p>Comment ça marche ? Le comportement général des outils de ligne de commande (unix) consiste à afficher du texte dans le terminal (ce qu'on appelle aussi "imprimer sur la sortie standard (standard input)" ou  <code>STDOUT</code>). Un bon nombre de commandes peuvent aussi lire du contenu à partir d'un flux d'entrée (appelé "entrée standard (standard input)" ou <code>STDIN</code>).</p>
 
 <p>L'opérateur pipe peut <em>connecter</em> ces entrées et sorties, ce qui nous permet de construire des opérations de plus en plus complexes selon nos besoins — la sortie d'une commande devient l'entrée de la commande suivante. Dans le cas présent, <code>ls</code> enverrait normalement sa sortie sur <code>STDOUT</code>, mais au lieu de cela la sortie de <code>ls</code> est passée par un pipe à <code>wc</code>, qui la prend en entrée, compte ses lignes et imprime ce décompte sur <code>STDOUT</code>.</p>
 
 <h2 id="Un_exemple_un_peu_plus_complexe">Un exemple un peu plus complexe</h2>
 
-<p>Occupons-nous maintenant de quelque chose d'un peu plus compliqué. Nous allons d'abord essayer de récupérer le contenu de la page MDN "fetch" en utilisant la commande <code>curl</code>  (dont on peut se servir pour faire une requête de contenu à partir d'URLs), sur <a href="https://developer.mozilla.org/en-US/docs/Web/API/fetch">https://developer.mozilla.org/en-US/docs/Web/API/fetch</a>.</p>
+<p>Occupons-nous maintenant de quelque chose d'un peu plus compliqué. Nous allons d'abord essayer de récupérer le contenu de la page MDN "fetch" en utilisant la commande <code>curl</code>  (dont on peut se servir pour faire une requête de contenu à partir d'URLs), sur <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch">https://developer.mozilla.org/fr/docs/Web/API/fetch</a>.</p>
 
-<p>En fait, cette URL est celle de l'ancien emplacement de la page. Lorsque vous l'entrez dans un nouvel onglet de votre navigateur, vous êtes (finalement) redirigé sur <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch</a>.</p>
+<p>En fait, cette URL est celle de l'ancien emplacement de la page. Lorsque vous l'entrez dans un nouvel onglet de votre navigateur, vous êtes (finalement) redirigé sur <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch">https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch</a>.</p>
 
 <p>Par conséquent, si vous utilisez curl pour faire une requête à https://developer.mozilla.org/docs/Web/API/fetch, vous n'aurez pas de résultat. Essayez :</p>
 
-<pre class="brush: bash notranslate">curl https://developer.mozilla.org/en-US/docs/Web/API/fetch</pre>
+<pre class="brush: bash">curl https://developer.mozilla.org/fr/docs/Web/API/fetch</pre>
 
 <p>Nous devons dire explicitement à <code>curl</code> de suivre les redirections en utilisant l'option <code>-L</code>.</p>
 
-<p>Examinons également les en-têtes retournées par <code>developer.mozilla.org</code> en utilisant l'option <code>-I</code> de <code>curl</code>, et affichons toutes les redirections en passant la sortie de <code>curl</code> à <code>grep</code> grâce à un pipe (on va demander à <code>grep</code> de renvoyer toutes les lignes qui contiennent le mot "location").</p>
+<p>Examinons également les en-têtes retournées par <code>developer.mozilla.org</code> en utilisant l'option <code>-I</code> de <code>curl</code>, et affichons toutes les redirections en passant la sortie de <code>curl</code> à <code>grep</code> grâce à un pipe (on va demander à <code>grep</code> de renvoyer toutes les lignes qui contiennent le mot "location").</p>
 
 <p>Essayez maintenant la ligne suivante, et vous allez constater qu'il y a en fait trois redirections avant d'atteindre la page finale :</p>
 
-<pre class="brush: bash notranslate">curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location</pre>
+<pre class="brush: bash">curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location</pre>
 
 <p>Votre sortie devrait ressembler à ceci (<code>curl</code> va d'abord afficher des compteurs et autres informations de téléchargement) :</p>
 
-<pre class="brush: bash notranslate">location: /en-US/docs/Web/API/fetch
-location: /en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
-location: /en-US/docs/Web/API/GlobalFetch/fetch
-location: /en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch</pre>
+<pre class="brush: bash">location: /fr/docs/Web/API/fetch
+location: /fr/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
+location: /fr/docs/Web/API/GlobalFetch/fetch
+location: /fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch</pre>
 
-<p>Bien que ce résultat soit artificiel, nous pourrions le pousser un peu plus loin et remplacer <code>location:</code> par le nom de domaine, de façon à avoir des URLs complètes. Pour cela, nous allons ajouter <code>awk</code> à notre formule (il s'agit d'un langage de programmation tout comme JavaScript, Ruby ou Python, mais beaucoup plus ancien !).</p>
+<p>Bien que ce résultat soit artificiel, nous pourrions le pousser un peu plus loin et remplacer <code>location:</code> par le nom de domaine, de façon à avoir des URLs complètes. Pour cela, nous allons ajouter <code>awk</code> à notre formule (il s'agit d'un langage de programmation tout comme JavaScript, Ruby ou Python, mais beaucoup plus ancien !).</p>
 
 <p>Essayez de lancer cette commande :</p>
 
-<pre class="brush: bash notranslate">curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }'</pre>
+<pre class="brush: bash">curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }'</pre>
 
 <p>Votre sortie finale devrait ressembler à ceci :</p>
 
-<pre class="brush: bash notranslate">https://developer.mozilla.org/en-US/docs/Web/API/fetch
-https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
-https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/fetch
-https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch</pre>
+<pre class="brush: bash">https://developer.mozilla.org/fr/docs/Web/API/fetch
+https://developer.mozilla.org/fr/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
+https://developer.mozilla.org/fr/docs/Web/API/GlobalFetch/fetch
+https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch</pre>
 
 <p>En combinant ces commandes nous avons personnalisé la sortie pour qu'elle montre les URLs complètes vers lesquels le serveur de Mozilla effectue les redirections lorsque nous lui soumettons la requête pour l'URL <code>/docs/Web/API/fetch</code>.<br>
  Développer votre connaissance du système en apprenant le fonctionnement de ces simples outils et comment les intégrer à votre arsenal pour résoudre des problèmes bien particuliers - cela vous sera d'une grande utilité tout au long des années à venir.</p>
@@ -316,9 +316,9 @@ https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
 
 <p>Allons-y : installez npm sur votre système à partir de l'URL ci-dessus qui va vous permettre de télécharger et de lancer un installeur Node.js approprié à votre système d'exploitation. Si cela vous est proposé, assurez-vous d'inclure npm dans l'installation.</p>
 
-<p><img alt="the node.js installer on windows, showing the option to include npm" src="https://mdn.mozillademos.org/files/17185/npm-install-option.png" style="border-style: solid; border-width: 1px; display: block; height: 469px; margin: 0px auto; width: 600px;"></p>
+<p><img alt="the node.js installer on windows, showing the option to include npm" src="npm-install-option.png"></p>
 
-<p>Un certain nombre d'outils variés vous attendent dans le prochaine article ; pour l'instant nous allons nous faire la main sur <a href="https://prettier.io/">Prettier</a>. Prettier est un outil de formatage de code normatif qui se présente comme ayant "peu d'options". Moins d'options, cela évoque plus de simplicité. Vu comme on peut parfois être débordé par la complexité de certains outils, le concept  "peu d'options" peut se révéler très attractif.</p>
+<p>Un certain nombre d'outils variés vous attendent dans le prochaine article ; pour l'instant nous allons nous faire la main sur <a href="https://prettier.io/">Prettier</a>. Prettier est un outil de formatage de code normatif qui se présente comme ayant "peu d'options". Moins d'options, cela évoque plus de simplicité. Vu comme on peut parfois être débordé par la complexité de certains outils, le concept  "peu d'options" peut se révéler très attractif.</p>
 
 <h3 id="Où_installer_nos_outils_de_CLI">Où installer nos outils de CLI ?</h3>
 
@@ -361,11 +361,11 @@ https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
 
 <p>Bien que la liste des <em>contre </em>soit plus courte, l'impact négatif d'une installation globale est potentiellement beaucoup plus lourd que les bénéfices. Cela dit, pour l'instant, nous allons choisir l'installation globale dans un but de simplicité. Nous examinerons davantage les installations locales et leur intérêt dans notre prochain article.</p>
 
-<h3 id="Installation_de_Prettier">Installation de Prettier</h3>
+<h3 id="Installation_de_Prettier">Installation de Prettier</h3>
 
 <p>Dans cette partie nous allons installer Prettier en tant qu'utilitaire global de ligne de commande.</p>
 
-<p>Prettier est un outil de formatage de code normatif pour les développeurs front-end, centré sur le langage JavaScript et ses dérivés, avec un support pour HTML, CSS, SCSS, JSON et plus.</p>
+<p>Prettier est un outil de formatage de code normatif pour les développeurs front-end, centré sur le langage JavaScript et ses dérivés, avec un support pour HTML, CSS, SCSS, JSON et plus.</p>
 
 <p>Prettier offre les avantages suivants :</p>
 
@@ -378,17 +378,17 @@ https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
 
 <p>Après avoir installé node, ouvrez votre terminal et lancez les commandes suivantes pour installer Prettier :</p>
 
-<pre class="brush: bash notranslate">npm install --global prettier</pre>
+<pre class="brush: bash">npm install --global prettier</pre>
 
 <p>Lorsque la commande a terminé son exécution, l'outil Prettier est disponible sur sur votre terminal, partout dans votre système de fichiers.</p>
 
 <p>En lançant la commande sans argument, comme pour beaucoup d'autres commandes, vous obtiendrez les informations d'utilisation et d'aide. Essayez :</p>
 
-<pre class="brush: bash notranslate">prettier</pre>
+<pre class="brush: bash">prettier</pre>
 
 <p>La sortie devrait ressembler à ceci :</p>
 
-<pre class="brush: bash notranslate">Usage: prettier [options] [file/glob ...]
+<pre class="brush: bash">Usage: prettier [options] [file/glob ...]
 
 By default, output is written to stdout.
 Stdin is read if it is piped to Prettier and no files are given.
@@ -401,41 +401,41 @@ Stdin is read if it is piped to Prettier and no files are given.
 
 <p>Jouons un peu avec Prettier pour que vous puissiez voir comment il fonctionne.</p>
 
-<p>Tout d'abord, créez un nouveau répertoire à un endroit que vous pourrez retrouver facilement, par exemple un répertoire nommé <code>prettier-test</code> sur votre <code>Bureau</code>.</p>
+<p>Tout d'abord, créez un nouveau répertoire à un endroit que vous pourrez retrouver facilement, par exemple un répertoire nommé <code>prettier-test</code> sur votre <code>Bureau</code>.</p>
 
 <p>Ensuite collez le code suivant dans un fichier que vous enregistrez dans ce répertoire sous le nom <code>index.js.</code></p>
 
-<pre class="brush: js notranslate">const myObj = {
+<pre class="brush: js">const myObj = {
 a:1,b:{c:2}}
 function printMe(obj){console.log(obj.b.c)}
 printMe(myObj)</pre>
 
-<p>Nous pouvons exécuter prettier sur un code source simplement pour vérifier s'il nécessite une correction. Passez dans votre répertoire avec <code>cd</code> et essayez de lancer cette commande :</p>
+<p>Nous pouvons exécuter prettier sur un code source simplement pour vérifier s'il nécessite une correction. Passez dans votre répertoire avec <code>cd</code> et essayez de lancer cette commande :</p>
 
-<pre class="brush: bash notranslate">prettier --check index.js</pre>
+<pre class="brush: bash">prettier --check index.js</pre>
 
 <p>Vous devriez obtenir quelque chose comme</p>
 
-<pre class="brush: bash notranslate">Checking formatting...
+<pre class="brush: bash">Checking formatting...
 index.js
 Code style issues found in the above file(s). Forgot to run Prettier?
 </pre>
 
-<p>Le style nécessite donc des corrections. Pas de problème. On va les appliquer en ajoutant l'option <code>--write</code> à la commande prettier, ce qui nous laisse nous concentrer sur l'aspect utile de l'écriture du code.</p>
+<p>Le style nécessite donc des corrections. Pas de problème. On va les appliquer en ajoutant l'option <code>--write</code> à la commande prettier, ce qui nous laisse nous concentrer sur l'aspect utile de l'écriture du code.</p>
 
 <p>Essayez maintenant de lancer cette version de la commande :</p>
 
-<pre class="brush: bash notranslate">prettier --write index.js</pre>
+<pre class="brush: bash">prettier --write index.js</pre>
 
 <p>La sortie ressemble maintenant à ceci</p>
 
-<pre class="brush: bash notranslate">Checking formatting...
+<pre class="brush: bash">Checking formatting...
 index.js
 Code style issues fixed in the above file(s).</pre>
 
 <p>Mais le plus important, c'est que votre fichier JavaScript a été reformaté :</p>
 
-<pre class="brush: js notranslate">const myObj = {
+<pre class="brush: js">const myObj = {
   a: 1,
   b: { c: 2 },
 };
@@ -444,45 +444,45 @@ function printMe(obj) {
 }
 printMe(myObj);</pre>
 
-<p>Vous pouvez intégrer cette opération automatisée à votre workflow. L'intérêt des outils réside justement dans l'automatisation ; personnellement, notre préférence va  au type d'automatisme qui se produit de façon transparente, sans qu'aucune configuration soit nécessaire.</p>
+<p>Vous pouvez intégrer cette opération automatisée à votre workflow. L'intérêt des outils réside justement dans l'automatisation ; personnellement, notre préférence va  au type d'automatisme qui se produit de façon transparente, sans qu'aucune configuration soit nécessaire.</p>
 
 <p>Il existe de nombreuses façons de mettre en oeuvre des automatismes avec Prettier, et bien qu'elles dépassent le cadre de cet article, vous trouverez de l'aide dans d'excellentes ressources en ligne, dont certaines grâce aux liens ci-après. Vous pouvez lancer prettier :</p>
 
 <ul>
- <li>Avant de faire un commit sur un dépôt git en utilisant <a href="https://github.com/typicode/husky">Husky</a>.</li>
- <li>Chaque fois que vous cliquez sur "sauvegarder" dans votre éditeur de code, qu'il s'agisse de <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">VS Code</a>, d'<a href="https://atom.io/packages/prettier-atom">Atom</a>, ou de <a href="https://packagecontrol.io/packages/JsPrettier">Sublime Text</a>.</li>
- <li>En tant qu'élément des contrôles continus d'intégration grâce à des outils tels que <a href="https://github.com/features/actions">Github Actions</a>.</li>
+ <li>Avant de faire un commit sur un dépôt git en utilisant <a href="https://github.com/typicode/husky">Husky</a>.</li>
+ <li>Chaque fois que vous cliquez sur "sauvegarder" dans votre éditeur de code, qu'il s'agisse de <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">VS Code</a>, d'<a href="https://atom.io/packages/prettier-atom">Atom</a>, ou de <a href="https://packagecontrol.io/packages/JsPrettier">Sublime Text</a>.</li>
+ <li>En tant qu'élément des contrôles continus d'intégration grâce à des outils tels que <a href="https://github.com/features/actions">Github Actions</a>.</li>
 </ul>
 
-<p>Nous préférons personnellement la deuxième solution — quand on code par exemple sur VS Code, Prettier entre en jeu et nettoie le formatage lors de chaque  enregistrement. Vous trouverez dans les<span> </span><a href="https://prettier.io/docs/en/">Prettier docs</a><span> </span><span>beaucoup plus d'informations sur les différentes façons d'utiliser Prettier.</span></p>
+<p>Nous préférons personnellement la deuxième solution — quand on code par exemple sur VS Code, Prettier entre en jeu et nettoie le formatage lors de chaque  enregistrement. Vous trouverez dans les<span> </span><a href="https://prettier.io/docs/en/">Prettier docs</a><span> </span><span>beaucoup plus d'informations sur les différentes façons d'utiliser Prettier.</span></p>
 
 <h2 id="Autres_outils_à_essayer">Autres outils à essayer</h2>
 
 <p>Voici une courte liste de quelques outils supplémentaires que vous pouvez vous amuser à tester :</p>
 
 <ul>
- <li><code><a href="https://github.com/sharkdp/bat">bat</a></code> — Un <code>cat</code>  plus "beau" (<code>cat</code> affiche le contenu d'un fichier)<em> (NdT : probable jeu de mot en anglais, où cat = chat et bat = chauve-souris)</em>.</li>
- <li><code><a href="http://denilson.sa.nom.br/prettyping/">prettyping</a></code> — implémentation visuellement améliorée de la commande <code>ping</code> (<code>ping</code> permet de tester si un serveur répond).</li>
- <li><code><a href="http://hisham.hm/htop/">htop</a></code> — Pour visualiser les processus en cours, ce qui est intéressant lorsque votre ventilateur de CPU se met à faire un bruit de moteur d'avion et que vous souhaitez identifier le programme responsable.</li>
- <li><code><a href="https://tldr.sh/#installation">tldr</a></code> — client tldr (mentionné plus haut dans ce chapitre) en ligne de commande.</li>
+ <li><code><a href="https://github.com/sharkdp/bat">bat</a></code> — Un <code>cat</code>  plus "beau" (<code>cat</code> affiche le contenu d'un fichier)<em> (NdT : probable jeu de mot en anglais, où cat = chat et bat = chauve-souris)</em>.</li>
+ <li><code><a href="http://denilson.sa.nom.br/prettyping/">prettyping</a></code> — implémentation visuellement améliorée de la commande <code>ping</code> (<code>ping</code> permet de tester si un serveur répond).</li>
+ <li><code><a href="http://hisham.hm/htop/">htop</a></code> — Pour visualiser les processus en cours, ce qui est intéressant lorsque votre ventilateur de CPU se met à faire un bruit de moteur d'avion et que vous souhaitez identifier le programme responsable.</li>
+ <li><code><a href="https://tldr.sh/#installation">tldr</a></code> — client tldr (mentionné plus haut dans ce chapitre) en ligne de commande.</li>
 </ul>
 
-<p>L'auteur a aussi <a href="https://remysharp.com/2018/08/23/cli-improved">décrit certains de ses favoris</a> accompagnés de copies d'écrans si vous avez envie de creuser davantage le sujet.</p>
+<p>L'auteur a aussi <a href="https://remysharp.com/2018/08/23/cli-improved">décrit certains de ses favoris</a> accompagnés de copies d'écrans si vous avez envie de creuser davantage le sujet.</p>
 
-<p>Notez que certains de ces outils nécessitent l'installation préalable de npm, ainsi que nous l'avons fait pour Prettier.</p>
+<p>Notez que certains de ces outils nécessitent l'installation préalable de npm, ainsi que nous l'avons fait pour Prettier.</p>
 
 <h2 id="Résumé">Résumé</h2>
 
-<p>Nous voilà parvenus au terme de cette brève revue du terminal ou ligne de commande. Dans la suite, nous allons nous pencher plus en détail sur les package managers, et sur les possibilités qu'ils nous offrent.</p>
+<p>Nous voilà parvenus au terme de cette brève revue du terminal ou ligne de commande. Dans la suite, nous allons nous pencher plus en détail sur les package managers, et sur les possibilités qu'ils nous offrent.</p>
 
 <p>{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}}</p>
 
 <h2 id="Dans_ce_module">Dans ce module</h2>
 
 <ul>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Client-side tooling overview</a></li>
+ <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Client-side tooling overview</a></li>
  <li><a href="https://wiki.developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_commande">Cours express sur la ligne de commande</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">Introducing a complete toolchain</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Deploying our app</a></li>
+ <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a></li>
+ <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">Introducing a complete toolchain</a></li>
+ <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Deploying our app</a></li>
 </ul>
author	SphinxKnight <SphinxKnight@users.noreply.github.com>	2021-07-14 10:39:25 +0200
committer	GitHub <noreply@github.com>	2021-07-14 10:39:25 +0200
commit	110a7a1592789759f0f427f40856899ea2c3cfd7 (patch)
tree	1b4854c4a2f6bbdb4cf716a0bb7ddb108a7b4751 /files/fr/learn
parent	f4473fd7bab0912ce8a39d8523079a7cbdbdf68e (diff)
download	translated-content-110a7a1592789759f0f427f40856899ea2c3cfd7.tar.gz translated-content-110a7a1592789759f0f427f40856899ea2c3cfd7.tar.bz2 translated-content-110a7a1592789759f0f427f40856899ea2c3cfd7.zip