Fix #4269 - Removes empty/special characters (#4270)

* Remove ufeff

* Remove u2064

* Remove u2062

* Replace u202f followed by : with  :

* Replace u202f next to « or » with   and « or »

* Replace u202f followed by ; with  ;

* Replace u202f followed by ! with  

* Replace u202f followed by ? with  ?

* Replace remaining u202f with classical space

* Replace u200b surrounded by space  with classical space

* Replace u200b surrounded by space  with classical space - again (repeated)

* Remove remaining u200b

* Remove u200a

* Replace u2009 with  

* Remove u00ad

* Replace u00a0 followed by : ! or ? with   and punctuation

* Replace u00a0 surrounded « or » with   and punctuation

* Replace u00a0 followed by whitespaces

* Replace u00a0 preceded by whitespaces

* Replace u00a0 followed by a newline with a newline

* Replace u00a0 followed by a newline with a newline - Take2

* Replace u00a0 followed by a ;   and punctuation

* Remove u00a0 followed by ,

* Remove u00a0 in indentation spaces with \n([ ]*)([\u00a0])([ ]*)

* Manual replacement of ([\u00a0])([ ]+)

* Replace remaining ([\u00a0]+) by a space

* cleaning empty elements

* remove ufe0f

* Remove u00a0 and u202f after merging against updated main

* remove double whitespace using (\w)(  )(\w)

181 files changed, 3417 insertions, 3413 deletions

diff --git a/files/fr/learn/accessibility/accessibility_troubleshooting/index.md b/files/fr/learn/accessibility/accessibility_troubleshooting/index.md
index 7d501db4fb..4dae77c200 100644
--- a/files/fr/learn/accessibility/accessibility_troubleshooting/index.md
+++ b/files/fr/learn/accessibility/accessibility_troubleshooting/index.md
@@ -22,7 +22,7 @@ Dans l’évaluation de ce module, nous vous présentons un site simple, qui pr�
       <th scope="row">Conditions préalables:</th>
       <td>
         Connaissances informatiques de base, une compréhension de base de HTML,
-        CSS et JavaScript, une compréhension de la  <a
+        CSS et JavaScript, une compréhension de la  <a
           href="/fr/docs/Learn/Accessibility"
           >previous articles in the course</a
         >.
@@ -40,7 +40,7 @@ Dans l’évaluation de ce module, nous vous présentons un site simple, qui pr�
 
 ## Point de départ
 
-Pour lancer cette évaluation, vous devez aller chercher le  [ZIP containing the files that comprise the example](https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true). Décompressez le contenu dans un nouveau répertoire quelque part sur votre ordinateur local
+Pour lancer cette évaluation, vous devez aller chercher le  [ZIP containing the files that comprise the example](https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true). Décompressez le contenu dans un nouveau répertoire quelque part sur votre ordinateur local
 
 Le site d'évaluation terminé devrait ressembler à ceci:
 
@@ -70,13 +70,13 @@ Les images sont actuellement inaccessibles aux utilisateurs de lecteur d'écran.
 
 ### Le lecteur audio
 
-1.  Le lecteur  `<audio>` n'est pas accessible aux malentendants (pouvez-vous ajouter une sorte d'alternative accessible pour ces utilisateurs)?
-2.  Le lecteur  `<audio>` n'est pas accessible aux utilisateurs de navigateurs plus anciens qui ne prennent pas en charge l'audio HTML5. Comment pouvez-vous leur permettre d'accéder encore à l'audio?
+1.  Le lecteur  `<audio>` n'est pas accessible aux malentendants (pouvez-vous ajouter une sorte d'alternative accessible pour ces utilisateurs)?
+2.  Le lecteur  `<audio>` n'est pas accessible aux utilisateurs de navigateurs plus anciens qui ne prennent pas en charge l'audio HTML5. Comment pouvez-vous leur permettre d'accéder encore à l'audio?
 
 ### Les formulaires
 
-1.  L'élément  `<input>` dans le formulaire de recherche en haut pourrait être associé à une étiquette, mais nous ne souhaitons pas ajouter une étiquette de texte visible qui risquerait de gâcher la conception et qui n'est pas vraiment utile aux utilisateurs voyants. Comment ajouter une étiquette uniquement accessible aux lecteurs d’écran? ?
-2.  Les deux éléments  `<input>` du formulaire de commentaire ont des étiquettes de texte visibles, mais ils ne sont pas associés sans ambiguïté à leurs étiquettes. Comment y parvenir? Notez que vous devrez également mettre à jour certaines règles CSS.
+1.  L'élément  `<input>` dans le formulaire de recherche en haut pourrait être associé à une étiquette, mais nous ne souhaitons pas ajouter une étiquette de texte visible qui risquerait de gâcher la conception et qui n'est pas vraiment utile aux utilisateurs voyants. Comment ajouter une étiquette uniquement accessible aux lecteurs d’écran? ?
+2.  Les deux éléments  `<input>` du formulaire de commentaire ont des étiquettes de texte visibles, mais ils ne sont pas associés sans ambiguïté à leurs étiquettes. Comment y parvenir? Notez que vous devrez également mettre à jour certaines règles CSS.
 
 ### Le contrôle afficher / masquer les commentaires
 
@@ -92,7 +92,7 @@ Pouvez-vous énumérer deux autres idées d’amélioration qui rendraient le si
 
 ## Évaluation
 
-Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en le demandant sur la [discussion thread for this exercise](https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691),  ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn)  sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez d'abord l'exercice - il n'y a rien à gagner à tricher!
+Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en le demandant sur la [discussion thread for this exercise](https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691),  ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn)  sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez d'abord l'exercice - il n'y a rien à gagner à tricher!
 
 {{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}
 
diff --git a/files/fr/learn/accessibility/css_and_javascript/index.md b/files/fr/learn/accessibility/css_and_javascript/index.md
index 3743469254..4e7fa0384e 100644
--- a/files/fr/learn/accessibility/css_and_javascript/index.md
+++ b/files/fr/learn/accessibility/css_and_javascript/index.md
@@ -52,15 +52,15 @@ Commençons par regarder le CSS.
 
 ### Sémantique correcte et attentes de l'utilisateur
 
-Il est possible d’utiliser CSS pour détourner l'apparence d'un élément HTML pour qu'il ressemble à un autre, mais cela ne veut pas dire que vous devriez le faire. Comme nous l’avons souvent mentionné dans notre article [HTML : une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML), vous devez utiliser, dans la mesure du possible, l’élément sémantique approprié. Sinon, cela peut créer de la confusion et des difficultés d'usage pour tout le monde, plus particulièrement pour les utilisateurs handicapés. L'utilisation de la sémantique correcte a beaucoup à voir avec les attentes des utilisateurs  — les éléments ont une apparence et un comportement particuliers, en fonction de leurs fonctionnalités, et ces conventions communes sont attendues par les utilisateurs.
+Il est possible d’utiliser CSS pour détourner l'apparence d'un élément HTML pour qu'il ressemble à un autre, mais cela ne veut pas dire que vous devriez le faire. Comme nous l’avons souvent mentionné dans notre article [HTML : une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML), vous devez utiliser, dans la mesure du possible, l’élément sémantique approprié. Sinon, cela peut créer de la confusion et des difficultés d'usage pour tout le monde, plus particulièrement pour les utilisateurs handicapés. L'utilisation de la sémantique correcte a beaucoup à voir avec les attentes des utilisateurs  — les éléments ont une apparence et un comportement particuliers, en fonction de leurs fonctionnalités, et ces conventions communes sont attendues par les utilisateurs.
 
 Par exemple, un utilisateur de lecteur d'écran ne peut pas naviguer dans une page via des éléments d'en-tête si le développeur n'a pas utilisé les éléments d'en-tête de manière appropriée pour annoter le contenu. De la même manière, un en-tête perd son utilité visuelle si vous le stylisez de sorte qu'il ne ressemble pas à un en-tête.
 
-La règle de base est la suivante : adaptez les styles et les comportements à votre conception sans rompre les habitudes utilisateur qui permettent une expérience intuitive. Les sections suivantes résument les principales fonctionnalités HTML à prendre en compte.
+La règle de base est la suivante : adaptez les styles et les comportements à votre conception sans rompre les habitudes utilisateur qui permettent une expérience intuitive. Les sections suivantes résument les principales fonctionnalités HTML à prendre en compte.
 
 #### Structure du contenu du texte "standard"
 
-Titres, paragraphes, listes — le contenu de texte de base de votre page :
+Titres, paragraphes, listes — le contenu de texte de base de votre page :
 
 ```html
 <h1>En-têtes</h1>
@@ -89,15 +89,15 @@ p, li {
 Vous devriez :
 
 - Sélectionnez une taille de police, une hauteur de ligne, un espacement interlettres, etc. raisonnables pour que votre texte soit logique, lisible et agréable à lire.
-- Le style par défaut pour les titres, dans une taille plus grande et en gras les distingue du texte principal.
+- Le style par défaut pour les titres, dans une taille plus grande et en gras les distingue du texte principal.
 - Vos listes devraient ressembler à des listes.
-- La couleur du texte doit présenter un contraste suffisant avec la couleur de fond.
+- La couleur du texte doit présenter un contraste suffisant avec la couleur de fond.
 
 Voir [Fondamentaux du texte HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals) et [Introduction au style de texte](/fr/docs/Learn/CSS/Styling_text) pour plus d'informations.
 
 #### Texte mis en emphase
 
-On met en avant une portion de texte grâce au balises *inline* `<em>` :
+On met en avant une portion de texte grâce au balises *inline* `<em>` :
 
 ```html
 <p> L'eau est <em> très chaude </em>.</p>
@@ -117,13 +117,13 @@ Cependant, vous aurez rarement besoin de styliser des éléments d’emphase de
 
 #### Les abréviations
 
-Un élément permettant d'associer une abréviation, un acronyme ou un sigle à sa forme développée :
+Un élément permettant d'associer une abréviation, un acronyme ou un sigle à sa forme développée :
 
 ```html
 <p> Le contenu web est marqué à l'aide de  <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
 ```
 
-Encore une fois, vous voudrez peut-être appliquer une mise en forme simple sur ces éléments :
+Encore une fois, vous voudrez peut-être appliquer une mise en forme simple sur ces éléments&nbsp;:
 
 ```css
 abbr {
@@ -131,11 +131,11 @@ abbr {
 }
 ```
 
-Par convention, on souligne en pointillés les abréviations et il n’est pas judicieux de s’écarter significativement cette règle reconnue. Pour plus d'informations sur les abréviations, voir [Abréviations](/fr/docs/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte#Abbreviations).
+Par convention, on souligne en pointillés les abréviations et il n’est pas judicieux de s’écarter significativement cette règle reconnue. Pour plus d'informations sur les abréviations, voir [Abréviations](/fr/docs/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte#Abbreviations).
 
 #### Liens
 
-Hyperliens  la façon dont vous accédez à de nouveaux endroits sur le Web :
+Hyperliens la façon dont vous accédez à de nouveaux endroits sur le Web :
 
 ```html
 <p> Visiter la  <a href="https://www.mozilla.org"> Page d'accueil de Mozilla </a>.</p>
@@ -165,7 +165,7 @@ Les conventions de style sur les liens sont le soulignement et une couleur diff�
 
 ![](focus-highlight-chrome.png)
 
-Vous pouvez faire preuve de créativité avec les styles de lien, tant que vous continuez à donner aux utilisateurs des informations visuelles en retour lorsqu'ils interagissent avec les liens. Quelque chose doit effectivement se produire pour signaler les changements d'états d'un lien, et vous ne devriez pas vous débarrasser du curseur de pointeur ou du contour — ces deux outils sont des aides très importantes pour l'accessibilité pour ceux qui utilisent les contrôles du clavier.
+Vous pouvez faire preuve de créativité avec les styles de lien, tant que vous continuez à donner aux utilisateurs des informations visuelles en retour lorsqu'ils interagissent avec les liens. Quelque chose doit effectivement se produire pour signaler les changements d'états d'un lien, et vous ne devriez pas vous débarrasser du curseur de pointeur ou du contour — ces deux outils sont des aides très importantes pour l'accessibilité pour ceux qui utilisent les contrôles du clavier.
 
 #### Éléments form
 
@@ -180,23 +180,23 @@ Vous pouvez faire preuve de créativité avec les styles de lien, tant que vous
 
 Vous pouvez voir de bons exemples de CSS dans notre exemple [form-css.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html) et ([en direct](https://mdn.github.io/learning-area/accessibility/css/form-css.html)).
 
-La plupart du CSS que vous rédigerez pour les formulaires servira à dimensionner les éléments, à aligner les étiquettes et les entrées, et à leur donner une apparence nette et ordonnée.
+La plupart du CSS que vous rédigerez pour les formulaires servira à dimensionner les éléments, à aligner les étiquettes et les entrées, et à leur donner une apparence nette et ordonnée.
 
-Toutefois, vous ne devriez pas trop vous écarter des indications visuelles classiques qui signalent qu'un élément du formulaire est ciblé, c'est fondamentalement la même chose que pour les liens (voir ci-dessus). Vous pouvez mettre en forme les états ciblé / survolé du formulaire pour rendre ce comportement plus cohérent sur les navigateurs ou pour obtenir une meilleure intégration au design de votre page, mais ne vous en débarrassez pas complètement. Là encore, les utilisateurs s’appuient sur ces indices pour comprendre ce qui se passe.
+Toutefois, vous ne devriez pas trop vous écarter des indications visuelles classiques qui signalent qu'un élément du formulaire est ciblé, c'est fondamentalement la même chose que pour les liens (voir ci-dessus). Vous pouvez mettre en forme les états ciblé / survolé du formulaire pour rendre ce comportement plus cohérent sur les navigateurs ou pour obtenir une meilleure intégration au design de votre page, mais ne vous en débarrassez pas complètement. Là encore, les utilisateurs s’appuient sur ces indices pour comprendre ce qui se passe.
 
 #### Tableaux
 
 Tableaux pour la présentation des données tabulées.
 
-Vous pouvez voir un bon exemple simple de  [table-css.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html) et ([en direct](https://mdn.github.io/learning-area/accessibility/css/table-css.html)).
+Vous pouvez voir un bon exemple simple de  [table-css.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html) et ([en direct](https://mdn.github.io/learning-area/accessibility/css/table-css.html)).
 
-En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse. Il est judicieux de vous assurer que les en-têtes de table se démarquent (normalement en gras), et de zébrer les lignes via le pseudo-sélecteur `:nth-child(n)` pour faciliter la lecture.
+En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse. Il est judicieux de vous assurer que les en-têtes de table se démarquent (normalement en gras), et de zébrer les lignes via le pseudo-sélecteur `:nth-child(n)` pour faciliter la lecture.
 
 ### Couleur et contraste de couleur
 
 Lorsque vous choisissez un jeu de couleurs pour votre site web, assurez-vous que la couleur du texte contraste bien avec la couleur de fond. Votre design peut sembler agréable, mais cela n’est pas bon si les personnes malvoyantes, par exemple atteintes de daltonisme, ne peuvent pas lire votre contenu.
 
-Il existe un moyen simple de vérifier si votre contraste est suffisamment important pour ne pas causer de problèmes. Il existe un certain nombre d’outils de vérification du contraste en ligne dans lesquels vous pouvez entrer vos couleurs de premier plan et d’arrière-plan afin de les vérifier. Par exemple, le [vérificateur de contraste de couleur](https://webaim.org/resources/contrastchecker/) du WebAIM est simple à utiliser et explique ce dont vous avez besoin pour vous conformer aux critères WCAG relatifs au contraste des couleurs.
+Il existe un moyen simple de vérifier si votre contraste est suffisamment important pour ne pas causer de problèmes. Il existe un certain nombre d’outils de vérification du contraste en ligne dans lesquels vous pouvez entrer vos couleurs de premier plan et d’arrière-plan afin de les vérifier. Par exemple, le [vérificateur de contraste de couleur](https://webaim.org/resources/contrastchecker/) du WebAIM est simple à utiliser et explique ce dont vous avez besoin pour vous conformer aux critères WCAG relatifs au contraste des couleurs.
 
 > **Note :** Un taux de contraste élevé permettra également à toute personne utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, tel qu'exposé à la lumière du soleil.
 
@@ -204,7 +204,7 @@ Un autre conseil est de ne pas compter uniquement sur la couleur pour les pannea
 
 ### Cacher des choses
 
-Dans de nombreux cas, une conception visuelle nécessitera de ne pas afficher tout le contenu en même temps. Par exemple, dans notre [Exemple de boîte d'information à onglets](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) (voir notre [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)), nous avons trois panneaux d’informations, mais nous les [positionnons](/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement) les uns sur les autres et fournissons des onglets sur lesquels on peut cliquer pour les afficher à tour de rôle (c’est aussi accessible au clavier – vous pouvez également utiliser <kbd>Tab</kbd> et <kbd>Entrée</kbd> pour les sélectionner).
+Dans de nombreux cas, une conception visuelle nécessitera de ne pas afficher tout le contenu en même temps. Par exemple, dans notre [Exemple de boîte d'information à onglets](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) (voir notre [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)), nous avons trois panneaux d’informations, mais nous les [positionnons](/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement) les uns sur les autres et fournissons des onglets sur lesquels on peut cliquer pour les afficher à tour de rôle (c’est aussi accessible au clavier – vous pouvez également utiliser <kbd>Tab</kbd> et <kbd>Entrée</kbd> pour les sélectionner).
 
 ![](tabbed-info-box.png)
 
@@ -216,11 +216,11 @@ Par contre, vous ne devriez pas utiliser {{cssxref("visibility")}}`:hidden` ou {
 
 ### Accepter que les utilisateurs puissent remplacer les styles
 
-#### Acceptez que les utilisateurs puissent remplacer vos styles
+#### Acceptez que les utilisateurs puissent remplacer vos styles
 
 Il est possible pour les utilisateurs de remplacer vos styles par leurs propres styles personnalisés, par exemple :
 
-- Voir [Éditeur de Style](/fr/docs/Outils/Éditeur_de_style) pour un guide utile expliquant comment le faire manuellement dans Firefox, et [Comment utiliser une feuille de style (css) personnalisée avec Internet Explorer](https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/) par Adrian Gordon pour les instructions IE équivalentes (EN).
+- Voir [Éditeur de Style](/fr/docs/Outils/Éditeur_de_style) pour un guide utile expliquant comment le faire manuellement dans Firefox, et [Comment utiliser une feuille de style (css) personnalisée avec Internet Explorer](https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/) par Adrian Gordon pour les instructions IE équivalentes (EN).
 - Il est probablement plus facile de le faire en utilisant une extension, par exemple l’extension Stylus est disponible pour [Firefox](https://addons.mozilla.org/en-US/firefox/addon/stylish/), [Safari](https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45), [Opera](https://addons.opera.com/en/extensions/details/stylish/), et [Chrome](https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe).
 
 Les utilisateurs peuvent le faire pour diverses raisons. Un utilisateur malvoyant peut vouloir agrandir le texte de tous les sites Web qu’il visite, ou un utilisateur présentant un déficit de couleur grave peut vouloir afficher tous les sites Web dans des couleurs très contrastées, faciles à lire. Quel que soit le besoin, vous devriez être à l'aise avec cela et rendre vos conceptions suffisamment flexibles pour que de tels changements fonctionnent dans votre conception. Par exemple, vous voudrez peut-être vous assurer que votre zone de contenu principale peut gérer un texte plus volumineux (le défilement commencera peut-être pour permettre à tout le monde de le voir), et ne le cachera pas ou ne sera pas complètement interrompu.
@@ -248,27 +248,27 @@ En plus d'utiliser le bon élément pour le bon travail, vous devez également v
 
 ### Le garder discret
 
-Lors de la création de votre contenu, gardez à l'esprit l'idée d'un **JavaScript discret, en retrait**. JavaScript est discret quand il est utilisé pour améliorer des fonctionnalités, il devient gênant quand ces mêmes fonctionnalités sont développées entièrement en JavaScript. Les fonctions de base de votre page devraient idéalement tourner sans JavaScript, même s’il est évident que ce n’est pas toujours possible. La règle est d'utiliser lorsque cela est possible les fonctionnalités intégrées au navigateur.
+Lors de la création de votre contenu, gardez à l'esprit l'idée d'un **JavaScript discret, en retrait**. JavaScript est discret quand il est utilisé pour améliorer des fonctionnalités, il devient gênant quand ces mêmes fonctionnalités sont développées entièrement en JavaScript. Les fonctions de base de votre page devraient idéalement tourner sans JavaScript, même s’il est évident que ce n’est pas toujours possible. La règle est d'utiliser lorsque cela est possible les fonctionnalités intégrées au navigateur.
 
 De bons exemples d'utilisation de JavaScript discret incluent :
 
 - Fournir une validation de formulaire côté client, qui alerte les utilisateurs en cas de problèmes liés aux entrées de formulaire, sans avoir à attendre que le serveur vérifie les données. S'il n'est pas disponible, le formulaire fonctionnera toujours, mais la validation risque d'être plus lente.
-- Fournir des commandes personnalisées pour les  `<video>` HTML5 accessibles aux utilisateurs uniquement au clavier, ainsi qu'un lien direct vers la vidéo pouvant être utilisé pour y accéder si JavaScript n'est pas disponible (les commandes du navigateur `<video>` par défaut ne sont pas des touches accessibles dans la plupart des navigateurs).
+- Fournir des commandes personnalisées pour les  `<video>` HTML5 accessibles aux utilisateurs uniquement au clavier, ainsi qu'un lien direct vers la vidéo pouvant être utilisé pour y accéder si JavaScript n'est pas disponible (les commandes du navigateur `<video>` par défaut ne sont pas des touches accessibles dans la plupart des navigateurs).
 
 Par exemple, nous avons écrit un exemple de validation de formulaire côté client rapide — voir [form-validation.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html) (voir aussi la [démonstration en direct](https://mdn.github.io/learning-area/accessibility/css/form-validation.html)). Ici, vous verrez un formulaire simple. Lorsque vous essayez de soumettre le formulaire avec un ou les deux champs vides, l'envoi échoue et un message d'erreur s'affiche pour vous indiquer ce qui ne va pas.
 
-Ce type de validation de formulaire est discret — vous pouvez toujours utiliser le formulaire parfaitement sans que le JavaScript soit disponible, et toute implémentation de formulaire sensée aura également une validation côté serveur, car il est trop facile pour les utilisateurs malveillants de contourner la validation côté client (en désactivant JavaScript dans le navigateur, par exemple). La validation côté client est toujours très utile pour signaler les erreurs — les utilisateurs peuvent savoir instantanément quelles erreurs ils commettent, au lieu d'attendre un aller-retour vers le serveur et un rechargement de page. C'est un avantage certain en termes de convivialité.
+Ce type de validation de formulaire est discret — vous pouvez toujours utiliser le formulaire parfaitement sans que le JavaScript soit disponible, et toute implémentation de formulaire sensée aura également une validation côté serveur, car il est trop facile pour les utilisateurs malveillants de contourner la validation côté client (en désactivant JavaScript dans le navigateur, par exemple). La validation côté client est toujours très utile pour signaler les erreurs — les utilisateurs peuvent savoir instantanément quelles erreurs ils commettent, au lieu d'attendre un aller-retour vers le serveur et un rechargement de page. C'est un avantage certain en termes de convivialité.
 
 > **Note :** La validation côté serveur n'a pas été implémentée dans cette simple démonstration.
 
-Nous avons également rendu cette validation de formulaire assez accessible. Nous avons utilisé des éléments {{htmlelement("label")}} pour nous assurer que les libellés des formulaires sont liés de manière non équivoque à leurs entrées, afin que les lecteurs d'écran puissent les lire au fur et à mesure :
+Nous avons également rendu cette validation de formulaire assez accessible. Nous avons utilisé des éléments {{htmlelement("label")}} pour nous assurer que les libellés des formulaires sont liés de manière non équivoque à leurs entrées, afin que les lecteurs d'écran puissent les lire au fur et à mesure&nbsp;:
 
 ```html
 <label for="name"> Entrez votre nom :</label>
 <input type="text" name="name" id="name">
 ```
 
-Nous ne faisons la validation qu'une fois le formulaire soumis — ceci afin de ne pas mettre à jour l'interface utilisateur trop souvent et de ne pas perturber les utilisateurs du lecteur d'écran (et éventuellement d'autres) :
+Nous ne faisons la validation qu'une fois le formulaire soumis — ceci afin de ne pas mettre à jour l'interface utilisateur trop souvent et de ne pas perturber les utilisateurs du lecteur d'écran (et éventuellement d'autres) :
 
 ```js
 form.onsubmit = validate;
@@ -291,9 +291,9 @@ function validate(e) {
 
 > **Note :** Dans cet exemple, nous masquons et montrons la boîte de message d'erreur en utilisant le positionnement absolu plutôt qu'une autre méthode telle que la visibilité ou l'affichage, car cela n'empêche pas le lecteur d'écran de pouvoir lire le contenu de celui-ci.
 
-La validation du formulaire réel serait beaucoup plus complexe que cela : vous voudriez vérifier que le nom saisi ressemble réellement à un nom, que l’âge entré est en réalité un nombre et qu’il est réaliste (par exemple, pas un nombre négatif, ni à quatre chiffres). Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie (`if(testItem.input.value === '')`).
+La validation du formulaire réel serait beaucoup plus complexe que cela : vous voudriez vérifier que le nom saisi ressemble réellement à un nom, que l’âge entré est en réalité un nombre et qu’il est réaliste (par exemple, pas un nombre négatif, ni à quatre chiffres). Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie (`if(testItem.input.value === '')`).
 
-Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis. S'il y a des erreurs  (`if(errorList.innerHTML !== '')`) nous arrêtons la soumission du formulaire ( à l'aide de [event.preventDefault()](/fr/docs/Web/API/Event/preventDefault)), et affichons tous les messages d'erreur créés (voir ci-dessous). Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation.
+Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis. S'il y a des erreurs (`if(errorList.innerHTML !== '')`) nous arrêtons la soumission du formulaire ( à l'aide de [event.preventDefault()](/fr/docs/Web/API/Event/preventDefault)), et affichons tous les messages d'erreur créés (voir ci-dessous). Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation.
 
 Pour chaque entrée pour laquelle aucune valeur n'a été renseignée lors de la soumission du formulaire, nous créons un élément de liste avec un lien et l'insérons dans la liste `errorList`.
 
@@ -304,14 +304,14 @@ function createLink(testItem) {
  anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
  anchor.href = '#' + testItem.input.name;
  anchor.onclick = function() {
-   testItem.input.focus();
+   testItem.input.focus();
  };
  listItem.appendChild(anchor);
  errorList.appendChild(listItem);
 }
 ```
 
-Chaque lien a un double objectif — il vous dit quelle est l’erreur, vous pouvez aussi cliquer dessus / l’activer pour passer directement à l’élément d’entrée en question et corriger votre saisie.
+Chaque lien a un double objectif — il vous dit quelle est l’erreur, vous pouvez aussi cliquer dessus / l’activer pour passer directement à l’élément d’entrée en question et corriger votre saisie.
 
 > **Note :** La partie `focus()` de cet exemple est un peu délicate. Chrome et Edge (et les versions plus récentes d'IE) focalisent l'élément lorsque l'utilisateur clique sur le lien, sans avoir besoin du bloc `onclick`/`focus()`. Safari ne mettra en évidence que l'élément de formulaire avec le lien, il a donc besoin du bloc `onclick`/`focus()` pour le focaliser. Firefox ne focalise pas les entrées correctement dans ce contexte, les utilisateurs de Firefox ne peuvent donc pas en profiter pour le moment (bien que tout le reste fonctionne bien). Le problème de Firefox devrait bientôt être résolu - des efforts sont en cours pour donner la parité des comportements de Firefox aux autres navigateurs (voir {{bug(277178)}}).
 
@@ -328,11 +328,11 @@ Nous expliquerons ces attributs dans notre prochain article, qui couvre [WAI-ARI
 
 > **Note :** Certains d'entre vous penseront probablement au fait que les formulaires HTML5 ont des mécanismes de validation intégrés tels que les attributs `required`, `min`/`minlength`, et `max`/`maxlength` (voir {{htmlelement("input")}} référence d'élément pour plus d'informations). Nous avons fini par ne pas les utiliser dans la démo, car la prise en charge multi-navigateurs est inégale (par exemple, IE10 et versions ultérieures, pas de prise en charge de Safari).
 
-> **Note :** WebAIM's [Validation de formulaire et récupération d'erreur utilisables et accessibles (EN)](https://webaim.org/techniques/formvalidation/) fournit des informations supplémentaires utiles sur la validation de formulaire accessible.
+> **Note :** WebAIM's [Validation de formulaire et récupération d'erreur utilisables et accessibles (EN)](https://webaim.org/techniques/formvalidation/) fournit des informations supplémentaires utiles sur la validation de formulaire accessible.
 
 ### Autres problèmes d'accessibilité JavaScript
 
-Il y a d'autres choses à prendre en compte quand on met en œuvre des solutions JavaScript tout en réflechissant à l'accessibilité. Voilà déjà une liste de points à surveiller, que nous complèterons à chaque fois qu'un nouveau cas se présente.
+Il y a d'autres choses à prendre en compte quand on met en œuvre des solutions JavaScript tout en réflechissant à l'accessibilité. Voilà déjà une liste de points à surveiller, que nous complèterons à chaque fois qu'un nouveau cas se présente.
 
 #### Événements spécifiques à la souris
 
@@ -340,9 +340,9 @@ Comme vous le savez peut-être, la plupart des interactions utilisateur sont imp
 
 Pour résoudre de tels problèmes, vous devez doubler ces événements avec des événements similaires pouvant être activés par d'autres moyens (appelés gestionnaires d'événements indépendants du périphérique) —[focus](/fr/docs/Web/Events/focus) et [blur (event)](/fr/docs/Web/Events/blur) fourniraient une accessibilité aux utilisateurs de clavier.
 
-Regardons un exemple qui illustre cela. Considérons une image miniature ; quand elle est survolée ou ciblée (comme sur un catalogue de produits de commerce électronique) une version plus grande de l’image s'affiche.
+Regardons un exemple qui illustre cela. Considérons une image miniature ; quand elle est survolée ou ciblée (comme sur un catalogue de produits de commerce électronique) une version plus grande de l’image s'affiche.
 
-Nous avons créé un exemple très simple, que vous pouvez trouver sur [Exemple d'événements de souris et de clavier](https://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html)). Le code comporte deux fonctions qui affichent et cachent l'image agrandie ; ceux-ci sont gérés par les lignes suivantes qui les définissent en tant que gestionnaires d'événements :
+Nous avons créé un exemple très simple, que vous pouvez trouver sur [Exemple d'événements de souris et de clavier](https://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html)). Le code comporte deux fonctions qui affichent et cachent l'image agrandie ; ceux-ci sont gérés par les lignes suivantes qui les définissent en tant que gestionnaires d'événements :
 
 ```js
 imgThumb.onmouseover = showImg;
@@ -352,9 +352,9 @@ imgThumb.onfocus = showImg;
 imgThumb.onblur = hideImg;
 ```
 
-Les deux premières lignes exécutent les fonctions lorsque le pointeur de la souris survole et cesse de survoler la vignette, respectivement. Cela ne nous permettra toutefois pas d'accéder à la vue agrandie à l'aide du clavier ; pour cela, nous avons inclus les deux dernières lignes, qui exécutent les fonctions lorsque l'image est nette et floue (lorsque la mise au point s'arrête). Cela peut être fait en tapant sur l'image, car nous avons inclus  `tabindex="0"` dessus.
+Les deux premières lignes exécutent les fonctions lorsque le pointeur de la souris survole et cesse de survoler la vignette, respectivement. Cela ne nous permettra toutefois pas d'accéder à la vue agrandie à l'aide du clavier ; pour cela, nous avons inclus les deux dernières lignes, qui exécutent les fonctions lorsque l'image est nette et floue (lorsque la mise au point s'arrête). Cela peut être fait en tapant sur l'image, car nous avons inclus  `tabindex="0"` dessus.
 
-L'événement [click](/fr/docs/Web/API/Element/click_event) est intéressant — cela semble dépendre de la souris, mais la plupart des navigateurs activent les gestionnaires d'événement [element.onclick](/fr/docs/Web/API/GlobalEventHandlers/onclick) après avoir  pressé <kbd>Entrée</kbd>  sur un lien ou un élément de formulaire ciblé, ou lorsqu'un tel élément est touché sur un écran tactile. Cependant, cela ne fonctionne pas par défaut lorsque vous autorisez un événement à ne pas être mis au point par défaut à l'aide de tabindex. Dans ce cas, vous devez détecter précisément le moment exact où cette touche est enfoncée (voir [Remettre l'accessibilité au clavier](/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in)).
+L'événement [click](/fr/docs/Web/API/Element/click_event) est intéressant — cela semble dépendre de la souris, mais la plupart des navigateurs activent les gestionnaires d'événement [element.onclick](/fr/docs/Web/API/GlobalEventHandlers/onclick) après avoir pressé <kbd>Entrée</kbd>  sur un lien ou un élément de formulaire ciblé, ou lorsqu'un tel élément est touché sur un écran tactile. Cependant, cela ne fonctionne pas par défaut lorsque vous autorisez un événement à ne pas être mis au point par défaut à l'aide de tabindex. Dans ce cas, vous devez détecter précisément le moment exact où cette touche est enfoncée (voir [Remettre l'accessibilité au clavier](/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in)).
 
 ## Résumé
 
diff --git a/files/fr/learn/accessibility/html/index.md b/files/fr/learn/accessibility/html/index.md
index 80bab3a496..561f0e9043 100644
--- a/files/fr/learn/accessibility/html/index.md
+++ b/files/fr/learn/accessibility/html/index.md
@@ -26,7 +26,7 @@ Une grande partie des contenus web peut être rendue accessible simplement en s'
       <td>
         Compétences informatiques de base, compréhension basique de HTML (voir<a
           href="/fr/Apprendre/HTML/Introduction_à_HTML"
-          > </a
+          > </a
         ><a href="/fr/docs/Learn/HTML/Introduction_to_HTML">I</a
         ><a href="/fr/Apprendre/HTML/Introduction_à_HTML">ntroduction à HTML</a
         >), et compréhension de
@@ -46,9 +46,9 @@ Une grande partie des contenus web peut être rendue accessible simplement en s'
   </tbody>
 </table>
 
-## HTML et accessibilité
+## HTML et accessibilité
 
-Plus vous apprenez le HTML — plus vous lisez de ressources, regardez d'exemples — plus vous recontrerez un thème récurrent : l'importance d'utiliser du HTML sémantique, parfois appelé POSH (Plain Old Semantic HTML). C'est l'usage des éléments HTML appropriés autant que possible.
+Plus vous apprenez le HTML — plus vous lisez de ressources, regardez d'exemples — plus vous recontrerez un thème récurrent : l'importance d'utiliser du HTML sémantique, parfois appelé POSH (Plain Old Semantic HTML). C'est l'usage des éléments HTML appropriés autant que possible.
 
 Vous pouvez vous demander pourquoi c'est si important. Après tout, vous pouvez utiliser une combinaison de CSS et de JavaScript pour faire fonctionner n'importe quel élément HTML de la manière que vous souhaitez. Par exemple, un bouton de lecture pour une vidéo sur votre site pourrait être codé ainsi :
 
@@ -62,13 +62,13 @@ Mais comme vous le verrez en détail plus loin, il est beaucoup plus sensé d'ut
 <button>Lire la vidéo</button>
 ```
 
-Non seulement  `<button>` possède des styles adéquats par défaut (que vous voudrez probablement surcharger), il intègre aussi l'accès au clavier — on peut tabuler dessus, et l'activer avec la touche entrée.
+Non seulement `<button>` possède des styles adéquats par défaut (que vous voudrez probablement surcharger), il intègre aussi l'accès au clavier — on peut tabuler dessus, et l'activer avec la touche entrée.
 
 Le HTML sémantique ne demande pas plus de temps à écrire que du (mauvais) balisage non-sémantique si vous le faites de manière constante dès le début de votre projet, et il a également des bénéfices au delà de l'accessibilité :
 
-1.  **Facilite les développements** — comme mentionné ci-dessus, certaines fonctionnalités sont gratuites, et c'est indiscutablement plus compréhensible.
-2.  **Meilleur pour le mobile** — le HTML sémantique est indiscutablement plus léger en la taille du fichier que le code spaghetti non sémantique, et plus aisé à rendre responsive.
-3.  **Bon pour le SEO** — les moteurs de recherche donnent plus d'importance aux mots clés contenus dans les titres, liens, etc. que des mots-clés contenus dans des `<div>` non sémantiques, et donc vos documents seront plus facilement trouvés par vos clients.
+1.  **Facilite les développements** — comme mentionné ci-dessus, certaines fonctionnalités sont gratuites, et c'est indiscutablement plus compréhensible.
+2.  **Meilleur pour le mobile** — le HTML sémantique est indiscutablement plus léger en la taille du fichier que le code spaghetti non sémantique, et plus aisé à rendre responsive.
+3.  **Bon pour le SEO** — les moteurs de recherche donnent plus d'importance aux mots clés contenus dans les titres, liens, etc. que des mots-clés contenus dans des `<div>` non sémantiques, et donc vos documents seront plus facilement trouvés par vos clients.
 
 Continuons et jetons un œil au HTML accessible dans le détail.
 
@@ -76,13 +76,13 @@ Continuons et jetons un œil au HTML accessible dans le détail.
 
 ## Une bonne sémantique
 
-Nous avons déjà parlé de l'importance d'une bonne sémantique, et pourquoi nous devons utiliser le bon élément HTML pour le bon usage. Il ne faut pas l'ignorer car c'est une des principales causes d'importants problèmes d'accessibilité si ce n'est pas fait correctement.
+Nous avons déjà parlé de l'importance d'une bonne sémantique, et pourquoi nous devons utiliser le bon élément HTML pour le bon usage. Il ne faut pas l'ignorer car c'est une des principales causes d'importants problèmes d'accessibilité si ce n'est pas fait correctement.
 
 En vérité sur le Web, les développeurs font d'étranges choses avec HTML. Certains abus en HTML sont hérités de vieilles pratiques obsolètes pas complètement oubliées, d'autre sont juste de l'ignorance. Dans tous les cas, vous devez remplacer ce mauvais code partout où vous le verrez, dès que vous le pourrez.
 
 Parfois vous ne pourrez pas vous débarrasser du mauvais balisage — vos pages seront générées par quelque framework côté serveur dont vous n'aurez pas le contrôle total, ou vous aurez des contenus tiers (comme des bannières publicitaires) que nous ne contrôlerez pas.
 
-L'objectif cependant n'est pas « tout ou rien » — toute amélioration que vous pouvez faire aidera la cause de l'accessibilité.
+L'objectif cependant n'est pas « tout ou rien&nbsp;» — toute amélioration que vous pouvez faire aidera la cause de l'accessibilité.
 
 ### Contenus textuels
 
@@ -141,7 +141,7 @@ Je vais ajouter ici un autre paragraphe.
 Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intéressante que la dernière.
 ```
 
-Si vous essayez notre version plus longue avec un lecteur d'écran (voir [la mauvaise sémantique](https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html)), vous n'aurez pas une très bonne expérience – le lecteur d'écran n'a plus rien à utiliser comme indicateur, il ne peut pas récupérer une table des matières utilisable, et la page entière est vue comme un bloc unique, lu tout d'une traite.
+Si vous essayez notre version plus longue avec un lecteur d'écran (voir [la mauvaise sémantique](https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html)), vous n'aurez pas une très bonne expérience – le lecteur d'écran n'a plus rien à utiliser comme indicateur, il ne peut pas récupérer une table des matières utilisable, et la page entière est vue comme un bloc unique, lu tout d'une traite.
 
 Il y a aussi d'autres problèmes au-delà de l'accessibilité – le contenu est plus dur à mettre en forme avec le CSS, ou à manipuler avec JavaScript par exemple, car il n'y a pas d'élément à utiliser comme sélecteurs.
 
@@ -230,7 +230,7 @@ Si vous essayez de naviguer à l'aide d'un lecteur d'écran, cela vous indiquera
 
 Les structures de table sont un vestige du passé – elles semblaient logiques lorsque le support CSS n’était pas répandu dans les navigateurs, mais elles semaient la confusion chez les utilisateurs de lecteurs d’écran, tout en étant mauvaises pour de nombreuses autres raisons (utilisation abusive des tableaux, nécessite plus de balisage, design manquant de souplesse). Ne les utilisez pas !
 
-Vous pouvez vérifier ces affirmations en comparant votre expérience antérieure avec un  [exemple plus moderne de structure de site Web](https://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/), qui pourrait ressembler à ceci :
+Vous pouvez vérifier ces affirmations en comparant votre expérience antérieure avec un  [exemple plus moderne de structure de site Web](https://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/), qui pourrait ressembler à ceci :
 
 ```html
 <header>
@@ -266,9 +266,9 @@ Vous pouvez vérifier ces affirmations en comparant votre expérience antérieur
 </footer>
 ```
 
-Si vous essayez notre exemple plus moderne de structure avec un lecteur d’écran, vous verrez que le balisage de présentation ne gêne plus ni ne rend la lecture du contenu confuse. Il est également beaucoup plus léger et plus petit en termes de taille de code, ce qui signifie une maintenance plus facile du code et une sollicitation moindre de la bande passante par l'utilisateur (particulièrement critique en cas de connexions lentes).
+Si vous essayez notre exemple plus moderne de structure avec un lecteur d’écran, vous verrez que le balisage de présentation ne gêne plus ni ne rend la lecture du contenu confuse. Il est également beaucoup plus léger et plus petit en termes de taille de code, ce qui signifie une maintenance plus facile du code et une sollicitation moindre de la bande passante par l'utilisateur (particulièrement critique en cas de connexions lentes).
 
-Une autre considération à prendre en compte lors de la création de dispositions consiste à utiliser des éléments sémantiques HTML5 comme dans l'exemple ci-dessus (voir [Référence des éléments HTML](/fr/docs/Web/HTML/Element#Content_sectioning)). Vous pouvez créer une disposition en utilisant uniquement des éléments {{htmlelement("div")}} imbriqués, mais il est préférable d'utiliser des éléments de sectionnement appropriés pour envelopper votre navigation principale ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), en répétant des unités de contenu ({{htmlelement("article")}}), etc. Elles fournissent une sémantique supplémentaire aux lecteurs d’écran (et à d’autres outils) pour donner à l’utilisateur des indices supplémentaires sur le contenu qu’il navigue (voir [Prise en charge du lecteur d’écran pour les nouveaux éléments de section HTML5](http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/) pour une idée de la prise en charge du lecteur d’écran).
+Une autre considération à prendre en compte lors de la création de dispositions consiste à utiliser des éléments sémantiques HTML5 comme dans l'exemple ci-dessus (voir [Référence des éléments HTML](/fr/docs/Web/HTML/Element#Content_sectioning)). Vous pouvez créer une disposition en utilisant uniquement des éléments {{htmlelement("div")}} imbriqués, mais il est préférable d'utiliser des éléments de sectionnement appropriés pour envelopper votre navigation principale ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), en répétant des unités de contenu ({{htmlelement("article")}}), etc. Elles fournissent une sémantique supplémentaire aux lecteurs d’écran (et à d’autres outils) pour donner à l’utilisateur des indices supplémentaires sur le contenu qu’il navigue (voir [Prise en charge du lecteur d’écran pour les nouveaux éléments de section HTML5](http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/) pour une idée de la prise en charge du lecteur d’écran).
 
 > **Note :** Outre le fait que votre contenu présente une bonne sémantique et une présentation attrayante, il convient que son ordre source soit logique : vous pouvez toujours le placer où vous le souhaitez à l'aide de CSS par la suite, mais vous devez définir l'ordre exact des sources pour commencer. les utilisateurs de lecteur d’écran qui se liront auront du sens.
 
@@ -276,11 +276,11 @@ Une autre considération à prendre en compte lors de la création de dispositio
 
 Par contrôles d'interface utilisateur, nous entendons les parties principales des documents web avec lesquelles les utilisateurs interagissent – le plus souvent des boutons, des liens et des contrôles de formulaire. Dans cette section, nous examinerons les problèmes d’accessibilité de base à prendre en compte lors de la création de tels contrôles. Des articles ultérieurs sur WAI-ARIA et le multimédia aborderont d'autres aspects de l'accessibilité de l'interface utilisateur.
 
-L'un des aspects clés de l'accessibilité des contrôles de l'interface utilisateur est que, par défaut, les navigateurs leur permettent d'être manipulés par le clavier. Vous pouvez essayer ceci en utilisant notre exemple [accessibilité du clavier natif](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)) – ouvrez-le dans un nouvel onglet et essayez d’appuyer sur la touche de tabulation; après quelques appuis, vous devriez voir le focus de l'onglet commencer à se déplacer à travers les différents éléments qui peuvent être mis au point ; les éléments focalisés se voient attribuer un style par défaut en surbrillance dans chaque navigateur (il diffère légèrement d’un navigateur à l’autre) afin que vous puissiez déterminer quel élément est ciblé.
+L'un des aspects clés de l'accessibilité des contrôles de l'interface utilisateur est que, par défaut, les navigateurs leur permettent d'être manipulés par le clavier. Vous pouvez essayer ceci en utilisant notre exemple [accessibilité du clavier natif](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)) – ouvrez-le dans un nouvel onglet et essayez d’appuyer sur la touche de tabulation; après quelques appuis, vous devriez voir le focus de l'onglet commencer à se déplacer à travers les différents éléments qui peuvent être mis au point ; les éléments focalisés se voient attribuer un style par défaut en surbrillance dans chaque navigateur (il diffère légèrement d’un navigateur à l’autre) afin que vous puissiez déterminer quel élément est ciblé.
 
 ![](button-focused-unfocused.png)
 
-Vous pouvez ensuite appuyer sur Entrée/Retour pour suivre un lien sélectionné ou appuyer sur un bouton (nous avons inclus du JavaScript pour que les boutons alertent un message), ou commencer à taper pour saisir du texte dans une entrée de texte (les autres éléments de formulaire ont des contrôles différents, par exemple, l'élément  {{htmlelement("select")}} peut avoir ses options affichées et alterner entre les touches fléchées haut et bas).
+Vous pouvez ensuite appuyer sur Entrée/Retour pour suivre un lien sélectionné ou appuyer sur un bouton (nous avons inclus du JavaScript pour que les boutons alertent un message), ou commencer à taper pour saisir du texte dans une entrée de texte (les autres éléments de formulaire ont des contrôles différents, par exemple, l'élément  {{htmlelement("select")}} peut avoir ses options affichées et alterner entre les touches fléchées haut et bas).
 
 > **Note :** Différents navigateurs peuvent avoir différentes options de contrôle du clavier disponibles. Voir comment [gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility) pour plus de détails.
 
@@ -304,23 +304,23 @@ Vous obtenez essentiellement ce comportement gratuitement, en utilisant simpleme
 <h2>formulaire</h2>
 
 <form>
-  <div>
-    <label for="name"> Remplis ton nom :</label>
-    <input type="text" id="name" name="name">
-  </div>
-  <div>
-    <label for="age"> Entrez votre âge :</label>
-    <input type="text" id="age" name="age">
-  </div>
-  <div>
-    <label for="mood"> Choisissez votre humeur :</label>
-    <select id="mood" name="mood">
-      <option>Heureux</option>
+  <div>
+    <label for="name"> Remplis ton nom :</label>
+    <input type="text" id="name" name="name">
+  </div>
+  <div>
+    <label for="age"> Entrez votre âge :</label>
+    <input type="text" id="age" name="age">
+  </div>
+  <div>
+    <label for="mood"> Choisissez votre humeur :</label>
+    <select id="mood" name="mood">
+      <option>Heureux</option>
       <option> Triste </option>
       <option> Fâché </option>
-      <option> Préoccupé </option>
-    </select>
-  </div>
+      <option> Préoccupé </option>
+    </select>
+  </div>
 </form>
 ```
 
@@ -334,7 +334,7 @@ Cependant, il est encore une fois que les gens font parfois des choses étranges
 <div data-message="This is from the third button"> Et moi!</div>
 ```
 
-Il est toutefois déconseillé d’utiliser un tel code. Vous perdriez immédiatement l’accessibilité au clavier natif que vous auriez obtenue si vous aviez utilisé des éléments  {{htmlelement("button")}}. De plus, vous n’obtenez aucun des styles CSS par défaut que les boutons ont.
+Il est toutefois déconseillé d’utiliser un tel code. Vous perdriez immédiatement l’accessibilité au clavier natif que vous auriez obtenue si vous aviez utilisé des éléments  {{htmlelement("button")}}. De plus, vous n’obtenez aucun des styles CSS par défaut que les boutons ont.
 
 #### Remettre l'accessibilité au clavier
 
@@ -361,7 +361,7 @@ document.onkeydown = function(e) {
 }
 ```
 
-Ici, nous ajoutons un écouteur à l’objet `document` pour détecter le moment où un bouton a été appuyé sur le clavier. Nous vérifions quel bouton a été pressé via la propriété [`keyCode`](/fr/docs/Web/API/KeyboardEvent/keyCode) de l'objet événement; s'il s'agit du code clé qui correspond Return/Enter, nous exécutons la fonction stockée dans le gestionnaire du bouton `onclick` à l'aide de `document.activeElement.onclick()`. [`activeElement`](/fr/docs/Web/API/Document/activeElement) nous donne l'élément qui est actuellement ciblé sur la page.
+Ici, nous ajoutons un écouteur à l’objet `document` pour détecter le moment où un bouton a été appuyé sur le clavier. Nous vérifions quel bouton a été pressé via la propriété [`keyCode`](/fr/docs/Web/API/KeyboardEvent/keyCode) de l'objet événement; s'il s'agit du code clé qui correspond Return/Enter, nous exécutons la fonction stockée dans le gestionnaire du bouton `onclick` à l'aide de `document.activeElement.onclick()`. [`activeElement`](/fr/docs/Web/API/Document/activeElement) nous donne l'élément qui est actuellement ciblé sur la page.
 
 > **Note :** N'oubliez pas que cette technique ne fonctionnera que si vous définissez vos gestionnaires d'événements d'origine via les propriétés du gestionnaire d'événements (par exemple, onclick), `addEventListener` ne fonctionnera pas.
 
@@ -371,7 +371,7 @@ C’est beaucoup de tracas supplémentaire pour reconstruire la fonctionnalité.
 
 Les étiquettes de texte de contrôle UI sont très utiles pour tous les utilisateurs, mais leur mise au point est particulièrement importante pour les utilisateurs handicapés.
 
-Vous devez vous assurer que les libellés des boutons et des liens sont compréhensibles et distinctifs. Ne vous contentez pas d'utiliser « Cliquez ici » pour vos étiquettes, car les utilisateurs et utilisatrices de lecteur d'écran créent parfois une liste de boutons et de contrôles de formulaire. La capture d'écran suivante montre nos commandes répertoriées par VoiceOver sur Mac.
+Vous devez vous assurer que les libellés des boutons et des liens sont compréhensibles et distinctifs. Ne vous contentez pas d'utiliser « Cliquez ici&nbsp;» pour vos étiquettes, car les utilisateurs et utilisatrices de lecteur d'écran créent parfois une liste de boutons et de contrôles de formulaire. La capture d'écran suivante montre nos commandes répertoriées par VoiceOver sur Mac.
 
 ![](voiceover-formcontrols.png)
 
@@ -387,7 +387,7 @@ c'est un mauvais texte du lien :
 <p> Les baleines sont des créatures vraiment impressionnantes. Pour en savoir plus sur les baleines,  <a href="whales.html">cliquez ici</a>.</p>
 ```
 
-> **Note :** Vous pouvez trouver beaucoup plus d'informations sur l'implémentation de liens et les meilleures pratiques dans notre article sur la [création d'hyperliens](/fr/docs/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks). Vous pouvez également voir quelques bons et mauvais exemples dans [Bons-liens.html](https://mdn.github.io/learning-area/accessibility/html/good-links.html) et [Mauvais-liens.html](https://mdn.github.io/learning-area/accessibility/html/bad-links.html).
+> **Note :** Vous pouvez trouver beaucoup plus d'informations sur l'implémentation de liens et les meilleures pratiques dans notre article sur la [création d'hyperliens](/fr/docs/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks). Vous pouvez également voir quelques bons et mauvais exemples dans [Bons-liens.html](https://mdn.github.io/learning-area/accessibility/html/good-links.html) et [Mauvais-liens.html](https://mdn.github.io/learning-area/accessibility/html/bad-links.html).
 
 Les libellés de formulaire sont également importantes pour vous donner un indice sur ce que vous devez entrer dans chaque entrée de formulaire. Ce qui suit semble être un exemple assez raisonnable :
 
@@ -412,7 +412,7 @@ Avec le code comme celui-ci, le label sera clairement associée à input; la des
 
 En prime, dans la plupart des navigateurs, associer a un label à une form input signifie que vous pouvez cliquer sur celle-ci pour sélectionner / activer l'élément label. Cela donne à input une zone de résultats plus grande, ce qui facilite la sélection
 
-> **Note :** vous pouvez voir des exemples de bonnes et de mauvaises de formulaire dans [exemple de bon formulaire](https://mdn.github.io/learning-area/accessibility/html/good-form.html) et [exemple de mauvais formulaire](https://mdn.github.io/learning-area/accessibility/html/bad-form.html).
+> **Note :** vous pouvez voir des exemples de bonnes et de mauvaises de formulaire dans [exemple de bon formulaire](https://mdn.github.io/learning-area/accessibility/html/good-form.html) et [exemple de mauvais formulaire](https://mdn.github.io/learning-area/accessibility/html/bad-form.html).
 
 ## Tableaux de données accessibles
 
@@ -447,10 +447,10 @@ Mais cela pose des problèmes : un utilisateur de lecteur d’écran ne peut pas
 
 Regardez maintenant notre tableau d'exemple sur les groupes punk – vous pouvez voir quelques aides à l'accessibilité au travail ici :
 
-- Les en-têtes de tableau sont définis à l'aide d'éléments {{htmlelement("th")}} —  vous pouvez également spécifier s'il s'agit d'en-têtes de lignes ou de colonnes à l'aide de l'attribut `scope`. Cela vous donne des groupes complets de données qui peuvent être consommés par les lecteurs d'écran en tant qu'unités simples
+- Les en-têtes de tableau sont définis à l'aide d'éléments {{htmlelement("th")}} —  vous pouvez également spécifier s'il s'agit d'en-têtes de lignes ou de colonnes à l'aide de l'attribut `scope`. Cela vous donne des groupes complets de données qui peuvent être consommés par les lecteurs d'écran en tant qu'unités simples
 - L'élément {{htmlelement("caption")}} et l'attribut summary `<table>` effectuent tous deux des travaux similaires. Ils agissent en tant que texte alternatif pour une table, offrant ainsi à un utilisateur de lecteur d'écran un résumé rapide et utile du contenu de la table. `<caption>` est généralement préféré car il rend son contenu accessible aux utilisateurs malvoyants, qui pourraient également le trouver utile. Vous n'avez pas vraiment besoin des deux.
 
-> **Note :** voir notre article  [Tableaux HTML : dispositions avancées et accessibilité](/fr/docs/Apprendre/HTML/Tableaux/Advanced) pour plus de détails sur les tables de données accessibles.
+> **Note :** voir notre article  [Tableaux HTML&nbsp;: dispositions avancées et accessibilité](/fr/docs/Apprendre/HTML/Tableaux/Advanced) pour plus de détails sur les tables de données accessibles.
 
 ## Alternatives textuelles
 
@@ -472,11 +472,11 @@ Nous avons un exemple simple écrit, [accessible-image.html](http://mdn.github.i
 
     <p id="dino-label"> Tyrannosaure rouge Rex de Mozilla: Dinosaure à deux jambes, debout comme un être humain, avec des armes légères et une grosse tête avec beaucoup de dents acérées.</p>
 
-La première image, lorsqu'elle est visualisée par un lecteur d'écran, n'offre pas beaucoup d'aide à l'utilisateur. VoiceOver, par exemple, lit « /dinosaur.png, image ». Il lit le nom du fichier pour essayer de fournir de l'aide. Dans cet exemple, l'utilisateur ou l’utilisatrice saura au moins qu'il s'agit d'un dinosaure, mais les fichiers peuvent souvent être chargés avec des noms de fichiers générés par une machine (par exemple, à partir d'un appareil photo numérique) et ces noms de fichiers ne fourniront probablement aucun contexte au contenu de l'image.
+La première image, lorsqu'elle est visualisée par un lecteur d'écran, n'offre pas beaucoup d'aide à l'utilisateur. VoiceOver, par exemple, lit « /dinosaur.png, image&nbsp;». Il lit le nom du fichier pour essayer de fournir de l'aide. Dans cet exemple, l'utilisateur ou l’utilisatrice saura au moins qu'il s'agit d'un dinosaure, mais les fichiers peuvent souvent être chargés avec des noms de fichiers générés par une machine (par exemple, à partir d'un appareil photo numérique) et ces noms de fichiers ne fourniront probablement aucun contexte au contenu de l'image.
 
 > **Note :** c'est pourquoi vous ne devriez jamais inclure de contenu textuel dans une image. Les lecteurs d'écran ne peuvent tout simplement pas y accéder. Il y a aussi d'autres inconvénients - vous ne pouvez pas le sélectionner et le copier/coller. Juste ne le faite pas !
 
-Quand un lecteur d'écran rencontre la deuxième image, il lit l'intégralité de l'attribut alt – « Un Tyrannosaure Rex rouge : Un dinosaure à deux pattes se tenant droit comme un humain, avec des armes de petit calibre et une grosse tête avec beaucoup de dents acérées. »
+Quand un lecteur d'écran rencontre la deuxième image, il lit l'intégralité de l'attribut alt – « Un Tyrannosaure Rex rouge : Un dinosaure à deux pattes se tenant droit comme un humain, avec des armes de petit calibre et une grosse tête avec beaucoup de dents acérées.&nbsp;»
 
 Cela met en évidence l’importance non seulement d’utiliser des noms de fichiers significatifs au cas où ce qui est appelé **alt text** n’est pas disponible, mais aussi de s’assurer que le texte alternatif est fourni dans les attributs `alt` chaque fois que possible. Notez que le contenu de l'attribut `alt` doit toujours fournir une représentation directe de l'image et de ce qu'elle transmet visuellement. Aucune connaissance personnelle ou description supplémentaire ne devrait être incluse ici, car elle n’est pas utile pour les personnes qui n’ont jamais rencontré l’image auparavant.
 
@@ -498,11 +498,11 @@ Jetons un autre coup d'oeil à la quatrième méthode :
 
 Dans ce cas, nous n'utilisons pas du tout l'attribut `alt` Nous avons plutôt présenté notre description de l'image sous forme de paragraphe de texte normal, en lui attribuant un `id` puis nous avons utilisé l'attribut `aria-labelledby` pour : faire référence à cela `id`, ce qui amène les lecteurs d’écran à utiliser ce paragraphe comme alt text/label pour cette image. Ceci est particulièrement utile si vous souhaitez utiliser le même texte comme étiquette pour plusieurs images – quelque chose qui n’est pas possible avec `alt`.
 
-> **Note :** `aria-labelledby` fait partie de la spécification [WAI ARIA](https://www.w3.org/TR/wai-aria-1.1/), qui permet aux développeurs d'ajouter une sémantique supplémentaire à leur balisage afin d'améliorer l'accessibilité du lecteur d'écran, le cas échéant. Pour en savoir plus sur son fonctionnement, lisez notre article [WAI-ARIA basic](/fr/docs/Learn/Accessibility/WAI-ARIA_basics).
+> **Note :** `aria-labelledby` fait partie de la spécification [WAI ARIA](https://www.w3.org/TR/wai-aria-1.1/), qui permet aux développeurs d'ajouter une sémantique supplémentaire à leur balisage afin d'améliorer l'accessibilité du lecteur d'écran, le cas échéant. Pour en savoir plus sur son fonctionnement, lisez notre article [WAI-ARIA basic](/fr/docs/Learn/Accessibility/WAI-ARIA_basics).
 
 ### Autres mécanismes alternatifs de texte
 
-Les images ont également d'autres mécanismes disponibles pour fournir un texte descriptif. Par exemple, il existe un attribut `longdesc` destiné à pointer sur un document web distinct contenant une description étendue de l'image, par exemple :
+Les images ont également d'autres mécanismes disponibles pour fournir un texte descriptif. Par exemple, il existe un attribut `longdesc` destiné à pointer sur un document web distinct contenant une description étendue de l'image, par exemple :
 
 ```html
 <img src="dinosaur.png" longdesc="dino-info.html">
@@ -510,7 +510,7 @@ Les images ont également d'autres mécanismes disponibles pour fournir un texte
 
 Cela semble être une bonne idée, en particulier pour les infographies telles que les grands graphiques contenant de nombreuses informations, qui pourraient peut-être être représentées sous forme de tableau de données accessible (voir section précédente). Cependant, longdesc n’est pas toujours pris en charge par les lecteurs d’écran et le contenu est totalement inaccessible aux utilisateurs autres que les lecteurs d’écran. Il est sans doute préférable d’inclure la description longue sur la même page que l’image, ou d’y accéder par un lien régulier.
 
-HTML5 comprend deux nouveaux éléments  — {{htmlelement("figure")}} et {{htmlelement("figcaption")}} — qui sont supposés associer une figure quelconque (ce peut être n'importe quoi, pas nécessairement une image) à une légende de figure :
+HTML5 comprend deux nouveaux éléments  — {{htmlelement("figure")}} et {{htmlelement("figcaption")}} — qui sont supposés associer une figure quelconque (ce peut être n'importe quoi, pas nécessairement une image) à une légende de figure :
 
 ```html
 <figure>
@@ -530,7 +530,7 @@ Malheureusement, la plupart des lecteurs d’écran ne semblent pas encore assoc
 </h3>
 ```
 
-Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle. Vous remarquerez dans l'exemple de code ci-dessus que l'attribut `alt` de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement « image », ou similaire) .
+Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle. Vous remarquerez dans l'exemple de code ci-dessus que l'attribut `alt` de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement «&nbsp;image&nbsp;», ou similaire) .
 
 La raison d'utiliser un vide `alt` au lieu de ne pas l'inclure est due au fait que de nombreux lecteurs d'écran annoncent l'URL complète de l'image si aucun `alt` n'est fourni. Dans l'exemple ci-dessus, l'image agit comme une décoration visuelle de l'en-tête auquel elle est associée. Dans ce cas, et dans les cas où une image est uniquement une décoration et n'a pas de valeur de contenu, vous devez mettre un vide `alt` sur vos images. Une autre alternative consiste à utiliser l'attribut aria role role = "presentation" – cela empêche également les lecteurs d'écrans de lire du texte alternatif.
 
diff --git a/files/fr/learn/accessibility/index.md b/files/fr/learn/accessibility/index.md
index dc0aa87bd3..28d9839bf0 100644
--- a/files/fr/learn/accessibility/index.md
+++ b/files/fr/learn/accessibility/index.md
@@ -14,26 +14,26 @@ original_slug: Apprendre/a11y
 ---
 {{LearnSidebar}}
 
-Apprendre le HTML, le CSS et le JavaScript est utile si vous voulez devenir développeur web, mais vos connaissances devront aller au delà de la simple utilisation des technologies — vous devrez les utiliser de manière responsable, de la bonne manière, de façon à maximiser l'audience de vos sites web et ne priver personne de leur usage. Pour y parvenir, vous devrez respecter les bonnes pratiques (lesquelles sont démontrées à travers les sujets du [HTML](/fr/Apprendre/HTML), du [CSS](/fr/Apprendre/CSS) et du [JavaScript](/fr/Apprendre/JavaScript)), effectuer [des tests sur les différents navigateurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing) et prendre l'accessibilité en considération dès le départ. Dans ce module, nous allons traiter de cette dernière en détail.
+Apprendre le HTML, le CSS et le JavaScript est utile si vous voulez devenir développeur web, mais vos connaissances devront aller au delà de la simple utilisation des technologies — vous devrez les utiliser de manière responsable, de la bonne manière, de façon à maximiser l'audience de vos sites web et ne priver personne de leur usage. Pour y parvenir, vous devrez respecter les bonnes pratiques (lesquelles sont démontrées à travers les sujets du [HTML](/fr/Apprendre/HTML), du [CSS](/fr/Apprendre/CSS) et du [JavaScript](/fr/Apprendre/JavaScript)), effectuer [des tests sur les différents navigateurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing) et prendre l'accessibilité en considération dès le départ. Dans ce module, nous allons traiter de cette dernière en détail.
 
 ## Prérequis
 
-Pour tirer le meilleur parti de ce module, il serait judicieux de parcourir les sections relatives à [HTML](/fr/Apprendre/HTML), [CSS](/fr/Apprendre/CSS) et [JavaScript](/fr/Apprendre/JavaScript) en premier (au moins les deux premiers modules de chacune de ces sections) ou, peut-être encore mieux, de travailler les parties pertinentes du module d'accessibilité au fur et à mesure que vous travaillez les sujets technologiques connexes.
+Pour tirer le meilleur parti de ce module, il serait judicieux de parcourir les sections relatives à [HTML](/fr/Apprendre/HTML), [CSS](/fr/Apprendre/CSS) et [JavaScript](/fr/Apprendre/JavaScript) en premier (au moins les deux premiers modules de chacune de ces sections) ou, peut-être encore mieux, de travailler les parties pertinentes du module d'accessibilité au fur et à mesure que vous travaillez les sujets technologiques connexes.
 
-> **Note :** Si vous travaillez sur un ordinateur, une tablette ou un autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code dans un programme de code en ligne tel que [JSBin](https://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/).
+> **Note :** Si vous travaillez sur un ordinateur, une tablette ou un autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code dans un programme de code en ligne tel que [JSBin](https://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/).
 
 ## Guides
 
 - [Qu'est-ce que l'accessibilité ?](/fr/docs/Learn/Accessibility/What_is_accessibility)
-  - : Cet article amorce le module avec un bon aperçu de ce qu'est réellement l'accessibilité – cela inclut les groupes de personnes que nous devons considérer et pourquoi, quels outils les différentes personnes utilisent pour interagir avec le Web et comment nous pouvons intégrer l'accessibilité dans le processus de développement web.
+  - : Cet article amorce le module avec un bon aperçu de ce qu'est réellement l'accessibilité – cela inclut les groupes de personnes que nous devons considérer et pourquoi, quels outils les différentes personnes utilisent pour interagir avec le Web et comment nous pouvons intégrer l'accessibilité dans le processus de développement web.
 - [HTML : une bonne base pour l'accessibilité](/fr/docs/Learn/Accessibility/HTML)
   - : Une grande partie du contenu web peut être rendue accessible simplement lorsqu'on utilise les bons éléments HTML dans les bons cas. Cet article examine en détail comment HTML peut être utilisé pour assurer une accessibilité maximale.
-- [Meilleures pratiques d'accessibilité CSS et JavaScript](/fr/docs/Learn/Accessibility/CSS_and_JavaScript)
-  - : Lorsqu'ils sont utilisés correctement, CSS et JavaScript peuvent permettre des expériences web accessibles… mais ils peuvent considérablement nuire à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines pratiques exemplaires pour CSS et JavaScript qui doivent être prises en compte afin de s'assurer que le contenu, même complexe, soit le plus accessible possible.
+- [Meilleures pratiques d'accessibilité CSS et JavaScript](/fr/docs/Learn/Accessibility/CSS_and_JavaScript)
+  - : Lorsqu'ils sont utilisés correctement, CSS et JavaScript peuvent permettre des expériences web accessibles… mais ils peuvent considérablement nuire à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines pratiques exemplaires pour CSS et JavaScript qui doivent être prises en compte afin de s'assurer que le contenu, même complexe, soit le plus accessible possible.
 - [Principes de base du WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics)
-  - : À la suite de l'article précédent, il est parfois compliqué de créer des contrôles complexes et accessible pour une interface utilisateur qui contient du HTML non sémantique et du contenu dynamique mis à jour grâce à JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs de savoir ce qui se passe. Nous allons montrer ici comment l'utiliser, à un niveau basique, pour améliorer l'accessibilité.
+  - : À la suite de l'article précédent, il est parfois compliqué de créer des contrôles complexes et accessible pour une interface utilisateur qui contient du HTML non sémantique et du contenu dynamique mis à jour grâce à JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs de savoir ce qui se passe. Nous allons montrer ici comment l'utiliser, à un niveau basique, pour améliorer l'accessibilité.
 - [Accessibilité pour les contenus multimédias](/fr/docs/Learn/Accessibility/Multimedia)
-  - : Un autre type de contenu susceptible de créer des problèmes d'accessibilité est le multimédia : les contenus vidéo, audio et les image doivent être dotés de textes alternatifs appropriés afin qu'ils puissent être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.
+  - : Un autre type de contenu susceptible de créer des problèmes d'accessibilité est le multimédia : les contenus vidéo, audio et les image doivent être dotés de textes alternatifs appropriés afin qu'ils puissent être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.
 - [Accessibilité mobile](/fr/docs/Learn/Accessibility/Mobile)
   - : On accède désormais au Web depuis son smartphone. Les plateformes iOS et Android possèdent des outils d'accessibilité à part entière. Il est tout aussi important de prendre en compte l'accessibilité de votre contenu web sur ces plateformes. Cet article examine les considérations d'accessibilité spécifiques au mobile.
 
diff --git a/files/fr/learn/accessibility/mobile/index.md b/files/fr/learn/accessibility/mobile/index.md
index 026f65153c..8fa38ba1a1 100644
--- a/files/fr/learn/accessibility/mobile/index.md
+++ b/files/fr/learn/accessibility/mobile/index.md
@@ -21,7 +21,7 @@ L'accès Web sur les appareils mobiles étant si populaire et les plates-formes
       <th scope="row">Prerequisites:</th>
       <td>
         Connaissances de base en informatique, compréhension de base de HTML,
-        CSS et JavaScript et compréhension de la  <a
+        CSS et JavaScript et compréhension de la  <a
           href="/fr/docs/Learn/Accessibility"
           >previous articles in the course</a
         >.
@@ -41,7 +41,7 @@ L'accès Web sur les appareils mobiles étant si populaire et les plates-formes
 
 L’état de l’accessibilité - et la prise en charge des normes Web en général - est bon pour les appareils mobiles modernes. Le temps où les appareils mobiles utilisaient des technologies Web complètement différentes des navigateurs de bureau, forçait les développeurs à utiliser le sniffing de navigateur et à leur servir des sites complètement séparés (même si de nombreuses entreprises détectent encore l'utilisation d'appareils mobiles et leur servent un domaine distinct).
 
-De nos jours, les appareils mobiles en général peuvent gérer des sites Web "complets", et les principales plates-formes ont même des lecteurs d'écran intégrés pour permettre aux utilisateurs malvoyants de les utiliser avec succès. Les navigateurs mobiles modernes ont tendance à avoir un bon support pour  [WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics), aussi
+De nos jours, les appareils mobiles en général peuvent gérer des sites Web "complets", et les principales plates-formes ont même des lecteurs d'écran intégrés pour permettre aux utilisateurs malvoyants de les utiliser avec succès. Les navigateurs mobiles modernes ont tendance à avoir un bon support pour  [WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics), aussi
 
 Pour rendre un site Web accessible et utilisable sur mobile, il vous suffit de suivre les bonnes pratiques générales en matière de conception de sites Web et d'accessibilité.
 
@@ -63,7 +63,7 @@ Le lecteur d’écran TalkBack est intégré au système d’exploitation Androi
 
 Pour l'activer, sélectionnez Paramètres> Accessibilité> TalkBack, puis appuyez sur le curseur pour l'activer. Suivez toute invite supplémentaire à l'écran qui vous est présentée.
 
-**Note:**  Les anciennes versions de TalkBack sont activées dans [slightly different ways](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback).
+**Note:**  Les anciennes versions de TalkBack sont activées dans [slightly different ways](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback).
 
 Lorsque TalkBack est activé, les commandes de base de votre appareil Android seront un peu différentes. Par exemple:
 
@@ -80,7 +80,7 @@ Si vous souhaitez désactiver TalkBack:
 
 **Note:** Vous pouvez accéder à votre écran d'accueil à tout moment en glissant vers le haut et à gauche dans un mouvement fluide. Si vous avez plus d'un écran d'accueil, vous pouvez passer d'un écran à l'autre en faisant glisser deux doigts vers la gauche et vers la droite. .
 
-Pour une liste plus complète des gestes TalkBack, voir  [Use TalkBack gestures](https://support.google.com/accessibility/android/answer/6151827).
+Pour une liste plus complète des gestes TalkBack, voir  [Use TalkBack gestures](https://support.google.com/accessibility/android/answer/6151827).
 
 #### Déverrouiller le téléphone
 
@@ -101,7 +101,7 @@ TalkBack vous permet d'accéder aux menus contextuels globaux et locaux, où que
 3.  Balayez vers la gauche et la droite pour naviguer entre les différentes options. .
 4.  Une fois que vous avez sélectionné l'option de votre choix, double-cliquez dessus pour la choisir.
 
-Pour plus de détails sur toutes les options disponibles dans les menus contextuels global et local, voir  [Use global and local context menus](https://support.google.com/accessibility/android/answer/6007066).
+Pour plus de détails sur toutes les options disponibles dans les menus contextuels global et local, voir  [Use global and local context menus](https://support.google.com/accessibility/android/answer/6007066).
 
 #### Parcourir des pages Web
 
@@ -123,7 +123,7 @@ Par exemple, avec TalkBack activé:
 7.  Appuyez deux fois pour le sélectionner. Vous pouvez maintenant glisser à gauche et à droite pour vous déplacer entre les rubriques et les points de repère ARIA.
 8.  Pour revenir au mode par défaut, entrez de nouveau dans le menu contextuel local en balayant l'écran vers le haut, le curseur à droite, sélectionnez "Par défaut", puis tapez deux fois pour l'activer.
 
-**Note:**  Voir  aussi [Get started on Android with TalkBack](https://support.google.com/accessibility/android/answer/6283677?hl=en&ref_topic=3529932) pour obtenir une documentation plus complète.
+**Note:**  Voir aussi [Get started on Android with TalkBack](https://support.google.com/accessibility/android/answer/6283677?hl=en&ref_topic=3529932) pour obtenir une documentation plus complète.
 
 ### iOS VoiceOver
 
@@ -182,17 +182,17 @@ Essayons la navigation Web avec VoiceOver:
 
 7.  S*électionnez les en-têtes*. Vous pouvez maintenant glisser de haut en bas pour vous déplacer entre les titres de la page.
 
-**Note:**  Pour une référence plus complète couvrant les gestes VoiceOver disponibles et d'autres astuces sur le test d'accessibilité sur iOS, voir aussi [Test Accessibility on Your Device with VoiceOver](https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3).
+**Note:**  Pour une référence plus complète couvrant les gestes VoiceOver disponibles et d'autres astuces sur le test d'accessibilité sur iOS, voir aussi [Test Accessibility on Your Device with VoiceOver](https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3).
 
 ## Mécanismes de contrôle
 
-Dans notre article relatif à l'accessibilité CSS et JavaScript, nous avons examiné l'idée d'événements spécifiques à un certain type de mécanisme de contrôle  (see [Mouse-specific events](/fr/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events)). En résumé, cela pose des problèmes d'accessibilité car d'autres mécanismes de contrôle ne peuvent pas activer la fonctionnalité associée.
+Dans notre article relatif à l'accessibilité CSS et JavaScript, nous avons examiné l'idée d'événements spécifiques à un certain type de mécanisme de contrôle  (see [Mouse-specific events](/fr/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events)). En résumé, cela pose des problèmes d'accessibilité car d'autres mécanismes de contrôle ne peuvent pas activer la fonctionnalité associée.
 
-Par exemple, l'événement  [click](/fr/docs/Web/API/GlobalEventHandlers/onclick)  est bon en termes d'accessibilité - un gestionnaire d'événements associé peut être appelé en cliquant sur l'élément sur lequel il est défini, en le sélectionnant et en appuyant sur Entrée / Retour ou en le tapant sur un périphérique à écran tactile. Essayez notre [simple-button-example.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html) exemple ([see it running live](http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html)) pour voir ce que nous entendons. .
+Par exemple, l'événement  [click](/fr/docs/Web/API/GlobalEventHandlers/onclick)  est bon en termes d'accessibilité - un gestionnaire d'événements associé peut être appelé en cliquant sur l'élément sur lequel il est défini, en le sélectionnant et en appuyant sur Entrée / Retour ou en le tapant sur un périphérique à écran tactile. Essayez notre [simple-button-example.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html) exemple ([see it running live](http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html)) pour voir ce que nous entendons. .
 
-Sinon, des événements spécifiques à la souris, tels que  [mousedown](/fr/docs/Web/API/GlobalEventHandlers/onmousedown) et [mouseup](/fr/docs/Web/API/GlobalEventHandlers/onmouseup) créent des problèmes - leurs gestionnaires d'événements ne peuvent pas être appelés à l'aide de contrôles autres que la souris.
+Sinon, des événements spécifiques à la souris, tels que  [mousedown](/fr/docs/Web/API/GlobalEventHandlers/onmousedown) et [mouseup](/fr/docs/Web/API/GlobalEventHandlers/onmouseup) créent des problèmes - leurs gestionnaires d'événements ne peuvent pas être appelés à l'aide de contrôles autres que la souris.
 
-Si vous essayez de contrôler notre exemple  [simple-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html) ([see example live](http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html)) avec un clavier ou une touche, vous verrez le problème. Cela se produit car nous utilisons un code tel que:
+Si vous essayez de contrôler notre exemple  [simple-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html) ([see example live](http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html)) avec un clavier ou une touche, vous verrez le problème. Cela se produit car nous utilisons un code tel que:
 
 ```js
 div.onmousedown = function() {
@@ -217,21 +217,21 @@ div.ontouchstart = function(e) {
 panel.ontouchend = stopMove;
 ```
 
-Nous avons fourni un exemple simple qui montre comment utiliser simultanément les événements de la souris et des événements tactiles — voir [multi-control-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html) ([see the example live](http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html) aussi).
+Nous avons fourni un exemple simple qui montre comment utiliser simultanément les événements de la souris et des événements tactiles — voir [multi-control-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html) ([see the example live](http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html) aussi).
 
-**Note:** Vous pouvez également voir des exemples fonctionnels montrant comment implémenter différents mécanismes de contrôle à   [Implementing game control mechanisms](/fr/docs/Games/Techniques/Control_mechanisms).
+**Note:** Vous pouvez également voir des exemples fonctionnels montrant comment implémenter différents mécanismes de contrôle à   [Implementing game control mechanisms](/fr/docs/Games/Techniques/Control_mechanisms).
 
 ## Responsive design
 
-[Responsive design](/fr/docs/Web/Apps/Progressive/Responsive) a l’habitude de faire en sorte que vos mises en page et les autres fonctionnalités de vos applications changent de manière dynamique en fonction de facteurs tels que la taille de l’écran et la résolution, de sorte qu’elles soient utilisables et accessibles aux utilisateurs de différents types d’appareils. .
+[Responsive design](/fr/docs/Web/Apps/Progressive/Responsive) a l’habitude de faire en sorte que vos mises en page et les autres fonctionnalités de vos applications changent de manière dynamique en fonction de facteurs tels que la taille de l’écran et la résolution, de sorte qu’elles soient utilisables et accessibles aux utilisateurs de différents types d’appareils. .
 
 En particulier, les problèmes les plus courants auxquels le mobile doit faire face sont les suivants:
 
-- Adéquation des mises en page pour les appareils mobiles. Une mise en page à plusieurs colonnes ne fonctionnera pas aussi bien sur un écran étroit, par exemple, et il faudra peut-être augmenter la taille du texte pour le rendre lisible. Ces problèmes peuvent être résolus en créant une mise en page réactive utilisant des technologies telles que  [media queries](/fr/docs/Web/CSS/Media_Queries), [viewport](/fr/docs/Mozilla/Mobile/Viewport_meta_tag), et [flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox).
-- Conserver les tailles d’image téléchargées. En général, les appareils de petite taille n’auront pas besoin d’images aussi volumineuses que leurs homologues de bureau, et ils risquent davantage d’être sur des connexions réseau lentes. Par conséquent, il est sage de servir des images plus petites sur des dispositifs à écran étroit, le cas échéant. Vous pouvez gérer cela en utilisant  [responsive image techniques](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
-- Penser aux hautes résolutions. De nombreux appareils mobiles ont des écrans haute résolution et ont donc besoin d'images de résolution supérieure pour que l'affichage puisse continuer à être net et net. Encore une fois, vous pouvez servir des images selon vos besoins en utilisant des techniques d’image réactives. De plus, de nombreuses exigences en matière d'images peuvent être satisfaites grâce au format d'images vectorielles SVG, bien pris en charge par les navigateurs actuels. SVG a une petite taille de fichier et restera net quelle que soit la taille affichée   (voir [Adding vector graphics to the web](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) pour plus de détails ).
+- Adéquation des mises en page pour les appareils mobiles. Une mise en page à plusieurs colonnes ne fonctionnera pas aussi bien sur un écran étroit, par exemple, et il faudra peut-être augmenter la taille du texte pour le rendre lisible. Ces problèmes peuvent être résolus en créant une mise en page réactive utilisant des technologies telles que  [media queries](/fr/docs/Web/CSS/Media_Queries), [viewport](/fr/docs/Mozilla/Mobile/Viewport_meta_tag), et [flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox).
+- Conserver les tailles d’image téléchargées. En général, les appareils de petite taille n’auront pas besoin d’images aussi volumineuses que leurs homologues de bureau, et ils risquent davantage d’être sur des connexions réseau lentes. Par conséquent, il est sage de servir des images plus petites sur des dispositifs à écran étroit, le cas échéant. Vous pouvez gérer cela en utilisant  [responsive image techniques](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
+- Penser aux hautes résolutions. De nombreux appareils mobiles ont des écrans haute résolution et ont donc besoin d'images de résolution supérieure pour que l'affichage puisse continuer à être net et net. Encore une fois, vous pouvez servir des images selon vos besoins en utilisant des techniques d’image réactives. De plus, de nombreuses exigences en matière d'images peuvent être satisfaites grâce au format d'images vectorielles SVG, bien pris en charge par les navigateurs actuels. SVG a une petite taille de fichier et restera net quelle que soit la taille affichée   (voir [Adding vector graphics to the web](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) pour plus de détails ).
 
-**Note:**  Nous ne fournirons pas une analyse complète des techniques de conception réactive ici, car elles sont couvertes ailleurs au sein de MDN (voir les liens ci-dessus).
+**Note:**  Nous ne fournirons pas une analyse complète des techniques de conception réactive ici, car elles sont couvertes ailleurs au sein de MDN (voir les liens ci-dessus).
 
 ### Considérations mobiles spécifiques
 
@@ -239,7 +239,7 @@ Il existe d'autres problèmes importants à prendre en compte lors de la créati
 
 #### Ne pas désactiver le zoom
 
-En utilisant  [viewport](/fr/docs/Mozilla/Mobile/Viewport_meta_tag), il est possible de désactiver le zoom, en utilisant un code comme celui-ci dans votre {{htmlelement("head")}}:
+En utilisant  [viewport](/fr/docs/Mozilla/Mobile/Viewport_meta_tag), il est possible de désactiver le zoom, en utilisant un code comme celui-ci dans votre {{htmlelement("head")}}:
 
 ```html
 <meta name="viewport" content="user-scalable=no">
@@ -253,20 +253,20 @@ Vous ne devriez jamais faire cela autant que possible - beaucoup de gens compten
 
 Lorsque vous implémentez un tel menu, vous devez vous assurer que le contrôle qui le révèle est accessible par les mécanismes de contrôle appropriés (normalement tactile pour mobile), comme indiqué dans {{anch("Control mechanisms")}} ci-dessus, et que le reste de la page est déplacé ou caché d'une manière ou d'une autre pendant l'accès au menu, afin d'éviter toute confusion lors de la navigation. .
 
-Cliquez ici pour un  [good hamburger menu example](http://fritz-weisshart.de/meg_men/).
+Cliquez ici pour un  [good hamburger menu example](http://fritz-weisshart.de/meg_men/).
 
 ## Entrée utilisateur
 
 Sur les appareils mobiles, la saisie de données a tendance à être plus agaçante pour les utilisateurs que l'expérience équivalente sur les ordinateurs de bureau. Il est plus pratique de taper du texte dans les entrées de formulaire à l'aide d'un clavier d'ordinateur de bureau ou d'ordinateur portable que d'un clavier virtuel à écran tactile ou d'un petit clavier physique mobile.
 
-Pour cette raison, il vaut la peine d'essayer de minimiser la quantité de frappe nécessaire. Par exemple, au lieu de forcer les utilisateurs à saisir chaque fois le titre de leur travail en utilisant une entrée de texte standard, vous pouvez proposer un menu  {{htmlelement("select")}}  contenant les options les plus courantes (ce qui aide également à cohérence dans la saisie des données), et offrent une option "Autre" qui affiche un champ de texte dans lequel taper les valeurs aberrantes. Vous pouvez voir un exemple simple de cette idée en action dans [common-job-types.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html) ( voir le [common jobs example live](http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html)).
+Pour cette raison, il vaut la peine d'essayer de minimiser la quantité de frappe nécessaire. Par exemple, au lieu de forcer les utilisateurs à saisir chaque fois le titre de leur travail en utilisant une entrée de texte standard, vous pouvez proposer un menu  {{htmlelement("select")}}  contenant les options les plus courantes (ce qui aide également à cohérence dans la saisie des données), et offrent une option "Autre" qui affiche un champ de texte dans lequel taper les valeurs aberrantes. Vous pouvez voir un exemple simple de cette idée en action dans [common-job-types.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html) ( voir le [common jobs example live](http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html)).
 
-Il est également utile d’envisager l’utilisation de types de saisie de formulaire au format HTML5, tels que la date sur les plates-formes mobiles car ils les gèrent bien (Android et iOS, par exemple, affichent des widgets utilisables qui correspondent bien à l’expérience de l’appareil. Voir  [html5-form-examples.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html)  pour quelques exemples (voir [HTML5 form examples live](http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html)) — essayez de les charger et de les manipuler sur des appareils mobiles. Par exemple:
+Il est également utile d’envisager l’utilisation de types de saisie de formulaire au format HTML5, tels que la date sur les plates-formes mobiles car ils les gèrent bien (Android et iOS, par exemple, affichent des widgets utilisables qui correspondent bien à l’expérience de l’appareil. Voir  [html5-form-examples.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html)  pour quelques exemples (voir [HTML5 form examples live](http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html)) — essayez de les charger et de les manipuler sur des appareils mobiles. Par exemple:
 
-- Les types  `number`, `tel`, et `email` affichent des claviers virtuels appropriés pour la saisie de numéros / numéros de téléphone.
+- Les types  `number`, `tel`, et `email` affichent des claviers virtuels appropriés pour la saisie de numéros / numéros de téléphone.
 - Les types `time` et `date` affichent des sélecteurs appropriés pour la sélection des heures et des dates. .
 
-Si vous souhaitez fournir une solution différente pour les ordinateurs de bureau, vous pouvez toujours proposer un balisage différent à vos périphériques mobiles à l'aide de la détection de fonctionnalités. Reportez-vous à  [input types](http://diveinto.html5doctor.com/detect.html#input-types)  pour obtenir des informations brutes sur la détection de différents types d'entrée et consultez notre article [feature detection article](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) pour en savoir plus. .
+Si vous souhaitez fournir une solution différente pour les ordinateurs de bureau, vous pouvez toujours proposer un balisage différent à vos périphériques mobiles à l'aide de la détection de fonctionnalités. Reportez-vous à  [input types](http://diveinto.html5doctor.com/detect.html#input-types)  pour obtenir des informations brutes sur la détection de différents types d'entrée et consultez notre article [feature detection article](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) pour en savoir plus. .
 
 ## Résumé
 
@@ -274,8 +274,8 @@ Dans cet article, nous vous avons fourni des détails sur les problèmes courant
 
 ### Voir également
 
-- [Guidelines For Mobile Web Development](https://www.smashingmagazine.com/guidelines-for-mobile-web-development/) — Une liste d'articles dans Smashing Magazine couvrant différentes techniques de conception de sites Web mobiles.
-- [Make your site work on touch devices](http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644) — Article utile sur l'utilisation d'événements tactiles pour que les interactions fonctionnent sur les appareils mobiles.
+- [Guidelines For Mobile Web Development](https://www.smashingmagazine.com/guidelines-for-mobile-web-development/) — Une liste d'articles dans Smashing Magazine couvrant différentes techniques de conception de sites Web mobiles.
+- [Make your site work on touch devices](http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644) — Article utile sur l'utilisation d'événements tactiles pour que les interactions fonctionnent sur les appareils mobiles.
 
 {{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
 
diff --git a/files/fr/learn/accessibility/multimedia/index.md b/files/fr/learn/accessibility/multimedia/index.md
index 3586388ef4..50866561e5 100644
--- a/files/fr/learn/accessibility/multimedia/index.md
+++ b/files/fr/learn/accessibility/multimedia/index.md
@@ -42,7 +42,7 @@ Le multimédia est une autre catégorie de contenu susceptible de créer des pro
 
 ## Multimédia et accessibilité
 
-Jusqu'ici, dans ce module, nous avons examiné une variété de contenus et ce qui doit être fait pour en assurer l'accessibilité, du simple contenu textuel aux tableaux de données, en passant par les images, les contrôles natifs tels que les éléments de formulaire et les boutons, et des structures de balisage encore plus complexes. (avec  [WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) l'attribut).
+Jusqu'ici, dans ce module, nous avons examiné une variété de contenus et ce qui doit être fait pour en assurer l'accessibilité, du simple contenu textuel aux tableaux de données, en passant par les images, les contrôles natifs tels que les éléments de formulaire et les boutons, et des structures de balisage encore plus complexes. (avec  [WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) l'attribut).
 
 Cet article, par contre, examine une autre catégorie générale de contenu pour laquelle il est difficile d’assurer l’accessibilité au multimédia. Les images, les vidéos, les éléments {{htmlelement ("canvas")}} les animations Flash, etc. ne sont pas aussi faciles à comprendre par les lecteurs d'écran ou à naviguer au clavier, et nous devons leur donner un coup de main.
 
@@ -50,7 +50,7 @@ Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniqu
 
 ## Simple images
 
-Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article [HTML&nbsp;: une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML)  —  vous pouvez vous y référer pour plus de détails. En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs.
+Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article [HTML&nbsp;: une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML), vous pouvez vous y référer pour plus de détails. En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs.
 
 Par exemple:
 
@@ -65,7 +65,7 @@ La mise en œuvre de contrôles audio / vidéo sur le Web ne devrait pas poser d
 
 ### Le problème avec les contrôles HTML5 natifs
 
-Les instances audio et vidéo HTML5 sont même fournies avec un ensemble de commandes intégrées vous permettant de contrôler le contenu multimédia directement. Par exemple (voir  `native-controls.html` [code source](https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html) et [en direct](https://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html)):
+Les instances audio et vidéo HTML5 sont même fournies avec un ensemble de commandes intégrées vous permettant de contrôler le contenu multimédia directement. Par exemple (voir  `native-controls.html` [code source](https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html) et [en direct](https://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html)):
 
 ```html
 <audio controls>
@@ -104,7 +104,7 @@ Prenons l'exemple vidéo ci-dessus et ajoutons-leur des contrôles personnalisé
 
 #### Basic setup
 
-Tout d'abord, prenez une copie de notre  [custom-controls-start.html](https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html), [custom-controls.css](https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css), [rabbit320.mp4](https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4), et [rabbit320.webm](https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm) fichiers et enregistrez-les dans un nouveau répertoire sur votre disque dur .
+Tout d'abord, prenez une copie de notre  [custom-controls-start.html](https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html), [custom-controls.css](https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css), [rabbit320.mp4](https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4), et [rabbit320.webm](https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm) fichiers et enregistrez-les dans un nouveau répertoire sur votre disque dur .
 
 Créez un nouveau fichier appelé main.js et enregistrez-le dans le même répertoire .
 
@@ -184,9 +184,9 @@ stopBtn.onclick = function() {
 };
 ```
 
-Il n'y a pas de fonction  `stop()`  disponible sur {{domxref("HTMLMediaElement")}}s,  nous le mettons donc en `pause()`  et, dans le même temps, définissons la valeur `currentTime` sur 0.
+Il n'y a pas de fonction  `stop()`  disponible sur {{domxref("HTMLMediaElement")}}s,  nous le mettons donc en `pause()`  et, dans le même temps, définissons la valeur `currentTime` sur 0.
 
-Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre  code:
+Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre code:
 
 ```js
 rwdBtn.onclick = function() {
@@ -203,9 +203,9 @@ fwdBtn.onclick = function() {
 };
 ```
 
-Celles-ci sont très simples, il suffit d’ajouter ou de soustraire 3 secondes à  `currentTime` chaque fois qu’on clique dessus. Dans un vrai lecteur vidéo, vous voudrez probablement une barre de recherche plus élaborée, ou similaire.
+Celles-ci sont très simples, il suffit d’ajouter ou de soustraire 3 secondes à  `currentTime` chaque fois qu’on clique dessus. Dans un vrai lecteur vidéo, vous voudrez probablement une barre de recherche plus élaborée, ou similaire.
 
-Notez que nous vérifions également si la durée  `currentTime` est supérieure à la durée totale du support ou si le support n'est pas en cours de lecture lorsque le bouton Fwd est enfoncé. Si l'une ou l'autre de ces conditions est vraie, nous arrêtons simplement la vidéo pour éviter que l'interface utilisateur ne se détériore si elle tente d'effectuer une avance rapide lorsque la vidéo n'est pas en cours de lecture ou si la fin de la vidéo est terminée. .
+Notez que nous vérifions également si la durée  `currentTime` est supérieure à la durée totale du support ou si le support n'est pas en cours de lecture lorsque le bouton Fwd est enfoncé. Si l'une ou l'autre de ces conditions est vraie, nous arrêtons simplement la vidéo pour éviter que l'interface utilisateur ne se détériore si elle tente d'effectuer une avance rapide lorsque la vidéo n'est pas en cours de lecture ou si la fin de la vidéo est terminée. .
 
 Enfin, ajoutez ce qui suit à la fin du code pour contrôler l’affichage du temps écoulé:
 
@@ -243,7 +243,7 @@ Cela vous donne une idée de base sur la manière d’ajouter des fonctionnalit�
 - [Video player styling basics](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics)
 - [Creating a cross-browser video player](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player)
 
-Nous avons également créé un exemple avancé pour montrer comment créer un système orienté objet permettant de rechercher tous les lecteurs vidéo et audio de la page (quel que soit leur nombre) et d'y ajouter nos contrôles personnalisés. Voir  [custom-controls-oojs](http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/) ( également [voir le code source](https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS)).
+Nous avons également créé un exemple avancé pour montrer comment créer un système orienté objet permettant de rechercher tous les lecteurs vidéo et audio de la page (quel que soit leur nombre) et d'y ajouter nos contrôles personnalisés. Voir  [custom-controls-oojs](http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/) ( également [voir le code source](https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS)).
 
 ## Transcriptions audio
 
@@ -251,9 +251,9 @@ Pour permettre aux sourds d'accéder au contenu audio, vous devez créer des tra
 
 En termes de création de la transcription, vos options sont les suivantes:
 
-- Services commerciaux - Vous pouvez payer un professionnel pour effectuer la transcription, voir par exemple des entreprises telles que  [Scribie](https://scribie.com/), [Casting Words](https://castingwords.com/), ou [Rev](https://www.rev.com/). Regardez autour de vous et demandez conseil pour vous assurer de trouver une entreprise fiable avec laquelle vous pourrez travailler efficacement.
+- Services commerciaux - Vous pouvez payer un professionnel pour effectuer la transcription, voir par exemple des entreprises telles que  [Scribie](https://scribie.com/), [Casting Words](https://castingwords.com/), ou [Rev](https://www.rev.com/). Regardez autour de vous et demandez conseil pour vous assurer de trouver une entreprise fiable avec laquelle vous pourrez travailler efficacement.
 - Communauté / base / auto-transcription - Si vous faites partie d'une communauté ou d'une équipe active sur votre lieu de travail, vous pouvez leur demander de l'aide pour faire les traductions. Vous pouvez même essayer de les faire vous-même.
-- Services automatisés - Des services d'intelligence artificielle sont disponibles, tels que  [Trint](https://trint.com). Téléchargez un fichier vidéo / audio sur le site, qui le transcrivera automatiquement pour vous. Sur YouTube, vous pouvez choisir de générer des sous-titres / transcriptions automatisés. Selon la clarté de l'audio parlé, la qualité de la transcription résultante variera considérablement. .
+- Services automatisés - Des services d'intelligence artificielle sont disponibles, tels que  [Trint](https://trint.com). Téléchargez un fichier vidéo / audio sur le site, qui le transcrivera automatiquement pour vous. Sur YouTube, vous pouvez choisir de générer des sous-titres / transcriptions automatisés. Selon la clarté de l'audio parlé, la qualité de la transcription résultante variera considérablement. .
 
 Comme dans la plupart des choses de la vie, vous avez tendance à avoir ce que vous payez. la précision et le temps requis pour produire la transcription varient selon les services. Si vous payez une transcription pour une entreprise digne de confiance ou un service d’AI, vous le ferez probablement rapidement et avec une qualité élevée. Si vous ne voulez pas payer pour cela, vous le ferez probablement avec une qualité inférieure et / ou lentement.
 
@@ -261,9 +261,9 @@ Il n’est pas acceptable de publier une ressource audio mais de promettre de pu
 
 ### Exemples de transcription
 
-Si vous utilisez un service automatisé, vous devrez probablement utiliser l'interface utilisateur fournie par l'outil. Par exemple, jetez un coup d’œil à  [Audio Transcription Sample 1](https://www.youtube.com/watch?v=zFFBsj97Od8) _et choisissez plus > Transcript_.
+Si vous utilisez un service automatisé, vous devrez probablement utiliser l'interface utilisateur fournie par l'outil. Par exemple, jetez un coup d’œil à  [Audio Transcription Sample 1](https://www.youtube.com/watch?v=zFFBsj97Od8) _et choisissez plus > Transcript_.
 
-Si vous créez votre propre interface utilisateur pour présenter votre audio et la transcription associée, vous pouvez le faire comme bon vous semble, mais il serait peut-être judicieux de l'inclure dans un panneau pouvant être affiché / masqué; voir notre exemple  [transcription audio-ui](https://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/) exemple (voir aussi le [code source](https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui)).
+Si vous créez votre propre interface utilisateur pour présenter votre audio et la transcription associée, vous pouvez le faire comme bon vous semble, mais il serait peut-être judicieux de l'inclure dans un panneau pouvant être affiché / masqué; voir notre exemple  [transcription audio-ui](https://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/) exemple (voir aussi le [code source](https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui)).
 
 ### Descriptions audio
 
@@ -317,7 +317,7 @@ Un fichier WebVTT typique ressemblera à ceci:
 Pour que ceci soit affiché avec la lecture du média HTML, vous devez:
 
 - Enregistrez-le en tant que fichier .vtt dans un endroit approprié.
-- Lien vers le fichier .vtt avec  l'élément {{htmlelement("track")}} . `<track>`  devrait être placé dans `<audio>` ou `<video>`,  mais après tout `<source>` éléments .  Utilisez l’attribut {{htmlattrxref ("kind", "track")}} pour indiquer si les signaux sont des sous-titres, des légendes ou des descriptions. De plus, utilisez {{htmlattrxref ("srclang", "track")}} pour indiquer au navigateur la langue dans laquelle vous avez écrit les sous-titres. .
+- Lien vers le fichier .vtt avec l'élément {{htmlelement("track")}} . `<track>`  devrait être placé dans `<audio>` ou `<video>`,  mais après tout `<source>` éléments .  Utilisez l’attribut {{htmlattrxref ("kind", "track")}} pour indiquer si les signaux sont des sous-titres, des légendes ou des descriptions. De plus, utilisez {{htmlattrxref ("srclang", "track")}} pour indiquer au navigateur la langue dans laquelle vous avez écrit les sous-titres. .
 
 Voici un exemple:
 
@@ -333,7 +333,7 @@ Cela donnera une vidéo avec des sous-titres affichés, un peu comme ceci:
 
 ![Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."](video-player-with-captions.png)
 
-Pour plus de détails, veuillez lire  [Ajouter des légendes et des sous titres à des vidéos HTML 5](/fr/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video).  Vous trouverez [un exemple](http://iandevlin.github.io/mdn/video-player-with-captions/)  qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi le [code source](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions).) Cet exemple utilise du JavaScript. pour permettre aux utilisateurs de choisir entre différents sous-titres. Notez que pour activer les sous-titres, vous devez appuyer sur le bouton "CC" et sélectionner une option - Anglais, Allemand ou Español.
+Pour plus de détails, veuillez lire  [Ajouter des légendes et des sous titres à des vidéos HTML 5](/fr/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video).  Vous trouverez [un exemple](http://iandevlin.github.io/mdn/video-player-with-captions/)  qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi le [code source](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions).) Cet exemple utilise du JavaScript. pour permettre aux utilisateurs de choisir entre différents sous-titres. Notez que pour activer les sous-titres, vous devez appuyer sur le bouton "CC" et sélectionner une option - Anglais, Allemand ou Español.
 
 > **Note :** Les pistes de texte et les transcriptions vous aident également avec {{glossary ("SEO")}}, car les moteurs de recherche se développent particulièrement bien avec le texte. Les pistes de texte permettent même aux moteurs de recherche de se lier directement à un endroit en cours de vidéo.
 
@@ -348,7 +348,7 @@ Les sections ci-dessus ne couvrent pas tous les types de contenu multimédia que
 Pour ce type de contenu, vous devez traiter les problèmes d’accessibilité au cas par cas. Dans certains cas, ce n'est pas si grave, par exemple:
 
 - Si vous intégrez du contenu audio à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez probablement simplement fournir une transcription audio de la même manière que celle décrite ci-dessus dans la section {{anch("Transcript examples")}} .
-- Si vous intégrez du contenu vidéo à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez tirer parti des techniques de sous-titrage / sous-titrage disponibles pour ces technologies. Par exemple, voir  [Flash captions](http://www.adobe.com/accessibility/products/flash/captions.html), [Using the Flash-Only Player API for Closed Captioning](https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning), ou [Playing Subtitles with Videos in Silverlight](https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/).
+- Si vous intégrez du contenu vidéo à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez tirer parti des techniques de sous-titrage / sous-titrage disponibles pour ces technologies. Par exemple, voir  [Flash captions](http://www.adobe.com/accessibility/products/flash/captions.html), [Using the Flash-Only Player API for Closed Captioning](https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning), ou [Playing Subtitles with Videos in Silverlight](https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/).
 
 Cependant, il est difficile de rendre les autres multimédias accessibles. Si, par exemple, vous avez affaire à un jeu immersif en 3D ou à une application de réalité virtuelle, il est vraiment difficile de fournir des alternatives textuelles pour une telle expérience, et vous pouvez soutenir que les utilisateurs non-voyants ne sont pas vraiment dans le groupe-cible de telles applications.
 
diff --git a/files/fr/learn/accessibility/wai-aria_basics/index.md b/files/fr/learn/accessibility/wai-aria_basics/index.md
index 1a9676c788..913298af07 100644
--- a/files/fr/learn/accessibility/wai-aria_basics/index.md
+++ b/files/fr/learn/accessibility/wai-aria_basics/index.md
@@ -22,7 +22,7 @@ Après l'article précédent, il peut être difficile de créer des contrôles U
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">  Prerequis:</th>
+      <th scope="row">  Prerequis:</th>
       <td>
         Connaissances informatiques de base, une compréhension de base de HTML,
         CSS et JavaScript, une compréhension des
@@ -48,7 +48,7 @@ Commençons par regarder ce que WAI-ARIA est , et ce qu’il peut faire pour nou
 
 Car les applications web ont commencé à devenir plus complexes et dynamiques, un nouvel ensemble de fonctionnalités d'accessibilité et de problèmes ont commencé à apparaître.
 
-Par exemple, HTML5 a introduit un certain nombre d’éléments sémantiques pour définir des fonctionnalités de page communes  ({{htmlelement("nav")}}, {{htmlelement("footer")}}, etc.)  Avant de les utiliser, les développeurs utilisaient simplement {{htmlelement("div")}} s avec des identifiants ou des classes, par exemple `<div class="nav">` , mais ils posaient problème, car il n’existait pas de moyen facile de trouver facilement une fonctionnalité de page spécifique telle que la navigation principale par programmation. .
+Par exemple, HTML5 a introduit un certain nombre d’éléments sémantiques pour définir des fonctionnalités de page communes  ({{htmlelement("nav")}}, {{htmlelement("footer")}}, etc.)  Avant de les utiliser, les développeurs utilisaient simplement {{htmlelement("div")}} s avec des identifiants ou des classes, par exemple `<div class="nav">` , mais ils posaient problème, car il n’existait pas de moyen facile de trouver facilement une fonctionnalité de page spécifique telle que la navigation principale par programmation. .
 
 La solution initiale consistait à ajouter un ou plusieurs liens cachés en haut de la page pour créer un lien vers la navigation (ou autre), par exemple:
 
@@ -58,7 +58,7 @@ La solution initiale consistait à ajouter un ou plusieurs liens cachés en haut
 
 Mais ceci n’est pas encore très précis et ne peut être utilisé que lorsque le lecteur d’écran lit en haut de la page.
 
-Autre exemple, les applications ont commencé à comporter des commandes complexes telles que des sélecteurs de date pour choisir les dates, des curseurs pour choisir des valeurs, etc. HTML5 fournit des types spéciaux  input pour rendre de tels contrôles:
+Autre exemple, les applications ont commencé à comporter des commandes complexes telles que des sélecteurs de date pour choisir les dates, des curseurs pour choisir des valeurs, etc. HTML5 fournit des types spéciaux input pour rendre de tels contrôles:
 
 ```html
 <input type="date">
@@ -74,14 +74,14 @@ Le problème ici est que, visuellement, ils fonctionnent, mais que les lecteurs
 [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) est une spécification écrite par le W3C et définissant un ensemble d'attributs HTML supplémentaires pouvant être appliqués aux éléments pour fournir une sémantique supplémentaire et améliorer l'accessibilité en cas de manque. Trois caractéristiques principales sont définies dans la spécification:
 
 - **Rôles** - Ceux-ci définissent ce qu'un élément est ou fait. Bon nombre de ces rôles sont des rôles de référence, qui dupliquent en grande partie la valeur sémantique des éléments structurels HTML5, par exemple role = "navigation" ({{htmlelement("nav")}}) ou `role="complementary"` ({{htmlelement("aside")}}) , mais il en existe d'autres qui décrivent différentes structures de pages, telles que `role="banner"`, `role="search"`, `role="tabgroup"`, `role="tab"`, etc., que l'on trouve couramment dans les UIs.
-- **Propriétés**  — Ceux-ci définissent les propriétés des éléments, qui peuvent être utilisés pour leur donner une signification supplémentaire ou une sémantique. Par exemple, `aria-required="true"` spécifie qu'une entrée de formulaire doit être renseignée pour être valide, alors que `aria-labelledby="label"` vous permet de mettre un ID sur un élément, puis de le référencer en tant qu'étiquette pour tout autre élément de la page, y compris plusieurs éléments, ce qui n'est pas possible avec `<label for="input">`. À titre d'exemple, vous pouvez utiliser `aria-labelledby`  pour spécifier qu'une description de clé contenue dans un {{htmlelement("div")}}  est le label  de plusieurs cellules de tableau, ou vous pouvez l’utiliser comme alternative au texte alternatif d’image —  spécifiez les informations existantes sur la page en tant que texte alternatif d’image,  plutôt que de devoir les répéter à l'intérieur de l'attribut `alt`.  Vous pouvez voir un exemple de celà à [Alternatives textuelles](/fr/docs/Apprendre/a11y/HTML?document_saved=true#Alternatives_textuelles).
-- **États**  —  Propriétés spéciales qui définissent les conditions actuelles des éléments, telles que `aria-disabled="true"`, qui spécifient à un lecteur d'écran que l'entrée de formulaire est actuellement désactivée. Les états diffèrent des propriétés en ce que les propriétés ne changent pas tout au long du cycle de vie d'une application, alors que les états peuvent changer, généralement par programmation via JavaScript.
+- **Propriétés**  — Ceux-ci définissent les propriétés des éléments, qui peuvent être utilisés pour leur donner une signification supplémentaire ou une sémantique. Par exemple, `aria-required="true"` spécifie qu'une entrée de formulaire doit être renseignée pour être valide, alors que `aria-labelledby="label"` vous permet de mettre un ID sur un élément, puis de le référencer en tant qu'étiquette pour tout autre élément de la page, y compris plusieurs éléments, ce qui n'est pas possible avec `<label for="input">`. À titre d'exemple, vous pouvez utiliser `aria-labelledby`  pour spécifier qu'une description de clé contenue dans un {{htmlelement("div")}}  est le label de plusieurs cellules de tableau, ou vous pouvez l’utiliser comme alternative au texte alternatif d’image —  spécifiez les informations existantes sur la page en tant que texte alternatif d’image,  plutôt que de devoir les répéter à l'intérieur de l'attribut `alt`.  Vous pouvez voir un exemple de celà à [Alternatives textuelles](/fr/docs/Apprendre/a11y/HTML?document_saved=true#Alternatives_textuelles).
+- **États**  —  Propriétés spéciales qui définissent les conditions actuelles des éléments, telles que `aria-disabled="true"`, qui spécifient à un lecteur d'écran que l'entrée de formulaire est actuellement désactivée. Les états diffèrent des propriétés en ce que les propriétés ne changent pas tout au long du cycle de vie d'une application, alors que les états peuvent changer, généralement par programmation via JavaScript.
 
 Un point important sur les attributs WAI-ARIA est qu'ils n'affectent en rien la page Web, à l'exception des informations exposées par les API d'accessibilité du navigateur (où les lecteurs d'écran obtiennent leurs informations). WAI-ARIA n'affecte pas la structure de la page Web, le DOM, etc., bien que les attributs puissent être utiles pour sélectionner des éléments par CSS.
 
 > **Note :** Vous pouvez trouver une liste utile de tous les rôles ARIA et de leurs utilisations, avec des liens vers des informations supplémentaires, dans les spécifications WAI-ARIA — voir la [définition des rôles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions).
 >
-> La spécification contient également une liste de toutes les propriétés et de tous les états, avec des liens vers des informations complémentaires - voir  [Définitions des états et des propriétés (tous les attributs aria-*)](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def).
+> La spécification contient également une liste de toutes les propriétés et de tous les états, avec des liens vers des informations complémentaires - voir  [Définitions des états et des propriétés (tous les attributs aria-*)](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def).
 
 ### Où WAI-ARIA est supporté?
 
@@ -107,7 +107,7 @@ We talked about some of the problems that prompted WAI-ARIA to be created earlie
 
 1.  **Signposts/Landmarks**: ARIA's `role` attribute values can act as landmarks that either replicate the semantics of HTML5 elements (e.g. {{htmlelement("nav")}}), or go beyond HTML5 semantics to provide signposts to different functional areas, e.g `search`, `tabgroup`, `tab`, `listbox`, etc.
 2.  **Dynamic content updates**: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use `aria-live` to inform screenreader users when an area of content is updated, e.g. via [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest), or [DOM APIs](/fr/docs/Web/API/Document_Object_Model).
-3.  **Enhancing keyboard accessibility**: There are built-in HTML elements that have native keyboard accessibility; when other elements are used along with JavaScript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. Where this is unavoidable, WAI-ARIA provides a means to allow other elements to receive focus (using `tabindex`).
+3.  **Enhancing keyboard accessibility**: There are built-in HTML elements that have native keyboard accessibility; when other elements are used along with JavaScript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. Where this is unavoidable, WAI-ARIA provides a means to allow other elements to receive focus (using `tabindex`).
 4.  **Accessibility of non-semantic controls**: When a series of nested `<div>`s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In these situations, ARIA can help to provide what's missing with a combination of roles like `button`, `listbox`, or `tabgroup`, and properties like `aria-required` or `aria-posinset` to provide further clues as to functionality.
 
 One thing to remember though — **you should only use WAI-ARIA when you need to!** Ideally, you should _always_ use [native HTML features](/fr/docs/Learn/Accessibility/HTML) to provide the semantics required by screenreaders to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.
@@ -290,7 +290,7 @@ We could go further with our ARIA usage, and provide some more validation help.
     <p>Fields marked with an asterisk (*) are required.</p>
     ```
 
-4.  This makes visual sense, but it isn't as easy to understand for screenreader users. Fortunately, WAI-ARIA provides the [`aria-required`](https://www.w3.org/TR/wai-aria-1.1/#aria-required) attribute to give screenreaders hints that they should tell users that form inputs need to be filled in. Update the `<input>` elements like so:
+4.  This makes visual sense, but it isn't as easy to understand for screenreader users. Fortunately, WAI-ARIA provides the [`aria-required`](https://www.w3.org/TR/wai-aria-1.1/#aria-required) attribute to give screenreaders hints that they should tell users that form inputs need to be filled in. Update the `<input>` elements like so:
 
     ```html
     <input type="text" name="name" id="name" aria-required="true">
@@ -363,9 +363,9 @@ To improve things, we've created a new version of the example called [aria-tabbe
 
 ```html
 <ul role="tablist">
-  <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li>
-  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li>
-  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li>
+  <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li>
+  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li>
+  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li>
 </ul>
 <div class="panels">
   <article class="active-panel" role="tabpanel" aria-hidden="false">
@@ -393,7 +393,7 @@ The new features are as follows:
 
 In our tests, this new structure did serve to improve things overall. The tabs are now recognised as tabs (e.g. "tab" is spoken by the screenreader), the selected tab is indicated by "selected" being read out with the tab name, and the screenreader also tells you which tab number you are currently on. In addition, because of the `aria-hidden` settings (only the non-hidden tab ever has `aria-hidden="false"` set), the non-hidden content is the only one you can navigate down to, meaning the selected content is easier to find.
 
-> **Note :** If there is anything you explicitly don't want screen readers to read out, you can give them the `aria-hidden="true"`  attribute.
+> **Note :** If there is anything you explicitly don't want screen readers to read out, you can give them the `aria-hidden="true"`  attribute.
 
 ## Summary
 
diff --git a/files/fr/learn/accessibility/what_is_accessibility/index.md b/files/fr/learn/accessibility/what_is_accessibility/index.md
index 39f6cd5296..bdb7500858 100644
--- a/files/fr/learn/accessibility/what_is_accessibility/index.md
+++ b/files/fr/learn/accessibility/what_is_accessibility/index.md
@@ -95,26 +95,26 @@ De nombreuses personnes souffrent de troubles de la mobilité. Par exemple, en F
 
 ### Personnes ayant des déficiences cognitives
 
-La dernière catégorie d'incapacités est probablement la plus large. Les déficiences cognitives désignent généralement des incapacités allant des maladies mentales aux difficultés d'apprentissage, aux difficultés de compréhension et de concentration telles que  [TDAH-trouble d'hyperactivité avec déficit de l'attention](https://naitreetgrandir.com/fr/mauxenfants/indexmaladiesa_z/fiche.aspx?doc=naitre-grandir-sante-enfant-trouble-deficit-attention-hyperactivite-tdah), [TSA-trouble du spectre de l’autisme](https://cenop.ca/troubles-comportement/tsa-trouble-spectre-autisme.php),  aux personnes atteintes de [schizophrénie](http://www.psycom.org/Espace-Presse/Sante-mentale-de-A-a-Z/Schizophrenie-s), et à de nombreux autres types de désordres, qui peuvent affecter de nombreux aspects de la vie quotidienne en raison de problèmes de mémoire, de résolution de problèmes, de compréhension, d'attention, etc.
+La dernière catégorie d'incapacités est probablement la plus large. Les déficiences cognitives désignent généralement des incapacités allant des maladies mentales aux difficultés d'apprentissage, aux difficultés de compréhension et de concentration telles que  [TDAH-trouble d'hyperactivité avec déficit de l'attention](https://naitreetgrandir.com/fr/mauxenfants/indexmaladiesa_z/fiche.aspx?doc=naitre-grandir-sante-enfant-trouble-deficit-attention-hyperactivite-tdah), [TSA-trouble du spectre de l’autisme](https://cenop.ca/troubles-comportement/tsa-trouble-spectre-autisme.php),  aux personnes atteintes de [schizophrénie](http://www.psycom.org/Espace-Presse/Sante-mentale-de-A-a-Z/Schizophrenie-s), et à de nombreux autres types de désordres, qui peuvent affecter de nombreux aspects de la vie quotidienne en raison de problèmes de mémoire, de résolution de problèmes, de compréhension, d'attention, etc.
 
 Le plus souvent, ces incapacités peuvent affecter l'utilisation du site web : difficulté à comprendre comment effectuer une tâche, à se rappeler comment effectuer une tâche déjà accomplie ou à une frustration accrue en cas de confusion dans les flux de travail ou d'incohérences dans la présentation / navigation / autre page.
 
-Contrairement à d’autres problèmes d’accessibilité web, il est impossible de prescrire des solutions rapides à de nombreux problèmes d’accessibilité web résultant de déficiences cognitives ; la meilleure chance que vous ayez est de concevoir vos sites web de manière à être aussi logiques, cohérents et utilisables que possible. Par exemple, assurez-vous que :
+Contrairement à d’autres problèmes d’accessibilité web, il est impossible de prescrire des solutions rapides à de nombreux problèmes d’accessibilité web résultant de déficiences cognitives ; la meilleure chance que vous ayez est de concevoir vos sites web de manière à être aussi logiques, cohérents et utilisables que possible. Par exemple, assurez-vous que :
 
-- les pages sont cohérentes — la navigation, l'en-tête, le pied de page et le contenu principal se trouvent toujours aux mêmes endroits.
+- les pages sont cohérentes — la navigation, l'en-tête, le pied de page et le contenu principal se trouvent toujours aux mêmes endroits.
 - les outils sont bien conçus et faciles à utiliser.
 - Les processus en plusieurs étapes sont divisés en étapes logiques, avec des rappels réguliers de l'état d'avancement du processus et du temps qu'il vous reste pour terminer le processus, le cas échéant.
 - Les workflows sont logiques, simples et nécessitent le moins d’interactions possible. Par exemple, l'inscription et la connexion à un site web sont souvent complexes.
 - les pages ne sont ni trop longues ni trop denses en termes de quantité d'informations présentées à la fois.
 - le langage utilisé dans vos pages est aussi simple et clair que possible, et ne contient pas un jargon et un argot inutiles.
-- les points importants et le contenu sont mis en évidence.
+- les points importants et le contenu sont mis en évidence.
 - les erreurs des utilisateurs sont clairement mises en évidence, avec des messages d'aide suggérant des solutions.
 
-Ce ne sont pas des "techniques d'accessibilité" en tant que telles, ce sont de bonnes pratiques de conception. Elles profiteront à tous ceux qui utilisent vos sites et devraient faire partie intégrante de votre travail.
+Ce ne sont pas des "techniques d'accessibilité" en tant que telles, ce sont de bonnes pratiques de conception. Elles profiteront à tous ceux qui utilisent vos sites et devraient faire partie intégrante de votre travail.
 
 En termes de statistiques, encore une fois, les chiffres sont importants. Le [rapport 2014 sur le statut d'invalidité](http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf) (PDF, 511KB) de l'Université de Cornell indique qu'en 2014, 4,5% des Américains âgés de 21 à 64 ans présentaient une forme de déficience cognitive .
 
-> **Note :** La page [cognitives](https://apprendreaeduquer.fr/fonctions-cognitives/) de apprendreaeduquer fournit une extension utile de ces idées et mérite certainement d'être lue.
+> **Note :** La page [cognitives](https://apprendreaeduquer.fr/fonctions-cognitives/) de apprendreaeduquer fournit une extension utile de ces idées et mérite certainement d'être lue.
 
 ## Implémentation de l'accessibilité dans votre projet
 
@@ -125,7 +125,7 @@ Un mythe commun en matière d'accessibilité est que l'accessibilité est un "su
 
 Cependant, si vous envisagez l'accessibilité dès le début d'un projet, le coût de la plupart des contenus accessibles devrait être assez minime.
 
-Lors de la planification de votre projet, tenez compte des tests d'accessibilité dans votre programme de tests, comme pour tout autre segment d'audience cible important (par exemple, les navigateurs de bureau ou mobiles cibles). Testez tôt et souvent, en exécutant idéalement des tests automatisés pour détecter les fonctionnalités manquantes détectables par programme (telles que les images manquantes  [alternative text](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives)  ou le texte du lien incorrect — voir [Element relationships and context](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context)), et en effectuant des tests avec des groupes d'utilisateurs désactivés pour voir comment. des fonctionnalités de site plus complexes fonctionnent pour eux, par exemple:
+Lors de la planification de votre projet, tenez compte des tests d'accessibilité dans votre programme de tests, comme pour tout autre segment d'audience cible important (par exemple, les navigateurs de bureau ou mobiles cibles). Testez tôt et souvent, en exécutant idéalement des tests automatisés pour détecter les fonctionnalités manquantes détectables par programme (telles que les images manquantes  [alternative text](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives)  ou le texte du lien incorrect — voir [Element relationships and context](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context)), et en effectuant des tests avec des groupes d'utilisateurs désactivés pour voir comment. des fonctionnalités de site plus complexes fonctionnent pour eux, par exemple:
 
 - Mon widget de sélecteur de date est-il utilisable par les personnes utilisant des lecteurs d'écran ?
 - Si le contenu est mis à jour de manière dynamique, les personnes malvoyantes le savent-elles ?
@@ -133,13 +133,13 @@ Lors de la planification de votre projet, tenez compte des tests d'accessibilit�
 
 Vous pouvez et devez garder une note sur les problèmes potentiels de votre contenu qui devront être redessinés pour le rendre accessible, assurez-vous qu'il a été testé minutieusement et réfléchissez aux solutions / alternatives. Le contenu textuel (comme vous le verrez dans le prochain article) est simple, mais qu'en est-il de votre contenu multimédia et de vos graphismes 3D fantastiques ? Vous devriez examiner le budget de votre projet et réfléchir de manière réaliste aux solutions disponibles pour rendre ce contenu accessible ? Vous pourriez avoir à payer pour que tout votre contenu multimédia soit transcrit, ce qui peut être coûteux, mais réalisable.
 
-Aussi, soyez réaliste. "100% d'accessibilité" est un idéal impossible à obtenir — vous rencontrerez toujours un type de problème qui oblige un utilisateur à trouver certains contenus difficiles à utiliser — mais vous devez en faire autant que vous le pouvez. Si vous envisagez d'inclure un graphique à secteurs 3D ultra-graphique créé à l'aide de WebGL, vous pouvez inclure un tableau de données en tant que représentation alternative accessible des données. Vous pouvez également simplement inclure la table et supprimer le graphique à secteurs 3D : la table est accessible à tous, plus rapide à coder, moins gourmande en temps processeur et plus facile à gérer.
+Aussi, soyez réaliste. "100% d'accessibilité" est un idéal impossible à obtenir — vous rencontrerez toujours un type de problème qui oblige un utilisateur à trouver certains contenus difficiles à utiliser — mais vous devez en faire autant que vous le pouvez. Si vous envisagez d'inclure un graphique à secteurs 3D ultra-graphique créé à l'aide de WebGL, vous pouvez inclure un tableau de données en tant que représentation alternative accessible des données. Vous pouvez également simplement inclure la table et supprimer le graphique à secteurs 3D : la table est accessible à tous, plus rapide à coder, moins gourmande en temps processeur et plus facile à gérer.
 
 D'autre part, si vous travaillez sur un site web de galerie présentant des œuvres d'art 3D intéressantes, il serait déraisonnable de s'attendre à ce que chaque œuvre d'art soit parfaitement accessible aux personnes malvoyantes, étant donné qu'il s'agit d'un support entièrement visuel.
 
 Pour montrer que vous vous souciez de l'accessibilité et que vous en avez pensé, publiez sur votre site une déclaration d'accessibilité détaillant votre politique en matière d'accessibilité et les mesures que vous avez prises pour rendre le site accessible. Si quelqu'un se plaint de ce que votre site a un problème d'accessibilité, commencez un dialogue avec elle, faites preuve d'empathie et prenez les mesures qui s'imposent pour tenter de résoudre le problème.
 
-> **Note :** Notre article [Gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility) couvre les spécificités d'accessibilité qui doivent être testées plus en détail.
+> **Note :** Notre article [Gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility) couvre les spécificités d'accessibilité qui doivent être testées plus en détail.
 
 Résumer :
 
@@ -151,8 +151,8 @@ Résumer :
 
 Il existe de nombreuses listes de contrôle et ensembles de directives disponibles sur lesquels baser les tests d'accessibilité, ce qui peut sembler fastidieux à première vue. Notre conseil est de vous familiariser avec les domaines fondamentaux dans lesquels vous devez prendre soin, ainsi que de comprendre les structures de haut niveau des directives qui vous sont le plus utiles.
 
-- Pour commencer, le W3C a publié un document volumineux et très détaillé qui inclut des critères très précis, indépendants de la technologie, pour la conformité de l'accessibilité. Celles-ci s'appellent le [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag.php) (WCAG),  et ne constituent en aucun cas une lecture brève. Les critères sont divisés en quatre catégories principales, qui spécifient comment les implémentations peuvent être rendues perceptibles, exploitables, compréhensibles et robustes. Le meilleur endroit pour commencer à apprendre et  [WCAG at a Glance](https://www.w3.org/WAI/WCAG20/glance/Overview.html). Il n'est pas nécessaire d'apprendre le WCAG par cœur — soyez conscient des principaux problèmes et utilisez une variété de techniques et d'outils pour mettre en évidence les domaines qui ne sont pas conformes aux critères du WCAG (voir ci-dessous pour plus d'informations).
-- Votre pays peut également avoir une législation spécifique régissant la nécessité d’accéder aux sites web desservant leur population — par exemple  [Section 508 of the Rehabilitation Act](http://www.section508.gov/content/learn) en US, [Federal Ordinance on Barrier-Free Information Technology](https://www.einfach-fuer-alle.de/artikel/bitv_english/) en Germany, la lois sur [Equality Act](http://www.legislation.gov.uk/ukpga/2010/15/contents) Royaume-Uni, [Accessibilità](http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita) en Italy, le [Disability Discrimination Act](https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014) en Australia, etc.
+- Pour commencer, le W3C a publié un document volumineux et très détaillé qui inclut des critères très précis, indépendants de la technologie, pour la conformité de l'accessibilité. Celles-ci s'appellent le [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag.php) (WCAG),  et ne constituent en aucun cas une lecture brève. Les critères sont divisés en quatre catégories principales, qui spécifient comment les implémentations peuvent être rendues perceptibles, exploitables, compréhensibles et robustes. Le meilleur endroit pour commencer à apprendre et  [WCAG at a Glance](https://www.w3.org/WAI/WCAG20/glance/Overview.html). Il n'est pas nécessaire d'apprendre le WCAG par cœur — soyez conscient des principaux problèmes et utilisez une variété de techniques et d'outils pour mettre en évidence les domaines qui ne sont pas conformes aux critères du WCAG (voir ci-dessous pour plus d'informations).
+- Votre pays peut également avoir une législation spécifique régissant la nécessité d’accéder aux sites web desservant leur population — par exemple  [Section 508 of the Rehabilitation Act](http://www.section508.gov/content/learn) en US, [Federal Ordinance on Barrier-Free Information Technology](https://www.einfach-fuer-alle.de/artikel/bitv_english/) en Germany, la lois sur [Equality Act](http://www.legislation.gov.uk/ukpga/2010/15/contents) Royaume-Uni, [Accessibilità](http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita) en Italy, le [Disability Discrimination Act](https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014) en Australia, etc.
 
 Ainsi, alors que le WCAG est un ensemble de directives, votre pays aura probablement des lois régissant l’accessibilité du Web, ou du moins l’accessibilité des services accessibles au public (sites web, télévision, espaces physiques, etc.). C’est une bonne idée. pour savoir quelles sont vos lois. Si vous ne faites aucun effort pour vérifier que votre contenu est accessible, vous pourriez éventuellement avoir des ennuis avec la loi si les personnes handicapées s'en plaignent.
 
@@ -160,7 +160,7 @@ Cela semble sérieux, mais vous devez vraiment considérer l'accessibilité comm
 
 ## API d'accessibilité
 
-Les navigateurs web utilisent des **API d’accessibilité** spéciales (fournies par le système d’exploitation sous-jacent) qui présentent des informations utiles pour les technologies d’aide (TA) — les TA ont généralement tendance à utiliser des informations sémantiques. Ces informations ne comprennent donc pas les informations de style, ou JavaScript. Ces informations sont structurées dans une arborescence d'informations appelée **arborescence d'accessibilité**.
+Les navigateurs web utilisent des **API d’accessibilité** spéciales (fournies par le système d’exploitation sous-jacent) qui présentent des informations utiles pour les technologies d’aide (TA) — les TA ont généralement tendance à utiliser des informations sémantiques. Ces informations ne comprennent donc pas les informations de style, ou JavaScript. Ces informations sont structurées dans une arborescence d'informations appelée **arborescence d'accessibilité**.
 
 Différents systèmes d'exploitation ont différentes API d'accessibilité disponibles :
 
@@ -170,7 +170,7 @@ Différents systèmes d'exploitation ont différentes API d'accessibilité dispo
 - Android: Accessibility framework
 - iOS: UIAccessibility
 
-Lorsque les informations sémantiques natives fournies par les éléments HTML dans vos applications Web tombent, vous pouvez les compléter avec des fonctionnalités de la  [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/),  qui ajoutent des informations sémantiques à l’arbre d’accessibilité pour améliorer l’accessibilité. Vous pouvez en apprendre beaucoup plus sur WAI-ARIA dans notre article sur les bases de [WAI-ARIA basics](/fr/docs/Learn/Accessibility/WAI-ARIA_basics).
+Lorsque les informations sémantiques natives fournies par les éléments HTML dans vos applications Web tombent, vous pouvez les compléter avec des fonctionnalités de la  [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/),  qui ajoutent des informations sémantiques à l’arbre d’accessibilité pour améliorer l’accessibilité. Vous pouvez en apprendre beaucoup plus sur WAI-ARIA dans notre article sur les bases de [WAI-ARIA basics](/fr/docs/Learn/Accessibility/WAI-ARIA_basics).
 
 ## Résumé
 
diff --git a/files/fr/learn/common_questions/available_text_editors/index.md b/files/fr/learn/common_questions/available_text_editors/index.md
index 448c6245fe..9ae60bd348 100644
--- a/files/fr/learn/common_questions/available_text_editors/index.md
+++ b/files/fr/learn/common_questions/available_text_editors/index.md
@@ -17,7 +17,7 @@ Dans cet article, nous présentons les éléments principaux à connaître pour
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Vous devriez déjà connaître
         <a href="/fr/Learn/What_software_do_I_need"
@@ -360,7 +360,7 @@ Voici un tableau de quelques éditeurs de texte connus :
 
 ## Pédagogie active
 
-_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/Débuter_sur_MDN)._
+_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/Débuter_sur_MDN)._
 
 ## Aller plus loin
 
diff --git a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md
index fff9b1c778..d18c23e41c 100644
--- a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md
+++ b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md
@@ -17,7 +17,7 @@ Dans cet article, nous présenterons les différentes étapes permettant de diag
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Vous devez au préalable savoir
         <a href="/fr/Apprendre/Transférer_des_fichiers_vers_un_serveur_web"
@@ -26,7 +26,7 @@ Dans cet article, nous présenterons les différentes étapes permettant de diag
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectifs :</th>
+      <th scope="row">Objectifs&nbsp;:</th>
       <td>
         Apprendre à diagnostiquer et à résoudre certains problèmes simples qui
         peuvent se produire lors du développement ou de la maintenance d'un site
@@ -161,7 +161,7 @@ Les notes vont de A à F. La page actuelle est pluôt légère et respecte donc
     4 packets transmitted, 4 packets received, 0.0% packet loss
     round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms
 
-Si vous utilisez Windows, le ping s'arrêtera après quelques envois mais si vous utilisez Mac ou Linux, mémorisez le raccourci **Ctrl+C** pour arrêter l'envoi des pings.  Ctrl+C envoie un signal d'interruption qui arrêtera l'exécution du programme. Si vous n'utilisez pas Ctrl+C, le programme `ping` contactera le serveur indéfiniment.
+Si vous utilisez Windows, le ping s'arrêtera après quelques envois mais si vous utilisez Mac ou Linux, mémorisez le raccourci **Ctrl+C** pour arrêter l'envoi des pings.  Ctrl+C envoie un signal d'interruption qui arrêtera l'exécution du programme. Si vous n'utilisez pas Ctrl+C, le programme `ping` contactera le serveur indéfiniment.
 
 ### Une _checklist_ de base
 
diff --git a/files/fr/learn/common_questions/common_web_layouts/index.md b/files/fr/learn/common_questions/common_web_layouts/index.md
index cf813f14ef..3e919676f5 100644
--- a/files/fr/learn/common_questions/common_web_layouts/index.md
+++ b/files/fr/learn/common_questions/common_web_layouts/index.md
@@ -17,7 +17,7 @@ Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir e
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Assurez-vous d'avoir d'abord identifié
         <a href="/fr/Apprendre/Commencez_votre_projet_web"
@@ -27,9 +27,9 @@ Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir e
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
-        Apprendre où (et comment !) disposer des éléments dans vos pages web.
+        Apprendre où (et comment&nbsp;!) disposer des éléments dans vos pages web.
       </td>
     </tr>
   </tbody>
@@ -37,7 +37,7 @@ Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir e
 
 Nous avons une bonne raison de vous initier à la conception web. Vous commencez avec une page vierge, puis vous devez choisir entre tellement de possibilités… Si vous avez peu d'expérience, la page blanche initiale pourrait vous paraître intimidante. Comme nous avons plus de 25 ans d'expérience dans le domaine, nous allons vous présenter quelques règles générales qui pourront vous aider dans la conception de votre site web.
 
-Même aujourd'hui, malgré toute l'attention portée aux appareils mobiles, la majorité des pages web contient les sections suivantes :
+Même aujourd'hui, malgré toute l'attention portée aux appareils mobiles, la majorité des pages web contient les sections suivantes&nbsp;:
 
 - En-tête
   - : Visible au haut de chaque page du site, cette section comprend des informations pertinentes pour l'ensemble des pages (par exemple, le nom du site ou un logo) et un menu de navigation convivial.
@@ -45,26 +45,26 @@ Même aujourd'hui, malgré toute l'attention portée aux appareils mobiles, la m
   - : Cette section occupe la plus grande partie de l'espace et contient du contenu unique, relatif à la page consultée.
 - Contenu secondaire
 
-  - : Il peut s'agir :
+  - : Il peut s'agir&nbsp;:
 
-    1.  d'informations complémentaires au contenu principal ;
-    2.  d'informations partagées entre un sous-ensemble de pages ;
+    1.  d'informations complémentaires au contenu principal&nbsp;;
+    2.  d'informations partagées entre un sous-ensemble de pages&nbsp;;
     3.  d'un moyen alternatif de navigation. En fait, ce peut être un peu tout ce qui est superflu par rapport au contenu principal.
 
 - Bas de page
   - : Visible au bas de chaque page du site, cette section contient, tout comme l'en-tête, des informations pertinentes pour l'ensemble des pages. On peut, entre autres, y trouver les mentions légales et les informations nécessaires pour contacter les responsables du site.
 
-Ces quatre sections sont généralement présentes, mais elles peuvent être disposées de plusieurs façons distinctes. Voici quelques exemples de dispositions possibles (où **1** représente l'entête ; **2,**  le bas de page ; **A**, le contenu principal ; et **B1, B2**, le contenu secondaire) :
+Ces quatre sections sont généralement présentes, mais elles peuvent être disposées de plusieurs façons distinctes. Voici quelques exemples de dispositions possibles (où **1** représente l'entête&nbsp;; **2,**  le bas de page&nbsp;; **A**, le contenu principal&nbsp;; et **B1, B2**, le contenu secondaire)&nbsp;:
 
-**Dispostion à une colonne :** particulièrement utile pour l'affichage sur téléphone mobile, car cette disposition évite d'encombrer les petits écrans.
+**Dispostion à une colonne&nbsp;:** particulièrement utile pour l'affichage sur téléphone mobile, car cette disposition évite d'encombrer les petits écrans.
 
 ![Example of a 1 column layout: Main on top and asides stacked beneath it.](1-col-layout.png)
 
-**Disposition à deux colonnes :** souvent utilisée pour l'affichage sur tablettes, car elles disposent d'un écran de taille moyenne.
+**Disposition à deux colonnes&nbsp;:** souvent utilisée pour l'affichage sur tablettes, car elles disposent d'un écran de taille moyenne.
 
 ![Example of a basic 2 column layout: One aside on the left column, and main on the right column.](2-col-layout-right.png) ![Example of a basic 2 column layout: One aside on the right column, and main on the left column.](2-col-layout-left.png)
 
-**Disposition à trois colonnes :** adaptée uniquement pour les ordinateurs de bureau ayant un grand écran (et encore, cela est relatif, car plusieurs utilisateurs d'ordinateurs de bureau préférent visionner les sites dans des fenêtres de taille réduite plutôt qu'en mode plein écran).
+**Disposition à trois colonnes&nbsp;:** adaptée uniquement pour les ordinateurs de bureau ayant un grand écran (et encore, cela est relatif, car plusieurs utilisateurs d'ordinateurs de bureau préférent visionner les sites dans des fenêtres de taille réduite plutôt qu'en mode plein écran).
 
 ![Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column.](3-col-layout.png) ![Another example of a 3 column layout: Aside side by side on the left, Main on the right column.](3-col-layout-alt.png) ![Another example of a 3 column layout: Aside side by side on the right, Main on the left column.](3-col-layout-alt2.png)
 
@@ -78,7 +78,7 @@ Ce sont là des règles générales dont vous pouvez vous inspirer. Bien entendu
 
 ## Pédagogie active
 
-_Aucun exercice pratique n'est disponible actuellement. [S.V.P., pensez à contribuer !](/fr/docs/MDN/Débuter_sur_MDN)_
+_Aucun exercice pratique n'est disponible actuellement. [S.V.P., pensez à contribuer&nbsp;!](/fr/docs/MDN/Débuter_sur_MDN)_
 
 ## Aller plus loin
 
@@ -88,27 +88,30 @@ Regardons maintenant quelques exemples concrets tirés de sites connus.
 
 **[Invision](http://www.invisionapp.com/)&nbsp;:** un exemple de disposition classique à une colonne où toute l'information est présentée de façon linéaire sur une page.
 
-![Example of a 1 column layout in the wild](screenshot-product.jpg)        ![1 column layout with header, main content, a stack of aside contents and a footer](screenshot-product-overlay.jpg)
+![Example of a 1 column layout in the wild](screenshot-product.jpg)
+![1 column layout with header, main content, a stack of aside contents and a footer](screenshot-product-overlay.jpg)
 
-Un style simple et direct.  N'oubliez pas, toutefois, que certains utilisateurs navigeront à partir d'un ordinateur de bureau et qu'il faut donc s'assurer que le contenu soit accessible sur cette plateforme également.
+Un style simple et direct.  N'oubliez pas, toutefois, que certains utilisateurs navigeront à partir d'un ordinateur de bureau et qu'il faut donc s'assurer que le contenu soit accessible sur cette plateforme également.
 
 ### Disposition à deux colonnes
 
-**[Abduzeedo](http://abduzeedo.com/typography-mania-261)**, un blog à disposition simple. En règle générale, les blogs comprennent deux colonnes : une large pour le contenu principal et une plus étroite pour les à-côtés (comme des widgets, les menus de navigation et les publicités).
+**[Abduzeedo](http://abduzeedo.com/typography-mania-261)**, un blog à disposition simple. En règle générale, les blogs comprennent deux colonnes&nbsp;: une large pour le contenu principal et une plus étroite pour les à-côtés (comme des widgets, les menus de navigation et les publicités).
 
-![Example of a 2 column layout for a blog](screenshot-blog.jpg)        ![A 2 column layout with the main content on the left column](screenshot-blog-overlay.jpg)
+![Example of a 2 column layout for a blog](screenshot-blog.jpg)
+![A 2 column layout with the main content on the left column](screenshot-blog-overlay.jpg)
 
-Dans cet exemple, regardez bien l'image (B1) située directement sous l'en-tête. L'image est en rapport avec le contenu principal, mais n'est pas essentielle à sa compréhension. Nous pourrions donc considérer que l'image fait partie du contenu principal ou bien qu'il s'agit d'un à-côté (contenu secondaire).  La distinction importe peu. Ce qui est vraiment important, c'est qu'un élément placé directement sous l'en-tête devrait soit faire partie du contenu principal, soit y être _directement relié_.
+Dans cet exemple, regardez bien l'image (B1) située directement sous l'en-tête. L'image est en rapport avec le contenu principal, mais n'est pas essentielle à sa compréhension. Nous pourrions donc considérer que l'image fait partie du contenu principal ou bien qu'il s'agit d'un à-côté (contenu secondaire).  La distinction importe peu. Ce qui est vraiment important, c'est qu'un élément placé directement sous l'en-tête devrait soit faire partie du contenu principal, soit y être _directement relié_.
 
-### Attention, c'est un piège !
+### Attention, c'est un piège&nbsp;!
 
 **[MICA](http://www.mica.edu/About_MICA.html)**. Cet exemple est un peu plus embêtant. On dirait une disposition à trois colonnes…
 
-![Example of a false 3 columns layout](screenshot-education.jpg)        ![It looks like a 3 columns layout but actually, the aside content is floating around.](screenshot-education-overlay.jpg)
+![Example of a false 3 columns layout](screenshot-education.jpg)
+![It looks like a 3 columns layout but actually, the aside content is floating around.](screenshot-education-overlay.jpg)
 
-…mais non ! B1 et B2 flottent autour du contenu principal. Rappelez-vousce mot-clé : "flotte" (_float_ en anglais) - nous y reviendrons lorsque vous commencerez à apprendre le {{Glossary("CSS")}}.
+…mais non&nbsp;! B1 et B2 flottent autour du contenu principal. Rappelez-vousce mot-clé&nbsp;: "flotte" (_float_ en anglais) - nous y reviendrons lorsque vous commencerez à apprendre le {{Glossary("CSS")}}.
 
-Pourquoi êtes-vous porté à penser qu'il s'agit d'une disposition à trois colonnes ? Eh bien, pour trois raisons : parce que l'image en haut à droite est en forme de L, parce que B1 semble être une colonne soutenant un contenu principal décalé vers la gauche et parce le "M" et le "I" du logo de  MICA forment une ligne de force verticale.
+Pourquoi êtes-vous porté à penser qu'il s'agit d'une disposition à trois colonnes&nbsp;? Eh bien, pour trois raisons&nbsp;: parce que l'image en haut à droite est en forme de L, parce que B1 semble être une colonne soutenant un contenu principal décalé vers la gauche et parce le "M" et le "I" du logo de MICA forment une ligne de force verticale.
 
 Il s'agit ici d'un bon exemple d'une mise en page classique qui a été rehaussée avec un peu de créativité. Les dispositions simples sont plus faciles à mettre en place, mais ne devraient pas restreindre votre créativité.
 
@@ -116,15 +119,16 @@ Il s'agit ici d'un bon exemple d'une mise en page classique qui a été rehauss�
 
 **L'[Opéra de Paris](https://www.operadeparis.fr/en/saison-2014-2015/opera/la-boheme-puccini).**
 
-![An example of a tricky layout.](screenshot-opera.jpg)        ![This is a 2 column layout but the header is overlaping the main content.](screenshot-opera-overlay.jpg)
+![An example of a tricky layout.](screenshot-opera.jpg)
+![This is a 2 column layout but the header is overlaping the main content.](screenshot-opera-overlay.jpg)
 
-Il s'agit à la base d'une disposition à deux colonnes, mais vous noterez quelques ajustements ici et là qui viennent rompre la linéarité de la disposition. On remarque surtout que l'en-tête est superposée à l'image du contenu principal. En raison de la courbe du menu de navigation qui rappelle celle au bas de l'image principale, l'en-tête et l'image semblent former un seul élément uni alors qu'il s'agit en fait d'éléments techniquement distincts.  L'exemple de l'Opéra de Paris semble plus complexe à réaliser que celui de MICA, mais est en réalité plus facile à mettre en place (la facilité étant bien entendu, un concept plutôt relatif).
+Il s'agit à la base d'une disposition à deux colonnes, mais vous noterez quelques ajustements ici et là qui viennent rompre la linéarité de la disposition. On remarque surtout que l'en-tête est superposée à l'image du contenu principal. En raison de la courbe du menu de navigation qui rappelle celle au bas de l'image principale, l'en-tête et l'image semblent former un seul élément uni alors qu'il s'agit en fait d'éléments techniquement distincts.  L'exemple de l'Opéra de Paris semble plus complexe à réaliser que celui de MICA, mais est en réalité plus facile à mettre en place (la facilité étant bien entendu, un concept plutôt relatif).
 
-Comme vous pouvez le voir, il est possible de créer des sites sensationnels avec des mises en page somme toute assez simples. Jetez un coup d'œil à vos sites préférés. Pouvez-vous repérer l'en-tête, le bas de page, le contenu principal et le contenu secondaire ? Cet exercice pourra vous fournir de l'inspiration pour vos propres réalisations et vous aider à distinguer les dispositions qui fonctionnent bien de celles qui posent problème.
+Comme vous pouvez le voir, il est possible de créer des sites sensationnels avec des mises en page somme toute assez simples. Jetez un coup d'œil à vos sites préférés. Pouvez-vous repérer l'en-tête, le bas de page, le contenu principal et le contenu secondaire&nbsp;? Cet exercice pourra vous fournir de l'inspiration pour vos propres réalisations et vous aider à distinguer les dispositions qui fonctionnent bien de celles qui posent problème.
 
 ## Prochaines étapes
 
-Deux options s'offrent maintenant à vous :
+Deux options s'offrent maintenant à vous&nbsp;:
 
 - Approfondir vos connaissances [sur les bases de la conception web](/fr/Apprendre/Commencer_avec_le_web).
 - Mettre le tout en pratique en [créant votre toute première page web](/fr/Learn/HTML/Write_a_simple_page_in_HTML).
diff --git a/files/fr/learn/common_questions/design_for_all_types_of_users/index.md b/files/fr/learn/common_questions/design_for_all_types_of_users/index.md
index efd847a8b2..e6a8f78a3a 100644
--- a/files/fr/learn/common_questions/design_for_all_types_of_users/index.md
+++ b/files/fr/learn/common_questions/design_for_all_types_of_users/index.md
@@ -17,11 +17,11 @@ Cet article aborde les concepts de bases pour vous aider à construire des sites
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Avoir lu
         <a href="/fr/Learn/What_is_accessibility"
-          >Qu'est-ce que l'accessibilité ?</a
+          >Qu'est-ce que l'accessibilité&nbsp;?</a
         >
         (l'accessibilité n'est pas approfondie en détails ici) et s'être
         familiarisé-e avec
@@ -30,7 +30,7 @@ Cet article aborde les concepts de bases pour vous aider à construire des sites
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectifs :</th>
+      <th scope="row">Objectifs&nbsp;:</th>
       <td>
         Être en mesure de concevoir un site pour tous, quelles que soient les
         contraintes techniques ou celles de handicap. Cet article liste les
@@ -45,7 +45,7 @@ Lors de la construction d'un site, il faut entre autres garder à l'esprit qu'un
 
 ## Pédagogie active
 
-_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/D%C3%A9buter_sur_MDN)._
+_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/D%C3%A9buter_sur_MDN)._
 
 ## Aller plus loin
 
@@ -57,9 +57,9 @@ Le {{Glossary("W3C")}} définit ce qui peut être une bonne association de coule
 
 Pour contrôler le contraste, vous pouvez télécharger et installer [l'analyseur de contraste](http://www.paciellogroup.com/resources/contrastanalyser/) du Groupe Paciello.
 
-> **Note :** Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM : [Color Contrast Checker](http://webaim.org/resources/contrastchecker/). Il est préférable d'utiliser un vérificateur qui fonctionne en local sur votre ordinateur car généralement, ceux-ci ont également une pipette qui permet de prélever la valeur d'une couleur sur tout l'écran.
+> **Note :** Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM&nbsp;: [Color Contrast Checker](http://webaim.org/resources/contrastchecker/). Il est préférable d'utiliser un vérificateur qui fonctionne en local sur votre ordinateur car généralement, ceux-ci ont également une pipette qui permet de prélever la valeur d'une couleur sur tout l'écran.
 
-Par exemple, testons les couleurs de cette page et voyons ce que cela donne avec l'outil d'analyse de contraste :
+Par exemple, testons les couleurs de cette page et voyons ce que cela donne avec l'outil d'analyse de contraste&nbsp;:
 
 ![Colour contrast on this page: excellent!](colour-contrast.png)
 
@@ -71,11 +71,11 @@ La taille de la police utilisée dans un site web peut être définie en unités
 
 #### Les unités absolues
 
-Les unités absolues ne sont pas calculées proportionnellement entre elles mais font plutôt référence à une valeur « dure », la plupart du temps, elles sont exprimées en pixels (`px`). Par exemple, si, dans votre fichier CSS, vous déclarez la règle suivante :
+Les unités absolues ne sont pas calculées proportionnellement entre elles mais font plutôt référence à une valeur « dure », la plupart du temps, elles sont exprimées en pixels (`px`). Par exemple, si, dans votre fichier CSS, vous déclarez la règle suivante&nbsp;:
 
     body { font-size:16px; }
 
-… vous indiquez au navigateur que, quoi qu'il arrive, la taille de la police doit être 16 pixels. Les navigateurs récents interprèteront cette règle de la façon suivante : « utiliser une police sur 16 pixels quand l'utilisateur a un niveau de zoom de 100% ».
+… vous indiquez au navigateur que, quoi qu'il arrive, la taille de la police doit être 16 pixels. Les navigateurs récents interprèteront cette règle de la façon suivante&nbsp;: « utiliser une police sur 16 pixels quand l'utilisateur a un niveau de zoom de 100% ».
 
 Cependant, pendant plusieurs années, Internet Explorer (jusqu'à Internet Explorer 8) affichait dans tous les cas 16 pixels. Le zoom n'avait aucun effet.
 
@@ -85,16 +85,16 @@ Cependant, pendant plusieurs années, Internet Explorer (jusqu'à Internet Explo
 
 Les unités relatives sont exprimées en `em`, `%` et `rem`:
 
-- Les tailles exprimées en pourcentages : `%`
+- Les tailles exprimées en pourcentages&nbsp;: `%`
   - : Cette unité permet d'indiquer au navigateur que la taille de police d'un élément doit représenter N% de la taille de police de l'élément précédent. Si aucun élément parent n'est trouvé, c'est la taille de police par défaut du navigateur qui est utilisée comme base de calcul (généralement, cette dernière est équivalente à 16 pixels).
-- Les tailles exprimées en em : `em`
+- Les tailles exprimées en em&nbsp;: `em`
   - : Cette unité est calculée de la même façon que les pourcentages sauf qu'ici, il s'agit d'un ratio par rapport à 1 et non d'un ratio par rapport à 100. L'unité est appelée « em » car elle correspond à la largeur d'un « M » majuscule (un « M » tient approximativement dans un carré dont on dira que la largeur vaut 1 em).
-- Les tailles exprimées en rem : `rem`
+- Les tailles exprimées en rem&nbsp;: `rem`
   - : Cette unité est proportionnelle à la taille de police de l'élément racine et est exprimée en ratio par rapport à 1, comme avec `em`.
 
 Imaginons que la taille de police de base soit 16px et qu'on ait un titre principal (`h1`) dont la taille soit équivalente à 32px et qu'au sein de ce `<h1>` on ait un élément `span` avec une classe `subheading`, celui-ci devant également être affiché avec la taille par défaut (généralement 16px).
 
-Voici le code HTML qu'on utilisera :
+Voici le code HTML qu'on utilisera&nbsp;:
 
 ```html
 <!DOCTYPE html>
@@ -113,7 +113,7 @@ Voici le code HTML qu'on utilisera :
 </html>
 ```
 
-Un fichier CSS utilisant des unités exprimées en pourcentages pourrait être :
+Un fichier CSS utilisant des unités exprimées en pourcentages pourrait être&nbsp;:
 
 ```css
 body { font-size:100%; }
@@ -129,7 +129,7 @@ span.subheading { font-size:50%; }
 à la taille de base originelle */
 ```
 
-Voici le fichier CSS équivalent, avec des valeurs exprimées en ems :
+Voici le fichier CSS équivalent, avec des valeurs exprimées en ems&nbsp;:
 
 ```css
 body { font-size:1em; }
@@ -146,7 +146,7 @@ ce qui revient à taille originelle */
 
 Comme vous pouvez l'observer, cela devient rapidement complexe lorsqu'il faut se souvenir de la taille du parent du parent et du parent du parent du parent, etc.
 
-C'est là qu'interviennent les `rem`. Cette unité est relative à la taille de l'élément racine de la page et non au parent de l'élément. Le fichier CSS correspond peut ainsi être réécrit de cette façon :
+C'est là qu'interviennent les `rem`. Cette unité est relative à la taille de l'élément racine de la page et non au parent de l'élément. Le fichier CSS correspond peut ainsi être réécrit de cette façon&nbsp;:
 
 ```css
 body { font-size:1em; }
@@ -160,28 +160,28 @@ span.subheading { font-size:1rem; }
 /* la taille originale */
 ```
 
-C'est plus facile de cette façon, n'est-ce pas ? Cela fonctionne, à partir d'[Internet Explorer 9 et dans n'importe quel autre navigateur récent](http://caniuse.com/#search=rem), n'hésitez pas à l'utiliser.
+C'est plus facile de cette façon, n'est-ce pas&nbsp;? Cela fonctionne, à partir d'[Internet Explorer 9 et dans n'importe quel autre navigateur récent](http://caniuse.com/#search=rem), n'hésitez pas à l'utiliser.
 
 > **Note :** Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police.
 
-#### Pourquoi aurais-je besoin d'utiliser des unités proportionnelles ?
+#### Pourquoi aurais-je besoin d'utiliser des unités proportionnelles&nbsp;?
 
 Pour plusieurs raisons et notamment parce que vous ne connaissez pas le moment où le navigateur refusera de suivre le zoom pour une police exprimée en pixels. Si vous analysez les statistiques de visites, vous verrez que certaines personnes utilisent toujours d'anciens navigateurs, les unités relatives sont plus simples à gérer pour ceux-ci.
 
-Il est généralement conseillé de :
+Il est généralement conseillé de&nbsp;:
 
-- Décrire les tailles de police en unité `rem`, cela ne posera aucun problème à la plupart des navigateurs ;
+- Décrire les tailles de police en unité `rem`, cela ne posera aucun problème à la plupart des navigateurs&nbsp;;
 - Laisser les anciens navigateurs afficher les polices avec leurs moteurs internes. Les moteurs des navigateurs ignorent les propriétés ou valeurs CSS qu'ils ne reconnaissent pas et/ou qu'ils ne peuvent pas gérer. Votre site web est donc toujours utilisable, même s'il ne respecte pas nécessairement le design que vous souhaitiez. De toute façon et inexorablement, les anciens navigateurs seront de moins en moins utilisés.
 
 > **Note :** Votre utilisation de ces unités pourra varier. S'il est nécessaire pour vous de gérer les anciens navigateurs, vous aurez besoin d'utiliser des `em`s, quitte à faire un peu de mathématique en chemin.
 
 ### Largeur de ligne
 
-Il y a depuis toujours sur le Web un débat sur la longueur que doit occuper une ligne. Mais cela n'est pas apparu avec le Web. Déjà avec les journaux, les imprimeurs avaient réalisé que si les lignes étaient trop longues, les lecteurs avaient du mal à suivre chaque ligne du début à la fin. Une solution fut trouvée à ce problème : organiser le texte en colonnes.
+Il y a depuis toujours sur le Web un débat sur la longueur que doit occuper une ligne. Mais cela n'est pas apparu avec le Web. Déjà avec les journaux, les imprimeurs avaient réalisé que si les lignes étaient trop longues, les lecteurs avaient du mal à suivre chaque ligne du début à la fin. Une solution fut trouvée à ce problème&nbsp;: organiser le texte en colonnes.
 
 Bien entendu, ce problème n'a pas disparu avec le Web. Les yeux d'un lecteur sont comme une navette qui va d'une ligne à une autre. Pour simplifier ce trajet, il est préconisé que les lignes s'étendent entre 60 et 70 caractères.
 
-Pour obtenir cet effet, il est possible de définir une taille spécifique pour le conteneur du texte. Voila ce que ça donne en HTML :
+Pour obtenir cet effet, il est possible de définir une taille spécifique pour le conteneur du texte. Voila ce que ça donne en HTML&nbsp;:
 
 ```html
 <!DOCTYPE html>
@@ -204,7 +204,7 @@ Pour obtenir cet effet, il est possible de définir une taille spécifique pour
 </html>
 ```
 
-Ici, nous avons un `div` avec une classe `container`. Il est possible de mettre en forme le `div` en réglant sa largeur avec la propriété `width` ou en réglant sa largeur maximale afin qu'il ne soit jamais trop grand, grâce à sa propriété `max-width`. Si vous souhaitez avoir un site adaptatif ou élastique et que vous ne connaissez pas la largeur par défaut du navigateur, vous pouvez utiliser la propriété `max-width` pour avoir au maximum 70 caractères par ligne :
+Ici, nous avons un `div` avec une classe `container`. Il est possible de mettre en forme le `div` en réglant sa largeur avec la propriété `width` ou en réglant sa largeur maximale afin qu'il ne soit jamais trop grand, grâce à sa propriété `max-width`. Si vous souhaitez avoir un site adaptatif ou élastique et que vous ne connaissez pas la largeur par défaut du navigateur, vous pouvez utiliser la propriété `max-width` pour avoir au maximum 70 caractères par ligne&nbsp;:
 
 ```css
 div.container { max-width:70em; }
@@ -216,7 +216,7 @@ Il arrive fréquemment que les pages web ne contiennent pas seulement du texte.
 
 #### Les images
 
-Les images d'une page web peuvent être décoratives ou informatives mais il n'est pas garanti que vos utilisateurs puissent les voir. Par exemple :
+Les images d'une page web peuvent être décoratives ou informatives mais il n'est pas garanti que vos utilisateurs puissent les voir. Par exemple&nbsp;:
 
 - Vos lecteurs souffrant d'une déficience visuelle utiliseront un logiciel lecteur d'écran qui ne pourra restituer que du texte.
 - Vos lecteurs peuvent naviguer depuis un intranet très strict qui bloque les images provenant d'un {{Glossary("CDN")}}.
@@ -225,7 +225,7 @@ Les images d'une page web peuvent être décoratives ou informatives mais il n'e
 <!---->
 
 - Les images décoratives
-  - : Ces images servent uniquement à décorer et ne contiennent pas d'informations utiles à la compréhension de la page. Elles pourraient généralement être remplacées par une image d'arrière-plan. Assurez-vous de fournir un texte alternatif vide grâce à l'attribut `alt` : `<img src="deco.gif" alt="">` afin qu'elles n'encombrent pas le texte.
+  - : Ces images servent uniquement à décorer et ne contiennent pas d'informations utiles à la compréhension de la page. Elles pourraient généralement être remplacées par une image d'arrière-plan. Assurez-vous de fournir un texte alternatif vide grâce à l'attribut `alt`&nbsp;: `<img src="deco.gif" alt="">` afin qu'elles n'encombrent pas le texte.
 - Les images informatives
   - : Celles-ci apportent des informations nécessaires à la compréhension de la page, d'où leur nom. Elle peuvent, par exemple, montrer un graphique, décrire le geste d'une personne, etc. Il faut au minimum fournir un attribut `alt` par rapport au contenu de l'image.
 
@@ -244,10 +244,10 @@ Il est également nécessaire de fournir des alternatives à du contenu multimé
 
 ### Compression des images
 
-Certains utilisateurs pourraient avoir choisi d'afficher les images mais pourraient disposer d'une connexion instable ou limité (c'est le cas notamment dans les pays en développement et sur les appareils mobiles). Si vous souhaitez que votre site web soit le plus fonctionnel possible, il est nécessaire de compresser les images. Voici quelques outils pour vous aider à cette tâche (logiciels ou services en ligne) :
+Certains utilisateurs pourraient avoir choisi d'afficher les images mais pourraient disposer d'une connexion instable ou limité (c'est le cas notamment dans les pays en développement et sur les appareils mobiles). Si vous souhaitez que votre site web soit le plus fonctionnel possible, il est nécessaire de compresser les images. Voici quelques outils pour vous aider à cette tâche (logiciels ou services en ligne)&nbsp;:
 
-- **Logiciels à installer :** [ImageOptim](https://imageoptim.com/) (Mac), [OptiPNG](http://optipng.sourceforge.net/) (toutes les plates-formes, [PNGcrush](http://pmt.sourceforge.net/pngcrush/) (DOS, Unix/Linux)
-- **Outils en lignes :** [smushit!](http://smush.it/) de Yahoo!,   [Online Image Optimizer](http://tools.dynamicdrive.com/imageoptimizer/) de Dynamic Drive (qui peut convertir d'un format à un autre si cela est plus efficace en termes de bande passante)
+- **Logiciels à installer&nbsp;:** [ImageOptim](https://imageoptim.com/) (Mac), [OptiPNG](http://optipng.sourceforge.net/) (toutes les plates-formes, [PNGcrush](http://pmt.sourceforge.net/pngcrush/) (DOS, Unix/Linux)
+- **Outils en lignes&nbsp;:** [smushit!](http://smush.it/) de Yahoo!, [Online Image Optimizer](http://tools.dynamicdrive.com/imageoptimizer/) de Dynamic Drive (qui peut convertir d'un format à un autre si cela est plus efficace en termes de bande passante)
 
 ## Prochaines étapes
 
diff --git a/files/fr/learn/common_questions/how_does_the_internet_work/index.md b/files/fr/learn/common_questions/how_does_the_internet_work/index.md
index 45dac37c77..91700def8c 100644
--- a/files/fr/learn/common_questions/how_does_the_internet_work/index.md
+++ b/files/fr/learn/common_questions/how_does_the_internet_work/index.md
@@ -13,7 +13,7 @@ Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne.
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Aucun, mais nous vous encourageons à lire l'article
         <a href="/fr/Apprendre/Commencez_votre_projet_web"
@@ -23,10 +23,10 @@ Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne.
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Vous apprendrez les rudiments de l'infrastructure technique du Web et
-        vous serez en mesure de distinguer « Internet » et « Web ».
+        vous serez en mesure de distinguer «&nbsp;Internet&nbsp;» et «&nbsp;Web&nbsp;».
       </td>
     </tr>
   </tbody>
@@ -34,13 +34,13 @@ Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne.
 
 ## Résumé
 
-L'**Internet** est l'épine dorsale du Web : il s'agit de l'infrastructure technique qui sous-tend le Web. De façon simple, l'Internet est un vaste réseau d'ordinateurs qui communiquent les uns avec les autres.
+L'**Internet** est l'épine dorsale du Web&nbsp;: il s'agit de l'infrastructure technique qui sous-tend le Web. De façon simple, l'Internet est un vaste réseau d'ordinateurs qui communiquent les uns avec les autres.
 
 [L'histoire des débuts de l'Internet est quelque peu nébuleuse](https://fr.wikipedia.org/wiki/Internet#Historique). Tout aurait commencé dans les années 1960 par un projet de recherche subventionné par le département de la Défense des États-Unis. L'Internet serait ensuite devenu, dans les années 1980, une infrastructure publique grâce au soutien de nombreuses universités publiques et entreprises privées. Les diverses technologies qui sous-tendent l'Internet ont évolué au fil du temps, mais son fonctionnement de base a, quant à lui, peu changé. L'Internet demeure un moyen de relier tous les ordinateurs entre eux et de s'assurer que ce lien perdure, peu importe les problèmes qui pourraient toucher le réseau.
 
 ## Pédagogie active
 
-- [How the internet Works in 5 minutes](https://www.youtube.com/watch?v=7_LPdttKXPc) : Une vidéo d'une durée de 5 minutes réalisée par Aaron Titus afin d'expliquer les rudiments du fonctionnement de l'Internet. (_en anglais seulement_)
+- [How the internet Works in 5 minutes](https://www.youtube.com/watch?v=7_LPdttKXPc)&nbsp;: Une vidéo d'une durée de 5 minutes réalisée par Aaron Titus afin d'expliquer les rudiments du fonctionnement de l'Internet. (_en anglais seulement_)
 
 ## Allons plus loin
 
@@ -56,7 +56,7 @@ Un réseau comme celui illustré ci-haut n'est pas limité à deux ordinateurs.
 
 ![Ten computers all together](internet-schema-2.png)
 
-Afin de résoudre ce problème, chaque ordinateur du réseau est relié à un petit ordinateur bien spécial que l'on appelle _routeur_. Ce _routeur_ n'a qu'une seule fonction : tout comme un signaleur de gare de train, il s'assure que les messages transmis par un ordinateur donné se rendent au bon ordinateur destinataire. Ainsi, pour envoyer un message à l'ordinateur B, l'ordinateur A transmet d'abord le message au routeur, qui s'assure alors de transférer le message à l'ordinateur B et non à l'ordinateur C.
+Afin de résoudre ce problème, chaque ordinateur du réseau est relié à un petit ordinateur bien spécial que l'on appelle _routeur_. Ce _routeur_ n'a qu'une seule fonction&nbsp;: tout comme un signaleur de gare de train, il s'assure que les messages transmis par un ordinateur donné se rendent au bon ordinateur destinataire. Ainsi, pour envoyer un message à l'ordinateur B, l'ordinateur A transmet d'abord le message au routeur, qui s'assure alors de transférer le message à l'ordinateur B et non à l'ordinateur C.
 
 Vous voyez donc que lorsque nous ajoutons un routeur dans notre structure, notre réseau de dix ordinateurs ne requiert alors que de dix câbles, d'une prise par ordinateur et d'un routeur de 10 ports.
 
@@ -82,7 +82,7 @@ Notre réseau est donc lié à l'infrastructure téléphonique. La prochaine ét
 
 ### Localiser un ordinateur
 
-Lorsque nous souhaitons transmettre un message à un ordinateur, nous devons préciser de quel ordinateur il s'agit. Par conséquent, chaque ordinateur lié à un réseau possède une adresse unique appelée « adresse IP » (où « IP » signifie _Internet Protocol_) qui sert à localiser l'ordinateur. Cette adresse est composée d'une série de nombres séparés par des points, par exemple : `192.168.2.10`  ou de lettres et de chiffres séparés par deux points. `2001:0db8:85a3:0000:0000:8a2e:0370:7334`.
+Lorsque nous souhaitons transmettre un message à un ordinateur, nous devons préciser de quel ordinateur il s'agit. Par conséquent, chaque ordinateur lié à un réseau possède une adresse unique appelée «&nbsp;adresse IP&nbsp;» (où «&nbsp;IP&nbsp;» signifie _Internet Protocol_) qui sert à localiser l'ordinateur. Cette adresse est composée d'une série de nombres séparés par des points, par exemple&nbsp;: `192.168.2.10`  ou de lettres et de chiffres séparés par deux points. `2001:0db8:85a3:0000:0000:8a2e:0370:7334`.
 
 C'est une méthode très efficace pour les ordinateurs, mais les humains ont un peu plus de difficulté à retenir de telles adresses numériques. Afin de se faciliter la tâche, un libellé alphabétique, appelé _nom de domaine,_ est souvent associé aux adresses IP. Par example, `google.com` est le nom de domaine associé à l'adresse IP `173.194.121.32`. L'utilisation d'un nom de domaine est ainsi le moyen le plus facile d'atteindre un ordinateur via l'Internet.
 
diff --git a/files/fr/learn/common_questions/how_much_does_it_cost/index.md b/files/fr/learn/common_questions/how_much_does_it_cost/index.md
index 225263f9da..2b9f0a5fa9 100644
--- a/files/fr/learn/common_questions/how_much_does_it_cost/index.md
+++ b/files/fr/learn/common_questions/how_much_does_it_cost/index.md
@@ -13,7 +13,7 @@ Se lancer sur le Web n'est pas aussi bon marché qu'il y paraît à première vu
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Vous devez au préalable connaître<a
           href="/fr/Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web"
@@ -29,7 +29,7 @@ Se lancer sur le Web n'est pas aussi bon marché qu'il y paraît à première vu
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectifs :</th>
+      <th scope="row">Objectifs&nbsp;:</th>
       <td>
         Revoir le processus de création complet d'un site web et analyser le
         coût éventeul de chaque étape.
@@ -52,7 +52,7 @@ Vous disposez probablement d'un éditeur de texte grâce à votre système d'exp
 
 De nombreux éditeurs sont gratuits : [Bluefish](http://bluefish.openoffice.nl/), [TextWrangler](http://www.barebones.com/products/textwrangler/), [Eclipse](http://eclipse.org/) et [Netbeans](https://netbeans.org/). Certains comme [Sublime Text](http://www.sublimetext.com/) peuvent être utilisés librement mais vous serez invité à payer si vous les utilisez continuellement ou dans un cadre professionnel. D'autres comme [PhpStorm](https://www.jetbrains.com/phpstorm/) peuvent coûter entre quelques dizaines et plusieurs centaines d'euros en fonction de l'abonnement choisi. Enfin, certains comme [Microsoft Visual Studio](http://www.visualstudio.com/) peuvent coûter plusieurs centaines voire plusieurs milliers d'euros selon l'utilisation qui en est faite.
 
-Pour commencer, n'hésitez pas à essayer plusieurs éditeurs (même les éditeurs payants disposent souvent d'une version d'essai) pour savoir lequel vous convient le mieux. Si vous prévoyez de n'écrire que du {{Glossary("HTML")}}, {{Glossary("CSS")}} et  {{Glossary("Javascript")}} simples, vous pouvez utiliser un éditeur simple.
+Pour commencer, n'hésitez pas à essayer plusieurs éditeurs (même les éditeurs payants disposent souvent d'une version d'essai) pour savoir lequel vous convient le mieux. Si vous prévoyez de n'écrire que du {{Glossary("HTML")}}, {{Glossary("CSS")}} et  {{Glossary("Javascript")}} simples, vous pouvez utiliser un éditeur simple.
 
 Le prix d'un éditeur ne reflète pas toujours son utilité ou sa qualité. À vous de les essayer et de forger votre avis. Par exemple, Sublime Text n'est pas très cher mais peut être agrémenté d'extensions (_plugins_) gratuites qui augmentent sensiblement les fonctionnalités qu'il offre.
 
@@ -105,7 +105,7 @@ Assurez-vous d'avoir suffisamment de bande passante :
 
 ##### Comprendre ce qu'est la « bande passante »
 
-Le tarif d'un hébergeur  variera en fonction de la bande passante consommée par votre site web. Celle-ci dépend du nombre de visiteurs (humains ou robots) sur une période donnée et de l'espace occupé par votre contenu (c'est pour cette raison que la plupart des gens stockent leurs vidéos sur Youtube, Dailymotion et Vimeo). Par exemple, votre fournisseur peut avoir une formule qui permet d'avoir jusqu'à plusieurs milliers de visiteurs par jours pour une bande passante raisonnable (cette définition de « raisonnable » peut varier d'un fournisseur à l'autre). Grosso modo, un hébergement personnalisé moyen et qui vous permet de servir suffisamment de visiteurs coûte entre 10 et 15 euros par mois.
+Le tarif d'un hébergeur variera en fonction de la bande passante consommée par votre site web. Celle-ci dépend du nombre de visiteurs (humains ou robots) sur une période donnée et de l'espace occupé par votre contenu (c'est pour cette raison que la plupart des gens stockent leurs vidéos sur Youtube, Dailymotion et Vimeo). Par exemple, votre fournisseur peut avoir une formule qui permet d'avoir jusqu'à plusieurs milliers de visiteurs par jours pour une bande passante raisonnable (cette définition de « raisonnable » peut varier d'un fournisseur à l'autre). Grosso modo, un hébergement personnalisé moyen et qui vous permet de servir suffisamment de visiteurs coûte entre 10 et 15 euros par mois.
 
 > **Note :** Un débit « illimité » n'existe pas en réalité. Si vous consommez beaucoup de bande passante, attendez-vous à devoir payer en conséquence.
 
diff --git a/files/fr/learn/common_questions/index.md b/files/fr/learn/common_questions/index.md
index 1df629feb2..cd1fdc3fcc 100644
--- a/files/fr/learn/common_questions/index.md
+++ b/files/fr/learn/common_questions/index.md
@@ -34,7 +34,7 @@ Cette section couvre les mécaniques du Web — les questions en relation avec l
 Questions relatives aux outils/logiciels que vous pouvez utiliser pour construire des sites web.
 
 - [Combien ça coûte de créer quelque chose sur le Web?](/fr/docs/Learn/Common_questions/How_much_does_it_cost)
-  - : Quand vous démarrez votre site web, vous pouvez ne rien dépenser ou alors complètement dépasser vos estimations.  Dans cet article nous aborderons le prix de chaque chose et de ce que vous aurez si vous payez (ou ne payez pas).
+  - : Quand vous démarrez votre site web, vous pouvez ne rien dépenser ou alors complètement dépasser vos estimations.  Dans cet article nous aborderons le prix de chaque chose et de ce que vous aurez si vous payez (ou ne payez pas).
 - [Quel logiciel est nécessaire pour construire un site web?](/fr/docs/Learn/Common_questions/What_software_do_I_need)
   - : Dans cet article nous expliquerons quel logiciel est nécessaire pour l'édition, l'upload, ou pour la visualisation d'un site web.
 - [Quels sont les éditeurs disponibles?](/fr/docs/Learn/Common_questions/Available_text_editors)
@@ -48,7 +48,7 @@ Questions relatives aux outils/logiciels que vous pouvez utiliser pour construir
 - [Comment transférer des fichiers vers un serveur web?](/fr/docs/Learn/Common_questions/Upload_files_to_a_web_server)
   - : Cet article montre comment mettre son site en ligne en utilisant un outil [FTP](/fr/docs/Glossary/FTP) — un des moyens les plus fréquents de publier son site afin qu'il soit disponible aux autres depuis leurs ordinateurs.
 - [Comment utiliser GitHub Pages?](/fr/docs/Learn/Common_questions/Using_GitHub_Pages)
-  - : Cet article fourni un guide basique pour publier du contenu en utilisant l'outil gh-pages de GitHub.
+  - : Cet article fourni un guide basique pour publier du contenu en utilisant l'outil gh-pages de GitHub.
 - [Comment héberger son site sur Google App Engine?](/fr/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine)
   - : Vous recherchez un endroit pour héberger votre site web? Voici un guide pas-à-pas pour héberger votre site sur Google App Engine.
 - [Quels outils sont disponibles pour corriger et améliorer les performances du site web?](/fr/docs/Tools/Performance)
@@ -58,7 +58,7 @@ Questions relatives aux outils/logiciels que vous pouvez utiliser pour construir
 
 Cette section rassemble les questions liées à l'esthétique, la structure des pages, aux techniques d'accessibilité, etc.
 
-- [Comment démarrer dans la conception  de mon site web?](/fr/docs/Learn/Common_questions/Thinking_before_coding)
+- [Comment démarrer dans la conception de mon site web?](/fr/docs/Learn/Common_questions/Thinking_before_coding)
   - : Cet article couvre la première étape la plus importante de tous les projets: définir ce que vous voulez accomplir avec.
 - [Que contiennent les mises en page classiques?](/fr/docs/Learn/Common_questions/Common_web_layouts)
   - : Lorsque vous concevez des pages pour votre site Web, il est bon d'avoir une idée des mises en page les plus courantes. Cet article présente quelques mises en page typiques du web, en analysant les parties qui composent chacune d'entre elles.
diff --git a/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.md b/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.md
index 3d501a266a..6a4960774e 100644
--- a/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.md
+++ b/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.md
@@ -11,7 +11,7 @@ Dans cet article, nous démystifions plusieurs notions liées au Web : page web,
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Vous devriez au préalable comprendre
         <a href="/fr/docs/Learn/Common_questions/How_does_the_Internet_work"
@@ -20,7 +20,7 @@ Dans cet article, nous démystifions plusieurs notions liées au Web : page web,
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Être capable de décrire les différences entre une page web, un site web,
         un serveur web et un moteur de recherche.
diff --git a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md
index 6f8b958dec..a45fecb75f 100644
--- a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md
+++ b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md
@@ -26,7 +26,7 @@ Cet article explique comment configurer un serveur de test local simple sur votr
         Vous devez au préalable savoir
         <a href="/fr/docs/Learn/How_the_Internet_works"
           >comment Internet fonctionne</a
-        > et
+        > et
         <a href="/fr/docs/Learn/What_is_a_Web_server"
           >ce qu'est un serveur Web</a
         >.
@@ -41,33 +41,33 @@ Cet article explique comment configurer un serveur de test local simple sur votr
 
 ## Fichiers locaux contre fichiers distants
 
-Dans les cours du MDN, la plupart du temps, on vous demande d'ouvrir les exemples directement dans le navigateur — vous pouvez le faire en double cliquant le fichier HTML, en déposant celui-ci dans la fenêtre de votre navigateur, ou en faisant _Fichier_ > _Ouvrir..._ et naviguer jusqu'au fichier HTML, etc... Il y a beaucoup de manières d'y arriver.
+Dans les cours du MDN, la plupart du temps, on vous demande d'ouvrir les exemples directement dans le navigateur — vous pouvez le faire en double cliquant le fichier HTML, en déposant celui-ci dans la fenêtre de votre navigateur, ou en faisant _Fichier_ > _Ouvrir..._ et naviguer jusqu'au fichier HTML, etc... Il y a beaucoup de manières d'y arriver.
 
-Vous savez que vous avez lancé l'exemple depuis un fichier local, lorsque l'URL commence par `file://` suivi du chemin d'accès dans votre système de fichiers. Par contre, si vous consultez un de nos exemples hébergés sur GitHub (ou n'importe quel autre serveur distant), l'adresse web commencera par `http://` ou `https://` ; dans ce cas le fichier a été servi via HTTP.
+Vous savez que vous avez lancé l'exemple depuis un fichier local, lorsque l'URL commence par `file://` suivi du chemin d'accès dans votre système de fichiers. Par contre, si vous consultez un de nos exemples hébergés sur GitHub (ou n'importe quel autre serveur distant), l'adresse web commencera par `http://` ou `https://`&nbsp;; dans ce cas le fichier a été servi via HTTP.
 
 ## Le problème du test local
 
-Certains exemples ne fonctionneront pas si vous les ouvrez en tant que fichiers locaux. Il y a plusieurs raisons possibles, dont les plus courantes sont :
+Certains exemples ne fonctionneront pas si vous les ouvrez en tant que fichiers locaux. Il y a plusieurs raisons possibles, dont les plus courantes sont :
 
-- **Ils sont basés sur des requêtes asynchrones**. Certains navigateurs comme Chrome n'exécutent pas de requêtes asynchrones (voyez [Récolter des données depuis le serveur](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)) si vous lancez simplement l'exemple comme un fichier local. Cela est dû à des restrictions de sécurité (voir [Sécurité des sites Web](/fr/docs/Learn/Server-side/First_steps/Website_security) pour en savoir plus).
-- **Ils mettent en œuvre un langage spécifique, tournant sur le serveur**. Des langages côté-serveur (comme PHP ou Python) nécessitent un environnement spécifique fourni par le serveur pour interpréter le code et donner des résultats.
+- **Ils sont basés sur des requêtes asynchrones**. Certains navigateurs comme Chrome n'exécutent pas de requêtes asynchrones (voyez [Récolter des données depuis le serveur](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)) si vous lancez simplement l'exemple comme un fichier local. Cela est dû à des restrictions de sécurité (voir [Sécurité des sites Web](/fr/docs/Learn/Server-side/First_steps/Website_security) pour en savoir plus).
+- **Ils mettent en œuvre un langage spécifique, tournant sur le serveur**. Des langages côté-serveur (comme PHP ou Python) nécessitent un environnement spécifique fourni par le serveur pour interpréter le code et donner des résultats.
 
 ## Créer un serveur HTTP local simple
 
-Pour contourner le problème des requêtes asynchrones, nous devons tester de tels exemples en les exécutant depuis un serveur local. Le module `SimpleHTTPServer` de Python permet une mise en œuvre simple de cette solution.
+Pour contourner le problème des requêtes asynchrones, nous devons tester de tels exemples en les exécutant depuis un serveur local. Le module `SimpleHTTPServer` de Python permet une mise en œuvre simple de cette solution.
 
 Voilà la marche à suivre :
 
-1.  Installer Python. Si vous utilisez GNU/Linux ou macOS, un environnement python est sans doute déjà disponible sur votre machine. Les utilisateurs de Windows pourront trouver un installeur depuis la page d'accueil de Python (on y trouve toutes les instructions) :
+1.  Installer Python. Si vous utilisez GNU/Linux ou macOS, un environnement python est sans doute déjà disponible sur votre machine. Les utilisateurs de Windows pourront trouver un installeur depuis la page d'accueil de Python (on y trouve toutes les instructions)&nbsp;:
 
     - Allez à [python.org](https://www.python.org/)
     - Sous Télécharger, cliquez le lien pour Python "3.xxx".
-    - Tout en bas de la page,  télécharger le fichier pointé par le lien *Windows x86 executable installer*.
+    - Tout en bas de la page,  télécharger le fichier pointé par le lien *Windows x86 executable installer*.
     - Exécuter ce programme quand le téléchargement est fini.
-    - Sur la première page de l'installeur, assurez-vous d'avoir coché la case  "Ajouter Python 3.xxx to PATH".
+    - Sur la première page de l'installeur, assurez-vous d'avoir coché la case  "Ajouter Python 3.xxx to PATH".
     - Cliquer _Install_, puis _Fermer_ quand l'installation est complète.
 
-2.  Ouvrez votre invite de commandes (Windows)/terminal (OS X et GNULinux). Pour vérifier que l'installation précédente s'est déroulée correctement, entrez la commande suivante :
+2.  Ouvrez votre invite de commandes (Windows)/terminal (OS X et GNULinux). Pour vérifier que l'installation précédente s'est déroulée correctement, entrez la commande suivante :
 
     ```bash
     python -V
@@ -93,14 +93,14 @@ Voilà la marche à suivre :
     python -m SimpleHTTPServer
     ```
 
-5.  Par défaut, il affiche la liste des fichiers  du dossier sur un serveur de développement, sur le port 8000. Vous pouvez aller à ce serveur en saisissant  l'URL `localhost:8000` dans votre navigateur web. Vous verrez le listing du dossier dans lequel le serveur tourne — cliquer le fichier HTML que vous voulez exécuter.
+5.  Par défaut, il affiche la liste des fichiers du dossier sur un serveur de développement, sur le port 8000. Vous pouvez aller à ce serveur en saisissant l'URL `localhost:8000` dans votre navigateur web. Vous verrez le listing du dossier dans lequel le serveur tourne — cliquer le fichier HTML que vous voulez exécuter.
 
-> **Note :** Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple `python -m http.server 7800` (Python 3.x) ou `python -m SimpleHTTPServer 7800` (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse `localhost:7800`.
+> **Note :** Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple `python -m http.server 7800` (Python 3.x) ou `python -m SimpleHTTPServer 7800` (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse `localhost:7800`.
 
 ## Faire fonctionner localement des langages serveur
 
-Le module `SimpleHTTPServer` de Python est utile, mais il ne sait pas comment exécuter du code écrit dans des langages comme PHP ou Python. Pour gérer ça, vous aurez besoin de quelque chose en plus — ce dont vous aurez besoin exactement dépend du language serveur que vous essayez d'exécuter. Voici quelques exemples :
+Le module `SimpleHTTPServer` de Python est utile, mais il ne sait pas comment exécuter du code écrit dans des langages comme PHP ou Python. Pour gérer ça, vous aurez besoin de quelque chose en plus — ce dont vous aurez besoin exactement dépend du language serveur que vous essayez d'exécuter. Voici quelques exemples :
 
-- Pour exécuter du code Python coté-serveur, vous aurez besoin d'utiliser un framework web Python. Vous pouvez découvrir comment utiliser le framework Django en lisant [Django Web Framework (Python)](/fr/docs/Learn/Server-side/Django). [Flask](http://flask.pocoo.org/) est une alternative à Django, un peu plus légère. Pour l'exécuter, vous aurez besoin d'[installer Python/PIP](/fr/docs/Learn/Server-side/Django/development_environment#Installing_Python_3), puis Flask en utilisant `pip3 install flask`.  À ce point, vous devriez être capable d'exécuter les exemples Python Flask en utilisant par exemple `python3 python-example.py`, puis consulter `localhost:5000` dans votre navigateur.
-- Pour exécuter du code Node.js (JavaScript) côté-serveur, vous aurez besoin d'utiliser un  noeud brut ou un framework construit par dessus ce dernier. Express est un bon choix — voir [Express Web Framework (Node.js/JavaScript)](/fr/docs/Learn/Server-side/Express_Nodejs).
-- Pour exécuter du code PHP côté serveur, vous aurez besoin d'une configuration serveur qui peut  interpréter PHP. De bonnes options pour tester PHP localement sont [MAMP](https://www.mamp.info/en/downloads/) (Mac and Windows) , [AMPPS](http://ampps.com/download) (Mac, Windows, Linux) and [LAMP](https://www.linux.com/learn/easy-lamp-server-installation) (Linux, Apache, MySQL, et PHP/Python/Perl). Ce sont des paquets complets qui créent des configurations locales vous permettant d'exécuter un serveur Apache, PHP et des bases de données MySQL.
+- Pour exécuter du code Python coté-serveur, vous aurez besoin d'utiliser un framework web Python. Vous pouvez découvrir comment utiliser le framework Django en lisant [Django Web Framework (Python)](/fr/docs/Learn/Server-side/Django). [Flask](http://flask.pocoo.org/) est une alternative à Django, un peu plus légère. Pour l'exécuter, vous aurez besoin d'[installer Python/PIP](/fr/docs/Learn/Server-side/Django/development_environment#Installing_Python_3), puis Flask en utilisant `pip3 install flask`.  À ce point, vous devriez être capable d'exécuter les exemples Python Flask en utilisant par exemple `python3 python-example.py`, puis consulter `localhost:5000` dans votre navigateur.
+- Pour exécuter du code Node.js (JavaScript) côté-serveur, vous aurez besoin d'utiliser un noeud brut ou un framework construit par dessus ce dernier. Express est un bon choix — voir [Express Web Framework (Node.js/JavaScript)](/fr/docs/Learn/Server-side/Express_Nodejs).
+- Pour exécuter du code PHP côté serveur, vous aurez besoin d'une configuration serveur qui peut interpréter PHP. De bonnes options pour tester PHP localement sont [MAMP](https://www.mamp.info/en/downloads/) (Mac and Windows) , [AMPPS](http://ampps.com/download) (Mac, Windows, Linux) and [LAMP](https://www.linux.com/learn/easy-lamp-server-installation) (Linux, Apache, MySQL, et PHP/Python/Perl). Ce sont des paquets complets qui créent des configurations locales vous permettant d'exécuter un serveur Apache, PHP et des bases de données MySQL.
diff --git a/files/fr/learn/common_questions/thinking_before_coding/index.md b/files/fr/learn/common_questions/thinking_before_coding/index.md
index d9c06b0336..f155d4ccc0 100644
--- a/files/fr/learn/common_questions/thinking_before_coding/index.md
+++ b/files/fr/learn/common_questions/thinking_before_coding/index.md
@@ -10,16 +10,16 @@ original_slug: Apprendre/Commencez_votre_projet_web
 ---
 {{IncludeSubnav("/fr/Apprendre")}}
 
-Cette article présente l'étape primordiale de n'importe quel projet  définir ce qu'on souhaite accomplir avec.
+Cette article présente l'étape primordiale de n'importe quel projet définir ce qu'on souhaite accomplir avec.
 
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis </th>
+      <th scope="row">Prérequis </th>
       <td>Aucun</td>
     </tr>
     <tr>
-      <th scope="row">Objectif </th>
+      <th scope="row">Objectif </th>
       <td>
         Apprendre à définir les objectifs pour donner une direction à votre
         projet.
@@ -32,7 +32,7 @@ Cette article présente l'étape primordiale de n'importe quel projet  définir
 
 Lors du démarrage d'un projet web, beaucoup de gens se concentrent sur l'aspect technique. Bien sûr, vous devez être familier avec la technique, mais ce qui importe vraiment est _ce que vous_ _voulez accomplir_. Oui, cela semble évident, mais de trop nombreux projets échouent, pas à cause d'un manque de savoir-faire technique, mais à cause d'un manque d'objectifs et de vision.
 
-Alors, quand vous aurez une idée et que vous voudrez la concrétiser en un site web, il y a quelques questions auxquelles vous devrez répondre avant toute autre chose
+Alors, quand vous aurez une idée et que vous voudrez la concrétiser en un site web, il y a quelques questions auxquelles vous devrez répondre avant toute autre chose
 
 - Qu'est-ce que je veux accomplir exactement ?
 - Comment un site web aiderait à atteindre mes objectifs ?
@@ -42,7 +42,7 @@ Se poser ces questions et y répondre constituent la _conceptualisation_ du proj
 
 ## Pédagogie active
 
-_Il n'y a pas la pédagogie active disponible pour l'instant. [S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !](/fr/docs/MDN/Getting_started)_
+_Il n'y a pas la pédagogie active disponible pour l'instant. [S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !](/fr/docs/MDN/Getting_started)_
 
 ## Aller plus loin
 
@@ -52,11 +52,11 @@ La technique est évidemment essentielle. Les musiciens doivent maîtriser leur
 
 Une discussion d'une heure avec des amis est un bon début, mais ce sera insuffisant. Vous devez vous asseoir et structurer vos idées pour avoir une vision claire du chemin que vous devrez parcourir afin de concrétiser vos idées. Pour ce faire, il vous suffit d'un stylo, de quelques feuilles de papier et d'un peu de temps pour répondre au moins aux questions suivantes.
 
-> **Note :** Il existe d'innombrables moyens pour mener à bien des idées de projet. Nous ne pouvons pas tous les mentionner ici (un livre entier ne suffirait pas). Ce que nous allons présenter ici est une méthode simple pour gérer ce que les professionnels appellent [l'idéation](https://fr.wikipedia.org/wiki/Id%C3%A9ation), [la planification](https://fr.wikipedia.org/wiki/Planification) et [la gestion de projet](https://fr.wikipedia.org/wiki/Gestion_de_projet).
+> **Note :** Il existe d'innombrables moyens pour mener à bien des idées de projet. Nous ne pouvons pas tous les mentionner ici (un livre entier ne suffirait pas). Ce que nous allons présenter ici est une méthode simple pour gérer ce que les professionnels appellent [l'idéation](https://fr.wikipedia.org/wiki/Id%C3%A9ation), [la planification](https://fr.wikipedia.org/wiki/Planification) et [la gestion de projet](https://fr.wikipedia.org/wiki/Gestion_de_projet).
 
 ### Qu'est-ce que je veux accomplir exactement ?
 
-C'est la question la plus importante à laquelle vous devez répondre, car il en découle tout le reste. Énumérez tous les objectifs que vous souhaitez atteindre. Ce peut être n'importe quoi  vendre des biens pour faire de l'argent, exprimer des opinions politiques, rencontrer de nouveaux amis, donner des concerts avec des musiciens, collectionner des images de chat ou autre chose encore.
+C'est la question la plus importante à laquelle vous devez répondre, car il en découle tout le reste. Énumérez tous les objectifs que vous souhaitez atteindre. Ce peut être n'importe quoi vendre des biens pour faire de l'argent, exprimer des opinions politiques, rencontrer de nouveaux amis, donner des concerts avec des musiciens, collectionner des images de chat ou autre chose encore.
 
 Supposons que vous êtes un musicien. Vous pourriez souhaiter
 
@@ -94,7 +94,7 @@ Comment un site web peut-il m'aider à atteindre mes objectifs ? En répondant �
 
 ### Qu'est-ce qui doit être fait, et dans quel ordre, pour atteindre mes objectifs ?
 
-Maintenant que vous savez ce que vous voulez accomplir, il est temps de transformer ces objectifs en mesures concrètes. Note  vos objectifs ne sont pas nécessairement gravés dans la pierre. Ils évoluent au fil du temps, même dans le cadre du projet, si vous rencontrez des obstacles inattendus ou tout simplement si vous changez d'avis.
+Maintenant que vous savez ce que vous voulez accomplir, il est temps de transformer ces objectifs en mesures concrètes. Note vos objectifs ne sont pas nécessairement gravés dans la pierre. Ils évoluent au fil du temps, même dans le cadre du projet, si vous rencontrez des obstacles inattendus ou tout simplement si vous changez d'avis.
 
 Plutôt qu'une longue explication, revenons à notre exemple avec ce tableau
 
@@ -191,5 +191,5 @@ Comme vous pouvez le voir, l'idée simple: « Je veux faire un site » génère
 
 ## Prochaines étapes
 
-- Commencer à apprendre la technique  [Comment fonctionne l'Internet ?](/fr/Apprendre/Fonctionnement_Internet)
-- Approfondir le design et la conception  [Conception d'une page web](/fr/Apprendre/Concevoir_page_web)
+- Commencer à apprendre la technique  [Comment fonctionne l'Internet ?](/fr/Apprendre/Fonctionnement_Internet)
+- Approfondir le design et la conception  [Conception d'une page web](/fr/Apprendre/Concevoir_page_web)
diff --git a/files/fr/learn/common_questions/upload_files_to_a_web_server/index.md b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.md
index 7684d4f048..72276db0a3 100644
--- a/files/fr/learn/common_questions/upload_files_to_a_web_server/index.md
+++ b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.md
@@ -13,7 +13,7 @@ Cet article illustre comment publier votre site en ligne grâce à des outils {{
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Vous devriez au préalable comprendre
         <a href="/fr/Apprendre/Qu_est-ce_qu_un_serveur_web"
@@ -33,7 +33,7 @@ Cet article illustre comment publier votre site en ligne grâce à des outils {{
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectifs :</th>
+      <th scope="row">Objectifs&nbsp;:</th>
       <td>
         Apprendre à envoyer des fichiers vers un serveur en utilisant FTP.
       </td>
diff --git a/files/fr/learn/common_questions/using_github_pages/index.md b/files/fr/learn/common_questions/using_github_pages/index.md
index 94acc66b49..b4c6da6ffb 100644
--- a/files/fr/learn/common_questions/using_github_pages/index.md
+++ b/files/fr/learn/common_questions/using_github_pages/index.md
@@ -50,7 +50,7 @@ La meilleure façon d'envoyer votre code sur GitHub est d'utiliser l'interface e
 
 > **Note :** Il existe également des [interfaces graphiques pour Git](http://git-scm.com/downloads/guis) qui permettent de faire la même chose. N'hésitez pas à les utiliser si vous ne vous sentez pas à l'aise avec la ligne de commande.
 
-Chaque système d'exploitation possède sa propre interface en ligne de commande  :
+Chaque système d'exploitation possède sa propre interface en ligne de commande  :
 
 - **Windows** : **l'invite de commande**. Celle-ci peut être lancée en utilisant la touche Windows et en tapant _Invite de commande_ avant de sélectionner l'option dans la liste qui apparaît. Windows utilise certaines conventions différentes de celles choisies par Linux et OS X, les commandes peuvent donc varier légèrement (par exemple, dans Windows, on utilisera `\` pour indiquer un sous-répertoire alors que Linux et OS X utiliseront `/`).
 - **OS X** : **le terminal**. On le trouvera dans _Applications > Utilitaires_.
@@ -100,6 +100,6 @@ Si vous souhaitez modifier votre site et le mettre à jour sur GitHub, modifiez
     git commit -m 'Un autre commit'
     git push
 
-Vous pouvez utiliser un autre message que « un autre commit »  pour indiquer les changements que vous avez effectués.
+Vous pouvez utiliser un autre message que « un autre commit »  pour indiquer les changements que vous avez effectués.
 
 Dans cet article, nous n'avons fait qu'effleurer la surface de Git. Pour en savoir plus, n'hésitez pas à utiliser les [pages d'aide de GitHub](https://help.github.com/index.html) (en anglais) ou encore [le manuel Pro Git](http://git-scm.com/book/fr/v1) (en français).
diff --git a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.md b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.md
index a3fd4a6299..0eddd50270 100644
--- a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.md
+++ b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.md
@@ -30,7 +30,7 @@ Comment faire pour que cette sous-fenêtre apparaisse ? Trois méthodes :
 - **_Au clavier._** _Ctrl + Shift + I_, sauf pour :
 
   - **Internet Explorer.** _F12_
-  - **Mac OS X.** *⌘ + ⌥ + I*
+  - **Mac OS X.** *⌘ + ⌥ + I*
 
 - **_Via les menus._**
 
diff --git a/files/fr/learn/common_questions/what_are_hyperlinks/index.md b/files/fr/learn/common_questions/what_are_hyperlinks/index.md
index a6b9fa4315..a5ef402dad 100644
--- a/files/fr/learn/common_questions/what_are_hyperlinks/index.md
+++ b/files/fr/learn/common_questions/what_are_hyperlinks/index.md
@@ -14,7 +14,7 @@ Dans cet article, nous verrons ce que sont les liens et en quoi ils sont importa
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Vous devriez, au préalable, comprendre
         <a href="/fr/Learn/How_the_Internet_works"
diff --git a/files/fr/learn/common_questions/what_is_a_domain_name/index.md b/files/fr/learn/common_questions/what_is_a_domain_name/index.md
index ad0ba70576..c7d8666ec2 100644
--- a/files/fr/learn/common_questions/what_is_a_domain_name/index.md
+++ b/files/fr/learn/common_questions/what_is_a_domain_name/index.md
@@ -15,7 +15,7 @@ Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment i
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Pour commencer, vous devez comprendre
         <a href="/fr/Apprendre/Fonctionnement_Internet"
@@ -25,7 +25,7 @@ Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment i
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Apprendre ce qu'est un nom de domaine, son fonctionnement et son
         importance.
diff --git a/files/fr/learn/common_questions/what_is_a_url/index.md b/files/fr/learn/common_questions/what_is_a_url/index.md
index 178bbd77f8..f0688662ef 100644
--- a/files/fr/learn/common_questions/what_is_a_url/index.md
+++ b/files/fr/learn/common_questions/what_is_a_url/index.md
@@ -15,7 +15,7 @@ Cet article aborde les _Uniform Resource Locators_ (URL) en expliquant leur rôl
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Vous devez au préalable savoir
         <a href="/fr/Apprendre/Fonctionnement_Internet"
@@ -31,13 +31,13 @@ Cet article aborde les _Uniform Resource Locators_ (URL) en expliquant leur rôl
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectifs :</th>
+      <th scope="row">Objectifs&nbsp;:</th>
       <td>Savoir ce qu'est une URL et comprendre son rôle sur le Web.</td>
     </tr>
   </tbody>
 </table>
 
-Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les **_URL_** sont une autre pierre angulaire du Web.  Celles-ci sont utilisées par les navigateurs pour accéder aux différentes ressources publiées sur le Web.
+Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les **_URL_** sont une autre pierre angulaire du Web.  Celles-ci sont utilisées par les navigateurs pour accéder aux différentes ressources publiées sur le Web.
 
 **URL** signifie _Uniform Resource Locator_ (ou, en français, « localisateur uniforme de ressource »). Une URL est simplement l'adresse d'une ressource donnée, unique sur le Web. En théorie, chaque URL valide pointe vers une ressource unique. Ces ressources peuvent être des pages HTML, des documents CSS, des images, etc. En pratique, il y a quelques exceptions : les URL peuvent pointer vers une ressource qui n'existe plus ou qui a été déplacée. La ressource représentée par l'URL et l'URL elle-même sont gérées par le serveur web. C'est donc au gestionnaire de ce serveur que de gérer soigneusement la ressource et l'URL associée.
 
@@ -129,7 +129,7 @@ Prenons quelques exemples concrets pour illustrer le concept.
 
 #### Exemples d'URL relatives
 
-Pour mieux comprendre les exemples qui suivent, nous nous placerons dans le contexte où les URL suivantes sont appelées depuis un document situé à l'URL suivante  `https://developer.mozilla.org/fr/docs/Apprendre`
+Pour mieux comprendre les exemples qui suivent, nous nous placerons dans le contexte où les URL suivantes sont appelées depuis un document situé à l'URL suivante  `https://developer.mozilla.org/fr/docs/Apprendre`
 
 - Sous-ressources
 
@@ -145,11 +145,11 @@ Pour mieux comprendre les exemples qui suivent, nous nous placerons dans le cont
 
         ../CSS/display
 
-    Dans ce cas, on utilise la convention, héritée du monde UNIX :  `../` indique au navigateur de remonter d'un répertoire dans l'arborescence. L'URL absolue correspodante à la ressource visée est ici `https://developer.mozilla.org/fr/docs/Apprendre/../CSS/display`, qui peut être simplifiée en : `https://developer.mozilla.org/fr/docs/CSS/display`
+    Dans ce cas, on utilise la convention, héritée du monde UNIX :  `../` indique au navigateur de remonter d'un répertoire dans l'arborescence. L'URL absolue correspodante à la ressource visée est ici `https://developer.mozilla.org/fr/docs/Apprendre/../CSS/display`, qui peut être simplifiée en : `https://developer.mozilla.org/fr/docs/CSS/display`
 
 ### Les URL sémantiques
 
-Bien qu'utiles sur le plan technique, les URL représentent également un point d'entrée vers un site web, compréhensible par un lecteur humain. Une URL peut être mémorisée et n'importe qui peut en saisir une dans la barre d'adresse d'un navigateur. Une bonne pratique, préconisée par les concepteurs du web, est de construire des [_URL sémantiques_](http://en.wikipedia.org/wiki/Semantic_URL).  Les URL sémantiques utilisent des termes qui peuvent être compris par n'importe quel lecteur, quel que soit son niveau de connaissance.
+Bien qu'utiles sur le plan technique, les URL représentent également un point d'entrée vers un site web, compréhensible par un lecteur humain. Une URL peut être mémorisée et n'importe qui peut en saisir une dans la barre d'adresse d'un navigateur. Une bonne pratique, préconisée par les concepteurs du web, est de construire des [_URL sémantiques_](http://en.wikipedia.org/wiki/Semantic_URL).  Les URL sémantiques utilisent des termes qui peuvent être compris par n'importe quel lecteur, quel que soit son niveau de connaissance.
 
 Les ordinateurs n'ont pas strictement besoin d'utiliser des URL sémantiques et vous avez déjà sûrement rencontré des URL pleines de charabia et de caractères aléatoires, URL qui fonctionnaient parfaitement. Cela dit, il y a plusieurs avantages à créer des URL compréhensibles par les humains :
 
diff --git a/files/fr/learn/common_questions/what_is_a_web_server/index.md b/files/fr/learn/common_questions/what_is_a_web_server/index.md
index ab4cfd0cd1..c734d21105 100644
--- a/files/fr/learn/common_questions/what_is_a_web_server/index.md
+++ b/files/fr/learn/common_questions/what_is_a_web_server/index.md
@@ -13,7 +13,7 @@ Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctio
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Vous devriez au préalable savoir<a
           href="/fr/docs/Apprendre/Fonctionnement_Internet"
@@ -27,7 +27,7 @@ Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctio
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectifs :</th>
+      <th scope="row">Objectifs&nbsp;:</th>
       <td>
         Vous apprendrez ce qu'est un serveur web et comprendrez son
         fonctionnement général.
@@ -105,9 +105,9 @@ Sur un serveur web, le serveur HTTP est responsable du traitement des requêtes
 
 En résumé, un serveur peut « servir » du contenu statique ou dynamique. Un contenu « statique » signifie qu'il est servi tel quel. Les sites web statiques sont les plus simples à mettre en œuvre et il sera donc préférable de commencer par un site statique.
 
-Un site « dynamique » signifie que le serveur traite le contenu ou le génère à la volée depuis les informations contenues dans une base de données. Cette solution est plus flexible mais beaucoup plus complexe à mettre en œuvre.
+Un site « dynamique » signifie que le serveur traite le contenu ou le génère à la volée depuis les informations contenues dans une base de données. Cette solution est plus flexible mais beaucoup plus complexe à mettre en œuvre.
 
-Prenons l'exemple de la page que vous êtes en train de lire. Sur le serveur web qui l'héberge, il y a une serveur d'applications qui tire l'article d'une base de données, le formate et l'insère dans différents modèles HTML. Une fois ce traitement effectué, le serveur envoie le fichier vers votre navigateur. Ici, le serveur d'applications s'appelle [Kuma](/fr/docs/MDN/Kuma) et est construit en [Python](https://www.python.org/) (grâce au *framework* [Django](https://www.djangoproject.com/)). L'équipe Mozilla a construit Kuma afin qu'il réponde aux besoins spécifiques de MDN mais il existe de nombreuses autres applications, éventuellement construites sur d'autres technologies.
+Prenons l'exemple de la page que vous êtes en train de lire. Sur le serveur web qui l'héberge, il y a une serveur d'applications qui tire l'article d'une base de données, le formate et l'insère dans différents modèles HTML. Une fois ce traitement effectué, le serveur envoie le fichier vers votre navigateur. Ici, le serveur d'applications s'appelle [Kuma](/fr/docs/MDN/Kuma) et est construit en [Python](https://www.python.org/) (grâce au *framework* [Django](https://www.djangoproject.com/)). L'équipe Mozilla a construit Kuma afin qu'il réponde aux besoins spécifiques de MDN mais il existe de nombreuses autres applications, éventuellement construites sur d'autres technologies.
 
 Il y a tellement de serveurs d'applications qu'il est difficile d'en suggérer un en particulier. Certains serveurs d'applications sont consacrés à certaines catégories de site web comme les blogs, les wikis, les boutiques en ligne, etc. D'autres, appelés {{Glossary("CMS")}} (pour _Content Management Systems_ en anglais ou « Systèmes de gestion des contenus ») sont plus génériques. Si vous construisez un site web dynamique, prenez le temps d'étudier les outils disponibles pour choisir celui qui correspondra à votre projet. Sauf si vous souhaitez apprendre des éléments de programmation serveur (ce qui est très intéressant), vous n'avez pas besoin de créer votre serveur d'applications de toute pièce (cela reviendrait à réinventer la roue).
 
diff --git a/files/fr/learn/common_questions/what_is_accessibility/index.md b/files/fr/learn/common_questions/what_is_accessibility/index.md
index 6df7c2373b..84ea2bdfd1 100644
--- a/files/fr/learn/common_questions/what_is_accessibility/index.md
+++ b/files/fr/learn/common_questions/what_is_accessibility/index.md
@@ -15,11 +15,11 @@ Cet article aborde les concepts de base qui forment l'accessibilité pour le Web
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>Aucun.</td>
     </tr>
     <tr>
-      <th scope="row">Objectifs :</th>
+      <th scope="row">Objectifs&nbsp;:</th>
       <td>
         Comprendre ce qu'est l'accessibilité et pourquoi elle est importante.
       </td>
@@ -31,7 +31,7 @@ Que ce soit en raison de limitations physiques ou techniques, il peut arriver qu
 
 ## Pédagogie active
 
-_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/D%C3%A9buter_sur_MDN)._
+_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/D%C3%A9buter_sur_MDN)._
 
 ## Aller plus loin
 
diff --git a/files/fr/learn/common_questions/what_software_do_i_need/index.md b/files/fr/learn/common_questions/what_software_do_i_need/index.md
index bc77e82145..709a7c1107 100644
--- a/files/fr/learn/common_questions/what_software_do_i_need/index.md
+++ b/files/fr/learn/common_questions/what_software_do_i_need/index.md
@@ -14,7 +14,7 @@ Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre e
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Vous devriez déjà connaître
         <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche"
@@ -24,7 +24,7 @@ Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre e
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectifs :</th>
+      <th scope="row">Objectifs&nbsp;:</th>
       <td>
         Connaître les logiciels qui sont nécessaires pour créer, éditer, mettre
         en ligne ou consulter un site web.
@@ -43,7 +43,7 @@ Tous les systèmes d'exploitation (ou presque) possèdent par défaut un éditeu
 
 ## Pédagogie active
 
-_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/D%C3%A9buter_sur_MDN)._
+_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/D%C3%A9buter_sur_MDN)._
 
 ## Aller plus loin
 
diff --git a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md
index 5be0014eeb..5638a78c16 100644
--- a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md
+++ b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md
@@ -28,7 +28,7 @@ Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Tester votre compréhension du modèle de boîte CSS et toutes les
         fonctionnalités associées comme les encadrements et les arrière‑plans.
@@ -39,11 +39,11 @@ Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création
 
 ## Départ
 
-Pour débuter, vous devez :
+Pour débuter, vous devez&nbsp;:
 
 - faire des copies locales de ces [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/index.html) et [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css) — enregistrez‑les sous les noms `index.html` et `style.css` dans un nouveau répertoire.
 
-> **Note :** Autrement, vous pouvez utiliser un site comme  [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément `<style>` dans l'élément `head` du document.
+> **Note :** Autrement, vous pouvez utiliser un site comme  [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément `<style>` dans l'élément `head` du document.
 
 ## Résumé du projet
 
@@ -55,7 +55,7 @@ Votre tâche consiste à créer une boîte élégante et rafraîchissante tout e
 
 ### Composition de la boîte
 
-Vous devez appliquer un style à l'élément {{htmlelement("p")}} en lui donnant :
+Vous devez appliquer un style à l'élément {{htmlelement("p")}} en lui donnant&nbsp;:
 
 - une largeur raisonnable pour un gros bouton, disons autout de 200 pixels,
 - une hauteur raisonnable pour un gros bouton en centrant le texte verticalement dans ce processus,
@@ -70,13 +70,13 @@ Vous devez appliquer un style à l'élément {{htmlelement("p")}} en lui donnant
 
 ## Exemple
 
-Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler :
+Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler&nbsp;:
 
 ![](fancy-box.png)
 
 ## Évaluation
 
-Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abord, il n'y rien à gagner en trichant !
+Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abord, il n'y rien à gagner en trichant !
 
 {{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
 
@@ -84,7 +84,7 @@ Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvo
 
 ## Dans ce module
 
-- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap)
+- [Le modèle de boîte&nbsp;: récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap)
 - [Arrière-plans](/fr/Apprendre/CSS/styliser_boites/Backgrounds)
 - [Encadrements](/fr/docs/Apprendre/CSS/styliser_boites/Borders)
 - [Mise en page des tableaux](/fr/Apprendre/CSS/styliser_boites/Styling_tables)
diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md
index e8d7882fc1..85bdc70773 100644
--- a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md
+++ b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md
@@ -11,7 +11,7 @@ Dans cette leçon, nous verrons quelques-unes des mises en forme créatives auto
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Compétences informatique basiques,
         <a
@@ -28,7 +28,7 @@ Dans cette leçon, nous verrons quelques-unes des mises en forme créatives auto
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>Apprendre comment mettre en forme l'arrière-plan et les bordures.</td>
     </tr>
   </tbody>
@@ -107,7 +107,7 @@ La propriété [`background-position`](/fr/docs/Web/CSS/background-position) per
 
 Les valeurs les plus communes pour `background-position` se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.
 
-Vous pouvez utiliser les mots-clé tels que `top` et `right` (vous trouverez les autres valeurs possibles sur la page [`background-image`](/fr/docs/Web/CSS/background-image)) :
+Vous pouvez utiliser les mots-clé tels que `top` et `right` (vous trouverez les autres valeurs possibles sur la page [`background-image`](/fr/docs/Web/CSS/background-image))&nbsp;:
 
 ```css
 .box {
@@ -117,7 +117,7 @@ Vous pouvez utiliser les mots-clé tels que `top` et `right` (vous trouverez les
 }
 ```
 
-Ainsi que des valeurs de [longueurs](/fr/docs/Web/CSS/length), ou des [pourcentages](/fr/docs/Web/CSS/percentage) :
+Ainsi que des valeurs de [longueurs](/fr/docs/Web/CSS/length), ou des [pourcentages](/fr/docs/Web/CSS/percentage)&nbsp;:
 
 ```css
 .box {
@@ -127,7 +127,7 @@ Ainsi que des valeurs de [longueurs](/fr/docs/Web/CSS/length), ou des [pourcenta
 }
 ```
 
-On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :
+On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple&nbsp;:
 
 ```css
 .box {
@@ -189,14 +189,14 @@ Chaque valeur des différentes propriétés va correspondre aux valeurs placées
 
 Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. Ce comportement est contrôlé grâce à la propriété [`background-attachment`](/fr/docs/Web/CSS/background-attachment) , qui peut prendre ces valeurs:
 
-- `scroll` : L'arrière-plan de l'élément défile lorsqu'on fait défiler la page. Si le contenu de l'élément défile, l'arrière-plan ne bouge pas. Dans la pratique, l'effet obtenu est que l'arrière-plan est fixé à la position de la page et défile comme elle.
-- `fixed` : L'arrière-plan de l'élément est fixe dans la zone d'affichage (
+- `scroll`&nbsp;: L'arrière-plan de l'élément défile lorsqu'on fait défiler la page. Si le contenu de l'élément défile, l'arrière-plan ne bouge pas. Dans la pratique, l'effet obtenu est que l'arrière-plan est fixé à la position de la page et défile comme elle.
+- `fixed`&nbsp;: L'arrière-plan de l'élément est fixe dans la zone d'affichage (
 
   <i lang="en">viewport</i>
 
   ) et il ne défile pas lorsqu'on fait défiler ou la page ou le contenu de l'élément. L'arrière-plan reste toujours à la même position sur l'écran.
 
-- `local` : Cette valeur fut ajoutée plus tard en raison de la confusion engendrée par la valeur `scroll` et son comportement qui ne correspond pas aux cas d'usage. `local` permet de fixer l'arrière-plan sur l'élément sur lequel il est défini afin que, lorsqu'on fait défiler l'élément, l'arrière-plan défile avec lui.
+- `local`&nbsp;: Cette valeur fut ajoutée plus tard en raison de la confusion engendrée par la valeur `scroll` et son comportement qui ne correspond pas aux cas d'usage. `local` permet de fixer l'arrière-plan sur l'élément sur lequel il est défini afin que, lorsqu'on fait défiler l'élément, l'arrière-plan défile avec lui.
 
 La propriété [`background-attachment`](/fr/docs/Web/CSS/background-attachment) n'a d'effet que lorsque le contenu défile. Pour observer cet effet, nous avons construit une démo afin d'illustrer les différences entre les trois valeurs : [background-attachment.html](https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html) (vous pouvez également consulter [le code source de cette démo](https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds)).
 
@@ -225,7 +225,7 @@ Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc
 
 Lors de l'apprentissage du modèle de boîte, on a pu voir comment les bordures jouaient un rôle sur la taille de la boîte. Dans cette leçon, nous allons voir comment créer des bordures. Généralement, lorsqu'on ajoute des bordures à un élément avec CSS, on utilise une propriété raccourcie qui définit la couleur, l'épaisseur et le style de la bordure.
 
-On peut définir une bordure pour les quatre côtés d'une boîte avec la propriété [`border`](/fr/docs/Web/CSS/border) :
+On peut définir une bordure pour les quatre côtés d'une boîte avec la propriété [`border`](/fr/docs/Web/CSS/border)&nbsp;:
 
 ```css
 *.box {
@@ -233,7 +233,7 @@ On peut définir une bordure pour les quatre côtés d'une boîte avec la propri
 }*
 ```
 
-On peut aussi cibler un seul des côtés de la boîte, par exemple :
+On peut aussi cibler un seul des côtés de la boîte, par exemple&nbsp;:
 
 ```css
 .box {
@@ -241,7 +241,7 @@ On peut aussi cibler un seul des côtés de la boîte, par exemple :
 }
 ```
 
-Les propriétés individuelles équivalentes pour ces notations raccourcies seraient :
+Les propriétés individuelles équivalentes pour ces notations raccourcies seraient&nbsp;:
 
 ```css
 .box {
@@ -251,7 +251,7 @@ Les propriétés individuelles équivalentes pour ces notations raccourcies sera
 }
 ```
 
-Pour la propriété qui concerne un des côtés :
+Pour la propriété qui concerne un des côtés&nbsp;:
 
 ```css
 .box {
@@ -291,7 +291,7 @@ Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coi
 
 {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 750)}}
 
-## Testez vos compétences !
+## Testez vos compétences&nbsp;!
 
 Testons vos nouvelles connaissances : en partant de l'exemple fourni plus bas :
 
diff --git a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md
index 855f04d88b..0d3e11cd3e 100644
--- a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md
+++ b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md
@@ -15,7 +15,7 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage
 ---
 {{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
 
-Le but de cette leçon est de développer votre compréhension des concepts les plus fondamentaux du CSS — la cascade, la spécificité et l'héritage — qui contrôlent la manière dont le CSS est appliqué au HTML et la manière dont les conflits sont résolus.
+Le but de cette leçon est de développer votre compréhension des concepts les plus fondamentaux du CSS — la cascade, la spécificité et l'héritage — qui contrôlent la manière dont le CSS est appliqué au HTML et la manière dont les conflits sont résolus.
 
 Bien que cette leçon puisse sembler moins pertinente dans l'immédiat et un peu plus académique que d'autres parties du cours, la compréhension de ces éléments vous épargnera bien des soucis plus tard ! Nous vous conseillons de parcourir attentivement cette section et de vérifier que vous avez bien compris les concepts avant de passer à la suite.
 
@@ -28,13 +28,13 @@ Bien que cette leçon puisse sembler moins pertinente dans l'immédiat et un peu
         <a
           href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base"
           >suite logicielle de base installée</a
-        >, compétences élémentaires pour <a
+        >, compétences élémentaires pour <a
           href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers"
           >travailler avec des fichiers</a
-        >, connaissance de base du HTML  (cf. <a
+        >, connaissance de base du HTML  (cf. <a
           href="/fr/docs/Apprendre/HTML/Introduction_à_HTML"
           >Introduction à HTML</a
-        >), et une idée de <a
+        >), et une idée de <a
           href="/fr/docs/Learn/CSS/First_steps/How_CSS_works"
           >Comment fonctionne CSS</a
         >.
@@ -52,30 +52,30 @@ Bien que cette leçon puisse sembler moins pertinente dans l'immédiat et un peu
 
 ## Règles contradictoires
 
-CSS est l'acronyme de **Cascading Style Sheets**, qu'on peut traduire par *feuilles de style en cascade* et la compréhension de ce premier mot *cascading* est cruciale — la façon dont la cascade se comporte est la clé de la compréhension du CSS.
+CSS est l'acronyme de **Cascading Style Sheets**, qu'on peut traduire par *feuilles de style en cascade* et la compréhension de ce premier mot *cascading* est cruciale — la façon dont la cascade se comporte est la clé de la compréhension du CSS.
 
-À un moment donné, vous travaillerez sur un projet et vous constaterez que le CSS que vous pensiez appliquer à un élément ne fonctionne pas. En général, le problème est que vous avez créé deux règles qui pourraient potentiellement s'appliquer au même élément. La **cascade**, et le concept étroitement lié de spécificité, sont des mécanismes qui contrôlent quelle règle s'applique lorsqu'il y a un tel conflit. La règle qui régit votre élément n'est peut-être pas celle à laquelle vous vous attendiez, vous devez donc comprendre comment ces mécanismes fonctionnent.
+À un moment donné, vous travaillerez sur un projet et vous constaterez que le CSS que vous pensiez appliquer à un élément ne fonctionne pas. En général, le problème est que vous avez créé deux règles qui pourraient potentiellement s'appliquer au même élément. La **cascade**, et le concept étroitement lié de spécificité, sont des mécanismes qui contrôlent quelle règle s'applique lorsqu'il y a un tel conflit. La règle qui régit votre élément n'est peut-être pas celle à laquelle vous vous attendiez, vous devez donc comprendre comment ces mécanismes fonctionnent.
 
-Le concept d'**héritage** est aussi à garder en tête dans ces situations : certaines propriétés CSS par défaut héritent de la valeur donnée à l'élément parent de l'élément courant, d'autres non. Cela peut être à l'origine de comportements inattendus.
+Le concept d'**héritage** est aussi à garder en tête dans ces situations : certaines propriétés CSS par défaut héritent de la valeur donnée à l'élément parent de l'élément courant, d'autres non. Cela peut être à l'origine de comportements inattendus.
 
 Commençons par examiner rapidement les éléments clés dont il est question, puis examinons chacun d'eux à tour de rôle et voyons comment ils interagissent entre eux et avec votre CSS. Cela peut sembler être un ensemble de concepts difficiles à comprendre. Cependant, à mesure que vous vous entraînerez à écrire des CSS, la façon dont ils fonctionnent deviendra plus évidente pour vous.
 
 ### La cascade
 
-À un niveau élémentaire, la **cascade** des styles signifie que l'ordre d'apparition des règles dans le CSS a une importance ; quand deux règles applicables ont la même spécificité, c'est la dernière déclarée qui sera utilisée pour la mise en forme.
+À un niveau élémentaire, la **cascade** des styles signifie que l'ordre d'apparition des règles dans le CSS a une importance ; quand deux règles applicables ont la même spécificité, c'est la dernière déclarée qui sera utilisée pour la mise en forme.
 
-Dans l'exemple ci-dessous deux règles pourraient s'appliquer à `h1`. Au final `h1` est coloré en bleu — ces règles ont les mêmes sélecteurs, elles ont donc la même spécificité ; dans ce cas, c'est la règle écrite en dernier dans le CSS qui l'emporte.
+Dans l'exemple ci-dessous deux règles pourraient s'appliquer à `h1`. Au final `h1` est coloré en bleu — ces règles ont les mêmes sélecteurs, elles ont donc la même spécificité ; dans ce cas, c'est la règle écrite en dernier dans le CSS qui l'emporte.
 
 {{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}}
 
 ### Spécificité
 
-Quand des règles avec des sélecteurs différents s'appliquent sur un même élément, le navigateur choisit la règle qui a la plus grande spécificité. La spécificité mesure essentiellement combien la sélection est précise :
+Quand des règles avec des sélecteurs différents s'appliquent sur un même élément, le navigateur choisit la règle qui a la plus grande spécificité. La spécificité mesure essentiellement combien la sélection est précise :
 
-- Un sélecteur d'élément est peu spécifique — il cible tous les éléments d'un type donné dans la page — son score est donc faible ;
-- Un sélecteur de classe est plus spécifique — dans la page, il ne cible que les éléments dont l'attribut `class` a la valeur choisie — son score est plus important.
+- Un sélecteur d'élément est peu spécifique — il cible tous les éléments d'un type donné dans la page — son score est donc faible ;
+- Un sélecteur de classe est plus spécifique — dans la page, il ne cible que les éléments dont l'attribut `class` a la valeur choisie — son score est plus important.
 
-Voyons cela sur un exemple. Ci-dessous, on retrouve deux règles qui pourraient s'appliquer à `h1`. Au final `h1` est coloré en rouge — le sélecteur de classe donne une plus grande spécificité à sa règle, et du coup c'est cette règle qui est choisie même si elle apparaît plus tôt dans le CSS.
+Voyons cela sur un exemple. Ci-dessous, on retrouve deux règles qui pourraient s'appliquer à `h1`. Au final `h1` est coloré en rouge — le sélecteur de classe donne une plus grande spécificité à sa règle, et du coup c'est cette règle qui est choisie même si elle apparaît plus tôt dans le CSS.
 
 {{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}}
 
@@ -83,72 +83,72 @@ Nous expliquerons le score de spécificité et d'autres points reliés un peu pl
 
 ### Héritage
 
-L'héritage est lui aussi à comprendre dans ce contexte — certaines valeurs pour une propriété CSS se transmettent des éléments parents vers leurs enfants, d'autres non.
+L'héritage est lui aussi à comprendre dans ce contexte — certaines valeurs pour une propriété CSS se transmettent des éléments parents vers leurs enfants, d'autres non.
 
-Par exemple, si vous fixez une `color` et une `font-family` pour un élément, tout élément contenu dans le premier sera mis en forme avec la même couleur et la même police, à moins qu'on lui ait appliqué directement des règles.
+Par exemple, si vous fixez une `color` et une `font-family` pour un élément, tout élément contenu dans le premier sera mis en forme avec la même couleur et la même police, à moins qu'on lui ait appliqué directement des règles.
 
 {{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}}
 
-Certaines propriétés ne se transmettent pas — par exemple si vous attribuez un {{cssxref("width")}} de 50% à un élément, aucun de ses descendants n'aura une largeur diminuée de moitié par rapport à celle de son parent. Si c'était le cas, l'usage de CSS serait particulièrement frustrant !
+Certaines propriétés ne se transmettent pas — par exemple si vous attribuez un {{cssxref("width")}} de 50% à un élément, aucun de ses descendants n'aura une largeur diminuée de moitié par rapport à celle de son parent. Si c'était le cas, l'usage de CSS serait particulièrement frustrant !
 
-> **Note :** Sur MDN, dans les pages de référence des propriétés CSS, vous trouverez des encarts d'information technique, le plus souvent au pied de la section de spécifications, dans lesquels sont listés nombre de données sur la propriété, notamment si elle est héritée ou non. Voir la [section des spécifications de la propriété color](/fr/docs/Web/CSS/color#Specifications), par exemple.
+> **Note :** Sur MDN, dans les pages de référence des propriétés CSS, vous trouverez des encarts d'information technique, le plus souvent au pied de la section de spécifications, dans lesquels sont listés nombre de données sur la propriété, notamment si elle est héritée ou non. Voir la [section des spécifications de la propriété color](/fr/docs/Web/CSS/color#Specifications), par exemple.
 
 ## Comprendre comment ces concepts se combinent
 
-Ces trois concepts combinés permettent de décider dans tous les cas quelle règle CSS s'applique à quel élément ; dans les sections ci-dessous nous les verrons en action, ensemble. Cela peut parfois sembler compliqué, mais avec l'expérience les choses vous sembleront plus claires, et de toute façon, si vous oubliez, vous pourrez toujours retrouver tous les détails ici !
+Ces trois concepts combinés permettent de décider dans tous les cas quelle règle CSS s'applique à quel élément&nbsp;; dans les sections ci-dessous nous les verrons en action, ensemble. Cela peut parfois sembler compliqué, mais avec l'expérience les choses vous sembleront plus claires, et de toute façon, si vous oubliez, vous pourrez toujours retrouver tous les détails ici !
 
 ## Comprendre l'héritage
 
-Commençons par l'héritage. Dans l'exemple ci-dessous nous avons un  {{HTMLElement("ul")}}, contenant plusieurs niveaux de listes imbriquées. Nous avons spécifié une bordure, un remplissage (`padding`) et une couleur de police pour la `<ul>` extérieure.
+Commençons par l'héritage. Dans l'exemple ci-dessous nous avons un  {{HTMLElement("ul")}}, contenant plusieurs niveaux de listes imbriquées. Nous avons spécifié une bordure, un remplissage (`padding`) et une couleur de police pour la `<ul>` extérieure.
 
-La couleur est transmise aux enfants directs, et aussi enfants indirects — les `<li>` de la première liste, et ceux de la première liste de deuxième niveau. Nous avons ensuite ajouté une classe `special` à la seconde liste imbriquée et nous lui appliquons une autre couleur. Cette dernière est transmise aux descendants.
+La couleur est transmise aux enfants directs, et aussi enfants indirects — les `<li>` de la première liste, et ceux de la première liste de deuxième niveau. Nous avons ensuite ajouté une classe `special` à la seconde liste imbriquée et nous lui appliquons une autre couleur. Cette dernière est transmise aux descendants.
 
 {{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}}
 
-Les propriétés telles que largeur (comme mentionnée plus haut), marges, remplissage, et bordures ne se transmettent pas par héritage. Si les bordures se transmettaient aux enfants de la liste, on obtiendrait un effet étrange !
+Les propriétés telles que largeur (comme mentionnée plus haut), marges, remplissage, et bordures ne se transmettent pas par héritage. Si les bordures se transmettaient aux enfants de la liste, on obtiendrait un effet étrange !
 
 Dans la plupart des cas, le sens commun permet de comprendre quelles propriétés sont héritées par défaut et quelles propriétés ne se transmettent pas.
 
-### Contrôler l'héritage
+### Contrôler l'héritage
 
-CSS propose quatre valeurs spéciales universelles pour contrôler l'héritage. Ces valeurs sont applicables à toute propriété CSS.
+CSS propose quatre valeurs spéciales universelles pour contrôler l'héritage. Ces valeurs sont applicables à toute propriété CSS.
 
 - {{cssxref("inherit")}}
-  - : La propriété correspondante prend la valeur définie dans l'élément parent. Dans les faits, cela "active l'héritage".
+  - : La propriété correspondante prend la valeur définie dans l'élément parent. Dans les faits, cela "active l'héritage".
 - {{cssxref("initial")}}
-  - : La propriété correspondante prend la valeur par défaut définie dans la feuille de style du navigateur. Si aucune valeur n'est définie par défaut dans le navigateur et que la propriété est transmise par héritage la propriété est redéfinie à `inherit`.
+  - : La propriété correspondante prend la valeur par défaut définie dans la feuille de style du navigateur. Si aucune valeur n'est définie par défaut dans le navigateur et que la propriété est transmise par héritage la propriété est redéfinie à `inherit`.
 - {{cssxref("unset")}}
-  - : Redéfinit la propriété à sa valeur naturelle : si la propriété est transmise par héritage, le comportement est le même que  `inherit`, sinon il est identique à `initial`.
+  - : Redéfinit la propriété à sa valeur naturelle : si la propriété est transmise par héritage, le comportement est le même que  `inherit`, sinon il est identique à `initial`.
 
-> **Note :** Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité.
+> **Note :** Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité.
 
-> **Note :** Voir {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} pour plus d'informations sur chacune de ces valeurs et comment elles fonctionnent.
+> **Note :** Voir {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} pour plus d'informations sur chacune de ces valeurs et comment elles fonctionnent.
 
-Voyons maintenant comment les valeurs universelles fonctionnent sur un exemple : une liste de liens. Dans l'exemple live ci-dessous, vous pourrez manipuler CSS et observer directement les effets de vos modifications. Jouer avec le code est vraiment le meilleur moyen pour progresser en HTML et CSS.
+Voyons maintenant comment les valeurs universelles fonctionnent sur un exemple : une liste de liens. Dans l'exemple live ci-dessous, vous pourrez manipuler CSS et observer directement les effets de vos modifications. Jouer avec le code est vraiment le meilleur moyen pour progresser en HTML et CSS.
 
 Par exemple :
 
-1.  Le deuxième item de la liste est dans la classe `my-class-1`. Cela définit la couleur de l'élément `<a>` qu'il contient à `inherit`. Si vous supprimez cette règle, quelle est la couleur du lien ?
+1.  Le deuxième item de la liste est dans la classe `my-class-1`. Cela définit la couleur de l'élément `<a>` qu'il contient à `inherit`. Si vous supprimez cette règle, quelle est la couleur du lien ?
 2.  Comprenez vous pourquoi les troisième et quatrième liens sont de la couleur qu'ils sont ? Dans la négative, relisez la description des valeurs spéciales ci-dessus.
-3.  Quels liens changeront de couleur si on redéfinit la couleur de l'élément  `<a>` — par exemple `a { color: red; }` ?
+3.  Quels liens changeront de couleur si on redéfinit la couleur de l'élément `<a>` — par exemple `a { color: red; }`&nbsp;?
 
 {{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}}
 
-### Réinitialiser la valeur de toutes les propriétés
+### Réinitialiser la valeur de toutes les propriétés
 
-En CSS, la propriété raccourci `all` peut être utilisée pour appliquer l'une des valeurs d'héritage à (presque) toutes les propriétés d'un coup. Elle peut prendre n'importe laquelle des valeurs d'héritage (`inherit`, `initial`, `unset`, ou `revert`). C'est un moyen pratique d'annuler les modifications apportées aux styles pour revenir à un point de départ connu avant de commencer de nouvelles modifications.
+En CSS, la propriété raccourci `all` peut être utilisée pour appliquer l'une des valeurs d'héritage à (presque) toutes les propriétés d'un coup. Elle peut prendre n'importe laquelle des valeurs d'héritage (`inherit`, `initial`, `unset`, ou `revert`). C'est un moyen pratique d'annuler les modifications apportées aux styles pour revenir à un point de départ connu avant de commencer de nouvelles modifications.
 
-Dans l'exemple ci-dessous, nous avons deux blocs de citations. Pour le premier, un style est appliqué à l'élément `<blockquote>` lui-même, le second `<blockquote>` appartient à une classe qui définit la valeur de `all` à `unset`.
+Dans l'exemple ci-dessous, nous avons deux blocs de citations. Pour le premier, un style est appliqué à l'élément `<blockquote>` lui-même, le second `<blockquote>` appartient à une classe qui définit la valeur de `all` à `unset`.
 
 {{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}}
 
-Essayez de donner à `all` l'une des autres valeurs possibles et observez les changements.
+Essayez de donner à `all` l'une des autres valeurs possibles et observez les changements.
 
-## Comprendre la cascade
+## Comprendre la cascade
 
-Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le `<body>`, et à partir des parties précédentes, nous comprenons comment changer la mise en forme d'un élément où qu'il soit dans le document — que ce soit par un sélecteur de type ou en créant une classe. Nous allons maintenant examiner comment la cascade détermine la règle CSS qui s'applique quand plusieurs règles ciblent le même élément.
+Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le `<body>`, et à partir des parties précédentes, nous comprenons comment changer la mise en forme d'un élément où qu'il soit dans le document — que ce soit par un sélecteur de type ou en créant une classe. Nous allons maintenant examiner comment la cascade détermine la règle CSS qui s'applique quand plusieurs règles ciblent le même élément.
 
-Il y a trois facteurs à prendre en compte, listés ci-dessous par ordre décroissant d'importance. Les premiers critères prennent le dessus sur ceux qui viennent après :
+Il y a trois facteurs à prendre en compte, listés ci-dessous par ordre décroissant d'importance. Les premiers critères prennent le dessus sur ceux qui viennent après :
 
 1.  **Importance**
 2.  **Spécificité**
@@ -156,34 +156,34 @@ Il y a trois facteurs à prendre en compte, listés ci-dessous par ordre décroi
 
 Passons les en revue en partant de la fin, pour voir comment les navigateurs déterminent quel CSS doit être appliqué.
 
-### Ordre d'apparition dans le source 
+### Ordre d'apparition dans le source
 
-Nous avons déjà vu comment l'ordre d'apparition dans le source compte dans la cascade. Si deux règles avec le même poids s'appliquent alors celle qui vient en dernier dans le CSS l'emporte. L'intuition est la suivante : plus on avance dans le CSS plus on s'approche de l'élément ciblé ; quand une règle le sélectionne, elle écrase la précédente jusqu'à la dernière règle rencontrée dans le source qui l'emporte et met en forme l'élément..
+Nous avons déjà vu comment l'ordre d'apparition dans le source compte dans la cascade. Si deux règles avec le même poids s'appliquent alors celle qui vient en dernier dans le CSS l'emporte. L'intuition est la suivante : plus on avance dans le CSS plus on s'approche de l'élément ciblé ; quand une règle le sélectionne, elle écrase la précédente jusqu'à la dernière règle rencontrée dans le source qui l'emporte et met en forme l'élément..
 
 ### Spécificité
 
-L'ordre des règles dans le source est important. On rencontre pourtant des situations où deux règles ciblent le même élément mais c'est la première écrite dans le source qui s'applique. C'est que la première règle a une **spécificité** plus élevée —  elle est plus spécifique, elle est donc choisie par le navigateur pour mettre en forme l'élément.
+L'ordre des règles dans le source est important. On rencontre pourtant des situations où deux règles ciblent le même élément mais c'est la première écrite dans le source qui s'applique. C'est que la première règle a une **spécificité** plus élevée —  elle est plus spécifique, elle est donc choisie par le navigateur pour mettre en forme l'élément.
 
-Comme nous l'avons vu plus haut dans cette leçon, un sélecteur de classe a plus de poids qu'un sélecteur d'élément, de sorte que les propriétés définies sur la classe remplaceront celles appliquées directement à l'élément.
+Comme nous l'avons vu plus haut dans cette leçon, un sélecteur de classe a plus de poids qu'un sélecteur d'élément, de sorte que les propriétés définies sur la classe remplaceront celles appliquées directement à l'élément.
 
-Un point important à noter : dans la cascade, on pourrait penser qu'une règle postérieure écrase une règle antérieure. En fait, ce n'est pas la règle toute entière qui est écrasée, mais seulement les propriétés communes aux deux règles qui sont redéfinies par la dernière version rencontrée.
+Un point important à noter : dans la cascade, on pourrait penser qu'une règle postérieure écrase une règle antérieure. En fait, ce n'est pas la règle toute entière qui est écrasée, mais seulement les propriétés communes aux deux règles qui sont redéfinies par la dernière version rencontrée.
 
-Ce comportement permet d'éviter la répétition dans votre CSS. Une pratique courante consiste à définir des styles génériques pour les éléments de base, puis à créer des classes pour les cas particuiers. Par exemple, dans la feuille de style ci-dessous, nous avons défini des styles génériques pour les titres de niveau 2, puis créé des classes qui ne modifient que certaines des propriétés et valeurs. Les valeurs définies initialement sont appliquées à tous les titres, puis les valeurs plus spécifiques sont appliquées seulement aux titres avec l'attribut classe.
+Ce comportement permet d'éviter la répétition dans votre CSS. Une pratique courante consiste à définir des styles génériques pour les éléments de base, puis à créer des classes pour les cas particuiers. Par exemple, dans la feuille de style ci-dessous, nous avons défini des styles génériques pour les titres de niveau 2, puis créé des classes qui ne modifient que certaines des propriétés et valeurs. Les valeurs définies initialement sont appliquées à tous les titres, puis les valeurs plus spécifiques sont appliquées seulement aux titres avec l'attribut classe.
 
 {{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}}
 
-Voyons maintenant comment le navigateur calcule la spécificité. Nous savons déjà qu'un sélecteur d'élément a une faible spécificité et peut être écrasé par une classe. Essentiellement, une valeur en points est attribuée à différents types de sélecteurs, et leur addition donne le poids de ce sélecteur particulier, qui peut ensuite être évalué par rapport à d'autres correspondances potentielles.
+Voyons maintenant comment le navigateur calcule la spécificité. Nous savons déjà qu'un sélecteur d'élément a une faible spécificité et peut être écrasé par une classe. Essentiellement, une valeur en points est attribuée à différents types de sélecteurs, et leur addition donne le poids de ce sélecteur particulier, qui peut ensuite être évalué par rapport à d'autres correspondances potentielles.
 
 Le score de spécificité d'un sélecteur est codé par quatre valeurs (ou composants) différentes, qui peuvent être considérées comme des milliers, des centaines, des dizaines et des unités — quatre chiffres simples dans quatre colonnes :
 
-1.  **Milliers** : ajouter 1 dans cette colonne si la déclaration apparaît dans un  {{htmlattrxref("style")}} , (style inline). De telles déclarations n'ont pas de sélecteurs, leur spécificité est toujours simplement 1000.
-2.  **Centaines** : ajouter 1 dans cette colonne pour chaque sélecteur d'ID contenu à l'intérieur du sélecteur global.
-3.  **Dizaines** : ajouter 1 dans cette colonne pour chaque sélecteur de classe, d'attribut ou de pseudo-classe contenu à l'intérieur du sélecteur global.
-4.  **Unités** : ajouter 1 dans cette colonne pour chaque sélecteur d'élément ou pseudo-élément contenu à l'intérieur du sélecteur global.
+1.  **Milliers**&nbsp;: ajouter 1 dans cette colonne si la déclaration apparaît dans un {{htmlattrxref("style")}} , (style inline). De telles déclarations n'ont pas de sélecteurs, leur spécificité est toujours simplement 1000.
+2.  **Centaines**&nbsp;: ajouter 1 dans cette colonne pour chaque sélecteur d'ID contenu à l'intérieur du sélecteur global.
+3.  **Dizaines**&nbsp;: ajouter 1 dans cette colonne pour chaque sélecteur de classe, d'attribut ou de pseudo-classe contenu à l'intérieur du sélecteur global.
+4.  **Unités**&nbsp;: ajouter 1 dans cette colonne pour chaque sélecteur d'élément ou pseudo-élément contenu à l'intérieur du sélecteur global.
 
-> **Note :** Le sélecteur  universel (`*`), les combinateurs (`+`, `>`, `~`, ' '), et la pseudo-class de négation (`:not`) n'affectent en rien la spécificité.
+> **Note :** Le sélecteur universel (`*`), les combinateurs (`+`, `>`, `~`, ' '), et la pseudo-class de négation (`:not`) n'affectent en rien la spécificité.
 
-Le tableau suivant montre quelques exemples isolés pour vous mettre dans l'ambiance. Assurez-vous de comprendre dans chaque cas la spécificité annoncée. Nous n'avons pas encore couvert les sélecteurs en détail, mais vous pouvez trouver les informations à propos de chaque sélecteur sur la [référence MDN des sélecteurs](/fr/docs/Web/CSS/CSS_Selectors).
+Le tableau suivant montre quelques exemples isolés pour vous mettre dans l'ambiance. Assurez-vous de comprendre dans chaque cas la spécificité annoncée. Nous n'avons pas encore couvert les sélecteurs en détail, mais vous pouvez trouver les informations à propos de chaque sélecteur sur la [référence MDN des sélecteurs](/fr/docs/Web/CSS/CSS_Selectors).
 
 | Sélecteur                                                                                               | Milliers | Centaines | Dizaines | Unités | Spécificité |
 | ------------------------------------------------------------------------------------------------------- | -------- | --------- | -------- | ------ | ----------- |
@@ -191,7 +191,7 @@ Le tableau suivant montre quelques exemples isolés pour vous mettre dans l'ambi
 | `h1 + p::first-letter`                                                                                  | 0        | 0         | 0        | 3      | 0003        |
 | `li > a[href*="fr"] > .inline-warning`                                                                  | 0        | 0         | 2        | 2      | 0022        |
 | `#identifiant`                                                                                          | 0        | 1         | 0        | 0      | 0100        |
-| pas de sélecteurs, la règle est déclarée dans l'attribut {{htmlattrxref("style")}} d'un élément  | 1        | 0         | 0        | 0      | 1000        |
+| pas de sélecteurs, la règle est déclarée dans l'attribut {{htmlattrxref("style")}} d'un élément  | 1        | 0         | 0        | 0      | 1000        |
 
 Avant de continuer, regardons un exemple en action.
 
@@ -199,38 +199,38 @@ Avant de continuer, regardons un exemple en action.
 
 Alors qu'est-ce qui se passe ici ? Tout d'abord, nous ne sommes intéressés que par les sept premières règles de cet exemple, et comme vous le remarquerez, nous avons inclus leurs valeurs de spécificité dans un commentaire avant chacune.
 
-- Les deux premiers sélecteurs se disputent le style de la couleur d'arrière-plan du lien — le deux gagne et rend la couleur d'arrière-plan bleue car il a un sélecteur d'ID supplémentaire : sa spécificité est de 201 contre 101 pour le sélecteur un.
-- Les sélecteurs trois et quatre se disputent le style de la couleur du texte du lien — le quatre gagne et rend le texte blanc car bien qu'il ait un sélecteur d'élément en moins, le sélecteur manquant est remplacé par un sélecteur de classe, qui vaut dix au lieu de un. La spécificité gagnante est donc de 113 contre 104.
-- Les sélecteurs cinq, six et sept se disputent le style de la bordure du lien en survol. Le six perd clairement devant le cinq avec une spécificité de 23 contre 24 — il a un sélecteur d'éléments en moins dans la chaîne. Le sept, cependant, bat à la fois cinq et six — il a le même nombre de sous-sélecteurs dans la chaîne que cinq, mais un sélectecur d'élément a été échangé contre un sélecteur de classe. La spécificité gagnante est donc de 33 contre 23 et 24.
+- Les deux premiers sélecteurs se disputent le style de la couleur d'arrière-plan du lien — le deux gagne et rend la couleur d'arrière-plan bleue car il a un sélecteur d'ID supplémentaire&nbsp;: sa spécificité est de 201 contre 101 pour le sélecteur un.
+- Les sélecteurs trois et quatre se disputent le style de la couleur du texte du lien — le quatre gagne et rend le texte blanc car bien qu'il ait un sélecteur d'élément en moins, le sélecteur manquant est remplacé par un sélecteur de classe, qui vaut dix au lieu de un. La spécificité gagnante est donc de 113 contre 104.
+- Les sélecteurs cinq, six et sept se disputent le style de la bordure du lien en survol. Le six perd clairement devant le cinq avec une spécificité de 23 contre 24 — il a un sélecteur d'éléments en moins dans la chaîne. Le sept, cependant, bat à la fois cinq et six — il a le même nombre de sous-sélecteurs dans la chaîne que cinq, mais un sélectecur d'élément a été échangé contre un sélecteur de classe. La spécificité gagnante est donc de 33 contre 23 et 24.
 
-> **Note :** Cet exemple est simplificateur. En fait, chaque type de sélecteur voit sa spécificité comptée à un niveau qui lui est propre, qui ne peut pas être dépassé par des sélecteurs d'un type avec une spécificité moindre. Par exemple, un *million* de sélecteurs de **class** combinés ne prendront jamais le dessus sur *un* sélecteur d'**id**.
+> **Note :** Cet exemple est simplificateur. En fait, chaque type de sélecteur voit sa spécificité comptée à un niveau qui lui est propre, qui ne peut pas être dépassé par des sélecteurs d'un type avec une spécificité moindre. Par exemple, un *million* de sélecteurs de **class** combinés ne prendront jamais le dessus sur *un* sélecteur d'**id**.
 >
 > Une manière plus précise d'évaluer la spécificité serait de noter individuellement les niveaux de spécificité en commençant par le plus élevé et en passant au plus bas si nécessaire. Ce n'est que lorsqu'il existe un lien entre les scores des sélecteurs au sein d'un niveau de spécificité que vous devez évaluer le niveau suivant ; sinon, vous pouvez ignorer les sélecteurs de niveau de spécificité inférieur car ils ne peuvent jamais écraser les niveaux de spécificité supérieurs.
 
 ### !important
 
-Vous pouvez annuler tous les calculs ci-dessus à l'aide de la valeur CSS spéciale  `!important` mais vous devez être très prudent avec son utilisation. Ce mot-clé est utilisé pour donner la plus grande spécificité à la propriété à laquelle il s'applique, remplaçant ainsi les règles normales de la cascade.
+Vous pouvez annuler tous les calculs ci-dessus à l'aide de la valeur CSS spéciale  `!important` mais vous devez être très prudent avec son utilisation. Ce mot-clé est utilisé pour donner la plus grande spécificité à la propriété à laquelle il s'applique, remplaçant ainsi les règles normales de la cascade.
 
 Jetez un œil à cet exemple : nous avons deux paragraphes, dont l'un a un ID.
 
 {{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}}
 
-Regardons ça d'un peu plus près pour mieux comprendre — si vous avez du mal à suivre, supprimez telle ou telle déclaration pour voir ce qui se passe.
+Regardons ça d'un peu plus près pour mieux comprendre — si vous avez du mal à suivre, supprimez telle ou telle déclaration pour voir ce qui se passe.
 
-1.  Vous verrez que les valeurs de couleur et de remplissage de la troisième règle ont été appliquées, mais pas la couleur d'arrière-plan. Pourquoi ? On pourrait penser que les trois déclarations s'appliquent, puisque la règle en question, venant plus tard dans le code source, prend le dessus sur les règles antérieures.
-2.  Mais rappelez vous, les sélecteurs de classe sont plus spécifiques !
-3.  Les deux éléments sont dans la classe `better`, mais le deuxième a aussi l'{{htmlattrxref("id")}}  `winning`. Étant donné que les ID ont une spécificité encore plus élevée que les classes (sur une page, pour une ID donnée, il y a un seul élément,  alors qu'on peut trouver de nombreux éléments dans la même classe — les sélecteurs d'ID sont donc très spécifiques dans ce qu'ils ciblent), le deuxième élément aura une couleur d'arrière-plan rouge et une bordure noire de 1 px ; pour le premier élément, la couleur d'arrière-plan sera grise, sans bordure, comme spécifié par la classe.
-4.  Le deuxième élément a un arrière-plan rouge, mais pas de bordure. Pourquoi ? En raison de la déclaration `!important` dans la deuxième règle — écrit après  `border: none`,  ce mot-clé signifie que cette déclaration l'emporte sur le `border` définie dans la règle précédente, même si l'ID a une spécificité plus élevée.
+1.  Vous verrez que les valeurs de couleur et de remplissage de la troisième règle ont été appliquées, mais pas la couleur d'arrière-plan. Pourquoi ? On pourrait penser que les trois déclarations s'appliquent, puisque la règle en question, venant plus tard dans le code source, prend le dessus sur les règles antérieures.
+2.  Mais rappelez vous, les sélecteurs de classe sont plus spécifiques !
+3.  Les deux éléments sont dans la classe `better`, mais le deuxième a aussi l'{{htmlattrxref("id")}}  `winning`. Étant donné que les ID ont une spécificité encore plus élevée que les classes (sur une page, pour une ID donnée, il y a un seul élément,  alors qu'on peut trouver de nombreux éléments dans la même classe — les sélecteurs d'ID sont donc très spécifiques dans ce qu'ils ciblent), le deuxième élément aura une couleur d'arrière-plan rouge et une bordure noire de 1 px ; pour le premier élément, la couleur d'arrière-plan sera grise, sans bordure, comme spécifié par la classe.
+4.  Le deuxième élément a un arrière-plan rouge, mais pas de bordure. Pourquoi ? En raison de la déclaration `!important` dans la deuxième règle — écrit après  `border: none`,  ce mot-clé signifie que cette déclaration l'emporte sur le `border` définie dans la règle précédente, même si l'ID a une spécificité plus élevée.
 
-> **Note :** La seule façon de dépasser cette déclaration  `!important` serait d'ajouter un `!important` dans une déclaration de même *spécificité* apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande.
+> **Note :** La seule façon de dépasser cette déclaration `!important` serait d'ajouter un `!important` dans une déclaration de même *spécificité* apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande.
 
-Il est utile de connaître  `!important` , ne serait-ce que pour le reconnaître dans le code des autres. **Cependant, nous vous recommandons fortement de ne jamais l'utiliser, sauf en dernier recours.** `!important` modifie le fonctionnement normal de la cascade, de sorte qu'il peut être très difficile de résoudre les problèmes de débogage CSS, en particulier dans une grande feuille de style.
+Il est utile de connaître `!important`, ne serait-ce que pour le reconnaître dans le code des autres. **Cependant, nous vous recommandons fortement de ne jamais l'utiliser, sauf en dernier recours.** `!important` modifie le fonctionnement normal de la cascade, de sorte qu'il peut être très difficile de résoudre les problèmes de débogage CSS, en particulier dans une grande feuille de style.
 
-Lorsque vous travaillez sur un CMS où vous ne pouvez pas modifier les modules CSS de base et que vous souhaitez malgré tout remplacer un style, vous serez peut être amené à utiliser `!important`. Mais vraiment, si vous pouvez l'éviter, ne l'utilisez pas.
+Lorsque vous travaillez sur un CMS où vous ne pouvez pas modifier les modules CSS de base et que vous souhaitez malgré tout remplacer un style, vous serez peut être amené à utiliser `!important`. Mais vraiment, si vous pouvez l'éviter, ne l'utilisez pas.
 
 ## Où sont écrites les règles CSS
 
-Enfin, il est également utile de noter que l'importance d'une déclaration CSS dépend de la feuille de style dans laquelle elle est spécifiée — il est possible pour les utilisateurs de définir des feuilles de style personnalisées pour remplacer les styles du développeur, par exemple si un utilisateur est malvoyant, il peut vouloir doubler la taille de la police sur toutes les pages web visitées afin de faciliter la lecture.
+Enfin, il est également utile de noter que l'importance d'une déclaration CSS dépend de la feuille de style dans laquelle elle est spécifiée — il est possible pour les utilisateurs de définir des feuilles de style personnalisées pour remplacer les styles du développeur, par exemple si un utilisateur est malvoyant, il peut vouloir doubler la taille de la police sur toutes les pages web visitées afin de faciliter la lecture.
 
 ## En résumé
 
@@ -239,24 +239,24 @@ Les déclarations en conflit seront appliquées dans l'ordre suivant, les décla
 1.  Déclarations dans les feuilles de style de l'agent utilisateur (par exemple, les styles par défaut du navigateur, utilisés lorsqu'aucun autre style n'est défini).
 2.  Déclarations normales dans les feuilles de style utilisateur (styles personnalisés définis par un utilisateur).
 3.  Déclarations normales dans les feuilles de style d'auteur (ce sont les styles définis par nous, les développeurs web).
-4.  Déclarations `!important` dans les feuilles de style d'auteur.
-5.  Déclarations `!important` dans les feuilles de style utilisateur.
+4.  Déclarations `!important` dans les feuilles de style d'auteur.
+5.  Déclarations `!important` dans les feuilles de style utilisateur.
 
-Il est logique que les feuilles de style des développeurs web remplacent les feuilles de style utilisateur, de sorte que la conception peut être conservée comme prévu, mais parfois, les utilisateurs ont de bonnes raisons de remplacer les styles des développeur web, comme mentionné ci-dessus — cela peut être réalisé en utilisant `!important` dans leurs règles.
+Il est logique que les feuilles de style des développeurs web remplacent les feuilles de style utilisateur, de sorte que la conception peut être conservée comme prévu, mais parfois, les utilisateurs ont de bonnes raisons de remplacer les styles des développeur web, comme mentionné ci-dessus — cela peut être réalisé en utilisant `!important` dans leurs règles.
 
-## Activité : jouer dans la cascade
+## Activité&nbsp;: jouer dans la cascade
 
-Dans cette activité, nous vous engageons à tenter l'expérience suivante : écrire une règle redéfinissant les couleurs de police et de fond pour les liens par défaut. La contrainte est de réinitialiser la couleur d'arrière-plan en blanc sans utiliser de valeur `<color>`. Vous pouvez par contre utiliser l'une des valeurs spéciales que nous avons examinées dans la section {{anch("Contrôler_lhéritage")}} dans une nouvelle règle.
+Dans cette activité, nous vous engageons à tenter l'expérience suivante : écrire une règle redéfinissant les couleurs de police et de fond pour les liens par défaut. La contrainte est de réinitialiser la couleur d'arrière-plan en blanc sans utiliser de valeur `<color>`. Vous pouvez par contre utiliser l'une des valeurs spéciales que nous avons examinées dans la section {{anch("Contrôler_lhéritage")}} dans une nouvelle règle.
 
-Si vous faites une erreur, vous pouvez toujours remettre à zéro l'exemple live à l'aide du bouton <kbd>Reset</kbd>. Si vous êtes vraiment coincé, [jetez un coup d'œil à la solution ici](https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-cascade).
+Si vous faites une erreur, vous pouvez toujours remettre à zéro l'exemple live à l'aide du bouton <kbd>Reset</kbd>. Si vous êtes vraiment coincé, [jetez un coup d'œil à la solution ici](https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-cascade).
 
 {{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}}
 
 ## À suivre
 
-Si vous avez compris cet article, alors, bravo — vous commencez à appréhender les mécanismes fondamentaux de CSS. L'étape suivante est une étude détaillée des sélecteurs.
+Si vous avez compris cet article, alors, bravo — vous commencez à appréhender les mécanismes fondamentaux de CSS. L'étape suivante est une étude détaillée des sélecteurs.
 
-Si la cascade, la spécificité et l'héritage gardent encore de leur mystère, pas de panique ! C'est vraiment le point le plus compliqué qu'on ait abordé depuis le début de ce cours, et même les web developers professionnels s'y cassent parfois les dents. Notre avis : poursuivez le cours et revenez régulièrement lire cet article, continuez à y réfléchir.
+Si la cascade, la spécificité et l'héritage gardent encore de leur mystère, pas de panique&nbsp;! C'est vraiment le point le plus compliqué qu'on ait abordé depuis le début de ce cours, et même les web developers professionnels s'y cassent parfois les dents. Notre avis : poursuivez le cours et revenez régulièrement lire cet article, continuez à y réfléchir.
 
 En particulier quand vous rencontrez des comportements étranges où vos règles de style ne s'appliquent pas, revenez ici. Ce pourrait être un problème de spécificité.
 
diff --git a/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md
index 8af917335c..3b7ac09892 100644
--- a/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md
+++ b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md
@@ -31,7 +31,7 @@ Si vous voulez faire bonne impression, écrire une lettre sur un beau papier à
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Tester votre compréhension du modèle de boîte CSS et toutes les
         fonctionnalités associées comme l'implémentation d'arrière‑plans.
@@ -42,21 +42,21 @@ Si vous voulez faire bonne impression, écrire une lettre sur un beau papier à
 
 ## Départ
 
-Pour débuter cet exercice, vous devez :
+Pour débuter cet exercice, vous devez&nbsp;:
 
-- faire une copie locale du [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html) et de la [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css) — enregistrez‑les sous les noms  `index.html` et `style.css` dans un nouveau répertoire.
-- enregistrer des copies locales des images d'[en‑tête](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png), [pied de page](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png) et  [logo](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png) dans le même répertoire que les fichiers de code.
+- faire une copie locale du [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html) et de la [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css) — enregistrez‑les sous les noms  `index.html` et `style.css` dans un nouveau répertoire.
+- enregistrer des copies locales des images d'[en‑tête](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png), [pied de page](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png) et  [logo](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png) dans le même répertoire que les fichiers de code.
 
-> **Note :** Autrement, vous pouvez utiliser un site comme  [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément `<style>` dans l'élément `head` du document.
+> **Note :** Autrement, vous pouvez utiliser un site comme  [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément `<style>` dans l'élément `head` du document.
 
 ## Résumé du projet
 
-Vous avez les fichiers nécessaires à la création d'un modèle de papier à en-tête. Rassemblez les dossiers. Il  faut :
+Vous avez les fichiers nécessaires à la création d'un modèle de papier à en-tête. Rassemblez les dossiers. Il faut :
 
 ### La lettre
 
 - appliquer la CSS au HTML,
-- ajouter à la lettre une déclaration `background` qui :
+- ajouter à la lettre une déclaration `background` qui&nbsp;:
 
   - place l'image haute en en‑tête de lettre
   - place l'image basse en pied de lettre
@@ -79,7 +79,7 @@ Vous avez les fichiers nécessaires à la création d'un modèle de papier à en
 
 ## Exemple
 
-Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera :
+Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera&nbsp;:
 
 ![](letterhead.png)
 
@@ -87,7 +87,7 @@ Voici une capture d'écran affichant un exemple de ce à quoi le dessin final re
 
 ## Évaluation
 
-Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abord, il n'y rien à gagner en trichant !
+Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abord, il n'y rien à gagner en trichant !
 
 {{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}
 
@@ -95,7 +95,7 @@ Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvo
 
 ## Dans ce module
 
-- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap)
+- [Le modèle de boîte&nbsp;: récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap)
 - [Arrière-plans](/fr/Apprendre/CSS/styliser_boites/Backgrounds)
 - [Encadrements](/fr/docs/Apprendre/CSS/styliser_boites/Borders)
 - [Mise en page des tableaux](/fr/Apprendre/CSS/styliser_boites/Styling_tables)
diff --git a/files/fr/learn/css/building_blocks/debugging_css/index.md b/files/fr/learn/css/building_blocks/debugging_css/index.md
index 0ce7d1dc55..33d31ff5dc 100644
--- a/files/fr/learn/css/building_blocks/debugging_css/index.md
+++ b/files/fr/learn/css/building_blocks/debugging_css/index.md
@@ -128,7 +128,7 @@ Above that in the stylesheet however is a rule with a `.special` selector:
 }
 ```
 
-As you will recall from the lesson on [cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet.
+As you will recall from the lesson on [cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet.
 
 **Inspect the `<em>` with the class of `.special` and DevTools will show you that orange is the color that applies, and also shows you the `color` property applied to the em crossed out. You can now see that the class is overriding the element selector.**
 
diff --git a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md
index a0a87e37ce..d7cd059601 100644
--- a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md
+++ b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md
@@ -55,8 +55,8 @@ Construction de base :
 
 - Au préalable, créez un nouveau fichier dans le même répertoire que celui des fichiers HTML et image. Nommez‑le avec beaucoup d'imagination quelque chose comme `style.css`.
 - Liez la CSS à votre fichier HTML par l'intermédiaire d'un élément `<link>`.
-- Les deux premières règles du fichier de ressources de la CSS sont pour vous, GRATUITEMENT ! Après vous être réjoui de votre chance, copiez et collez-les au haut  de votre nouveau fichier CSS. Utilisez-les comme un test pour vous assurer que la CSS sera correctement appliquée à votre HTML.
-- Au-dessus des deux règles, commentez la CSS d'un court texte pour indiquer qu'il s'agit de styles généraux pour l'ensemble de la page. « Styles généraux pour la page »  fait l'affaire. Ajoutez également trois autres commentaires au bas du fichier CSS pour indiquer les styles spécifiques à la configuration du conteneur de carte, les styles propres de l'en-tête et du pied de page et les styles dédiés au contenu principal de la carte de visite. A partir de maintenant, les styles ajoutés à la CSS devront être placés à l'endroit approprié.
+- Les deux premières règles du fichier de ressources de la CSS sont pour vous, GRATUITEMENT ! Après vous être réjoui de votre chance, copiez et collez-les au haut de votre nouveau fichier CSS. Utilisez-les comme un test pour vous assurer que la CSS sera correctement appliquée à votre HTML.
+- Au-dessus des deux règles, commentez la CSS d'un court texte pour indiquer qu'il s'agit de styles généraux pour l'ensemble de la page. « Styles généraux pour la page »  fait l'affaire. Ajoutez également trois autres commentaires au bas du fichier CSS pour indiquer les styles spécifiques à la configuration du conteneur de carte, les styles propres de l'en-tête et du pied de page et les styles dédiés au contenu principal de la carte de visite. A partir de maintenant, les styles ajoutés à la CSS devront être placés à l'endroit approprié.
 
 Considérations sur les sélecteurs et les jeux de règles founis dans le fichier des ressources CSS :
 
@@ -65,14 +65,14 @@ Considérations sur les sélecteurs et les jeux de règles founis dans le fichie
 
   - entre autres choses, le conteneur de carte principale ait une largeur et une hauteur fixes, une couleur de fond unie, un encadrement et un rayon d'encadrement (des coins arrondis !).
   - l'en‑tête ait un gradient d'arrière‑plan allant du plus soutenu au plus léger, plus des coins arrondis correspondant à ceux du conteneur de la carte principale.
-  - le pied ait un  gradient d'arrière‑plan allant du plus léger au plus soutenu, plus des coins arrondis correspondant à ceux du conteneur de la carte principale.
+  - le pied ait un gradient d'arrière‑plan allant du plus léger au plus soutenu, plus des coins arrondis correspondant à ceux du conteneur de la carte principale.
   - l'image soit placée sur la droite de façon à toucher le côté droit du contenu de la carte de visite en lui donnant une hauteur maximale de 100% (une astuce assurant qu'elle aura toujours la même hauteur que son conteneur parent, quelle que soit la hauteur qu'on lui donne).
 
 - Attention ! Il y a deux erreurs dans les règles fournies. En utilisant n'importe quelle technique connue, repérez-les et corrigez-les avant de poursuivre.
 
 Nouveaux jeux de règles à écrire :
 
-- Écrire un jeu de règles ciblant à la fois l'en-tête et le pied de page de la carte pour leur  donner une hauteur totale calculée de 50px ( y compris une hauteur de contenu de 30px et un remplissage de 10px sur tous les côtés). Mais exprimez‑le en `em`.
+- Écrire un jeu de règles ciblant à la fois l'en-tête et le pied de page de la carte pour leur donner une hauteur totale calculée de 50px ( y compris une hauteur de contenu de 30px et un remplissage de 10px sur tous les côtés). Mais exprimez‑le en `em`.
 - La marge par défaut appliquée aux éléments \<h2> et \<p> par le navigateur interfère avec la composition, alors écrivez une règle ciblant tous ces éléments et fixant leur marge à 0.
 - Pour éviter que l'image ne déborde du contenu principal de la carte de visite (l'élément `<article>`), nous devons lui donner une hauteur spécifique. Réglez la hauteur de `<article>` à 120px, mais exprimez‑la en `em`. Donnez-lui aussi une couleur de fond de noir semi-transparent, ce qui donne une nuance légèrement plus foncée qui permet à la couleur rouge de l'arrière-plan de briller un peu aussi.
 - Écrivez un jeu de règles qui donne à `<h2>` une taille de police effective de 20px (mais exprimée en `em`) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu de l'en-tête. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne.
@@ -101,7 +101,7 @@ La capture d'écran suivante montre un exemple de ce à quoi devrait ressembler
 
 ## Évaluation
 
-Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  [le fil de discussion à propos de cet exercise](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abors, il n'y rien à gagner en trichant !
+Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  [le fil de discussion à propos de cet exercise](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abors, il n'y rien à gagner en trichant !
 
 {{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}
 
diff --git a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md
index 3be45a5e6a..8cd18fac1f 100644
--- a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md
+++ b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md
@@ -13,7 +13,7 @@ Ces dernières années cependant, le CSS a évolué pour supporter du contenu or
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Notions informatiques de base,
         <a
@@ -30,7 +30,7 @@ Ces dernières années cependant, le CSS a évolué pour supporter du contenu or
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>Comprendre l'importance des modes d'écriture pour le CSS moderne.</td>
     </tr>
   </tbody>
@@ -44,23 +44,23 @@ Dans l'exemple ci-dessous nous avons un titre affiché qui utilise `writing-mode
 
 {{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}
 
-Les trois valeurs possibles pour la propriété [`writing-mode`](/fr/docs/Web/CSS/writing-mode) sont :
+Les trois valeurs possibles pour la propriété [`writing-mode`](/fr/docs/Web/CSS/writing-mode) sont&nbsp;:
 
-- `horizontal-tb` : Direction de bloc allant du haut vers le bas, les phrases sont écrites horizontalement.
-- `vertical-rl` : Direction de bloc allant de droite à gauche, les phrases sont écrites verticalement.
-- `vertical-lr` : Direction de bloc allant de gauche à droite, les phrases sont écrites verticalement.
+- `horizontal-tb`&nbsp;: Direction de bloc allant du haut vers le bas, les phrases sont écrites horizontalement.
+- `vertical-rl`&nbsp;: Direction de bloc allant de droite à gauche, les phrases sont écrites verticalement.
+- `vertical-lr`&nbsp;: Direction de bloc allant de gauche à droite, les phrases sont écrites verticalement.
 
 La propriété `writing-mode` définit d'abord la direction selon laquelle les éléments de bloc sont affichés sur la page : de haut en bas, de droite à gauche ou de gauche à droite. Elle indique ensuite la direction selon laquelle le texte est écrit au sein des phrases.
 
 ## Modes d'écriture et disposition en bloc ou en ligne
 
-Nous avons déjà abordé [la disposition en ligne et en bloc](/fr/docs/Learn/CSS/Building_blocks/The_box_model#block_and_inline_boxes) et le fait que certains éléments s'affichent en bloc et d'autres en ligne. Dans les descriptions précédentes, on voit que le caractère « de bloc » ou « en ligne » est lié au mode d'écriture du document et pas à l'écran, physique. Les blocs sont uniquement affichés de haut en bas sur la page si on utilise un mode d'écriture qui organise le texte horizontalement, comme celui utilisé pour le français.
+Nous avons déjà abordé [la disposition en ligne et en bloc](/fr/docs/Learn/CSS/Building_blocks/The_box_model#block_and_inline_boxes) et le fait que certains éléments s'affichent en bloc et d'autres en ligne. Dans les descriptions précédentes, on voit que le caractère «&nbsp;de bloc&nbsp;» ou «&nbsp;en ligne&nbsp;» est lié au mode d'écriture du document et pas à l'écran, physique. Les blocs sont uniquement affichés de haut en bas sur la page si on utilise un mode d'écriture qui organise le texte horizontalement, comme celui utilisé pour le français.
 
 Prenons un exemple pour éclaircir tout ça. Ici, on a deux boîtes qui contiennent un titre et un paragraphe. La première boîte utilise `writing-mode: horizontal-tb`, c'est-à-dire un mode d'écriture où le texte est écrit horizontalement et où le contenu s'organise du haut de la page vers le bas. La deuxième boîte utilise `writing-mode: vertical-rl`, c'est-à-dire un mode d'écriture où le texte est écrit verticalement et où le contenu va de droite à gauche.
 
 {{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}
 
-Lorsqu'on change de mode d'écriture, on change la direction utilisée pour l'axe de bloc et celle pour l'axe en ligne. Avec un mode d'écriture `horizontal-tb`, la direction de bloc va de haut en bas  avec un mode d'écriture `vertical-rl`, la direction de bloc va de droite à gauche. Ainsi, la **dimension de bloc** correspond toujours à la direction selon laquelle les blocs sont affichés sur la page pour le mode d'écriture utilisé. La **dimension en ligne** correspond toujours à la direction selon laquelle les phrases sont écrites.
+Lorsqu'on change de mode d'écriture, on change la direction utilisée pour l'axe de bloc et celle pour l'axe en ligne. Avec un mode d'écriture `horizontal-tb`, la direction de bloc va de haut en bas avec un mode d'écriture `vertical-rl`, la direction de bloc va de droite à gauche. Ainsi, la **dimension de bloc** correspond toujours à la direction selon laquelle les blocs sont affichés sur la page pour le mode d'écriture utilisé. La **dimension en ligne** correspond toujours à la direction selon laquelle les phrases sont écrites.
 
 Ce schéma illustre les deux dimensions pour un mode d'écriture horizontal.
 
@@ -74,7 +74,7 @@ Lorsqu'on commence à travailler sur des dispositions CSS, notamment avec les m�
 
 ### Direction
 
-En plus des modes d'écriture, il existe également la direction du texte. Comme mentionné avant, certaines langues comme l'arabe sont écrites horizontalement mais de droite à gauche. Il ne s'agit probablement pas là d'un aspect qui sera utilisé à des fins artistiques (si on souhaite aligner quelque chose à droite, il existe d'autres façons de faire) mais il est important de comprendre que cela fait partie de la nature de CSS. Le Web ne concerne pas uniquement les langues écrites de gauches à droite !
+En plus des modes d'écriture, il existe également la direction du texte. Comme mentionné avant, certaines langues comme l'arabe sont écrites horizontalement mais de droite à gauche. Il ne s'agit probablement pas là d'un aspect qui sera utilisé à des fins artistiques (si on souhaite aligner quelque chose à droite, il existe d'autres façons de faire) mais il est important de comprendre que cela fait partie de la nature de CSS. Le Web ne concerne pas uniquement les langues écrites de gauches à droite&nbsp;!
 
 Étant donné que les modes d'écritures et les directions du texte peuvent varier, les nouvelles méthodes de disposition CSS ne font pas référence à la gauche, la droite, le haut ou le bas. À la place, elles utilisent les notions de _début_ et de _fin_, combinées aux notions bloc et en ligne. Ne vous souciez pas trop de ça pour le moment, mais gardez ces idées en tête lorsque vous verrez ces notions pour les méthodes de disposition, cela vous sera utile pour une bonne compréhension de CSS.
 
@@ -82,15 +82,15 @@ En plus des modes d'écriture, il existe également la direction du texte. Comme
 
 Nous abordons maintenant les modes d'écriture et la direction du texte maintenant, car les propriétés que nous avons vues jusqu'à présent étaient plutôt liées aux dimensions physiques de l'écran et à un mode d'écriture horizontal.
 
-Reprenons nos deux boîtes : celle avec le mode d'écriture `horizontal-tb` et celle avec le mode d'écriture `vertical-rl`. Pour ces deux boîtes, on a défini [`width`](/fr/docs/Web/CSS/width). Pour la boîte avec le mode d'écriture vertical, cela provoque un dépassement du texte.
+Reprenons nos deux boîtes&nbsp;: celle avec le mode d'écriture `horizontal-tb` et celle avec le mode d'écriture `vertical-rl`. Pour ces deux boîtes, on a défini [`width`](/fr/docs/Web/CSS/width). Pour la boîte avec le mode d'écriture vertical, cela provoque un dépassement du texte.
 
 {{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}
 
-Ce qu'on veut plus probablement dans ce scénario, c'est de passer de la largeur à la hauteur selon le mode d'écriture : quand on utilise un mode d'écriture vertical, on souhaite que la boîte soit redimensionnée selon l'axe de bloc, comme pour le mode horizontal.
+Ce qu'on veut plus probablement dans ce scénario, c'est de passer de la largeur à la hauteur selon le mode d'écriture&nbsp;: quand on utilise un mode d'écriture vertical, on souhaite que la boîte soit redimensionnée selon l'axe de bloc, comme pour le mode horizontal.
 
 Pour faciliter cela, CSS est désormais doté d'un ensemble de propriétés correspondantes. Dans l'ensemble, ces propriétés remplacent les propriétés physiques comme `width` ou `height` par des versions **logiques** ou **relatives au flux**.
 
-La propriété logique qui correspond à `width` lorsqu'on utilise un mode d'écriture horizontal est appelée [`inline-size`](/fr/docs/Web/CSS/inline-size) : elle fait référence à la dimension selon l'axe en ligne. La propriété correspondant à `height` est quant à elle intitulée [`block-size`](/fr/docs/Web/CSS/block-size) et représente la taille selon la dimension de bloc. Vous pouvez observer leur fonctionnement dans l'exemple qui suit où nous avons remplacé `width` par `inline-size`.
+La propriété logique qui correspond à `width` lorsqu'on utilise un mode d'écriture horizontal est appelée [`inline-size`](/fr/docs/Web/CSS/inline-size)&nbsp;: elle fait référence à la dimension selon l'axe en ligne. La propriété correspondant à `height` est quant à elle intitulée [`block-size`](/fr/docs/Web/CSS/block-size) et représente la taille selon la dimension de bloc. Vous pouvez observer leur fonctionnement dans l'exemple qui suit où nous avons remplacé `width` par `inline-size`.
 
 {{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 950)}}
 
@@ -106,7 +106,7 @@ Vous pouvez voir une comparaison entre les propriétés physiques et logiques ci
 
 **Si vous changez le mode d'écriture des boîtes en modifiant la valeur de `writing-mode` sur le sélecteur `.box` afin de la passer à `vertical-rl`, vous pourrez voir que les propriétés physiques restent liées aux directions physiques tandis que les propriétés logiques s'adaptent en fonction du mode d'écriture.**
 
-**Vous pouvez également voir que [`<h2>`](/fr/docs/Web/HTML/Element/Heading_Elements) a une bordure avec `border-bottom`. Pouvez-vous adapter le code afin que la bordure sous le texte suive cette direction, quel que soit le mode d'écriture ?**
+**Vous pouvez également voir que [`<h2>`](/fr/docs/Web/HTML/Element/Heading_Elements) a une bordure avec `border-bottom`. Pouvez-vous adapter le code afin que la bordure sous le texte suive cette direction, quel que soit le mode d'écriture&nbsp;?**
 
 {{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}
 
@@ -114,7 +114,7 @@ Il existe de nombreuses propriétés détaillées pour gérer les différents as
 
 ### Valeurs logiques
 
-Jusqu'à présent, nous avons étudié les noms des propriétés logiques. Il existe également des propriétés dont les valeurs sont caractérisées physiquement comme `top`, `right`, `bottom`, et `left`. Ces valeurs disposent également d'équivalences logiques : `block-start`, `inline-end`, `block-end`, et `inline-start`.
+Jusqu'à présent, nous avons étudié les noms des propriétés logiques. Il existe également des propriétés dont les valeurs sont caractérisées physiquement comme `top`, `right`, `bottom`, et `left`. Ces valeurs disposent également d'équivalences logiques&nbsp;: `block-start`, `inline-end`, `block-end`, et `inline-start`.
 
 Ainsi, on peut faire flotter une image à gauche pour que le texte soit écrit autour de l'image. Dans l'exemple qui suit, vous pouvez remplacer `left` avec `inline-start`.
 
@@ -126,13 +126,13 @@ Ici, on utilise aussi les valeurs logiques pour les marges afin de s'assurer que
 
 > **Note :** Actuellement, seul Firefox prend en charge les valeurs relatives de flux pour `float`. Si vous utilisez **Google Chrome** ou **Microsoft Edge**, vous obtiendrez vraisemblablement un résultat où l'image ne flotte pas.
 
-### Faut-il utiliser les propriétés physiques ou logiques ?
+### Faut-il utiliser les propriétés physiques ou logiques&nbsp;?
 
 Les propriétés logiques et les valeurs correspondantes sont plus récentes que leurs équivalents physiques et l'implémentation de ces premières est donc également plus récente. Vous pouvez consulter la page de chaque propriété sur MDN pour vérifier le tableau de compatibilité des navigateurs. Si vous n'utilisez pas plusieurs modes d'écriture, vous pourrez préférer les versions physiques. Toutefois, on s'attend à terme que les personnes utilisent les versions logiques dans la majorité des cas étant donné leur pertinence pour certaines méthodes de dispositions comme les grilles CSS ou <i lang="en">flexbox</i>.
 
-## Testez vos compétences !
+## Testez vos compétences&nbsp;!
 
-Nous avons abordé de nombreux concepts dans cet article, mais avez-vous retenu les informations fondamentales ? Vous pourrez trouver différents tests sur le sujet pour vérifier que vous avez assimilé les bonnes informations : voir [Testez vos compétences : les modes d'écriture](/fr/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks).
+Nous avons abordé de nombreux concepts dans cet article, mais avez-vous retenu les informations fondamentales ? Vous pourrez trouver différents tests sur le sujet pour vérifier que vous avez assimilé les bonnes informations&nbsp;: voir [Testez vos compétences&nbsp;: les modes d'écriture](/fr/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks).
 
 ## Résumé
 
diff --git a/files/fr/learn/css/building_blocks/index.md b/files/fr/learn/css/building_blocks/index.md
index 7900ce85d5..15a1e0310f 100644
--- a/files/fr/learn/css/building_blocks/index.md
+++ b/files/fr/learn/css/building_blocks/index.md
@@ -10,18 +10,18 @@ original_slug: Apprendre/CSS/Building_blocks
 ---
 {{LearnSidebar}}
 
-Ce cours fait suite aux [premiers pas avec CSS](/fr/docs/Learn/CSS/First_steps) : vous avez déjà acquis une bonne familiarité avec le langage et sa syntaxe, avec déjà des expériences d'utilisation de CSS. Il est donc temps d'approfondir le sujet. On examine ici les principes de cascade et d’héritage, tous les types de sélecteurs à notre disposition, les unités, le dimensionnement, les arrière-plans de style et les limites, le débogage, et bien d'autres choses.
+Ce cours fait suite aux [premiers pas avec CSS](/fr/docs/Learn/CSS/First_steps) : vous avez déjà acquis une bonne familiarité avec le langage et sa syntaxe, avec déjà des expériences d'utilisation de CSS. Il est donc temps d'approfondir le sujet. On examine ici les principes de cascade et d’héritage, tous les types de sélecteurs à notre disposition, les unités, le dimensionnement, les arrière-plans de style et les limites, le débogage, et bien d'autres choses.
 
-L'objectif est d'introduire les outils qui feront de vous un utilisateur CSS compétent avec une bonne compréhension du cœur de la théorie CSS. Nous étudierons plus tard des sujets plus spécifiques comme [le style de texte](/fr/docs/Learn/CSS/Styling_text) et la [mise en page CSS](/fr/docs/Apprendre/CSS/CSS_layout).
+L'objectif est d'introduire les outils qui feront de vous un utilisateur CSS compétent avec une bonne compréhension du cœur de la théorie CSS. Nous étudierons plus tard des sujets plus spécifiques comme [le style de texte](/fr/docs/Learn/CSS/Styling_text) et la [mise en page CSS](/fr/docs/Apprendre/CSS/CSS_layout).
 
 ## Prérequis
 
 Avant de commencer ce cours, nous vous recommandons :
 
 1.  D'être familiarisé avec l'usage des ordinateurs et avec la navigation sur internet.
-2.  De disposer d'un environnement de travail comme il est décrit dans l'article [installation des outils de base](/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) et de savoir créer et gérer des fichiers (cf. leçon [gérer les fichiers](/fr/docs/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers)).
-3.  D'être suffisamment à votre aise avec HTML (voir le cours [introduction au HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML)).
-4.  D'avoir compris les bases du CSS telles qu'exposées dans le cours [premiers pas avec CSS.](/fr/docs/Learn/CSS/First_steps)
+2.  De disposer d'un environnement de travail comme il est décrit dans l'article [installation des outils de base](/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) et de savoir créer et gérer des fichiers (cf. leçon [gérer les fichiers](/fr/docs/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers)).
+3.  D'être suffisamment à votre aise avec HTML (voir le cours [introduction au HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML)).
+4.  D'avoir compris les bases du CSS telles qu'exposées dans le cours [premiers pas avec CSS.](/fr/docs/Learn/CSS/First_steps)
 
 > **Note :** Si vous travaillez sur un ordinateur, une tablette ou tout autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pourrez tester (la plupart) des exemples de code dans un site de programmation en ligne comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/fr/).
 
diff --git a/files/fr/learn/css/building_blocks/overflowing_content/index.md b/files/fr/learn/css/building_blocks/overflowing_content/index.md
index d44a3e9f3c..5a42f16382 100644
--- a/files/fr/learn/css/building_blocks/overflowing_content/index.md
+++ b/files/fr/learn/css/building_blocks/overflowing_content/index.md
@@ -11,7 +11,7 @@ Dans ce cours nous allons étudier un autre concept important en CSS : les **dé
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Connaissances élémentaires en informatique,
         <a
@@ -31,7 +31,7 @@ Dans ce cours nous allons étudier un autre concept important en CSS : les **dé
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>Comprendre le principe des débordements et comment les gérer.</td>
     </tr>
   </tbody>
@@ -59,7 +59,7 @@ Dans la mesure du possible, le CSS ne masque pas votre contenu ; le faire entra�
 
 Si vous avez défini une boîte avec des valeurs `width` ou `height`, CSS part du principe que vous savez ce que vous faites et que vous gérez le risque de débordement. En général, contraindre la dimension du bloc est problématique lorsque du texte va être mis dans une boîte, car il peut y avoir plus de texte que prévu lors de la conception du site ou que le texte peut être plus gros - par exemple si l'utilisateur a augmenté la taille de sa police.
 
-Dans les deux prochaines leçons, nous examinerons différentes façons de contrôler la taille des éléments afin de limiter le dépassement. Cependant, si vous avez besoin d'une taille fixe, vous pouvez également contrôler le comportement du trop-plein. Voyons maintenant !
+Dans les deux prochaines leçons, nous examinerons différentes façons de contrôler la taille des éléments afin de limiter le dépassement. Cependant, si vous avez besoin d'une taille fixe, vous pouvez également contrôler le comportement du trop-plein. Voyons maintenant&nbsp;!
 
 ## La propriété overflow
 
@@ -103,7 +103,7 @@ Les méthodes de mise en page modernes (comme étudiées dans le module [La mise
 
 Lorsque vous développez un site, vous devez toujours garder à l'esprit les problèmes de débordement. Vous devez tester des conceptions avec des quantités de contenu importantes et réduites, augmenter la taille de la police et vous assurer que votre CSS peut s'en sortir de manière efficace. La modification de la valeur d'`overflow` pour masquer le contenu ou ajouter des barres de défilement ne sera probablement réservée qu'à quelques rares cas particuliers - par exemple lorsque vous voulez spécifiquement une barre de défilement.
 
-## Testez vos compétences !
+## Testez vos compétences&nbsp;!
 
 Nous avons couvert beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien retenu ces informations avant de partir - voir (en anglais) [Testez vos compétences: overflow](/fr/docs/Learn/CSS/Building_blocks/Overflow_Tasks).
 
diff --git a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md
index 243de46424..659a8e461f 100644
--- a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md
+++ b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md
@@ -11,7 +11,7 @@ Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on pe
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Maîtrise élémentaire de l'informatique,
         <a
@@ -30,7 +30,7 @@ Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on pe
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>Découvrir les sélecteurs d'attribut et comment les utiliser.</td>
     </tr>
   </tbody>
diff --git a/files/fr/learn/css/building_blocks/selectors/combinators/index.md b/files/fr/learn/css/building_blocks/selectors/combinators/index.md
index 7bbafe2f86..eb2a003007 100644
--- a/files/fr/learn/css/building_blocks/selectors/combinators/index.md
+++ b/files/fr/learn/css/building_blocks/selectors/combinators/index.md
@@ -10,7 +10,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}
 
-Les derniers sélecteurs que nous allons étudier sont appelés combinateurs, car ils combinent différents sélecteurs de façon à leur donner une relation utile et l'emplacement du contenu dans le document.
+Les derniers sélecteurs que nous allons étudier sont appelés combinateurs, car ils combinent différents sélecteurs de façon à leur donner une relation utile et l'emplacement du contenu dans le document.
 
 <table class="standard-table">
   <tbody>
@@ -25,7 +25,7 @@ Les derniers sélecteurs que nous allons étudier sont appelés combinateurs, ca
         <a
           href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers"
           >gestion des fichiers</a
-        >, les bases du HTML (voir <a
+        >, les bases du HTML (voir <a
           href="/fr/docs/Apprendre/HTML/Introduction_à_HTML"
           >Introduction au HTML</a
         >), et une idée du fonctionnement du CSS (voir
@@ -65,7 +65,7 @@ Le combinateur enfant (`>`) est placé entre deux sélecteurs CSS. Il correspond
 article > p
 ```
 
-Dans cet exemple suivant, nous avons une liste non ordonnée, imbriquée à l'intérieur de laquelle se trouve une liste ordonnée. Nous utilisons le combinateur enfant pour sélectionner uniquement les éléments `<li>` qui sont un enfant direct d'un `<ul>`, et leur ai donné une bordure supérieure.
+Dans cet exemple suivant, nous avons une liste non ordonnée, imbriquée à l'intérieur de laquelle se trouve une liste ordonnée. Nous utilisons le combinateur enfant pour sélectionner uniquement les éléments `<li>` qui sont un enfant direct d'un `<ul>`, et leur ai donné une bordure supérieure.
 
 si vous supprimez le `>` qui désigne cela comme un combinateur enfant, vous vous retrouvez avec un sélecteur descendant et tous les éléments `<li>` auront une bordure rouge.
 
@@ -85,9 +85,9 @@ Si vous insérez un autre élément tel qu'un `<h2>` entre le `<h1>` et le `<p>`
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}
 
-## Combinateur général de frères
+## Combinateur général de frères
 
-Si vous souhaitez sélectionner les frères d'un élément même s'ils ne sont pas directement adjacents, vous pouvez utiliser le combinateur général de frères (`~`). Pour sélectionner tous les éléments `<img>` qui viennent n'importe où après les éléments `<p>`, nous ferions ceci:
+Si vous souhaitez sélectionner les frères d'un élément même s'ils ne sont pas directement adjacents, vous pouvez utiliser le combinateur général de frères (`~`). Pour sélectionner tous les éléments `<img>` qui viennent n'importe où après les éléments `<p>`, nous ferions ceci:
 
 ```css
 p ~ img
@@ -111,11 +111,11 @@ Il est souvent préférable de créer une classe simple et de l'appliquer à l'�
 
 ## Testez vos compétences!
 
-Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir [Test your skills: Selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks).
+Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir [Test your skills: Selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks).
 
 ## Passer à la suite
 
-Ceci est la dernière section de nos leçons sur les sélecteurs. Ensuite, nous passerons à une autre partie importante du CSS - le [modèle de Boîte](/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite).
+Ceci est la dernière section de nos leçons sur les sélecteurs. Ensuite, nous passerons à une autre partie importante du CSS - le [modèle de Boîte](/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite).
 
 {{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}
 
@@ -138,4 +138,4 @@ Ceci est la dernière section de nos leçons sur les sélecteurs. Ensuite, nous
 9.  [Images, média, et élements de formulaire](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
 10. [Mise en page de tableaux](/fr/docs/Apprendre/CSS/Building_blocks/Styling_tables)
 11. [Débogage CSS](/fr/docs/Apprendre/CSS/Building_blocks/Debugging_CSS)
-12. [Organiser votre CSS](/fr/docs/https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing)
+12. [Organiser votre CSS](/fr/docs/https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/fr/learn/css/building_blocks/selectors/index.md b/files/fr/learn/css/building_blocks/selectors/index.md
index ad59f05b6a..69779af268 100644
--- a/files/fr/learn/css/building_blocks/selectors/index.md
+++ b/files/fr/learn/css/building_blocks/selectors/index.md
@@ -11,7 +11,7 @@ Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléme
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Notions de base en l'informatique,
         <a
@@ -28,7 +28,7 @@ Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléme
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>Voir dans les détails comment les sélecteurs CSS fonctionnent.</td>
     </tr>
   </tbody>
diff --git a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
index 6e9c0d478a..444d0fae86 100644
--- a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
+++ b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
@@ -14,7 +14,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}
 
-Voyons maintenant les sélecteurs de **pseudo-classes** et de **pseudo-éléments**. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.
+Voyons maintenant les sélecteurs de **pseudo-classes** et de **pseudo-éléments**. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.
 
 <table class="standard-table">
   <tbody>
@@ -25,13 +25,13 @@ Voyons maintenant les sélecteurs de **pseudo-classes** et de **pseudo-élémen
         <a
           href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base"
           >suite logicielle de base installée</a
-        >, compétences élémentaires pour <a
+        >, compétences élémentaires pour <a
           href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers"
           >travailler avec des fichiers</a
-        >, connaissance de base du HTML  (cf. <a
+        >, connaissance de base du HTML  (cf. <a
           href="/fr/docs/Apprendre/HTML/Introduction_à_HTML"
           >Introduction à HTML</a
-        >), et une idée de <a
+        >), et une idée de <a
           href="/fr/docs/Learn/CSS/First_steps/How_CSS_works"
           >Comment fonctionne CSS</a
         >.
@@ -46,23 +46,23 @@ Voyons maintenant les sélecteurs de **pseudo-classes** et de **pseudo-élémen
 
 ## Qu'est ce qu'une pseudo-classe ?
 
-Une pseudo-classe est un sélecteur ciblant des éléments dans un état spécifique, par ex. le premier élément d'un type, ou un élément survolé par le pointeur de la souris. Leur comportement correspond à celui d'une classe, mais qui ne s'appliquerait que partiellement. On gagne ainsi en flexibilité, en éliminant du code inutile. Le résultat est plus facile à maintenir.
+Une pseudo-classe est un sélecteur ciblant des éléments dans un état spécifique, par ex. le premier élément d'un type, ou un élément survolé par le pointeur de la souris. Leur comportement correspond à celui d'une classe, mais qui ne s'appliquerait que partiellement. On gagne ainsi en flexibilité, en éliminant du code inutile. Le résultat est plus facile à maintenir.
 
-Les pseudo-classes sont signalées par un mot clé commençant par deux points `:`
+Les pseudo-classes sont signalées par un mot clé commençant par deux points `:`
 
     :pseudo-class-name
 
-### Exemple d'une pseudo-classe élémentaire 
+### Exemple d'une pseudo-classe élémentaire
 
-Voyons cela dans un premier exemple. Pour agrandir et mettre en gras le texte du premier paragraphe d'un article, on pourrait attribuer une classe à ce paragraphe, puis lui ajouter du CSS, comme ci-dessous :
+Voyons cela dans un premier exemple. Pour agrandir et mettre en gras le texte du premier paragraphe d'un article, on pourrait attribuer une classe à ce paragraphe, puis lui ajouter du CSS, comme ci-dessous :
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}
 
-Mais cette solution est difficile à maintenir — que se passe-t-il si un nouveau paragraphe est ajouté en haut du document ? Il faut dans ce cas déplacer manuellement la classe vers le nouveau paragraphe. Une solution plus souple est d'utiliser le sélecteur de pseudo-classe {{cssxref (": first-child")}} — cela cible *dans tous les cas* le premier élément enfant de l'article : plus nécessaire d'éditer le code HTML (particulièrement utile en particulier quand le code HTML est généré par un CMS.)
+Mais cette solution est difficile à maintenir — que se passe-t-il si un nouveau paragraphe est ajouté en haut du document ? Il faut dans ce cas déplacer manuellement la classe vers le nouveau paragraphe. Une solution plus souple est d'utiliser le sélecteur de pseudo-classe {{cssxref (": first-child")}} — cela cible *dans tous les cas* le premier élément enfant de l'article : plus nécessaire d'éditer le code HTML (particulièrement utile en particulier quand le code HTML est généré par un CMS.)
 
 {{EmbedGHLiveSample ("css-examples/learn/selectors/first-child2.html", '100%', 700)}}
 
-Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les éléments du document dans un état donné, comme si vous aviez ajouté une classe dans votre code HTML. Jetez un œil à quelques exemples sur MDN :
+Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les éléments du document dans un état donné, comme si vous aviez ajouté une classe dans votre code HTML. Jetez un œil à quelques exemples sur MDN :
 
 - [`:last-child`](/fr/docs/Web/CSS/:last-child)
 - [`:only-child`](/fr/docs/Web/CSS/:only-child)
@@ -72,12 +72,12 @@ Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les
 
 Certaines pseudo-classes ne s'appliquent que lorsque l'utilisateur interagit avec le document d'une manière ou d'une autre. Ces pseudo-classes d'action utilisateur, parfois appelées _pseudo-classes dynamiques_, agissent comme si une classe avait été ajoutée à l'élément lorsque l'utilisateur interagit avec lui. Par exemple :
 
-[`:hover`](/fr/docs/Web/CSS/:hover) — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.
-[`:focus`](/fr/docs/Web/CSS/:focus) — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.
+[`:hover`](/fr/docs/Web/CSS/:hover) — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.
+[`:focus`](/fr/docs/Web/CSS/:focus) — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}
 
-## Qu'est ce qu'un pseudo-élément ?
+## Qu'est ce qu'un pseudo-élément ?
 
 Les pseudo-éléments se comportent de manière similaire, même s'ils se comportent comme si vous aviez ajouté un tout nouvel élément HTML dans le balisage, au lieu d'appliquer une classe à des éléments existants. Les pseudo-éléments commencent avec un double deux-points `::`.
 
@@ -87,7 +87,7 @@ Les pseudo-éléments se comportent de manière similaire, même s'ils se compor
 
 Par exemple, si vous souhaitez sélectionner la première ligne d'un paragraphe, vous pouvez l'entourer d'un élément \<span> et utiliser un sélecteur d'éléments ; cependant, cela échouerait si le nombre de mots que vous avez entourés était plus long ou plus court que la largeur de l'élément parent. Comme nous avons tendance à ne pas savoir combien de mots tiendront sur une ligne - étant donné que cela peut varier si la largeur de l'écran ou la taille de la police change - il est impossible de le faire de manière robuste en ajoutant du HTML.
 
-Le pseudo-sélecteur d'éléments `::first-line`  le fera pour vous de manière fiable - même si le nombre de mots augmente ou diminue, il ne sélectionnera que la première ligne.
+Le pseudo-sélecteur d'éléments `::first-line`  le fera pour vous de manière fiable - même si le nombre de mots augmente ou diminue, il ne sélectionnera que la première ligne.
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}
 
@@ -95,7 +95,7 @@ Il agit comme si un `<span>` était comme par magie placé autour de cette premi
 
 Vous pouvez voir que cela sélectionne la première ligne des deux paragraphes.
 
-## Combiner pseudo-classes et pseudo-éléments
+## Combiner pseudo-classes et pseudo-éléments
 
 Si vous souhaitez mettre en gras la première ligne du premier paragraphe, vous pouvez enchaîner les sélecteurs `:first-child` et `::first-line` Essayez de modifier l'exemple précédent en direct pour qu'il utilise le CSS suivant. Nous souhaitons sélectionner la première ligne du premier élément `<p>`, qui se trouve à l'intérieur d'un élément `<article>`
 
@@ -110,7 +110,7 @@ article p:first-child::first-line {
 
 Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété [`content`](/fr/docs/Web/CSS/content) pour insérer du contenu dans votre document en utilisant le CSS.
 
-Vous pouvez les utiliser pour insérer une chaîne de texte, comme dans l'exemple ci-dessous. Essayez de changer la valeur du texte de la propriété {{cssxref("content")}} et vous verrez qu'elle change en sortie. Vous pouvez également changer le pseudo-élément `::before` en  `::after` et voir le texte inséré à la fin de l'élément au lieu du début.
+Vous pouvez les utiliser pour insérer une chaîne de texte, comme dans l'exemple ci-dessous. Essayez de changer la valeur du texte de la propriété {{cssxref("content")}} et vous verrez qu'elle change en sortie. Vous pouvez également changer le pseudo-élément `::before` en  `::after` et voir le texte inséré à la fin de l'élément au lieu du début.
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}
 
@@ -122,7 +122,7 @@ Une utilisation plus pertinente de ces pseudo-éléments consiste à insérer un
 
 Ces pseudo-éléments sont aussi fréquemment utilisés pour insérer une chaîne vide, qui peut ensuite être stylisée comme n'importe quel élément de la page.
 
-Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le e pseudo-élément `::before` pseudo-element. Nous l'avons défini en `display: block` afin de pouvoir la styliser avec une largeur et une hauteur. Nous utilisons ensuite le CSS pour la styliser comme n'importe quel élément. Vous pouvez jouer avec le CSS et modifier son apparence et son comportement.
+Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le e pseudo-élément `::before` pseudo-element. Nous l'avons défini en `display: block` afin de pouvoir la styliser avec une largeur et une hauteur. Nous utilisons ensuite le CSS pour la styliser comme n'importe quel élément. Vous pouvez jouer avec le CSS et modifier son apparence et son comportement.
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}
 
@@ -130,7 +130,7 @@ L'utilisation des pseudo-éléments `::before` et `::after` avec la propriété
 
 ## Section de référence
 
-Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne liste de références est donc utile. Vous trouverez ci-dessous des tableaux les répertoriant, avec pour chacun le lien vers la page de référence sur MDN. Vous y trouverez toutes les informations sur leur utilisation.
+Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne liste de références est donc utile. Vous trouverez ci-dessous des tableaux les répertoriant, avec pour chacun le lien vers la page de référence sur MDN. Vous y trouverez toutes les informations sur leur utilisation.
 
 ### Pseudo-classes
 
@@ -201,7 +201,7 @@ Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne list
 
 {{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}
 
-## Dans ce cours
+## Dans ce cours
 
 1.  [Cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
 2.  [CSS selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors)
diff --git a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
index 43772eb59f..f235a4bbfc 100644
--- a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
+++ b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
@@ -6,7 +6,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}
 
-Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse trouver, ce sont ceux que vous utiliserez le plus couramment dans votre travail.
+Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse trouver, ce sont ceux que vous utiliserez le plus couramment dans votre travail.
 
 <table class="standard-table">
   <tbody>
@@ -20,10 +20,10 @@ Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse
         >,
         <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers"
           >savoir manipuler des fichiers</a
-        >, connaissance de base de HTML (cf. <a
+        >, connaissance de base de HTML (cf. <a
           href="/fr/docs/Apprendre/HTML/Introduction_à_HTML"
           >Introduction à HTML</a
-        >.) et une première idée du fonctionnement de CSS (voir <a
+        >.) et une première idée du fonctionnement de CSS (voir <a
           href="/fr/docs/Learn/CSS/First_steps"
           >premiers pas en CSS</a
         >.)
@@ -38,23 +38,23 @@ Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse
 
 ## Sélecteur de type
 
-Un sélecteur de type cible un élément HTML (une balise) de votre document, on parle aussi de sélecteur de balise ou d'élément. Dans l'exemple ci-dessous on utilise les sélecteurs span, em et strong. Chaque instance de `<span>`, `<em>` et `<strong>` est ainsi mise en forme.
+Un sélecteur de type cible un élément HTML (une balise) de votre document, on parle aussi de sélecteur de balise ou d'élément. Dans l'exemple ci-dessous on utilise les sélecteurs span, em et strong. Chaque instance de `<span>`, `<em>` et `<strong>` est ainsi mise en forme.
 
-**Essayez d'ajouter une règle CSS pour sélectionner l'élément `<h1>` et changer sa couleur en bleu.**
+**Essayez d'ajouter une règle CSS pour sélectionner l'élément `<h1>` et changer sa couleur en bleu.**
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}
 
 ## Le sélecteur universel
 
-Le sélecteur universel est indiqué par un astérisque (\*) et sélectionne tout dans le document (ou à l'intérieur de l'élément parent s'il est enchaîné avec un autre élément et un combinateur descendant, par exemple). Dans l'exemple suivant, nous avons utilisé le sélecteur universel pour supprimer les marges de tous les éléments. Cela signifie qu'au lieu du style par défaut ajouté par le navigateur, qui espace les en-têtes et les paragraphes avec des marges, tout est collé, la distinction des paragraphes est mal aisée.
+Le sélecteur universel est indiqué par un astérisque (\*) et sélectionne tout dans le document (ou à l'intérieur de l'élément parent s'il est enchaîné avec un autre élément et un combinateur descendant, par exemple). Dans l'exemple suivant, nous avons utilisé le sélecteur universel pour supprimer les marges de tous les éléments. Cela signifie qu'au lieu du style par défaut ajouté par le navigateur, qui espace les en-têtes et les paragraphes avec des marges, tout est collé, la distinction des paragraphes est mal aisée.
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}
 
-On peut rencontrer ce type de comportement dans les "feuilles de style de réinitialisation" qui suppriment toutes les mises en forme par défaut du navigateur. Très populaires à une époque, ces réinitialisations ont un gros inconvénient, la suppression de tous les styles par défaut signifie en effet qu'on doit construire la mise en forme de zéro ! On utilisera donc le sélecteur universel avec précaution, dans des situations très spécifiques, comme par exemple celle décrite ci-dessous.
+On peut rencontrer ce type de comportement dans les "feuilles de style de réinitialisation" qui suppriment toutes les mises en forme par défaut du navigateur. Très populaires à une époque, ces réinitialisations ont un gros inconvénient, la suppression de tous les styles par défaut signifie en effet qu'on doit construire la mise en forme de zéro ! On utilisera donc le sélecteur universel avec précaution, dans des situations très spécifiques, comme par exemple celle décrite ci-dessous.
 
-### Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles
+### Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles
 
-On peut utiliser `*` pour rendre les sélecteurs plus lisibles, pour clarifier leur  fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément `<article>` pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les [pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) :
+On peut utiliser `*` pour rendre les sélecteurs plus lisibles, pour clarifier leur fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément `<article>` pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les [pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)&nbsp;:
 
 ```css
 article :first-child {
@@ -62,9 +62,9 @@ article :first-child {
 }
 ```
 
-On peut néanmoins confondre ce sélecteur avec `article:first-child` ciblant les éléments `<article>`  qui sont le premier descendant d'un élément.
+On peut néanmoins confondre ce sélecteur avec `article:first-child` ciblant les éléments `<article>`  qui sont le premier descendant d'un élément.
 
-Pour éviter cette confusion, on peut ajouter le sélecteur universel `*` à  `:first-child`,  le fonctionnement de ce dernier sera plus clair : il cible *tout* élément premier descendant d'un élément `<article>` :
+Pour éviter cette confusion, on peut ajouter le sélecteur universel `*` à `:first-child`, le fonctionnement de ce dernier sera plus clair : il cible *tout* élément premier descendant d'un élément `<article>` :
 
 ```css
 article *:first-child {
@@ -74,13 +74,13 @@ article *:first-child {
 
 ## Sélecteurs de classe
 
-Le sélecteur de classe commence par un point  `.` et sélectionne tout élément du document auquel cette classe est appliquée. Dans l'exemple live ci-dessous, nous avons créé une classe appelée `.highlight` et l'avons appliquée à plusieurs endroits du document. Tous les éléments auxquels la classe est appliquée sont mis en évidence.
+Le sélecteur de classe commence par un point  `.` et sélectionne tout élément du document auquel cette classe est appliquée. Dans l'exemple live ci-dessous, nous avons créé une classe appelée `.highlight` et l'avons appliquée à plusieurs endroits du document. Tous les éléments auxquels la classe est appliquée sont mis en évidence.
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}
 
-### Cibler des classes d'un élément donné
+### Cibler des classes d'un élément donné
 
-On peut créer un sélecteur ciblant les éléments d'un type donné appartenant à une classe donnée. Dans l'exemple suivant, la classe `highlight` met en surbrillance, mais elle le fait différemment quand elle s'applique à un \<span> ou à un titre \<h1>. Nous le faisons en utilisant le sélecteur de type pour l'élément ciblé, avec la classe ajoutée, sans espace blanc entre les deux.
+On peut créer un sélecteur ciblant les éléments d'un type donné appartenant à une classe donnée. Dans l'exemple suivant, la classe `highlight` met en surbrillance, mais elle le fait différemment quand elle s'applique à un \<span> ou à un titre \<h1>. Nous le faisons en utilisant le sélecteur de type pour l'élément ciblé, avec la classe ajoutée, sans espace blanc entre les deux.
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}
 
@@ -88,9 +88,9 @@ Cette approche rend le CSS moins réutilisable : la déclaration ne s'applique q
 
 ### Cibler un élément appartenant à plus d'une classe
 
-Vous pouvez attribuer plusieurs classes à un même élément et les sélectionner individuellement, ou cibler l'élément seulement quand toutes les classes apparaissent dans le sélecteur. Cela peut s'avérer utile si vous créez des composants qui peuvent être combinés de différentes manières sur votre site.
+Vous pouvez attribuer plusieurs classes à un même élément et les sélectionner individuellement, ou cibler l'élément seulement quand toutes les classes apparaissent dans le sélecteur. Cela peut s'avérer utile si vous créez des composants qui peuvent être combinés de différentes manières sur votre site.
 
-L'exemple ci-dessous présente trois `<div>` contenant chacun une note. Si la boîte est dans la classe  `notebox` elle a une bordure grise. Si de plus elle est dans la classe `warning` ou `danger`, on change la {{cssxref("border-color")}}.
+L'exemple ci-dessous présente trois `<div>` contenant chacun une note. Si la boîte est dans la classe `notebox` elle a une bordure grise. Si de plus elle est dans la classe `warning` ou `danger`, on change la {{cssxref("border-color")}}.
 
 On indique au navigateur la combinaison de classes ciblée en enchaînant les sélecteurs de classe sans laisser d'espace entre.
 
@@ -98,15 +98,15 @@ On indique au navigateur la combinaison de classes ciblée en enchaînant les s�
 
 ## Sélecteurs d'ID
 
-Un sélecteur d'ID commence par un `#` plutôt que par un point, mais est essentiellement utilisé de la même manière qu'un sélecteur de classe. Une ID ne peut cependant être utilisée qu'une seule fois par document. Le sélecteur cible l'élément avec l'`id` associée ; on peut faire précéder l'ID d'un sélecteur de type pour ne cibler l'élément que si l'élément et l'ID correspondent. Voyons ces deux utilisations dans l'exemple suivant :
+Un sélecteur d'ID commence par un `#` plutôt que par un point, mais est essentiellement utilisé de la même manière qu'un sélecteur de classe. Une ID ne peut cependant être utilisée qu'une seule fois par document. Le sélecteur cible l'élément avec l'`id` associée&nbsp;; on peut faire précéder l'ID d'un sélecteur de type pour ne cibler l'élément que si l'élément et l'ID correspondent. Voyons ces deux utilisations dans l'exemple suivant :
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}
 
-> **Note :** Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.
+> **Note :** Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.
 
 ## Prochain article
 
-Notre exploration des sélecteurs se poursuit par l'étude des [sélecteurs d'attributs](/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut).
+Notre exploration des sélecteurs se poursuit par l'étude des [sélecteurs d'attributs](/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut).
 
 {{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}
 
diff --git a/files/fr/learn/css/building_blocks/styling_tables/index.md b/files/fr/learn/css/building_blocks/styling_tables/index.md
index bfebc37bc0..28a5018e0a 100644
--- a/files/fr/learn/css/building_blocks/styling_tables/index.md
+++ b/files/fr/learn/css/building_blocks/styling_tables/index.md
@@ -32,7 +32,7 @@ Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>Apprendre à donner effectivement un style aux tableaux HTML.</td>
     </tr>
   </tbody>
@@ -89,7 +89,7 @@ Le tableau est bien balisé, facile à disposer et accessible, remercions les fo
 
 ![Liste des groupes punk du Royaume Uni](punk.png)
 
-Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela.
+Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela.
 
 ## Mettre en forme notre tableau
 
@@ -97,7 +97,7 @@ Dans cette section d'apprentissage actif, nous allons travailler le style de l'e
 
 1.  Pour débuter, faites une copie locale de l'[exemple de balisage](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html), téléchargez les images ([noise.png](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png) et [leopardskin.jpg](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg)) et placez les trois fichiers dans un répertoire de travail quelque part sur votre ordinateur.
 2.  Ensuite, créez un nouveau fichier nommé `style.css` et enregistrez‑le dans le même répertoire que les autres fichiers.
-3.  Liez le CSS au HTML en mettant la ligne suivante dans l'élément {{htmlelement("head")}} :
+3.  Liez le CSS au HTML en mettant la ligne suivante dans l'élément {{htmlelement("head")}} :
 
     ```html
     <link href="style.css" rel="stylesheet" type="text/css">
@@ -147,7 +147,7 @@ Nous mettons un cadre ({{cssxref("border")}}) tout autour du tableau, cadre néc
   Ceci est couplé avec une largeur {{cssxref("width")}} de 100%, ce qui signifie que le tableau remplira complétement tout conteneur dans lequel il sera placé et sera bien adaptable (même s'il aura besoin de quelques aménagements complémentaires pour avoir bel aspect avec les largeurs d'écran étroites).
 
 - La valeur `collapse` pour {{cssxref("border-collapse")}} est une bonne pratique courante pour toute mise en page de tableau. Par défaut, quand vous définissez des encadrements pour les éléments d'un tableau, il y a un espace entre eux, comme le montre cette illustration : ![Encadrement des éléments d'un tableau](cadre_1.png) Cela n'a pas l'air très joli (même si c'est peut-être le look que vous voulez, qui sait ?) Avec `border-collapse : collapse;`, les bordures se condensent en une seule, ce qui est beaucoup mieux :![Avec border-collapse: collapse; les encadrements se condensent](cadre_2.png)
-- Nous avons mis un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous encadrerons  plus tard l'intitulé et le pied de page — si vous n'avez pas d'encadrement général du tableau, terminer par un espacement donne un aspect insolite et peu net.
+- Nous avons mis un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous encadrerons plus tard l'intitulé et le pied de page — si vous n'avez pas d'encadrement général du tableau, terminer par un espacement donne un aspect insolite et peu net.
 - Nous avons défini une valeur pour le remplissage ({{cssxref("padding")}}) des éléments {{htmlelement("th")}} et {{htmlelement("td")}} — cela donne un peu d'air aux données et facilite la lecture de la table.
 
 À ce stade, le tableau a déjà meilleure mine :
@@ -156,7 +156,7 @@ Nous mettons un cadre ({{cssxref("border")}}) tout autour du tableau, cadre néc
 
 ### Simple typographie
 
-Maintenant, différencions un peu nos polices de caractère.
+Maintenant, différencions un peu nos polices de caractère.
 
 Tout d'abord, nous avons trouvé une police sur [Google Fonts](https://www.google.com/fonts) convenant aux tableaux concernant les groupes punk. Vous pouvez visiter le site vous‑même et en choisir une autre si vous le souhaitez ; il vous suffit de remplacer l'élément {{htmlelement("link")}} fourni et la déclaration {{cssxref("font-family")}} personnalisée par celles données par Google Fonts.
 
@@ -166,7 +166,7 @@ D'abord, ajoutons l'élément {{htmlelement("link")}} suivant dans l'élément H
 <link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
 ```
 
-Puis ajoutons le CSS suivant dans le fichier `style.css` :
+Puis ajoutons le CSS suivant dans le fichier `style.css` :
 
 ```css
 /* typographie */
@@ -200,7 +200,7 @@ Rien de propre aux tableaux ici ; nous modifions simplement le style de la polic
 
 - Nous avons mis en place un empilement global de polices sans-serif ; c'est un choix purement stylistique. Nous avons également défini une valeur de police personnalisée pour en-têtes dans les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} pour un look accrocheur et « punky ».
 - Nous avons aussi défini une valeur particulière de {{cssxref("letter-spacing")}} pour les en‑têtes et les cellules pour améliorer la lisibilité. C'est encore un choix purement subjectif.
-- Nous avons choisi un alignement centré pour le texte des cellules dans l'élément {{htmlelement("tbody")}} pour qu'il soit bien aligné avec les têtes de colonnes. Par défaut, les cellules ont une valeur {{cssxref("text-align")}} égale à `left` et les en–têtes à `center`, mais généralement on obtient un meilleur aspect en prenant le même alignement pour les deux. L'éppaisseur par défaut sur les polices de l'en‑tête est suffisante pour différencier ces dernières du contenu des cellules.
+- Nous avons choisi un alignement centré pour le texte des cellules dans l'élément {{htmlelement("tbody")}} pour qu'il soit bien aligné avec les têtes de colonnes. Par défaut, les cellules ont une valeur {{cssxref("text-align")}} égale à `left` et les en–têtes à `center`, mais généralement on obtient un meilleur aspect en prenant le même alignement pour les deux. L'éppaisseur par défaut sur les polices de l'en‑tête est suffisante pour différencier ces dernières du contenu des cellules.
 - Nous avons aligné à droite le titre à l'intérieur de l'élément {{htmlelement("tfoot")}}} pour qu'il soit mieux associé visuellement au résultat des données.
 
 Cela fait un peu plus propre :
@@ -211,7 +211,7 @@ Cela fait un peu plus propre :
 
 Maintenant, graphisme et couleurs ! Comme ce tableau est plein de postures punk, nous allons lui donner un style assez clinquant qui devrait lui convenir. Pas de problème, vous n'avez pas à rendre vos tableaux autant tape à l'œil — vous pouvez opter pour quelque chose de plus subtil et de bon goût.
 
-Commençons par ajouter le CSS suivant à la fin du fichier `style.css` :
+Commençons par ajouter le CSS suivant à la fin du fichier `style.css` :
 
     thead, tfoot {
       background: url(leopardskin.jpg);
@@ -226,13 +226,13 @@ Commençons par ajouter le CSS suivant à la fin du fichier `style.css` :
 
 Encore une fois, il n'y a rien de propre aux tableaux ici, mais cela vaut la peine de noter certaines choses.
 
-Nous avons ajouté un élément {{cssxref("background-image")}} aux éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} et changé la valeur de  {{cssxref("color")}} du texte dans l'en-tête et le pied de page en blanc (nous l'avons aussi ombré avec {{cssxref("text-shadow")}}) pour qu'il soit bien lisible. Assurez‑vous que le texte contraste bien avec l'arrière-plan pour qu'il soit bien lisible.
+Nous avons ajouté un élément {{cssxref("background-image")}} aux éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} et changé la valeur de  {{cssxref("color")}} du texte dans l'en-tête et le pied de page en blanc (nous l'avons aussi ombré avec {{cssxref("text-shadow")}}) pour qu'il soit bien lisible. Assurez‑vous que le texte contraste bien avec l'arrière-plan pour qu'il soit bien lisible.
 
 Nous avons également ajouté un gradient linéaire aux éléments {{htmlelement("th")}}} et {{htmlelement("td")}}} à l'intérieur de l'en-tête et du pied de page pour donner un peu de texture ainsi qu'un cadre mauve brillant. Il est utile d'avoir plusieurs éléments imbriqués disponibles pour pouvoir superposer les styles. Oui, nous aurions pu mettre image de fond et gradient linéaire sur les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}}} en utilisant plusieurs images de fond, mais nous avons décidé de le faire séparément pour le bénéfice des navigateurs plus anciens qui ne prennent pas en charge plusieurs images de fond ou gradients linéaires.
 
 #### Zébrures
 
-Nous avons souhaité dédier un paragraphe séparé à la  mise en place de **zèbrures** — une alternance de coloris des lignes faisant ressortir les données des tableaux, facilitant leur lecture et leur analyse. Ajoutez le CSS suivant au bas de votre fichier `style.css` :
+Nous avons souhaité dédier un paragraphe séparé à la mise en place de **zèbrures** — une alternance de coloris des lignes faisant ressortir les données des tableaux, facilitant leur lecture et leur analyse. Ajoutez le CSS suivant au bas de votre fichier `style.css` :
 
 ```css
 tbody tr:nth-child(odd) {
@@ -264,7 +264,7 @@ Maintenant, peut-être trouverez‑vous que nous avons forcé la dose et que ce
 
 ### Styliser l'intitulé
 
-Il nous reste une dernière chose à faire avec ce tableau — styliser l'intitulé. Pour ce faire, ajoutez ce qui suit en fin de fichier `style.css`  :
+Il nous reste une dernière chose à faire avec ce tableau — styliser l'intitulé. Pour ce faire, ajoutez ce qui suit en fin de fichier `style.css`  :
 
 ```css
 caption {
@@ -293,7 +293,7 @@ Avant de poursuivre, voici une liste rapide des points les plus utiles illustré
 - Faites un balisage du tableau aussi simple que possible et gardez les choses souples, par exemple en utilisant des pourcentages, afin que le design soit adaptable.
 - Utilisez {{cssxref("table-layout")}}`: fixed` pour créer une disposition de tableau prévisible qui vous permet de fixer les largeurs de colonnes en définissant la valeur de {{cssxref("width")}} sur l'élément d'en‑tête ({{htmlelement("th")}}).
 - Utilisez {{cssxref("border-collapse")}}`: collapse` pour faire en sorte que les éléments du tableau fusionnent, produisant un aspect plus net et plus facile à contrôler.
-- Utilisez {{htmlelement("thead")}}, {{htmlelement("tbody")}} et {{htmlelement("tfoot")}} pour diviser le tableau en unités logiques et disposer d'entités supplémentaires pour l'application du CSS, de sorte qu'il soit plus facile d'empiler les styles si nécessaire.
+- Utilisez {{htmlelement("thead")}}, {{htmlelement("tbody")}} et {{htmlelement("tfoot")}} pour diviser le tableau en unités logiques et disposer d'entités supplémentaires pour l'application du CSS, de sorte qu'il soit plus facile d'empiler les styles si nécessaire.
 - Utilisez les zébrures pour distinguer chaque ligne et en faciliter la lecture.
 - Utilisez {{cssxref("text-align")}} pour aligner le texte des éléments {{htmlelement("th")}} et {{htmlelement("td")}} pour rendre les choses plus nettes et plus faciles à suivre.
 
@@ -305,7 +305,7 @@ Maintenant que nous avons franchi les hauteurs vertigineusement passionnantes de
 
 ## Dans ce module
 
-- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap)
+- [Le modèle de boîte&nbsp;: récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap)
 - [Arrière-plans](/fr/Apprendre/CSS/styliser_boites/Backgrounds)
 - [Encadrements](/fr/docs/Apprendre/CSS/styliser_boites/Borders)
 - [Mise en page des tableaux](/fr/Apprendre/CSS/styliser_boites/Styling_tables)
diff --git a/files/fr/learn/css/building_blocks/the_box_model/index.md b/files/fr/learn/css/building_blocks/the_box_model/index.md
index 299b081929..2f77cd5e63 100644
--- a/files/fr/learn/css/building_blocks/the_box_model/index.md
+++ b/files/fr/learn/css/building_blocks/the_box_model/index.md
@@ -11,7 +11,7 @@ En CSS, tout élément est inclus dans une boîte ("_box_" en anglais). Comprend
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Compétences informatique basiques,
         <a
@@ -28,7 +28,7 @@ En CSS, tout élément est inclus dans une boîte ("_box_" en anglais). Comprend
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Apprendre les principes du Modèle de Boîte en CSS, ce qui constitue le
         Modèle de Boîte et comment passer au modèle alternatif.
@@ -120,20 +120,20 @@ Le modèle de boîte que nous allons voir s'applique totalement aux boîtes en b
 
 Lorsque l'on crée une boîte en bloc, on se retrouve avec les composants suivant :
 
-- **La boîte de contenu** : Il s'agit de la zone où sont affichés les éléments contenus par notre boîte, qui peut être dimensionnée en utilisant les propriétés CSS [`width`](/fr/docs/Web/CSS/width) et [`height`](/fr/docs/Web/CSS/height).
-- **La boîte de <i lang="en">padding</i>** **(marge intérieure)** : Le
+- **La boîte de contenu**&nbsp;: Il s'agit de la zone où sont affichés les éléments contenus par notre boîte, qui peut être dimensionnée en utilisant les propriétés CSS [`width`](/fr/docs/Web/CSS/width) et [`height`](/fr/docs/Web/CSS/height).
+- **La boîte de <i lang="en">padding</i>** **(marge intérieure)**&nbsp;: Le
 
   <i lang="en">padding</i>
 
   (ou remplissage en français) est une zone vierge qui se présente comme un espacement encadrant le contenu; sa taille peut être contrôlée sur chaque côté en utilisant la propriété [`padding`](/fr/docs/Web/CSS/padding) et ses autres propriétés connexes.
 
-- **La boîte de bordure** : La bordure englobe le contenu et le
+- **La boîte de bordure**&nbsp;: La bordure englobe le contenu et le
 
   <i lang="en">padding</i>
 
   pour former une bordure. Sa taille et son style sont paramétrés par la propriété [`border`](/fr/docs/Web/CSS/border) et ses propriétés sous-jacentes.
 
-- **La boîte de marge** : La marge est la couche la plus à l'extérieur, englobant le contenu, le
+- **La boîte de marge**&nbsp;: La marge est la couche la plus à l'extérieur, englobant le contenu, le
 
   <i lang="en">padding</i>
 
diff --git a/files/fr/learn/css/building_blocks/values_and_units/index.md b/files/fr/learn/css/building_blocks/values_and_units/index.md
index a803e5340c..13c0695dac 100644
--- a/files/fr/learn/css/building_blocks/values_and_units/index.md
+++ b/files/fr/learn/css/building_blocks/values_and_units/index.md
@@ -11,7 +11,7 @@ Chaque propriété utilisée en CSS possède un type de valeur qui définit l'en
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Maîtrise élémentaire de l'informatique,
         <a
@@ -31,7 +31,7 @@ Chaque propriété utilisée en CSS possède un type de valeur qui définit l'en
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Apprendre les différents types de valeurs et d'unités utilisés dans les
         propriétés CSS.
@@ -40,7 +40,7 @@ Chaque propriété utilisée en CSS possède un type de valeur qui définit l'en
   </tbody>
 </table>
 
-## Qu'est-ce qu'une valeur CSS ?
+## Qu'est-ce qu'une valeur CSS&nbsp;?
 
 Dans les spécifications CSS et sur les pages de propriétés présentes sur MDN, vous pourrez identifier les types de valeurs, car ils sont entourés par des chevrons, tel que [`<color>`](/fr/docs/Web/CSS/color_value) ou [`<length>`](/fr/docs/Web/CSS/length). Quand vous voyez le type de valeur `<color>`, valide pour une propriété particulière, cela signifie que vous pouvez utiliser n'importe quelle couleur valide comme valeur pour cette propriété, comme énoncé dans la page de référence de [`<color>`](/fr/docs/Web/CSS/color_value).
 
@@ -48,7 +48,7 @@ Dans les spécifications CSS et sur les pages de propriétés présentes sur MDN
 
 > **Note :** Oui, les types de valeurs CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex : la propriété [`color`](/fr/docs/Web/CSS/color), comparée au type de données [\<color>](/fr/docs/Web/CSS/color_value)). Vous pourriez aussi être désorienté entre les types de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents.
 
-Dans l'exemple suivant, nous avons défini la couleur de notre titre en utilisant un mot-clé, et la couleur de fond en utilisant la fonction `rgb()` :
+Dans l'exemple suivant, nous avons défini la couleur de notre titre en utilisant un mot-clé, et la couleur de fond en utilisant la fonction `rgb()`&nbsp;:
 
 ```css
 h1 {
@@ -74,7 +74,7 @@ Il existe plusieurs types de valeur numérique que vous pourrez utiliser en CSS.
 
 ### Longueurs
 
-Le type numérique que vous rencontrerez le plus souvent est le type `<length>`. Par exemple : `10px` (pixels) ou `30em`. Il existe deux types de longueurs en CSS : les longueurs relatives et les longueurs absolues. Connaître la différence entre les deux est important pour comprendre la taille que les éléments obtiendront.
+Le type numérique que vous rencontrerez le plus souvent est le type `<length>`. Par exemple : `10px` (pixels) ou `30em`. Il existe deux types de longueurs en CSS&nbsp;: les longueurs relatives et les longueurs absolues. Connaître la différence entre les deux est important pour comprendre la taille que les éléments obtiendront.
 
 #### Unités de longueur absolue
 
@@ -124,13 +124,13 @@ Après avoir suivi ces instructions, n'hésitez pas à modifier les valeurs autr
 
 `em` et `rem` sont deux unités de longueur relative que vous rencontrerez fréquemment dès que vous dimensionnerez des boîtes ou du texte. Aussi, il est intéressant de comprendre leur fonctionnement, les différences entre ces deux unités, surtout avant d'aborder des sujets plus complexes comme [la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text) ou [les dispositions CSS](/fr/docs/Learn/CSS/CSS_layout). L'exemple qui suit fournit une démonstration.
 
-Le HTML utilisé ci-après est un ensemble de listes imbriquées : il y a trois listes au total et les exemples partagent tous le même code HTML. La seule différence est que le premier utilise une classe _ems_ et que le second utilise une classe _rems_.
+Le HTML utilisé ci-après est un ensemble de listes imbriquées&nbsp;: il y a trois listes au total et les exemples partagent tous le même code HTML. La seule différence est que le premier utilise une classe _ems_ et que le second utilise une classe _rems_.
 
 Pour commencer, on définit la taille de la police à 16px sur l'élément `<html>`.
 
-**Pour récapituler, l'unité `em` signifie « la taille de police de l'élément parent »** pour ce qui concerne la typographie. Les éléments [`<li>`](/fr/docs/Web/HTML/Element/li) à l'intérieur de [`<ul>`](/fr/docs/Web/HTML/Element/ul) et qui ont un attribut `class` avec `ems` prendront donc leur taille en fonction de celle de leur parent. Aussi, chaque niveau plus grand que le précédent, car chacun a une taille de police de `1.3em` soit 1,3 fois plus grand que la taille de police pour l'élément parent.
+**Pour récapituler, l'unité `em` signifie «&nbsp;la taille de police de l'élément parent&nbsp;»** pour ce qui concerne la typographie. Les éléments [`<li>`](/fr/docs/Web/HTML/Element/li) à l'intérieur de [`<ul>`](/fr/docs/Web/HTML/Element/ul) et qui ont un attribut `class` avec `ems` prendront donc leur taille en fonction de celle de leur parent. Aussi, chaque niveau plus grand que le précédent, car chacun a une taille de police de `1.3em` soit 1,3 fois plus grand que la taille de police pour l'élément parent.
 
-**Pour récapituler, l'unité `rem` signifie « la taille de police de l'élément racine »** (rem est l'acronyme anglais de « <i lang="en">root em</i> » qu'on pourrait traduire par « em racine ».) Les éléments [`<li>`](/fr/docs/Web/HTML/Element/li) à l'intérieur de [`<ul>`](/fr/docs/Web/HTML/Element/ul) et qui ont un attribut `class` avec `rems` prendront leur taille à partir de l'élément racine (`<html>`). Cela signifie que les niveaux successifs ne gagneront pas en largeur.
+**Pour récapituler, l'unité `rem` signifie «&nbsp;la taille de police de l'élément racine&nbsp;»** (rem est l'acronyme anglais de «&nbsp;<i lang="en">root em</i>&nbsp;» qu'on pourrait traduire par «&nbsp;em racine&nbsp;».) Les éléments [`<li>`](/fr/docs/Web/HTML/Element/li) à l'intérieur de [`<ul>`](/fr/docs/Web/HTML/Element/ul) et qui ont un attribut `class` avec `rems` prendront leur taille à partir de l'élément racine (`<html>`). Cela signifie que les niveaux successifs ne gagneront pas en largeur.
 
 Toutefois, si vous modifier la taille de la police avec `font-size` pour `<html>` dans la feuille CSS, vous pourrez voir que toutes les tailles varient en fonction de celle-ci, tant celles qui utilisent `rem` que celles qui utilisent `em`.
 
@@ -142,7 +142,7 @@ Dans la plupart des cas, un pourcentage est traité comme une longueur. Un pourc
 
 Dans l'exemple qui suit, on a deux boîtes dimensionnées avec des pourcentages et deux boîtes dimensionnées en pixels, elles partagent les mêmes noms de classes. Chaque ensemble est dimensionné respectivement avec 40% et 200px.
 
-La différence est que le deuxième ensemble avec les deux boîtes se situe dans un contenant large de 400 pixels. La boîte dimensionnée avec 200px a la même largeur que dans le premier ensemble, en revanche, la boîte dimensionnée avec 40% a une largeur de 40% de 400px ce qui est beaucoup plus étroit que l'autre !
+La différence est que le deuxième ensemble avec les deux boîtes se situe dans un contenant large de 400 pixels. La boîte dimensionnée avec 200px a la même largeur que dans le premier ensemble, en revanche, la boîte dimensionnée avec 40% a une largeur de 40% de 400px ce qui est beaucoup plus étroit que l'autre&nbsp;!
 
 **Essayez de modifier la largeur du bloc englobant ou la valeur du pourcentage pour voir comment cela fonctionne.**
 
@@ -168,7 +168,7 @@ Certains types de valeur acceptent des nombres, sans unité. Une telle propriét
 
 Il existe de nombreuses façons d'utiliser des couleurs en CSS, certaines ayant été plus récemment implémentées que d'autres. Les mêmes valeurs de couleur peuvent être utilisées n'importe où en CSS, qu'il s'agisse d'une couleur pour du texte, d'une couleur d'arrière-plan ou de toute autre couleur.
 
-Le système standard de couleurs disponible pour les ordinateurs modernes utilise 24 bits, ce qui permet d'afficher 16,7 millions de couleurs différentes par des combinaisons de canaux rouge, vert et bleu dont chacun peut avoir 256 valeurs distinctes (256 x 256 x 256 = 16 777 216). Voyons quelques façons d'indiquer des couleurs en CSS.
+Le système standard de couleurs disponible pour les ordinateurs modernes utilise 24 bits, ce qui permet d'afficher 16,7 millions de couleurs différentes par des combinaisons de canaux rouge, vert et bleu dont chacun peut avoir 256 valeurs distinctes (256 x 256 x 256 = 16 777 216). Voyons quelques façons d'indiquer des couleurs en CSS.
 
 > **Note :** Dans ce tutoriel, nous verrons les méthodes communément utilisées pour définir les couleurs et qui disposent d'une bonne prise en charge des navigateurs. Il en existe d'autres, mais elles sont moins bien prises en charge et sont moins fréquentes.
 
@@ -180,7 +180,7 @@ Dans la plupart des exemples de cette section d'apprentissage ou à d'autres end
 
 ### Valeurs RGB hexadécimales
 
-Les autres valeurs de couleur que vous rencontrerez assez souvent sont celles représentées avec des codes hexadécimaux. Chaque valeur hexadécimale se compose d'un croisillon (#) suivi de six chiffres hexadécimaux dont chacun peut prendre une valeur parmi 16 : de 0 à f (la lettre utilisée pour représentée 15) (les chiffres hexadécimaux sont : `0123456789abcdef`). Dans ces six chiffres, chaque paire de chiffre représente la valeur pour l'un des canaux de couleurs (rouge, vert et bleu) et permet d'indiquer l'une des 256 valeurs disponibles.
+Les autres valeurs de couleur que vous rencontrerez assez souvent sont celles représentées avec des codes hexadécimaux. Chaque valeur hexadécimale se compose d'un croisillon (#) suivi de six chiffres hexadécimaux dont chacun peut prendre une valeur parmi 16 : de 0 à f (la lettre utilisée pour représentée 15) (les chiffres hexadécimaux sont&nbsp;: `0123456789abcdef`). Dans ces six chiffres, chaque paire de chiffre représente la valeur pour l'un des canaux de couleurs (rouge, vert et bleu) et permet d'indiquer l'une des 256 valeurs disponibles.
 
 Ces valeurs sont un peu plus complexes et moins faciles à comprendre, mais elles permettent d'exprimer beaucoup plus de couleurs que les mots-clés. Vous pouvez utiliser les valeurs hexadécimales pour représenter n'importe quelle couleur dans votre palette.
 
@@ -190,17 +190,17 @@ Ces valeurs sont un peu plus complexes et moins faciles à comprendre, mais elle
 
 ### Les valeurs RGB et RGBA
 
-La troisième façon que nous aborderons ici est RGB (pour « <i lang="en">Red, Green, Blue</i> » soit : rouge, vert, bleu en français). Une valeur RGB est une fonction `rgb()` à laquelle on passe trois paramètres qui représentent respectivement les valeurs des canaux rouge, vert, bleu (de la même façon que pour les valeurs hexadécimales). Contrairement aux valeurs hexadécimales, les valeurs des composantes ne sont pas exprimées en hexadécimal (avec des chiffres de 0 à f) mais avec un nombre décimal compris entre 0 et 255. Cela rend la compréhension de la valeur plus simple.
+La troisième façon que nous aborderons ici est RGB (pour «&nbsp;<i lang="en">Red, Green, Blue</i>&nbsp;» soit&nbsp;: rouge, vert, bleu en français). Une valeur RGB est une fonction `rgb()` à laquelle on passe trois paramètres qui représentent respectivement les valeurs des canaux rouge, vert, bleu (de la même façon que pour les valeurs hexadécimales). Contrairement aux valeurs hexadécimales, les valeurs des composantes ne sont pas exprimées en hexadécimal (avec des chiffres de 0 à f) mais avec un nombre décimal compris entre 0 et 255. Cela rend la compréhension de la valeur plus simple.
 
-Réécrivons notre dernier exemple afin d'utiliser les couleurs RGB :
+Réécrivons notre dernier exemple afin d'utiliser les couleurs RGB&nbsp;:
 
 {{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}}
 
-Il est aussi possible d'utiliser des couleurs RGBA : celles-ci fonctionnent exactement comme les couleurs RGB (et il est donc possible d'utiliser n'importe quelle valeur RGB pour une valeur RGBA). Toutefois, les valeurs RGBA utilisent une quatrième valeur qui représente le canal alpha de la couleur qui contrôle son opacité. Avec une valeur de `0` pour le canal alpha, la couleur sera complètement transparente tandis qu'avec `1`, elle sera complètement opaque. Les valeurs intermédiaires fourniront des niveaux progressifs d'opacité.
+Il est aussi possible d'utiliser des couleurs RGBA&nbsp;: celles-ci fonctionnent exactement comme les couleurs RGB (et il est donc possible d'utiliser n'importe quelle valeur RGB pour une valeur RGBA). Toutefois, les valeurs RGBA utilisent une quatrième valeur qui représente le canal alpha de la couleur qui contrôle son opacité. Avec une valeur de `0` pour le canal alpha, la couleur sera complètement transparente tandis qu'avec `1`, elle sera complètement opaque. Les valeurs intermédiaires fourniront des niveaux progressifs d'opacité.
 
 > **Note :** Définir un canal alpha sur une couleur n'est pas exactement la même chose qu'utiliser la propriété [`opacity`](/fr/docs/Web/CSS/opacity) dont nous avons parlé auparavant. Lorsqu'on utilise `opacity`, c'est tout l'élément et ce qu'il contient qui devient plus ou moins opaque/transparent alors que lorsqu'on définit une couleur RGBA, seule la couleur est plus ou moins opaque.
 
-Dans l'exemple qui suit, on a ajouté une image d'arrière-plan au bloc englobant les boîtes colorées. On a ensuite réglé différentes valeurs d'opacité pour les différentes boîtes : vous pouvez voir comment l'arrière-plan est de plus en plus visible au fur et à mesure que la valeur du canal alpha est faible.
+Dans l'exemple qui suit, on a ajouté une image d'arrière-plan au bloc englobant les boîtes colorées. On a ensuite réglé différentes valeurs d'opacité pour les différentes boîtes&nbsp;: vous pouvez voir comment l'arrière-plan est de plus en plus visible au fur et à mesure que la valeur du canal alpha est faible.
 
 {{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}
 
@@ -210,13 +210,13 @@ Dans l'exemple qui suit, on a ajouté une image d'arrière-plan au bloc engloban
 
 ### Valeurs HSL et HSLA
 
-Avec une prise en charge légèrement plus faible que RGB, on a le modèle de couleurs HSL (non pris en charge pour d'anciennes versions d'Internet Explorer) qui a été implémentée après un intérêt marqué de la part des designers. Plutôt que d'indiquer des valeurs pour les canaux rouge, vert, bleu, la fonction `hsl()` prend des paramètres pour la teinte (<i lang="en">hue</i> en anglais), la saturation et la luminosité. Cela permet aussi d'obtenir 16,7 millions de couleurs mais différemment :
+Avec une prise en charge légèrement plus faible que RGB, on a le modèle de couleurs HSL (non pris en charge pour d'anciennes versions d'Internet Explorer) qui a été implémentée après un intérêt marqué de la part des designers. Plutôt que d'indiquer des valeurs pour les canaux rouge, vert, bleu, la fonction `hsl()` prend des paramètres pour la teinte (<i lang="en">hue</i> en anglais), la saturation et la luminosité. Cela permet aussi d'obtenir 16,7 millions de couleurs mais différemment&nbsp;:
 
-- **Teinte (<i lang="en">hue</i>)** : La couleur de base. La valeur utilisée est comprise entre 0 et 360 et représente l'angle sur une roue de couleurs.
-- **Saturation** : La saturation de la couleur. La valeur est comprise entre 0 et 100% où 0 indique qu'il n'y a pas de couleur (ce sera une nuance de gris) et où 100% indique une saturation en couleur complète.
-- **Luminosité** : La clarté ou la luminosité de la couleur. La valeur est comprise entre 0 et 100%, où 0 indique qu'il n'y a pas de luminosité (la couleur sera complètement noire) et où 100% indique une lumière pure (la couleur sera complètement blanche).
+- **Teinte (<i lang="en">hue</i>)**&nbsp;: La couleur de base. La valeur utilisée est comprise entre 0 et 360 et représente l'angle sur une roue de couleurs.
+- **Saturation**&nbsp;: La saturation de la couleur. La valeur est comprise entre 0 et 100% où 0 indique qu'il n'y a pas de couleur (ce sera une nuance de gris) et où 100% indique une saturation en couleur complète.
+- **Luminosité**&nbsp;: La clarté ou la luminosité de la couleur. La valeur est comprise entre 0 et 100%, où 0 indique qu'il n'y a pas de luminosité (la couleur sera complètement noire) et où 100% indique une lumière pure (la couleur sera complètement blanche).
 
-On peut mettre à jour notre exemple RGB afin d'utiliser les couleurs HSL :
+On peut mettre à jour notre exemple RGB afin d'utiliser les couleurs HSL&nbsp;:
 
 {{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}}
 
@@ -224,7 +224,7 @@ On peut mettre à jour notre exemple RGB afin d'utiliser les couleurs HSL :
 
 {{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}}
 
-Vous pouvez utiliser n'importe laquelle de ces couleurs dans vos projets et il est probable que, pour la plupart des projets, vous décidiez d'une palette de couleurs pour vous limiter à elles dans un souci de cohérence, de même pour la méthode utilisée pour définir les couleurs. Vous pouvez bien entendu mélanger les différents modèles de définition des couleurs, mais il est souvent mieux d'être cohérent et d'en fixer un seul pour un même projet !
+Vous pouvez utiliser n'importe laquelle de ces couleurs dans vos projets et il est probable que, pour la plupart des projets, vous décidiez d'une palette de couleurs pour vous limiter à elles dans un souci de cohérence, de même pour la méthode utilisée pour définir les couleurs. Vous pouvez bien entendu mélanger les différents modèles de définition des couleurs, mais il est souvent mieux d'être cohérent et d'en fixer un seul pour un même projet&nbsp;!
 
 ## Images
 
@@ -240,7 +240,7 @@ Voici un exemple où on utilise une image et un dégradé pour la propriété CS
 
 Le type de valeur [`<position>`](/fr/docs/Web/CSS/position_value) représente un ensemble de coordonnées sur deux dimensions, utilisé pour positionner un objet comme une image d'arrière-plan (via [`background-position`](/fr/docs/Web/CSS/background-position)). Ces valeurs peuvent être indiquées avec des mots-clés comme `top`, `left`, `bottom`, `right`, et `center` afin d'aligner les objets sur les bords d'une boîte en deux dimensions et avec des longueurs qui représentent les décalages par rapport au coin supérieur gauche de la boîte.
 
-Une position se compose généralement de deux valeurs : la première indiquant la position horizontale et la seconde indiquant la position verticale. Si une seule valeur est fournie, l'autre valeur sera `center` par défaut.
+Une position se compose généralement de deux valeurs&nbsp;: la première indiquant la position horizontale et la seconde indiquant la position verticale. Si une seule valeur est fournie, l'autre valeur sera `center` par défaut.
 
 Dans l'exemple suivant, on a positionné une image d'arrière-plan à 40px du bord haut et vers la droite du conteneur en utilisant un mot-clé.
 
@@ -250,7 +250,7 @@ Dans l'exemple suivant, on a positionné une image d'arrière-plan à 40px du bo
 
 ## Chaînes de caractères et identifiants
 
-Dans les différents exemples qui précèdent, on a vu des endroits où les mots-clés sont utilisés comme valeur (par exemple `<color>` qui peut utiliser des mots-clés comme `red`, `black`, `rebeccapurple`, et `goldenrod`). Si on veut être plus précis, on dira que ces mots-clés sont des _identifiants_, une valeur spéciale comprise par le moteur CSS. Ces identifiants n'ont pas besoin d'être délimités par des guillemets/quotes : ce ne sont pas des chaînes de caractères.
+Dans les différents exemples qui précèdent, on a vu des endroits où les mots-clés sont utilisés comme valeur (par exemple `<color>` qui peut utiliser des mots-clés comme `red`, `black`, `rebeccapurple`, et `goldenrod`). Si on veut être plus précis, on dira que ces mots-clés sont des _identifiants_, une valeur spéciale comprise par le moteur CSS. Ces identifiants n'ont pas besoin d'être délimités par des guillemets/quotes&nbsp;: ce ne sont pas des chaînes de caractères.
 
 À d'autres endroits en CSS, on utilise des chaînes de caractères, comme [lorsqu'on définit du contenu généré](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#generating_content_with_before_and_after). Dans ces cas, la valeur est délimitée par des quotes (" ou ') pour indiquer qu'il s'agit bien d'une chaîne de caractères. Dans l'exemple qui suit, on utilise des mots-clés de couleur (des identifiants sans quote) ainsi qu'une chaîne de caractères pour du contenu généré.
 
@@ -258,17 +258,17 @@ Dans les différents exemples qui précèdent, on a vu des endroits où les mots
 
 ## Functions
 
-Les dernières valeurs que nous verrons ici sont les fonctions. En programmation, une fonction est une section de code réutilisable qui peut être exécutée plusieurs fois afin de réaliser une tâche de façon répétitive avec le minimum effort de la part du développeur ou de l'ordinateur. Les fonctions sont généralement associées à des langages comme JavaScript, Python ou C++ mais elles existent en CSS également pour être utilisées comme valeurs de propriétés. En fait, nous avons déjà vu des fonctions dans la section à propos des couleurs : `rgb()`, `hsl()`, etc. La valeur utilisée pour récupérer une image à partir d'un fichier, `url()` est également une fonction.
+Les dernières valeurs que nous verrons ici sont les fonctions. En programmation, une fonction est une section de code réutilisable qui peut être exécutée plusieurs fois afin de réaliser une tâche de façon répétitive avec le minimum effort de la part du développeur ou de l'ordinateur. Les fonctions sont généralement associées à des langages comme JavaScript, Python ou C++ mais elles existent en CSS également pour être utilisées comme valeurs de propriétés. En fait, nous avons déjà vu des fonctions dans la section à propos des couleurs&nbsp;: `rgb()`, `hsl()`, etc. La valeur utilisée pour récupérer une image à partir d'un fichier, `url()` est également une fonction.
 
 Une fonction qui est peut-être plus proche des langages de programmation traditionnels est la fonction CSS `calc()`. Cette fonction permet de réaliser des calculs simples à l'intérieur du code CSS. Elle s'avère particulièrement utile pour déterminer des valeurs qui ne sont pas connues d'avance lorsqu'on écrit la feuille de style CSS et pour lesquelles ce sera le navigateur qui pourra les déterminer lors de l'exécution.
 
-Dans le prochain exemple, on utilise `calc()` afin que la boîte soit large de `20% + 100px`. Les 20% sont calculés à partir de la largeur du conteneur parent : `.wrapper` et changeront donc lorsque la largeur du parent changera. Ce calcul ne peut pas être effectué au préalable, car on ne peut pas savoir à l'avance ce que représenteront ces 20%. Aussi, on utilise `calc()` pour indiquer au navigateur de réaliser ce calcul.
+Dans le prochain exemple, on utilise `calc()` afin que la boîte soit large de `20% + 100px`. Les 20% sont calculés à partir de la largeur du conteneur parent&nbsp;: `.wrapper` et changeront donc lorsque la largeur du parent changera. Ce calcul ne peut pas être effectué au préalable, car on ne peut pas savoir à l'avance ce que représenteront ces 20%. Aussi, on utilise `calc()` pour indiquer au navigateur de réaliser ce calcul.
 
 {{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}
 
-## Testez vos compétences !
+## Testez vos compétences&nbsp;!
 
-Nous avons abordé de nombreuses notions dans cet article. Avez-vous retenu les informations essentielles ? Vous pourrez trouver différents exercices pour vérifier que vous avez retenu les bonnes informations avant de poursuivre : rendez-vous sur [Testez vos compétences : valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_tasks).
+Nous avons abordé de nombreuses notions dans cet article. Avez-vous retenu les informations essentielles&nbsp;? Vous pourrez trouver différents exercices pour vérifier que vous avez retenu les bonnes informations avant de poursuivre&nbsp;: rendez-vous sur [Testez vos compétences&nbsp;: valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_tasks).
 
 ## Résumé
 
diff --git a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md
index aada82d606..3c9dc41735 100644
--- a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md
+++ b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md
@@ -6,7 +6,7 @@ original_slug: Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension
 ---
 {{LearnSidebar}}
 
-Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.
+Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.
 
 <table class="standard-table">
   <tbody>
@@ -35,9 +35,9 @@ Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintena
 
 ### configuration de base
 
-Vous pouvez télécharger le code HTML, CSS et un ensemble de six images [ici](https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension) .
+Vous pouvez télécharger le code HTML, CSS et un ensemble de six images [ici](https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension) .
 
-Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé `images`. Ouvrir le `index.html`fichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous.
+Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé `images`. Ouvrir le `index.html`fichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous.
 
 Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal.
 
@@ -45,12 +45,12 @@ Ce point de départ contient tout le contenu de votre mise en page, tel qu’il
 
 ### Votre section de tâches
 
-Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:
+Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:
 
 1.  Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.
 2.  La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint.
 3.  L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.
-4.  Les éléments [`<article>`](/fr/docs/Web/HTML/Element/article)et [`<aside>`](/fr/docs/Web/HTML/Element/aside)doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.
+4.  Les éléments [`<article>`](/fr/docs/Web/HTML/Element/article)et [`<aside>`](/fr/docs/Web/HTML/Element/aside)doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.
 5.  Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.
 
 Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:
@@ -60,11 +60,11 @@ Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentatio
 - Flexbox
 - CSS Grid Layout
 
-Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses. Essayez différentes approches et voyez laquelle fonctionne le mieux. Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le [canal](irc://irc.mozilla.org/mdn) IRC [#mdn](irc://irc.mozilla.org/mdn) .
+Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses. Essayez différentes approches et voyez laquelle fonctionne le mieux. Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le [canal](irc://irc.mozilla.org/mdn) IRC [#mdn](irc://irc.mozilla.org/mdn) .
 
 ## Evaluation
 
-Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le [fil de discussion relatif à cet exercice](https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982) ou sur le [canal](irc://irc.mozilla.org/mdn) IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC) . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!
+Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le [fil de discussion relatif à cet exercice](https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982) ou sur le [canal](irc://irc.mozilla.org/mdn) IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC) . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!
 
 ## Dans ce module Section
 
diff --git a/files/fr/learn/css/css_layout/index.md b/files/fr/learn/css/css_layout/index.md
index 5a8db10ccf..d5aa4da568 100644
--- a/files/fr/learn/css/css_layout/index.md
+++ b/files/fr/learn/css/css_layout/index.md
@@ -22,11 +22,11 @@ original_slug: Apprendre/CSS/CSS_layout
 ---
 {{LearnSidebar}}
 
-À ce stade, les principes fondamentaux du CSS ont été vus : comment composer le texte et comment mettre en forme et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires ont été examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec CSS, en regardant les différents paramètres d'affichage, les outils modernes tels que « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.
+À ce stade, les principes fondamentaux du CSS ont été vus : comment composer le texte et comment mettre en forme et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires ont été examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec CSS, en regardant les différents paramètres d'affichage, les outils modernes tels que «&nbsp;flexbox&nbsp;», les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.
 
 > **Remarque :**
 >
-> Vous cherchez à devenir développeuse ou développeur web front-end ?
+> Vous cherchez à devenir développeuse ou développeur web front-end&nbsp;?
 >
 > Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.
 >
diff --git a/files/fr/learn/css/css_layout/introduction/index.md b/files/fr/learn/css/css_layout/introduction/index.md
index 9edb2531f8..be69dc0ce5 100644
--- a/files/fr/learn/css/css_layout/introduction/index.md
+++ b/files/fr/learn/css/css_layout/introduction/index.md
@@ -24,7 +24,7 @@ Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Les fondamentaux du HTML (étudiez
         <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML"
@@ -35,7 +35,7 @@ Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Vous donner un aperçu des techniques de mise en page des CSS. Chaque
         technique peut être apprise plus précisément dans des tutoriels dédiés.
@@ -70,30 +70,30 @@ Le cours normal est la manière dont le navigateur présente les pages HTML par
   <li>Haut les cœurs, ami</li>
 </ul>
 
-<p>La fin !</p>
+<p>La fin&nbsp;!</p>
 ```
 
-Par défaut, le navigateur affichera ce code ainsi :
+Par défaut, le navigateur affichera ce code ainsi&nbsp;:
 
 {{ EmbedLiveSample('Cours_normal', '100%', 200) }}
 
-Notez que le HTML est affiché dans l'ordre exact où il est dans le code source : les éléments s'empilent les uns sur les autres — le premier paragraphe, puis la liste non ordonnée suivie par le second paragraphe.
+Notez que le HTML est affiché dans l'ordre exact où il est dans le code source&nbsp;: les éléments s'empilent les uns sur les autres — le premier paragraphe, puis la liste non ordonnée suivie par le second paragraphe.
 
 Les éléments disposés en empilement sont désignés comme étant des éléments _blocs_, par opposition aux éléments _en ligne_ qui apparaissent l'un après l'autre telle la succession de mots distincts d'un paragraphe.
 
-> **Note :** « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.
+> **Note :** «&nbsp;Block Direction&nbsp;» (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La «&nbsp;Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.
 
-Lorsque vous utilisez les CSS pour faire une mise en page, vous déplacez les éléments de leur cours normal ; toutefois, pour la plupart des éléments de la page, ce cours normal crée exactement la mise en page dont vous avez besoin. C'est pourquoi il est si important de commencer avec un document HTML bien structuré, car vous pouvez alors travailler la façon dont les choses seront disposées par défaut au lieu de lutter contre cette disposition.
+Lorsque vous utilisez les CSS pour faire une mise en page, vous déplacez les éléments de leur cours normal&nbsp;; toutefois, pour la plupart des éléments de la page, ce cours normal crée exactement la mise en page dont vous avez besoin. C'est pourquoi il est si important de commencer avec un document HTML bien structuré, car vous pouvez alors travailler la façon dont les choses seront disposées par défaut au lieu de lutter contre cette disposition.
 
 Les méthodes des CSS pouvant changer le placement des éléments sont les suivantes :
 
 - **La propriété {{cssxref("display")}}** — les valeurs standards comme `block`, `inline` ou `inline-block` peuvent changer la manière dont l'élément se comporte dans le cours normal (voir [Types de boîtes](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte) pour plus d'informations). Ensuite, nous disposons de méthodes de mise en page autonomes activées par l'intermédiaire d'une valeur de `display`, par exemple les [Grilles CSS](/fr/docs/Learn/CSS/CSS_layout/Grids) ou [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox).
-- **Flotteurs** — appliquer à {{cssxref("float")}} une valeur comme `left` peut créer une juxtaposition d'un élément bloc à côté d'un autre, tout comme les images « baignent » dans le texte dans les mises en page de magazines.
+- **Flotteurs** — appliquer à {{cssxref("float")}} une valeur comme `left` peut créer une juxtaposition d'un élément bloc à côté d'un autre, tout comme les images «&nbsp;baignent&nbsp;» dans le texte dans les mises en page de magazines.
 - **La propriété {{cssxref("position")}}** — vous permet de contrôler avec précision le placement de boîtes dans d'autres boîtes. `static` est le placement par défaut dans le cours, mais vous pouvez manipuler les éléments pour qu'ils se comportent différemment à l'aide d'autres valeurs, par exemple en les fixant en haut à gauche de la fenêtre d'affichage du navigateur.
 - **Mise en page de tableaux** — les fonctions conçues pour styliser les parties d'un tableau HTML peuvent être utilisées sur des éléments non tableau en utilisant `display: table` et les propriétés associées.
 - **Mise en page sur plusieurs colonnes** — Les propriétés [Multi-column](/fr/docs/Web/CSS/CSS_Columns) peuvent faire qu'un contenu bloc soit disposé en colonnes, comme dans un journal.
 
-## La propriété « display »
+## La propriété «&nbsp;display »
 
 Les principales modalités de mise en page avec les CSS relèvent toutes des valeurs de la propriété `display`. Cette propriété permet de modifier l'affichage par défaut des éléments. Chaque chose dans le cours normal a une valeur de propriété `display`. Les éléments se règlent sur cette valeur pour définir leur comportement par défaut. Par exemple, le fait que des paragraphes en langue anglaise se placent les uns au dessus des autres provient du fait que leur style est `display: block`. Si vous créez un lien sur un texte à l'intérieur d'un paragraphe, ce lien reste aligné avec le reste du texte et ne s'affiche pas sur une nouvelle ligne. C'est parce que l'élément {{htmlelement("a")}} est `display: inline` par défaut.
 
@@ -103,13 +103,13 @@ En plus de pouvoir changer la présentation par défaut en faisant passer un él
 
 ## Flexbox
 
-Flexbox est l'abréviation pour [Flexible Box Layout](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser `flexbox`, appliquez `display: flex` à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments `flex`. Voyons cela avec un simple exemple.
+Flexbox est l'abréviation pour [Flexible Box Layout](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser `flexbox`, appliquez `display: flex` à l'élément parent des éléments à placer&nbsp;; tous ses enfants directs deviennent alors des éléments `flex`. Voyons cela avec un simple exemple.
 
 Le balisage HTML ci-dessous crée un élément conteneur de la classe `wrapper`, dans lequel nous plaçons 3 éléments {{htmlelement("div")}}. Par défaut ces éléments s'afficheront en tant qu'éléments blocs, les uns sous les autres, dans ce document en langue française.
 
 ### Utiliser display: flex
 
-Mais nous ajoutons `display: flex` sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des _éléments flex_ et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est `row`. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est `stretch`. Ce qui signifie que les éléments se casent dans la hauteur du conteneur `flex` défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace.
+Mais nous ajoutons `display: flex` sur le parent&nbsp;; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des _éléments flex_ et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est `row`. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est `stretch`. Ce qui signifie que les éléments se casent dans la hauteur du conteneur `flex` défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace.
 
 ```css hidden
 * {box-sizing: border-box;}
@@ -142,7 +142,7 @@ Mais nous ajoutons `display: flex` sur le parent ; les trois éléments se pla
 
 En plus des propriétés ci-dessus applicables au conteneur `flex`, il existe des propriétés applicables aux éléments flex. Ces propriétés, entre autres choses, peuvent changer le mode d'adaptation des éléments, leur permettant de s'étaler et de se resserrer pour s'adapter à l'espace disponible.
 
-À titre d'exemple, nous pouvons donner la valeur `1` à la propriété {{cssxref("flex")}} des éléments enfants. Tous les éléments vont grandir jusqu'à remplir le conteneur, au lieu de laisser de l'espace à la suite. S'il y a assez d'espace, les éléments vont devenir plus larges ; s'il y en a moins ils vont devenir plus étroits. En outre, si vous ajoutez un autre élément au balisage, les éléments vont rapetisser pour lui faire de la place — ils ajusteront leur taille pour prendre la même quantité d'espace, quel qu'il soit.
+À titre d'exemple, nous pouvons donner la valeur `1` à la propriété {{cssxref("flex")}} des éléments enfants. Tous les éléments vont grandir jusqu'à remplir le conteneur, au lieu de laisser de l'espace à la suite. S'il y a assez d'espace, les éléments vont devenir plus larges&nbsp;; s'il y en a moins ils vont devenir plus étroits. En outre, si vous ajoutez un autre élément au balisage, les éléments vont rapetisser pour lui faire de la place — ils ajusteront leur taille pour prendre la même quantité d'espace, quel qu'il soit.
 
 ```css hidden
     * {box-sizing: border-box;}
@@ -175,13 +175,13 @@ En plus des propriétés ci-dessus applicables au conteneur `flex`, il existe de
 
 {{ EmbedLiveSample('Définir_la_propriété_flex', '300', '200') }}
 
-> **Note :** Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox).
+> **Note :** Ce n'est qu'une très brève introduction aux possibilités de Flexbox&nbsp;: pour en apprendre plus, voyez notre article sur [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox).
 
 ## Disposition en trame
 
-Alors que « flexbox » est conçu pour une disposition unidimensionnelle, « Grid Layout » (Disposition tramée) est bidimensionnel — il place les choses en rangées et colonnes.
+Alors que «&nbsp;flexbox&nbsp;» est conçu pour une disposition unidimensionnelle, «&nbsp;Grid Layout&nbsp;» (Disposition tramée) est bidimensionnel — il place les choses en rangées et colonnes.
 
-À nouveau, vous basculez en disposition tramée en donnant une valeur appropriée à `display` — `display: grid`. L'exemple ci-dessous utilise un balisage semblable à celui de l'exemple flex : un conteneur et quelques éléments enfants. Outre `display: grid`, nous définissons une trame de placement sur le parent avec les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}. Nous avons défini trois colonnes de `1fr` chacune et deux lignes de `100px`. Il n'est pas nécessaire de mettre de règles sur les éléments enfants ; il seront automatiquement placés dans les cellules de trame créées.
+À nouveau, vous basculez en disposition tramée en donnant une valeur appropriée à `display` — `display: grid`. L'exemple ci-dessous utilise un balisage semblable à celui de l'exemple flex&nbsp;: un conteneur et quelques éléments enfants. Outre `display: grid`, nous définissons une trame de placement sur le parent avec les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}. Nous avons défini trois colonnes de `1fr` chacune et deux lignes de `100px`. Il n'est pas nécessaire de mettre de règles sur les éléments enfants&nbsp;; il seront automatiquement placés dans les cellules de trame créées.
 
 ### Utiliser display: grid
 
@@ -267,7 +267,7 @@ Une fois la trame créée, vous pouvez y placer explicitement les éléments au
 
 {{ EmbedLiveSample('Placer_des_objets_sur_la_grille', '300', '330') }}
 
-> **Note :** Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article [Disposition tramée](/fr/docs/Learn/CSS/CSS_layout/Grids).
+> **Note :** Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées&nbsp;; pour en savoir plus, voyez l'article [Disposition tramée](/fr/docs/Learn/CSS/CSS_layout/Grids).
 
 La suite de ce guide porte sur d'autres méthodes de mise en page. Elles ont moins d'importance pour la structure générale de la mise en page, mais peuvent tout de même vous aider à réaliser des tâches spécifiques. En comprenant la nature de chaque tâche de mise en page, vous découvrez rapidement, en regardant un composant particulier de votre design, que le type de mise en page le plus adapté est souvent évident.
 
@@ -275,7 +275,7 @@ La suite de ce guide porte sur d'autres méthodes de mise en page. Elles ont moi
 
 Faire flotter un élément change son comportement ainsi que celui de l'élément qui le suit dans le cours normal. L'élément est déplacé à gauche ou à droite. Il est sorti du cours normal. Le contenu environnant l'enveloppe comme si l'élément flottait dans ce contenu.
 
-La propriété {{cssxref("float")}} a quatre valeurs possibles :
+La propriété {{cssxref("float")}} a quatre valeurs possibles&nbsp;:
 
 - `left` — fait flotter l'élément sur la gauche.
 - `right` — fait flotter l'élément sur la droite.
@@ -331,13 +331,13 @@ Le positionnement permet de déplacer un élément de l'endroit où il serait pl
 
 Il existe cependant des techniques utiles pour certains modes de positionnement se fondant sur la propriété {{cssxref("position")}}. Comprendre le positionnement aide aussi à comprendre le cours normal et le fait de déplacer un objet hors du cours normal.
 
-Il y a cinq types de positionnement à connaître :
+Il y a cinq types de positionnement à connaître&nbsp;:
 
-- **positionnement statique** : valeur par défaut reçue par chaque élément — il signifie simplement « placer l'élément à sa position normale suivant le cours normal de mise en page du document — rien de spécial à constater ici ».
+- **positionnement statique** : valeur par défaut reçue par chaque élément — il signifie simplement «&nbsp;placer l'élément à sa position normale suivant le cours normal de mise en page du document — rien de spécial à constater ici&nbsp;».
 - **positionnement relatif :** modification de la position d'un élément dans la page — il est déplacé par rapport à sa position dans le cours normal — y compris la possibilité de chevaucher d'autres éléments de la page.
 - **positionnement absolu** : déplacement d'un élément indépendamment du cours normal de positionnement, comme s'il était placé sur un calque séparé. À partir de là, vous pouvez le fixer à une position relative au bord de la page de l'élément `<html>` (ou de son plus proche élément ancêtre positionné). Ce positionnement est utile pour créer des effets de mise en page complexes tels que des boîtes à onglets où différents panneaux de contenu sont superposés, affichés ou cachés comme vous le souhaitez, ou des panneaux d'information hors de l'écran par défaut, mais qui peuvent glisser à l'écran à l'aide d'un bouton de contrôle.
 - **positionnement fixe :** tout à fait semblable au précédent, à l'exception que l'élément est fixé par rapport à la vue du navigateur et non d'un autre élément. C'est très pratique pour créer des effets tels qu'un menu de navigation persistant, toujours au même endroit sur l'écran, quand l'utilisateur fait défiler le reste de la page.
-- **positionnement collant :** nouvelle méthode de positionnement qui fait qu'un élément se comporte comme `position: static` jusqu'à un certain décalage de la vue au delà duquel il se comporte comme si sa propriété était `position: fixed`.
+- **positionnement collant&nbsp;:** nouvelle méthode de positionnement qui fait qu'un élément se comporte comme `position: static` jusqu'à un certain décalage de la vue au delà duquel il se comporte comme si sa propriété était `position: fixed`.
 
 ### Exemple simple de positionnement
 
@@ -351,7 +351,7 @@ Afin de se familiariser avec ces techniques de mises en page, nous allons vous m
 <p>Je suis un élément de niveau bloc de base.</p>
 ```
 
-Ce code HTML sera stylisé par défaut en utilisant la CSS suivante :
+Ce code HTML sera stylisé par défaut en utilisant la CSS suivante&nbsp;:
 
 ```css
 body {
@@ -374,7 +374,7 @@ Le rendu est le suivant:
 
 ### Positionnement relatif
 
-Le positionnement relatif vous permet de décaler un élément de la position qu'il occuperait par défaut dans le cours normal de la mise en page. Ce positionnement permet de déplacer légèrement une icône pour l'aligner avec une étiquette de texte. Pour faire cette opération, nous ajoutons la règle suivante pour réaliser le positionnement relatif :
+Le positionnement relatif vous permet de décaler un élément de la position qu'il occuperait par défaut dans le cours normal de la mise en page. Ce positionnement permet de déplacer légèrement une icône pour l'aligner avec une étiquette de texte. Pour faire cette opération, nous ajoutons la règle suivante pour réaliser le positionnement relatif&nbsp;:
 
 ```css
 .positioned {
@@ -384,9 +384,9 @@ Le positionnement relatif vous permet de décaler un élément de la position qu
 }
 ```
 
-Ici, nous donnons au paragraphe médian à la propriété  {{cssxref("position")}} la valeur `relative` — ce qui ne fait rien en soi, alors nous ajoutons également les propriétés {{cssxref("top")}} et {{cssxref("left")}}. Elles servent à déplacer l'élément en question vers le bas et à droite — cela pourrait sembler être l'opposé de ce à quoi vous vous attendiez, mais représentez-vous l'élément comme poussé à partir de ses côtés gauche et haut : il en résulte un déplacement vers la droite et vers le bas.
+Ici, nous donnons au paragraphe médian à la propriété  {{cssxref("position")}} la valeur `relative` — ce qui ne fait rien en soi, alors nous ajoutons également les propriétés {{cssxref("top")}} et {{cssxref("left")}}. Elles servent à déplacer l'élément en question vers le bas et à droite — cela pourrait sembler être l'opposé de ce à quoi vous vous attendiez, mais représentez-vous l'élément comme poussé à partir de ses côtés gauche et haut&nbsp;: il en résulte un déplacement vers la droite et vers le bas.
 
-Ajouter ce code donne le résultat suivant :
+Ajouter ce code donne le résultat suivant&nbsp;:
 
 ```html hidden
 <h1>Positionnement relatif</h1>
@@ -427,7 +427,7 @@ p {
 
 Le positionnement absolu s'utilise pour sortir totalement un élément du cours normal de la mise en page et le placer selon son décalage par rapport à un bloc conteneur.
 
-En revenant à l'exemple sans positionnement, nous pourrions ajouter la règle CSS suivante pour implémenter un positionnement absolu :
+En revenant à l'exemple sans positionnement, nous pourrions ajouter la règle CSS suivante pour implémenter un positionnement absolu&nbsp;:
 
 ```css
 .positioned {
@@ -437,7 +437,7 @@ En revenant à l'exemple sans positionnement, nous pourrions ajouter la règle C
 }
 ```
 
-Ici pour notre paragraphe médian, nous donnons à la propriété {{cssxref("position")}} la valeur `absolute` et les mêmes valeurs aux propriétés {{cssxref("top")}} et {{cssxref("left")}} que précédemment. Ajouter ce code, cependant, donnera le résultat suivant :
+Ici pour notre paragraphe médian, nous donnons à la propriété {{cssxref("position")}} la valeur `absolute` et les mêmes valeurs aux propriétés {{cssxref("top")}} et {{cssxref("left")}} que précédemment. Ajouter ce code, cependant, donnera le résultat suivant&nbsp;:
 
 ```html hidden
 <h1>Positionnement absolu</h1>
@@ -474,7 +474,7 @@ p {
 
 {{ EmbedLiveSample('Positionnement_absolu', '100%', 300) }}
 
-C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le [positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning).
+C'est vraiment différent&nbsp;! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le [positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning).
 
 ### Positionnement fixé
 
@@ -531,7 +531,7 @@ body {
 
 ### Positionnement collant
 
-Le positionnement collant est la dernière méthode de positionnement à notre disposition. Elle mélange le positionnement statique par défaut avec le positionnement fixé. Lorsqu'un élément a la propriété `position: sticky`, il défile dans le cours normal jusqu'à atteindre un décalage défini de la fenêtre de vue. A ce moment-là, il est « collé » comme si `position: fixed` lui était appliqué.
+Le positionnement collant est la dernière méthode de positionnement à notre disposition. Elle mélange le positionnement statique par défaut avec le positionnement fixé. Lorsqu'un élément a la propriété `position: sticky`, il défile dans le cours normal jusqu'à atteindre un décalage défini de la fenêtre de vue. A ce moment-là, il est «&nbsp;collé&nbsp;» comme si `position: fixed` lui était appliqué.
 
 ```html hidden
 <h1>Positionnement collant</h1>
@@ -576,7 +576,7 @@ body {
 
 Les tableaux HTML sont utiles pour afficher des données sous forme de tableaux, mais il y a des années de cela — avant même que les bases des CSS soit prises en charge de manière fiable par les navigateurs — les développeurs web avaient l'habitude d'utiliser les tableaux pour agencer toute la mise en page — y plaçant les en‑têtes, les pieds-de-page, diverses colonnes, etc. en multiples lignes et colonnes de tableaux. Cela fonctionnait en son temps, mais il y avait beaucoup de problèmes — la mise en page par tableau n'est pas souple, très lourde en balisage, difficile à déboguer et sémantiquement erronée (par ex., les utilisateurs de lecteur d'écran avaient des problèmes de navigation avec cette disposition en tableau).
 
-La façon dont un tableau est affiché sur une page web quand vous utilisez le balisage « table » résulte d'un ensemble de propriétés des CSS définissant la composition du tableau. Ces propriétés peuvent être utilisées pour placer des éléments qui ne sont pas des tableaux, utilisation quelquefois désignée sous le vocable « utiliser des tableaux CSS ».
+La façon dont un tableau est affiché sur une page web quand vous utilisez le balisage «&nbsp;table&nbsp;» résulte d'un ensemble de propriétés des CSS définissant la composition du tableau. Ces propriétés peuvent être utilisées pour placer des éléments qui ne sont pas des tableaux, utilisation quelquefois désignée sous le vocable «&nbsp;utiliser des tableaux CSS&nbsp;».
 
 Prenons un exemple. Tout d'abord, un simple balisage qui crée un formulaire HTML. Chaque élément en entrée a une étiquette ; nous avons également inclus une légende à l'intérieur d'un paragraphe. Chaque paire étiquette/entrée est incorporée dans un élément {{htmlelement("div")}} pour les besoins de la mise en page.
 
@@ -584,15 +584,15 @@ Prenons un exemple. Tout d'abord, un simple balisage qui crée un formulaire HTM
 <form>
   <p>Tout d'abord, dites‑nous votre nom et votre âge.</p>
   <div>
-    <label for="fname">Prénom :</label>
+    <label for="fname">Prénom&nbsp;:</label>
     <input type="text" id="fname">
   </div>
   <div>
-    <label for="lname">Nom :</label>
+    <label for="lname">Nom&nbsp;:</label>
     <input type="text" id="lname">
   </div>
   <div>
-    <label for="age">Âge :</label>
+    <label for="age">Âge&nbsp;:</label>
     <input type="text" id="age">
   </div>
 </form>
@@ -600,7 +600,7 @@ Prenons un exemple. Tout d'abord, un simple balisage qui crée un formulaire HTM
 
 Maintenant, le CSS pour cet exemple. Le gros de la CSS est plutôt ordinaire, à l'exception de l'utilisation de la propriété {{cssxref("display")}}. Les éléments {{htmlelement("form")}}, {{htmlelement("div")}} et {{htmlelement("label")}} ainsi que {{htmlelement("input")}} ont été configurés pour disposés en tableau, en lignes de tableau et en cellules de tableau respectivement — à la base, ils se comporteront comme dans le cas d'un balisage de tableau HTML, avec pour résultat un bon alignement par défaut entre les étiquettes et le texte. Tout ce qu'il nous reste à faire est d'ajouter un peu d'ampleur, des marges, etc. pour que tout soit agréable visuellement et c'est tout.
 
-Notez que les propriétés `display: table-caption;` et `caption-side: bottom;` ont été affectées au paragraphe légende — il sera donc disposé comme une légende de tableau ({{htmlelement("caption")}})  placée en bas de la table pour des raisons de style, même si son balisage est placé avant les éléments `input` dans le code source. Voilà une bonne dose de souplesse.
+Notez que les propriétés `display: table-caption;` et `caption-side: bottom;` ont été affectées au paragraphe légende — il sera donc disposé comme une légende de tableau ({{htmlelement("caption")}})  placée en bas de la table pour des raisons de style, même si son balisage est placé avant les éléments `input` dans le code source. Voilà une bonne dose de souplesse.
 
 ```css
 html {
@@ -664,7 +664,7 @@ Dans l'exemple ci–dessous, nous démarrons avec un bloc HTML dans un élément
 </div>
 ```
 
-Noux utilisons une propriété `column-width` de valeur 200 pixels pour ce conteneur ; le navigateur crée autant de colonnes de 200 pixels de large qu'il est possible de faire entrer dans le conteneur, puis il partage l'espace restant entre les colonnes crées.
+Noux utilisons une propriété `column-width` de valeur 200 pixels pour ce conteneur&nbsp;; le navigateur crée autant de colonnes de 200 pixels de large qu'il est possible de faire entrer dans le conteneur, puis il partage l'espace restant entre les colonnes crées.
 
 ```html hidden
     <div class="container">
diff --git a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md
index 6d0e3d27ee..356d85ba1e 100644
--- a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md
+++ b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md
@@ -17,7 +17,7 @@ original_slug: Apprendre/CSS/CSS_layout/Legacy_Layout_Methods
 
 {{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}
 
-Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page  étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien.
+Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application «&nbsp;CSS Grid Layout&nbsp;», ces mises en page étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien.
 
 <table class="standard-table">
   <tbody>
@@ -44,11 +44,11 @@ Les systèmes de trames sont courants dans les mises en page avec une CSS, mais
 
 ## Mise en page et systèmes de trames avant CSS Grid Layout
 
-Il peut sembler surprenant pour un désigner web que les CSS n'avaient pas de système de disposition en trame intégré jusqu'à peu. Au lieu de cela, nous utilisions diverses méthodes peu performantes pour créer des designs à trames. Nous appelerons maintenant ces méthodes « méthodes héritées ».
+Il peut sembler surprenant pour un désigner web que les CSS n'avaient pas de système de disposition en trame intégré jusqu'à peu. Au lieu de cela, nous utilisions diverses méthodes peu performantes pour créer des designs à trames. Nous appelerons maintenant ces méthodes «&nbsp;méthodes héritées&nbsp;».
 
-Pour les nouveaux projets, dans la plupart des cas, CSS Grid Layout forme la base de toute mise en page en combinaison avec une ou plusieurs autres méthodes modernes. Vous rencontrerez cependant de temps en temps des « systèmes de trame » utilisant ces méthodes héritées. Il est intéressant de comprendre comment elles fonctionnent et en quoi elles différent de CSS Grid Layout.
+Pour les nouveaux projets, dans la plupart des cas, CSS Grid Layout forme la base de toute mise en page en combinaison avec une ou plusieurs autres méthodes modernes. Vous rencontrerez cependant de temps en temps des «&nbsp;systèmes de trame&nbsp;» utilisant ces méthodes héritées. Il est intéressant de comprendre comment elles fonctionnent et en quoi elles différent de CSS Grid Layout.
 
-Cette leçon explique comment fonctionnent les systèmes et les cadres de trames se fondant sur des boîtes flottantes et Flexbox. Après avoir étudié « Grid Layout », vous serez probablement surpris de voir à quel point tout cela semble compliqué ! Ces connaissances vous seront utile si vous avez besoin de créer du code de recours pour les navigateurs qui ne prenent pas en charge les nouvelles méthodes ; de plus, elles vous permettront de travailler sur des projets existants qui utilisent ces types de systèmes.
+Cette leçon explique comment fonctionnent les systèmes et les cadres de trames se fondant sur des boîtes flottantes et Flexbox. Après avoir étudié «&nbsp;Grid Layout&nbsp;», vous serez probablement surpris de voir à quel point tout cela semble compliqué ! Ces connaissances vous seront utile si vous avez besoin de créer du code de recours pour les navigateurs qui ne prenent pas en charge les nouvelles méthodes&nbsp;; de plus, elles vous permettront de travailler sur des projets existants qui utilisent ces types de systèmes.
 
 Gardons présent à l'esprit, en explorant ces systèmes, qu'aucun d'entre eux ne crée réellement une trame de la même manière que CSS Grid Layout. Leur mode de fonctionnement consiste à donner une taille aux objets et à les pousser pour les aligner d'une manière figurant une trame.
 
@@ -71,9 +71,9 @@ Tout d'abord, nous avons besoin de contenu à mettre dans nos colonnes. Remplace
 </div>
 ```
 
-Chacune de ces colonnes nécessite un élément extérieur conteneur du dit contenu et manipulons‑le en bloc.. Dans notre exemple, nous avons choisi des éléments {{htmlelement("div")}}, mais vous auriez pu choisir n'importe quoi d'autre sémantiquement approprié comme un élément  {{htmlelement("article")}}, {{htmlelement("section")}} ou {{htmlelement("aside")}} ou tout autre.
+Chacune de ces colonnes nécessite un élément extérieur conteneur du dit contenu et manipulons‑le en bloc.. Dans notre exemple, nous avons choisi des éléments {{htmlelement("div")}}, mais vous auriez pu choisir n'importe quoi d'autre sémantiquement approprié comme un élément  {{htmlelement("article")}}, {{htmlelement("section")}} ou {{htmlelement("aside")}} ou tout autre.
 
-Pour la CSS maintenant appliquons ce qui suit au HTML comme base de configuration :
+Pour la CSS maintenant appliquons ce qui suit au HTML comme base de configuration&nbsp;:
 
 ```css
 body {
@@ -83,7 +83,7 @@ body {
 }
 ```
 
-Le corps du document prendra 90% de la largeur de fenêtre de la vue jusqu'à atteindre 900px de large ; au delà, il restera fixe à cette largeur et se centrera lui-même dans la fenêtre. Par défaut, ses enfants (les éléments {{htmlelement("h1")}}} et les deux {{htmlelement("div")}}) prenent 100% de la largeur du corps. Si nous voulons que les deux {{htmlelement("div")}} flottent l'un à côté de l'autre, nous devons fixer la somme de leur largeurs à 100% de la largeur totale de leur parent ou moins pour qu'ils puissent se placer l'un à côté de l'autre. Ajoutez ceci au bas de la CSS :
+Le corps du document prendra 90% de la largeur de fenêtre de la vue jusqu'à atteindre 900px de large&nbsp;; au delà, il restera fixe à cette largeur et se centrera lui-même dans la fenêtre. Par défaut, ses enfants (les éléments {{htmlelement("h1")}}} et les deux {{htmlelement("div")}}) prenent 100% de la largeur du corps. Si nous voulons que les deux {{htmlelement("div")}} flottent l'un à côté de l'autre, nous devons fixer la somme de leur largeurs à 100% de la largeur totale de leur parent ou moins pour qu'ils puissent se placer l'un à côté de l'autre. Ajoutez ceci au bas de la CSS :
 
 ```css
 div:nth-of-type(1) {
@@ -95,7 +95,7 @@ div:nth-of-type(2) {
 }
 ```
 
-Ici nous faisons en sorte que chaque élément représente 48% de la largeur du parent — soit 96% au total, laissant 4% libres pour jouer le rôle de gouttière entre les deux colonnes et leur donner un peu d'air. Maintenant nous avons juste à faire flotter les deux colonnes ainsi :
+Ici nous faisons en sorte que chaque élément représente 48% de la largeur du parent — soit 96% au total, laissant 4% libres pour jouer le rôle de gouttière entre les deux colonnes et leur donner un peu d'air. Maintenant nous avons juste à faire flotter les deux colonnes ainsi&nbsp;:
 
 ```css
 div:nth-of-type(1) {
@@ -109,7 +109,7 @@ div:nth-of-type(2) {
 }
 ```
 
-En mettant tout ensemble, voici le résultat :
+En mettant tout ensemble, voici le résultat&nbsp;:
 
 ### Exemple complet
 
@@ -149,13 +149,13 @@ div:nth-of-type(2) {
 
 Notez que nous avons utilisé des pourcentages pour définir les largeurs — c'est la bonne stratégie, cela crée une **disposition fluide**, s'ajustant à diverses tailles d'écran et gardant les mêmes proportions pour les tailles d'écran plus petites. Modifiez la taille de la fenêtre du navigateur pour voir par vous‑même. C'est un outil adapté au désign web adaptatif.
 
-> **Note :** Vous pouvez voir cet exemple en cours à la page [0_two-column-layout.html](http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html) (voyez aussi son  [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html)).
+> **Note :** Vous pouvez voir cet exemple en cours à la page [0_two-column-layout.html](http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html) (voyez aussi son  [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html)).
 
 ## Ancienne création d'un cadre de trames
 
 La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le [dégagement des boîtes flottantes](/fr/docs/Learn/CSS/CSS_layout/Floats).
 
-Le type de cadre de trames le plus facile à créer est un cadre de largeur fixe — il faut simplement déterminer la largeur totale du désign, le nombre de colonnes voulues et la largeur des gouttières et des colonnes. Si nous décidons plutôt de disposer ce design sur une trame avec des colonnes s'adaptant à la largeur de vue du navigateur, nous devrons  calculer les pourcentages de largeur des colonnes et celui des gouttières entre colonnes.
+Le type de cadre de trames le plus facile à créer est un cadre de largeur fixe — il faut simplement déterminer la largeur totale du désign, le nombre de colonnes voulues et la largeur des gouttières et des colonnes. Si nous décidons plutôt de disposer ce design sur une trame avec des colonnes s'adaptant à la largeur de vue du navigateur, nous devrons calculer les pourcentages de largeur des colonnes et celui des gouttières entre colonnes.
 
 Dans les paragraphes suivants, nous verrons comment créer ces deux types. Nous allons faire une trame à 12 colonnes — un choix courant considéré comme adaptable à diverses situations étant donné que 12 est bien divisible par 6, 4, 3 et 2.
 
@@ -194,7 +194,7 @@ Le but est d'en faire une trame de démonstration sur deux lignes à partir des
 
 ![](simple-grid-finished.png)
 
-À l'élément {{htmlelement("style")}}, ajoutons le code ci-après. Il donne une largeur de 980 pixels au conteneur enveloppe avec un remplissage de 20 pixels du côté droit. Cela nous laisse 960 pixels comme largeur totale pour les colonnes et les gouttières — dans ce cas, le remplissage est soustrait à la largeur totale du contenu car nous avons fixé la valeur de  {{cssxref("box-sizing")}} à `border-box` sur tous les éléments du site (voir [Modification totale du modèle de boîte](</fr/docs/Apprendre/CSS/Styling_boxes/Box_model_recap#Modification totale du modèle de boîte>) pour plus d'explications).
+À l'élément {{htmlelement("style")}}, ajoutons le code ci-après. Il donne une largeur de 980 pixels au conteneur enveloppe avec un remplissage de 20 pixels du côté droit. Cela nous laisse 960 pixels comme largeur totale pour les colonnes et les gouttières — dans ce cas, le remplissage est soustrait à la largeur totale du contenu car nous avons fixé la valeur de  {{cssxref("box-sizing")}} à `border-box` sur tous les éléments du site (voir [Modification totale du modèle de boîte](</fr/docs/Apprendre/CSS/Styling_boxes/Box_model_recap#Modification totale du modèle de boîte>) pour plus d'explications).
 
 ```css
 * {
@@ -225,7 +225,7 @@ Les gouttières entre colonnes ont une largeur de 20 px. Ces gouttières sont fa
 
 Il convient de soustraire cela de la largeur totale de 960 pixels, ce qui laisse 720 pixels pour les colonnes. En divisant par 12, nous voyons que chaque colonne aura une largeur de 60 pixels.
 
-L'étape suivante consiste à créer un règle pour la classe `.col` la faisant flotter à gauche lui laissant une marge gauche de {{cssxref("margin-left")}} de 20 pixels formant la gouttière et  une largeur {{cssxref("width")}} de 60 pixels. Ajoutez la règle suivante en fin de la CSS :
+L'étape suivante consiste à créer un règle pour la classe `.col` la faisant flotter à gauche lui laissant une marge gauche de {{cssxref("margin-left")}} de 20 pixels formant la gouttière et une largeur {{cssxref("width")}} de 60 pixels. Ajoutez la règle suivante en fin de la CSS&nbsp;:
 
 ```css
 .col {
@@ -242,7 +242,7 @@ La ligne supérieure des colonnes unitaires est maintenant disposées en tant qu
 
 Les conteneurs destinés à accueillir plusieurs colonnes doivent être d'une classe spéciale pour pouvoir ajuster leurs valeurs {{cssxref("width")}} en fonction du nombre de colonnes requis (plus les gouttières intermédiaires). Nous devons créer une classe supplémentaire pour permettre aux conteneurs de s'étendre de 2 à 12 colonnes. Cette largeur est le résultat de l'addition de la largeur de toutes les colonnes plus les largeurs des gouttières dont le nombre est toujours inférieur de 1 au nombre de colonnes.
 
-Ajoutez ce qui suit en bas de la CSS :
+Ajoutez ce qui suit en bas de la CSS&nbsp;:
 
 ```css
 /* Deux largeurs de colonnes (120px) plus une largeur de gouttière (20px) */
@@ -265,7 +265,7 @@ Une fois ces classes crées, nous pouvons disposer des colonnes de largeur diff�
 
 > **Note :** Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre [version terminée](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html) sur GitHub (la voir aussi [en fonctionnement direct](http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html)).
 
-Modifiez les classes de vos éléments soit en ajoutant ou retirant certains conteneurs, pour voir comment faire varier la disposition. Par exemple, vous pouvez faire en sorte que la deuxième ligne ressemble à ceci :
+Modifiez les classes de vos éléments soit en ajoutant ou retirant certains conteneurs, pour voir comment faire varier la disposition. Par exemple, vous pouvez faire en sorte que la deuxième ligne ressemble à ceci&nbsp;:
 
 ```css
 <div class="row">
@@ -290,7 +290,7 @@ Pour la largeur de la première colonne, la **largeur cible** est de 60 pixels e
 
 Décalant de deux le point décimal nous obtenons un pourcentage de 6.25%. Donc, dans la CSS, nous pouvons remplacer la largeur de colonne de 60 pixels par 6.25%.
 
-En faisant de même pour la largeur de la gouttière :
+En faisant de même pour la largeur de la gouttière&nbsp;:
 
     20 / 960 = 0.02083333333
 
@@ -300,7 +300,7 @@ Donc, remplaçons par 2.08333333% la valeur 20 pixels de {{cssxref("margin-left"
 
 Pour ce paragraphe, faites une autre copie de la page exemple précédente ou faites une copie locale du code de [simple-grid-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html) comme point de départ.
 
-Mettez à jour la deuxième règle CSS (avec le sélecteur `.wrapper`) comme suit :
+Mettez à jour la deuxième règle CSS (avec le sélecteur `.wrapper`) comme suit&nbsp;:
 
 ```css
 body {
@@ -316,7 +316,7 @@ body {
 
 Outre la définition du pourcentage comme valeur de {{cssxref("width")}}, nous avons ajouté la propriété {{cssxref("max-width")}} de façon à plafonner une mise en page qui deviendrait trop large.
 
-Ensuite, mettez à jour les quatre règles CSS (du sélecteur `.col`) ainsi :
+Ensuite, mettez à jour les quatre règles CSS (du sélecteur `.col`) ainsi&nbsp;:
 
 ```css
 .col {
@@ -327,9 +327,9 @@ Ensuite, mettez à jour les quatre règles CSS (du sélecteur `.col`) ainsi :
 }
 ```
 
-Maintenant vient la partie un peu plus laborieuse — nous devons mettre à jour toutes  les règles `.col.span` en utilisant des largeurs en pourcentage au lieu de pixels. Cela prend un peu de temps avec une calculette ; pour vous économiser du travail, nous l'avons fait pour vous.
+Maintenant vient la partie un peu plus laborieuse — nous devons mettre à jour toutes les règles `.col.span` en utilisant des largeurs en pourcentage au lieu de pixels. Cela prend un peu de temps avec une calculette&nbsp;; pour vous économiser du travail, nous l'avons fait pour vous.
 
-Mettez à jour le bloc bas des règles CSS avec ce qui suit :
+Mettez à jour le bloc bas des règles CSS avec ce qui suit&nbsp;:
 
 ```css
 /* Deux largeurs de colonnes (12.5%) plus une largeur de gouttière (2.08333333%) */
@@ -354,9 +354,9 @@ Maintenant enregistrez le code, chargez le dans le navigateur et modifiez la lar
 
 ### Faciliter les calculs avec la fonction calc()
 
-Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir [cet exemple dans le didacticiel MediaRecorder API](</fr/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()>).
+Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple «&nbsp;je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px&nbsp;». Voir [cet exemple dans le didacticiel MediaRecorder API](</fr/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()>).
 
-Revenon à nos trames ! Toute colonne se développant au delà de la première a une largeur totale de 6.25% multipliée par le nombre de colonnes précédentes plus 2.08333333% multiplié par le nombre de gouttières (qui doit toujours être égal au nombre de colonnes moins 1). La fonction `calc()` nous permet de faire ce calcul dans la valeur `width` même, ainsi pour tout élément au-delà de la colonne 4 nous pouvons écrire, par exemple :
+Revenon à nos trames&nbsp;! Toute colonne se développant au delà de la première a une largeur totale de 6.25% multipliée par le nombre de colonnes précédentes plus 2.08333333% multiplié par le nombre de gouttières (qui doit toujours être égal au nombre de colonnes moins 1). La fonction `calc()` nous permet de faire ce calcul dans la valeur `width` même, ainsi pour tout élément au-delà de la colonne 4 nous pouvons écrire, par exemple&nbsp;:
 
 ```css
 .col.span4 {
@@ -364,7 +364,7 @@ Revenon à nos trames ! Toute colonne se développant au delà de la première
 }
 ```
 
-Remplacez le bloc de règles le plus bas par le suivant, puis actualisez le navigateur pour constater que vous obtenez un résultat identique :
+Remplacez le bloc de règles le plus bas par le suivant, puis actualisez le navigateur pour constater que vous obtenez un résultat identique&nbsp;:
 
 ```css
 .col.span2 { width: calc((6.25%*2) + 2.08333333%); }
@@ -380,13 +380,13 @@ Remplacez le bloc de règles le plus bas par le suivant, puis actualisez le navi
 .col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }
 ```
 
-> **Note :** Vous pouvez voir la version terminée dans [fluid-grid-calc.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html) (la voir aussi  [en direct](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html)).
+> **Note :** Vous pouvez voir la version terminée dans [fluid-grid-calc.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html) (la voir aussi  [en direct](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html)).
 
 > **Note :** Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction `calc()`, même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9.
 
-### Systèmes de trames « sémantiques » vs. « non sémantiques »
+### Systèmes de trames «&nbsp;sémantiques&nbsp;» vs. «&nbsp;non sémantiques&nbsp;»
 
-Ajouter des classes au balisage pour définir une mise en page signifie que le contenu et le balisage sont liés à la présentation visuelle. Cette utilisation de classes CSS est parfois décrite comme étant « non sémantique » — montrant comment le contenu est disposé — par opposition à l'utilisation sémantique des classes qui décrit le contenu. C'est le cas de nos classes `span2`, `span3`, etc.
+Ajouter des classes au balisage pour définir une mise en page signifie que le contenu et le balisage sont liés à la présentation visuelle. Cette utilisation de classes CSS est parfois décrite comme étant «&nbsp;non sémantique&nbsp;» — montrant comment le contenu est disposé — par opposition à l'utilisation sémantique des classes qui décrit le contenu. C'est le cas de nos classes `span2`, `span3`, etc.
 
 Ce n'est pas la seule approche. À la place, vous pouvez décider de la trame, puis ajouter les informations de taille aux règles des classes sémantiques existantes. Par exemple, si vous avez un élément {{htmlelement("div")}} de classe `content` que vous voulez développer sur huit colonnes, vous pouvez copier sur la largeur de la classe `span8`, ce qui vous donne une règle :
 
@@ -406,7 +406,7 @@ Essayons.
 
 Démarrons avec le code précédent ou utilisons le fichier [fluid-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html) comme point de départ.
 
-Créons dans la CSS une classe qui décale un élément de conteneur d'une largaur de colonne. Ajoutons ce qui suit au bas de la CSS :
+Créons dans la CSS une classe qui décale un élément de conteneur d'une largaur de colonne. Ajoutons ce qui suit au bas de la CSS&nbsp;:
 
 ```css
 .offset-by-one {
@@ -414,7 +414,7 @@ Créons dans la CSS une classe qui décale un élément de conteneur d'une larga
 }
 ```
 
-Ou, si vous préférez calculer le pourcentage vous-même, utilisez :
+Ou, si vous préférez calculer le pourcentage vous-même, utilisez&nbsp;:
 
 ```css
 .offset-by-one {
@@ -422,25 +422,25 @@ Ou, si vous préférez calculer le pourcentage vous-même, utilisez :
 }
 ```
 
-Vous pouvez maintenant ajouter cette classe à tout conteneur pour lequel vous voulez laisser une colonne vide sur sa gauche. Par exemple, si vous avez ceci dans votre HTML :
+Vous pouvez maintenant ajouter cette classe à tout conteneur pour lequel vous voulez laisser une colonne vide sur sa gauche. Par exemple, si vous avez ceci dans votre HTML&nbsp;:
 
 ```html
 <div class="col span6">14</div>
 ```
 
-remplacez‑le par :
+remplacez‑le par&nbsp;:
 
 ```html
 <div class="col span5 offset-by-one">14</div>
 ```
 
-> **Note :** Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage !
+> **Note :** Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage&nbsp;!
 
-Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple [fluid-grid-offset.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html) (voir aussi [l'exécution directement](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html)). L'exemple terminé doit ressembler à ceci :
+Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple [fluid-grid-offset.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html) (voir aussi [l'exécution directement](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html)). L'exemple terminé doit ressembler à ceci&nbsp;:
 
 ![](offset-grid-finished.png)
 
-> **Note :** Comme exercice supplémentaire, pouvez‑vous implémenter une classe `offset-by-two` ?
+> **Note :** Comme exercice supplémentaire, pouvez‑vous implémenter une classe `offset-by-two`&nbsp;?
 
 ### Limitations des trames de boîtes flottantes
 
@@ -450,11 +450,11 @@ N'oubliez pas non plus que si le contenu des éléments s'élargit au-delà des
 
 La plus grande limite de ce système est essentiellement son caractère unidimensionnel. Il s'agit de colonnes et de répartition d'éléments transversaux, mais pas de lignes. Il est très difficile avec ces anciennes méthodes de mise en page de contrôler la hauteur des éléments sans fixer explicitement une hauteur, et c'est aussi une approche très rigide — cela ne fonctionne que si vous pouvez garantir que le contenu est d'une hauteur donnée..
 
-## Trames Flexbox ?
+## Trames Flexbox&nbsp;?
 
 Si vous avez lu le précédent article à propors de Flexbox, vous pourriez penser que Flexbox est la solution idéale pour créer un système de trames. Il existe actuellement nombre de systèmes de grille fondés sur Flexbox et Flexbox peut résoudre beaucoup de problèmes mis en évidence lors de la création de notre trame ci-dessus.
 
-Cependant, Flexbox n'a jamais été conçu comme système de trames : il conduit à un nouvel ensemble de défis lorsqu'il est utilisé comme tel. Comme simple exemple, prenons le même exemple que celui utilisé ci-dessus et utilisons la CSS suivante pour mettre en page les classes `wrapper`, `row` et `col` :
+Cependant, Flexbox n'a jamais été conçu comme système de trames&nbsp;: il conduit à un nouvel ensemble de défis lorsqu'il est utilisé comme tel. Comme simple exemple, prenons le même exemple que celui utilisé ci-dessus et utilisons la CSS suivante pour mettre en page les classes `wrapper`, `row` et `col` :
 
 ```css
 body {
@@ -481,11 +481,11 @@ body {
 }
 ```
 
-Faites ces remplacements dans votre exemple, ou regardez l'exemeple de code [flexbox-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html) (voir aussi en  [exécution directe](http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html)).
+Faites ces remplacements dans votre exemple, ou regardez l'exemeple de code [flexbox-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html) (voir aussi en  [exécution directe](http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html)).
 
-Ici, nous transformons chaque rangée en conteneur flexible. Avec une trame fondée sur Flexbox, nous avons encore besoin de rangées  pour avoir des éléments tant que leur somme est inférieure à 100%. Nous avons réglé ce conteneur à `display : flex`.
+Ici, nous transformons chaque rangée en conteneur flexible. Avec une trame fondée sur Flexbox, nous avons encore besoin de rangées pour avoir des éléments tant que leur somme est inférieure à 100%. Nous avons réglé ce conteneur à `display : flex`.
 
-Pour `.col` nous fixons à 1 la première valeur ({{cssxref("flex-grow")}}) de la propriété  {{cssxref("flex")}}, ainsi nos éléments peuvent s'élargir, la deuxième valeur ({{cssxref("flex-shrink")}}) à 1 également, ainsi les éléments peuvent s'étrécir, et la troisième valeur ({{cssxref("flex-basis")}}) à `auto`. Comme la valeur {{cssxref("width")}} de l'élément est fixée, `auto` utilisera cette valeur en tant que valeur de `flex-basis`.
+Pour `.col` nous fixons à 1 la première valeur ({{cssxref("flex-grow")}}) de la propriété  {{cssxref("flex")}}, ainsi nos éléments peuvent s'élargir, la deuxième valeur ({{cssxref("flex-shrink")}}) à 1 également, ainsi les éléments peuvent s'étrécir, et la troisième valeur ({{cssxref("flex-basis")}}) à `auto`. Comme la valeur {{cssxref("width")}} de l'élément est fixée, `auto` utilisera cette valeur en tant que valeur de `flex-basis`.
 
 Sur la ligne haute, nous disposons de douze boîtes nettes sur la trame et elle s'élargissent ou s'étrécissent de manière égale quand nous modifions la largeur de la vue. Sur la ligne suivante, toutefois, nous n'avons que quatre éléments et ceux-ci s'élargissent ou s'étrécissent à partir de la base de 60px. Avec seulement quatre d'entre eux ils peuvent s'élargir un peu plus que les éléments de la ligne au‑dessus, le résultat étant qu'ils occupent tous la même largeur sur la deuxième ligne.
 
@@ -493,23 +493,23 @@ Sur la ligne haute, nous disposons de douze boîtes nettes sur la trame et elle
 
 Pour corriger cela, nous avons encore besoin d'inclure les classes `span` pour donner une largeur qui remplave la valeur donnée par `flex-basis` pour cet élément.
 
-Également, ils ne respectent pas la trame utilisée par les éléments au‑dessus car ils ne « savent » rien à son propos.
+Également, ils ne respectent pas la trame utilisée par les éléments au‑dessus car ils ne «&nbsp;savent&nbsp;» rien à son propos.
 
-Flexbox est un design **mono-dimensionnel** par conception. Il compose avec une seule dimentsion, celle d'une ligne ou d'une colonne. Nous ne pouvons pas créer une trame stricte pour les colonnes **et** pour les lignes, ce qui signifie que si nous utilisons Flexbox pour  une trame, nous devons encore calculer les pourcentages comme pour la disposition en boîtes flottantes.
+Flexbox est un design **mono-dimensionnel** par conception. Il compose avec une seule dimentsion, celle d'une ligne ou d'une colonne. Nous ne pouvons pas créer une trame stricte pour les colonnes **et** pour les lignes, ce qui signifie que si nous utilisons Flexbox pour une trame, nous devons encore calculer les pourcentages comme pour la disposition en boîtes flottantes.
 
-Dans votre projet, vous pouvez toujours choisir d'utiliser une « trame » Flexbox en raison des capacités d'alignement et de distribution de l'espace supplémentaires que Flexbox offre pour les boites flottantes. Mais sachez que vous utilisez encore un outil pour autre chose que ce pour quoi il a été conçu. Vous pouvez donc avoir l'impression d'être obligé de passer par un tas de circonvolutions pour obtenir le résultat final souhaité.
+Dans votre projet, vous pouvez toujours choisir d'utiliser une «&nbsp;trame&nbsp;» Flexbox en raison des capacités d'alignement et de distribution de l'espace supplémentaires que Flexbox offre pour les boites flottantes. Mais sachez que vous utilisez encore un outil pour autre chose que ce pour quoi il a été conçu. Vous pouvez donc avoir l'impression d'être obligé de passer par un tas de circonvolutions pour obtenir le résultat final souhaité.
 
 ## Systèmes de trame tierces parties
 
-Maintenant que nous avons compris la mathématique derrière les calculs de grille, nous sommes au bon endroit pour examiner certains des systèmes de trame tierces parties couramment utilisés. Si vous faite une recherche web pour « CSS Grid framework », vous vous trouverez devant une liste de choix énorme. Les canevas populaires tels que [Bootstrap](http://getbootstrap.com/) et [Foundation](http://foundation.zurb.com/) incluent un système de trame. Il existe également des systèmes de trames autonomes, développés soit à l'aide des CSS, soit à l'aide de préprocesseurs.
+Maintenant que nous avons compris la mathématique derrière les calculs de grille, nous sommes au bon endroit pour examiner certains des systèmes de trame tierces parties couramment utilisés. Si vous faite une recherche web pour «&nbsp;CSS Grid framework&nbsp;», vous vous trouverez devant une liste de choix énorme. Les canevas populaires tels que [Bootstrap](http://getbootstrap.com/) et [Foundation](http://foundation.zurb.com/) incluent un système de trame. Il existe également des systèmes de trames autonomes, développés soit à l'aide des CSS, soit à l'aide de préprocesseurs.
 
-Voyons un de ces systèmes autonomes : il montre les techniques courantes pour travailler dans un cadre de trames. La trame que nous allons utiliser fait partie de Skeleton, un simple canevas CSS.
+Voyons un de ces systèmes autonomes&nbsp;: il montre les techniques courantes pour travailler dans un cadre de trames. La trame que nous allons utiliser fait partie de Skeleton, un simple canevas CSS.
 
-Commençons par visiter le [site web de Skeleton](http://getskeleton.com/) et choisissons « Download » pour télécharger le fichier ZIP. Faisons l'extraction et copions les fichiers _skeleton.css_ et _normalize.css_ dans un nouveau répertoire.
+Commençons par visiter le [site web de Skeleton](http://getskeleton.com/) et choisissons «&nbsp;Download&nbsp;» pour télécharger le fichier ZIP. Faisons l'extraction et copions les fichiers _skeleton.css_ et _normalize.css_ dans un nouveau répertoire.
 
 Faites une copie de [html-skeleton.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html) et enregistrez le dans le même répertoire que _skeleton.css_ et _normalize.css_.
 
-Incorporez les .css _skeleton_ et _normalize_ dans la page HTML, en ajoutant ce qui suit dans `head` :
+Incorporez les .css _skeleton_ et _normalize_ dans la page HTML, en ajoutant ce qui suit dans `head`&nbsp;:
 
 ```html
 <link href="normalize.css" rel="stylesheet">
@@ -520,7 +520,7 @@ Skeleton inclut plus qu'un système de grille — il contient aussi des CSS pour
 
 > **Note :** [Normalize](/fr/docs/) est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs.
 
-Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML :
+Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML&nbsp;:
 
 ```html
 <div class="container">
@@ -549,7 +549,7 @@ Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce
 
 Pour commencer à utiliser Skeleton nous devons donner à l'élément enveloppe {{htmlelement("div")}} une classe `container` — elle est déjà comprise dans le HTML. Ceci centre le contenu avec une largeur maximale de 960 pixels. Vous pouvez voir que les boîtes ne deviennent plus jamais plus large que 960 pixels.
 
-Regardez dans le fichier skeleton.css, vous verrez la  CSS appliquée quand on se sert de cette classe. L'élément `<div>` est centré en utilisant la valeur `auto` pour les marges droite et gauche ; de plus, un remplissage de 20 pixels est appliqué à droite et à gauche. Skeleton fixe également la propriété {{cssxref("box-sizing")}} à la valeur `border-box` comme nous l'avions fait plu tôt et donc le remplissage et l'encadrement de cet élément seront inclus dans la largeur totale.
+Regardez dans le fichier skeleton.css, vous verrez la CSS appliquée quand on se sert de cette classe. L'élément `<div>` est centré en utilisant la valeur `auto` pour les marges droite et gauche ; de plus, un remplissage de 20 pixels est appliqué à droite et à gauche. Skeleton fixe également la propriété {{cssxref("box-sizing")}} à la valeur `border-box` comme nous l'avions fait plu tôt et donc le remplissage et l'encadrement de cet élément seront inclus dans la largeur totale.
 
 ```css
 .container {
@@ -566,7 +566,7 @@ Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieu
 
 Disposons maintenant les boîtes conteneur. Skeleton est fondé sur une trame de 12 colonnes. Les boîtes de la ligne supérieure nécessitent toutes des classes `one column` pour qu'elles se répartissent à raison de une par colonne.
 
-Ajoutez maintenant cet extrait de lignes de code :
+Ajoutez maintenant cet extrait de lignes de code&nbsp;:
 
 ```html
 <div class="container">
@@ -579,7 +579,7 @@ Ajoutez maintenant cet extrait de lignes de code :
 </div>
 ```
 
-Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre de colonnes qu'ils englobent , ainsi :
+Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre de colonnes qu'ils englobent , ainsi&nbsp;:
 
 ```html
 <div class="row">
@@ -592,9 +592,9 @@ Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre
 
 Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne.
 
-> **Note :** Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier [html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html) (à voir aussi  [en exécution directe](http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)).
+> **Note :** Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier [html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html) (à voir aussi  [en exécution directe](http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)).
 
-Si vous regardez dans le fichier _skeleton.css_ vous verrez comment cela fonctionne. Par exemple, Skeleton prédéfinit ce qui suit pour styler des éléments de la classe « three columns » que l'on ajouterait.
+Si vous regardez dans le fichier _skeleton.css_ vous verrez comment cela fonctionne. Par exemple, Skeleton prédéfinit ce qui suit pour styler des éléments de la classe «&nbsp;three columns&nbsp;» que l'on ajouterait.
 
 ```css
 .three.columns { width: 22%; }
@@ -602,11 +602,11 @@ Si vous regardez dans le fichier _skeleton.css_ vous verrez comment cela fonctio
 
 Tout Skeleton (ou n'importe quel autre canevas) paramètre des classes prédéfinies qu'il est possible d'utiliser en les ajoutant à votre balisage. Vous avez fait exactement la même chose en calculant ces pourcentages vous même.
 
-Comme vous le voyez, vous n'avez besoin d'écrire que peu de CSS en utilisant Skeleton. Il traite tout l'aspect boîte flottante pour vous quand vous ajoutez des classes à votre balisage. C'est la possibilité de gérer la responsabilité de la disposition sur quelque chose d'autre qui fait que l'utilisation d'un canevas pour un système de trames est un choix convaincan ! Toutefois, actuellement avec « CSS Grid Layout », nombre de développeurs délaissent ces canevas pour l'utilisation des trames natives intégrées que les CSS fournissent.
+Comme vous le voyez, vous n'avez besoin d'écrire que peu de CSS en utilisant Skeleton. Il traite tout l'aspect boîte flottante pour vous quand vous ajoutez des classes à votre balisage. C'est la possibilité de gérer la responsabilité de la disposition sur quelque chose d'autre qui fait que l'utilisation d'un canevas pour un système de trames est un choix convaincan&nbsp;! Toutefois, actuellement avec «&nbsp;CSS Grid Layout&nbsp;», nombre de développeurs délaissent ces canevas pour l'utilisation des trames natives intégrées que les CSS fournissent.
 
 ## Résumé
 
-Vous savez maintenant comment les divers systèmes de trames sont créés. La connaissance de ces processus est utile dans le cadre d'un travail sur des sites anciens, ainsi que pour la compréhension des différences  entre les trames natives de « CSS Grid Layout » et celles des anciens systèmes.
+Vous savez maintenant comment les divers systèmes de trames sont créés. La connaissance de ces processus est utile dans le cadre d'un travail sur des sites anciens, ainsi que pour la compréhension des différences entre les trames natives de «&nbsp;CSS Grid Layout&nbsp;» et celles des anciens systèmes.
 
 {{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}
 
diff --git a/files/fr/learn/css/css_layout/media_queries/index.md b/files/fr/learn/css/css_layout/media_queries/index.md
index 6a9f08ddef..a34c9ecde9 100644
--- a/files/fr/learn/css/css_layout/media_queries/index.md
+++ b/files/fr/learn/css/css_layout/media_queries/index.md
@@ -126,7 +126,7 @@ A standard desktop view has a landscape orientation, and a design that works wel
 
 #### Use of pointing devices
 
-As part of the Level 4 specification, the `hover` media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.
+As part of the Level 4 specification, the `hover` media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.
 
 ```css
 @media (hover: hover) {
@@ -140,7 +140,7 @@ As part of the Level 4 specification, the `hover` media feature was introduced.
 
 If we know the user cannot hover, we could display some interactive features by default. For users who can hover, we might choose to make them available when a link is hovered over.
 
-Also in Level 4 is the `pointer` media feature. This takes three possible values, `none`, `fine` and `coarse`. A `fine` pointer is something like a mouse or trackpad. It enables the user to precisely target a small area. A `coarse` pointer is your finger on a touchscreen. The value `none` means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands.
+Also in Level 4 is the `pointer` media feature. This takes three possible values, `none`, `fine` and `coarse`. A `fine` pointer is something like a mouse or trackpad. It enables the user to precisely target a small area. A `coarse` pointer is your finger on a touchscreen. The value `none` means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands.
 
 Using `pointer` can help you to design better interfaces that respond to the type of interaction a user is having with a screen. For example, you could create larger hit areas if you know that the user is interacting with the device as a touchscreen.
 
@@ -196,7 +196,7 @@ In the early days of responsive design, many designers would attempt to target v
 
 There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targetting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as **breakpoints**.
 
-The [Responsive Design Mode](/fr/docs/Tools/Responsive_Design_Mode) in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.
+The [Responsive Design Mode](/fr/docs/Tools/Responsive_Design_Mode) in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.
 
 ![A screenshot of a layout in a mobile view in Firefox DevTools.](rwd-mode.png)
 
@@ -208,7 +208,7 @@ The view for the very smallest devices is quite often a simple single column of
 
 The below walkthrough takes you through this approach with a very simple layout. In a production site you are likely to have more things to adjust within your media queries, however the approach would be exactly the same.
 
-### Walkthrough: a simple mobile-first layout
+### Walkthrough: a simple mobile-first layout
 
 Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout.
 
@@ -418,7 +418,7 @@ This could be achieved using the following:
 
 [Open the grid layout example](https://mdn.github.io/css-examples/learn/media-queries/grid.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html).
 
-With the example open in your browser, make the screen wider and narrower to see the number of column tracks change. The nice thing about this method is that grid is not looking at the viewport width, but the width it has available for this component. It might seem strange to wrap up a section about media queries with a suggestion that you might not need one at all! However, in practice you will find that good use of modern layout methods, enhanced with media queries, will give the best results.
+With the example open in your browser, make the screen wider and narrower to see the number of column tracks change. The nice thing about this method is that grid is not looking at the viewport width, but the width it has available for this component. It might seem strange to wrap up a section about media queries with a suggestion that you might not need one at all! However, in practice you will find that good use of modern layout methods, enhanced with media queries, will give the best results.
 
 ## Test your skills!
 
@@ -428,7 +428,7 @@ You've reached the end of this article, but can you remember the most important
 
 In this lesson you have learned about media queries, and also discovered how to use them in practice to create a mobile first responsive design.
 
-You could use the starting point that we have created to test out more media queries. For example, perhaps you could change the size of the navigation if you detect that the visitor has a coarse pointer, using the `pointer` media feature.
+You could use the starting point that we have created to test out more media queries. For example, perhaps you could change the size of the navigation if you detect that the visitor has a coarse pointer, using the `pointer` media feature.
 
 You could also experiment with adding different components and seeing whether the addition of a media query, or using a layout method like flexbox or grid is the most appropriate way to make the components responsive. Very often there is no right or wrong way — you should experiment and see which works best for your design and content.
 
diff --git a/files/fr/learn/css/css_layout/multiple-column_layout/index.md b/files/fr/learn/css/css_layout/multiple-column_layout/index.md
index b6e2cfb1ce..f72a899a0f 100644
--- a/files/fr/learn/css/css_layout/multiple-column_layout/index.md
+++ b/files/fr/learn/css/css_layout/multiple-column_layout/index.md
@@ -40,11 +40,11 @@ Une mise en page à colonnes multiples est une méthode de disposition du conten
 
 ## Un exemple élémentaire
 
-Nous allons maintenant explorer la disposition du contenu sur plusieurs colonnes, souvent nommée  « *multicol* ». Vous pourrez effectuer le suivi de cet article en  [téléchargeant le fichier de depart multicol](https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html) et en ajoutant la CSS aux emplacements appropriés. En fin de section, vous verrez un exemple en direct de ce à quoi le code final peut ressembler.
+Nous allons maintenant explorer la disposition du contenu sur plusieurs colonnes, souvent nommée  «&nbsp;*multicol* ». Vous pourrez effectuer le suivi de cet article en  [téléchargeant le fichier de depart multicol](https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html) et en ajoutant la CSS aux emplacements appropriés. En fin de section, vous verrez un exemple en direct de ce à quoi le code final peut ressembler.
 
-Notre point de départ contient un HTML très simple ; une enveloppe de la classe `container` dans laquelle nous avons placé un en‑tête et quelques paragraphes.
+Notre point de départ contient un HTML très simple&nbsp;; une enveloppe de la classe `container` dans laquelle nous avons placé un en‑tête et quelques paragraphes.
 
-L'élément {{htmlelement("div")}} de la classe `container` sera notre conteneur multi‑colonnes. Nous basculons dans une disposition _multicol_ en utilisant l'une des deux propriétés {{cssxref("column-count")}} ou {{cssxref("column-width")}}. La propriété `column-count` crée autant de colonnes que la valeur indiquée, donc si vous ajoutez la CSS suivante et actalisez la page, vous obtiendrez une disposition sur trois colonnes :
+L'élément {{htmlelement("div")}} de la classe `container` sera notre conteneur multi‑colonnes. Nous basculons dans une disposition _multicol_ en utilisant l'une des deux propriétés {{cssxref("column-count")}} ou {{cssxref("column-width")}}. La propriété `column-count` crée autant de colonnes que la valeur indiquée, donc si vous ajoutez la CSS suivante et actalisez la page, vous obtiendrez une disposition sur trois colonnes&nbsp;:
 
 ```css
 .container {
@@ -125,21 +125,21 @@ body {
 
 ## Style des colonnes
 
-Les colonnes créées avec _multicol_ ne peuvent pas être stylisées individuellement. Il n'y a aucun moyen de faire en sorte qu'une colonne soit plus large qu'une autre, ou de modifier l'arrière‑plan ou la couleur du texte d'une seule colonne. Il y a deux moyens de modifier l'affichage des colonnes :
+Les colonnes créées avec _multicol_ ne peuvent pas être stylisées individuellement. Il n'y a aucun moyen de faire en sorte qu'une colonne soit plus large qu'une autre, ou de modifier l'arrière‑plan ou la couleur du texte d'une seule colonne. Il y a deux moyens de modifier l'affichage des colonnes&nbsp;:
 
 - modifier la taille de l'espacement entre colonnes avec {{cssxref("column-gap")}}.
 - ajouter une règle entre colonnes avec {{cssxref("column-rule")}}.
 
-En utilisant l'exemple ci‑dessus, changeons la taille de l'espacement entre colonnes avec la propriété `column-gap` :
+En utilisant l'exemple ci‑dessus, changeons la taille de l'espacement entre colonnes avec la propriété `column-gap`&nbsp;:
 
 ```css
 .container {
-  column-width: 200px;
+  column-width: 200px;
   column-gap: 20px;
 }
 ```
 
-Vous pouvez tester diverses valeurs — la propriété accepte n'importe quelle unité de longueur. Ajoutons maintenant une règle entre colonnes avec `column-rule`. De la même manière qu'avec la propriété {{cssxref("border")}} rencontrée dans les articles précédents, `column-rule`, forme abrégée de {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} et  {{cssxref("column-rule-width")}}, accepte les mêmes valeurs.
+Vous pouvez tester diverses valeurs — la propriété accepte n'importe quelle unité de longueur. Ajoutons maintenant une règle entre colonnes avec `column-rule`. De la même manière qu'avec la propriété {{cssxref("border")}} rencontrée dans les articles précédents, `column-rule`, forme abrégée de {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} et  {{cssxref("column-rule-width")}}, accepte les mêmes valeurs.
 
 ```css
 .container {
@@ -184,7 +184,7 @@ body {
 
 {{ EmbedLiveSample('Style_des_colonnes', '100%', 400) }}
 
-Notez que  la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec  `column-gap`. Pour faire un peu plus d'espace d'un côté ou de l'autre de la règle, vous devez augmenter la taille de l'espace entre les colonnes.
+Notez que la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec  `column-gap`. Pour faire un peu plus d'espace d'un côté ou de l'autre de la règle, vous devez augmenter la taille de l'espace entre les colonnes.
 
 ## Colonnes et coupures
 
diff --git a/files/fr/learn/css/css_layout/normal_flow/index.md b/files/fr/learn/css/css_layout/normal_flow/index.md
index 95ee411f27..cf504e4cd8 100644
--- a/files/fr/learn/css/css_layout/normal_flow/index.md
+++ b/files/fr/learn/css/css_layout/normal_flow/index.md
@@ -13,7 +13,7 @@ Cet article décrit le déroulement normal, c'est-à-dire la façon dont les él
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Les fondamentaux du HTML (étudiez
         <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML"
@@ -24,7 +24,7 @@ Cet article décrit le déroulement normal, c'est-à-dire la façon dont les él
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Expliquer comment les navigateurs composent les pages web par défaut,
         avant que nous commencions à faire des modifications.
@@ -76,14 +76,14 @@ Voici un exemple simple expliquant cela :
  la même ligne. Les débordements des éléments inline
  <span>sont placés sur une nouvelle ligne si possible
  (comme celle‑ci contenant du texte)</span>, sinon ils
- sont placés sur une nouvelle ligne, comme cette image :
+ sont placés sur une nouvelle ligne, comme cette image&nbsp;:
  <img src="long.jpg"></p>
 ```
 
 ```css
 body {
-  width: 500px;
-  margin: 0 auto;
+  width: 500px;
+  margin: 0 auto;
 }
 
 p {
diff --git a/files/fr/learn/css/css_layout/positioning/index.md b/files/fr/learn/css/css_layout/positioning/index.md
index ac76b555e7..f092148b0a 100644
--- a/files/fr/learn/css/css_layout/positioning/index.md
+++ b/files/fr/learn/css/css_layout/positioning/index.md
@@ -48,9 +48,9 @@ Le positionnement permet de modifier le cours classique de la mise en page pour
 
 Il y a différents types de positionnement que vous pouvez appliquer à des éléments HTML. Pour utiliser un type particulier de positionnement sur un élément, nous utilisons la propriété {{cssxref("position")}}.
 
-### Positionnement « static »
+### Positionnement «&nbsp;static&nbsp;»
 
-Le positionnement `static` est celui reçu par défaut par chaque élément — cela veut tout simplement dire « positionner l'élément selon le cours normal de placement — rien de spécial à voir ici ».
+Le positionnement `static` est celui reçu par défaut par chaque élément — cela veut tout simplement dire «&nbsp;positionner l'élément selon le cours normal de placement — rien de spécial à voir ici&nbsp;».
 
 Pour le démontrer et avoir préparer un premier exemple pour les prochaines sections, ajoutez tout d'abord une classe `positioned` pour le deuxième {{htmlelement("p")}} dans le HTML:
 
@@ -70,19 +70,19 @@ Si maintenant vous sauvegardez et actualisez, vous verrez qu'il n'y a aucune dif
 
 > **Note :** ce lien [`1_static-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html)) pointe sur un exemple de positionnement « static ».
 
-### Positionnement « relative »
+### Positionnement «&nbsp;relative&nbsp;»
 
-Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de la mise en page, vous pourrez modifier sa position finale. Vous pourrez par exemple le faire chevaucher d'autres éléments de la page. Poursuivons : mettez à jour la déclaration de `position` dans le code :
+Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de la mise en page, vous pourrez modifier sa position finale. Vous pourrez par exemple le faire chevaucher d'autres éléments de la page. Poursuivons&nbsp;: mettez à jour la déclaration de `position` dans le code&nbsp;:
 
 ```css
 position: relative;
 ```
 
-Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} dont nous parlerons dans le prochain paragraphe.
+Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément&nbsp;? Vous avez besoin d'employer les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} dont nous parlerons dans le prochain paragraphe.
 
 ### Présentation de top, bottom, left et right
 
-{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} sont utilisés conjointement à {{cssxref("position")}} pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle `.positioned` dans la CSS :
+{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} sont utilisés conjointement à {{cssxref("position")}} pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle `.positioned` dans la CSS&nbsp;:
 
     top: 30px;
     left: 30px;
@@ -96,13 +96,13 @@ Si vous enregistrez et actualisez maintenant, vous verrez ce résultat :
 <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p>
 <p class="positioned">Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.</p>
 <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p>
-<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les nœuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p>
+<p>Les éléments «&nbsp;inline&nbsp;» <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les nœuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments «&nbsp;inline&nbsp;» débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span>&nbsp;; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p>
 ```
 
 ```css hidden
 body {
-  width: 500px;
-  margin: 0 auto; }
+  width: 500px;
+  margin: 0 auto; }
 p {
   background: aqua;
   border: 3px solid blue;
@@ -138,7 +138,7 @@ Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ce
 <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p>
 <p class="positioned">Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.</p>
 <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p>
-<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p>
+<p>Les éléments «&nbsp;inline&nbsp;» <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments «&nbsp;inline&nbsp;» débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span>&nbsp;; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p>
 ```
 
 ```css hidden
@@ -241,7 +241,7 @@ A ce stade, vous verrez le premier paragraphe coloré en vert, déplacé hors du
 
 Est‑il possible de changer l'ordre d'empilement ? Oui, vous le pouvez avec la propriété {{cssxref("z-index")}}. « z-index » est une référence à l'axe **z**. Vous vous souvenez peut-être de points précédents du source où nous avons discuté des pages Web en utilisant des coordonnées horizontales (axe des x) et verticales (axe des y) pour déterminer le positionnement de choses comme les images de fond et les décalages d'ombres portées. (0,0) est en haut à gauche de la page (ou de l'élément), et les axes x et y vont respectivement vers la droite et vers le bas de la page (pour les langues s'écrivant de gauche à droite, en tout cas).
 
-Les pages Web ont aussi un axe z : une ligne imaginaire qui va de la surface de votre écran, vers votre visage (ou tout ce que vous aimez avoir devant l'écran). Les valeurs de {{cssxref("z-index")}}} affectent l'emplacement des éléments positionnés sur cet axe ; les valeurs positives les déplacent vers le haut de la pile, et les valeurs négatives les déplacent vers le bas de la pile. Par défaut, les éléments positionnés ont tous un `z-index`  `auto`, qui est effectivement 0.
+Les pages Web ont aussi un axe z : une ligne imaginaire qui va de la surface de votre écran, vers votre visage (ou tout ce que vous aimez avoir devant l'écran). Les valeurs de {{cssxref("z-index")}}} affectent l'emplacement des éléments positionnés sur cet axe ; les valeurs positives les déplacent vers le haut de la pile, et les valeurs négatives les déplacent vers le bas de la pile. Par défaut, les éléments positionnés ont tous un `z-index`  `auto`, qui est effectivement 0.
 
 Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle `p:nth-of-type(1)` :
 
@@ -338,7 +338,7 @@ Voici l'exemple terminé :
 <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p>
 <p class="positioned">Je ne suis plus positionné...</p>
 <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p>
-<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p>
+<p>Les éléments «&nbsp;inline&nbsp;» <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments «&nbsp;inline&nbsp;» débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span>&nbsp;; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p>
 ```
 
 ```css hidden
@@ -376,7 +376,7 @@ p:nth-of-type(1) {
 
 {{ EmbedLiveSample('Positionnement_fixe', '100%', 400) }}
 
-> **Note :** à ce stade de l'article, vous pouvez voir un exemple en direct ici  [`6_fixed-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html)).
+> **Note :** à ce stade de l'article, vous pouvez voir un exemple en direct ici  [`6_fixed-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html)).
 
 ### « position: sticky »
 
diff --git a/files/fr/learn/css/css_layout/practical_positioning_examples/index.md b/files/fr/learn/css/css_layout/practical_positioning_examples/index.md
index bcdd6003da..aae12447a2 100644
--- a/files/fr/learn/css/css_layout/practical_positioning_examples/index.md
+++ b/files/fr/learn/css/css_layout/practical_positioning_examples/index.md
@@ -11,7 +11,7 @@ Cet article illustre comment construire quelques exemples concrets de ce qu'on p
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Les fondamentaux en HTML (étudier
         <a href="/fr/docs/Learn/HTML/Introduction_to_HTML"
@@ -21,7 +21,7 @@ Cet article illustre comment construire quelques exemples concrets de ce qu'on p
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>Avoir une idée des aspects pratiques du positionnement</td>
     </tr>
   </tbody>
@@ -29,13 +29,13 @@ Cet article illustre comment construire quelques exemples concrets de ce qu'on p
 
 ## Une boîte d'information à onglets
 
-Le premier exemple que nous allons examiner est une boîte d'information à onglets classique - une méthode courante utilisée lorsqu'on souhaite regrouper beaucoup d'informations dans une petite zone. Cela inclut les applications gourmandes en informations comme les jeux de stratégie/guerre, les versions mobiles de sites web où l'écran est étroit et l'espace limité, et les boîtes d'information compactes où on peut mettre à disposition de nombreuses informations sans qu'elles remplissent toute l'interface utilisateur. Notre exemple ressemblera à ceci une fois que nous aurons terminé :
+Le premier exemple que nous allons examiner est une boîte d'information à onglets classique - une méthode courante utilisée lorsqu'on souhaite regrouper beaucoup d'informations dans une petite zone. Cela inclut les applications gourmandes en informations comme les jeux de stratégie/guerre, les versions mobiles de sites web où l'écran est étroit et l'espace limité, et les boîtes d'information compactes où on peut mettre à disposition de nombreuses informations sans qu'elles remplissent toute l'interface utilisateur. Notre exemple ressemblera à ceci une fois que nous aurons terminé&nbsp;:
 
 ![](tabbed-info-box.png)
 
 > **Note :** Vous pouvez voir l'exemple fini en démonstration sur la page [info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.
 
-On pourrait se demander : « pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que ces onglets permettent de cliquer sur les pages séparées pour créer cet effet ? ». Ce code serait en effet plus simple, mais dans ce cas, chaque « page » séparée serait en fait une nouvelle page web, ce qui rendrait plus difficile la sauvegarde des informations entre les vues, et intégrerait cette fonctionnalité dans un design d'interface plus large. De plus, les applications dites « à page unique » (<i lang="en">Single Page Apps</i>) deviennent très populaires, en particulier pour les interfaces web mobiles, parce que le fait que tout soit servi dans un seul fichier réduit le nombre de requêtes HTTP nécessaires pour voir tout le contenu, ce qui améliore les performances.
+On pourrait se demander&nbsp;: «&nbsp;pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que ces onglets permettent de cliquer sur les pages séparées pour créer cet effet&nbsp;?&nbsp;». Ce code serait en effet plus simple, mais dans ce cas, chaque «&nbsp;page&nbsp;» séparée serait en fait une nouvelle page web, ce qui rendrait plus difficile la sauvegarde des informations entre les vues, et intégrerait cette fonctionnalité dans un design d'interface plus large. De plus, les applications dites «&nbsp;à page unique&nbsp;» (<i lang="en">Single Page Apps</i>) deviennent très populaires, en particulier pour les interfaces web mobiles, parce que le fait que tout soit servi dans un seul fichier réduit le nombre de requêtes HTTP nécessaires pour voir tout le contenu, ce qui améliore les performances.
 
 > **Note :** Il arrive même que pour certains sites, ce soit une seule page qui soit chargée et que son contenu soit modifié dynamiquement grâce à des fonctionnalités JavaScript telles que [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest). Pour le moment, nous garderons des choses simples. Il y aura un peu de JavaScript en fin d'article, mais la juste dose nécessaire pour faire fonctionner cet exemple.
 
@@ -62,7 +62,7 @@ Pour commencer, effectuez une copie locale du fichier HTML de départ — [info-
     <article>
       <h2>Troisième onglet</h2>
 
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Et voici une liste ordonnée !</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Et voici une liste ordonnée&nbsp;!</p>
 
       <ol>
         <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
@@ -112,7 +112,7 @@ Cela définit une largeur et une hauteur spécifiques sur le contenu, et le cent
 
 ### Mettre en forme les onglets
 
-On souhaite que nos onglets ressemblent à des onglets. Autrement dit, on veut avoir un menu de navigation horizontal et, au lieu d'avoir différentes pages web depuis ce menu, obtenir l'affichage des différents panneaux sur la même page. Pour commencer, ajoutez la règle à la fin de votre CSS afin de retirer les valeurs par défaut de [`padding-left`](/fr/docs/Web/CSS/padding-left) et [`margin-top`](/fr/docs/Web/CSS/margin-top) pour la liste non-ordonnée :
+On souhaite que nos onglets ressemblent à des onglets. Autrement dit, on veut avoir un menu de navigation horizontal et, au lieu d'avoir différentes pages web depuis ce menu, obtenir l'affichage des différents panneaux sur la même page. Pour commencer, ajoutez la règle à la fin de votre CSS afin de retirer les valeurs par défaut de [`padding-left`](/fr/docs/Web/CSS/padding-left) et [`margin-top`](/fr/docs/Web/CSS/margin-top) pour la liste non-ordonnée&nbsp;:
 
 ```css
 .info-box ul {
@@ -125,7 +125,7 @@ On souhaite que nos onglets ressemblent à des onglets. Autrement dit, on veut a
 
 Ensuite, mettons en forme les onglets horizontaux. Les éléments de la liste ont un flottement à gauche afin qu'ils soient sur une même ligne. Leur propriété [`list-style-type`](/fr/docs/Web/CSS/list-style-type) est placée à `none` afin de ne plus avoir les puces et [`width`](/fr/docs/Web/CSS/width) vaut `150px` afin qu'il y ait suffisamment de place au sein de la boîte pour afficher ces éléments. Les éléments [`<a>`](/fr/docs/Web/HTML/Element/a) ont [`display`](/fr/docs/Web/CSS/display) avec la valeur `inline-block` afin qu'ils s'inscrivent dans une ligne mais qu'ils puissent tout de même être mis en forme pour des boutons d'onglet en utilisant d'autres propriétés.
 
-Ajoutez le fragment de CSS qui suit :
+Ajoutez le fragment de CSS qui suit&nbsp;:
 
 ```css
 .info-box li {
@@ -145,7 +145,7 @@ Ajoutez le fragment de CSS qui suit :
 }
 ```
 
-Pour finir avec cette section, mettons en forme les liens selon leur état. Toute d'abord, gérons les états `:focus` et `:hover` afin que les onglets aient un aspect différent lorsqu'ils ont le focus ou qu'on les survole afin que la personne qui utilise le site ait un retour visuel. Deuxièmement, ajoutons une règle qui applique la même mise en forme lorsqu'un attribut `class` avec la valeur `active` est présent dessus. Nous appliquerons cette valeur à l'aide de JavaScript lorsqu'un clic aura lieu sur l'onglet. Ajoutez le CSS qui suit après les autres règles déjà écrites :
+Pour finir avec cette section, mettons en forme les liens selon leur état. Toute d'abord, gérons les états `:focus` et `:hover` afin que les onglets aient un aspect différent lorsqu'ils ont le focus ou qu'on les survole afin que la personne qui utilise le site ait un retour visuel. Deuxièmement, ajoutons une règle qui applique la même mise en forme lorsqu'un attribut `class` avec la valeur `active` est présent dessus. Nous appliquerons cette valeur à l'aide de JavaScript lorsqu'un clic aura lieu sur l'onglet. Ajoutez le CSS qui suit après les autres règles déjà écrites&nbsp;:
 
 ```css
 .info-box li a:focus, .info-box li a:hover {
@@ -161,7 +161,7 @@ Pour finir avec cette section, mettons en forme les liens selon leur état. Tout
 
 ### Mettre en forme les panneaux
 
-La suite consiste à mettre en forme les panneaux de contenu. Allons-y !
+La suite consiste à mettre en forme les panneaux de contenu. Allons-y&nbsp;!
 
 Pour commencer, ajoutez la règle suivante qui met en forme le conteneur `.panels` [`<div>`](/fr/docs/Web/HTML/Element/div). Ici, on définit une hauteur fixe avec [`height`](/fr/docs/Web/CSS/height) afin de s'assurer que les panneaux s'inscriront correctement dans la boîte d'informations. On définit [`position`](/fr/docs/Web/CSS/position) `relative` sur l'élément [`<div>`](/fr/docs/Web/HTML/Element/div) comme contexte de positionnement afin que les éléments enfants y soient relatifs (plutôt que relatifs à l'élément [`<html>`](/fr/docs/Web/HTML/Element/html)) pour la mise en forme. Enfin, on utilise [`clear`](/fr/docs/Web/CSS/clear) pour annuler le flottement défini plus haut afin qu'il n'y ait pas d'interférence avec le reste de la disposition.
 
@@ -173,9 +173,9 @@ Pour commencer, ajoutez la règle suivante qui met en forme le conteneur `.panel
 }
 ```
 
-Dans cette section, nous allons mettre en forme les éléments [`<article>`](/fr/docs/Web/HTML/Element/article) qui forment les panneaux. La première règle va fixer [`position`](/fr/docs/Web/CSS/position) absolue pour les panneaux avant de les placer dans le coin supérieur gauche de leur conteneur [`<div>`](/fr/docs/Web/HTML/Element/div) avec [`top`](/fr/docs/Web/CSS/top) et [`left`](/fr/docs/Web/CSS/left). C'est la clé de cette disposition : ainsi, les panneaux sont superposés les uns sur les autres. Cette règle fournit également la même hauteur que le conteneur et ajoute un peu de remplissage autour du contenu, une couleur pour le texte ([`color`](/fr/docs/Web/CSS/color)), ainsi qu'une couleur d'arrière-plan ([`background-color`](/fr/docs/Web/CSS/background-color)).
+Dans cette section, nous allons mettre en forme les éléments [`<article>`](/fr/docs/Web/HTML/Element/article) qui forment les panneaux. La première règle va fixer [`position`](/fr/docs/Web/CSS/position) absolue pour les panneaux avant de les placer dans le coin supérieur gauche de leur conteneur [`<div>`](/fr/docs/Web/HTML/Element/div) avec [`top`](/fr/docs/Web/CSS/top) et [`left`](/fr/docs/Web/CSS/left). C'est la clé de cette disposition&nbsp;: ainsi, les panneaux sont superposés les uns sur les autres. Cette règle fournit également la même hauteur que le conteneur et ajoute un peu de remplissage autour du contenu, une couleur pour le texte ([`color`](/fr/docs/Web/CSS/color)), ainsi qu'une couleur d'arrière-plan ([`background-color`](/fr/docs/Web/CSS/background-color)).
 
-La deuxième règle ajoutée indique qu'un panneau avec une classe (`class`) valant `active-panel` aura une valeur de [`z-index`](/fr/docs/Web/CSS/z-index) à 1 : il sera alors placé par-dessus les autres panneaux (par défaut les éléments positionnés ont un `z-index` qui vaut 0, ce qui les place en dessous). Là aussi, nous ajouterons cette classe au document à l'aide de JavaScript.
+La deuxième règle ajoutée indique qu'un panneau avec une classe (`class`) valant `active-panel` aura une valeur de [`z-index`](/fr/docs/Web/CSS/z-index) à 1&nbsp;: il sera alors placé par-dessus les autres panneaux (par défaut les éléments positionnés ont un `z-index` qui vaut 0, ce qui les place en dessous). Là aussi, nous ajouterons cette classe au document à l'aide de JavaScript.
 
 ```css
 .info-box article {
@@ -195,7 +195,7 @@ La deuxième règle ajoutée indique qu'un panneau avec une classe (`class`) val
 
 ### Ajouter notre JavaScript
 
-La dernière étape permettant d'avoir un résultat fonctionnel consiste à ajouter du JavaScript. Placez les lignes suivantes (sans modification) entre les balises ouvrantes et fermantes [`<script>`](/fr/docs/Web/HTML/Element/script) (elles se situent après le contenu HTML) :
+La dernière étape permettant d'avoir un résultat fonctionnel consiste à ajouter du JavaScript. Placez les lignes suivantes (sans modification) entre les balises ouvrantes et fermantes [`<script>`](/fr/docs/Web/HTML/Element/script) (elles se situent après le contenu HTML)&nbsp;:
 
 ```js
 let tabs = document.querySelectorAll('.info-box li a');
@@ -223,11 +223,11 @@ function setTabHandler(tab, tabPos) {
 }
 ```
 
-Ce code effectue les actions suivantes :
+Ce code effectue les actions suivantes&nbsp;:
 
 - Tout d'abord, on garde une référence pour tous les onglets et tous les panneaux dans deux variables intitulées `tabs` et `panels` afin qu'on puisse facilement les manipuler par la suite.
 - Ensuite, on utilise une boucle `for` pour parcourir l'ensemble des onglets et, pour chaque, on exécute une fonction intitulée `setTabHandler()` qui met en place les fonctionnalités à utiliser lors d'un clic. Lorsque cette fonction est exécutée, elle reçoit une référence de l'onglet concerné ainsi qu'un indice `i` qui identifie la position de l'onglet dans le tableau `tabs`.
-- Dans la fonction `setTabHandler()`, l'onglet se voit affecter un gestionnaire d'évènement `onclick`. Ainsi dès qu'on clique sur un onglet, on a :
+- Dans la fonction `setTabHandler()`, l'onglet se voit affecter un gestionnaire d'évènement `onclick`. Ainsi dès qu'on clique sur un onglet, on a&nbsp;:
 
   - Une boucle `for` qui est utilisée afin de parcourir tous les onglets pour retirer les classes qui seraient présentes sur eux.
   - Une classe (`class`) `active` qui est appliquée sur l'onglet sur lequel on a cliqué (nous avons vu plus haut que cette classe était associée à une règle CSS qui définit [`color`](/fr/docs/Web/CSS/color) et [`background-color`](/fr/docs/Web/CSS/background-color) sur l'onglet afin que celles-ci correspondent aux couleurs du panneau.
@@ -238,7 +238,7 @@ Et voilà pour le premier exemple. Gardez le code actuel sous la main, nous allo
 
 ## Une boîte d'information à onglets avec une position fixe
 
-Dans ce deuxième exemple, nous repartirons du premier exemple (notre boîte d'information à onglets) et nous l'ajouterons dans le contexte d'une page web complète. De plus, nous l'ajouterons avec une position fixe afin qu'elle reste à la même position dans la fenêtre du navigateur. Ainsi, quand le contenu principal défilera, la boîte d'information restera au même endroit à l'écran. Le résultat final ressemblera à :
+Dans ce deuxième exemple, nous repartirons du premier exemple (notre boîte d'information à onglets) et nous l'ajouterons dans le contexte d'une page web complète. De plus, nous l'ajouterons avec une position fixe afin qu'elle reste à la même position dans la fenêtre du navigateur. Ainsi, quand le contenu principal défilera, la boîte d'information restera au même endroit à l'écran. Le résultat final ressemblera à&nbsp;:
 
 ![](fixed-info-box.png)
 
@@ -248,7 +248,7 @@ Comme point de départ, vous pouvez utiliser l'exemple construit dans la premiè
 
 ### Ajouts au HTML
 
-Tout d'abord, il nous faut compléter le HTML afin de représenter le contenu principal du site web. Ajoutez la section ([`<section>`](/fr/docs/Web/HTML/Element/section)) suivante juste après la balise ouvrante [`<body>`](/fr/docs/Web/HTML/Element/body) et avant la section existante :
+Tout d'abord, il nous faut compléter le HTML afin de représenter le contenu principal du site web. Ajoutez la section ([`<section>`](/fr/docs/Web/HTML/Element/section)) suivante juste après la balise ouvrante [`<body>`](/fr/docs/Web/HTML/Element/body) et avant la section existante&nbsp;:
 
 ```html
 <section class="fake-content">
@@ -270,7 +270,7 @@ Tout d'abord, il nous faut compléter le HTML afin de représenter le contenu pr
 
 Ensuite, adaptons le code CSS existant afin que la boîte d'information soit placée et positionnée. On change la règle ciblant `.info-box` afin de se débarrasser de `margin: 0 auto;` (on ne veut plus que la boîte soit centrée) et d'ajouter [`position`](/fr/docs/Web/CSS/position)`: fixed;` avant de l'attacher au haut de la zone d'affichage du navigateur avec [`top`](/fr/docs/Web/CSS/top).
 
-Voici ce à quoi ça devrait ressembler :
+Voici ce à quoi ça devrait ressembler&nbsp;:
 
 ```css
 .info-box {
@@ -283,7 +283,7 @@ Voici ce à quoi ça devrait ressembler :
 
 ### Mettre en forme le contenu principal
 
-Il nous reste alors à mettre en forme le contenu principal. Ajoutez la règle suivante à la suite de votre CSS existant :
+Il nous reste alors à mettre en forme le contenu principal. Ajoutez la règle suivante à la suite de votre CSS existant&nbsp;:
 
 ```css
 .fake-content {
@@ -301,15 +301,15 @@ Et voici la fin de ce deuxième exemple, espérons que le troisième vous sera t
 
 ## Un panneau glissant masqué
 
-Le dernier exemple que nous verrons ici est un panneau qui apparaît/disparaît en « glissant » de l'écran après avoir appuyé sur une icône. Comme mentionné plus haut, il s'agit d'un geste commun pour des dispositions mobiles où l'espace à l'écran est restreint et où on ne veut pas le gaspiller en montrant constamment un menu ou un panneau d'information à la place du contenu utile.
+Le dernier exemple que nous verrons ici est un panneau qui apparaît/disparaît en «&nbsp;glissant&nbsp;» de l'écran après avoir appuyé sur une icône. Comme mentionné plus haut, il s'agit d'un geste commun pour des dispositions mobiles où l'espace à l'écran est restreint et où on ne veut pas le gaspiller en montrant constamment un menu ou un panneau d'information à la place du contenu utile.
 
-Voilà ce à quoi ressemblera notre exemple terminé :
+Voilà ce à quoi ressemblera notre exemple terminé&nbsp;:
 
 ![](hidden-sliding-panel.png)
 
 > **Note :** Vous pouvez voir l'exemple fini en démonstration sur la page [hidden-info-panel.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.
 
-Pour commencer, enregistrez le fichier [hidden-info-panel-start.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html) sur votre ordinateur. Celui-ci ne repart pas de l'exemple précédent et il faut donc utiliser un nouveau fichier. Voyons déjà ce que contient le code HTML de ce fichier :
+Pour commencer, enregistrez le fichier [hidden-info-panel-start.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html) sur votre ordinateur. Celui-ci ne repart pas de l'exemple précédent et il faut donc utiliser un nouveau fichier. Voyons déjà ce que contient le code HTML de ce fichier&nbsp;:
 
 ```html
 <label for="toggle">❔</label>
@@ -323,7 +323,7 @@ Pour commencer, enregistrez le fichier [hidden-info-panel-start.html](https://gi
 
 Pour commencer, nous avons un élément [`<label>`](/fr/docs/Web/HTML/Element/Label) et un élément [`<input>`](/fr/docs/Web/HTML/Element/Input). Les éléments `<label>` sont généralement utilisés afin d'associer un libellé avec un élément de formulaire à des fins d'accessibilité (permettant par exemple à quelqu'un qui utilise un lecteur d'écran de connaître la description du contenu attendu dans ce champ de formulaire). Ici, ce libellé est associé avec la case à cocher `<input>` grâce aux attributs `for` et `id`.
 
-> **Note :** Nous avons utilisé un point d'interrogation dans notre HTML afin que celui-ci serve d'icône pour accéder à l'information : il représente le bouton qu'on utilisera pour afficher/masquer le panneau.
+> **Note :** Nous avons utilisé un point d'interrogation dans notre HTML afin que celui-ci serve d'icône pour accéder à l'information&nbsp;: il représente le bouton qu'on utilisera pour afficher/masquer le panneau.
 
 Ici, nous allons utiliser ces éléments pour un but légèrement différent. Un effet de bord sympathique des éléments `<label>` est que lorsqu'on clique sur eux, cela permet de cocher la case à cocher correspondante (comme si on avait cliqué sur la case en question). Cela a ainsi permis la fameuse [bidouille de la case à cocher](https://css-tricks.com/the-checkbox-hack/) qui permet, sans utiliser JavaScript, de contrôler un élément en activant un bouton. L'élément que nous contrôlerons ici est l'élément [`<aside>`](/fr/docs/Web/HTML/Element/aside) qui suit les deux autres (nous avons laissé son contenu de côté pour des raisons de concision).
 
@@ -331,7 +331,7 @@ Dans les sections qui suivent, nous expliquerons comment cela fonctionne.
 
 ### Mettre en forme les éléments de formulaire
 
-Commençons par les éléments de formulaire : ajoutez le CSS qui suit entre les balises [`<style>`](/fr/docs/Web/HTML/Element/style) :
+Commençons par les éléments de formulaire&nbsp;: ajoutez le CSS qui suit entre les balises [`<style>`](/fr/docs/Web/HTML/Element/style)&nbsp;:
 
 ```css
 label[for="toggle"] {
@@ -349,7 +349,7 @@ input[type="checkbox"] {
 }
 ```
 
-La première règle met en forme `<label>`, on y trouve :
+La première règle met en forme `<label>`, on y trouve&nbsp;:
 
 - Une taille de police ([`font-size`](/fr/docs/Web/CSS/font-size)) élevée afin que l'icône soit bien visible.
 - Une [`position`](/fr/docs/Web/CSS/position) `absolute` avec des définitions pour [`top`](/fr/docs/Web/CSS/top) et [`right`](/fr/docs/Web/CSS/right) qui permettent de positionner l'icône dans le coin supérieur droit.
@@ -360,7 +360,7 @@ La deuxième règle applique [`position`](/fr/docs/Web/CSS/position) `absolute`
 
 ### Mettre en forme le panneau
 
-Il est désormais temps de mettre en forme le panneau à proprement parler. Ajoutez la règle suivante à la fin de votre CSS :
+Il est désormais temps de mettre en forme le panneau à proprement parler. Ajoutez la règle suivante à la fin de votre CSS&nbsp;:
 
 ```css
 aside {
@@ -379,17 +379,17 @@ aside {
 }
 ```
 
-Il y a plusieurs déclarations ici, voyons-les au fur et à mesure :
+Il y a plusieurs déclarations ici, voyons-les au fur et à mesure&nbsp;:
 
 - Tout d'abord, on applique une couleur d'arrière-plan et pour le texte avec [`background-color`](/fr/docs/Web/CSS/background-color) et [`color`](/fr/docs/Web/CSS/color).
 - Ensuite, on définit une largeur ([`width`](/fr/docs/Web/CSS/width)) fixe sur le panneau et on définit la hauteur ([`height`](/fr/docs/Web/CSS/height)) afin que celle-ci occupe la hauteur de toute la zone d'affichage.
 - On ajoute également du remplissage ([`padding`](/fr/docs/Web/CSS/padding)) horizontal pour espacer légèrement.
 - Ensuite, on utilise [`position`](/fr/docs/Web/CSS/position)`: fixed;` sur le panneau afin qu'il apparaisse toujours à la même place, même s'il y a du contenu à faire défiler sur la page. On le colle en haut ([`top`](/fr/docs/Web/CSS/top)) de la zone d'affichage et on le positionne afin que, par défaut, il soit situé à droite ([`right`](/fr/docs/Web/CSS/right)) et en dehors de l'écran.
-- Enfin, on applique une [`transition`](/fr/docs/Web/CSS/transition) sur l'élément. Les transitions permettent de réaliser des changements d'état de façon progressive plutôt que d'avoir un passage abrupt entre « actif » et « inactif ». Ici, on veut que le panneau glisse progressivement pour apparaître à l'écran quand la case à cocher est cochée. Autrement dit, quand on clique sur l'icône du point d'interrogation (cela déclenche la bidouille qui coche la case), on veut que le panneau transitionne délicatement pour apparaître à l'écran.
+- Enfin, on applique une [`transition`](/fr/docs/Web/CSS/transition) sur l'élément. Les transitions permettent de réaliser des changements d'état de façon progressive plutôt que d'avoir un passage abrupt entre «&nbsp;actif&nbsp;» et «&nbsp;inactif&nbsp;». Ici, on veut que le panneau glisse progressivement pour apparaître à l'écran quand la case à cocher est cochée. Autrement dit, quand on clique sur l'icône du point d'interrogation (cela déclenche la bidouille qui coche la case), on veut que le panneau transitionne délicatement pour apparaître à l'écran.
 
 ### Définir l'état coché
 
-Voici le dernier fragment de CSS à ajouter, là encore à la fin :
+Voici le dernier fragment de CSS à ajouter, là encore à la fin&nbsp;:
 
 ```css
 input[type=checkbox]:checked + aside {
@@ -397,9 +397,9 @@ input[type=checkbox]:checked + aside {
 }
 ```
 
-Le sélecteur utilisé ici est plutôt complexe : on sélectionne l'élément `<aside>` adjacent à l'élément `<input>`, uniquement lorsque ce dernier est coché (grâce à la pseudo-classe [`:checked`](/fr/docs/Web/CSS/:checked)). Lorsque c'est le cas, on définit la propriété [`right`](/fr/docs/Web/CSS/right) de l'élément `<aside>` à `0px`, ce qui fait que le panneau apparaît à l'écran (progressivement grâce à la transition). Cliquer sur le libellé à nouveau permettra de décocher la case et de masquer le panneau à nouveau.
+Le sélecteur utilisé ici est plutôt complexe&nbsp;: on sélectionne l'élément `<aside>` adjacent à l'élément `<input>`, uniquement lorsque ce dernier est coché (grâce à la pseudo-classe [`:checked`](/fr/docs/Web/CSS/:checked)). Lorsque c'est le cas, on définit la propriété [`right`](/fr/docs/Web/CSS/right) de l'élément `<aside>` à `0px`, ce qui fait que le panneau apparaît à l'écran (progressivement grâce à la transition). Cliquer sur le libellé à nouveau permettra de décocher la case et de masquer le panneau à nouveau.
 
-Et voilà, une astuce sans JavaScript pour créer un interrupteur. Cela fonctionnera à partir de IE9 (les transitions fonctionneront à partir de IE10). Ce n'est pas totalement idéal : les éléments de formulaire n'ont pas été conçus pour ça ; l'accessibilité n'est pas au rendez-vous non plus : le libellé ne peut pas recevoir le focus par défaut et on utilise des éléments de formulaire de façon non sémantique, ce qui pourrait causer des problèmes avec les lecteurs d'écran. Pour affiner cela, utiliser du JavaScript avec un lien ou un bouton serait sans doute plus approprié. Quoi qu'il en soit, cela permet d'avoir un exemple fonctionnel avec quelques astuces pour expérimenter.
+Et voilà, une astuce sans JavaScript pour créer un interrupteur. Cela fonctionnera à partir de IE9 (les transitions fonctionneront à partir de IE10). Ce n'est pas totalement idéal&nbsp;: les éléments de formulaire n'ont pas été conçus pour ça&nbsp;; l'accessibilité n'est pas au rendez-vous non plus&nbsp;: le libellé ne peut pas recevoir le focus par défaut et on utilise des éléments de formulaire de façon non sémantique, ce qui pourrait causer des problèmes avec les lecteurs d'écran. Pour affiner cela, utiliser du JavaScript avec un lien ou un bouton serait sans doute plus approprié. Quoi qu'il en soit, cela permet d'avoir un exemple fonctionnel avec quelques astuces pour expérimenter.
 
 ## Résumé
 
diff --git a/files/fr/learn/css/css_layout/responsive_design/index.md b/files/fr/learn/css/css_layout/responsive_design/index.md
index 9c4fafc963..aa988cb435 100644
--- a/files/fr/learn/css/css_layout/responsive_design/index.md
+++ b/files/fr/learn/css/css_layout/responsive_design/index.md
@@ -76,7 +76,7 @@ Zoe Mickley Gillenwater a grandement contribué au travail de description et de
 Le terme de responsive design a été [inventé par Ethan Marcotte en 2010](https://alistapart.com/article/responsive-web-design/), et décrit la combinaison de trois techniques.
 
 1.  La première était l'idée des grilles fluides, une idée déjà explorée par Gillenwater, que l'on peut lire dans l'article de Marcotte, [Fluid Grids](https://alistapart.com/article/fluidgrids/) (publié en 2009 sur A List Apart).
-2.  La deuxième technique était l'idée [d'images fluides](http://unstoppablerobotninja.com/entry/fluid-images). En utilisant une technique très simple de réglage de la propriété `max-width` à `100%`,  les images deviennent plus petites si leur colonne de contenu devient plus étroite que la taille intrinsèque de l'image, mais ne deviennent jamais plus grandes. Cela permet à une image de se réduire pour s'intégrer dans une colonne de taille flexible, plutôt que de la déborder, mais de ne pas s'agrandir et de devenir pixélisée si la colonne devient plus large que l'image.
+2.  La deuxième technique était l'idée [d'images fluides](http://unstoppablerobotninja.com/entry/fluid-images). En utilisant une technique très simple de réglage de la propriété `max-width` à `100%`,  les images deviennent plus petites si leur colonne de contenu devient plus étroite que la taille intrinsèque de l'image, mais ne deviennent jamais plus grandes. Cela permet à une image de se réduire pour s'intégrer dans une colonne de taille flexible, plutôt que de la déborder, mais de ne pas s'agrandir et de devenir pixélisée si la colonne devient plus large que l'image.
 3.  Le troisième élément clé était la [media query](/fr/docs/Web/CSS/Media_Queries). Les Media Queries permettent de changer le type de mise en page que Cameron Adams avait précédemment exploré en utilisant JavaScript, en utilisant uniquement CSS. Au lieu d'avoir une seule mise en page pour toutes les tailles d'écran, la mise en page pouvait être modifiée. Les barres latérales pouvaient être repositionnées pour l'écran plus petit, ou une autre navigation pouvait être affichée.
 
 Il est important de comprendre que **le responsive web design n'est pas une technologie à part** - c'est un terme utilisé pour décrire une approche de la conception web, ou un ensemble de bonnes pratiques, utilisées pour créer une mise en page qui peut correspondre à l'appareil utilisé pour visualiser le contenu. Dans la recherche initiale de Marcotte, cela impliquait des grilles flexibles (en utilisant des flotteurs) et des média queries, mais depuis la rédaction de cet article, il y a presque 10 ans, le concept de responsive design est devenu la norme. Les méthodes modernes de mise en page CSS sont par nature responsives, et nous avons intégré de nouvelles choses à la plateforme Web pour faciliter la conception de sites responsives.
@@ -159,7 +159,7 @@ Si vous spécifiez plutôt une largeur de colonne, vous spécifiez une largeur m
 
 ### Flexbox
 
-Dans Flexbox, les articles flexibles se rétréciront et répartiront l'espace entre les articles en fonction de l'espace dans leur conteneur, en fonction de leur comportement initial. En modifiant les valeurs de `flex-grow` et `flex-shrink`  vous pouvez indiquer comment vous souhaitez que les articles se comportent lorsqu'ils rencontrent plus ou moins d'espace autour d'eux.
+Dans Flexbox, les articles flexibles se rétréciront et répartiront l'espace entre les articles en fonction de l'espace dans leur conteneur, en fonction de leur comportement initial. En modifiant les valeurs de `flex-grow` et `flex-shrink`  vous pouvez indiquer comment vous souhaitez que les articles se comportent lorsqu'ils rencontrent plus ou moins d'espace autour d'eux.
 
 Dans l'exemple ci-dessous, les éléments flex prendront chacun autant d'espace dans le conteneur flex, en utilisant la notation `flex: 1` comme décrit dans la rubrique de mise en page [Flexbox: Taille modulable des éléments flex](/fr/docs/Apprendre/CSS/CSS_layout/Flexbox#Taille_modulable_des_éléments_flex).
 
@@ -200,7 +200,7 @@ img {
 
 Cette approche présente des inconvénients évidents. L'image peut être affichée à une taille beaucoup plus petite que sa taille réelle, ce qui est un gaspillage de bande passante - un utilisateur mobile peut télécharger une image dont la taille est beaucoup plus grande que ce qu'il voit réellement dans la fenêtre du navigateur. De plus, il se peut que vous ne vouliez pas le même rapport hauteur/largeur de l'image sur le mobile que sur le bureau. Par exemple, il peut être agréable d'avoir une image carrée pour le mobile, mais de montrer la même image en format paysage sur le bureau. Ou, en tenant compte de la taille plus petite d'une image sur le mobile, vous pouvez vouloir montrer une image différente, qui est plus facile à comprendre sur un écran de petite taille. Ces choses ne peuvent pas être réalisées par une simple réduction de la taille d'une image.
 
-Les images responsives, en utilisant l'élément {{htmlelement("picture")}}  et les attributs {{htmlelement("img")}} `srcset` et `sizes`  permettent de résoudre ces deux problèmes. Vous pouvez fournir plusieurs tailles ainsi que des " indices " (méta-données qui décrivent la taille de l'écran et la résolution pour lesquelles l'image est la mieux adaptée), et le navigateur choisira l'image la plus appropriée pour chaque dispositif, en s'assurant qu'un utilisateur téléchargera une taille d'image appropriée pour le dispositif qu'il utilise.
+Les images responsives, en utilisant l'élément {{htmlelement("picture")}}  et les attributs {{htmlelement("img")}} `srcset` et `sizes`  permettent de résoudre ces deux problèmes. Vous pouvez fournir plusieurs tailles ainsi que des " indices " (méta-données qui décrivent la taille de l'écran et la résolution pour lesquelles l'image est la mieux adaptée), et le navigateur choisira l'image la plus appropriée pour chaque dispositif, en s'assurant qu'un utilisateur téléchargera une taille d'image appropriée pour le dispositif qu'il utilise.
 
 Vous pouvez également créer des images directes utilisées à différentes tailles, ce qui permet d'obtenir un recadrage différent ou une image complètement différente pour différentes tailles d'écran.
 
@@ -268,7 +268,7 @@ Cela signifie que nous n'avons besoin de spécifier la taille de la police pour
 
 ## Le méta-tag du viewport
 
-Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section `<head>` du document.
+Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section `<head>` du document.
 
 ```html
 <meta name="viewport" content="width=device-width,initial-scale=1">
@@ -278,9 +278,9 @@ Cette balise meta dit aux navigateurs mobiles qu'ils doivent ajuster la largeur
 
 Pourquoi est-ce nécessaire? Parce que les navigateurs mobiles ont tendance à mentir à propos de leur taille de fenêtre.
 
-Cette balise meta existe car lorsque l'Iphone original fut lancé et que les gens commencèrent à regarder des sites web sur un petit écran de téléphone, la plupart des sites n'étaient pas optimisés pour les mobiles. Le navigateur mobile définissait donc la largeur de la fenêtre d'affichage à 960 pixels, affichait la page à cette largeur et affichait le résultat sous la forme d'une version zoomée de la disposition du bureau. Les autres navigateurs mobiles (comme sur Google Android) faisaient la même chose. Les utilisateurs pouvaient zoomer et parcourir le site Web pour voir les éléments qui les intéressaient, mais l'affichage était mauvais. Vous le verrez toujours aujourd'hui si vous avez le malheur de tomber sur un site qui n'est pas responsive.
+Cette balise meta existe car lorsque l'Iphone original fut lancé et que les gens commencèrent à regarder des sites web sur un petit écran de téléphone, la plupart des sites n'étaient pas optimisés pour les mobiles. Le navigateur mobile définissait donc la largeur de la fenêtre d'affichage à 960 pixels, affichait la page à cette largeur et affichait le résultat sous la forme d'une version zoomée de la disposition du bureau. Les autres navigateurs mobiles (comme sur Google Android) faisaient la même chose. Les utilisateurs pouvaient zoomer et parcourir le site Web pour voir les éléments qui les intéressaient, mais l'affichage était mauvais. Vous le verrez toujours aujourd'hui si vous avez le malheur de tomber sur un site qui n'est pas responsive.
 
-Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant `width = device-width`, vous remplacez la largeur par défaut d'Apple de `width = 960px` par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu.
+Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant `width = device-width`, vous remplacez la largeur par défaut d'Apple de `width = 960px` par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu.
 
 **Vous devriez donc toujours inclure la ligne HTML ci-dessus dans la tête de vos documents.**
 
@@ -289,8 +289,8 @@ Il existe d'autres paramètres que vous pouvez utiliser avec la balise meta view
 - `initial-scale`: Définit le zoom initial de la page, que nous définissons à 1.
 - `height`: Definit une hauteur spécifique pour la fenêtre.
 - `minimum-scale`: Définit le niveau minimal de zoom
-- `maximum-scale`: Définit le niveau maximal de zoom.
-- `user-scalable`: Empêche le zoom si défini à `no`.
+- `maximum-scale`: Définit le niveau maximal de zoom.
+- `user-scalable`: Empêche le zoom si défini à `no`.
 
 Vous devriez éviter d'utiliser `minimum-scale`, `maximum-scale`, et en particulier la définition de `user-scalable` sur `no`. Les utilisateurs devraient être autorisés à zoomer autant ou aussi peu que nécessaire; éviter cela entraîne des problèmes d'accessibilité.
 
diff --git a/files/fr/learn/css/css_layout/supporting_older_browsers/index.md b/files/fr/learn/css/css_layout/supporting_older_browsers/index.md
index 437dd32c90..e2780f047b 100644
--- a/files/fr/learn/css/css_layout/supporting_older_browsers/index.md
+++ b/files/fr/learn/css/css_layout/supporting_older_browsers/index.md
@@ -26,7 +26,7 @@ Dans ce module, nous vous recommandons d'utiliser Flexbox et les grilles CSS com
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Les bases du HTML (étudiez
         <a href="/fr/docs/Learn/HTML/Introduction_to_HTML"
diff --git a/files/fr/learn/css/first_steps/getting_started/index.md b/files/fr/learn/css/first_steps/getting_started/index.md
index 4f3aa54fb1..67936e12ed 100644
--- a/files/fr/learn/css/first_steps/getting_started/index.md
+++ b/files/fr/learn/css/first_steps/getting_started/index.md
@@ -20,13 +20,13 @@ Dans cet article nous vous montrons comment appliquer un style CSS à un documen
     <tr>
       <th scope="row">Prérequis :</th>
       <td>
-        Connaissances élémentaires en informatique, <a
+        Connaissances élémentaires en informatique, <a
           href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base"
           >suite logicielle de base installée</a
-        >, compréhension élémentaire du <a
+        >, compréhension élémentaire du <a
           href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers"
-          > travail avec des fichiers</a
-        >, des bases en HTML (cf. <a
+          > travail avec des fichiers</a
+        >, des bases en HTML (cf. <a
           href="/fr/docs/Apprendre/HTML/Introduction_à_HTML"
           >Introduction à HTML</a
         >.)
@@ -42,9 +42,9 @@ Dans cet article nous vous montrons comment appliquer un style CSS à un documen
   </tbody>
 </table>
 
-## D'abord un peu de HTML
+## D'abord un peu de HTML
 
-Notre point de départ est un document HTML. Pour suivre la leçon en travaillant sur votre ordinateur, vous pouvez copier le code ci-dessous. Collez le dans un fichier en utilisant un éditeur de code, puis sauvegardez le sous le nom `index.html`.
+Notre point de départ est un document HTML. Pour suivre la leçon en travaillant sur votre ordinateur, vous pouvez copier le code ci-dessous. Collez le dans un fichier en utilisant un éditeur de code, puis sauvegardez le sous le nom `index.html`.
 
 ```html
 <!doctype html>
@@ -74,21 +74,21 @@ Notre point de départ est un document HTML. Pour suivre la leçon en travaillan
 </html>
 ```
 
-> **Note :** Si vous lisez cet article sur un appareil ou dans un environnement où il n'est pas aisé de créer des fichiers, pas de soucis — des éditeurs de code live sont proposés ci-dessous ; vous pourrez ainsi tester les exemples de code directement dans cette page.
+> **Note :** Si vous lisez cet article sur un appareil ou dans un environnement où il n'est pas aisé de créer des fichiers, pas de soucis — des éditeurs de code live sont proposés ci-dessous ; vous pourrez ainsi tester les exemples de code directement dans cette page.
 
-## Ajouter CSS à notre document
+## Ajouter CSS à notre document
 
-Pour commencer, on doit signaler au document HTML que nous souhaitons utiliser des règles CSS. Vous rencontrerez trois possibilités pour appliquer CSS à un document HTML. Nous nous contenterons de présenter la méthode la plus utilisée  — créer un lien vers la feuille de style CSS depuis l'en-tête du document HTML.
+Pour commencer, on doit signaler au document HTML que nous souhaitons utiliser des règles CSS. Vous rencontrerez trois possibilités pour appliquer CSS à un document HTML. Nous nous contenterons de présenter la méthode la plus utilisée  — créer un lien vers la feuille de style CSS depuis l'en-tête du document HTML.
 
-Avec votre éditeur de code, dans le dossier où se trouve le document HTML, créez un fichier et sauvegardez le sous le nom `styles.css`. L'extension `.css` indique que c'est un fichier CSS.
+Avec votre éditeur de code, dans le dossier où se trouve le document HTML, créez un fichier et sauvegardez le sous le nom `styles.css`. L'extension `.css` indique que c'est un fichier CSS.
 
-Pour lier `styles.css` à `index.html` ajoutez la ligne suivante dans la section {{htmlelement("head")}} du document HTML :
+Pour lier `styles.css` à `index.html` ajoutez la ligne suivante dans la section {{htmlelement("head")}} du document HTML :
 
 ```html
 <link rel="stylesheet" href="styles.css">
 ```
 
-Cet élément {{htmlelement("link")}} indique au navigateur la présence d'une feuille de style, grâce à l'attribut `rel` ; la valeur de l'attribut `href` donne la localisation du fichier CSS. Pour tester que le lien fonctionne, nous allons définir une règle dans `styles.css`. Grâce à votre éditeur de code, ajoutez les lignes suivantes à la feuille de style CSS :
+Cet élément {{htmlelement("link")}} indique au navigateur la présence d'une feuille de style, grâce à l'attribut `rel` ; la valeur de l'attribut `href` donne la localisation du fichier CSS. Pour tester que le lien fonctionne, nous allons définir une règle dans `styles.css`. Grâce à votre éditeur de code, ajoutez les lignes suivantes à la feuille de style CSS :
 
 ```css
 h1 {
@@ -96,15 +96,15 @@ h1 {
 }
 ```
 
-Dans votre éditeur de code, sauvegardez vos documents HTML et CSS puis rechargez la page HTML dans votre navigateur. Le titre de niveau un en haut du document devrait maintenant apparaître en rouge. Si c'est le cas, félicitations — vous avez appliqué avec succès une règle CSS à votre document HTML. Si ce n'est pas le cas, vérifiez scrupuleusement que vous avez tout bien fait comme indiqué.
+Dans votre éditeur de code, sauvegardez vos documents HTML et CSS puis rechargez la page HTML dans votre navigateur. Le titre de niveau un en haut du document devrait maintenant apparaître en rouge. Si c'est le cas, félicitations — vous avez appliqué avec succès une règle CSS à votre document HTML. Si ce n'est pas le cas, vérifiez scrupuleusement que vous avez tout bien fait comme indiqué.
 
-Pour suivre le reste de ce tutoriel, vous pouvez continuer à éditer `styles.css` sur votre machine, ou utiliser l'éditeur interactif proposé ci-dessous. L'éditeur interactif se comporte comme si le CSS dans le premier cadre était lié au document HTML, exactement comme sur votre machine après les manipulations précédentes.
+Pour suivre le reste de ce tutoriel, vous pouvez continuer à éditer `styles.css` sur votre machine, ou utiliser l'éditeur interactif proposé ci-dessous. L'éditeur interactif se comporte comme si le CSS dans le premier cadre était lié au document HTML, exactement comme sur votre machine après les manipulations précédentes.
 
 ## Mettre en forme des éléments HTML
 
 En passant la couleur de police des titres en rouge nous avons vu comment sélectionner et mettre en forme un élément HTML.
 
-Cela est réalisé grâce à un sélecteur d'élément — dans la règle CSS, le sélecteur correspond au nom d'un élément HTML. Pour appliquer un style à tous les paragraphes du document HTML on utilisera le sélecteur `p`. Voilà la règle pour passer en vert tous les paragraphes :
+Cela est réalisé grâce à un sélecteur d'élément — dans la règle CSS, le sélecteur correspond au nom d'un élément HTML. Pour appliquer un style à tous les paragraphes du document HTML on utilisera le sélecteur `p`. Voilà la règle pour passer en vert tous les paragraphes :
 
 ```css
 p {
@@ -112,7 +112,7 @@ p {
 }
 ```
 
-On peut cibler plusieurs éléments d'un coup en les listant, séparés par une virgule. Si je veux que tous les paragraphes et tous les items de liste soient verts j'écrirai la règle suivante :
+On peut cibler plusieurs éléments d'un coup en les listant, séparés par une virgule. Si je veux que tous les paragraphes et tous les items de liste soient verts j'écrirai la règle suivante :
 
 ```css
 p, li {
@@ -124,11 +124,11 @@ Testez cela dans l'éditeur interacif ci-dessous (éditer les boîtes de code) o
 
 {{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}}
 
-## Changer le comportement par défaut des éléments
+## Changer le comportement par défaut des éléments
 
-Quand on observe un document HTML bien formé, même simple comme notre exemple, on peut voir comment un navigateur le rend lisible par une mise en forme par défaut. Les titres sont écrits en gras dans une taille plus grande, les items des listes sont précédés d'une puce. Les navigateurs ont leurs feuilles de style internes qu'ils appliquent par défaut à toutes les pages ; sans cela, tout le texte s'agglutinerait en paquet et il faudrait tout mettre en forme à partir de zéro. Tous les navigateurs modernes rendent les contenus HTML par défaut essentiellement de la même manière.
+Quand on observe un document HTML bien formé, même simple comme notre exemple, on peut voir comment un navigateur le rend lisible par une mise en forme par défaut. Les titres sont écrits en gras dans une taille plus grande, les items des listes sont précédés d'une puce. Les navigateurs ont leurs feuilles de style internes qu'ils appliquent par défaut à toutes les pages ; sans cela, tout le texte s'agglutinerait en paquet et il faudrait tout mettre en forme à partir de zéro. Tous les navigateurs modernes rendent les contenus HTML par défaut essentiellement de la même manière.
 
-On recherche pourtant souvent autre chose que ce rendu par défaut. Il suffit alors de sélectionner l'élément HTML dont on veut modifier le rendu et d'écrire la règle CSS pour réaliser cette mise en forme.  Un bon exemple est notre `<ul>`, une liste non ordonnée. Ses items sont marqués par des puces et si on décide de se débarrasser de ces puces, on peut le faire comme suit :
+On recherche pourtant souvent autre chose que ce rendu par défaut. Il suffit alors de sélectionner l'élément HTML dont on veut modifier le rendu et d'écrire la règle CSS pour réaliser cette mise en forme.  Un bon exemple est notre `<ul>`, une liste non ordonnée. Ses items sont marqués par des puces et si on décide de se débarrasser de ces puces, on peut le faire comme suit :
 
 ```css
 li {
@@ -138,15 +138,15 @@ li {
 
 Ajoutez cette règle dans votre CSS et testez en l'effet.
 
-Cherchez maintenant sur MDN quelles sont les valeurs possibles pour la propriété `list-style-type`. Dans la page pour [`list-style-type`](/fr/docs/Web/CSS/list-style-type) vous trouverez un exemple interactif en haut de page, vous pourrez tester quelques valeurs ; toutes les valeurs autorisées sont détaillées dans le reste de la page.
+Cherchez maintenant sur MDN quelles sont les valeurs possibles pour la propriété `list-style-type`. Dans la page pour [`list-style-type`](/fr/docs/Web/CSS/list-style-type) vous trouverez un exemple interactif en haut de page, vous pourrez tester quelques valeurs ; toutes les valeurs autorisées sont détaillées dans le reste de la page.
 
-En parcourant la page de documentation, vous découvrirez qu'au lieu de supprimer les puces, vous pouvez en changer l'aspect — essayez la valeur `square` pour obtenir des puces carrées.
+En parcourant la page de documentation, vous découvrirez qu'au lieu de supprimer les puces, vous pouvez en changer l'aspect — essayez la valeur `square` pour obtenir des puces carrées.
 
 ## Ajouter une classe
 
-Jusqu'ici, nous avons mis en forme des éléments HTML repérés par leur nom de balise. Cela fonctionne tant que vous voulez appliquer le même style à tous les éléments de ce type dans le document. La plupart du temps ce n'est pas le comportement désiré ; il faut donc trouver une méthode pour sélectionner un sous-ensemble des éléments à mettre en forme sans changer l'apparence des autres éléments du même type. L'approche la plus commune pour obtenir ce comportement est d'ajouter une classe (pensez à une étiquette) aux éléments HTML à mettre en forme puis de sélectionner cette classe.
+Jusqu'ici, nous avons mis en forme des éléments HTML repérés par leur nom de balise. Cela fonctionne tant que vous voulez appliquer le même style à tous les éléments de ce type dans le document. La plupart du temps ce n'est pas le comportement désiré ; il faut donc trouver une méthode pour sélectionner un sous-ensemble des éléments à mettre en forme sans changer l'apparence des autres éléments du même type. L'approche la plus commune pour obtenir ce comportement est d'ajouter une classe (pensez à une étiquette) aux éléments HTML à mettre en forme puis de sélectionner cette classe.
 
-Dans le document HTML, ajouter un  [attribut class](/fr/docs/Web/HTML/Attributs_universels/class) au deuxième item de la liste :
+Dans le document HTML, ajouter un  [attribut class](/fr/docs/Web/HTML/Attributs_universels/class) au deuxième item de la liste :
 
 ```html
 <ul>
@@ -156,7 +156,7 @@ Dans le document HTML, ajouter un  [attribut class](/fr/docs/Web/HTML/Attributs
 </ul>
 ```
 
-Dans votre CSS vous pouvez maintenant cibler la classe `special` grâce à un sélecteur fait du nom de la classe précédé d'un point. Ajoutez le code suivant à votre feuille de style :
+Dans votre CSS vous pouvez maintenant cibler la classe `special` grâce à un sélecteur fait du nom de la classe précédé d'un point. Ajoutez le code suivant à votre feuille de style :
 
 ```css
 .special {
@@ -167,9 +167,9 @@ Dans votre CSS vous pouvez maintenant cibler la classe `special` grâce à un
 
 Sauvegardez et rechargez la page HTML dans votre navigateur pour observer le résultat.
 
-Vous pouvez attribuer la classe `special` à tout élément dans votre document HTML, dans le navigateur il sera rendu comme le deuxième item de la liste. Par exemple, vous pourriez appliquer ce style à l'élément `<span>` du premier paragraphe.
+Vous pouvez attribuer la classe `special` à tout élément dans votre document HTML, dans le navigateur il sera rendu comme le deuxième item de la liste. Par exemple, vous pourriez appliquer ce style à l'élément `<span>` du premier paragraphe.
 
-Vous verrez parfois des règles avec un sélecteur qui combine le nom de l'élément HTML avec celui de la classe  :
+Vous verrez parfois des règles avec un sélecteur qui combine le nom de l'élément HTML avec celui de la classe  :
 
 ```css
 li.special {
@@ -188,11 +188,11 @@ span.special {
 }
 ```
 
-Comme vous pouvez bien l'imaginer, certaines classes s'appliquent à un grand nombre d'éléments et il n'est pas pensable de devoir éditer la feuille de style à chaque modification du document HTML. Les sélecteurs composé du nom de l'élément suivi de celui de la classe sont donc plutôt réservés aux situations où la règle ne s'applique qu'à un élément unique.
+Comme vous pouvez bien l'imaginer, certaines classes s'appliquent à un grand nombre d'éléments et il n'est pas pensable de devoir éditer la feuille de style à chaque modification du document HTML. Les sélecteurs composé du nom de l'élément suivi de celui de la classe sont donc plutôt réservés aux situations où la règle ne s'applique qu'à un élément unique.
 
 ## Style en fonction de la position
 
-Il y a des situations où vous voudrez que le style d'un élément s'adapte en fonction de sa position dans le document. De nombreux sélecteurs permettent de réaliser ce type de comportement, voyons les plus simples. Dans notre document HTML il y a deux éléments `<em>` — l'un dans un paragraphe l'autre dans l'item d'une liste. On peut cibler le `<em>` imbriqué dans l'élément `<li>` avec un **combinateur descendant** qui prend la forme suivante **:** deux sélecteurs séparés par un espace.
+Il y a des situations où vous voudrez que le style d'un élément s'adapte en fonction de sa position dans le document. De nombreux sélecteurs permettent de réaliser ce type de comportement, voyons les plus simples. Dans notre document HTML il y a deux éléments `<em>` — l'un dans un paragraphe l'autre dans l'item d'une liste. On peut cibler le `<em>` imbriqué dans l'élément `<li>` avec un **combinateur descendant** qui prend la forme suivante **:** deux sélecteurs séparés par un espace.
 
 Ajoutez la règle suivante à votre feuille de style :
 
@@ -202,9 +202,9 @@ li em {
 }
 ```
 
-Ce sélecteur cible tout élément `<em>` à l'intérieur (descendant) d'un `<li>`. Ainsi, dans notre exemple, le `<em>` dans le troisième item de la liste sera maintenant pourpre, alors que celui du paragraphe est inchangé.
+Ce sélecteur cible tout élément `<em>` à l'intérieur (descendant) d'un `<li>`. Ainsi, dans notre exemple, le `<em>` dans le troisième item de la liste sera maintenant pourpre, alors que celui du paragraphe est inchangé.
 
-On pourrait maintenant essayer d'appliquer un style à un paragraphe quand il vient juste après un titre de niveau un dans le HTML. Pour obtenir cela, on place un `+`  (le **combinateur de frères et sœurs adjacents**) entre les sélecteurs.
+On pourrait maintenant essayer d'appliquer un style à un paragraphe quand il vient juste après un titre de niveau un dans le HTML. Pour obtenir cela, on place un `+`  (le **combinateur de frères et sœurs adjacents**) entre les sélecteurs.
 
 Ajoutez cette règle à votre feuille de style :
 
@@ -214,11 +214,11 @@ h1 + p {
 }
 ```
 
-L'exemple live ci-dessous inclut les deux règles précédentes. Essayez d'ajouter une règle qui passe \<span> en rouge s'il est dans un paragraphe. Votre règle est correcte, si après sauvegarde du CSS et rafraîchissement du HTML dans le navigateur, le \<span> du premier paragraphe est rouge mais celui du premier item de la liste est inchangé.
+L'exemple live ci-dessous inclut les deux règles précédentes. Essayez d'ajouter une règle qui passe \<span> en rouge s'il est dans un paragraphe. Votre règle est correcte, si après sauvegarde du CSS et rafraîchissement du HTML dans le navigateur, le \<span> du premier paragraphe est rouge mais celui du premier item de la liste est inchangé.
 
 {{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}
 
-> **Note :** A ce point, on a déjà découvert plusieurs méthodes CSS pour cibler les éléments et pourtant on vient à peine de commencer ! Nous passerons en revue plus systématiquement tous ces sélecteurs dans la leçon [CSS Selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) du cours suivant.
+> **Note :** A ce point, on a déjà découvert plusieurs méthodes CSS pour cibler les éléments et pourtant on vient à peine de commencer ! Nous passerons en revue plus systématiquement tous ces sélecteurs dans la leçon [CSS Selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) du cours suivant.
 
 ## Mise en forme basée sur l'état
 
@@ -234,7 +234,7 @@ a:visited {
 }
 ```
 
-On peut changer l'aspect des liens survolés, par exemple en supprimant le soulignement, avec la règle suivante :
+On peut changer l'aspect des liens survolés, par exemple en supprimant le soulignement, avec la règle suivante :
 
 ```css
 a:hover {
@@ -246,17 +246,17 @@ Dans l'exemple live ci-dessous, vous pouvez explorer les valeurs des différents
 
 {{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}}
 
-Nous avons supprimé le soulignement quand le lien est survolé.Vous pourriez supprimer le soulignement quel que soit l'état du lien. Dans un vrai site, il est quand même important que le visiteur sache qu'un lien est un lien. Le soulignement donne un indice important aux visiteurs pour réaliser qu'un bout de texte dans un paragraphe est cliquable — c'est le comportement auquel ils sont habitués. Avec le contrôle que donne CSS, les changements de style peuvent parfois rendre le document moins accessible — à chaque fois que nécessaire nous nous efforcerons de signaler les pièges classiques dans cette direction.
+Nous avons supprimé le soulignement quand le lien est survolé.Vous pourriez supprimer le soulignement quel que soit l'état du lien. Dans un vrai site, il est quand même important que le visiteur sache qu'un lien est un lien. Le soulignement donne un indice important aux visiteurs pour réaliser qu'un bout de texte dans un paragraphe est cliquable — c'est le comportement auquel ils sont habitués. Avec le contrôle que donne CSS, les changements de style peuvent parfois rendre le document moins accessible — à chaque fois que nécessaire nous nous efforcerons de signaler les pièges classiques dans cette direction.
 
-> **Note :** dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'[accessibilité](/fr/docs/Apprendre/a11y) : les règles pour que nos pages soient compréhensibles et utilisables par tous.
+> **Note :** dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'[accessibilité](/fr/docs/Apprendre/a11y)&nbsp;: les règles pour que nos pages soient compréhensibles et utilisables par tous.
 >
-> Vos visiteurs peuvent consulter votre page depuis un ordinateur équipé d'une souris ou d'un trackpad, ou depuis un téléphone avec un écran tactile. Ils peuvent aussi utiliser un lecteur d'écran qui parcourt le contenu du document. Ils pourraient avoir besoin d'un affichage en grands caractères, ou parcourir votre site en ne naviguant qu'avec le clavier.
+> Vos visiteurs peuvent consulter votre page depuis un ordinateur équipé d'une souris ou d'un trackpad, ou depuis un téléphone avec un écran tactile. Ils peuvent aussi utiliser un lecteur d'écran qui parcourt le contenu du document. Ils pourraient avoir besoin d'un affichage en grands caractères, ou parcourir votre site en ne naviguant qu'avec le clavier.
 >
-> Un document HTML pur est généralement accessible à tous — il est important que les mises en forme appliquées ne le rendent pas moins accessible.
+> Un document HTML pur est généralement accessible à tous — il est important que les mises en forme appliquées ne le rendent pas moins accessible.
 
-## Associer sélecteurs et combinateurs
+## Associer sélecteurs et combinateurs
 
-On peut associer sélecteurs et combinateurs. Par exemple :
+On peut associer sélecteurs et combinateurs. Par exemple :
 
 ```css
 /* sélectionne tout <span> à l'intérieur d'un <p>, lui-même à l'intérieur d'un <article>  */
@@ -266,7 +266,7 @@ article p span { ... }
 h1 + ul + p { ... }
 ```
 
-On peut aussi combiner les types multiples. Essayez d'ajouter les règles suivantes à votre feuille de style :
+On peut aussi combiner les types multiples. Essayez d'ajouter les règles suivantes à votre feuille de style&nbsp;:
 
 ```css
 body h1 + p .special {
@@ -276,17 +276,17 @@ body h1 + p .special {
 }
 ```
 
-Cette règle cible tout élément dont l'attribut class vaut `special`, à l'intérieur d'un `<p>`, qui vient juste après un `<h1>`, à l'intérieur de `<body>`. Ouf !
+Cette règle cible tout élément dont l'attribut class vaut `special`, à l'intérieur d'un `<p>`, qui vient juste après un `<h1>`, à l'intérieur de `<body>`. Ouf !
 
-Dans notre document HTML le seul élément mis en forme selon la règle ci-dessus est `<span class="special">`.
+Dans notre document HTML le seul élément mis en forme selon la règle ci-dessus est `<span class="special">`.
 
-Pas de panique, cela peut sembler compliqué pour le moment — avec un peu de pratique du CSS, vous maîtriserez très bientôt tout cela.
+Pas de panique, cela peut sembler compliqué pour le moment — avec un peu de pratique du CSS, vous maîtriserez très bientôt tout cela.
 
 ## Bilan
 
-Dans ce tutoriel nous avons vu plusieurs façons de mettre en forme un document grâce aux règles CSS. En progressant dans les leçons de ce cours, nous développerons ces connaissances.
+Dans ce tutoriel nous avons vu plusieurs façons de mettre en forme un document grâce aux règles CSS. En progressant dans les leçons de ce cours, nous développerons ces connaissances.
 
-Vous en savez pourtant déjà assez pour : mettre en forme un texte ; utiliser différentes méthodes pour sélectionner les éléments HTML visés ; et recherchez les propriétés et les valeurs dans la documentation MDN.
+Vous en savez pourtant déjà assez pour : mettre en forme un texte ; utiliser différentes méthodes pour sélectionner les éléments HTML visés ; et recherchez les propriétés et les valeurs dans la documentation MDN.
 
 Dans la leçon suivante, nous étudirons comment CSS est structuré.
 
@@ -294,8 +294,8 @@ Dans la leçon suivante, nous étudirons comment CSS est structuré.
 
 ## Dans ce cours
 
-1.  [Qu'est ce que  CSS?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS)
-2.  [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started)
-3.  [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured)
+1.  [Qu'est ce que CSS?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS)
+2.  [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started)
+3.  [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured)
 4.  [CSS comment ça marche ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works)
 5.  [Utiliser vos connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge)
diff --git a/files/fr/learn/css/first_steps/how_css_is_structured/index.md b/files/fr/learn/css/first_steps/how_css_is_structured/index.md
index 1914be5f1a..08df81c4d2 100644
--- a/files/fr/learn/css/first_steps/how_css_is_structured/index.md
+++ b/files/fr/learn/css/first_steps/how_css_is_structured/index.md
@@ -10,7 +10,7 @@ Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Maîtrise élémentaire de l'informatique,
         <a
@@ -29,7 +29,7 @@ Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>Approfondir les structures syntaxiques fondamentales de CSS</td>
     </tr>
   </tbody>
diff --git a/files/fr/learn/css/first_steps/index.md b/files/fr/learn/css/first_steps/index.md
index be0e15cdfc..a39b2f1be0 100644
--- a/files/fr/learn/css/first_steps/index.md
+++ b/files/fr/learn/css/first_steps/index.md
@@ -22,17 +22,17 @@ Nous avons mis au point un cours qui comprend toutes les informations essentiell
 Avant de commencer ce module, vous devriez avoir :
 
 1.  Une connaissance basique de l'utilisation d'un ordinateur, et l'utilisation passive du Web (i.e. consulter des sites, consommer le contenu s'y trouvant) ;
-2.  Un environnement de travail minimal installé, comme indiqué dans la section [installer les logiciels de base](/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) et une compréhension de la façon de créer et gérer des fichiers, comme indiqué dans la section [Gérer les fichiers](/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) ;
+2.  Un environnement de travail minimal installé, comme indiqué dans la section [installer les logiciels de base](/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) et une compréhension de la façon de créer et gérer des fichiers, comme indiqué dans la section [Gérer les fichiers](/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers)&nbsp;;
 3.  Une familiarité avec HTML, comme discuté dans le module d'[introduction à HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML).
 
-> **Note :** Si vous travaillez sur un ordinateur / tablette / autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code sur des sites de programmation en ligne comme [JSBin](/fr/docs/) ou [Thimble](/fr/docs/).
+> **Note :** Si vous travaillez sur un ordinateur / tablette / autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code sur des sites de programmation en ligne comme [JSBin](/fr/docs/) ou [Thimble](/fr/docs/).
 
 ## Guides
 
-Ce module contient les articles suivants, qui vous présenteront les bases théoriques du CSS et vous fourniront des occasions de mettre en pratique vos nouvelles compétences :
+Ce module contient les articles suivants, qui vous présenteront les bases théoriques du CSS et vous fourniront des occasions de mettre en pratique vos nouvelles compétences :
 
 - [Qu'est-ce que le CSS?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS)
-  - : **{{Glossary("CSS")}}** (Cascading Style Sheets) permet de créer de superbes pages web, mais comment fonctionne-t-il sous le capot ? Cet article explique ce qu'est le CSS à l'aide d'un exemple de syntaxe simple et couvre également quelques-uns des termes clés du langage.
+  - : **{{Glossary("CSS")}}** (Cascading Style Sheets) permet de créer de superbes pages web, mais comment fonctionne-t-il sous le capot ? Cet article explique ce qu'est le CSS à l'aide d'un exemple de syntaxe simple et couvre également quelques-uns des termes clés du langage.
 - [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started)
   - : Dans cet article, nous partirons d'un document HTML simple et y appliquerons des CSS, tout en apprenant des choses pratiques sur le langage.
 - [Comment est structuré le CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured)
@@ -40,9 +40,9 @@ Ce module contient les articles suivants, qui vous présenteront les bases théo
 - [Comment CSS Fonctionne](/fr/docs/Learn/CSS/First_steps/How_CSS_works)
   - : Nous avons appris les bases de CSS, ce qu'il est et comment écrire des feuilles de style simple. Dans cette leçon, nous étudierons comment un navigateur transforme CSS et HTML en une page web.
 - [Utilisez vos nouvelles compétences](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge)
-  - : Avec toutes les choses que vous avez apprises dans les dernières leçons, vous devriez être capable de formater des documents textuels simples en utilisant CSS et y ajouter votre propre style. Cet article vous permet d'expérimenter.
+  - : Avec toutes les choses que vous avez apprises dans les dernières leçons, vous devriez être capable de formater des documents textuels simples en utilisant CSS et y ajouter votre propre style. Cet article vous permet d'expérimenter.
 
 ## Voir aussi
 
 - Literacy [Web intermédiaire 1&nbsp;: Introduction au CSS](/fr/docs/)
-  - : Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module _Introduction à CSS_. Approfondissements à propos de l'application de styles sur les éléments HTML d'une page Web, les sélecteurs CSS, les attributs et valeurs.P
+  - : Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module _Introduction à CSS_. Approfondissements à propos de l'application de styles sur les éléments HTML d'une page Web, les sélecteurs CSS, les attributs et valeurs.P
diff --git a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md
index fcb42335eb..c24d68d80b 100644
--- a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md
+++ b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md
@@ -10,7 +10,7 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge
 ---
 {{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
 
-Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS.
+Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS.
 
 <table class="standard-table">
   <tbody>
@@ -19,7 +19,7 @@ Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons préc
       <td>
         Avant de vous soumettre à cette évaluation, vous avez suivi le module
         sur les bases de CSS ; vous maîtrisez par ailleurs les bases de HTML
-        (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML"
+        (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML"
           >Introduction à HTML</a
         >).
       </td>
@@ -33,13 +33,13 @@ Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons préc
 
 ## Point de départ
 
-Vous pouvez travailler dans l'éditeur ci-dessous ou [télécharger le point de départ](https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/) pour travailler en local sur votre machine, avec votre propre éditeur de code.  Ce point de départ est une page HTML avec le CSS interne écrit dans la section `<head>`. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), ou [Glitch](https://glitch.com/) pour travailler sur les tâches proposées.
+Vous pouvez travailler dans l'éditeur ci-dessous ou [télécharger le point de départ](https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/) pour travailler en local sur votre machine, avec votre propre éditeur de code.  Ce point de départ est une page HTML avec le CSS interne écrit dans la section `<head>`. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), ou [Glitch](https://glitch.com/) pour travailler sur les tâches proposées.
 
-> **Note :** ne restez pas coincé, appelez à l'aide — voir la section [Evaluation et comment obtenir de l'aide](#evaluation) au bas de cette page.
+> **Note :** ne restez pas coincé, appelez à l'aide — voir la section [Evaluation et comment obtenir de l'aide](#evaluation) au bas de cette page.
 
-## Travailler avec CSS
+## Travailler avec CSS
 
-L'exemple ci-dessous propose de retravailler la mise en forme d'une biographie stylée avec CSS. Les propriétés utilisées sont les suivantes — chacune renvoie vers sa page MDN pour plus d'exemples d'usages :
+L'exemple ci-dessous propose de retravailler la mise en forme d'une biographie stylée avec CSS. Les propriétés utilisées sont les suivantes — chacune renvoie vers sa page MDN pour plus d'exemples d'usages :
 
 - {{cssxref("font-family")}}
 - {{cssxref("color")}}
@@ -48,52 +48,52 @@ L'exemple ci-dessous propose de retravailler la mise en forme d'une biographie
 - {{cssxref("font-size")}}
 - {{cssxref("text-decoration")}}
 
-J'ai utilisé un mélange de sélecteurs, d'éléments HTML comme `h1` et `h2` ; j'ai aussi créé une classe `job-title`.
+J'ai utilisé un mélange de sélecteurs, d'éléments HTML comme `h1` et `h2` ; j'ai aussi créé une classe `job-title`.
 
-Utilisez CSS pour changer l'apparence de cette biographie en modifiant les valeurs des propriétés CSS utilisées :
+Utilisez CSS pour changer l'apparence de cette biographie en modifiant les valeurs des propriétés CSS utilisées :
 
-1.  Affichez le titre de niveau 1 en `hotpink` ;
-2.  Donnez au titre un {{cssxref("border-bottom")}} de `10px dotted` de couleur `purple` ;
+1.  Affichez le titre de niveau 1 en `hotpink` ;
+2.  Donnez au titre un {{cssxref("border-bottom")}} de `10px dotted` de couleur `purple` ;
 3.  Affichez le titre de niveau 2 en italique ;
-4.  Colorez la `ul` des détails de contacts en {{cssxref("background-color")}} `#eeeeee`, avec un {{cssxref("border")}} de `5px solid purple`. Utilisez la propriété {{cssxref("padding")}} pour éloigner le contenu du bord.
-5.  Faites que les liens apparaissent en `green` lors d'un survol du curseur.
+4.  Colorez la `ul` des détails de contacts en {{cssxref("background-color")}} `#eeeeee`, avec un {{cssxref("border")}} de `5px solid purple`. Utilisez la propriété {{cssxref("padding")}} pour éloigner le contenu du bord.
+5.  Faites que les liens apparaissent en `green` lors d'un survol du curseur.
 
 Vous devriez obtenir un rendu qui ressemble à cela :
 
 ![Screenshot of how the example should look after completing the assessment.](learn-css-basics-assessment.png)
 
-Une fois cette tâche accomplie, n'hésitez pas à explorer des propriétés rencontrées dans la [référence CSS sur MDN](/fr/docs/Web/CSS/Reference) !
+Une fois cette tâche accomplie, n'hésitez pas à explorer des propriétés rencontrées dans la [référence CSS sur MDN](/fr/docs/Web/CSS/Reference)&nbsp;!
 
-À ce stade, il n'y a pas de réponse incorrecte — autorisez vous un peu de fantaisie.
+À ce stade, il n'y a pas de réponse incorrecte — autorisez vous un peu de fantaisie.
 
 {{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}}
 
-## Evaluation ou compléments d'information
+## Evaluation ou compléments d'information
 
 Si vous voulez une évaluation de votre travail, ou si vous êtes coincé et recherchez de l'aide :
 
-1.  Publiez votre code dans un éditeur en ligne tel [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
+1.  Publiez votre code dans un éditeur en ligne tel [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
 2.  Si vous êtes à l'aise en anglais :
 
-    1.  Dans le [forum MDN Discourse](https://discourse.mozilla.org/c/mdn), écrivez un billet pour évaluation et/ou demande d'aide. Ajouter le tag "learning"  à votre post pour que nous puissions le trouver plus facilement. Votre post devrait contenir :
+    1.  Dans le [forum MDN Discourse](https://discourse.mozilla.org/c/mdn), écrivez un billet pour évaluation et/ou demande d'aide. Ajouter le tag "learning"  à votre post pour que nous puissions le trouver plus facilement. Votre post devrait contenir :
 
         - Un titre parlant comme "Assessment wanted for CSS First Steps".
-        - Des détails sur ce que vous voudriez que l'on fasse — par exemple, ce que vous avez déjà essayé si vous êtes coincé et demandez de l'aide.
-        - Un lien vers l'exemple dans l'éditeur en ligne, sur lequel vous demandez une évaluation ou de l'aide : voilà une bonne pratique — il n'est pas commode d'aider quelqu'un coincé sur son code quand on ne peut pas voir ce code...
+        - Des détails sur ce que vous voudriez que l'on fasse — par exemple, ce que vous avez déjà essayé si vous êtes coincé et demandez de l'aide.
+        - Un lien vers l'exemple dans l'éditeur en ligne, sur lequel vous demandez une évaluation ou de l'aide : voilà une bonne pratique — il n'est pas commode d'aider quelqu'un coincé sur son code quand on ne peut pas voir ce code...
         - Un lien vers cette page d'évaluation afin que nous puissions voir la question sur laquelle vous demandez de l'aide.
 
 3.  Sinon, n'hésitez pas à contacter @MDNfr sur Twitter.
 
 ## La suite ?
 
-Bravo, vous avez suivi ce cours jusqu'au bout. Avec votre connaissance de CSS, vous comprenez maintenant le fonctionnement d'une feuille de style. Dans le prochain cours, [construire des blocs CSS](/fr/docs/Apprendre/CSS/Building_blocks), nous approfondirons de nombreux points.
+Bravo, vous avez suivi ce cours jusqu'au bout. Avec votre connaissance de CSS, vous comprenez maintenant le fonctionnement d'une feuille de style. Dans le prochain cours, [construire des blocs CSS](/fr/docs/Apprendre/CSS/Building_blocks), nous approfondirons de nombreux points.
 
 {{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Apprendre/CSS/Premiers_pas")}}
 
 ## Dans ce cours
 
 1.  [Qu'est-ce que CSS ?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS)
-2.  [Commencer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started)
-3.  [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured)
+2.  [Commencer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started)
+3.  [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured)
 4.  [CSS, comment ça marche ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works)
 5.  [Mettez en œuvre vos connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge)
diff --git a/files/fr/learn/css/first_steps/what_is_css/index.md b/files/fr/learn/css/first_steps/what_is_css/index.md
index 48f5fc8f5f..ae102593f7 100644
--- a/files/fr/learn/css/first_steps/what_is_css/index.md
+++ b/files/fr/learn/css/first_steps/what_is_css/index.md
@@ -49,7 +49,7 @@ Les **documents** en question sont des fichiers texte structurés avec un langag
 
 **Présenter** un document à l'utilisateur signifie convertir ce document dans une forme utilisable par le public visé. Les [navigateurs](/fr/docs/Glossary/Browser), tels [Firefox](/fr/docs/Glossary/Mozilla_Firefox), [Chrome](/fr/docs/Glossary/Google_Chrome), [Safari](/fr/docs/Glossary/Apple_Safari) ou [Edge](/fr/docs/Glossary/Microsoft_Edge) sont conçus pour présenter visuellement des documents, que ce soit sur l'écran d'un ordinateur, un vidéo-projecteur ou une imprimante.
 
-> **Note :** Un navigateur est parfois appelé [agent utilisateur](/fr/docs/Glossary/User_agent). On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres agents utilisateurs comme les programmes qui convertissent des documents  HTML et CSS en documents PDF imprimables.
+> **Note :** Un navigateur est parfois appelé [agent utilisateur](/fr/docs/Glossary/User_agent). On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres agents utilisateurs comme les programmes qui convertissent des documents HTML et CSS en documents PDF imprimables.
 
 CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple, changer [la couleur](/fr/docs/Web/CSS/color_value) et [la taille](/fr/docs/Web/CSS/font-size) des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple, [transformer un texte affiché sur une colonne en une composition](/fr/docs/Web/CSS/Layout_cookbook/Column_layouts) avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des [animations](/fr/docs/Web/CSS/CSS_Animations). N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples.
 
diff --git a/files/fr/learn/css/howto/create_fancy_boxes/index.md b/files/fr/learn/css/howto/create_fancy_boxes/index.md
index 4b83c4ebc0..e39d07e2a0 100644
--- a/files/fr/learn/css/howto/create_fancy_boxes/index.md
+++ b/files/fr/learn/css/howto/create_fancy_boxes/index.md
@@ -104,17 +104,17 @@ Passons à la manipulation :
      sont considérés et manipulés comme des
      images */
   background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%);
+                    linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%);
 }
 ```
 
diff --git a/files/fr/learn/css/howto/css_faq/index.md b/files/fr/learn/css/howto/css_faq/index.md
index cd4ad34b7a..f567b7ab3f 100644
--- a/files/fr/learn/css/howto/css_faq/index.md
+++ b/files/fr/learn/css/howto/css_faq/index.md
@@ -11,7 +11,7 @@ original_slug: Web/CSS/CSS_questions_frequentes
 ---
 ## Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ?
 
-Pour afficher un document, les navigateurs utilisent le `DOCTYPE` - contraction de l'anglais _document type_, littéralement « type de document ». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un `DOCTYPE` correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur.
+Pour afficher un document, les navigateurs utilisent le `DOCTYPE` - contraction de l'anglais _document type_, littéralement «&nbsp;type de document&nbsp;». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un `DOCTYPE` correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur.
 
 Les navigateurs modernes ont deux modes de rendu :
 
@@ -52,7 +52,7 @@ Quand vous voulez appliquer un style à un bloc ou un élément spécifique, uti
 
 Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut `class`.
 
-Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type `label` et `form` ou pour décorer des éléments qui doivent être sémantiquement uniques.
+Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type `label` et `form` ou pour décorer des éléments qui doivent être sémantiquement uniques.
 
 Voire [Les sélecteurs CSS](/fr/docs/CSS/Premiers_pas/Les_sélecteurs "Les sélecteurs CSS").
 
@@ -66,7 +66,7 @@ Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant
 
 CSS ne permet de faire dériver un style d'un autre. Voire [l'article d'Eric Meyer à propos de la position du groupe de travail](http://archivist.incutio.com/viewlist/css-discuss/2685). Par contre, assigner plusieurs classes à un seul élément peut produire le même effet.
 
-## Comment  assigner de multiples classes à un élément?
+## Comment assigner de multiples classes à un élément?
 
 Il est possible d'assigner aux éléments HTML de multiples classes en les listant dans l'attribut `class` en séparant chaque classe d'un espace.
 
diff --git a/files/fr/learn/css/index.md b/files/fr/learn/css/index.md
index 33af4277c2..e6046e24bf 100644
--- a/files/fr/learn/css/index.md
+++ b/files/fr/learn/css/index.md
@@ -21,7 +21,7 @@ original_slug: Apprendre/CSS
 
 ## Parcours d'apprentissage
 
-Vous devriez vraiment apprendre les bases du HTML avant d'essayer n'importe quelles CSS. Nous vous recommandons de travailler d'abord notre module [Introduction au HTML —](/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML) vous pourrez ensuite en apprendre davantage au sujet :
+Vous devriez vraiment apprendre les bases du HTML avant d'essayer n'importe quelles CSS. Nous vous recommandons de travailler d'abord notre module [Introduction au HTML —](/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML) vous pourrez ensuite en apprendre davantage au sujet&nbsp;:
 
 - des CSS, en commençant avec le module [Introduction aux CSS](/fr/docs/Learn/CSS/First_steps)
 - des [Modules HTML](/fr/Learn/HTML#Modules) plus avancés
@@ -38,14 +38,14 @@ Il est recommandé de travailler par le biais de Débuter avec le web avant d'es
 Cet article contient les modules suivants, dans l'ordre suggéré pour le parcours. Vous devez vraiment commencer par le premier.
 
 - [Introduction aux CSS](/fr/Apprendre/CSS/Introduction_à_CSS)
-  - : Ce module vous enseigne les bases du fonctionnement des CSS ; il comprend les sélecteurs et les propriétés, l'écriture des règles des CSS, l'application des CSS au HTML, la définition de la longueur, de la couleur et d'autres unités avec les CSS, la cascade et l'héritage, les bases du modèle de boîte et le débogage du CSS.
+  - : Ce module vous enseigne les bases du fonctionnement des CSS&nbsp;; il comprend les sélecteurs et les propriétés, l'écriture des règles des CSS, l'application des CSS au HTML, la définition de la longueur, de la couleur et d'autres unités avec les CSS, la cascade et l'héritage, les bases du modèle de boîte et le débogage du CSS.
 - [Styliser les boîtes](/fr/Apprendre/CSS/styliser_boites)
-  - : Ensuite, nous examinons la stylisation des boîtes : une des étapes fondamentales de la composition d'une page Web. Dans ce module, nous récapitulons les modèles de boîtes, puis nous nous penchons sur le contrôle de leur disposition en définissant le remplissage, les bordures et les marges, la personnalisation des couleurs d'arrière-plan, les images et autres caractéristiques, les caractéristiques de fantaisie telles que filtres et ombrages des boîtes.
+  - : Ensuite, nous examinons la stylisation des boîtes&nbsp;: une des étapes fondamentales de la composition d'une page Web. Dans ce module, nous récapitulons les modèles de boîtes, puis nous nous penchons sur le contrôle de leur disposition en définissant le remplissage, les bordures et les marges, la personnalisation des couleurs d'arrière-plan, les images et autres caractéristiques, les caractéristiques de fantaisie telles que filtres et ombrages des boîtes.
 
 <!---->
 
 - [Composer du texte](/fr/docs/Learn/CSS/Styling_text)
-  - : Ici, nous examinons les principes fondamentaux pour composer du texte : réglage de la police, graisse et italique, espacement des lignes et des lettres, les ombrage et autres caractéristiques. Nous complétons le module en appliquant des polices personnalisées à la page, ainsi que des listes de styles et des liens.
+  - : Ici, nous examinons les principes fondamentaux pour composer du texte&nbsp;: réglage de la police, graisse et italique, espacement des lignes et des lettres, les ombrage et autres caractéristiques. Nous complétons le module en appliquant des polices personnalisées à la page, ainsi que des listes de styles et des liens.
 - [Mise en page avec les CSS](/fr/Apprendre/CSS/CSS_layout)
 
   - : À ce stade, ont déjà été examinés les principes fondamentaux des CSS, la façon de composer du texte, de styliser et de manipuler les boîtes où se trouve le contenu. Maintenant, il est temps de voir comment placer les boîtes au bon endroit dans la fenêtre et l'une par rapport à l'autre. Maintenant que sont couvertes les conditions préalables nécessaires, vous pouvez entrer plus avant dans les mises en page avec les CSS, regarder les divers paramètres d'affichage, les méthodes traditionnelles de mise en page y compris flottement et positionnement ainsi que les nouveaux outils de mises en page tape à l'œil, comme flexbox.
@@ -65,4 +65,4 @@ Le CSS fonctionne un peu différemment de la plupart des langages de programmati
 ## Voir aussi
 
 - [Les CSS sur MDN](/fr/docs/Web/CSS)
-  - : Le portail pour la documentation des CSS sur MDN : vous y trouverez une documentation de référence détaillée pour toutes les fonctionnalités du langage des CSS. Vous voulez connaître toutes les valeurs qu'une propriété peut prendre ? C'est le bon endroit.
+  - : Le portail pour la documentation des CSS sur MDN&nbsp;: vous y trouverez une documentation de référence détaillée pour toutes les fonctionnalités du langage des CSS. Vous voulez connaître toutes les valeurs qu'une propriété peut prendre ? C'est le bon endroit.
diff --git a/files/fr/learn/css/styling_text/fundamentals/index.md b/files/fr/learn/css/styling_text/fundamentals/index.md
index 6b635b6014..f464b52f5f 100644
--- a/files/fr/learn/css/styling_text/fundamentals/index.md
+++ b/files/fr/learn/css/styling_text/fundamentals/index.md
@@ -43,12 +43,12 @@ Dans cet article, nous allons commencer le voyage vers la maîtrise des styles d
 
 Comme vous l'avez déjà vu dans votre apprentissage de HTML et CSS, le texte d'un élément est placé à l'intérieur de la boîte de contenu de cet élément. Il débute en haut à gauche de cette zone (ou en haut à droite, dans le cas des contenus en langues s'écrivant de droite à gauche) et se poursuit vers la fin de la ligne. Arrivé en bout de ligne, il descend à la ligne suivante et continue, puis va à la ligne suivante, jusqu'à ce que tout le contenu ait été placé. Les contenus textuels se comportent comme une suite d'éléments en ligne placés les uns à côté des autres. Aucun saut de ligne n'est créé avant que la fin de la ligne soit atteinte, sauf si vous forcez manuellement le saut de ligne avec l'élément {{htmlelement("br")}}.
 
-> **Note :** si le paragraphe ci‑dessus vous paraît confus,  pas de problème — revenez en arrière et revoyez l'article sur la théorie du [Modèle de boîte](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) avant de poursuivre.
+> **Note :** si le paragraphe ci‑dessus vous paraît confus,  pas de problème — revenez en arrière et revoyez l'article sur la théorie du [Modèle de boîte](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) avant de poursuivre.
 
 Les propriétés CSS utilisées pour le style de texte appartiennent généralement à deux catégories, que nous verrons séparément dans cet article :
 
-- **Styles de la police de caractères** : ces propriétés concernent la fonte appliquée au  texte, affectant sa police, sa taille, sa graisse, si elle est italique, etc.
-- **Styles de composition du texte** : ces propriétés influent sur les espacements et autres dispositions de mise en page du texte, permettant de modifier, par exemple, l'espacement entre lignes et entre caractères, et la manière de disposer le texte  dans la boîte de contenu.
+- **Styles de la police de caractères** : ces propriétés concernent la fonte appliquée au texte, affectant sa police, sa taille, sa graisse, si elle est italique, etc.
+- **Styles de composition du texte** : ces propriétés influent sur les espacements et autres dispositions de mise en page du texte, permettant de modifier, par exemple, l'espacement entre lignes et entre caractères, et la manière de disposer le texte dans la boîte de contenu.
 
 > **Note :** Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme [::first-letter](/fr/docs/Web/CSS/::first-letter) (sélectionne la première lettre du texte d'un élément), [::first-line](/fr/docs/Web/CSS/::first-line) (sélectionne la première ligne du texte d'un élément) ou [::selection](/fr/docs/Web/CSS/::selection) (sélectionne le texte actuellement mis en surbrillance par le curseur) .
 
@@ -76,7 +76,7 @@ Vous pouvez trouver l'[exemple (en) fini](https://mdn.github.io/learning-area/cs
 
 ### Couleur
 
-La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}.
+La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}.
 
 `color` accepte toutes les [unités de couleur des CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs), par exemple :
 
@@ -106,7 +106,7 @@ occasions, comme maintenant.</p>
 
 ### Familles de fontes
 
-Pour définir une police de caractères différente pour le texte, utilisez la propriété {{cssxref("font-family")}} — cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une  {{anch("Default fonts", "police par défaut")}} . Un exemple simple pour voir cela :
+Pour définir une police de caractères différente pour le texte, utilisez la propriété {{cssxref("font-family")}} — cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une  {{anch("Default fonts", "police par défaut")}} . Un exemple simple pour voir cela :
 
 ```css
 p {
@@ -128,10 +128,10 @@ La liste des polices web vraiment sûres changera à mesure que les systèmes d'
 | --------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Arial           | sans-serif     | Il est de bonne pratique d'ajouter Helvetica en tant qu'alternative préférée d'Arial car, bien que leurs apparences soient presque identiques, Helvetica est considérée comme ayant une forme plus agréable, même si Arial est plus courante. |
 | Courier New     | monospace      | Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police _Courier New_ appelée _Courier_. Il est recommandé d'utiliser les deux avec _Courier New_ comme alternative préférée.                     |
-| Georgia         | serif          |                                                                                                                                                                                                                                               |
+| Georgia         | serif          |                                                                                                                                                                                                                                               |
 | Times New Roman | serif          | Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police _Times New Roman_ appelée _Times_. Il est recommandé d'utiliser les deux avec _Times New Roman_ comme alternative préférée.               |
 | Trebuchet MS    | sans-serif     | Vous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation des mobiles.                                                                                         |
-| Verdana         | sans-serif     |                                                                                                                                                                                                                                               |
+| Verdana         | sans-serif     |                                                                                                                                                                                                                                               |
 
 > **Note :** Le site [cssfontstack.com](https://www.cssfontstack.com/) met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage.
 
@@ -202,7 +202,7 @@ Dans l'article [Valeurs et unités CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CS
 
 - `px` (pixels) : le nombre de pixels souhaités pour la hauteur du texte. C'est une unité absolue — il en résulte une même valeur finale calculée de la police sur la page dans à peu près n'importe quelle situation.
 - `em` : 1 em est égal à la taille de la police définie sur l'élément parent de l'élément courant que nous composons (plus précisément, la largeur d'un « M » majuscule de l'élément parent). Cette valeur peut devenir difficile à déterminer si vous avez beaucoup d'imbrications avec diverses tailles de police, mais cela reste faisable, comme vous le verrez ci-dessous. Pourquoi s'embêter ? C'est assez naturel, une fois que vous y êtes habitué ; vous pouvez utiliser `em` pour tout dimensionner, pas seulement du texte. Vous pouvez avoir un site web entier dimensionné avec des `em`, la maintenance en sera facilitée.
-- `rem` : il fonctionne comme `em`, excepté que un `rem` est égal à la taille de la police sur l'élément racine du document (c'est-à-dire {{htmlelement("html")}}) et non le parent direct). Le calcul des tailles de police en est facilité, mais malheureusement les `rem` ne sont pas pris en charge dans Internet Explorer 8 et avant. Si vous devez prendre en charge des navigateurs plus anciens dans votre projet, vous devrez vous en tenir aux `em` ou aux `px`, soit utiliser une prothèse d'émulation ({{glossary ("polyfill")}}) telle que [REM-unit-polyfill](https://github.com/chuckcarpenter/REM-unit-polyfill).
+- `rem` : il fonctionne comme `em`, excepté que un `rem` est égal à la taille de la police sur l'élément racine du document (c'est-à-dire {{htmlelement("html")}}) et non le parent direct). Le calcul des tailles de police en est facilité, mais malheureusement les `rem` ne sont pas pris en charge dans Internet Explorer 8 et avant. Si vous devez prendre en charge des navigateurs plus anciens dans votre projet, vous devrez vous en tenir aux `em` ou aux `px`, soit utiliser une prothèse d'émulation ({{glossary ("polyfill")}}) telle que [REM-unit-polyfill](https://github.com/chuckcarpenter/REM-unit-polyfill).
 
 La propriété `font-size` d'un élément est héritée de son parent. Tout commence par l'élément racine de l'ensemble du document — {{htmlelement("html")}} — dont la propriété `font‑size` est normée à 16 px sur les navigateurs. Tout paragraphe (ou tout autre élément dont la taille n'a pas été définie différemment par le navigateur) à l'intérieur de l'élément racine aura une taille finale de 16 px. D'autres éléments peuvent avoir des tailles par défaut différentes, par exemple un élément {{htmlelement ("h1")}} a une taille de 2 `em` définie par défaut, donc aura une taille finale de 32 px.
 
@@ -262,7 +262,7 @@ CSS fournit quatre propriétés communes pour modifier le poids et l'emphase vis
 - {{cssxref("font-style")}} : utilisé pour appliquer ou enlever le style italique. Les valeurs possibles sont les suivantes (vous ne l'utiliserez que rarement, sauf si vous souhaitez désactiver le style italique pour une raison quelconque) :
 
   - `normal` : fige le texte en police normale (suppression du style italique existant).
-  - `italic`&nbsp;: met le texte en  _version italique de la police_ si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place.
+  - `italic`&nbsp;: met le texte en _version italique de la police_ si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place.
   - `oblique` : force le texte à utiliser une version simulée de fonte italique, créée en _inclinant la version normale_.
 
 - {{cssxref("font-weight")}} : définit la graisse du texte. La propriété peut avoir de nombreuses valeurs s'il y a de nombreuses variantes de polices disponibles (comme _-light_, _-normal_, _-bold_, _-extrabold_, _-black_, etc.), mais en réalité, vous les utiliserez rarement en dehors de `normal` et `bold` (gras):
@@ -467,7 +467,7 @@ La propriété {{cssxref ("line-height")}} définit la hauteur de chaque ligne d
 line-height: 1.5;
 ```
 
-En appliquant cette règle à l'élément {{htmlelement("p")}}  de l'exemple, nous obtenons :
+En appliquant cette règle à l'élément {{htmlelement("p")}}  de l'exemple, nous obtenons :
 
 ```html hidden
 <h1>Tommy le Chat</h1>
@@ -632,7 +632,7 @@ Si vous faites une erreur, vous pouvez toujours _Réinitialiser_ avec le bouton
 <div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
   <h2>Zone de saisie du HTML</h2>
   <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
-  <p>Un peu de texte pour vous délecter !</p></textarea>
+  <p>Un peu de texte pour vous délecter&nbsp;!</p></textarea>
 
   <h2>Zone de saisie de la CSS</h2>
   <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p {
diff --git a/files/fr/learn/css/styling_text/styling_links/index.md b/files/fr/learn/css/styling_text/styling_links/index.md
index 7a3df96337..51f4254af0 100644
--- a/files/fr/learn/css/styling_text/styling_links/index.md
+++ b/files/fr/learn/css/styling_text/styling_links/index.md
@@ -286,7 +286,7 @@ reset.addEventListener("click", function() {
 
 solution.addEventListener("click", function() {
   htmlInput.value = htmlCode;
-  cssInput.value = 'p {\n  font-size: 1.2rem;\n  font-family: sans-serif;\n  line-height: 1.4;\n}\n\na {\n  outline: none;\n  text-decoration: none;\n  padding: 2px 1px 0;\n}\n\na:link {\n  color: #265301;\n}\n\na:visited {\n  color: #437A16;\n}\n\na:focus {\n  border-bottom: 1px solid;\n  background: #BAE498;\n}\n\na:hover {\n  border-bottom: 1px solid;\n  background: #CDFEAA;\n}\n\na:active {\n  background: #265301;\n  color: #CDFEAA;\n}';
+  cssInput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}';
   drawOutput();
 });
 
diff --git a/files/fr/learn/css/styling_text/styling_lists/index.md b/files/fr/learn/css/styling_text/styling_lists/index.md
index 73a34ac54f..ab9dece0d8 100644
--- a/files/fr/learn/css/styling_text/styling_lists/index.md
+++ b/files/fr/learn/css/styling_text/styling_lists/index.md
@@ -362,7 +362,7 @@ reset.addEventListener("click", function() {
 
 solution.addEventListener("click", function() {
   htmlInput.value = htmlCode;
-  cssInput.value = 'ul {\n  list-style-type: square;\n}\n\nul li, ol li {\n  line-height: 1.5;\n}\n\nol {\n  list-style-type: lower-alpha\n}';
+  cssInput.value = 'ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}';
   drawOutput();
 });
 
diff --git a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md
index fa70e80c22..8bea87956b 100644
--- a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md
+++ b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md
@@ -15,7 +15,7 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage
 ---
 {{LearnSidebar}}{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
 
-Dans cette évaluation, nous testerons votre compréhension de toutes les techniques pour la composition de textes à l'écran présentées au cours de ce module : elle consiste à créer la page d'accueil du site d'une école communale. Vous ne devriez avoir que du plaisir tout au long de ce parcours.
+Dans cette évaluation, nous testerons votre compréhension de toutes les techniques pour la composition de textes à l'écran présentées au cours de ce module&nbsp;: elle consiste à créer la page d'accueil du site d'une école communale. Vous ne devriez avoir que du plaisir tout au long de ce parcours.
 
 <table class="standard-table">
   <tbody>
@@ -38,7 +38,7 @@ Dans cette évaluation, nous testerons votre compréhension de toutes les techni
 
 ## Point de départ
 
-Pour débuter cette évaluation, vous devez :
+Pour débuter cette évaluation, vous devez&nbsp;:
 
 - récupérer les fichiers [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html) et [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css) de l'exercice ainsi que [le lien externe sur l'icône](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png).
 - en faire une copie sur votre ordinateur.
@@ -47,15 +47,15 @@ Pour débuter cette évaluation, vous devez :
 
 ## Énoncé de l'exercice
 
-Nous mettons à votre disposition un HTML pour la page d'accueil du site internet d'un collège de communauté imaginaire, plus certains éléments de la CSS composant la page sur deux colonnes et fournissant d'autres rudiments de composition. Vous devez écrire des compléments à la CSS sous le commentaire au bas du fichier de façon à pouvoir marquer aisément vos ajouts. Ne vous tracassez pas si certains sélecteurs sont répétés : nous laisserons ce point de côté dans cet exemeple.
+Nous mettons à votre disposition un HTML pour la page d'accueil du site internet d'un collège de communauté imaginaire, plus certains éléments de la CSS composant la page sur deux colonnes et fournissant d'autres rudiments de composition. Vous devez écrire des compléments à la CSS sous le commentaire au bas du fichier de façon à pouvoir marquer aisément vos ajouts. Ne vous tracassez pas si certains sélecteurs sont répétés&nbsp;: nous laisserons ce point de côté dans cet exemeple.
 
-Fontes :
+Fontes&nbsp;:
 
-- Primo, téléchargez quelques polices gratuites.  Comme il s'agit d'un collège, les polices choisies doivent donner à la page une impression de sérieux, de formalisme et de confiance — une police sérif ample pour le corps du texte général, associée une police sans sérif ou bloc sérif pour les en-têtes serait pas mal.
-- Ensuite, utilisez le service ad-hoc pour créer le « bulletproof `@font-face` code » pour ces deux fontes.
+- Primo, téléchargez quelques polices gratuites.  Comme il s'agit d'un collège, les polices choisies doivent donner à la page une impression de sérieux, de formalisme et de confiance — une police sérif ample pour le corps du texte général, associée une police sans sérif ou bloc sérif pour les en-têtes serait pas mal.
+- Ensuite, utilisez le service ad-hoc pour créer le «&nbsp;bulletproof `@font-face` code&nbsp;» pour ces deux fontes.
 - Appliquez la police pour le corps à toute la page et celle pour les titres aux en‑têtes.
 
-Style général du texte :
+Style général du texte&nbsp;:
 
 - Donnez à la page une propriété `font-size` de `10px` sur tout le site.
 - Donnez aux titres et autres types d'éléments des tailles de polices appropriées définie avec une unité relative adéquate.
@@ -65,7 +65,7 @@ Style général du texte :
 - Donnez au corps du texte une valeur de propriété `letter-spacing` et `word-spacing` appropriée.
 - Donnez au premier paragraphe après chaque titre dans `<section>` une légère indentation, disons 20px.
 
-Liens :
+Liens&nbsp;:
 
 - Donnez aux liens, visités, ciblés et survolés des couleurs en accord avec celles des barres horizontales en haut et en bas de la page.
 - Faites en sorte que les liens soient soulignés par défaut, mais que le soulignement disparaisse lorsqu'ils sont ciblés ou survolés.
@@ -73,12 +73,12 @@ Liens :
 - Donnez à l'état actif un style sensiblement différent pour qu'il se démarque bien, mais faites en sorte qu'il s'intègre à la conception globale de la page.
 - Faites en sorte que l'icône de lien externe soit insérée à côté des liens externes.
 
-Listes :
+Listes&nbsp;:
 
-- Assurez-vous que l'espacement des listes et éléments de liste s'accorde bien avec le style d'ensemble de la page. Chaque élément de liste doit avoir la même valeur de propriété `line-height` qu'une ligne de paragraphe et chaque liste doit avoir le même espacement en haut et en bas que celui entre les paragraphes.
+- Assurez-vous que l'espacement des listes et éléments de liste s'accorde bien avec le style d'ensemble de la page. Chaque élément de liste doit avoir la même valeur de propriété `line-height` qu'une ligne de paragraphe et chaque liste doit avoir le même espacement en haut et en bas que celui entre les paragraphes.
 - Mettez une belle puce, appropriée à la conception de la page, devant les éléments de la liste. À vous de décider si vous choisissez une image personnalisée ou autre chose.
 
-Menu de navigation :
+Menu de navigation&nbsp;:
 
 - Donnez à votre menu de navigation un style tel que son aspect soit en accord avec l'apparence et la convivialité de la page.
 
@@ -89,13 +89,13 @@ Menu de navigation :
 
 ## Exemple
 
-La capture d'écran ci-après montre un exemple possible du design terminé :
+La capture d'écran ci-après montre un exemple possible du design terminé&nbsp;:
 
 ![](example2.png)
 
 ## Évaluation
 
-Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abors, il n'y rien à gagner en trichant !
+Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abors, il n'y rien à gagner en trichant !
 
 {{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
 
diff --git a/files/fr/learn/css/styling_text/web_fonts/index.md b/files/fr/learn/css/styling_text/web_fonts/index.md
index 3374ac8986..70c4d1f26b 100644
--- a/files/fr/learn/css/styling_text/web_fonts/index.md
+++ b/files/fr/learn/css/styling_text/web_fonts/index.md
@@ -46,7 +46,7 @@ Ce système fonctionne bien, mais généralement, le choix des développeurs Web
 
 Mais il y a autre chose qui fonctionne très bien, depuis la version 6 d'IE. La fonctionnalité CSS des polices Web permet de définir les fichiers de polices à télécharger avec le site Web au fur et à mesure de sa consultation ; autrement dit, tout navigateur prenant en charge les polices Web aura exactement la police précisée à sa disposition. Incroyable ! La syntaxe requise ressemble à ce qui suit.
 
-Primo, un bloc {{cssxref("@font-face")}} est placé au début de la CSS ; il précise le ou les fichiers de fontes à télécharger :
+Primo, un bloc {{cssxref("@font-face")}} est placé au début de la CSS ; il précise le ou les fichiers de fontes à télécharger&nbsp;:
 
 ```css
 @font-face {
@@ -55,7 +55,7 @@ Primo, un bloc {{cssxref("@font-face")}} est placé au début de la CSS ; il pr�
 }
 ```
 
-Sous cette déclaration, vous pouvez utiliser le nom de la famille de polices précisé dans @font-face pour appliquer la police personnalisée où vous le voulez, normalement :
+Sous cette déclaration, vous pouvez utiliser le nom de la famille de polices précisé dans @font-face pour appliquer la police personnalisée où vous le voulez, normalement&nbsp;:
 
 ```css
 html {
@@ -65,7 +65,7 @@ html {
 
 La syntaxe peut devenir un peu plus complexe que cela, nous reviendrons sur le sujet plus bas.
 
-Deux points important sont à garder présents à l'esprit à ce propos :
+Deux points important sont à garder présents à l'esprit à ce propos&nbsp;:
 
 L'utilisation des polices n'est généralement pas gratuite. Vous devez payer pour les utiliser et/ou respecter d'autres conditions de licence telles que citer le créateur de la police dans le code (ou sur le site). Ne vous appropriez pas les polices et ne les utilisez pas sans donner le crédit voulu.
 
@@ -74,9 +74,9 @@ L'utilisation des polices n'est généralement pas gratuite. Vous devez payer po
 
 > **Note :** La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 !
 
-## Apprentissage actif : un exemple de fonte web
+## Apprentissage actif&nbsp;: un exemple de fonte web
 
-En gardant en tête ce qui précède, construisons un exemple de police web de base à partir des premiers principes. Il est difficile de le montrer à l'aide d'un exemple direct intégré : nous aimerions donc que vous suiviez les étapes détaillées dans les paragraphes ci‑après afin d'avoir une idée du processus.
+En gardant en tête ce qui précède, construisons un exemple de police web de base à partir des premiers principes. Il est difficile de le montrer à l'aide d'un exemple direct intégré&nbsp;: nous aimerions donc que vous suiviez les étapes détaillées dans les paragraphes ci‑après afin d'avoir une idée du processus.
 
 Utilisez les fichiers [web-font-start.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html) et [web-font-start.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css) comme point de départ pour ajouter votre code (voir l'[exemple en direct](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html) aussi.) Faites une copie de ces fichiers dans un nouveau répertoire sur votre ordinateur. Dans le fichier `web-font-start.css`, vous trouverez un CSS minimal pour traiter la mise en page et la composition de base de l'exemple.
 
@@ -84,17 +84,17 @@ Utilisez les fichiers [web-font-start.html](https://github.com/mdn/learning-area
 
 
 
-Dans cet exemple, nous utilisons deux polices web, une pour les en-têtes et une pour le corps du texte. Pour commencer, nous devons trouver les fichiers de ces polices. Les fontes des polices sont stockées en différents formats de fichiers. Il y a généralement trois types de sites où obtenir des fontes :
+Dans cet exemple, nous utilisons deux polices web, une pour les en-têtes et une pour le corps du texte. Pour commencer, nous devons trouver les fichiers de ces polices. Les fontes des polices sont stockées en différents formats de fichiers. Il y a généralement trois types de sites où obtenir des fontes&nbsp;:
 
-- un distributeur de fontes gratuites : c'est un site de téléchargement de polices gratuites (la licence peut exiger certaines conditions, comme citer le créateur de la fonte). C'est le cas de [Font Squirrel](https://www.fontsquirrel.com/), [dafont](http://www.dafont.com/) et [Everything Fonts](https://everythingfonts.com/).
-- un distributeur de fontes payantes : c'est un site qui met à disposition des fontes contre paiement, comme [fonts.com](http://www.fonts.com/) ou [myfonts.com](http://www.myfonts.com/). Vous pouvez aussi acheter directement auprès du fondeur, par exemple [Linotype](https://www.linotype.com/), [Monotype](http://www.monotype.com) ou [Exljbris](http://www.exljbris.com/).
-- un service de fontes en ligne : c'est un site qui stocke et téléverse les polices à votre intention, facilitant ainsi l'ensemble du processus. Voir la section {{anch("Utiliser un service de polices en ligne")}} pour plus de détails.
+- un distributeur de fontes gratuites&nbsp;: c'est un site de téléchargement de polices gratuites (la licence peut exiger certaines conditions, comme citer le créateur de la fonte). C'est le cas de [Font Squirrel](https://www.fontsquirrel.com/), [dafont](http://www.dafont.com/) et [Everything Fonts](https://everythingfonts.com/).
+- un distributeur de fontes payantes&nbsp;: c'est un site qui met à disposition des fontes contre paiement, comme [fonts.com](http://www.fonts.com/) ou [myfonts.com](http://www.myfonts.com/). Vous pouvez aussi acheter directement auprès du fondeur, par exemple [Linotype](https://www.linotype.com/), [Monotype](http://www.monotype.com) ou [Exljbris](http://www.exljbris.com/).
+- un service de fontes en ligne&nbsp;: c'est un site qui stocke et téléverse les polices à votre intention, facilitant ainsi l'ensemble du processus. Voir la section {{anch("Utiliser un service de polices en ligne")}} pour plus de détails.
 
 Cherchons des polices de caractères ! Allez dans [Font Squirrel](https://www.fontsquirrel.com/) et choisissez deux polices — une police adaptée aux en-têtes (peut-être une belle police d'affichage de blocs avec sérifs) et une police un peu moins criarde et plus lisible pour les paragraphes. Après avoir trouvé chaque police, appuyez sur le bouton de téléchargement et enregistrez le fichier dans le même répertoire que les fichiers HTML et CSS précéemment enregistrés. Peu importe qu'il s'agisse de TTF (True Type Fonts) ou OTF (Open Type Fonts).
 
 Dans chaque cas, décompressez le paquet de la fonte (les fontes Web sont généralement distribuées dans des fichiers ZIP contenant les fichiers de police et l'information de licence). Vous pouvez trouver plusieurs fichiers de polices dans le paquet — certaines fontes sont distribuées sous forme de familles avec plusieurs variantes disponibles, par exemple fine, moyenne, grasse, italique, italique fine, etc. Pour cet exemple, ne vous interessez qu'à un seul fichier pour chacun des deux cas.
 
-> **Note :** Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher.
+> **Note :** Dans la partie «&nbsp;Find fonts&nbsp;» dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher.
 
 ### Créer le code requis
 
@@ -104,7 +104,7 @@ Maintenant, créez le code requis (et les formats de police). Pour chaque police
 2.  Allez sur le [Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator) de Fontsquirrel.
 3.  Téléversez les deux fichiers de fontes avec le bouton _Upload Fonts_.
 4.  Cochez la case nommée « Yes, the fonts I'm uploading are legally eligible for web embedding » (_Oui, les fontes téléversées sont légalement éligibles à une intégration web_).
-5.  Cliquez sur « *Download your kit* » (_Télécharger le kit_) .
+5.  Cliquez sur «&nbsp;*Download your kit* » (_Télécharger le kit_) .
 
 Après que le générateur a terminé le traitement, vous obtenez un fichier ZIP à télécharger — enregistrez‑le dans le même répertoire que les fichiers HTML et CSS.
 
@@ -112,16 +112,16 @@ Après que le générateur a terminé le traitement, vous obtenez un fichier ZIP
 
 Maintenant, faites l'extraction de l'ensemble des polices web crées. Dans le répertoire d'extraction, trois éléments utiles :
 
-- Plusieurs versions de chaque police : (par ex., `.ttf`, `.woff`, `.woff2`, etc. ; les polices exactement fournies sont mises à jour au fur et à mesure des modifications des exigences de prise en charge des navigateurs). Comme mentionné ci‑dessus, plusieurs polices sont nécessaires pour une prise en charge croisée entre navigateurs — c'est le moyen choisi par Fontsquirrel pour s'assurer que vous avez bien ce qui est nécessaire.
+- Plusieurs versions de chaque police&nbsp;: (par ex., `.ttf`, `.woff`, `.woff2`, etc. ; les polices exactement fournies sont mises à jour au fur et à mesure des modifications des exigences de prise en charge des navigateurs). Comme mentionné ci‑dessus, plusieurs polices sont nécessaires pour une prise en charge croisée entre navigateurs — c'est le moyen choisi par Fontsquirrel pour s'assurer que vous avez bien ce qui est nécessaire.
 - Un fichier HTML de démo pour chaque police — chargez‑les dans votre navigateur pour voir ce à quoi elles ressemblent dans divers contextes d'emploi.
 - Un fichier `stylesheet.css`, qui contient le code @font-face dont vous avez besoin.
 
-Pour mettre en œuvre ces polices dans la démo, suivez ces étapes :
+Pour mettre en œuvre ces polices dans la démo, suivez ces étapes&nbsp;:
 
 1.  Renommez le répertoire d'extraction avec quelque chose de simple, comme `fonts`.
-2.  Ouvrez le fichier `stylesheet.css` et copiez y les deux blocs `@font-face` contenus dans le  fichier `web-font-start.css` — il faut les mettre tout en haut, avant tout élement du CSS, car les polices doivent être importées avant de pouvoir les utiliser sur votre site.
-3.  Chaque fonction `url()` pointe sur un fichier de police à importer dans la CSS — assurez‑vous que les chemins vers les fichiers soient corrects, donc ajoutez  `fonts/` au début de chaque chemin (si nécessaire).
-4.  Maintenant, vous pouvez vous servir de ces polices dans vos piles de fontes, tout à fait comme les polices système ou une police « web safe ». Par exemple :
+2.  Ouvrez le fichier `stylesheet.css` et copiez y les deux blocs `@font-face` contenus dans le fichier `web-font-start.css` — il faut les mettre tout en haut, avant tout élement du CSS, car les polices doivent être importées avant de pouvoir les utiliser sur votre site.
+3.  Chaque fonction `url()` pointe sur un fichier de police à importer dans la CSS — assurez‑vous que les chemins vers les fichiers soient corrects, donc ajoutez  `fonts/` au début de chaque chemin (si nécessaire).
+4.  Maintenant, vous pouvez vous servir de ces polices dans vos piles de fontes, tout à fait comme les polices système ou une police «&nbsp;web safe ». Par exemple&nbsp;:
 
     ```css
     font-family: 'zantrokeregular', serif;
@@ -135,7 +135,7 @@ Vous devriez obtenir une page de démonstration avec les belles polices impléme
 
 ## Utiliser un service de polices en ligne
 
-Les services de polices en ligne stockent et servent généralement des polices pour vous afin que vous n'ayez pas à vous soucier d'écrire le code `@font-face`, et en général, il suffit d'insérer une simple ligne ou deux de code dans votre site pour que tout fonctionne. Les exemples incluent [Typekit](https://typekit.com/) and [Cloud.typography](http://www.typography.com/cloud/welcome/). La plupart de ces services sont fondés sur l'abonnement, à l'exception notable de [Google Fonts](https://www.google.com/fonts), un service gratuit utile, en particulier pour les tests rapides et la rédaction de démos.
+Les services de polices en ligne stockent et servent généralement des polices pour vous afin que vous n'ayez pas à vous soucier d'écrire le code `@font-face`, et en général, il suffit d'insérer une simple ligne ou deux de code dans votre site pour que tout fonctionne. Les exemples incluent [Typekit](https://typekit.com/) and [Cloud.typography](http://www.typography.com/cloud/welcome/). La plupart de ces services sont fondés sur l'abonnement, à l'exception notable de [Google Fonts](https://www.google.com/fonts), un service gratuit utile, en particulier pour les tests rapides et la rédaction de démos.
 
 
 
@@ -144,7 +144,7 @@ La plupart de ces services sont faciles à utiliser, donc nous n'en parlerons pa
 1.  Allez sur [Google Fonts](https://www.google.com/fonts).
 2.  Utilisez les filtres sur la droite pour afficher les types de polices à choisir et retenez une paire de fontes qui vous plaisent.
 3.  Pour sélectionner une famille de fontes, pressez le bouton ⊕ sur le côté.
-4.  Après avoir choisi les familles de fontes, pressez la barre avec  _\[Nombre] Families Selected_ en bas de la page.
+4.  Après avoir choisi les familles de fontes, pressez la barre avec _\[Nombre] Families Selected_ en bas de la page.
 5.  Dans l'écran résultant, copiez d'abord la ligne de code HTML affichée et collez‑la dans l'en-tête de votre fichier HTML. Mettez-la au-dessus de l'élément {{htmlelement("link")}} existant, de sorte que la police soit importée avant que le navigateur essaye de l'utiliser dans la CSS.
 6.  Copiez ensuite les déclarations CSS listées dans la CSS comme il convient pour appliquer la fonte personnalisée à votre HTML.
 
@@ -152,7 +152,7 @@ La plupart de ces services sont faciles à utiliser, donc nous n'en parlerons pa
 
 ## @font-face plus en détail
 
-Examinons la syntaxe générée par fontsquirrel pour `@font-face`. C'est un bloc de ce type :
+Examinons la syntaxe générée par fontsquirrel pour `@font-face`. C'est un bloc de ce type&nbsp;:
 
 ```css
 @font-face {
@@ -168,17 +168,17 @@ Examinons la syntaxe générée par fontsquirrel pour `@font-face`. C'est un bl
 }
 ```
 
-Elle est désignée sous le vocable « bulletproof @font-face syntax » (_syntaxe @font-face à puces garanties_), d'après un post de Paul Irish lors des débuts des succès de `@font-face` ([Bulletproof @font-face Syntax](http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/)). Voyons les actions :
+Elle est désignée sous le vocable «&nbsp;bulletproof @font-face syntax&nbsp;» (_syntaxe @font-face à puces garanties_), d'après un post de Paul Irish lors des débuts des succès de `@font-face` ([Bulletproof @font-face Syntax](http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/)). Voyons les actions&nbsp;:
 
-- `font-family` : cette ligne précise la référence à la police. Vous pouvez mettre cette assertion comme bon vous semble, pour autant que ce soit utilisé de manière cohérent dans la CSS.
+- `font-family`&nbsp;: cette ligne précise la référence à la police. Vous pouvez mettre cette assertion comme bon vous semble, pour autant que ce soit utilisé de manière cohérent dans la CSS.
 - `src` : ces lignes indiquent les chemins vers les fichiers de fontes à importer dans la CSS (la partie `url`) et le format de chaque fichier de fonte (la partie `format`). Cette dernière partie est dans chaque cas optionnelle, mais il est utile de la déclarer car elle permet aux navigateurs de trouver la police à utiliser plus rapidement. Plusieurs déclarations peuvent être mises dans la liste, séparées par des virgules — le navigateur cherchera parmi celles-ci et utilisera la première trouvée qu'il comprend — toutefois il est préférable de mettre en tête les formats nouveaux comme WOFF2 et le plus anciens comme TTF en fin de liste. Les fontes EOT font exception — elles seront placées en tête pour corriger une paire de bogues dans les anciennes versions de IE, car IE essayera d'utiliser la première trouvée même s'il est en fait incapable de l'utiliser.
-- {{cssxref("font-weight")}}/{{cssxref("font-style")}} : ces lignes définissent la graisse de la police, si elle est italique ou pas. Si vous importez plusieurs graisses d'une même police, vous pouvez indiquer quelles sont ses caractéristiques et utiliser diverses valeurs de {{cssxref("font-weight")}}/{{cssxref("font-style")}} pour faire votre choix au lieu d'appeler de noms différents les membres de la même famille. [@font-face tip: define font-weight and font-style to keep your CSS simple](http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/) (_en anglais — Astuces pour @font-face : définir la graisse et le style des fontes pour avoir des CSS simples_) par Roger Johansson montre que faire plus en détail.
+- {{cssxref("font-weight")}}/{{cssxref("font-style")}}&nbsp;: ces lignes définissent la graisse de la police, si elle est italique ou pas. Si vous importez plusieurs graisses d'une même police, vous pouvez indiquer quelles sont ses caractéristiques et utiliser diverses valeurs de {{cssxref("font-weight")}}/{{cssxref("font-style")}} pour faire votre choix au lieu d'appeler de noms différents les membres de la même famille. [@font-face tip: define font-weight and font-style to keep your CSS simple](http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/) (_en anglais — Astuces pour @font-face : définir la graisse et le style des fontes pour avoir des CSS simples_) par Roger Johansson montre que faire plus en détail.
 
-> **Note :** Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}} : c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) (_Création de piles de fontes personnalisées en définissant des plages unicode_) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété.
+> **Note :** Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}}&nbsp;: c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) (_Création de piles de fontes personnalisées en définissant des plages unicode_) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété.
 
 ## Résumé
 
-Maintenant que vous avez travaillé nos articles sur les principes fondamentaux pour composer du texte, il est temps de tester votre compréhension de la chose avec notre évaluation pour le module : composition d'une page d'accueil d'une école communale.
+Maintenant que vous avez travaillé nos articles sur les principes fondamentaux pour composer du texte, il est temps de tester votre compréhension de la chose avec notre évaluation pour le module&nbsp;: composition d'une page d'accueil d'une école communale.
 
 {{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
 
diff --git a/files/fr/learn/forms/basic_native_form_controls/index.md b/files/fr/learn/forms/basic_native_form_controls/index.md
index 2d74518150..26472bcc80 100644
--- a/files/fr/learn/forms/basic_native_form_controls/index.md
+++ b/files/fr/learn/forms/basic_native_form_controls/index.md
@@ -20,7 +20,7 @@ Nous examinerons maintenant en détail les fonctionnalités des divers widgets p
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Notions concernant les ordinateurs et les
         <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML"
@@ -29,7 +29,7 @@ Nous examinerons maintenant en détail les fonctionnalités des divers widgets p
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Comprendre quels sont les types de widgets de forme native disponibles
         dans les navigateurs pour collecter des données et comment les mettre en
@@ -39,20 +39,20 @@ Nous examinerons maintenant en détail les fonctionnalités des divers widgets p
   </tbody>
 </table>
 
-Ici, nous nous attarderons sur les widgets de formulaires intégrés aux navigateurs, mais comme les formulaires HTML restent très circonscrits et que la qualité des implémentations peut être très différente d'un navigateur à l'autre, les développeurs web construisent parfois leurs propres widgets de formulaires — voir [Comment construire des widgets de formulaires personnalisés](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) plus loin dans ce même module pour plus d'idées à ce propos.
+Ici, nous nous attarderons sur les widgets de formulaires intégrés aux navigateurs, mais comme les formulaires HTML restent très circonscrits et que la qualité des implémentations peut être très différente d'un navigateur à l'autre, les développeurs web construisent parfois leurs propres widgets de formulaires — voir [Comment construire des widgets de formulaires personnalisés](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) plus loin dans ce même module pour plus d'idées à ce propos.
 
-> **Note :** La plupart des fonctionnalités discutées dans cet article sont abondamment explicitées dans les navigateurs ; nous soulignerons les exceptions à ce sujet. Si vous voulez plus de précisions, consultez les [références aux éléments de formulaires HTML](/fr/docs/Web/HTML/Element#Forms), et en particulier nos références détaillées aux [types \<input>](/fr/docs/Web/HTML/Element/input).
+> **Note :** La plupart des fonctionnalités discutées dans cet article sont abondamment explicitées dans les navigateurs&nbsp;; nous soulignerons les exceptions à ce sujet. Si vous voulez plus de précisions, consultez les [références aux éléments de formulaires HTML](/fr/docs/Web/HTML/Element#Forms), et en particulier nos références détaillées aux [types \<input>](/fr/docs/Web/HTML/Element/input).
 
 ## Attributs communs
 
 Beaucoup d'éléments utilisés pour définir les widgets de formulaire ont leurs propres attributs. Cependant, il y a un jeu d'attributs communs à tous les éléments de formulaire. Il vous permettent un certain contrôle sur ces widgets. Voici une liste de ces attributs communs :
 
-| Nom de l'attribut | Valeur par défaut | Description                                                                                                                                                                                                                                                                                                                                                                 |
+| Nom de l'attribut | Valeur par défaut | Description                                                                                                                                                                                                                                                                                                                                                                 |
 | ----------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `autofocus`       | (_false_)         | Cet attribut, booléen, vous permet de spécifier que cet élément doit avoir automatiquement le focus au chargement de la page, sauf si l'utilisateur prend la main, en faisant, par exemple, une saisie dans un autre contrôle. Seul un élément associé à un formulaire peut avoir cet attribut activé.                                                                      |
-| `disabled`        | (_false_)         | Cet attribut est un booléen. Il indique que l'utilisateur ne peut pas avoir d'action sur cet élément. S'il n'est pas précisé, l'élément hérite son comportement de l'élément contenant, comme, {{HTMLElement("fieldset")}} ; si le conteneur n'a pas d'attribut `disabled` mis, l'élément est activé.                                                              |
+| `disabled`        | (_false_)         | Cet attribut est un booléen. Il indique que l'utilisateur ne peut pas avoir d'action sur cet élément. S'il n'est pas précisé, l'élément hérite son comportement de l'élément contenant, comme, {{HTMLElement("fieldset")}}&nbsp;; si le conteneur n'a pas d'attribut `disabled` mis, l'élément est activé.                                                              |
 | `form`            |                   | L'élément <form> auquel le widget est associé. La valeur de l'attribut doit être l'attribut `id` d'un élément {{HTMLElement("form")}} dans le même document. En théorie, il vous permet de mettre un widget en dehors d'un élément {{HTMLElement("form")}}. En pratique, toutefois, il n'y a pas de navigateur qui prenne en charge cette fonctionnalité. |
-| `name`            |                   | Le nom de l'élément ; il sera soumis en même temps que les données du formulaire.                                                                                                                                                                                                                                                                                           |
+| `name`            |                   | Le nom de l'élément&nbsp;; il sera soumis en même temps que les données du formulaire.                                                                                                                                                                                                                                                                                           |
 | `value`           |                   | La valeur initiale de l'élément.                                                                                                                                                                                                                                                                                                                                            |
 
 ## Champs de saisie de texte
@@ -61,7 +61,7 @@ Les champs {{htmlelement("input")}} de saisie de texte sont les widgets de formu
 
 > **Note :** Les champs textuels dans les formulaires HTML sont des contrôles de saisie de texte brut. Cela signifie que vous ne pouvez pas les utiliser pour réaliser de la [mise en forme riche](/fr/docs/Rich-Text_Editing_in_Mozilla "/en-US/docs/Rich-Text_Editing_in_Mozilla") (gras, italique, etc.). Tous les éditeurs de textes évolués que vous rencontrez utilisent des widgets personnalisés créés avec HTML, CSS et JavaScript.
 
-Tous les champs textuels ont des comportement en commun :
+Tous les champs textuels ont des comportement en commun&nbsp;:
 
 - Il peuvent être définis comme {{htmlattrxref("readonly","input")}} (l'utilisateur ne peut pas modifier la valeur) voire {{htmlattrxref("disabled","input")}} (la valeur n'est pas envoyé avec le restant des données du formulaire).
 - Ils peuvent avoir un {{htmlattrxref("placeholder","input")}}. Ce texte apparaît dans le champs de saisie et décrit brièvement le rôle de cette boîte.
@@ -70,19 +70,19 @@ Tous les champs textuels ont des comportement en commun :
 
 > **Note :** L'élément {{htmlelement("input")}} est spécial car il peut être pratiquement n'importe quoi. En réglant simplement ses attributs de type, il peut changer radicalement, et il est utilisé pour créer la plupart des types de widgets de formulaire allant des champs texte sur une seule ligne, contrôles sans entrée de texte, contrôles de date et heure jusqu'aux boutons. Il y a toutefois des exceptions, comme {{htmlelement("textarea")}} pour les entrées multi-lignes. Prenez bien note de ceci en lisant cet article.
 
-###  Champs texte sur une seule ligne
+###  Champs texte sur une seule ligne
 
 On crée un champ texte sur une seule ligne avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} est mis à `text` (maisi, si vous n'indiquez pas l'attribut {{htmlattrxref("type", "input")}}, `text` est la valeur par défaut). `text` est aussi la valeur de repli si celle indiquée pour l'attribut {{htmlattrxref("type", "input")}} est inconnue du navigateur (par exemple, si vous spécifiez `type="date"` et que le navigateur ne prend pas en charge les sélecteurs de date natifs).
 
 > **Note :** Vous trouverez des exemples de tous les types de champ texte sur une ligne dans GitHub à [single-line-text-fields.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html) (voir [directement aussi](https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html)).
 
-Voici un exemple élémentaire de champ texte sur une ligne :
+Voici un exemple élémentaire de champ texte sur une ligne&nbsp;:
 
 ```html
 <input type="text" id="comment" name="comment" value="Je suis un champ texte">
 ```
 
-Les champs texte sur une ligne n'ont qu'une seule contrainte : si vous saisissez du texte avec des sauts de ligne, le navigateur les supprime avant d'envoyer les données.
+Les champs texte sur une ligne n'ont qu'une seule contrainte&nbsp;: si vous saisissez du texte avec des sauts de ligne, le navigateur les supprime avant d'envoyer les données.
 
 ![Screenshots of single line text fields on several platforms.](https://developer.mozilla.org/files/4273/all-single-line-text-field.png)
 
@@ -90,15 +90,15 @@ HTML5 améliore le champ texte élémentaire sur une ligne par ajout de valeurs
 
 #### Champ d'adresse électronique
 
-Ce type de champ est défini en donnant la valeur `email` à l'attribut {{htmlattrxref("type","input")}} :
+Ce type de champ est défini en donnant la valeur `email` à l'attribut {{htmlattrxref("type","input")}}&nbsp;:
 
 ```html
     <input type="email" id="email" name="email" multiple>
 ```
 
-Avec ce `type` , l'utilisateur doit saisir un e‑mail valide dans le champ. Tout autre type de contenu amène le navigateur à émettre une erreur lors de la soumission du formulaire. Notez que cette validation s'opère côté client et est faite par le navigateur :
+Avec ce `type` , l'utilisateur doit saisir un e‑mail valide dans le champ. Tout autre type de contenu amène le navigateur à émettre une erreur lors de la soumission du formulaire. Notez que cette validation s'opère côté client et est faite par le navigateur&nbsp;:
 
-![Entrée d'un e-mail non valide déclenchant un message d'avertissement « Veuillez saisir une adresse électronique valide »](fr-email.png)
+![Entrée d'un e-mail non valide déclenchant un message d'avertissement «&nbsp;Veuillez saisir une adresse électronique valide »](fr-email.png)
 
 Avec l'attribut {{htmlattrxref("multiple","input")}}, l'utilisateur pourra saisir plusieurs adresses électroniques dans la même entrée (avec une virgule comme séparateur).
 
@@ -108,7 +108,7 @@ Sur certains périphériques (les mobiles en particulier), un clavier virtuel di
 
 #### Champ pour mot de passe
 
-Ce type de champ est défini en donnant la valeur `password` à l'attribut {{htmlattrxref("type","input")}} :
+Ce type de champ est défini en donnant la valeur `password` à l'attribut {{htmlattrxref("type","input")}}&nbsp;:
 
 ```html
     <input type="password" id="pwd" name="pwd">
@@ -116,25 +116,25 @@ Ce type de champ est défini en donnant la valeur `password` à l'attribut {{htm
 
 Aucune contrainte de saisie du texte n'est ajoutée, mais la valeur entrée dans le champ est masquée (avec des points ou des astérisques) afin qu'elle ne puisse pas être lue par d'autres.
 
-Gardez à l'esprit que ceci n'est qu'une fonction de l'interface utilisateur ; sauf si vous soumettez le formulaire de manière sécurisée, il sera envoyé en texte brut, ce qui est mauvais pour la sécurité — un tiers malicieux pourrait intercepter les données et voler le mot de passe, les détails de la carte de crédit ou autre texte soumis. La meilleure façon de protéger l'utilisateur contre ceci consiste à héberger toute page contenant des formulaires avec une connexion sécurisée (par ex. avec https\:// ...), ainsi les données sont chiffrées avant expédition.
+Gardez à l'esprit que ceci n'est qu'une fonction de l'interface utilisateur&nbsp;; sauf si vous soumettez le formulaire de manière sécurisée, il sera envoyé en texte brut, ce qui est mauvais pour la sécurité — un tiers malicieux pourrait intercepter les données et voler le mot de passe, les détails de la carte de crédit ou autre texte soumis. La meilleure façon de protéger l'utilisateur contre ceci consiste à héberger toute page contenant des formulaires avec une connexion sécurisée (par ex. avec https\:// ...), ainsi les données sont chiffrées avant expédition.
 
 Les navigateurs modernes reconnaissent les risques courus lors de l'envoi de formulaires avec une connexion non sécurisée et affichent des avertissements pour prévenir les utilisateurs. Pour plus de précisions sur ce que Firefox a mis en œuvre, voir [Mots de passe peu sûrs](/fr/docs/Sécurité/MotsdepasseInsecurisés).
 
 #### Champ de recherche
 
-Ce type de champ se définit avec la valeur `search` de l'attribut {{htmlattrxref("type","input")}} :
+Ce type de champ se définit avec la valeur `search` de l'attribut {{htmlattrxref("type","input")}}&nbsp;:
 
 ```html
     <input type="search" id="search" name="search">
 ```
 
-La principale différence entre un champ textuel et un champ de recherche est dans l'apparence — souvent, les champs de recherche sont affichés avec des coins arrondis, et/ou avec une « × » à cliquer pour effacer la valeur entrée. Toutefois, une fonction est aussi ajoutée : les valeurs saisies peuvent être automatiquement enregistrées afin d'être utilisées pour compléter des recherches sur plusieurs pages du même site.
+La principale différence entre un champ textuel et un champ de recherche est dans l'apparence — souvent, les champs de recherche sont affichés avec des coins arrondis, et/ou avec une «&nbsp;×&nbsp;» à cliquer pour effacer la valeur entrée. Toutefois, une fonction est aussi ajoutée&nbsp;: les valeurs saisies peuvent être automatiquement enregistrées afin d'être utilisées pour compléter des recherches sur plusieurs pages du même site.
 
 ![Screenshots of search fields on several platforms.](all-search-field.png)
 
 #### Champ pour numéro de téléphone
 
-Ce type de champ se définit en donnant la valeur `tel` à l'attribut {{htmlattrxref("type","input")}} :
+Ce type de champ se définit en donnant la valeur `tel` à l'attribut {{htmlattrxref("type","input")}}&nbsp;:
 
 ```html
     <input type="tel" id="tel" name="tel">
@@ -144,13 +144,13 @@ Ce type de champ se définit en donnant la valeur `tel` à l'attribut {{htmlattr
 
 #### Champ d'URL
 
-Ce type de champ se définit en donnant la valeur `url` à l'attribut {{htmlattrxref("type","input")}} :
+Ce type de champ se définit en donnant la valeur `url` à l'attribut {{htmlattrxref("type","input")}}&nbsp;:
 
 ```html
     <input type="url" id="url" name="url">
 ```
 
-Il ajoute une contrainte de validation spéciale du champ ; le navigateur renvoie une erreur si une URL invalide est saisie.
+Il ajoute une contrainte de validation spéciale du champ&nbsp;; le navigateur renvoie une erreur si une URL invalide est saisie.
 
 > **Note :** ce n'est pas parce qu'une URL est bien formée qu'elle pointe vers un emplacement qui existe réellement.
 
@@ -158,7 +158,7 @@ Il ajoute une contrainte de validation spéciale du champ ; le navigateur renv
 
 ### Champs texte multilignes
 
-Un champ texte sur plusieurs lignes  se définit avec l'élément {{HTMLElement("textarea")}}, et non avec l'élément {{HTMLElement("input")}}.
+Un champ texte sur plusieurs lignes se définit avec l'élément {{HTMLElement("textarea")}}, et non avec l'élément {{HTMLElement("input")}}.
 
 ```html
     <textarea cols="30" rows="10"></textarea>
@@ -170,20 +170,20 @@ La principale différence entre un champ `textarea` et un champ monoligne est qu
 
 > **Note :** Vous trouverez un exemple de champ texte multiligne sur GitHub à l'adresse [multi-line-text-field.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/multi-line-text-field.html) (voir aussi [directement](https://mdn.github.io/learning-area/html/forms/native-form-widgets/multi-line-text-field.html)). Jetez-y un coup d'œil, et remarquez que dans la plupart des navigateurs, la zone de texte est dotée d'une poignée d'étirement en bas à droite pour permettre à l'utilisateur de la redimensionner. Cette capacité de redimensionnement peut être désactivée en réglant la propriété {{cssxref("resize")}} de la zone de texte à `none` dans les CSS.
 
-{{htmlelement("textarea")}} accepte également quelques attributs pour contrôler son rendu sur plusieurs lignes  (outre plusieurs autres) :
+{{htmlelement("textarea")}} accepte également quelques attributs pour contrôler son rendu sur plusieurs lignes  (outre plusieurs autres)&nbsp;:
 
 | Nom de l'attribut                                | Valeur par défaut | Description                                                                              |
 | ------------------------------------------------ | ----------------- | ---------------------------------------------------------------------------------------- |
 | {{htmlattrxref("cols","textarea")}} | `20`              | Largeur visible de la boîte de contrôle texte, mesurée en largeurs de caractères.        |
 | {{htmlattrxref("rows","textarea")}} |                   | Nombre de lignes de texte visibles dans la boîte de contrôle.                            |
-| {{htmlattrxref("wrap","textarea")}} | `soft`            | Indique comment le contrôle va à la ligne. Les valeurs possibles sont : `hard` ou `soft` |
+| {{htmlattrxref("wrap","textarea")}} | `soft`            | Indique comment le contrôle va à la ligne. Les valeurs possibles sont&nbsp;: `hard` ou `soft` |
 
 Notez que l'élément {{HTMLElement("textarea")}} est écrit un peu différemment de l'élément {{HTMLElement("input")}}. Ce dernier est un élément vide, ce qui signifie qu'il ne peut pas contenir d'élément enfant. A contrario, l'élément {{HTMLElement("textarea")}} est un élément régulier pouvant contenir des enfants contenus de texte.
 
-Deux points clés à noter ici :
+Deux points clés à noter ici&nbsp;:
 
-- Si vous voulez définir une valeur par défaut pour un élément {{HTMLElement("input")}}, vous devez utiliser l'attribut `value` ; avec un élément {{HTMLElement("textarea")}} mettez le texte par défaut entre la balise ouvrante et la balise fermante du dit élément.
-- Par nature, l'élément {{HTMLElement("textarea")}} n'accept que des contenus textuels ; ce qui signifie que si du contenu HTML est placé dans un élément {{HTMLElement("textarea")}} il sera restitué sous forme de texte brut.
+- Si vous voulez définir une valeur par défaut pour un élément {{HTMLElement("input")}}, vous devez utiliser l'attribut `value`&nbsp;; avec un élément {{HTMLElement("textarea")}} mettez le texte par défaut entre la balise ouvrante et la balise fermante du dit élément.
+- Par nature, l'élément {{HTMLElement("textarea")}} n'accept que des contenus textuels&nbsp;; ce qui signifie que si du contenu HTML est placé dans un élément {{HTMLElement("textarea")}} il sera restitué sous forme de texte brut.
 
 ## Contenu déroulant
 
@@ -205,16 +205,16 @@ Si nécessaire, la valeur par défaut de la boîte de sélection peut être déf
 
 ```html
     <select>
-      <optgroup label="Fruits">
-        <option>Banane</option>
-        <option selected>Cerise</option>
-        <option>Citron</option>
-      </optgroup>
-      <optgroup label="Légumes">
-        <option>Carotte</option>
-        <option>Aubergine</option>
-        <option>Pomme de terre</option>
-      </optgroup>
+      <optgroup label="Fruits">
+        <option>Banane</option>
+        <option selected>Cerise</option>
+        <option>Citron</option>
+      </optgroup>
+      <optgroup label="Légumes">
+        <option>Carotte</option>
+        <option>Aubergine</option>
+        <option>Pomme de terre</option>
+      </optgroup>
     </select>
 ```
 
@@ -251,17 +251,17 @@ La liste de données est alors liée à un champ texte (généralement un élém
 Une fois la liste de données affiliée au widget de formulaire, ses options s'utilisent comme complémentation du texte saisi par l'utilisateur ; cela se présente généralement à l'utilisateur sous forme d'une boîte déroulante listant des correspondances possibles avec ce qui doit être saisi dans la boîte.
 
 ```html
-    <label for="onFruit">Quel est votre fruit préféré ?</label>
+    <label for="onFruit">Quel est votre fruit préféré&nbsp;?</label>
     <input type="text" id="onFruit" list="maSuggestion" />
     <datalist id="maSuggestion">
-      <option>Pomme</option>
-      <option>Banane</option>
-      <option>Mûre</option>
-      <option>Airelles</option>
-      <option>Citron</option>
-      <option>Litchi</option>
-      <option>Pêche</option>
-      <option>Poire</option>
+      <option>Pomme</option>
+      <option>Banane</option>
+      <option>Mûre</option>
+      <option>Airelles</option>
+      <option>Citron</option>
+      <option>Litchi</option>
+      <option>Pêche</option>
+      <option>Poire</option>
     </datalist>
 ```
 
@@ -276,7 +276,7 @@ L'élément {{HTMLElement("datalist")}} est un ajout très récent aux formulair
 Pour gérer cela, voici une petite astuce offrant une bonne solution de repli pour ces navigateurs :
 
 ```html
-<label for="myFruit">Quel est votre fruit préféré ? (avec repli)</label>
+<label for="myFruit">Quel est votre fruit préféré&nbsp;? (avec repli)</label>
 <input type="text" id="myFruit" name="fruit" list="fruitList">
 
 <datalist id="fruitList">
@@ -321,13 +321,13 @@ Les navigateurs qui prennent en charge l'élément {{HTMLElement("datalist")}} i
 
 ## Éléments à cocher
 
-Les éléments à cocher sont des widgets dont l'état se modifie en cliquant sur eux. Il existe deux types d'éléments à cocher : la case à cocher et le bouton radio. Les deux utilisent l'attribut {{htmlattrxref("checked","input")}} pour indiquer si le widget est coché par défaut ou non.
+Les éléments à cocher sont des widgets dont l'état se modifie en cliquant sur eux. Il existe deux types d'éléments à cocher&nbsp;: la case à cocher et le bouton radio. Les deux utilisent l'attribut {{htmlattrxref("checked","input")}} pour indiquer si le widget est coché par défaut ou non.
 
 Il est important de noter que ces widgets ne se comportent pas tout à fait comme les autres widgets de formulaires. Pour la plupart des widgets, une fois que le formulaire est envoyé, tous les widgets dont l'attribut {{htmlattrxref("name","input")}} est défini sont envoyés, même s'ils ne sont pas renseignés. Dans le cas des éléments à cocher, leurs valeurs ne sont envoyées que s'ils sont cochés. S'ils ne sont pas cochés, rien n'est envoyé, pas même la valeur de leur attribut `name`.
 
 > **Note :** Vous trouverez les exemples de cette section sur GitHub à l'adresse [checkable-items.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html) ([voir directement aussi](https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html)).
 
-Pour un maximum de convivialité/accessibilité, il est conseillé d'entourer chaque liste d'éléments liés dans un {{htmlelement("fieldset")}}, avec un élément {{htmlelement("legend")}} fournissant une description globale de la liste.  Chaque paire individuelle d'éléments {{htmlelement("label")}}/{{htmlelement("input")}} doit être contenue dans son propre élément de liste (ou similaire), comme le montrent les exemples.
+Pour un maximum de convivialité/accessibilité, il est conseillé d'entourer chaque liste d'éléments liés dans un {{htmlelement("fieldset")}}, avec un élément {{htmlelement("legend")}} fournissant une description globale de la liste.  Chaque paire individuelle d'éléments {{htmlelement("label")}}/{{htmlelement("input")}} doit être contenue dans son propre élément de liste (ou similaire), comme le montrent les exemples.
 
 Vous devez également fournir des valeurs pour ces types d'entrées dans l'attribut `value` si vous voulez qu'elles aient un sens — si aucune valeur n'est fournie, les cases à cocher et les boutons radio ont la valeur `on`.
 
@@ -355,7 +355,7 @@ Plusieurs boutons radio peuvent être liés ensemble. S'ils partagent la même v
 
 ```html
 <fieldset>
-  <legend>Quel est votre mets préféré ?</legend>
+  <legend>Quel est votre mets préféré&nbsp;?</legend>
   <ul>
     <li>
       <label for="soup">Soupe</label>
@@ -377,7 +377,7 @@ Plusieurs boutons radio peuvent être liés ensemble. S'ils partagent la même v
 
 ## Boutons
 
-Dans les formulaires HTML, il existe trois types de boutons :
+Dans les formulaires HTML, il existe trois types de boutons&nbsp;:
 
 - Submit
   - : Envoie les données du formulaire au serveur.
@@ -386,7 +386,7 @@ Dans les formulaires HTML, il existe trois types de boutons :
 - Anonymous
   - : Type de bouton n'ayant pas d'effet prédéfini mais qui peut être personnalisé grâce à du code JavaScript.
 
-Un bouton se crée avec un élément {{HTMLElement("button")}} ou un élément {{HTMLElement("input")}}. C'est la valeur de l'attribut {{htmlattrxref("type","input")}} qui définit le type de bouton affiché :
+Un bouton se crée avec un élément {{HTMLElement("button")}} ou un élément {{HTMLElement("input")}}. C'est la valeur de l'attribut {{htmlattrxref("type","input")}} qui définit le type de bouton affiché&nbsp;:
 
 ### submit
 
@@ -418,7 +418,7 @@ Un bouton se crée avec un élément {{HTMLElement("button")}} ou un élément {
     <input type="button" value="Ceci est un bouton lambda">
 ```
 
-Les boutons se comportent de la même manière que vous utilisiez l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. Il existe toutefois quelques différences à noter :
+Les boutons se comportent de la même manière que vous utilisiez l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. Il existe toutefois quelques différences à noter&nbsp;:
 
 - Comme on peut le voir dans l'exemple précédent, les éléments {{HTMLElement("button")}} autorisent l'utilisation de contenu HTML dans l'étiquette, tandis que les éléments {{HTMLElement("input")}} n'acceptent que du texte brut.
 - Dans le cas des éléments {{HTMLElement("button")}}, il est possible d'avoir une valeur différente de l'étiquette du bouton (toutefois, ceci ne peut être utilisé pour les versions antérieures à la version 8 d'Internet Explorer).
@@ -435,7 +435,7 @@ Ces widgets sont des contrôles permettant l'utilisateur de saisir des données
 
 On crée un widget pour nombres avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur `number`. Ce contrôle ressemble à un champ texte mais il n'accepte que des chiffres en virgule flottante, et propose habituellement des boutons pour augmenter ou réduire la valeur dans le widget.
 
-Il est aussi possible de :
+Il est aussi possible de&nbsp;:
 
 - contraindre la valeur en définissant les attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.
 - définir l'incrément de modification de la valeur du widget à l'aide des boutons ad‑hoc en précisant l'attribut {{htmlattrxref("step","input")}}.
@@ -465,12 +465,12 @@ Cet exemple créé un curseur dont les valeurs varient entre 0 et 500, et dont l
 Un problème avec les curseurs est qu'il n'offrent aucun moyen visue de savoir quelle est leur valeur courante. Il est nécessaire d'ajouter cela vous‑même à l'aide de JavaScript, mais c'est assez facile. Dans cet exemple nous ajoutons un élément {{htmlelement("span")}} dans lequel nous écrivons la valeur courante du curseur et la mettons à jour quand elle est modifiée.
 
 ```html
-<label for="beans">Combien de haricots pouvez‑vous manger ?</label>
+<label for="beans">Combien de haricots pouvez‑vous manger&nbsp;?</label>
 <input type="range" name="beans" id="beans" min="0" max="500" step="10">
 <span class="beancount"></span>
 ```
 
-et en  JavaScript :
+et en JavaScript&nbsp;:
 
 ```js
 var beans = document.querySelector('#beans');
@@ -483,7 +483,7 @@ beans.oninput = function() {
 }
 ```
 
-Ici nous stockons dans deux variables les références du curseur et celle de `span`, puis nous réglons immédiatement le [`textContent`](/fr/docs/Web/API/Node/textContent)  de `span` à la valeur courante `value` de l'entrée. Enfin, nous avons mis en place un gestionnaire d'événements oninput de sorte que chaque fois que le curseur de plage est déplacé, le `textContent` de `span` est mis à jour avec la nouvelle valeur de l'entrée.
+Ici nous stockons dans deux variables les références du curseur et celle de `span`, puis nous réglons immédiatement le [`textContent`](/fr/docs/Web/API/Node/textContent)  de `span` à la valeur courante `value` de l'entrée. Enfin, nous avons mis en place un gestionnaire d'événements oninput de sorte que chaque fois que le curseur de plage est déplacé, le `textContent` de `span` est mis à jour avec la nouvelle valeur de l'entrée.
 
 L'attribut `range` pour `input` n'est pas pris en charge dans les versions d'Internet Explorer dont le numéro est inférieur à 10.
 
@@ -503,7 +503,7 @@ Cette valeur d'attribut créé un widget pour afficher et sélectionner une date
 
 #### `month`
 
-Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée.
+Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée.
 
 ```html
 <input type="month" name="month" id="month">
@@ -511,7 +511,7 @@ Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois
 
 #### `time`
 
-Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire.
+Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire.
 
 ```html
 <input type="time" name="time" id="time">
@@ -519,7 +519,7 @@ Cette valeur d'attribut créé un widget pour afficher et sélectionner un hora
 
 #### `week`
 
-Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante.
+Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante.
 
 ```html
 <input type="week" name="week" id="week">
@@ -528,7 +528,7 @@ Cette valeur d'attribut crée un widget pour afficher et sélectionner une sema
 Tous les contrôles de sélection de date et heure peuvent être contraints à l'aide des attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.
 
 ```html
-    <label for="maDate">Quand êtes vous disponible cet été ?</label>
+    <label for="maDate">Quand êtes vous disponible cet été&nbsp;?</label>
     <input type="date" min="2013-06-01" max="2013-08-31" id="maDate">
 ```
 
@@ -536,7 +536,7 @@ Tous les contrôles de sélection de date et heure peuvent être contraints à l
 
 ### Sélecteur de couleur
 
-Les couleurs sont toujours compliquées à manier. Il existe plusieurs façons de les exprimer : valeurs RGB (décimale ou hexadécimale), valeurs HSL, mots-clés, etc. Les widgets de sélection de couleur permettent aux utilisateurs de sélectionner une couleur dans un contexte textuel et visuel.
+Les couleurs sont toujours compliquées à manier. Il existe plusieurs façons de les exprimer&nbsp;: valeurs RGB (décimale ou hexadécimale), valeurs HSL, mots-clés, etc. Les widgets de sélection de couleur permettent aux utilisateurs de sélectionner une couleur dans un contexte textuel et visuel.
 
 Un widget de sélection de couleur se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur `color`.
 
@@ -554,7 +554,7 @@ Il existe d'autres types de widgets qui ne peuvent pas être classés facilement
 
 ### Sélection de fichier
 
-Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article  « [Envoi et extraction des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires "/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires") ». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer.
+Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article  «&nbsp;[Envoi et extraction des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires "/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires")&nbsp;». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer.
 
 Pour créer un widget de sélection de fichier, vous devez utiliser un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur `file`. Les types de fichiers acceptés peuvent être contraints en utilisant l'attribut {{htmlattrxref("accept","input")}}. De plus, si vous souhaitez permettre à l'utilisateur de choisir plusieurs fichiers, vous pouvez le faire en ajoutant l'attribut {{htmlattrxref("multiple","input")}}.
 
@@ -570,7 +570,7 @@ Dans cet exemple, le widget de sélection de fichiers permet de sélectionner de
 
 Il est parfois pratique pour des raisons techniques d'avoir des morceaux d'informations qui soient envoyés au serveur sans être montrées à l'utilisateur. Pour ce faire, vous pouvez ajouter un élément invisible dans votre formulaire. Cela est possible en utilisant un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur `hidden`.
 
-Si vous créez un tel élément, il est obligatoire de définir ses attributs `name` et `value` :
+Si vous créez un tel élément, il est obligatoire de définir ses attributs `name` et `value`&nbsp;:
 
 ```html
     <input type="hidden" id="timestamp" name="timestamp" value="1286705410">
@@ -586,16 +586,16 @@ Une image-bouton se crée avec un élément {{HTMLElement("input")}} dont l'attr
     <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
 ```
 
-Si l'image-bouton est utilisée pour envoyer un formulaire, ce widget n'envoie pas sa valeur mais les coordonnées X et Y du clic sur l'image (les coordonnées sont relatives à l'image, ce qui veut dire que le coin supérieur gauche représente les coordonnées 0, 0). Les coordonnées sont envoyées sous la forme de deux paires de clé/valeur :
+Si l'image-bouton est utilisée pour envoyer un formulaire, ce widget n'envoie pas sa valeur mais les coordonnées X et Y du clic sur l'image (les coordonnées sont relatives à l'image, ce qui veut dire que le coin supérieur gauche représente les coordonnées 0, 0). Les coordonnées sont envoyées sous la forme de deux paires de clé/valeur&nbsp;:
 
-- la valeur X est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « *.x* »
-- la valeur Y est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « *.y* ».
+- la valeur X est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne «&nbsp;*.x*&nbsp;»
+- la valeur Y est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne «&nbsp;*.y*&nbsp;».
 
-Lorsque vous cliquez sur l'image dans ce formulaire, vous êtes redirigés une URL du type suivant :
+Lorsque vous cliquez sur l'image dans ce formulaire, vous êtes redirigés une URL du type suivant&nbsp;:
 
         http://foo.com?pos.x=123&pos.y=456
 
-C'est une façon très commode de construire une « hot map » (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article « [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires "/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires") ».
+C'est une façon très commode de construire une «&nbsp;hot map&nbsp;» (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article «&nbsp;[Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires "/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires")&nbsp;».
 
 ### Compteurs et barres de progression
 
@@ -611,13 +611,13 @@ Une barre de progression représente une valeur qui évolue dans le temps jusqu'
 
 Cela sert à mettre en œuvre visuellement un rapport d'avancement, comme le pourcentage du nombre total de fichiers téléchargés ou le nombre de questions posées dans un questionnaire.
 
-Le contenu dans l'élément {{HTMLElement("progress")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ;  les technologies d'assistance vocalisent ce contenu.
+Le contenu dans l'élément {{HTMLElement("progress")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément&nbsp;;  les technologies d'assistance vocalisent ce contenu.
 
 #### Meter
 
-Un étalon est une valeur fixe dans une plage délimitée par une valeur minimale {{htmlattrxref("min","meter")}} et une valeur maximale {{htmlattrxref("max","meter")}}. Cette valeur est affichée dans une barre, et pour savoir à quoi cette barre ressemble, nous comparons certaines valeurs :
+Un étalon est une valeur fixe dans une plage délimitée par une valeur minimale {{htmlattrxref("min","meter")}} et une valeur maximale {{htmlattrxref("max","meter")}}. Cette valeur est affichée dans une barre, et pour savoir à quoi cette barre ressemble, nous comparons certaines valeurs&nbsp;:
 
-- les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} divisent l'intervalle en trois parties :
+- les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} divisent l'intervalle en trois parties&nbsp;:
 
   - la partie basse de l'intervalle est comprise entre les valeurs {{htmlattrxref("min","meter")}} et {{htmlattrxref("low","meter")}} (les deux valeurs sont incluses)
   - la partie médiane de l'intervalle est comprise entre les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} (les deux valeurs sont exclues)
@@ -629,7 +629,7 @@ Un étalon est une valeur fixe dans une plage délimitée par une valeur minimal
   - Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie médiane, la partie basse est considérée comme la partie moyenne, la partie médiane comme la partie préférée et la partie haute comme moyenne également.
   - Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie haute, la partie basse est considérée comme la moins favorable, la partie médiane comme moyenne et la partie haute comme la partie préférée.
 
-Tous les navigateurs compatibles avec l'élément {{HTMLElement("meter")}} utilisent ces valeurs pour modifier la couleur de la barre :
+Tous les navigateurs compatibles avec l'élément {{HTMLElement("meter")}} utilisent ces valeurs pour modifier la couleur de la barre&nbsp;:
 
 - Si la valeur actuelle est dans la partie préférée, la barre est verte.
 - Si la valeur actuelle est dans la partie moyenne, la barre est jaune.
@@ -641,17 +641,17 @@ Une telle barre se crée avec un élément {{HTMLElement("meter")}}. Cela permet
 <meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
 ```
 
-Le contenu de l'élément {{HTMLElement("meter")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent cet affichage.
+Le contenu de l'élément {{HTMLElement("meter")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément&nbsp;; les technologies d'assistance vocalisent cet affichage.
 
 La prise en charge de `progress` et `meter` est vraiment bonne — il n'y a pas de prise en charge dans Internet Explorer, mais les autres navigateurs l'acceptent bien.
 
 ## Conclusion
 
-Comme nous venons de le voir, il y a pas mal d'éléments de formulaire différents disponibles  — il n'est pas nécessaire de mémoriser l'ensemble de ces détails dès maintenant, mais vous pourrez revenir à cet article tant que vous le voudrez pour revoir tel ou tel détail.
+Comme nous venons de le voir, il y a pas mal d'éléments de formulaire différents disponibles  — il n'est pas nécessaire de mémoriser l'ensemble de ces détails dès maintenant, mais vous pourrez revenir à cet article tant que vous le voudrez pour revoir tel ou tel détail.
 
 ## Voir également
 
-Pour entrer plus en détails des différents widgets de formulaires, voici quelques ressources externes très utiles que vous pouvez visiter :
+Pour entrer plus en détails des différents widgets de formulaires, voici quelques ressources externes très utiles que vous pouvez visiter&nbsp;:
 
 - [L'état actuelle des formulaires HTML5](http://wufoo.com/html5/) par Wufoo (en anglais)
 - [Tests HTML5 - inputs](http://www.quirksmode.org/html5/inputs.html) sur Quirksmode (en anglais) (et [pour les navigateurs mobiles](http://www.quirksmode.org/html5/inputs_mobile.html))
diff --git a/files/fr/learn/forms/form_validation/index.md b/files/fr/learn/forms/form_validation/index.md
index 351da31325..1a49462038 100644
--- a/files/fr/learn/forms/form_validation/index.md
+++ b/files/fr/learn/forms/form_validation/index.md
@@ -11,7 +11,7 @@ Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les don
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Notions concernant les ordinateurs, une bonne compréhension du
         <a href="/fr/docs/Learn/HTML">HTML</a>, des
@@ -20,7 +20,7 @@ Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les don
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Comprendre ce qu'est la validation d'un formulaire, pourquoi c'est
         important et comment la mettre en œuvre.
@@ -33,20 +33,20 @@ Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les don
 
 Allez sur n'importe quel site à la mode avec un formulaire d'inscription et vous remarquerez des retours si vous n'entrez pas les données dans le format attendu. Vous aurez des messages comme :
 
-- « Ce champ est obligatoire » (vous ne pouvez pas le laisser vide)
-- « Veuillez entrer votre numéro de téléphone au format xxx-xxxx » (il attend trois chiffres suivis d'un tiret, suivi de quatre chiffres).
-- « Veuillez entrer une adresse e-mail valide » (ce que vous avez saisi ne ressemble pas à une adresse e-mail valide).
-- « Votre mot de passe doit comporter entre 8 et 30 caractères et contenir une majuscule, un symbole et un chiffre » (sérieusement ?).
+- «&nbsp;Ce champ est obligatoire&nbsp;» (vous ne pouvez pas le laisser vide)
+- «&nbsp;Veuillez entrer votre numéro de téléphone au format xxx-xxxx&nbsp;» (il attend trois chiffres suivis d'un tiret, suivi de quatre chiffres).
+- «&nbsp;Veuillez entrer une adresse e-mail valide&nbsp;» (ce que vous avez saisi ne ressemble pas à une adresse e-mail valide).
+- «&nbsp;Votre mot de passe doit comporter entre 8 et 30 caractères et contenir une majuscule, un symbole et un chiffre&nbsp;» (sérieusement ?).
 
-C'est ce qu'on appelle la validation de formulaire —  lorsque vous saisissez des données, l'application Web vérifie si elles sont correctes. Si elles sont correctes, l'application permet que les données soient soumises au serveur et (généralement) sauvegardées dans une base de données ; si ce n'est pas le cas, elle émet des messages d'erreur pour expliquer ce que vous avez fait de mal (pour autant que vous l'ayez fait). La validation des formulaires peut être mise en œuvre de différentes manières.
+C'est ce qu'on appelle la validation de formulaire —  lorsque vous saisissez des données, l'application Web vérifie si elles sont correctes. Si elles sont correctes, l'application permet que les données soient soumises au serveur et (généralement) sauvegardées dans une base de données ; si ce n'est pas le cas, elle émet des messages d'erreur pour expliquer ce que vous avez fait de mal (pour autant que vous l'ayez fait). La validation des formulaires peut être mise en œuvre de différentes manières.
 
-La vérité est qu'aucun d'entre nous n'_aime_ remplir des formulaires — les formulaires ennuient les utilisateurs, tout le prouve : cela les incite à partir et à aller voir ailleurs s'ils sont mal faits. Bref, les formulaires, c'est nullissime.
+La vérité est qu'aucun d'entre nous n'_aime_ remplir des formulaires — les formulaires ennuient les utilisateurs, tout le prouve&nbsp;: cela les incite à partir et à aller voir ailleurs s'ils sont mal faits. Bref, les formulaires, c'est nullissime.
 
 Remplir des formulaires web doit être aussi facile que possible. Alors pourquoi être tatillons et bloquer les utilisateurs à chaque fois ? Il y a trois raisons principales :
 
 - **obtenir de bonnes données dans un bon format** — les applications ne tourneront pas correctement si les données utilisateur sont stockées dans un format fantaisiste, ou si les bonnes informations ne sont pas aux bons endroits ou totalement omises.
 - **protéger nos utilisateurs** — s'ils entrent un mot de passe facile à deviner ou aucun, des utilisateurs malveillants peuvent aisément accéder à leurs comptes et voler leurs données.
-- **nous protéger nous‑mêmes** — il existe de nombreuses façons dont les utilisateurs malveillants peuvent utiliser les formulaires non protégés pour endommager l'application dans laquelle ils se trouvent (voir [Sécurité du site Web](/fr/docs/Learn/Server-side/First_steps/Website_security)).
+- **nous protéger nous‑mêmes** — il existe de nombreuses façons dont les utilisateurs malveillants peuvent utiliser les formulaires non protégés pour endommager l'application dans laquelle ils se trouvent (voir [Sécurité du site Web](/fr/docs/Learn/Server-side/First_steps/Website_security)).
 
 ### Les divers types de validation de formulaire
 
@@ -67,26 +67,26 @@ Dans le monde réel, les développeurs ont tendance à utiliser une combinaison
 
 ## Utiliser la validation intégrée au formulaire
 
-Une des caractéristiques de [HTML5](/fr/docs/orphaned/Web/Guide/HTML/HTML5) est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des [attributs de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) sur les éléments de formulaire ; ils vous permettent de spécifier des règles pour une entrée de formulaire comme : une valeur doit‑elle être remplie ? y a-t-il une longueur minimale et/ou maximale des données ? doit‑elle être un nombre, une adresse e-mail ou autre chose ? doit‑elle correspondre à un modèle ? Si les données saisies suivent toutes ces règles, elles sont considérées comme valides ; si ce n'est pas le cas, elles sont considérées comme non valides.
-Quand un élément est valide :
+Une des caractéristiques de [HTML5](/fr/docs/orphaned/Web/Guide/HTML/HTML5) est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des [attributs de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) sur les éléments de formulaire&nbsp;; ils vous permettent de spécifier des règles pour une entrée de formulaire comme&nbsp;: une valeur doit‑elle être remplie&nbsp;? y a-t-il une longueur minimale et/ou maximale des données&nbsp;? doit‑elle être un nombre, une adresse e-mail ou autre chose&nbsp;? doit‑elle correspondre à un modèle&nbsp;? Si les données saisies suivent toutes ces règles, elles sont considérées comme valides ; si ce n'est pas le cas, elles sont considérées comme non valides.
+Quand un élément est valide&nbsp;:
 
-- l'élément correspond à la pseudo‑classe CSS {{cssxref(":valid")}}  ; cela vous permet d'appliquer une composition de style distinctive.
+- l'élément correspond à la pseudo‑classe CSS {{cssxref(":valid")}} &nbsp;; cela vous permet d'appliquer une composition de style distinctive.
 - si l'utilisateur essaie d'envoyer les données, le navigateur soumet le formulaire pour autant qu'il n'y ait rien d'autre qui l'empêche de le faire (par ex. du JavaScript).
 
-Quand un élément est invalide :
+Quand un élément est invalide&nbsp;:
 
-- l'élément correspond à la pseudo‑classe CSS {{cssxref(":invalid")}}  ; cela vous permet d'appliquer une composition de style distinctive.
+- l'élément correspond à la pseudo‑classe CSS {{cssxref(":invalid")}} &nbsp;; cela vous permet d'appliquer une composition de style distinctive.
 - si l'utilisateur essaie d'envoyer le formulaire, le navigateur le bloquera et affichera un message d'erreur.
 
-### Contraintes de validation sur les éléments input — simple début
+### Contraintes de validation sur les éléments input — simple début
 
 Dans cette section, nous examinerons quelques unes des diverses fonctionnalités HTML5 peuvant être utilisées pour valider des éléments d'{{HTMLElement("input")}}.
 
-Commençons par un exemple simple — une entrée ouvrant un choix, selon votre préférence, entre banane ou cerise. Il faut un texte {{HTMLElement("input")}} simple avec une étiquette correspondante et un {{htmlelement("button")}} de soumission. Le code source est sur GitHub à l'adresse [fruit-start.html](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html) et un exemple « live » ci-dessous :
+Commençons par un exemple simple — une entrée ouvrant un choix, selon votre préférence, entre banane ou cerise. Il faut un texte {{HTMLElement("input")}} simple avec une étiquette correspondante et un {{htmlelement("button")}} de soumission. Le code source est sur GitHub à l'adresse [fruit-start.html](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html) et un exemple «&nbsp;live&nbsp;» ci-dessous :
 
 ```html hidden
 <form>
-  <label for="choose">Préférez‑vous la banane ou la cerise ?</label>
+  <label for="choose">Préférez‑vous la banane ou la cerise&nbsp;?</label>
   <input id="choose" name="i_like">
   <button>Soumettre</button>
 </form>
@@ -108,19 +108,19 @@ Pour commencer, faites une copie de fruit-start.html dans un nouveau répertoire
 
 ### Attribut required
 
-La fonctionnalité de validation HTML5 la plus simple à utiliser est l'attribut {{htmlattrxref("required", "input")}}} — si vous voulez rendre une entrée obligatoire, vous pouvez marquer l'élément en utilisant cet attribut. Lorsque cet attribut est mis, le formulaire ne sera pas soumis (et affichera un message d'erreur) si l'entrée est vide (l'entrée sera également considérée comme invalide).
+La fonctionnalité de validation HTML5 la plus simple à utiliser est l'attribut {{htmlattrxref("required", "input")}}} — si vous voulez rendre une entrée obligatoire, vous pouvez marquer l'élément en utilisant cet attribut. Lorsque cet attribut est mis, le formulaire ne sera pas soumis (et affichera un message d'erreur) si l'entrée est vide (l'entrée sera également considérée comme invalide).
 
-Ajoutez un attribut `required` à votre saisie, comme montré ci‑dessous :
+Ajoutez un attribut `required` à votre saisie, comme montré ci‑dessous&nbsp;:
 
 ```html
 <form>
-  <label for="choose">Préférez-vous la banane ou la cerise ?</label>
+  <label for="choose">Préférez-vous la banane ou la cerise&nbsp;?</label>
   <input id="choose" name="i_like" required>
   <button>Soumettre</button>
 </form>
 ```
 
-Notez aussi le CSS incorporé dans le fichier exemple :
+Notez aussi le CSS incorporé dans le fichier exemple&nbsp;:
 
 ```css
 input:invalid {
@@ -152,24 +152,24 @@ Vous trouverez ci-dessous quelques exemples pour vous donner une idée de base d
 - `[a-z]` — correspond à tout caractère de la plage a–z, en minuscules seulement (utilisez `[A-Za-z]` pour minuscules et majuscules et `[A-Z]` pour les majuscules uniquement).
 - `a.c` — correspond à a, suivi par n'importe quel caractère,suivi par c.
 - `a{5}` — correspond à a, 5 fois.
-- `a{5,7}` — correspond à  a, 5 à 7 fois, mais ni plus, ni moins.
+- `a{5,7}` — correspond à a, 5 à 7 fois, mais ni plus, ni moins.
 
-Vous pouvez utiliser des nombres ou d'autres caractères dans ces expressions, comme :
+Vous pouvez utiliser des nombres ou d'autres caractères dans ces expressions, comme&nbsp;:
 
 - `[ -]` — correspond à une espace ou un tiret.
 - `[0-9]` — correspond à tout nombre compris entre 0 et 9.
 
-Vous pouvez combiner cela pratiquement comme vous l'entendez en précisant les différentes parties les unes après les autres :
+Vous pouvez combiner cela pratiquement comme vous l'entendez en précisant les différentes parties les unes après les autres&nbsp;:
 
 - `[Ll].*k` — Un seul caractère L en majuscules ou minuscules, suivi de zéro ou plusieurs caractères de n'importe quel type, suivis par un k minuscules.
-- `[A-Z][A-Za-z' -]+` — Un seul caractère en majuscules suivi par un ou plusieurs caractères en majuscules ou minuscules, un tiret, une apostrophe ou une espace. Cette combinaison peut s'utiliser pour valider les nom de villes dans les pays anglo‑saxons ; ils débutent par une majuscule et ne contiennent pas d'autre caractère. Quelques exemples de ville de GB correspondant à ce schéma : Manchester, Ashton-under-lyne et Bishop's Stortford.
+- `[A-Z][A-Za-z' -]+` — Un seul caractère en majuscules suivi par un ou plusieurs caractères en majuscules ou minuscules, un tiret, une apostrophe ou une espace. Cette combinaison peut s'utiliser pour valider les nom de villes dans les pays anglo‑saxons&nbsp;; ils débutent par une majuscule et ne contiennent pas d'autre caractère. Quelques exemples de ville de GB correspondant à ce schéma&nbsp;: Manchester, Ashton-under-lyne et Bishop's Stortford.
 - `[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}` — Un schéma pour un numéro de téléphone intérieur américain — trois chiffres, suivis par une espace ou un tiret, suivis par trois nombres, suivis par une espace ou un tiret, suivis par quatre nombres. Vous aurez peut-être à faire plus compliqué, car certains écrivent leur numéro de zone entre parenthèses, mais ici il s'agit simplement de faire une démonstration.
 
-Voyons un exemple — mettons à jour notre HTML en y ajoutant un attribut `pattern`, ainsi :
+Voyons un exemple — mettons à jour notre HTML en y ajoutant un attribut `pattern`, ainsi&nbsp;:
 
 ```html
 <form>
-  <label for="choose">Préférez‑vous la banane ou la cerise ?</label>
+  <label for="choose">Préférez‑vous la banane ou la cerise&nbsp;?</label>
   <input id="choose" name="i_like" required pattern="banane|cerise">
   <button>Soumettre</button>
 </form>
@@ -187,7 +187,7 @@ input:valid {
 
 {{EmbedLiveSample("Validation_selon_une_expression_régulière", "100%", 55)}}
 
-Dans cet exemple, l'élément {{HTMLElement("input")}}} accepte l'une des deux valeurs possibles : la chaîne « banane » ou la chaîne « cerise ».
+Dans cet exemple, l'élément {{HTMLElement("input")}}} accepte l'une des deux valeurs possibles : la chaîne «&nbsp;banane&nbsp;» ou la chaîne «&nbsp;cerise&nbsp;».
 
 Maintenant, essayez de changer la valeur à l'intérieur de l'attribut `pattern` suivant certains exemples vus plus haut et regardez comment les valeurs entrées en sont affectées pour rester valides. Écrivez vos propres textes et voyez comment vous vous en sortez ! Restez dans le domaine des fruits dans la mesure du possible, afin que vos exemples aient du sens !
 
@@ -208,11 +208,11 @@ Supprimez maintenant le contenu de l'élément `<body>` et remplacez-le par le s
 ```html
 <form>
   <div>
-    <label for="choose">Préférez‑vous la banane ou la cerise ?</label>
+    <label for="choose">Préférez‑vous la banane ou la cerise&nbsp;?</label>
     <input id="choose" name="i_like" required minlength="6" maxlength="6">
   </div>
   <div>
-    <label for="number">Combien en voulez‑vous ?</label>
+    <label for="number">Combien en voulez‑vous&nbsp;?</label>
     <input type="number" id="number" name="amount" value="1" min="1" max="10">
   </div>
   <div>
@@ -222,7 +222,7 @@ Supprimez maintenant le contenu de l'élément `<body>` et remplacez-le par le s
 ```
 
 - Ici, nous avons donné au champ de texte une taille minimale et maximale de 6 caractères — la même que celle de _banane_ ou _cerise_. La saisie de moins de 6 caractères s'affichera comme non valide et la saisie de plus de 6 caractères ne sera pas possible dans la plupart des navigateurs.
-- Nous avons également contraint le champ `number` à un `min` de 1 et un `max` de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage.
+- Nous avons également contraint le champ `number` à un `min` de 1 et un `max` de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage.
 
 ```html hidden
 input:invalid {
@@ -238,7 +238,7 @@ div {
 }
 ```
 
-Voici cet exemple s'exécutant en « live » :
+Voici cet exemple s'exécutant en «&nbsp;live&nbsp;»&nbsp;:
 
 {{EmbedLiveSample('Limitation_de_la_taille_des_entrées', "100%", 100)}}
 
@@ -246,7 +246,7 @@ Voici cet exemple s'exécutant en « live » :
 
 ### Exemple complet
 
-Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intégrées pour la validation :
+Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intégrées pour la validation&nbsp;:
 
 ```html
 <form>
@@ -258,7 +258,7 @@ Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intég
     </fieldset>
   </p>
   <p>
-    <label for="n1">Quel est votre âge ?</label>
+    <label for="n1">Quel est votre âge&nbsp;?</label>
     <!-- L'attribut pattern peut servir de recours pour les navigateurs dont le type number n'est
          pas implémenté pour input mais qui prennent en charge l'attribut pattern. Veuillez noter
          que les navigateurs prenant en charge l'attribut pattern ne signalent pas d'erreur quand
@@ -267,7 +267,7 @@ Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intég
            pattern="\d+">
   </p>
   <p>
-    <label for="t1">Quel est votre fruit favori ?<abbr title="Ce champ est obligatoire">*</abbr></label>
+    <label for="t1">Quel est votre fruit favori&nbsp;?<abbr title="Ce champ est obligatoire">*</abbr></label>
     <input type="text" id="t1" name="fruit" list="l1" required
            pattern="[Bb]anane|[Cc]erise|[Cc]itron|[Ff]raise|[Oo]range|[Pp]omme">
     <datalist id="l1">
@@ -280,7 +280,7 @@ Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intég
     </datalist>
   </p>
   <p>
-    <label for="t2">Quelle est votre adresse électronique ?</label>
+    <label for="t2">Quelle est votre adresse électronique&nbsp;?</label>
     <input type="email" id="t2" name="email">
   </p>
   <p>
@@ -347,7 +347,7 @@ Comme nous avons vu dans les exemples précédents, à chaque fois qu'un utilisa
 
 Ces messages automatiques présentent deux inconvénients:
 
-- Il n'y a pas de façon standard de changer leur apparence avec CSS.
+- Il n'y a pas de façon standard de changer leur apparence avec CSS.
 - Ils dépendent des paramètres régionaux du navigateur, ce qui signifie que vous pouvez avoir une page dans une langue mais les messages d'erreurs affichés dans une autre.
 
 | Navigateur             | Affichage                                                                                        |
@@ -368,23 +368,23 @@ HMTL5 fournit une [API de contraintes de validation](https://www.w3.org/TR/html5
 </form>
 ```
 
-En JavaScript, il faut appeler la méthode [`setCustomValidity()`](</fr/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()> "/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"):
+En JavaScript, il faut appeler la méthode [`setCustomValidity()`](</fr/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()> "/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"):
 
 ```js
 var email = document.getElementById("mail");
 
 email.addEventListener("keyup", function (event) {
-  if(email.validity.typeMismatch) {
-    email.setCustomValidity("J'attend un e-mail, mon cher !");
-  } else {
-    email.setCustomValidity("");
-  }
+  if(email.validity.typeMismatch) {
+    email.setCustomValidity("J'attend un e-mail, mon cher&nbsp;!");
+  } else {
+    email.setCustomValidity("");
+  }
 });
 ```
 
 {{EmbedLiveSample("Messages_adaptés_pour_les_erreurs", "100%", 50)}}
 
-## Validation de formulaires avec JavaScript
+## Validation de formulaires avec JavaScript
 
 Si vous souhaitez avoir le contrôle de l'apparence des messages d'erreur, ou si vous voulez gérer le comportement des navigateurs n'ayant pas implémenté la validation de formulaire HTML5, vous n'avez pas d'autre choix que d'utiliser JavaScript.
 
@@ -396,31 +396,31 @@ Propriétés de l'API de validation des contraintes
 
 | Propriétés                 | Description                                                                                                                                                                                                                                                                                  |
 | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `validationMessage`        | Un message (dans la langue locale) décrivant les contraintes de validation que le contrôle ne satisfait pas (si c'est le cas), ou une chaîne vide si le contrôle n'est pas soumis à validation (`willValidate` est alors `false`), ou bien la valeur de l'élément satisfait ses contraintes. |
+| `validationMessage`        | Un message (dans la langue locale) décrivant les contraintes de validation que le contrôle ne satisfait pas (si c'est le cas), ou une chaîne vide si le contrôle n'est pas soumis à validation (`willValidate` est alors `false`), ou bien la valeur de l'élément satisfait ses contraintes. |
 | `validity`                 | Un objet {{domxref("ValidityState")}} qui décrit l'état de validité de l'élément.                                                                                                                                                                                                    |
-| `validity.customError`     | Renvoie `true` si l'élément à une erreur personnalisée, `false` a contrario.                                                                                                                                                                                                                 |
-| `validity.patternMismatch` | Renvoie `true` si la valeur de l'élément ne correspond pas au motif fourni, `false` dans le cas contraire. Si la méthode renvoie `true`, l'élément fera partie de la pseudo-classe CSS {{cssxref(":invalid")}}.                                                                     |
-| `validity.rangeOverflow`   | Renvoie `true` si la valeur de l'élément est supérieure au maximum défini, `false` dans le cas contraire. Si le retour est `true`, l'élément fera partie des  pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.                                   |
+| `validity.customError`     | Renvoie `true` si l'élément à une erreur personnalisée, `false` a contrario.                                                                                                                                                                                                                 |
+| `validity.patternMismatch` | Renvoie `true` si la valeur de l'élément ne correspond pas au motif fourni, `false` dans le cas contraire. Si la méthode renvoie `true`, l'élément fera partie de la pseudo-classe CSS {{cssxref(":invalid")}}.                                                                     |
+| `validity.rangeOverflow`   | Renvoie `true` si la valeur de l'élément est supérieure au maximum défini, `false` dans le cas contraire. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.                                   |
 | `validity.rangeUnderflow`  | Renvoie `true` si la valeur de l'élément est plus petite que le minimum défini, `false` dans le cas contraire. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.                               |
-| `validity.stepMismatch`    | Renvoie `true` si la valeur de l'élément ne correspond pas aux règles définies par l'attribut `step`,`false` a contrario. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.                    |
-| `validity.tooLong`         | Renvoie `true` si la taille de l'élément est supérieure à la longueur maximum définie, `false` dans le cas contraire. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.                        |
-| `validity.typeMismatch`    | Renvoie `true` si la syntaxe de la valeur de l'élément n'est pas correcte ; `false` dans le cas contraire. Si le retour est `true`, l'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}}.                                                                                 |
-| `validity.valid`           | Renvoie `true` si la valeur de l'élément n'a pas de problème de validité, sinon `false`. L'élément sera de la pseudo-classe CSS {{cssxref(":valid")}} si le retour est `true` ; de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est `false`.                    |
+| `validity.stepMismatch`    | Renvoie `true` si la valeur de l'élément ne correspond pas aux règles définies par l'attribut `step`,`false` a contrario. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.                    |
+| `validity.tooLong`         | Renvoie `true` si la taille de l'élément est supérieure à la longueur maximum définie, `false` dans le cas contraire. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.                        |
+| `validity.typeMismatch`    | Renvoie `true` si la syntaxe de la valeur de l'élément n'est pas correcte ; `false` dans le cas contraire. Si le retour est `true`, l'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}}.                                                                                 |
+| `validity.valid`           | Renvoie `true` si la valeur de l'élément n'a pas de problème de validité, sinon `false`. L'élément sera de la pseudo-classe CSS {{cssxref(":valid")}} si le retour est `true`&nbsp;; de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est `false`.                    |
 | `validity.valueMissing`    | Renvoie `true` si l'élément n'a pas de valeur alors que le champ est requis, sinon`false`. L'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est `true`.                                                                                                  |
-| `willValidate`             | Retourne `true` si l'élément est validé lorsque le formulaire est soumis, `false` dans le cas contraire.                                                                                                                                                                                     |
+| `willValidate`             | Retourne `true` si l'élément est validé lorsque le formulaire est soumis, `false` dans le cas contraire.                                                                                                                                                                                     |
 
-#### Méthodes de l'API de validation des contraintes
+#### Méthodes de l'API de validation des contraintes
 
 | Méthodes                     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `checkValidity()`            | Renvoie `true` si la valeur de l'élément n'a pas de problème de validation, `false` autrement. Si l'élément est invalide, cette méthode déclenche aussi un événement {{event("invalid")}} sur cet élément.                                                                                                                                                                                                                                                                                                                     |
-| `setCustomValidity(message)` | Ajoute un message d'erreur personnalisé à l'élément ; si vous définissez un message d'erreur personnalisé, l'élément est considéré comme invalide, et le message spécifié est affiché. Cela vous permet d'utiliser du code JavaScript pour établir une erreur de validation autre que celles offertes par l'API standard des contraintes de validation. Le message est affiché à l'utilisateur lorsque le problème est rapporté. Si l'argument est une chaîne de caractères vide, l'erreur personnalisée est considérée comme effacée. |
+| `setCustomValidity(message)` | Ajoute un message d'erreur personnalisé à l'élément&nbsp;; si vous définissez un message d'erreur personnalisé, l'élément est considéré comme invalide, et le message spécifié est affiché. Cela vous permet d'utiliser du code JavaScript pour établir une erreur de validation autre que celles offertes par l'API standard des contraintes de validation. Le message est affiché à l'utilisateur lorsque le problème est rapporté. Si l'argument est une chaîne de caractères vide, l'erreur personnalisée est considérée comme effacée. |
 
-Pour les anciens navigateurs, il existe [une prothèse d'émulation (_polyfill_) comme Hyperform](https://hyperform.js.org/), pour compenser le défaut de prise en charge de cette API. Comme vous utilisez déjà JavaScript, l'utilisation d'une prethèse d'émulation n'est pas un souci supplémentaire pour la conception ou l'implémentation de votre site ou application Web.
+Pour les anciens navigateurs, il existe [une prothèse d'émulation (_polyfill_) comme Hyperform](https://hyperform.js.org/), pour compenser le défaut de prise en charge de cette API. Comme vous utilisez déjà JavaScript, l'utilisation d'une prethèse d'émulation n'est pas un souci supplémentaire pour la conception ou l'implémentation de votre site ou application Web.
 
 #### Exemple utilisant la validation des contraintes
 
-Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés. Tout d'abord, le HTML :
+Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés. Tout d'abord, le HTML :
 
 ```html
 <form novalidate>
@@ -435,9 +435,9 @@ Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés.
 </form>
 ```
 
-Ce formulaire simple utilise l'attribut {{htmlattrxref("novalidate","form")}} pour désactiver la validation automatique par le navigateur ; cela permet donc à notre script d'avoir le contrôle sur la validation. Toutefois, cela ne désactive la prise en charge par l'API de validation des contraintes, ni l'application des pseudo-classes CSS  {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} et {{cssxref(":out-of-range")}}. Cela signifie que, même si le navigateur ne vérifie pas automatiquement la validité du formulaire avant l'envoi des données, vous pouvez toujours effectuer cette validation et définir l'apparence du formulaire par vous-même.
+Ce formulaire simple utilise l'attribut {{htmlattrxref("novalidate","form")}} pour désactiver la validation automatique par le navigateur ; cela permet donc à notre script d'avoir le contrôle sur la validation. Toutefois, cela ne désactive la prise en charge par l'API de validation des contraintes, ni l'application des pseudo-classes CSS {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} et {{cssxref(":out-of-range")}}. Cela signifie que, même si le navigateur ne vérifie pas automatiquement la validité du formulaire avant l'envoi des données, vous pouvez toujours effectuer cette validation et définir l'apparence du formulaire par vous-même.
 
-L'attribut [`aria-live`](/fr/docs/Accessibility/ARIA/ARIA_Live_Regions) garantit que nos messages d'erreur personnalisés seront affichés à tout le monde, y compris les personnes utilisant des techniques d'assistance comme des lecteurs d'écran.
+L'attribut [`aria-live`](/fr/docs/Accessibility/ARIA/ARIA_Live_Regions) garantit que nos messages d'erreur personnalisés seront affichés à tout le monde, y compris les personnes utilisant des techniques d'assistance comme des lecteurs d'écran.
 
 ##### CSS
 
@@ -504,7 +504,7 @@ input:focus:invalid {
 
 ##### JavaScript
 
-Le code JavaScript suivant gère la validation personnalisée des erreurs.
+Le code JavaScript suivant gère la validation personnalisée des erreurs.
 
 ```js
 // Il y a plusieurs façon de sélectionner un nœud DOM ; ici on récupère
@@ -531,7 +531,7 @@ form.addEventListener("submit", function (event) {
   if (!email.validity.valid) {
 
     // S'il est invalide, on affiche un message d'erreur personnalisé
-    error.innerHTML = "J'attends une adresse e-mail correcte, mon cher !";
+    error.innerHTML = "J'attends une adresse e-mail correcte, mon cher&nbsp;!";
     error.className = "error active";
     // Et on empêche l'envoi des données du formulaire
     event.preventDefault();
@@ -547,15 +547,15 @@ L'API de validation des contraintes fournit un outil puissant pour gérer la val
 
 ### Valider des formulaires sans API intégrée
 
-Il arrive parfois, comme c'est le cas avec des navigateurs anciens ou de [widgets personnalisés](/fr/docs/HTML/Forms/How_to_build_custom_form_widgets), de ne pas pouvoir (ou vouloir) utiliser l'API de validation des contraintes. Dans ce cas, vous pourrez toujours utiliser JavaScript pour valider votre formulaire. Valider un formulaire est plus une question d'interface utilisateur que de réelle validation des données.
+Il arrive parfois, comme c'est le cas avec des navigateurs anciens ou de [widgets personnalisés](/fr/docs/HTML/Forms/How_to_build_custom_form_widgets), de ne pas pouvoir (ou vouloir) utiliser l'API de validation des contraintes. Dans ce cas, vous pourrez toujours utiliser JavaScript pour valider votre formulaire. Valider un formulaire est plus une question d'interface utilisateur que de réelle validation des données.
 
-Pour valider un formulaire, vous devez vous poser un certain nombre de questions:
+Pour valider un formulaire, vous devez vous poser un certain nombre de questions:
 
-- Quel type de validation dois-je réaliser ?
-  - : Vous devez déterminer comment valider vos données : opération sur des chaînes de caractères, conversion de type, expressions rationnelles, etc. C'est comme vous voulez. Mais retenez simplement que les données de formulaire sont toujours du texte et sont toujours fournies à vos scripts sous forme de chaînes de caractères.
-- Que dois-je faire si le formulaire n'est pas valide ?
-  - : C'est clairement une affaire d'interface utilisateur. Vous devez décider comment le formulaire doit se comporter : enverra-t-il quand même les données ? Devriez-vous mettre en évidence les champs qui sont en erreur ? Devriez-vous afficher des messages d'erreur ?
-- Comment puis-je aider l'utilisateur à corriger ses données invalides?
+- Quel type de validation dois-je réaliser&nbsp;?
+  - : Vous devez déterminer comment valider vos données&nbsp;: opération sur des chaînes de caractères, conversion de type, expressions rationnelles, etc. C'est comme vous voulez. Mais retenez simplement que les données de formulaire sont toujours du texte et sont toujours fournies à vos scripts sous forme de chaînes de caractères.
+- Que dois-je faire si le formulaire n'est pas valide&nbsp;?
+  - : C'est clairement une affaire d'interface utilisateur. Vous devez décider comment le formulaire doit se comporter : enverra-t-il quand même les données ? Devriez-vous mettre en évidence les champs qui sont en erreur ? Devriez-vous afficher des messages d'erreur ?
+- Comment puis-je aider l'utilisateur à corriger ses données invalides?
 
   - : Pour limiter la frustration de l'utilisateur, il est très important de fournir autant d'information d'aide que nécessaire pour le guider dans la correction de sa saisie. Vous devriez afficher des suggestions en amont pour que l'utilisateur sache ce qui est attendu, ainsi que des messages d'erreur clairs. Si vous souhaitez vous plonger dans les exigences d'interface utilsateur pour la validation de formulaires, voici quelques articles (en anglais) utiles que vous devriez lire :
 
@@ -583,11 +583,11 @@ Afin d'illustrer le propos, réécrivons le précédent exemple afin qu'il fonct
 </form>
 ```
 
-Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") est une spécification indépendante qui n'est pas spécifiquement liée à HTML5.
+Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") est une spécification indépendante qui n'est pas spécifiquement liée à HTML5.
 
 ##### CSS
 
-De même, nous n'avons pas eu à changer radicalement les CSS ; nous avons simplement transformé la pseudo-classe {{cssxref(":invalid")}} en une vraie classe et évité d'utiliser le sélecteur d'attribut, qui ne fonctionne pas avec Internet Explorer 6.
+De même, nous n'avons pas eu à changer radicalement les CSS&nbsp;; nous avons simplement transformé la pseudo-classe {{cssxref(":invalid")}} en une vraie classe et évité d'utiliser le sélecteur d'attribut, qui ne fonctionne pas avec Internet Explorer 6.
 
 ```css
 /* On améliore l'aspect de l'exemple avec ces quelques règles */
@@ -650,7 +650,7 @@ input:focus.invalid {
 
 ##### JavaScript
 
-Les changements les plus importants sont dans le code JavaScript, qui nécessite bien plus que de simples retouches.
+Les changements les plus importants sont dans le code JavaScript, qui nécessite bien plus que de simples retouches.
 
 ```js
 // Il existe moins de méthode pour sélectionner un nœud DOM
@@ -735,7 +735,7 @@ Voici le résultat:
 
 {{EmbedLiveSample("Exemple_sans_utilisation_de_la_validation_des_contraintes", "100%", 130)}}
 
-Comme vous avez pu le voir, il n'est pas si difficile de créer par soi-même un système de validation. La difficulté consiste à rendre le tout assez générique pour l'utiliser à la fois sur toutes les plateformes et pour chaque formulaire que vous pourriez créer. Il existe de nombreuses bibliothèques permettant ce genre de validation de formulaire ; n'hésitez pas à les utiliser. En voici quelques exemples :
+Comme vous avez pu le voir, il n'est pas si difficile de créer par soi-même un système de validation. La difficulté consiste à rendre le tout assez générique pour l'utiliser à la fois sur toutes les plateformes et pour chaque formulaire que vous pourriez créer. Il existe de nombreuses bibliothèques permettant ce genre de validation de formulaire ; n'hésitez pas à les utiliser. En voici quelques exemples :
 
 - Bibliothèques indépendantes :
 
@@ -747,7 +747,7 @@ Comme vous avez pu le voir, il n'est pas si difficile de créer par soi-même un
 
 #### Validation à distance
 
-Il peut être utile, dans certains cas, d'effectuer une validation à distance. Ce genre de validation est nécessaire lorsque les données saisies par l'utilisateur sont liées à des données supplémentaires stockées sur le serveur hébergeant votre application. Prenons par exemple les formulaires d'inscription, pour lesquels on vous demande un nom d'utilisateur. Pour éviter toute duplication d'un nom d'utilisateur, il est plus judicieux d'effectuer une requête AJAX pour vérifier la disponibilté du nom d'utilisateur que de demander à envoyer les données saisies et de renvoyer le formulaire avec une erreur.
+Il peut être utile, dans certains cas, d'effectuer une validation à distance. Ce genre de validation est nécessaire lorsque les données saisies par l'utilisateur sont liées à des données supplémentaires stockées sur le serveur hébergeant votre application. Prenons par exemple les formulaires d'inscription, pour lesquels on vous demande un nom d'utilisateur. Pour éviter toute duplication d'un nom d'utilisateur, il est plus judicieux d'effectuer une requête AJAX pour vérifier la disponibilté du nom d'utilisateur que de demander à envoyer les données saisies et de renvoyer le formulaire avec une erreur.
 
 Pour réaliser une telle validation, plusieurs précautions doivent être prises :
 
@@ -756,7 +756,7 @@ Pour réaliser une telle validation, plusieurs précautions doivent être prises
 
 ## Conclusion
 
-La validation d'un formulaire ne requiert pas de code JavaScript complexe, mais il est nécessaire de penser tout particulièrement à l'utilisateur. Rappelez-vous de toujours aider l'utilisateur à corriger les données qu'il saisit. Pour ce faire, assurez-vous de toujours :
+La validation d'un formulaire ne requiert pas de code JavaScript complexe, mais il est nécessaire de penser tout particulièrement à l'utilisateur. Rappelez-vous de toujours aider l'utilisateur à corriger les données qu'il saisit. Pour ce faire, assurez-vous de toujours :
 
 - Afficher des messages d'erreur explicites.
 - Être tolérant sur le format des données à envoyer.
diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md
index 00ad8747ef..1433aea69c 100644
--- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md
+++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md
@@ -58,7 +58,7 @@ C'est le premier exemple de code qui explique [comment construire un widget de f
 }
 
 /* ------------ */
-/* Style  Chic  */
+/* Style Chic  */
 /* ------------ */
 
 .select {
@@ -198,7 +198,7 @@ C'est le premier exemple de code qui explique [comment construire un widget de f
 }
 
 /* ------------ */
-/* Style  Chic  */
+/* Style Chic  */
 /* ------------ */
 
 .select {
@@ -338,7 +338,7 @@ C'est le premier exemple de code qui explique [comment construire un widget de f
 }
 
 /* ------------ */
-/* Style  Chic  */
+/* Style Chic  */
 /* ------------ */
 
 .select {
diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md
index 8d309a3801..070b53aa84 100644
--- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md
+++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md
@@ -75,7 +75,7 @@ Ceci est le troisième exemple expliquant comment [construire des widgets de for
 }
 
 /* ------------ */
-/* Style  chic  */
+/* Style chic  */
 /* ------------ */
 
 .select {
diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md
index 80f5e7f772..2955e7560a 100644
--- a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md
+++ b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md
@@ -40,19 +40,19 @@ Le widget est dans son état normal :
 
 > **Note :** Déplacer le focus dans la page entre les divers widgets se fait généralement en appuyant sur la touche de tabulation, mais ce n'est pas la norme partout. Par exemple, circuler parmi les liens sur une page se fait dans Safari par défaut en utilisant la [combinaison Option+Tab](http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/).
 
-Le widget est sans son état actif :
+Le widget est sans son état actif&nbsp;:
 
 - l'utilisateur clique sur lui
 - l'utilisateur presse la touche Tabulation et obtient le focus
 - le widget était dans l'état ouvert et l'utilisateur a cliqué dessus.
 
-Le widget est dans un état ouvert :
+Le widget est dans un état ouvert&nbsp;:
 
 - le widget est dans un état autre que ouvert et l'utilisateur clique dessus.
 
 Maintenant que nous savons comment changer les états du widget, il est important de définir comment changer la valeur du widget :
 
-La valeur change quand :
+La valeur change quand&nbsp;:
 
 - l'utilisateur clique sur une option quand le widget est dans l'état ouvert
 - l'utilisateur presse la touche
@@ -65,14 +65,14 @@ La valeur change quand :
 
   quand le widget est dans l'état actif
 
-Enfin, définissons comment les options du widget doivent se comporter :
+Enfin, définissons comment les options du widget doivent se comporter&nbsp;:
 
 - Quand le widget est ouvert, l'option sélectionnée est mise en valeur
 - Quand la souris est sur une option, l'option est mise en valeur et l'option précédemment mise en valeur revient à l'état normal
 
 Pour les besoins de notre exemple, nous nous arrêterons là ; cependant, si vous êtes un lecteur attentif, vous remarquerez que certains comportements ne sont pas précisés. Par exemple, que pensez-vous qu'il se passe si l'utilisateur appuie sur la touche Tabulation alors que le widget est dans l'état ouvert ? La réponse est… rien. D'accord, le bon comportement semble évident mais le fait est que, comme il n'est pas défini dans nos spécifications, il est très facile de fermer les yeux sur ce comportement. Dans un travail collaboratif, lorsque les personnes concevant le comportement du widget sont différentes de celles qui le mettent en œuvre, cette démarche se vérifiera.
 
-Autre exemple amusant : que se passera-t-il si l'utilisateur presse les touches <kbd>↑</kbd> ou <kbd>↓</kbd> alors que le widget est à l'état ouvert ? Ici, c'est un peu plus délicat. Si vous considérez que l'état actif et l'état ouvert sont totalement différents, la réponse est encore une fois « rien ne se produira » parce que nous n'avons pas défini d'interactions clavier pour l'état ouvert. D'autre part, si vous considérez que l'état actif et l'état ouvert coïncident, la valeur peut changer mais l'option ne sera certainement pas mise en valeur en conséquence, encore une fois parce que nous n'avons pas défini d'interactions clavier sur les options lorsque le widget est dans son état ouvert (nous avons seulement défini ce qui doit se passer lorsque le widget est ouvert, mais rien après).
+Autre exemple amusant : que se passera-t-il si l'utilisateur presse les touches <kbd>↑</kbd> ou <kbd>↓</kbd> alors que le widget est à l'état ouvert ? Ici, c'est un peu plus délicat. Si vous considérez que l'état actif et l'état ouvert sont totalement différents, la réponse est encore une fois «&nbsp;rien ne se produira&nbsp;» parce que nous n'avons pas défini d'interactions clavier pour l'état ouvert. D'autre part, si vous considérez que l'état actif et l'état ouvert coïncident, la valeur peut changer mais l'option ne sera certainement pas mise en valeur en conséquence, encore une fois parce que nous n'avons pas défini d'interactions clavier sur les options lorsque le widget est dans son état ouvert (nous avons seulement défini ce qui doit se passer lorsque le widget est ouvert, mais rien après).
 
 Dans notre exemple, les spécifications manquantes sont évidentes et nous les traiterons, mais cela peut devenir un problème réel sur de nouveaux widgets exotiques, pour lesquels personne n'a la moindre idée de ce qu'est le bon comportement. Il est donc toujours bon de passer du temps à l'étape conception, car si vous définissez pauvrement le comportement, ou si vous oubliez de le définir, il sera très difficile de le redéfinir une fois les utilisateurs habitués. Si vous avez des doutes, demandez l'avis des autres, et si vous avez le budget pour cela, n'hésitez pas à [faire des tests utilisateur](https://fr.wikipedia.org/wiki/Test_utilisateur). Ce processus est appelé UX Design (**U**ser e**X**perience). Si vous voulez en savoir plus sur ce sujet, vous devriez consulter les ressources utiles suivantes :
 
@@ -213,7 +213,7 @@ Maintenant que nous avons mis en place les fonctionnalités de base, le divertis
 }
 
 .select .value {
-  /* Comme la valeur peut être plus large que le widget, nous devons nous
+  /* Comme la valeur peut être plus large que le widget, nous devons nous
      assurer qu'elle ne changera pas la largeur du widget. */
   display  : inline-block;
   width    : 100%;
@@ -353,7 +353,7 @@ Avant de commencer, il est important de se rappeler quelque chose de très impor
 - Le script ne se charge pas. La chose est très courante, en particulier dans le domaine des mobiles pour lesquels le réseau n'est pas sûr.
 - Le script est bogué. Il faut toujours prendre en considération cette éventualité.
 - Le script est en conflit avec un autre script tierce‑partie. Cela peut se produire avec des suites de scripts ou n'importe quel marque page utilisé par l'utilisateur.
-- Le script est en conflit avec, ou est affecté par un extension de navigateur  (comme l'extension « [No script](https://addons.mozilla.org/fr/firefox/addon/noscript/) » de Firefox ou « [Scripts »](https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn) de Chrome).
+- Le script est en conflit avec, ou est affecté par un extension de navigateur  (comme l'extension « [No script](https://addons.mozilla.org/fr/firefox/addon/noscript/) » de Firefox ou « [Scripts »](https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn) de Chrome).
 - L'utilisateur utilise un navigateur ancien et l'une des fonctions dont vous avez besoin n'est pas prise en charge. Cela se produira fréquemment lorsque vous utiliserez des API de pointe.s.
 
 
@@ -362,7 +362,7 @@ Avant de commencer, il est important de se rappeler quelque chose de très impor
 
 En raison de ces aléas, il est vraiment important de considérer avec sérieux ce qui se passe si JavaScript ne fonctionne pas. Traiter en détail cette question est hors de la portée de cet article parce qu'elle est étroitement liée à la façon dont vous voulez rendre votre script générique et réutilisable, mais nous prendrons en considération les bases de ce sujet dans notre exemple.
 
-Ainsi, si notre code JavaScript ne s'exécute pas, nous reviendrons à l'affichage d'un élément  {{HTMLElement("select")}} standard. Pour y parvenir, nous avons besoin de deux choses.
+Ainsi, si notre code JavaScript ne s'exécute pas, nous reviendrons à l'affichage d'un élément  {{HTMLElement("select")}} standard. Pour y parvenir, nous avons besoin de deux choses.
 
 Tout d'abord, nous devons ajouter un élément {{HTMLElement("select")}} régulier avant chaque utilisation de notre widget personnalisé. Ceci est également nécessaire pour pouvoir envoyer les données de notre widget personnalisé avec le reste de nos données du formulaire ; nous reviendrons sur ce point plus tard.
 
@@ -396,7 +396,7 @@ Tout d'abord, nous devons ajouter un élément {{HTMLElement("select")}} réguli
 
 
 
-Deuxièmement, nous avons besoin de deux nouvelles classes pour nous permettre de cacher l'élément qui ne sert pas (c'est-à-dire l'élément{{HTMLElement("select")}} « réel »  si notre script ne fonctionne pas, ou le widget personnalisé s'il fonctionne). Notez que par défaut, le code HTML cache le widget personnalisé.
+Deuxièmement, nous avons besoin de deux nouvelles classes pour nous permettre de cacher l'élément qui ne sert pas (c'est-à-dire l'élément{{HTMLElement("select")}} « réel »  si notre script ne fonctionne pas, ou le widget personnalisé s'il fonctionne). Notez que par défaut, le code HTML cache le widget personnalisé.
 
 ```css
 .widget select,
@@ -414,7 +414,7 @@ Deuxièmement, nous avons besoin de deux nouvelles classes pour nous permettre d
 
 
 
-Maintenant nous avons juste besoin d'un commutateur JavaScript pour déterminer si le script est en cours d'exécution ou non. Cette bascule  est très simple : si au moment du chargement de la page notre script est en cours d'exécution, il supprime la classe no-widget et ajoute la classe widget, échangeant ainsi la visibilité de l'élément {{HTMLElement("select")}} et du widget personnalisé.
+Maintenant nous avons juste besoin d'un commutateur JavaScript pour déterminer si le script est en cours d'exécution ou non. Cette bascule est très simple : si au moment du chargement de la page notre script est en cours d'exécution, il supprime la classe no-widget et ajoute la classe widget, échangeant ainsi la visibilité de l'élément {{HTMLElement("select")}} et du widget personnalisé.
 
 
 
@@ -472,7 +472,7 @@ Les fonctionnalités que nous prévoyons d'utiliser sont les suivantes (classée
 3.  [`forEach`](/fr/docs/JavaScript/Reference/Global_Objects/Array/forEach "/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach") (ce n'est pas du DOM mais du JavaScript moderne)
 4.  {{domxref("element.querySelector","querySelector")}} et {{domxref("element.querySelectorAll","querySelectorAll")}}
 
-Au-delà de la disponibilité de ces fonctionnalités spécifiques, il reste encore un problème avant de commencer. L'objet retourné par la fonction {{domxref("element.querySelectorAll","querySelectorAll()")}} est une {{domxref("NodeList")}} plutôt qu'un [`Array`](/fr/docs/JavaScript/Reference/Global_Objects/Array "/en-US/docs/JavaScript/Reference/Global_Objects/Array"). C'est important, car les objets  `Array` acceptent la fonction [`forEach`](/fr/docs/JavaScript/Reference/Global_Objects/Array/forEach "/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach"), mais {{domxref("NodeList")}} ne le fait pas. Comme {{domxref("NodeList")}} ressemble vraiment à un `Array` et que `forEach` est d'utilisation si commode, nous pouvons facilement ajouter la prise en charge de `forEach à` {{domxref("NodeList")}} pour nous faciliter la vie, comme ceci :
+Au-delà de la disponibilité de ces fonctionnalités spécifiques, il reste encore un problème avant de commencer. L'objet retourné par la fonction {{domxref("element.querySelectorAll","querySelectorAll()")}} est une {{domxref("NodeList")}} plutôt qu'un [`Array`](/fr/docs/JavaScript/Reference/Global_Objects/Array "/en-US/docs/JavaScript/Reference/Global_Objects/Array"). C'est important, car les objets  `Array` acceptent la fonction [`forEach`](/fr/docs/JavaScript/Reference/Global_Objects/Array/forEach "/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach"), mais {{domxref("NodeList")}} ne le fait pas. Comme {{domxref("NodeList")}} ressemble vraiment à un `Array` et que `forEach` est d'utilisation si commode, nous pouvons facilement ajouter la prise en charge de `forEach à` {{domxref("NodeList")}} pour nous faciliter la vie, comme ceci :
 
 ```js
 NodeList.prototype.forEach = function (callback) {
@@ -801,7 +801,7 @@ Pour prendre en charge le rôle `listbos`, nous n'avons qu'à mettre à jour not
 
 > **Note :** Inclure à la fois l'attribut `role` et l'attribut `class` n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les [selecteurs d'attribut CSS](/fr/docs/CSS/Attribute_selectors "/en-US/docs/CSS/Attribute_selectors").
 
-### L'attribut  `aria-selected`
+### L'attribut  `aria-selected`
 
 Utiliser l'attribut `role` ne suffit pas. [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") fournit également de nombreux états et attributs de propriété. Plus vous les utiliserez, mieux votre widget sera compris par les techniques d'assistance. Dans notre cas, nous limiterons notre utilisation à un seul attribut : `aria-selected`.
 
diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/index.md b/files/fr/learn/forms/how_to_structure_a_web_form/index.md
index a0a7954b36..6b79debae1 100644
--- a/files/fr/learn/forms/how_to_structure_a_web_form/index.md
+++ b/files/fr/learn/forms/how_to_structure_a_web_form/index.md
@@ -20,7 +20,7 @@ Les bases vues, nous examinons maintenant plus en détail les éléments utilis�
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Notions concernant les ordinateurs et les
         <a href="/fr/docs/Learn/HTML/Introduction_to_HTML"
@@ -29,7 +29,7 @@ Les bases vues, nous examinons maintenant plus en détail les éléments utilis�
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Comprendre comment structurer les formulaires HTML et leur adjoindre la
         sémantique pour qu'ils soient utilisables et accessibles.
@@ -82,7 +82,7 @@ Voici un petit exemple :
 
 > **Note :** Vous trouverez cet exemple dans [fieldset-legend.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html) (voir [directement aussi](https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html)).
 
-En lisant le formulaire ci-dessus, un lecteur d'écran dira « Taille du jus de fruit : petit » pour le premier widget, « Taille du jus de fruit : moyenne » pour le second, et « Taille du jus de fruit : grande » pour le troisième.
+En lisant le formulaire ci-dessus, un lecteur d'écran dira «&nbsp;Taille du jus de fruit&nbsp;: petit&nbsp;» pour le premier widget, «&nbsp;Taille du jus de fruit&nbsp;: moyenne&nbsp;» pour le second, et «&nbsp;Taille du jus de fruit&nbsp;: grande&nbsp;» pour le troisième.
 
 Le scenario d'utilisation du lecteur dans cet exemple est l'un des plus importants. Chaque fois que vous avez un ensemble de boutons radio, vous devez les imbriquer dans un élément {{HTMLElement("fieldset")}}. Il y a d'autres scenarii d'utilisation, et en général l'élément {{HTMLElement("fieldset")}} peut aussi être utilisé pour partager un formulaire. Idéalement, les formulaires longs doivent être éclatés sur plusieurs pages, mais si un formulaire long doit être sur une page unique, le fait de placer les différentes sections connexes dans de différents {{HTMLElement("fieldset")}} peut en améliorer l'utilisation.
 
@@ -90,31 +90,31 @@ En raison de son influence sur les techniques d'assistance, l'élément {{HTMLEl
 
 ## L'élément \<label>
 
-Comme nous l'avons vu dans l'article précédent, l'élément {{HTMLElement("label")}} est le moyen naturel de définir une étiquette pour un widget de formulaire HTML. C'est l'élément le plus important si vous voulez créer des formulaires accessibles — lorsqu'ils sont correctement implémentés, les lecteurs d'écran énonceront l'étiquette d'un élément de formulaire selon toutes les instructions associées. Prenons cet exemple, que nous avons vu dans l'article précédent :
+Comme nous l'avons vu dans l'article précédent, l'élément {{HTMLElement("label")}} est le moyen naturel de définir une étiquette pour un widget de formulaire HTML. C'est l'élément le plus important si vous voulez créer des formulaires accessibles — lorsqu'ils sont correctement implémentés, les lecteurs d'écran énonceront l'étiquette d'un élément de formulaire selon toutes les instructions associées. Prenons cet exemple, que nous avons vu dans l'article précédent&nbsp;:
 
 ```html
-<label for="name">Nom :</label> <input type="text" id="name" name="user_name">
+<label for="name">Nom&nbsp;:</label> <input type="text" id="name" name="user_name">
 ```
 
-Avec un élément `<label>` correctement associé à `<input>` par l'intermédiaire respectivement des attributs `for` et `id` (l'attribut `for` de \<label> référence l'attibut `id` du widget correspondant), un lecteur d'écran lira et dira quelque chose comme « Nom, texte indiqué ».
+Avec un élément `<label>` correctement associé à `<input>` par l'intermédiaire respectivement des attributs `for` et `id` (l'attribut `for` de \<label> référence l'attibut `id` du widget correspondant), un lecteur d'écran lira et dira quelque chose comme «&nbsp;Nom, texte indiqué&nbsp;».
 
-Si l'étiquette n'est pas correctement paramétrée, le lecteur d'écran dira quelque chose comme « Texte édité vierge », ce qui n'est pas utile du tout.
+Si l'étiquette n'est pas correctement paramétrée, le lecteur d'écran dira quelque chose comme «&nbsp;Texte édité vierge&nbsp;», ce qui n'est pas utile du tout.
 
-Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi :
+Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi&nbsp;:
 
 ```html
 <label for="name">
-  Nom : <input type="text" id="name" name="user_name">
+  Nom&nbsp;: <input type="text" id="name" name="user_name">
 </label>
 ```
 
 Toutefois, même dans ce cas, il est considéré de bonne pratique de définir l'attribut `for` parce que certaines techniques d'assistance ne font pas implicitement le lien entre les étiquettes et les widgets.
 
-### Les étiquettes peuvent être cliquées, aussi !
+### Les étiquettes peuvent être cliquées, aussi&nbsp;!
 
-Autre avantage de bien configurer les étiquettes : vous pouvez cliquer sur l'étiquette pour activer le widget correspondant, dans tous les navigateurs. Utile, par exemple, pour des entrées de texte : vous pouvez cliquer sur l'étiquette ou la zone de texte pour y obtenir le curseur, mais c'est encore plus utile pour les boutons radio et les cases à cocher — la surface active au clic pour une telle commande peut être très réduite, il est donc utile de l'agrandir autant que possible.
+Autre avantage de bien configurer les étiquettes&nbsp;: vous pouvez cliquer sur l'étiquette pour activer le widget correspondant, dans tous les navigateurs. Utile, par exemple, pour des entrées de texte&nbsp;: vous pouvez cliquer sur l'étiquette ou la zone de texte pour y obtenir le curseur, mais c'est encore plus utile pour les boutons radio et les cases à cocher — la surface active au clic pour une telle commande peut être très réduite, il est donc utile de l'agrandir autant que possible.
 
-Par exemple :
+Par exemple&nbsp;:
 
 ```html
 <form>
@@ -135,43 +135,43 @@ Par exemple :
 
 En fait, il est possible d'associer plusieurs étiquettes à un seul widget, mais ce n'est pas une bonne idée car certaines techniques d'assistance peuvent éprouver du trouble pour leur gestion. Dans le cas d'étiquettes multiples, vous devez incorporer le widget et son étiquette dans un seul élément {{htmlelement("label")}}.
 
-Considérons cet exemple :
+Considérons cet exemple&nbsp;:
 
 ```html
 <p>Les champs obligatoires sont suivis de <abbr title="required">*</abbr>.</p>
 
-<!-- Donc ceci : -->
+<!-- Donc ceci&nbsp;: -->
 <div>
-  <label for="username">Nom :</label>
+  <label for="username">Nom&nbsp;:</label>
   <input type="text" name="username">
   <label for="username"><abbr title="required">*</abbr></label>
 </div>
 
-<!-- sera mieux programmé ainsi : -->
+<!-- sera mieux programmé ainsi&nbsp;: -->
 <div>
   <label for="username">
-    <span>Nom :</span>
+    <span>Nom&nbsp;:</span>
     <input id="username" type="text" name="username">
     <abbr title="required">*</abbr>
   </label>
 </div>
 
-<!-- mais ceci est probablement encore meilleur : -->
+<!-- mais ceci est probablement encore meilleur&nbsp;: -->
 <div>
-  <label for="username">Nom :<abbr title="required">*</abbr></label>
+  <label for="username">Nom&nbsp;:<abbr title="required">*</abbr></label>
   <input id="username" type="text" name="username">
 </div>
 ```
 
-Le paragraphe du haut définit la règle pour les éléments obligatoires. Ce doit être au début pour s'assurer que les techniques d'assistance telles que les lecteurs d'écran l'afficheront ou le vocaliseront à l'utilisateur avant qu'il ne trouve un élément obligatoire. Ainsi, ils sauront ce que signifie l'astérisque. Un lecteur d'écran mentionnera l'astérisque en disant « astérisque » ou « obligatoire », selon les réglages du lecteur d'écran — dans tous les cas, ce qui sera dit est clairement précisé dans le premier paragraphe.
+Le paragraphe du haut définit la règle pour les éléments obligatoires. Ce doit être au début pour s'assurer que les techniques d'assistance telles que les lecteurs d'écran l'afficheront ou le vocaliseront à l'utilisateur avant qu'il ne trouve un élément obligatoire. Ainsi, ils sauront ce que signifie l'astérisque. Un lecteur d'écran mentionnera l'astérisque en disant «&nbsp;astérisque&nbsp;» ou «&nbsp;obligatoire&nbsp;», selon les réglages du lecteur d'écran — dans tous les cas, ce qui sera dit est clairement précisé dans le premier paragraphe.
 
-- Dans le premier exemple, l'étiquette n'est pas lue du tout avec l'entrée — vous obtenez simplement « texte édité vierge », puis les étiquettes réelles sont lues séparément. Les multiples éléments \<label> embrouillent le lecteur d'écran.
-- Dans le deuxième exemple, les choses sont un peu plus claires — l'étiquette lue en même temps que l'entrée est « nom astérisque nom éditer texte », et les étiquettes sont toujours lues séparément. Les choses sont encore un peu confuses, mais c'est un peu mieux cette fois parce que l'entrée a une étiquette associée.
-- Le troisième exemple est meilleur — les véritables étiquettes sont toutes lues ensemble, et l'étiquette énoncée avec l'entrée est « nom astériquer éditer texte ».
+- Dans le premier exemple, l'étiquette n'est pas lue du tout avec l'entrée — vous obtenez simplement «&nbsp;texte édité vierge&nbsp;», puis les étiquettes réelles sont lues séparément. Les multiples éléments \<label> embrouillent le lecteur d'écran.
+- Dans le deuxième exemple, les choses sont un peu plus claires — l'étiquette lue en même temps que l'entrée est «&nbsp;nom astérisque nom éditer texte&nbsp;», et les étiquettes sont toujours lues séparément. Les choses sont encore un peu confuses, mais c'est un peu mieux cette fois parce que l'entrée a une étiquette associée.
+- Le troisième exemple est meilleur — les véritables étiquettes sont toutes lues ensemble, et l'étiquette énoncée avec l'entrée est «&nbsp;nom astériquer éditer texte&nbsp;».
 
 > **Note :** Vous pouvez obtenir des résultats légérement différents, selon votre lecteur d'écran. Ce qui précéde a été testé avec VoiceOver (et NVDA se comporte de la même façon). Nous aimerions avoir un retour sur vos expériences également.
 
-> **Note :** Vous trouverez cet exemple sur GitHub dans [required-labels.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html)). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID !
+> **Note :** Vous trouverez cet exemple sur GitHub dans [required-labels.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html)). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID&nbsp;!
 
 ## Structures HTML courantes dans les formulaires
 
@@ -185,18 +185,18 @@ Par-dessus tout, il vous appartient de trouver un style où vous vous sentez à
 
 Chaque groupe de fonctionnalités séparées doit être contenu dans un élément {{htmlelement("section")}} et les boutons radio dans un élément {{htmlelement("fieldset")}}.
 
-### Apprentissage actif : construire une structure de formulaire
+### Apprentissage actif&nbsp;: construire une structure de formulaire
 
-Mettons ces idées en pratique et construisons une structure de formulaire un peu plus sophistiquée — un formulaire de paiement. Il contiendra un certain nombre de types de widgets que vous ne comprenez pas encore — ne vous inquiétez pas pour l'instant ; vous découvrirez comment ils fonctionnent dans l'article suivant ([Les widgets natifs pour formulaire](/fr/docs/Learn/HTML/Forms/The_native_form_widgets)). Pour l'instant, lisez attentivement les descriptions en suivant les instructions ci-dessous et commencez à vous faire une idée des éléments enveloppes que nous utilisons pour structurer le formulaire, et pourquoi.
+Mettons ces idées en pratique et construisons une structure de formulaire un peu plus sophistiquée — un formulaire de paiement. Il contiendra un certain nombre de types de widgets que vous ne comprenez pas encore — ne vous inquiétez pas pour l'instant ; vous découvrirez comment ils fonctionnent dans l'article suivant ([Les widgets natifs pour formulaire](/fr/docs/Learn/HTML/Forms/The_native_form_widgets)). Pour l'instant, lisez attentivement les descriptions en suivant les instructions ci-dessous et commencez à vous faire une idée des éléments enveloppes que nous utilisons pour structurer le formulaire, et pourquoi.
 
 1.  Pour commencer, faites une copie locale de notre [fichier modèle vierge](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et des [CSS pour notre formulaire de paiement](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css) dans un nouveau répertoire.
-2.  Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML :
+2.  Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML&nbsp;:
 
     ```html
     <link href="payment-form.css" rel="stylesheet">
     ```
 
-3.  Ensuite, commencez le formulaire en ajoutant un élément {{htmlelement("form")}} :
+3.  Ensuite, commencez le formulaire en ajoutant un élément {{htmlelement("form")}}&nbsp;:
 
     ```html
     <form>
@@ -204,7 +204,7 @@ Mettons ces idées en pratique et construisons une structure de formulaire un pe
     </form>
     ```
 
-4.  Entre les balises `<form>`, ajoutez un en‑tête et un paragraphe pour informer les utilisateurs comment sont marqués les champs obligatoires :
+4.  Entre les balises `<form>`, ajoutez un en‑tête et un paragraphe pour informer les utilisateurs comment sont marqués les champs obligatoires&nbsp;:
 
     ```html
     <h1>Formulaire de paiement</h1>
@@ -235,21 +235,21 @@ Mettons ces idées en pratique et construisons une structure de formulaire un pe
         </fieldset>
         <p>
           <label for="name">
-            <span>Nom : </span>
+            <span>Nom&nbsp;: </span>
             <strong><abbr title="required">*</abbr></strong>
           </label>
           <input type="text" id="name" name="username">
         </p>
         <p>
           <label for="mail">
-            <span>e-mail :</span>
+            <span>e-mail&nbsp;:</span>
             <strong><abbr title="required">*</abbr></strong>
           </label>
           <input type="email" id="mail" name="usermail">
         </p>
         <p>
           <label for="pwd">
-            <span>Mot de passe :</span>
+            <span>Mot de passe&nbsp;:</span>
             <strong><abbr title="required">*</abbr></strong>
           </label>
           <input type="password" id="pwd" name="password">
@@ -257,14 +257,14 @@ Mettons ces idées en pratique et construisons une structure de formulaire un pe
     </section>
     ```
 
-6.  Nous arrivons maintenant à la deuxième `<section>` de notre formulaire — l'information de paiement. Ici nous avons trois widgets distincts avec leur étiquette, chacun contenu dans un paragraphe `<p>`. Le premier est un menu déroulant ({{htmlelement("select")}}) pour le choix du type de la carte de crédit. Le deuxième  est un élément `<input>` de type nombre pour entrer le numéro de la carte de crédit. Le dernier est un élément `<input>` de type `date` pour entrer la date d'expiration de la carte de crédit (il sera accompagné d'un widget dateur pour les navigateurs prenant en charge cette fonctionnalité, et sera un simple champ textuel pour les navigateurs ne la prenant pas en charge). À nouveau, entrez ce qui suit après la section ci‑dessus :
+6.  Nous arrivons maintenant à la deuxième `<section>` de notre formulaire — l'information de paiement. Ici nous avons trois widgets distincts avec leur étiquette, chacun contenu dans un paragraphe `<p>`. Le premier est un menu déroulant ({{htmlelement("select")}}) pour le choix du type de la carte de crédit. Le deuxième est un élément `<input>` de type nombre pour entrer le numéro de la carte de crédit. Le dernier est un élément `<input>` de type `date` pour entrer la date d'expiration de la carte de crédit (il sera accompagné d'un widget dateur pour les navigateurs prenant en charge cette fonctionnalité, et sera un simple champ textuel pour les navigateurs ne la prenant pas en charge). À nouveau, entrez ce qui suit après la section ci‑dessus&nbsp;:
 
     ```html
     <section>
         <h2>Informations de paiement</h2>
         <p>
           <label for="card">
-            <span>Type de carte :</span>
+            <span>Type de carte&nbsp;:</span>
           </label>
           <select id="card" name="usercard">
             <option value="visa">Visa</option>
@@ -274,14 +274,14 @@ Mettons ces idées en pratique et construisons une structure de formulaire un pe
         </p>
         <p>
           <label for="number">
-            <span>Numéro de carte :</span>
+            <span>Numéro de carte&nbsp;:</span>
             <strong><abbr title="required">*</abbr></strong>
           </label>
           <input type="text" id="number" name="cardnumber">
         </p>
         <p>
           <label for="date">
-            <span>Validité :</span>
+            <span>Validité&nbsp;:</span>
             <strong><abbr title="required">*</abbr></strong>
             <em>format mm/aa</em>
           </label>
@@ -290,7 +290,7 @@ Mettons ces idées en pratique et construisons une structure de formulaire un pe
     </section>
     ```
 
-7.  La dernière section est plus simple ; elle ne contient qu'un bouton {{htmlelement("button")}} de type `submit`, pour adresser les données du formulaire. Ajoutez ceci au bas du formulaire :
+7.  La dernière section est plus simple&nbsp;; elle ne contient qu'un bouton {{htmlelement("button")}} de type `submit`, pour adresser les données du formulaire. Ajoutez ceci au bas du formulaire&nbsp;:
 
     ```html
     <p> <button type="submit">Valider le paiement</button> </p>
@@ -302,7 +302,7 @@ Vous pouvez voir le formulaire terminé en action ci‑dessous (vous le trouvere
 
 ## Résumé
 
-Nous savons maintenant ce qu'il faut faire pour structurer de manière appropriée un formulaire HTML ; l'article suivant approfondira la mise en œuvre  des divers types de widgets pour formulaire pour collecter les informations utilisateur.
+Nous savons maintenant ce qu'il faut faire pour structurer de manière appropriée un formulaire HTML&nbsp;; l'article suivant approfondira la mise en œuvre des divers types de widgets pour formulaire pour collecter les informations utilisateur.
 
 ## Voir aussi
 
diff --git a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md
index 01405dcce2..f9fe8ecdf5 100644
--- a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md
+++ b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md
@@ -6,9 +6,9 @@ original_slug: Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}
 
-Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le « navigateur historique ». Oui, admettons‑le, si on dit « navigateur historique », nous pensons tous aux anciennes versions d'Internet Explorer ... mais elles sont loin d'être les seules. Les premières versions de Firefox, comme la [version ESR,](http://www.mozilla.org/en-US/firefox/organizations/) sont aussi des « navigateurs historiques ». Et dans le monde du mobile ? Quand ni le navigateur ni l'OS ne peut être mis à jour? Oui, il y a beaucoup de vieux smartphones Android ou des iPhones dont le navigateur par défaut n'est pas à jour. Ceux-ci sont aussi des « navigateurs historiques ».
+Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le «&nbsp;navigateur historique&nbsp;». Oui, admettons‑le, si on dit «&nbsp;navigateur historique&nbsp;», nous pensons tous aux anciennes versions d'Internet Explorer ... mais elles sont loin d'être les seules. Les premières versions de Firefox, comme la [version ESR,](http://www.mozilla.org/en-US/firefox/organizations/) sont aussi des «&nbsp;navigateurs historiques&nbsp;». Et dans le monde du mobile ? Quand ni le navigateur ni l'OS ne peut être mis à jour? Oui, il y a beaucoup de vieux smartphones Android ou des iPhones dont le navigateur par défaut n'est pas à jour. Ceux-ci sont aussi des «&nbsp;navigateurs historiques&nbsp;».
 
-Malheureusement, parcourir cette jungle est une facette du métier. Mais opportunément, il existe quelques astuces pour nous aider à résoudre 80 % des problèmes causés par ces vieilles versions de navigateur.
+Malheureusement, parcourir cette jungle est une facette du métier. Mais opportunément, il existe quelques astuces pour nous aider à résoudre 80 % des problèmes causés par ces vieilles versions de navigateur.
 
 ## S'informer sur les difficultés
 
@@ -16,9 +16,9 @@ En fait, lire la documentation sur ces navigateurs est la chose la plus importan
 
 ### Documentation du fournisseur du navigateur
 
-- Mozilla : vous êtes au bon endroit, explorez juste MDN
-- Microsoft : [Documentation sur la prise en charge de la norme par Internet Explorer](http://msdn.microsoft.com/en-us/library/ff410218%28v=vs.85%29.aspx)
-- WebKit : comme il y a plusieurs versions de ce moteur, les choses se compliquent :
+- Mozilla&nbsp;: vous êtes au bon endroit, explorez juste MDN
+- Microsoft&nbsp;: [Documentation sur la prise en charge de la norme par Internet Explorer](http://msdn.microsoft.com/en-us/library/ff410218%28v=vs.85%29.aspx)
+- WebKit&nbsp;: comme il y a plusieurs versions de ce moteur, les choses se compliquent&nbsp;:
 
   - [le Blog WebKit](https://www.webkit.org/blog/) et [Planet WebKit](http://planet.webkit.org/) rassemblent les meilleurs articles par les déveoppeurs WebKit.
   - [l](https://www.chromestatus.com/features)e site État de la p[lateforme Chrome](https://www.chromestatus.com/features) est aussi importante.
@@ -29,13 +29,13 @@ En fait, lire la documentation sur ces navigateurs est la chose la plus importan
 - [Can I Use](http://caniuse.com) a des informations sur la prise en charge des techniques avancées.
 - [Quirks Mode](http://www.quirksmode.org) est une surprenante ressource sur la compatibilité des divers navigateurs. [La partie sur les mobiles](http://www.quirksmode.org/mobile/) est la meilleure actuellement disponible.
 - [Position Is Everything](http://positioniseverything.net/) est la meilleure ressource disponible sur les bogues de rendu dans les navigateurs historiques et leur solution de contournement (le cas échéant).
-- [Mobile HTML5](http://mobilehtml5.org) dispose d'informations de compatibilité pour une large gamme de navigateurs pour mobiles, et pas seulement pour le « top 5 » (y compris Nokia, Amazon et Blackberry).
+- [Mobile HTML5](http://mobilehtml5.org) dispose d'informations de compatibilité pour une large gamme de navigateurs pour mobiles, et pas seulement pour le «&nbsp;top 5&nbsp;» (y compris Nokia, Amazon et Blackberry).
 
 ## Rendre les choses simples
 
 
 
-Comme les [formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) impliquent des interactions complexes, une règle empirique : [restez aussi simple que possible](https://fr.wikipedia.org/wiki/Principe_KISS). Il y a tant de cas où nous voudrions que des formulaires soient  « plus beaux » ou « avec des fonctionnalités avancées » ! Mais construire des formulaires HTML efficaces n'est pas une question de design ou de technique. Pour rappel, prenez le temps de lire cet article sur l'[ergonomie des formulaires sur UX For The Masses](http://www.uxforthemasses.com/forms-usability/) (en anglais).
+Comme les [formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) impliquent des interactions complexes, une règle empirique&nbsp;: [restez aussi simple que possible](https://fr.wikipedia.org/wiki/Principe_KISS). Il y a tant de cas où nous voudrions que des formulaires soient  «&nbsp;plus beaux » ou «&nbsp;avec des fonctionnalités avancées&nbsp;»&nbsp;! Mais construire des formulaires HTML efficaces n'est pas une question de design ou de technique. Pour rappel, prenez le temps de lire cet article sur l'[ergonomie des formulaires sur UX For The Masses](http://www.uxforthemasses.com/forms-usability/) (en anglais).
 
 ### La simplification élégante est la meilleure amie du développeur Web
 
@@ -49,8 +49,8 @@ Les nouveaux types d'entrées amenés par HTML5 sont très sympas car la façon
 
 ```html
 <label for="myColor">
- Choisir une couleur
-  <input type="color" id="myColor" name="color">
+ Choisir une couleur
+  <input type="color" id="myColor" name="color">
 </label>
 ```
 
@@ -81,7 +81,7 @@ Les nouveaux types d'entrées amenés par HTML5 sont très sympas car la façon
 
 #### Sélecteurs d'attributs CSS
 
-Les [sélecteurs d'attributs CSS](/fr/docs/Web/CSS/Sélecteurs_d_attribut "/en-US/docs/CSS/Attribute_selectors") sont très utiles avec les [formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires), mais certains navigateurs historiques ne les prennent pas en charge. Dans ce cas, il est courant de doubler le type avec une classe équivalente :
+Les [sélecteurs d'attributs CSS](/fr/docs/Web/CSS/Sélecteurs_d_attribut "/en-US/docs/CSS/Attribute_selectors") sont très utiles avec les [formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires), mais certains navigateurs historiques ne les prennent pas en charge. Dans ce cas, il est courant de doubler le type avec une classe équivalente&nbsp;:
 
 ```html
 <input type="number" class="number">
@@ -97,7 +97,7 @@ input.number {
 }
 ```
 
-Notez que ce qui suit n'est pas utile (car redondant) et peut échouer dans certains navigateurs :
+Notez que ce qui suit n'est pas utile (car redondant) et peut échouer dans certains navigateurs&nbsp;:
 
 ```css
 input[type=number],
@@ -109,12 +109,12 @@ input.number {
 
 #### Boutons et formulaires
 
-Il y a deux manières de définir un bouton dans un formulaire HTML :
+Il y a deux manières de définir un bouton dans un formulaire HTML&nbsp;:
 
 - un élément {{HTMLElement("input")}} avec un attribut {htmlattrxref("type","input")}} défini avec une des valeurs `button`, `submit`, `reset` ou `image`
 - un élément {{HTMLElement("button")}}
 
-L'élément {{HTMLElement("input")}} peut rendre les choses compliquées si vous voulez appliquer des CSS avec un sélecteur d'élément :
+L'élément {{HTMLElement("input")}} peut rendre les choses compliquées si vous voulez appliquer des CSS avec un sélecteur d'élément&nbsp;:
 
 ```html
 <input type="button" class="button" value="Cliquez‑moi">
@@ -132,19 +132,19 @@ input.button {
 }
 
 input.button {
-  /* Avec ceci non plus ! En fait, il n'y a pas de méthode standard pour
+  /* Avec ceci non plus&nbsp;! En fait, il n'y a pas de méthode standard pour
      le faire quel que soit le navigateur */
   border: auto;
 }
 ```
 
-L'élément {{HTMLElement("button")}} présente deux problèmes potentiels :
+L'élément {{HTMLElement("button")}} présente deux problèmes potentiels&nbsp;:
 
 - un bogue dans certaines anciennes versions d'Internet Explorer. Lorsque l'utilisateur clique sur le bouton, ce n'est pas le contenu de l'attribut {{htmlattrxref("value", "button")}} qui est envoyé, mais le contenu HTML disponible entre balises de début et de fin de l'élément {{HTMLElement("button")}}. Ce n'est un problème que si vous voulez envoyer une telle valeur, par exemple si le traitement des données dépend du bouton sur lequel l'utilisateur clique.
-- certains navigateurs très anciens n'utilisent pas `submit` comme valeur par défaut  pour l'attribut {{htmlattrxref("type","button")}}, donc il est recommandé de toujours définir l'attribut {{htmlattrxref("type","button")}} pour les éléments {{HTMLElement("button")}}.
+- certains navigateurs très anciens n'utilisent pas `submit` comme valeur par défaut pour l'attribut {{htmlattrxref("type","button")}}, donc il est recommandé de toujours définir l'attribut {{htmlattrxref("type","button")}} pour les éléments {{HTMLElement("button")}}.
 
 ```html
-<!-- Cliquer sur ce boutton envoie « <em>Do A</em> » au lieu de « A » dans certains cas -->
+<!-- Cliquer sur ce boutton envoie «&nbsp;<em>Do A</em>&nbsp;» au lieu de «&nbsp;A&nbsp;» dans certains cas -->
 <button type="submit" name="IWantTo" value="A">
   <em>Do A</em>
 </button>
@@ -162,7 +162,7 @@ Bien que JavaScript soit un langage de programmation remarquable pour les naviga
 
 ### JavaScript non obstructif
 
-Un des plus gros problèmes est la disponibilité des API. Pour cette raison, il est considéré comme de bonne pratique de travailler avec du JavaScript « non obstructif ». C'est un modèle de développement défini par deux obligations :
+Un des plus gros problèmes est la disponibilité des API. Pour cette raison, il est considéré comme de bonne pratique de travailler avec du JavaScript «&nbsp;non obstructif&nbsp;». C'est un modèle de développement défini par deux obligations&nbsp;:
 
 - une séparation stricte entre structure et comportement.
 - si le fil du code casse, le contenu et les fonctionnalités de base doivent rester accessibles et utilisables.
@@ -171,11 +171,11 @@ Un des plus gros problèmes est la disponibilité des API. Pour cette raison, il
 
 ### La bibliothèque Modernizr
 
-Dans de nombreux cas, une bonne prothèse d'émulation (« polyfill ») peut aider en fournissant une API manquante. Un « [polyfill »](http://remysharp.com/2010/10/08/what-is-a-polyfill/) est un petit morceau de JavaScript qui « remplit un trou » dans les fonctionnalités des navigateurs historiques. Bien qu'ils puissent être utilisés pour améliorer la prise en charge de n'importe quelle fonctionnalité, leur utilisation dans le JavaScript est moins risquée que dans les CSS ou le HTML ; il existe de nombreux cas où JavaScript peut casser (problèmes de réseau, conflits de script, etc.). Mais avec le JavaScript, à condition de travailler avec un JavaScript non obstructif, si les polyfills manquent, ce ne sera pas grave.
+Dans de nombreux cas, une bonne prothèse d'émulation («&nbsp;polyfill&nbsp;») peut aider en fournissant une API manquante. Un «&nbsp;[polyfill »](http://remysharp.com/2010/10/08/what-is-a-polyfill/) est un petit morceau de JavaScript qui «&nbsp;remplit un trou&nbsp;» dans les fonctionnalités des navigateurs historiques. Bien qu'ils puissent être utilisés pour améliorer la prise en charge de n'importe quelle fonctionnalité, leur utilisation dans le JavaScript est moins risquée que dans les CSS ou le HTML ; il existe de nombreux cas où JavaScript peut casser (problèmes de réseau, conflits de script, etc.). Mais avec le JavaScript, à condition de travailler avec un JavaScript non obstructif, si les polyfills manquent, ce ne sera pas grave.
 
-La meilleure façon de remplir un trou d'API manquante consiste à utiliser la bibliothèque [Modernizr](http://modernizr.com) et son projet dérivé : [YepNope](http://yepnopejs.com). Modernizr est une bibliothèque qui vous permet de tester la disponibilité d'une fonctionnalité pour une action en accord. YepNope est une bibliothèqe de chargements conditionnels.
+La meilleure façon de remplir un trou d'API manquante consiste à utiliser la bibliothèque [Modernizr](http://modernizr.com) et son projet dérivé&nbsp;: [YepNope](http://yepnopejs.com). Modernizr est une bibliothèque qui vous permet de tester la disponibilité d'une fonctionnalité pour une action en accord. YepNope est une bibliothèqe de chargements conditionnels.
 
-Voici un exemple :
+Voici un exemple&nbsp;:
 
 ```js
 Modernizr.load({
@@ -198,17 +198,17 @@ Modernizr.load({
 });
 ```
 
-L'équipe de Modernizr fait une maintenance opportune de grande liste de « [polyfills »](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Prenez celui dont vous avez besoin.
+L'équipe de Modernizr fait une maintenance opportune de grande liste de «&nbsp;[polyfills »](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Prenez celui dont vous avez besoin.
 
-> **Note :** Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de [la documentation de Modernizr](http://modernizr.com/docs/).
+> **Note :** Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de [la documentation de Modernizr](http://modernizr.com/docs/).
 
 ### Faites attention aux performances
 
-Même si des scripts comme Modernizr sont très attentifs aux performances, le chargement d'un polyfill de 200 kilooctets peut affecter les performances de votre application.  Ceci est particulièrement critique avec les navigateurs historiques ; beaucoup d'entre eux ont un moteur JavaScript très lent qui peut rendre l'exécution de tous vos polyfills pénibles pour l'utilisateur. La performance est un sujet en soi ; les navigateurs historiques y sont très sensibles : fondamentalement, ils sont lents et ils ont plus besoin de polyfills, et donc ils ont besoin de traiter encore plus de JavaScript. Ils sont donc doublement surchargés par rapport aux navigateurs modernes. Testez votre code avec les navigateurs historiques pour voir comment leur fonctionnement en conditions réelles. Parfois, l'abandon de certaines fonctionnalités amène un meilleur ressenti pour l'utilisateur que d'avoir exactement la même fonctionnalité dans tous les navigateurs. Dernier rappel : pensez toujours à l'utilisateur final.
+Même si des scripts comme Modernizr sont très attentifs aux performances, le chargement d'un polyfill de 200 kilooctets peut affecter les performances de votre application.  Ceci est particulièrement critique avec les navigateurs historiques ; beaucoup d'entre eux ont un moteur JavaScript très lent qui peut rendre l'exécution de tous vos polyfills pénibles pour l'utilisateur. La performance est un sujet en soi&nbsp;; les navigateurs historiques y sont très sensibles : fondamentalement, ils sont lents et ils ont plus besoin de polyfills, et donc ils ont besoin de traiter encore plus de JavaScript. Ils sont donc doublement surchargés par rapport aux navigateurs modernes. Testez votre code avec les navigateurs historiques pour voir comment leur fonctionnement en conditions réelles. Parfois, l'abandon de certaines fonctionnalités amène un meilleur ressenti pour l'utilisateur que d'avoir exactement la même fonctionnalité dans tous les navigateurs. Dernier rappel&nbsp;: pensez toujours à l'utilisateur final.
 
 ## Conclusion
 
-Comme vous pouvez le constater, opérer avec des navigateurs historiques  n'est pas qu'une question de formulaires. C'est tout un ensemble de techniques ; mais les maîtriser toutes dépasserait le cadre de cet article.
+Comme vous pouvez le constater, opérer avec des navigateurs historiques n'est pas qu'une question de formulaires. C'est tout un ensemble de techniques&nbsp;; mais les maîtriser toutes dépasserait le cadre de cet article.
 
 Si vous avez lu tous les articles de ce [guide à propos des formulaires en HTML](/fr/docs/Web/Guide/HTML/Forms_in_HTML), vous devriez maintenant être à l'aise avec leur utilisation. Si vous trouvez de nouvelles techniques ou de nouvelles astuces, aidez‑nous à [améliorer ce guide](/fr/docs/MDN/Débuter_sur_MDN).
 
diff --git a/files/fr/learn/forms/index.md b/files/fr/learn/forms/index.md
index 9f5717dd41..1a5b8a4534 100644
--- a/files/fr/learn/forms/index.md
+++ b/files/fr/learn/forms/index.md
@@ -17,7 +17,7 @@ Ce guide est constitué d'une série d'articles qui vous aideront à maîtriser
 
 ## Prérequis
 
-Avant de vous lancer dans  ce module, vous devez au moins avoir travaillé notre [Introduction au HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML). À partir de là, vous devriez trouver les {{anch("Éléments de base")}} faciles à comprendre et également être capable de vous servir du guide pour  les [widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs).
+Avant de vous lancer dans ce module, vous devez au moins avoir travaillé notre [Introduction au HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML). À partir de là, vous devriez trouver les {{anch("Éléments de base")}} faciles à comprendre et également être capable de vous servir du guide pour les [widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs).
 
 Le reste du module est toutefois un peu plus difficile — il est facile de placer des widgets de formulaire dans une page, mais vous ne pourrez pas en faire vraiment quelque chose sans utiliser quelques fonctionnalités plus avancées, les CSS et le JavaScript. C'est pourquoi, avant de regarder ces autres parties, nous vous recommandons de faire un détour et de procéder d'abord à l'étude des [CSS](/fr/Apprendre/CSS/Introduction_à_CSS) et du [JavaScript](/fr/docs/Apprendre/JavaScript).
 
@@ -30,7 +30,7 @@ Le reste du module est toutefois un peu plus difficile — il est facile de plac
 - [Comment structurer un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML "/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML")
   - : Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.
 
-## Quels sont les widgets pour formulaire disponibles ?
+## Quels sont les widgets pour formulaire disponibles&nbsp;?
 
 - [Les widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs)
   - : Nous examinons maintenant en détail les fonctionnalités des widgets pour formulaire, en regardant quelles sont les options disponibles pour collecter différentes types de données.
@@ -38,16 +38,16 @@ Le reste du module est toutefois un peu plus difficile — il est facile de plac
 ## Validation et soumission des données de formulaires
 
 - [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires)
-  - : Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.
+  - : Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination&nbsp;? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.
 - [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires)
-  - : Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont de format correct pour pouvoir les traiter correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser nos applications. La validation et la soumission des données des formulaires vous aidera à remplir ces objectifs — cet article indique ce qui est nécessaire de savoir.
+  - : Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont de format correct pour pouvoir les traiter correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser nos applications. La validation et la soumission des données des formulaires vous aidera à remplir ces objectifs — cet article indique ce qui est nécessaire de savoir.
 
 ## Guides avancés
 
 - [Comment construire des widgets de formulaires personnalisés](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés)
   - : Nous allons voir quelques cas où les widgets natifs ne donnent pas ce dont vous avez besoin, pour des raisons fonctionnelles ou de style par exemple. Dans de tels cas, vous pouvez avoir besoin de construire vous même un widget de formulaire en dehors du HTML brut. Cet article explique comment faire, ainsi que les considérations à prendre en compte ce faisant, le tout à l'aide de l'étude d'un cas particulier.
 - [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript)
-  - : Cet article examine les manières d'utiliser un formulaire pour assembler une requête HTTP et l'adresser par l'intermédiaire d'un JavaScript personnalisé, au lieu d'une soumission standard de formulaire. Il examine aussi pourquoi vous pouvez souhaiter faire ainsi et ce que cela implique corrélativement. (Voir aussi « Utilisation des objets FormData ».)
+  - : Cet article examine les manières d'utiliser un formulaire pour assembler une requête HTTP et l'adresser par l'intermédiaire d'un JavaScript personnalisé, au lieu d'une soumission standard de formulaire. Il examine aussi pourquoi vous pouvez souhaiter faire ainsi et ce que cela implique corrélativement. (Voir aussi «&nbsp;Utilisation des objets FormData&nbsp;».)
 - [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers)
   - : Cet article couvre les détections de fonctionnalité, etc. Elles doivent être redirigées dans le module de tests croisés entre navigateurs, car la même problématique y sera mieux traitée.
 
diff --git a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md
index 4834f1872d..942766ea2e 100644
--- a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md
+++ b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md
@@ -21,7 +21,7 @@ Les tables de compatibilité suivantes tentent de résumer l'état de la prise e
 
 ### Valeurs
 
-Pour chaque propriété, il y a quatre valeurs possibles :
+Pour chaque propriété, il y a quatre valeurs possibles&nbsp;:
 
 - OUI
   - : La prise en charge de la propriété est raisonnablement cohérente d'un navigateur à l'autre. Il se peut que vous soyez encore confronté à des effets collatéraux étranges dans certains cas limites.
@@ -34,7 +34,7 @@ Pour chaque propriété, il y a quatre valeurs possibles :
 
 ### Rendu
 
-Pour chaque propriété il y a deux rendus possibles :
+Pour chaque propriété il y a deux rendus possibles&nbsp;:
 
 - N (Normal)
   - : Indique que la propriété est appliquée telle quelle.
@@ -91,7 +91,7 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global
       <th scope="row">{{cssxref("width")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
@@ -137,7 +137,7 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
@@ -189,13 +189,13 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
@@ -221,19 +221,19 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td>Partiel</td>
       <td>Partiel</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td>Partiel</td>
       <td>Partiel</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -314,7 +314,7 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global
       <th scope="row">{{cssxref("width")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
@@ -333,13 +333,13 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global
       <th scope="row">{{cssxref("border")}}</th>
       <td>Partiel</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
@@ -363,7 +363,7 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global
       <th scope="row">{{cssxref("color")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
@@ -375,43 +375,43 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td>Partiel</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td>Partiel</td>
       <td>Partiel</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -422,7 +422,7 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global
       <th scope="row">{{cssxref("background")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border-radius")}}</th>
@@ -471,7 +471,7 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho
       <th scope="row">{{cssxref("width")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
@@ -490,13 +490,13 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho
       <th scope="row">{{cssxref("border")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
@@ -520,7 +520,7 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho
       <th scope="row">{{cssxref("color")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
@@ -532,43 +532,43 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td>Partiel</td>
       <td>Partiel</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td>Partiel</td>
       <td>Partiel</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -644,19 +644,19 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho
       <th scope="row">{{cssxref("border")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -667,55 +667,55 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho
       <th scope="row">{{cssxref("color")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -726,19 +726,19 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho
       <th scope="row">{{cssxref("background")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border-radius")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("box-shadow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
 </table>
@@ -779,19 +779,19 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("height")}}</th>
       <td>Non</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border")}}</th>
       <td>Partiel</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
@@ -858,7 +858,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
           <li>
             IE9 ne prend pas en charge cette propriété sur les éléments
             {{HTMLElement("select")}}, {{HTMLElement("option")}},
-            et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur
+            et {{HTMLElement("optgroup")}}&nbsp;; les navigateurs fondés sur
             WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les
             éléments {{HTMLElement("option")}} et
             {{HTMLElement("optgroup")}}.
@@ -888,7 +888,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
           <li>
             Seul Firefox fournit une prise en charge totale de cette propriété.
             Opera ne la prend pas du tout en charge et d'autres navigateur ne le
-            font que pour l'élément  {{HTMLElement("select")}}.
+            font que pour l'élément  {{HTMLElement("select")}}.
           </li>
         </ol>
       </td>
@@ -911,7 +911,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
@@ -990,25 +990,25 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("width")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
@@ -1033,7 +1033,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("color")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
@@ -1085,19 +1085,19 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
@@ -1121,7 +1121,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("background")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border-radius")}}</th>
@@ -1168,31 +1168,31 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("width")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -1203,55 +1203,55 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("color")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -1262,19 +1262,19 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("background")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border-radius")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("box-shadow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
 </table>
@@ -1298,31 +1298,31 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("width")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -1333,7 +1333,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("color")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
@@ -1365,13 +1365,13 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("text-align")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
@@ -1390,19 +1390,19 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -1426,7 +1426,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("border-radius")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("box-shadow")}}</th>
@@ -1462,31 +1462,31 @@ Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence e
       <th scope="row">{{cssxref("width")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -1497,55 +1497,55 @@ Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence e
       <th scope="row">{{cssxref("color")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -1556,19 +1556,19 @@ Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence e
       <th scope="row">{{cssxref("background")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border-radius")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("box-shadow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
 </table>
@@ -1594,7 +1594,7 @@ Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des compor
       <th scope="row">{{cssxref("width")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
@@ -1613,13 +1613,13 @@ Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des compor
       <th scope="row">{{cssxref("border")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
@@ -1643,55 +1643,55 @@ Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des compor
       <th scope="row">{{cssxref("color")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -1745,25 +1745,25 @@ Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des compor
       <th scope="row">{{cssxref("width")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border")}}</th>
       <td>Partiel</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
@@ -1788,55 +1788,55 @@ Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des compor
       <th scope="row">{{cssxref("color")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -1890,7 +1890,7 @@ Il n'y a pas de méthode standard pour changer le style de la poignée de `range
       <th scope="row">{{cssxref("width")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
@@ -1910,13 +1910,13 @@ Il n'y a pas de méthode standard pour changer le style de la poignée de `range
       <th scope="row">{{cssxref("border")}}</th>
       <td>Non</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
@@ -1940,55 +1940,55 @@ Il n'y a pas de méthode standard pour changer le style de la poignée de `range
       <th scope="row">{{cssxref("color")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -2040,31 +2040,31 @@ Il n'y a pas de méthode standard pour changer le style de la poignée de `range
       <th scope="row">{{cssxref("width")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -2075,55 +2075,55 @@ Il n'y a pas de méthode standard pour changer le style de la poignée de `range
       <th scope="row">{{cssxref("color")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -2134,7 +2134,7 @@ Il n'y a pas de méthode standard pour changer le style de la poignée de `range
       <th scope="row">{{cssxref("background")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td colspan="1"> </td>
+      <td colspan="1"> </td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border-radius")}}</th>
diff --git a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md
index 71ddd327e2..33fb1d1aea 100644
--- a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md
+++ b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md
@@ -22,7 +22,7 @@ Cet article examine ce qui arrive quand un utilisateur soumet un formulaire —
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Notions concernant les ordinateurs,
         <a href="/fr/docs/Learn/HTML/Introduction_to_HTML"
@@ -36,7 +36,7 @@ Cet article examine ce qui arrive quand un utilisateur soumet un formulaire —
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Comprendre ce qui arrive quand les données d'un formulaire sont
         soumises, y compris les notions de la façon dont les données sont
@@ -50,13 +50,13 @@ Dans ce paragraphe, nous expliquons ce qui arrive aux données lors de la soumis
 
 ## A propos de l'architecture client / serveur
 
-Le web se fonde sur une architecture client/serveur élémentaire ; en résumé : un client (généralement un navigateur Web) envoie une requête à un serveur (le plus souvent un serveur web comme [Apache](https://httpd.apache.org/), [Nginx](https://nginx.com/), [IIS](https://www.iis.net/), [Tomcat](https://tomcat.apache.org/)...), en utilisant le [protocole HTTP](/fr/docs/Web/HTTP). Le serveur répond à la requête en utilisant le même protocole.
+Le web se fonde sur une architecture client/serveur élémentaire&nbsp;; en résumé : un client (généralement un navigateur Web) envoie une requête à un serveur (le plus souvent un serveur web comme [Apache](https://httpd.apache.org/), [Nginx](https://nginx.com/), [IIS](https://www.iis.net/), [Tomcat](https://tomcat.apache.org/)...), en utilisant le [protocole HTTP](/fr/docs/Web/HTTP). Le serveur répond à la requête en utilisant le même protocole.
 
 ![Un schéma élémentaire d'architecture client/serveur sur le Web ](client-server.png)
 
 Côté client, un formulaire HTML n'est rien d'autre qu'un moyen commode et convivial de configurer une requête HTTP pour envoyer des données à un serveur. L'utilisateur peut ainsi adresser des informations à joindre à la requête HTTP.
 
-> **Note :** Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module [Programmation d'un site web côté‑serveur : premiers pas](/fr/docs/Learn/Server-side/First_steps).
+> **Note :** Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module [Programmation d'un site web côté‑serveur&nbsp;: premiers pas](/fr/docs/Learn/Server-side/First_steps).
 
 ## Côté client : définition de la méthode d'envoi des données
 
@@ -66,13 +66,13 @@ L'élément [`<form>`](/fr/docs/Web/HTML/Element/Form) définit la méthode d'en
 
 Cet attribut définit où les données sont envoyées. Sa valeur doit être une URL valide. S'il n'est pas fourni, les données seront envoyées à l'URL de la page contenant le formulaire.
 
-Dans cet exemple, les données sont envoyées à une URL précise — http\://foo.com :
+Dans cet exemple, les données sont envoyées à une URL précise — http\://foo.com :
 
 ```html
 <form action="http://foo.com">
 ```
 
-Ici, nous utilisons une URL relative — les données sont envoyées à une URL différente sur le serveur :
+Ici, nous utilisons une URL relative — les données sont envoyées à une URL différente sur le serveur&nbsp;:
 
 ```html
 <form action="/somewhere_else">
@@ -107,7 +107,7 @@ Considérons le formulaire suivant :
 ```html
 <form action="http://foo.com" method="get">
   <div>
-    <label for="say">Quelle salutation voulez-vous adresser ?</label>
+    <label for="say">Quelle salutation voulez-vous adresser&nbsp;?</label>
     <input name="say" id="say" value="Salut">
   </div>
   <div>
@@ -124,12 +124,12 @@ Comme nous avons utilisé la méthode `GET`, vous verrez l'URL `www.foo.com/?say
 
 ![](url-parameters.png)
 
-Les données sont ajoutées à l'URL sous forme d'une suite de paires nom/valeur. À la fin de l'URL de l'adresse Web, il y a un point d'interrogation (?) suivi par les paires nom/valeur séparés par une esperluette (&). Dans ce cas, nous passons deux éléments de données au serveur :
+Les données sont ajoutées à l'URL sous forme d'une suite de paires nom/valeur. À la fin de l'URL de l'adresse Web, il y a un point d'interrogation (?) suivi par les paires nom/valeur séparés par une esperluette (&). Dans ce cas, nous passons deux éléments de données au serveur&nbsp;:
 
 - `say`, dont la valeur est `Salut`
 - `to`, qui a la valeur `Maman`
 
-La requête HTTP ressemble à quelque chose comme :
+La requête HTTP ressemble à quelque chose comme&nbsp;:
 
     GET /?say=Hi&to=Mom HTTP/1.1
     Host: foo.com
@@ -138,7 +138,7 @@ La requête HTTP ressemble à quelque chose comme :
 
 #### La méthode POST
 
-La méthode `POST` est un peu différente.C'est la méthode que le navigateur utilise pour demander au serveur une réponse prenant en compte les données contenues dans le corps de la requête HTTP : « Hé serveur ! vois ces données et renvoie-moi le résultat approprié ». Si un formulaire est envoyé avec cette méthode, les données sont ajoutées au corps de la requête HTTP.
+La méthode `POST` est un peu différente.C'est la méthode que le navigateur utilise pour demander au serveur une réponse prenant en compte les données contenues dans le corps de la requête HTTP : «&nbsp;Hé serveur&nbsp;! vois ces données et renvoie-moi le résultat approprié&nbsp;». Si un formulaire est envoyé avec cette méthode, les données sont ajoutées au corps de la requête HTTP.
 
 Voyons un exemple — c'est le même formulaire que celui que nous avons vu pour GET ci‑dessus, mais avec `post` comme valeur de l'attribut [`method`](/fr/docs/Web/HTML/Element/Form#attr-method).
 
@@ -158,7 +158,7 @@ Voyons un exemple — c'est le même formulaire que celui que nous avons vu pour
 </form>
 ```
 
-Quand le formulaire est soumis avec la méthode `POST`, aucune donnée n'est ajoutée à l'URL et la requête HTTP ressemble à ceci, les données incorporées au corps de requête :
+Quand le formulaire est soumis avec la méthode `POST`, aucune donnée n'est ajoutée à l'URL et la requête HTTP ressemble à ceci, les données incorporées au corps de requête&nbsp;:
 
     POST / HTTP/1.1
     Host: foo.com
@@ -173,28 +173,28 @@ L'en-tête `Content-Length` indique la taille du corps, et l'en-tête `Content-T
 
 ### Voir les requêtes HTTP
 
-Les requêtes HTTP ne sont jamais montrées à l'utilisateur (si vous voulez les voir, vous devez utiliser des outils comme la [Console Web](/fr/docs/Tools/Web_Console) de Firefox ou les [Chrome Developer Tools](https://developers.google.com/chrome-developer-tools/)). À titre d'exemple, les données de formulaire sont visibles comme suit dans l'onglet Chrome Network. Après avoir soumis le formulaire :
+Les requêtes HTTP ne sont jamais montrées à l'utilisateur (si vous voulez les voir, vous devez utiliser des outils comme la [Console Web](/fr/docs/Tools/Web_Console) de Firefox ou les [Chrome Developer Tools](https://developers.google.com/chrome-developer-tools/)). À titre d'exemple, les données de formulaire sont visibles comme suit dans l'onglet Chrome Network. Après avoir soumis le formulaire&nbsp;:
 
 1.  Pressez F12
-2.  Selectionnez « Réseau »
-3.  Selectionnez « Tout »
-4.  Selectionnez « foo.com » dans l'onglet « Nom »
-5.  Selectionnez « En‑tête »
+2.  Selectionnez «&nbsp;Réseau&nbsp;»
+3.  Selectionnez «&nbsp;Tout&nbsp;»
+4.  Selectionnez «&nbsp;foo.com&nbsp;» dans l'onglet «&nbsp;Nom&nbsp;»
+5.  Selectionnez «&nbsp;En‑tête&nbsp;»
 
 Vous obtiendrez les données du formulaire, comme l'image suivante le montre.
 
 ![](network-monitor.png)
 
-La seule chose affichée à l'utilisateur est l'URL appelée. Comme mentionné ci‑dessus, avec une requête `GET` l'utilisateur verra les données dans la barre de l'URL, mais avec une requête `POST` il ne verra rien. Cela peut être important pour deux raisons :
+La seule chose affichée à l'utilisateur est l'URL appelée. Comme mentionné ci‑dessus, avec une requête `GET` l'utilisateur verra les données dans la barre de l'URL, mais avec une requête `POST` il ne verra rien. Cela peut être important pour deux raisons&nbsp;:
 
 1.  Si vous avez besoin d'envoyer un mot de passe (ou toute autre donnée sensible), n'utilisez jamais la méthode GET ou vous risquez de l'afficher dans la barre d'URL, ce qui serait très peu sûr.
 2.  Si vous avez besoin d'envoyer une grande quantité de données, la méthode POST est préférable, car certains navigateurs limitent la taille des URLs. De plus, de nombreux serveurs limitent la longueur des URL qu'ils acceptent.
 
 ## Côté serveur : récupérer les données
 
-Quelle que soit la méthode HTTP qu'on choisit, le serveur reçoit une chaîne de caractères qui sera décomposée pour récupérer les données comme une liste de paires clé/valeur. La façon d'accéder à cette liste dépend de la plateforme de développement utilisée et des modèles qu'on peut utiliser avec. La technologie utilisée détermine aussi comment les clés dupliquées sont gérées ; souvent, la priorité est donnée à la valeur de clé la plus récente.
+Quelle que soit la méthode HTTP qu'on choisit, le serveur reçoit une chaîne de caractères qui sera décomposée pour récupérer les données comme une liste de paires clé/valeur. La façon d'accéder à cette liste dépend de la plateforme de développement utilisée et des modèles qu'on peut utiliser avec. La technologie utilisée détermine aussi comment les clés dupliquées sont gérées&nbsp;; souvent, la priorité est donnée à la valeur de clé la plus récente.
 
-### Exemple : PHP brut
+### Exemple&nbsp;: PHP brut
 
 Le [PHP](https://php.net/) met à disposition des objets globaux pour accéder aux données. En supposant que vous avez utilisé la méthode `POST`, l'exemple suivant récupère les données et les affiche à l'utilisateur. Bien sûr, ce que vous en faites dépend de vous. Vous pouvez les afficher, les ranger dans une base de données, les envoyer par mail ou les traiter autrement.
 
@@ -212,13 +212,13 @@ Cet exemple affiche une page avec les données envoyées. Vous pouvez voir ceci
 
 ![L'exécution du code PHP déclenche l'affichage de Hi Mom](php-result.png)
 
-> **Note :** Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont [MAMP](https://www.mamp.info/en/downloads/) (Mac et Windows) et [AMPPS](https://ampps.com/download) (Mac, Windows, Linux).
+> **Note :** Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont [MAMP](https://www.mamp.info/en/downloads/) (Mac et Windows) et [AMPPS](https://ampps.com/download) (Mac, Windows, Linux).
 >
 > Notez également que si vous utilisez MAMP mais que vous n'avez pas installé MAMP Pro (ou si le temps d'essai de la démo de MAMP Pro a expiré), vous pourriez avoir des difficultés à le faire fonctionner. Pour le faire fonctionner à nouveau, nous avons constaté que vous pouvez charger l'application MAMP, puis choisir les options de menu _MAMP_ > _Préférences_ > _PHP_, et définir "Version standard :" à "7.2.x" (x sera différent selon la version que vous avez installée).
 
 ### Exemple: Python
 
-Cet exemple vous montre comment utiliser Python pour faire la même chose — afficher les données sur une page web. Celui‑ci utilise [Flask framework](https://flask.pocoo.org/) pour le rendu des modèles, la gestion de la soumission des données du formulaire, etc (voyez [python-example.py](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py)).
+Cet exemple vous montre comment utiliser Python pour faire la même chose — afficher les données sur une page web. Celui‑ci utilise [Flask framework](https://flask.pocoo.org/) pour le rendu des modèles, la gestion de la soumission des données du formulaire, etc (voyez [python-example.py](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py)).
 
 ```python
 from flask import Flask, render_template, request
@@ -236,12 +236,12 @@ if __name__ == "__main__":
     app.run()
 ```
 
-Les deux prototypes référencés dans le code ci‑dessus sont les suivants :
+Les deux prototypes référencés dans le code ci‑dessus sont les suivants&nbsp;:
 
-- [`form.html`](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html)&nbsp;: Le même formulaire que celui vu plus haut dans la section [La méthode POST](#the_post_method) mais avec l'attribut `action` défini à la valeur `\{{url_for('hello')}}`. (C'est un modèle [Jinja2](https://jinja.pocoo.org/docs/2.9/), qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. `url_for('hello')` dit en gros « à rediriger sur `/hello` quand le formulaire est soumis ».)
-- [greeting.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html) : Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction `hello()` vue plus haut qui s'exécute quand l'URL `/hello` est chargée dans le navigateur.
+- [`form.html`](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html)&nbsp;: Le même formulaire que celui vu plus haut dans la section [La méthode POST](#the_post_method) mais avec l'attribut `action` défini à la valeur `\{{url_for('hello')}}`. (C'est un modèle [Jinja2](https://jinja.pocoo.org/docs/2.9/), qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. `url_for('hello')` dit en gros «&nbsp;à rediriger sur `/hello` quand le formulaire est soumis&nbsp;».)
+- [greeting.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html)&nbsp;: Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction `hello()` vue plus haut qui s'exécute quand l'URL `/hello` est chargée dans le navigateur.
 
-> **Note :** À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'[installer Python/PIP](/fr/docs/Learn/Server-side/Django/development_environment#installing_python_3), puis Flask avec « `pip3 install flask` ». À ce moment‑là vous pourrez exécuter l'exemple avec « `python3 python-example.py` », puis en allant sur « `localhost:5000` » dans votre navigateur.
+> **Note :** À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'[installer Python/PIP](/fr/docs/Learn/Server-side/Django/development_environment#installing_python_3), puis Flask avec «&nbsp;`pip3 install flask`&nbsp;». À ce moment‑là vous pourrez exécuter l'exemple avec «&nbsp;`python3 python-example.py`&nbsp;», puis en allant sur «&nbsp;`localhost:5000`&nbsp;» dans votre navigateur.
 
 ### Autres langages et canevas de structures
 
@@ -260,11 +260,11 @@ Enfin il faut noter que même en utilisant ces canevas, travailler avec des form
 
 ## Cas particulier : envoyer des fichiers
 
-L'envoi de fichiers avec un formulaire HTML est cas particulier. Les fichiers sont des données binaires — ou considérées comme telles — alors que toutes les autres données sont des données textuelles. Comme HTTP est un protocole de texte, il y a certaines conditions particulières à remplir pour gérer des données binaires.
+L'envoi de fichiers avec un formulaire HTML est cas particulier. Les fichiers sont des données binaires — ou considérées comme telles — alors que toutes les autres données sont des données textuelles. Comme HTTP est un protocole de texte, il y a certaines conditions particulières à remplir pour gérer des données binaires.
 
 ### L'attribut enctype
 
-Cet attribut vous permet de préciser la valeur de l'en-tête HTTP `Content-Type` incorporé dans la requête générée au moment de la soumission du formulaire. Cet en-tête est très important, car il indique au serveur le type de données envoyées. Par défaut, sa valeur est `application/x-www-form-urlencoded`. Ce qui signifie : « Ce sont des données de formulaire encodées à l'aide de paramètres URL ».
+Cet attribut vous permet de préciser la valeur de l'en-tête HTTP `Content-Type` incorporé dans la requête générée au moment de la soumission du formulaire. Cet en-tête est très important, car il indique au serveur le type de données envoyées. Par défaut, sa valeur est `application/x-www-form-urlencoded`. Ce qui signifie : «&nbsp;Ce sont des données de formulaire encodées à l'aide de paramètres URL&nbsp;».
 
 Mais si vous voulez envoyer des fichiers, il faut faire deux choses en plus :
 
@@ -290,7 +290,7 @@ Par exemple :
 
 ## Problèmes courants de sécurité
 
-Chaque fois qu'on envoie des données à un serveur, il faut considérer la sécurité. Les formulaires HTML sont l'un des principaux vecteurs d'attaque (emplacements d'où les attaques peuvent provenir) contre les serveurs. Les problèmes ne viennent jamais des formulaires eux-mêmes — ils proviennent de la façon dont les serveurs gèrent les données.
+Chaque fois qu'on envoie des données à un serveur, il faut considérer la sécurité. Les formulaires HTML sont l'un des principaux vecteurs d'attaque (emplacements d'où les attaques peuvent provenir) contre les serveurs. Les problèmes ne viennent jamais des formulaires eux-mêmes — ils proviennent de la façon dont les serveurs gèrent les données.
 
 L'article [Sécurité des sites Web](/fr/docs/Learn/Server-side/First_steps/Website_security) de notre sujet d'apprentissage [server-side](/fr/docs/Learn/Server-side) aborde en détail un certain nombre d'attaques courantes et les défenses potentielles contre celles-ci. Vous devriez aller consulter cet article, pour vous faire une idée de ce qui est possible.
 
@@ -304,7 +304,7 @@ Toute donnée qui va dans un serveur doit être vérifiée et nettoyée. Toujour
 - **Limitez la quantité de données entrantes pour n'autoriser que ce qui est nécessaire**.
 - **Sandbox des fichiers téléchargés**. Stockez-les sur un serveur différent et n'autorisez l'accès au fichier que par un sous-domaine différent ou, mieux encore, par un domaine complètement différent.
 
-Vous devriez vous éviter beaucoup de problèmes en suivant ces trois règles, mais cela reste néanmoins une bonne idée de faire un examen de sécurité auprès d'une tierce personne compétente. Ne pensez pas, à tort, avoir anticipé tous les problèmes de sécurité !
+Vous devriez vous éviter beaucoup de problèmes en suivant ces trois règles, mais cela reste néanmoins une bonne idée de faire un examen de sécurité auprès d'une tierce personne compétente. Ne pensez pas, à tort, avoir anticipé tous les problèmes de sécurité&nbsp;!
 
 ## Conclusion
 
@@ -314,7 +314,7 @@ Comme vous pouvez le voir, envoyer un formulaire est facile, mais sécuriser son
 
 Si vous voulez en savoir plus par rapport aux applications web, vous pouvez consulter ces ressources :
 
-- [Programmation d'un site web côté‑serveur : premiers pas](/fr/docs/Learn/Server-side/First_steps)
+- [Programmation d'un site web côté‑serveur&nbsp;: premiers pas](/fr/docs/Learn/Server-side/First_steps)
 - [Open Web Application Security Project (OWASP)](https://www.owasp.org/index.php/Main_Page) (Projet pour la sécurité des applications dans un Web ouvert)
 - [Blog de Chris Shiflett à propos de la sécurité avec PHP](https://shiflett.org/)
 
diff --git a/files/fr/learn/forms/sending_forms_through_javascript/index.md b/files/fr/learn/forms/sending_forms_through_javascript/index.md
index f0e64a4440..f120464603 100644
--- a/files/fr/learn/forms/sending_forms_through_javascript/index.md
+++ b/files/fr/learn/forms/sending_forms_through_javascript/index.md
@@ -104,7 +104,7 @@ Voici le résultat en direct :
 
 Construire manuellement une requête HTTP peut devenir fastidieux. Heureusement, une [spécification XMLHttpRequest](http://www.w3.org/TR/XMLHttpRequest/) récente fournit un moyen pratique et plus simple pour traiter les demandes de données de formulaire avec l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}}.
 
-L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} peut s'utiliser pour construire des données de formulaire pour la transmission ou pour obtenir les données des élément de formulaire de façon à gérer leur mode d'envoi. Notez que les objets {{domxref("XMLHttpRequest/FormData", "FormData")}} sont en écriture seule (« write only »), ce qui signifie que vous pouvez les modifier, mais pas récupérer leur contenu.
+L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} peut s'utiliser pour construire des données de formulaire pour la transmission ou pour obtenir les données des élément de formulaire de façon à gérer leur mode d'envoi. Notez que les objets {{domxref("XMLHttpRequest/FormData", "FormData")}} sont en écriture seule («&nbsp;write only »), ce qui signifie que vous pouvez les modifier, mais pas récupérer leur contenu.
 
 L'utilisation de cet objet est détaillée dans [Utiliser les objets FormData](/fr/docs/Web/API/FormData/Utilisation_objets_FormData), mais voici deux exemples :
 
@@ -150,7 +150,7 @@ Voici le résultat directement :
 
 #### Utiliser un objet FormData lié à un élément form
 
-Vous pouvez également lier un objet `FormData` à un élément {{HTMLElement("form")}} et  créer ainsi un `FormData` représentant les données contenues dans le formulaire.
+Vous pouvez également lier un objet `FormData` à un élément {{HTMLElement("form")}} et créer ainsi un `FormData` représentant les données contenues dans le formulaire.
 
 Le HTML est classique :
 
@@ -424,7 +424,7 @@ Voici le résultat en direct :
 
 Selon le navigateur, l'envoi de données de formulaire par JavaScript peut être facile ou difficile. L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} en est généralement la cause et n'hésitez pas à utiliser un « polyfill » ([prothèse d'émulation](https://fr.wikipedia.org/wiki/Polyfill)) pour cela sur les navigateurs anciens :
 
-- [Ces primitives](https://gist.github.com/3120320) sont des « polyfills » de  `FormData` avec des {{domxref("Using_web_workers","worker")}}.
+- [Ces primitives](https://gist.github.com/3120320) sont des « polyfills » de  `FormData` avec des {{domxref("Using_web_workers","worker")}}.
 - [HTML5-formdata](https://github.com/francois2metz/html5-formdata) tente d'opérer un « polyfill » de l'objet `FormData`, mais il requiert un [File API](http://www.w3.org/TR/FileAPI/)
 - [Ce « polyfill »](https://github.com/jimmywarting/FormData) fournit la plupart des nouvelles méthodes dont `FormData` dispose (entrées, clés, valeurs et prise en charge de `for...of`)
 
diff --git a/files/fr/learn/forms/styling_web_forms/index.md b/files/fr/learn/forms/styling_web_forms/index.md
index 89c4f12824..89f13ac148 100644
--- a/files/fr/learn/forms/styling_web_forms/index.md
+++ b/files/fr/learn/forms/styling_web_forms/index.md
@@ -16,11 +16,11 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML
 
 > Dans cet article, nous allons apprendre comment utiliser [les CSS](/fr/docs/CSS "/fr/docs/CSS") avec les formulaires [HTML](/fr/docs/HTML "/fr/docs/HTML") pour (espérons-le) améliorer leur apparence. Étonnamment, ceci peut être délicat. Pour des raisons techniques et historiques, les widgets de formulaires ne s'allient pas très bien avec CSS. À cause de ces difficultés, de nombreux développeurs préfèrent [construire leurs propres widgets HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés "/fr/docs/HTML/Formulaires/Comment_créer_des_blocs_de_formulaires_personnalisés") pour avoir plus de maîtrise sur leur apparence. Toutefois, avec les navigateurs modernes, les web designers ont de plus en plus d'emprise sur l'apparence de leurs formulaires. Voyons cela de plus près.
 
-## Pourquoi est-ce si difficile de modifier l'apparence des formulaires avec CSS ?
+## Pourquoi est-ce si difficile de modifier l'apparence des formulaires avec CSS&nbsp;?
 
-Dans la jeunesse du Web — aux alentours de 1995 — les formulaires ont été ajoutés au HTML dans la [spécification HTML 2](http://www.ietf.org/rfc/rfc1866.txt). À cause de la complexité des formulaires, ceux qui les mettaient en œuvre ont préféré s'appuyer sur le système d'exploitation sous‑jacent pour les gérer et les afficher.
+Dans la jeunesse du Web — aux alentours de 1995 — les formulaires ont été ajoutés au HTML dans la [spécification HTML 2](http://www.ietf.org/rfc/rfc1866.txt). À cause de la complexité des formulaires, ceux qui les mettaient en œuvre ont préféré s'appuyer sur le système d'exploitation sous‑jacent pour les gérer et les afficher.
 
-Quelques années plus tard, les CSS ont été créées et ce qui était une nécessité technique — c'est-à-dire, utiliser des widgets natifs pour les contrôles de formulaire — est devenu un préalable stylistique. Dans la jeunesse des CSS, l'apparence des formulaires n'était pas une priorité.
+Quelques années plus tard, les CSS ont été créées et ce qui était une nécessité technique — c'est-à-dire, utiliser des widgets natifs pour les contrôles de formulaire — est devenu un préalable stylistique. Dans la jeunesse des CSS, l'apparence des formulaires n'était pas une priorité.
 
 Comme les utilisateurs étaient habitués à l'apparence visuelle de leurs plateformes respectives, les fournisseurs de navigateurs étaient réticents à rendre possible la modification de l'apparence des formulaires. Et pour être honnête, il est toujours extrêmement difficile de reconstruire tous les contrôles pour que leur apparence soit modifiable.
 
@@ -32,7 +32,7 @@ Actuellement, quelques difficultés subsistent dans l'utilisation des CSS avec l
 
 #### Le bon
 
-L'apparence de certains éléments peut être modifiée sans poser beaucoup de problèmes suivant les diverses plateformes. Ceci inclut les éléments structurels suivants :
+L'apparence de certains éléments peut être modifiée sans poser beaucoup de problèmes suivant les diverses plateformes. Ceci inclut les éléments structurels suivants&nbsp;:
 
 1.  {{HTMLElement("form")}}
 2.  {{HTMLElement("fieldset")}}
@@ -61,7 +61,7 @@ Pour changer l'apparence [des éléments facilement modifiables](/fr/docs/HTML/F
 
 ### Champs de recherche
 
-Les boîtes de recherche sont le seul type de champ textuel dont l'apparence peut être un peu complexe à modifier. Sur les navigateurs utilisant WebKit (Chrome, Safari, etc.) vous devrez utiliser la propriété CSS propriétaire `-webkit-appearance`. Nous allons aborder le sujet plus en détails dans dans l'article : [Apparence avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms "/fr/docs/Apparence_avancée_des_formulaires_HTML").
+Les boîtes de recherche sont le seul type de champ textuel dont l'apparence peut être un peu complexe à modifier. Sur les navigateurs utilisant WebKit (Chrome, Safari, etc.) vous devrez utiliser la propriété CSS propriétaire `-webkit-appearance`. Nous allons aborder le sujet plus en détails dans dans l'article&nbsp;: [Apparence avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms "/fr/docs/Apparence_avancée_des_formulaires_HTML").
 
 #### Exemple
 
@@ -86,7 +86,7 @@ Comme vous pouvez le voir sur la capture d'écran pour Chrome, les deux champs o
 
 ### Texte et polices de caractères
 
-Les fonctionnalités liées au texte et aux polices de caractères dans les CSS peuvent être utilisées facilement avec n'importe quel widget (et oui, vous pouvez utiliser {{cssxref("@font-face")}} avec les formulaires). Toutefois, le comportement des navigateurs est souvent incompatible. Par défaut, certains éléments comme {{cssxref("font-family")}} {{cssxref("font-size")}} n'héritent pas de leurs parents. De nombreux navigateurs utilisent les valeurs du système d'exploitation. Pour que l'apparence des formulaires soit cohérente avec le reste de votre contenu, vous pouvez ajouter les règles suivantes à votre feuille de style :
+Les fonctionnalités liées au texte et aux polices de caractères dans les CSS peuvent être utilisées facilement avec n'importe quel widget (et oui, vous pouvez utiliser {{cssxref("@font-face")}} avec les formulaires). Toutefois, le comportement des navigateurs est souvent incompatible. Par défaut, certains éléments comme {{cssxref("font-family")}} {{cssxref("font-size")}} n'héritent pas de leurs parents. De nombreux navigateurs utilisent les valeurs du système d'exploitation. Pour que l'apparence des formulaires soit cohérente avec le reste de votre contenu, vous pouvez ajouter les règles suivantes à votre feuille de style&nbsp;:
 
 ```css
 button, input, select, textarea {
@@ -105,7 +105,7 @@ Il existe un débat animé sur le fait qu'un formulaire ait une meilleure appare
 
 Tous les champs textuels sont compatibles avec les différentes propriétés du modèle de boîte CSS ({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} et {{cssxref("border")}}). Toutefois, comme précédemment les navigateurs s'appuient sur l'apparence par défaut du système d'exploitation. C'est votre décision de choisir si vous souhaitez intégrer vos formulaires à votre contenu du point de vue de l'apparence. Si vous souhaitez conserver l'apparence originale des blocs, vous aurez des difficultés à leur donner des dimensions cohérentes.
 
-**Chacun des blocs a ses propres règles concernant les bordures, la marge intérieure (padding) et extérieure (margin).** Si vous souhaitez qu'ils aient tous la même dimension, vous devrez utiliser la propriété {{cssxref("box-sizing")}} :
+**Chacun des blocs a ses propres règles concernant les bordures, la marge intérieure (padding) et extérieure (margin).** Si vous souhaitez qu'ils aient tous la même dimension, vous devrez utiliser la propriété {{cssxref("box-sizing")}}&nbsp;:
 
 ```css
 input, textarea, select, button {
@@ -124,13 +124,13 @@ Dans la capture d'écran ci-dessous, la colonne de gauche n'utilise pas {{cssxre
 
 ### Positionnement
 
-Le positionnement des formulaires HTML n'est pas un problème de manière générale. Seulement deux éléments nécessitent une attention particulière :
+Le positionnement des formulaires HTML n'est pas un problème de manière générale. Seulement deux éléments nécessitent une attention particulière&nbsp;:
 
 #### legend
 
 L'apparence de l'élément {{HTMLElement("legend")}} est facile à modifier à l'exception de sa position. Dans chaque navigateur, l'élément {{HTMLElement("legend")}} est positionné au-dessus de la bordure supérieure de son élément {{HTMLElement("fieldset")}} parent. Il n'existe aucune manière de changer sa position dans le flux HTML. Vous pouvez toutefois le positionner de manière absolue ou relative en utilisant la propriété {{cssxref("position")}}, sinon, ce sera une partie de la bordure de l'élément `fieldset`.
 
-Comme l'élément {{HTMLElement("legend")}} est très important pour des raisons d'accessibilité (nous parlerons des techniques pour l'assistance à propos de l'attribut  `label` de chaque élément de formulaire du `fieldset`), il est souvent associé à un intitulé, puis caché à l'accessibilité, comme ceci :
+Comme l'élément {{HTMLElement("legend")}} est très important pour des raisons d'accessibilité (nous parlerons des techniques pour l'assistance à propos de l'attribut  `label` de chaque élément de formulaire du `fieldset`), il est souvent associé à un intitulé, puis caché à l'accessibilité, comme ceci :
 
 ##### HTML
 
@@ -176,17 +176,17 @@ Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier [ar
   <h1>à: Mozilla</h1>
 
   <div id="from">
-    <label for="name">de :</label>
+    <label for="name">de&nbsp;:</label>
     <input type="text" id="name" name="user_name">
   </div>
 
   <div id="reply">
-    <label for="mail">répondre à :</label>
+    <label for="mail">répondre à&nbsp;:</label>
     <input type="email" id="mail" name="user_email">
   </div>
 
   <div id="message">
-    <label for="msg">Votre message :</label>
+    <label for="msg">Votre message&nbsp;:</label>
     <textarea id="msg" name="user_message"></textarea>
   </div>
 
@@ -201,17 +201,17 @@ Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier [ar
 C'est ici que le « fun » commence ! Avant de commencer à coder, nous avons besoin de trois ressources supplémentaires :
 
 1.  L'[image de fond](/files/4151/background.jpg "The postcard background") de la carte postale — téléchargez cette image et sauvegardez‑la dans le même répertoire que votre fichier HTML de travail.
-2.  Une police de machine à écrire : [« Secret Typewriter » de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Secret-Typewriter) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
-3.  Une police d'écriture manuelle : [«&nbsp;Journal&nbsp;» de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Journal) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
+2.  Une police de machine à écrire&nbsp;: [«&nbsp;Secret Typewriter&nbsp;» de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Secret-Typewriter) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
+3.  Une police d'écriture manuelle&nbsp;: [«&nbsp;Journal&nbsp;» de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Journal) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
 
 
 
-Les polices demandent un supplément de traitement avant de débuter :
+Les polices demandent un supplément de traitement avant de débuter&nbsp;:
 
 1.  Allez sur le [Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator) de fontsquirrel.
 2.  En utilisant le formulaire, téléversez les fichiers de polices et créez un kit de polices pou le Web. Téléchargez le kit sur votre ordinateur.
 3.  Décompressez le fichier zip fourni.
-4.  Dans le contenu décompressé vous trouverez deux fichiers `.woff` et deux fichiers `.woff2`. Copiez ces quatre fichiers dans un répertoire nommé `fonts`, dans le même répertoire que ci‑dessus. Nous utilisons deux fichiers différents pour maximiser la compatibilité avec les navigateurs ; voyez notre article sur les [Web fonts](/fr/docs/Learn/CSS/Styling_text/Web_fonts) pour des informations plus détaillées.
+4.  Dans le contenu décompressé vous trouverez deux fichiers `.woff` et deux fichiers `.woff2`. Copiez ces quatre fichiers dans un répertoire nommé `fonts`, dans le même répertoire que ci‑dessus. Nous utilisons deux fichiers différents pour maximiser la compatibilité avec les navigateurs&nbsp;; voyez notre article sur les [Web fonts](/fr/docs/Learn/CSS/Styling_text/Web_fonts) pour des informations plus détaillées.
 
 ### Le CSS
 
diff --git a/files/fr/learn/forms/your_first_form/example/index.md b/files/fr/learn/forms/your_first_form/example/index.md
index f261558cdc..d45995e674 100644
--- a/files/fr/learn/forms/your_first_form/example/index.md
+++ b/files/fr/learn/forms/your_first_form/example/index.md
@@ -12,24 +12,24 @@ Ceci est l'exemple pour l'article [Mon premier formulaire HTML](/fr/docs/HTML/Fo
 
 ```html
 <form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post">
-  <div>
-    <label for="nom">Nom :</label>
-    <input type="text" id="nom" name="user_name">
-  </div>
-
-  <div>
-    <label for="courriel">Courriel :</label>
-    <input type="email" id="courriel" name="user_email">
-  </div>
-
-  <div>
-    <label for="message">Message :</label>
-    <textarea id="message" name="user_message"></textarea>
-  </div>
-
-  <div class="button">
-    <button type="submit">Envoyer le message</button>
-  </div>
+  <div>
+    <label for="nom">Nom :</label>
+    <input type="text" id="nom" name="user_name">
+  </div>
+
+  <div>
+    <label for="courriel">Courriel :</label>
+    <input type="email" id="courriel" name="user_email">
+  </div>
+
+  <div>
+    <label for="message">Message :</label>
+    <textarea id="message" name="user_message"></textarea>
+  </div>
+
+  <div class="button">
+    <button type="submit">Envoyer le message</button>
+  </div>
 </form>
 ```
 
@@ -37,68 +37,68 @@ Ceci est l'exemple pour l'article [Mon premier formulaire HTML](/fr/docs/HTML/Fo
 
 ```css
 form {
-  /* Pour le centrer dans la page */
-  margin: 0 auto;
-  width: 400px;
-
-  /* Pour voir les limites du formulaire */
-  padding: 1em;
-  border: 1px solid #CCC;
-  border-radius: 1em;
+  /* Pour le centrer dans la page */
+  margin: 0 auto;
+  width: 400px;
+
+  /* Pour voir les limites du formulaire */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
 }
 
 div + div {
-  margin-top: 1em;
+  margin-top: 1em;
 }
 
 label {
-  /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
-  display: inline-block;
-  width: 90px;
-  text-align: right;
+  /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
 }
 
 input, textarea {
-  /* Afin de s'assurer que tous les champs textuels utilisent la même police
-     Par défaut, textarea utilise une police à espacement constant */
-  font: 1em sans-serif;
+  /* Afin de s'assurer que tous les champs textuels utilisent la même police
+     Par défaut, textarea utilise une police à espacement constant */
+  font: 1em sans-serif;
 
-  /* Pour donner la même dimension à tous les champs textuels */
-  width: 300px;
+  /* Pour donner la même dimension à tous les champs textuels */
+  width: 300px;
 
-  -moz-box-sizing: border-box;
-       box-sizing: border-box;
+  -moz-box-sizing: border-box;
+       box-sizing: border-box;
 
-  /* Pour harmoniser l'apparence des bordures des champs textuels */
-  border: 1px solid #999;
+  /* Pour harmoniser l'apparence des bordures des champs textuels */
+  border: 1px solid #999;
 }
 
 input:focus, textarea:focus {
-  /* Afin de réhausser les éléments actifs */
-  border-color: #000;
+  /* Afin de réhausser les éléments actifs */
+  border-color: #000;
 }
 
 textarea {
-  /* Pour aligner correctement les champs multilignes et leurs étiquettes */
-  vertical-align: top;
+  /* Pour aligner correctement les champs multilignes et leurs étiquettes */
+  vertical-align: top;
 
-  /* Pour donner assez d'espace pour entrer du texte */
-  height: 5em;
+  /* Pour donner assez d'espace pour entrer du texte */
+  height: 5em;
 
-  /* Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement
-     Cela ne marche pas avec tous les navigateurs  */
-  resize: vertical;
+  /* Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement
+     Cela ne marche pas avec tous les navigateurs  */
+  resize: vertical;
 }
 
 .button {
-  /* Pour positionner les boutons de la même manière que les champs textuels */
-  padding-left: 90px; /* même dimension que les étiquettes */
+  /* Pour positionner les boutons de la même manière que les champs textuels */
+  padding-left: 90px; /* même dimension que les étiquettes */
 }
 
 button {
-  /* Cette marge représente approximativement le même espace
-     que celui entre les étiquettes et les champs textuels */
-  margin-left: .5em;
+  /* Cette marge représente approximativement le même espace
+     que celui entre les étiquettes et les champs textuels */
+  margin-left: .5em;
 }
 ```
 
diff --git a/files/fr/learn/forms/your_first_form/index.md b/files/fr/learn/forms/your_first_form/index.md
index bf49454b8c..868a61e423 100644
--- a/files/fr/learn/forms/your_first_form/index.md
+++ b/files/fr/learn/forms/your_first_form/index.md
@@ -20,7 +20,7 @@ Le premier article de notre série vous offre une toute première expérience de
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Notions concernant les ordinateurs et les
         <a href="/fr/Apprendre/HTML/Introduction_à_HTML"
@@ -29,7 +29,7 @@ Le premier article de notre série vous offre une toute première expérience de
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Comprendre ce que sont les formulaires HTML, à quoi ils servent, comment
         les concevoir et quels sont les éléments de base HTML nécessaires dans
@@ -45,13 +45,13 @@ Les formulaires HTML sont un des vecteurs principaux d'interaction entre un util
 
 Un formulaire HTML est composé d'un ou plusieurs widgets. Ceux-ci peuvent être des zones de texte (sur une seule ligne ou plusieurs lignes), des boîtes à sélection, des boutons, des cases à cocher ou des boutons radio. La plupart du temps, ces items sont associés à un libellé qui décrit leur rôle — des étiquettes correctement implémentées sont susceptibles d'informer clairement l'utilisateur normal ou mal‑voyant sur ce qu'il convient d'entrer dans le formulaire.
 
-La principale différence entre un formulaire HTML et un document HTML habituel réside dans le fait que, généralement, les données collectées par le formulaire sont envoyées vers un serveur web. Dans ce cas, vous avez besoin de mettre en place un serveur web pour récupérer ces données et les traiter. La mise en place d'un tel serveur ne fait pas partie des sujets abordés dans ce guide. Si vous souhaitez toutefois en savoir plus, voyez « [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires) » plus loin dans ce module.
+La principale différence entre un formulaire HTML et un document HTML habituel réside dans le fait que, généralement, les données collectées par le formulaire sont envoyées vers un serveur web. Dans ce cas, vous avez besoin de mettre en place un serveur web pour récupérer ces données et les traiter. La mise en place d'un tel serveur ne fait pas partie des sujets abordés dans ce guide. Si vous souhaitez toutefois en savoir plus, voyez «&nbsp;[Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires)&nbsp;» plus loin dans ce module.
 
 ## Concevoir le formulaire
 
 Avant de passer au code, il est souhaitable de prendre un peu de recul et accorder quelques instants de réflexion à votre formulaire. Dessiner un rapide croquis vous permettra de définir les informations que vous souhaitez demander à l'utilisateur. Du point de vue de l'expérience utilisateur, il est important de garder à l'esprit que plus vous demandez d'informations, plus vous risquez que votre utilisateur s'en aille. Restez simple et ne perdez pas votre objectif de vue : ne demandez que ce dont vous avez absolument besoin. La conception de formulaires est une phase importante de la construction d'un site internet ou d'une application. L'approche de l'expérience utilisateur de ces formulaires ne fait pas partie des objectifs de ce guide, mais si vous souhaitez approfondir ce sujet, vous pouvez lire les articles suivants :
 
-- Smashing Magazine a de très bons [articles à propos de l'expérience utilisateur dans les formulaires](http://uxdesign.smashingmagazine.com/tag/forms/), mais le plus intéressant est certainement leur « [Guide complet pour des formulaires web facilement utilisables](http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/) ».
+- Smashing Magazine a de très bons [articles à propos de l'expérience utilisateur dans les formulaires](http://uxdesign.smashingmagazine.com/tag/forms/), mais le plus intéressant est certainement leur «&nbsp;[Guide complet pour des formulaires web facilement utilisables](http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/)&nbsp;».
 - UXMatters est une ressource bien pensée avec de très bons conseils allant des [meilleures pratiques de base](http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php) jusqu'à des sujets plus complexes tels que [les formulaires sur plusieurs pages](http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php).
 
 Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les premières pierres.
@@ -60,7 +60,7 @@ Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les
 
 Notre formulaire contiendra trois champs de texte et un bouton. Nous demandons simplement à notre utilisateur son nom, son adresse électronique et le message qu'il souhaite envoyer. En appuyant sur le bouton, le message sera envoyé au serveur web.
 
-##  Apprentissage actif : mise en œuvre de notre formulaire HTML
+##  Apprentissage actif&nbsp;: mise en œuvre de notre formulaire HTML
 
 Très bien, nous sommes maintenant prêts à passer au HTML et à coder notre formulaire. Pour construire notre formulaire, nous aurons besoin des éléments HTML suivants : {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}} et {{HTMLElement("button")}}.
 
@@ -81,7 +81,7 @@ Cet élément définit un formulaire. C'est un élément conteneur au même titr
 - L'attribut `action` définit l'emplacement (une URL) où doivent être envoyées les données collectées par le formulaire.
 - L'attribut `method` définit la méthode HTTP utilisée pour envoyer les données (cela peut être « get » ou « post »).
 
-> **Note :** Si vous souhaitez en savoir plus sur le fonctionnement de ces attributs, cela est détaillé dans l'article [« Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires) ».
+> **Note :** Si vous souhaitez en savoir plus sur le fonctionnement de ces attributs, cela est détaillé dans l'article [«&nbsp;Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires)&nbsp;».
 
 Pour le moment, ajoutez l'élément {{htmlelement("form")}} ci dessus dans le corps de votre HTML.
 
@@ -98,7 +98,7 @@ En terme de code HTML, nous avons besoin de quelque chose qui ressemble à ceci
         <input type="text" id="name" name="user_name">
     </div>
     <div>
-        <label for="mail">e-mail :</label>
+        <label for="mail">e-mail&nbsp;:</label>
         <input type="email" id="mail" name="user_mail">
     </div>
     <div>
@@ -113,7 +113,7 @@ Les éléments {{HTMLElement("div")}} sont ici pour structurer notre code et ren
 Concernant l'élément {{HTMLElement("input")}}, l'attribut le plus important est l'attribut `type`. Ce dernier est extrêmement important puisqu'il définit le comportement de l'élément {{HTMLElement("input")}}. Il peut radicalement changer le sens de l'élément, faites-y attention. Si vous voulez en savoir plus à ce propos, vous pouvez lire l'article au sujet des [widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs).
 
 - Dans notre exemple nous n'utilisons que la valeur `text` — qui est la valeur par défaut de cet attribut et représente un champ de texte basique sur une seule ligne acceptant n'importe quel type de texte.
-- Pour la deuxième entrée, nous utilisons la valeur `email` qui définit un champ de texte sur une seule ligne n'acceptant que des adresses électroniques valides. Cette dernière valeur transforme un champ basique en une sorte de champ « intelligent » qui réalise des vérifications sur les données fournies par l'utilisateur. Vous trouverez plus de détails sur la validation des formulaires dans l'article [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire).
+- Pour la deuxième entrée, nous utilisons la valeur `email` qui définit un champ de texte sur une seule ligne n'acceptant que des adresses électroniques valides. Cette dernière valeur transforme un champ basique en une sorte de champ «&nbsp;intelligent&nbsp;» qui réalise des vérifications sur les données fournies par l'utilisateur. Vous trouverez plus de détails sur la validation des formulaires dans l'article [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire).
 
 Last but not least, remarquez la syntaxe de `<input>` vs `<textarea></textarea>`. C'est une des bizarreries du HTML. La balise `<input>` est un élément vide, ce qui signifie qu'il n'a pas besoin de balise fermante. Au contraire, {{HTMLElement("textarea")}} n'est pas un élément vide, il faut donc le fermer avec la balise fermante appropriée. Cela a un effet sur une caractéristique spécifique des formulaires HTML : la manière dont vous définissez la valeur par défaut. Pour définir une valeur par défaut d'un élément {{HTMLElement("input")}} vous devez utiliser l'attribut `value` de la manière suivante :
 
@@ -137,7 +137,7 @@ Notre formulaire est presque terminé. Il nous suffit seulement d'ajouter un bou
     </div>
 ```
 
-Comme vous le voyez l'élément {{htmlelement("button")}} accepte aussi un attribut de type — il peut prendre une des trois valeurs : `submit`, `reset` ou `button`.
+Comme vous le voyez l'élément {{htmlelement("button")}} accepte aussi un attribut de type — il peut prendre une des trois valeurs&nbsp;: `submit`, `reset` ou `button`.
 
 - Un clic sur un bouton `submit` (valeur par défaut) envoie les données du formulaire vers la page définie par l'attribut `action` de l'élément {{HTMLElement("form")}}.
 - Un clic sur un bouton `reset` réinitialise tous les widgets du formulaire à leurs valeurs par défaut immédiatement. Du point de vue de l'expérience utilisateur, utiliser un tel bouton est une mauvaise pratique.
@@ -151,11 +151,11 @@ Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre n
 
 ![](form-no-style.png)
 
-> **Note :** Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez  [first-form.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html) (ou [également directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)).
+> **Note :** Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez [first-form.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html) (ou [également directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)).
 
 Les formulaires sont notoirement embêtants à présenter joliment. Apprendre la mise en page ou la décoration des formulaires sort du cadre de cet article, donc pour le moment nous allons simplement ajouter quelques indications au CSS pour lui donner un air convenable.
 
-Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans l'en‑tête HTML. Comme ceci :
+Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans l'en‑tête HTML. Comme ceci&nbsp;:
 
 ```html
 <style>
@@ -163,7 +163,7 @@ Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans
 </style>
 ```
 
-Entre les balises style, ajoutons le CSS suivant, juste comme indiqué :
+Entre les balises style, ajoutons le CSS suivant, juste comme indiqué&nbsp;:
 
 ```css
 form {
@@ -239,16 +239,16 @@ L'élément {{HTMLElement("form")}} définit où et comment les données sont en
 
 Mais ce n'est pas tout. Nous avons aussi besoin de donner un nom à nos données. Ces noms sont importants pour deux raisons. Du côté du navigateur, cela sert à définir le nom de chaque élément de donnée. Du côté du serveur, chaque information doit avoir un nom pour être manipulée correctement.
 
-Pour nommer vos données vous devez utiliser l'attribut `name` pour identifier bien précisément l'élément d'information collecté par chacun des widgets. Regardons à nouveau le code de notre formulaire :
+Pour nommer vos données vous devez utiliser l'attribut `name` pour identifier bien précisément l'élément d'information collecté par chacun des widgets. Regardons à nouveau le code de notre formulaire&nbsp;:
 
 ```html
 <form action="/my-handling-form-page" method="post">
   <div>
-    <label for="name">Nom :</label>
+    <label for="name">Nom&nbsp;:</label>
     <input type="text" id="name" name="user_name" />
   <div>
   <div>
-    <label for="mail">E-mail :</label>
+    <label for="mail">E-mail&nbsp;:</label>
     <input type="email" id="mail" name="user_email" />
   </div>
   <div>
@@ -259,17 +259,17 @@ Pour nommer vos données vous devez utiliser l'attribut `name` pour identifier b
   ...
 ```
 
-Dans notre exemple, le formulaire enverra trois informations nommées respectivement « `user_name` », «&nbsp;`user_email`&nbsp;» et « `user_message` ». Ces informations seront envoyées à l'URL « `/my-handling-form-page` » avec la méthode HTTP POST.
+Dans notre exemple, le formulaire enverra trois informations nommées respectivement «&nbsp;`user_name`&nbsp;», «&nbsp;`user_email`&nbsp;» et «&nbsp;`user_message`&nbsp;». Ces informations seront envoyées à l'URL « `/my-handling-form-page` » avec la méthode HTTP POST.
 
 Du côté du serveur, le script à l'URL « `/my-handling-form-page` » recevra les données sous forme d'une liste de trois éléments clé/valeur intégrés à la requête HTTP. À vous de définir comment ce script va manipuler les données. Chacun des langages serveurs (PHP, Python, Ruby, Java, C#, etc.) a son propre mécanisme pour traiter ces données. Il n'appartient pas à ce guide d'approfondir ce sujet, mais si vous souhaitez en savoir plus, nous avons mis quelques exemples dans l'article [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires).
 
 ## Résumé
 
-Félicitations ! Vous avez construit votre premier formulaire HTML. Il ressemble à ceci :
+Félicitations ! Vous avez construit votre premier formulaire HTML. Il ressemble à ceci&nbsp;:
 
 {{EmbedLiveSample("Un_formulaire_simple", "100%", "240", "", "Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple")}}
 
-Toutefois, ce n'est qu'un début — il est désormais temps de regarder plus en détail. Les formulaires HTML sont bien plus puissants que ce que vous avez pu voir ici et les autres articles de ce guide vous aiderons à maîtriser le reste.
+Toutefois, ce n'est qu'un début — il est désormais temps de regarder plus en détail. Les formulaires HTML sont bien plus puissants que ce que vous avez pu voir ici et les autres articles de ce guide vous aiderons à maîtriser le reste.
 
 {{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}
 
diff --git a/files/fr/learn/front-end_web_developer/index.md b/files/fr/learn/front-end_web_developer/index.md
index 8912d6b416..378118d49e 100644
--- a/files/fr/learn/front-end_web_developer/index.md
+++ b/files/fr/learn/front-end_web_developer/index.md
@@ -67,7 +67,7 @@ Rien d'autre que des connaissances informatiques de base, et un environnement de
 
 #### Comment saurai-je que je suis prêt à passer à autre chose ?
 
-Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.
+Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.
 
 #### Guides fondamentaux
 
@@ -85,7 +85,7 @@ Il est recommandé d'avoir des connaissances de base en HTML avant de commencer
 
 #### Comment saurai-je que je suis prêt à passer à autre chose ?
 
-Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.
+Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.
 
 #### Guides fondamentaux
 
@@ -108,7 +108,7 @@ ll est recommandé d'avoir des connaissances de base en HTML avant de commencer
 
 #### Comment saurai-je que je suis prêt à passer à autre chose ?
 
-Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.
+Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.
 
 #### Guides fondamentaux
 
@@ -128,7 +128,7 @@ Les formulaires nécessitent des connaissances en HTML, CSS et JavaScript. Étan
 
 #### Comment saurai-je que je suis prêt à passer à autre chose ?
 
-Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.
+Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.
 
 #### Guides fondamentaux
 
@@ -144,7 +144,7 @@ Il est conseillé de connaître les langages HTML, CSS et JavaScript avant de pa
 
 #### Comment saurai-je que je suis prêt à passer à autre chose ?
 
-Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant..
+Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant..
 
 #### Guides fondamentaux
 
diff --git a/files/fr/learn/getting_started_with_the_web/css_basics/index.md b/files/fr/learn/getting_started_with_the_web/css_basics/index.md
index 50903d57fe..4021f41a89 100644
--- a/files/fr/learn/getting_started_with_the_web/css_basics/index.md
+++ b/files/fr/learn/getting_started_with_the_web/css_basics/index.md
@@ -14,7 +14,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_CSS
 {{LearnSidebar}}
 {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}}
 
-Les CSS (_Cascading Style Sheets_ en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web. _Les bases des CSS_ présentent ce qu'il faut savoir pour commencer. Nous répondrons à des questions comme : Comment rendre mon texte rouge ou noir ? Comment faire apparaître mon contenu à tel endroit de l'écran ? Comment décorer ma page web avec une image ou une couleur d'arrière-plan ?
+Les CSS (_Cascading Style Sheets_ en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web. _Les bases des CSS_ présentent ce qu'il faut savoir pour commencer. Nous répondrons à des questions comme : Comment rendre mon texte rouge ou noir ? Comment faire apparaître mon contenu à tel endroit de l'écran ? Comment décorer ma page web avec une image ou une couleur d'arrière-plan ?
 
 ## Donc, que sont les CSS, réellement ?
 
@@ -46,7 +46,7 @@ Regardons un peu plus en détails ce que nous avons écrit en CSS :
 
 ![Diagramme expliquant les différents éléments d'une déclaration CSS](CSS.svg)
 
-Cette structure s'appelle **un ensemble de règles** (ou seulement « une règle »). Les différentes parties se nomment :
+Cette structure s'appelle **un ensemble de règles** (ou seulement « une règle »). Les différentes parties se nomment :
 
 - Sélecteur
   - : C'est le nom de l'élément HTML situé au début de l'ensemble de règles. Il permet de sélectionner les éléments sur lesquels appliquer le style souhaité (en l'occurence, les éléments `p`). Pour mettre en forme un élément différent, il suffit de changer le sélecteur.
@@ -117,20 +117,20 @@ Maintenant que nous avons vu quelques bases de CSS, ajoutons quelques règles et
     }
     ```
 
-    > **Note :** Tout ce qui est entre `/*` et `*/` dans un document CSS est un **commentaire**  **de CSS.**  Le navigateur l'ignorera dans le rendu du code. C'est un endroit commode pour écrire des notes à propos de ce que vous faites.
+    > **Note :** Tout ce qui est entre `/*` et `*/` dans un document CSS est un **commentaire**  **de CSS.**  Le navigateur l'ignorera dans le rendu du code. C'est un endroit commode pour écrire des notes à propos de ce que vous faites.
 
 4.  Ensuite, fixons les tailles des différents textes contenus dans le corps du HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, et {{htmlelement("p")}}). Nous allons également centrer le texte du titre et donner une taille de ligne et un espacement de caractère entre les lettres pour que le contenu du corps (_body_) du document soit plus lisible :
 
     ```css
     h1 {
-      font-size: 60px;
-      text-align: center;
+      font-size: 60px;
+      text-align: center;
     }
 
     p, li {
-      font-size: 16px;
-      line-height: 2;
-      letter-spacing: 1px;
+      font-size: 16px;
+      line-height: 2;
+      letter-spacing: 1px;
     }
     ```
 
@@ -244,7 +244,7 @@ Dans cet article, nous n'avons fait qu'effleurer les bases de CSS. Pour continue
 ## Dans ce module
 
 - [Installer les logiciels de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base)
-- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site)
+- [Quel aspect pour votre site Web&nbsp;?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site)
 - [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers)
 - [Bases du HTML](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML)
 - [Bases des CSS](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS)
diff --git a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md
index 888c4afd58..ea40468473 100644
--- a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md
+++ b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md
@@ -17,7 +17,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Gérer_les_fichiers
 
 Un site web est composé de nombreux fichiers : contenu textuel, code, feuilles de styles, contenus média, etc. Lors de la construction d'un site web, ces fichiers doivent être organisés et rangés sur votre ordinateur afin qu'ils puissent interagir les uns avec les autres et que le contenu s'affiche correctement. Une fois que c'est fait, vous pourrez alors [téléverser ces fichiers sur un serveur](/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web). _Gérer les fichiers_ aborde certains problèmes auxquels vous devez faire attention pour mettre en place une organisation judicieuse des fichiers de votre site web.
 
-## Où placer votre site web sur votre ordinateur ?
+## Où placer votre site web sur votre ordinateur&nbsp;?
 
 Lorsque vous travaillez sur votre site web sur votre propre ordinateur, tous les fichiers liés au site devraient être présents dans un dossier dont le contenu reflète la structure des fichiers sur le serveur. Ce dossier peut être n'importe où sur votre ordinateur, l'idéal étant qu'il soit simple à retrouver, par exemple sur votre Bureau ou dans votre dossier personnel, voire à la racine du disque dur.
 
@@ -42,14 +42,14 @@ Cela dit, regardons la structure que le site de test devrait avoir. Les élémen
 3.  **un dossier `styles`**&nbsp;: ce dossier contiendra le code des CSS utilisé pour la mise en forme du contenu (par exemple pour définir les couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier nommé `styles` dans votre dossier `site-test`.
 4.  **un dossier `scripts`** : ce dossier contiendra le code JavaScript utilisé pour ajouter des fonctionnalités interactives sur votre site (par exemple, des boutons qui permettent de charger des données lorsqu'on clique dessus). Créez un dossier nommé `scripts` dans votre dossier `site-test`.
 
-> **Note :** Sur Windows, vous aurez peut être des problèmes pour voir le nom des fichiers en entier. En effet, Windows possède une option, activée par défaut : **Masquer les extensions pour les types de fichiers connus**. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant   **Options des dossiers...**, en enlevant la coche de **Masquer les extensions pour les types de fichier connus** puis en cliquant sur **OK**. Pour des informations propres à votre version de Windows, recherchez sur le Web !
+> **Note :** Sur Windows, vous aurez peut être des problèmes pour voir le nom des fichiers en entier. En effet, Windows possède une option, activée par défaut&nbsp;: **Masquer les extensions pour les types de fichiers connus**. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant   **Options des dossiers...**, en enlevant la coche de **Masquer les extensions pour les types de fichier connus** puis en cliquant sur **OK**. Pour des informations propres à votre version de Windows, recherchez sur le Web !
 
 ## Les chemins de fichiers
 
-Pour que les fichiers puissent converser entre eux, il faut préciser le chemin pour les trouver — en résumé, la route qu'un fichier doit connaître pour situer l'autre fichier. Nous allons illustrer cela avec un peu de HTML dans `index.html` pour que la page affiche l'image choisie dans l'article « [Quel aspect pour votre site web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) ».
+Pour que les fichiers puissent converser entre eux, il faut préciser le chemin pour les trouver — en résumé, la route qu'un fichier doit connaître pour situer l'autre fichier. Nous allons illustrer cela avec un peu de HTML dans `index.html` pour que la page affiche l'image choisie dans l'article « [Quel aspect pour votre site web&nbsp;?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site)&nbsp;».
 
 1.  Copiez l'image précédemment choisie dans votre dossier `images`.
-2.  Ouvrez le fichier `index.html` et insérez le code suivant exactement comme indiqué. Ne vous préoccupez pas de sa signification pour le moment — nous verrons les structures plus en détail par la suite.
+2.  Ouvrez le fichier `index.html` et insérez le code suivant exactement comme indiqué. Ne vous préoccupez pas de sa signification pour le moment — nous verrons les structures plus en détail par la suite.
 
     ```html
     <!DOCTYPE html>
@@ -79,7 +79,7 @@ Quelques règles générales à propos des chemins de fichier :
 
 Pour le moment, c'est tout ce qu'il y a à savoir.
 
-> **Note :** Le système de fichiers Windows utilise des barres obliques inversées (_backslash_ : « \ ») et non des barres obliques (_slash_ : « / »), par exemple `C:\windows`. Cela n'intervient pas en HTML — même si vous développez votre site sur Windows, vous devez toujours utiliser des barres obliques  (« / ») dans votre code..
+> **Note :** Le système de fichiers Windows utilise des barres obliques inversées (_backslash_ : « \ ») et non des barres obliques (_slash_ : « / »), par exemple `C:\windows`. Cela n'intervient pas en HTML — même si vous développez votre site sur Windows, vous devez toujours utiliser des barres obliques  (« / ») dans votre code..
 
 ## Autre chose ?
 
@@ -90,7 +90,7 @@ C'est tout ce qu'il y a à faire pour le moment en ce qui concerne les fichiers.
 ## Dans ce module
 
 - [Installer les logiciels de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base)
-- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site)
+- [Quel aspect pour votre site Web&nbsp;?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site)
 - [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers)
 - [Bases du HTML](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML)
 - [Bases des CSS](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS)
diff --git a/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.md b/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.md
index 7a9faca86f..7db199ac7d 100644
--- a/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.md
+++ b/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.md
@@ -24,7 +24,7 @@ Ces éléments théoriques ne sont pas strictement nécessaires pour commencer �
 
 ## Des clients et des serveurs
 
-Les ordinateurs qui se connectent au Web sont appelés des **clients** et des **serveurs**. Voici un diagramme simplifié qui illustre comment ils interagissent :
+Les ordinateurs qui se connectent au Web sont appelés des **clients** et des **serveurs**. Voici un diagramme simplifié qui illustre comment ils interagissent&nbsp;:
 
 ![](Client-server.jpg)
 
@@ -35,11 +35,11 @@ Les ordinateurs qui se connectent au Web sont appelés des **clients** et des **
 
 Le client et le serveur ne sont pas les seuls éléments qui interviennent. Il y a beaucoup d'autres composants que nous allons décrire dans la suite de cet article.
 
-Faisons un parallèle entre le Web et une rue. D'un côté de la rue, il y a une maison qui correspond au client. De l'autre côté,  un magasin correspondant au serveur, et dans lequel vous souhaitez acheter quelque chose.
+Faisons un parallèle entre le Web et une rue. D'un côté de la rue, il y a une maison qui correspond au client. De l'autre côté,  un magasin correspondant au serveur, et dans lequel vous souhaitez acheter quelque chose.
 
 ![](road.jpg)
 
-En plus du client et du serveur, nous devons aussi mentionner :
+En plus du client et du serveur, nous devons aussi mentionner :
 
 - **la connexion Internet** : elle permet l'envoi et la réception de données sur le web. Dans notre comparaison, elle correspond à la rue entre la maison et le magasin.
 - **TCP/IP** : **T**ransmission **C**ontrol **P**rotocol / **I**nternet **P**rotocol (en français : protocole de contrôle de transmission et protocole Internet) sont des protocoles définissant comment les données voyagent sur le web. C'est comme les mécanismes de transport qui vous permettent de passer une commande, d'aller au magasin et d'acheter vos marchandises. Dans notre exemple, ce serait une voiture ou un vélo (ou quoi que ce soit d'autre que vous trouveriez).
@@ -56,14 +56,14 @@ Lorsque vous saisissez une adresse web dans votre navigateur (dans notre compara
 
 1.  le navigateur demande au DNS l'adresse réelle du serveur contenant le site web (vous trouvez l'adresse du magasin).
 2.  le navigateur envoie une requête HTTP au serveur pour lui demander d'envoyer une copie du site web au client (vous allez au magasin et vous passez commande). Ce message, et les autres données envoyées entre le client et le serveur, sont échangés par l'intermédiaire de la connexion internet en utilisant TCP/IP.
-3.  si le serveur accepte la requête émise par le client, le serveur envoie un message « 200 OK » au client qui signifie : « Pas de problème, tu peux consulter ce site web, le voici ». Ensuite le serveur commence à envoyer les fichiers du site web au navigateur sous forme d'une série de petits morceaux nommés "paquet" (le magasin vous livre les produits et vous les ramenez chez vous).
-4.  le navigateur assemble les différents morceaux pour recomposer le site web en entier puis l'affiche sur votre écran (les produits sont à votre porte —  des nouveaux trucs tout neufs, génial !).
+3.  si le serveur accepte la requête émise par le client, le serveur envoie un message «&nbsp;200 OK&nbsp;» au client qui signifie : « Pas de problème, tu peux consulter ce site web, le voici ». Ensuite le serveur commence à envoyer les fichiers du site web au navigateur sous forme d'une série de petits morceaux nommés "paquet" (le magasin vous livre les produits et vous les ramenez chez vous).
+4.  le navigateur assemble les différents morceaux pour recomposer le site web en entier puis l'affiche sur votre écran (les produits sont à votre porte —  des nouveaux trucs tout neufs, génial !).
 
 ## Des explications sur le DNS
 
-Les vraies adresses Web ne sont pas les chaînes agréables et mémorisables que vous tapez dans votre barre d'adresse pour trouver vos sites Web favoris, mais des suites de chiffres. Ces suites de chiffre sont des nombres spéciaux qui ressemblent à ceci : 63.245.208.195.
+Les vraies adresses Web ne sont pas les chaînes agréables et mémorisables que vous tapez dans votre barre d'adresse pour trouver vos sites Web favoris, mais des suites de chiffres. Ces suites de chiffre sont des nombres spéciaux qui ressemblent à ceci : 63.245.208.195.
 
-Ce sont des {{Glossary("IP Address", "adresses IP")}} ; elles représentent un endroit unique sur le Web. Par contre, elles ne sont pas très faciles à retenir (n'est‑ce pas ?). C'est pour cela que le système des noms de domaine (DNS) a été conçu. Les serveurs DNS sont des serveurs spéciaux qui font correspondre une adresse web saisie dans le navigateur (par exemple « mozilla.org ») avec l'adresse réelle (IP) du serveur du site.
+Ce sont des {{Glossary("IP Address", "adresses IP")}} ; elles représentent un endroit unique sur le Web. Par contre, elles ne sont pas très faciles à retenir (n'est‑ce pas ?). C'est pour cela que le système des noms de domaine (DNS) a été conçu. Les serveurs DNS sont des serveurs spéciaux qui font correspondre une adresse web saisie dans le navigateur (par exemple « mozilla.org ») avec l'adresse réelle (IP) du serveur du site.
 
 Il est possible d'atteindre directement les sites web en utilisant leurs adresses IP. Pour aller sur le site de Mozilla, vous pouvez saisir `63.245.215.20` dans la barre d'adresse d'un nouvel onglet de votre navigateur.
 
diff --git a/files/fr/learn/getting_started_with_the_web/html_basics/index.md b/files/fr/learn/getting_started_with_the_web/html_basics/index.md
index c17845af41..928b4aabb0 100644
--- a/files/fr/learn/getting_started_with_the_web/html_basics/index.md
+++ b/files/fr/learn/getting_started_with_the_web/html_basics/index.md
@@ -18,7 +18,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML
 
 ## Qu'est-ce que HTML, réellement ?
 
-HTML n'est pas un langage de programmation. C'est un _langage de balises_ qui définit la structure de votre contenu. HTML se compose d'une série d'**{{Glossary("element", "éléments")}}**, utilisés pour entourer, ou envelopper, les diverses parties du contenu pour les faire apparaître ou agir d'une certaine façon. Les {{Glossary("tag", "balises")}} entourantes peuvent être rendues par un mot ou une image lien hypertexte vers quelque chose d'autre, un texte en italique, une police plus grande ou plus petite, et ainsi de suite. Par exemple, avec la ligne de contenu suivante :
+HTML n'est pas un langage de programmation. C'est un _langage de balises_ qui définit la structure de votre contenu. HTML se compose d'une série d'**{{Glossary("element", "éléments")}}**, utilisés pour entourer, ou envelopper, les diverses parties du contenu pour les faire apparaître ou agir d'une certaine façon. Les {{Glossary("tag", "balises")}} entourantes peuvent être rendues par un mot ou une image lien hypertexte vers quelque chose d'autre, un texte en italique, une police plus grande ou plus petite, et ainsi de suite. Par exemple, avec la ligne de contenu suivante :
 
     Mon chat est très grincheux
 
@@ -55,19 +55,19 @@ Un attribut doit toujours avoir :
 
 ### Imbriquer des éléments
 
-Vous pouvez placer des éléments au sein d'autres éléments, c'est ce qu'on appelle l'**imbrication**. Par exemple, si vous souhaitez montrer que votre chat est **très** grincheux, vous pouvez placer le mot « très » dans un élement {{htmlelement("strong")}}, signifiant que le mot sera fortement mis en relief :
+Vous pouvez placer des éléments au sein d'autres éléments, c'est ce qu'on appelle l'**imbrication**. Par exemple, si vous souhaitez montrer que votre chat est **très** grincheux, vous pouvez placer le mot « très » dans un élement {{htmlelement("strong")}}, signifiant que le mot sera fortement mis en relief&nbsp;:
 
 ```html example-good
 <p>Mon chat est <strong>très</strong> grincheux.</p>
 ```
 
-Toutefois, il faut faire attention à ce que les éléments soient bien imbriqués les uns dans les autres. Dans l'exemple précédent, on ouvre l'élément {{htmlelement("p")}}, puis l'élément {{htmlelement("strong")}}. Nous devrons donc fermer l'élément {{htmlelement("strong")}} d'abord, puis l'élement {{htmlelement("p")}}. Le code suivant est incorrect :
+Toutefois, il faut faire attention à ce que les éléments soient bien imbriqués les uns dans les autres. Dans l'exemple précédent, on ouvre l'élément {{htmlelement("p")}}, puis l'élément {{htmlelement("strong")}}. Nous devrons donc fermer l'élément {{htmlelement("strong")}} d'abord, puis l'élement {{htmlelement("p")}}. Le code suivant est incorrect&nbsp;:
 
 ```html example-bad
 <p>Mon chat est <strong>très grincheux.</p></strong>
 ```
 
-Les éléments doivent être ouverts et fermés correctement de façon à ce qu'ils soient clairement à l'intérieur ou à l'extérieur les uns des autres. S'ils se chevauchent, le navigateur essaiera de choisir la meilleure option, qui ne sera peut-être pas ce que vous vouliez dire et pourrait conduire à des résultats inattendus. Donc ne le faites pas !
+Les éléments doivent être ouverts et fermés correctement de façon à ce qu'ils soient clairement à l'intérieur ou à l'extérieur les uns des autres. S'ils se chevauchent, le navigateur essaiera de choisir la meilleure option, qui ne sera peut-être pas ce que vous vouliez dire et pourrait conduire à des résultats inattendus. Donc ne le faites pas&nbsp;!
 
 ### Les éléments vides
 
@@ -103,7 +103,7 @@ Cet exemple contient :
 - `<head></head>` — l'élément `<head>`. Cet élément est utilisé comme un container pour toutes les choses qui font partie de la page HTML mais qui ne sont pas du contenu affiché. C'est dans cet élément qu'on mettra des {{Glossary("keyword", "mots-clés")}}, une description de la page qui apparaîtra sur les moteurs de recherche, les liens vers les fichiers CSS à utiliser pour la mise en forme, les déclarations des jeux de caractères à utiliser et ainsi de suite.
 - `<body></body>` — l'élément {{htmlelement("body")}}. Cet élément est celui qui contient _tout_ le contenu que vous souhaitez afficher pour qu'il soit vu par les visiteurs : cela peut être du texte, des images, des vidéos, des jeux, des pistes audio jouables, et ainsi de suite.
 - `<meta charset="utf-8">` — Cet élément définit le jeu de caractères qui devrait être utilisé pour le document et indique que c'est utf-8. utf-8 regroupe l'ensemble des caractères connus utilisés dans les différents langages humains. Généralement, utf-8 permet de gérer n'importe quel texte que vous pourriez utiliser sur la page. Il n'y a pas de raison de ne pas le définir, et il permet d'éviter certains problèmes plus tard.
-- `<title></title>` — L'élément {{htmlelement("title")}} définit le titre de votre page. C'est ce titre qui apparaîtra sur l'onglet lorsque la page sera chargée. C'est également ce titre qui sera utilisé pour décrire la page lorsque vous la placez dans vos marques-pages.
+- `<title></title>` — L'élément {{htmlelement("title")}} définit le titre de votre page. C'est ce titre qui apparaîtra sur l'onglet lorsque la page sera chargée. C'est également ce titre qui sera utilisé pour décrire la page lorsque vous la placez dans vos marques-pages.
 
 ## Images
 
@@ -115,7 +115,7 @@ Regardons à nouveau l'élément image :
 
 Comme on l'a vu auparavant, cet élément permet d'intégrer une image dans la page, à l'endroit où l'élément apparaît. L'image utilisée est définie via l'attribut `src` (pour source) qui contient le chemin vers le fichier de l'image.
 
-Nous avons aussi utilisé l'attribut `alt` (pour **alt**ernatif). Il contient un texte descriptif de l'image à l'intention des utilisateurs qui ne peuvent pas voir l'image, car :
+Nous avons aussi utilisé l'attribut `alt` (pour **alt**ernatif). Il contient un texte descriptif de l'image à l'intention des utilisateurs qui ne peuvent pas voir l'image, car&nbsp;:
 
 1.  ils sont mal-voyants. Les utilisateurs handicapés visuellement utilisent souvent des outils nommés lecteurs d'écrans pour lire le texte de cet attribut ;
 2.  quelque chose s'est mal passé et l'image n'a pas pu être affichée. Par exemple, modifiez volontairement le chemin dans votre attribut `src` et faites qu'il soit incorrect. Si vous enregistrez et rechargez la page, vous verrez quelque chose comme ceci à la place de l'image :
@@ -209,7 +209,7 @@ Les liens sont très importants, ce sont eux qui font que le web est une **_toil
     <a href="https://www.mozilla.org/fr/about/manifesto/">Manifeste Mozilla</a>
     ```
 
-Attention à ne pas oublier la partie avec `https://` ou `http://` qui représente le _protocole_ utilisé, au début de l'adresse. Une fois que vous avez créé un lien, testez votre page et cliquez dessus pour vous assurer qu'il fonctionne correctement.
+Attention à ne pas oublier la partie avec `https://` ou `http://` qui représente le _protocole_ utilisé, au début de l'adresse. Une fois que vous avez créé un lien, testez votre page et cliquez dessus pour vous assurer qu'il fonctionne correctement.
 
 > **Note :** `href` peut sembler un peu étrange à première vue. Une explication sur l'origine du nom pourra vous aider à mieux vous en souvenir : href correspond à <i lang="en">**h**ypertext **ref**erence</i> en anglais, ce qui signifie « référence hypertexte » en français.
 
@@ -230,7 +230,7 @@ Dans cet article, nous n'avons fait qu'effleurer la surface de HTML. Pour en app
 ## Dans ce module
 
 - [Installer les logiciels de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base)
-- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site)
+- [Quel aspect pour votre site Web&nbsp;?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site)
 - [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers)
 - [Bases du HTML](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML)
 - [Bases des CSS](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS)
diff --git a/files/fr/learn/getting_started_with_the_web/index.md b/files/fr/learn/getting_started_with_the_web/index.md
index ab6e125564..29ca77bff6 100644
--- a/files/fr/learn/getting_started_with_the_web/index.md
+++ b/files/fr/learn/getting_started_with_the_web/index.md
@@ -38,15 +38,15 @@ Un site web contient plusieurs types de fichiers (texte, code, feuilles de style
 
 ### [Les bases de HTML](/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML)
 
-Hypertext Markup Language (HTML) correspond au code que vous utiliserez pour structurer les différents contenus en ligne. Par exemple, le contenu sera‑t‑il un ensemble de paragraphes, ou une liste à puces ? Y aura‑t‑il des images insérées ? Aurai‑je une table de données ? Sans vous submerger, [Les bases du HTML](/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML) vous donne assez d'informations pour que vous soyez un familier du HTML.
+Hypertext Markup Language (HTML) correspond au code que vous utiliserez pour structurer les différents contenus en ligne. Par exemple, le contenu sera‑t‑il un ensemble de paragraphes, ou une liste à puces ? Y aura‑t‑il des images insérées&nbsp;? Aurai‑je une table de données&nbsp;? Sans vous submerger, [Les bases du HTML](/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML) vous donne assez d'informations pour que vous soyez un familier du HTML.
 
 ### [Les bases des CSS](/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS)
 
-Les _Cascading Stylesheets_ (CSS) (« feuilles de styles en cascade ») reçoivent le code à utiliser pour mettre en forme votre site Web. Par exemple, voulez‑vous que le texte soit en noir ou en rouge ? Où le contenu doit‑il être placé sur l'écran ? Quelles devront être les images de fond et les couleurs utilisées pour décorer votre site web ? [« Les bases des CSS »](/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS) vous apprendra tout ce dont vous avez besoin pour commencer.
+Les _Cascading Stylesheets_ (CSS) (« feuilles de styles en cascade ») reçoivent le code à utiliser pour mettre en forme votre site Web. Par exemple, voulez‑vous que le texte soit en noir ou en rouge&nbsp;? Où le contenu doit‑il être placé sur l'écran&nbsp;? Quelles devront être les images de fond et les couleurs utilisées pour décorer votre site web&nbsp;? [«&nbsp;Les bases des CSS&nbsp;»](/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS) vous apprendra tout ce dont vous avez besoin pour commencer.
 
 ### [Les bases de JavaScript](/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript)
 
-JavaScript est le langage de programmation à utiliser pour ajouter des fonctionnalités interactives dans vos sites Web, par exemple des jeux, les événements déclenchés lorsqu'un bouton est pressé ou lorsque des données sont entrées dans un formulaire, des effets de style dynamiques, des animations, etc. [Les bases de JavaScript](/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript) vous offrent un aperçu des possibilités de ce puissant langage et vous montre comment commencer à l'utiliser.
+JavaScript est le langage de programmation à utiliser pour ajouter des fonctionnalités interactives dans vos sites Web, par exemple des jeux, les événements déclenchés lorsqu'un bouton est pressé ou lorsque des données sont entrées dans un formulaire, des effets de style dynamiques, des animations, etc. [Les bases de JavaScript](/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript) vous offrent un aperçu des possibilités de ce puissant langage et vous montre comment commencer à l'utiliser.
 
 ### [Publier votre site web](/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web)
 
diff --git a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md
index 7b45872eec..76ca1c920b 100644
--- a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md
+++ b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md
@@ -24,8 +24,8 @@ Dans cet article, nous allons vous montrer les outils dont vous aurez besoin pou
 - **Un navigateur web**, pour y tester le code. Les navigateurs les plus utilisés sont [Firefox](https://www.mozilla.org/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Safari](https://www.apple.com/safari/), [Internet Explorer](http://windows.microsoft.com/fr-fr/internet-explorer/download-ie) et [Microsoft Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) . Vous devez également tester le fonctionnement de votre site sur les appareils mobiles, et sur tous les anciens navigateurs que votre public cible utilise encore beaucoup (comme IE 8-10).
 - **Un éditeur graphique**, comme [GIMP](http://www.gimp.org/), [Paint.NET](http://www.getpaint.net/), [Krita](https://krita.org/) ou [Photoshop](http://www.adobe.com/uk/products/photoshop.html) pour réaliser les images de vos pages web.
 - **Un système de contrôle de versions**, pour gérer les fichiers sur le serveur, collaborer sur les projets avec une équipe, partager le code et les ressources et éviter les conflits d'édition. À ce jour, [Git](http://git-scm.com/) est l'outil lde contrôle de version le plus connu et le service d'hébergement de code [GitHub](https://github.com), fondé sur Git, est également très populaire**.**
-- **Un programme FTP**, utilisé sur les anciens comptes d'hébergement Web pour gérer les fichiers sur les serveurs  ([Git](http://git-scm.com/) remplace de plus en plus le FTP à cette fin). Il existe une grande quantité de programmes de ce genre comme [Cyberduck](https://cyberduck.io/), [Fetch](http://fetchsoftworks.com/) et [FileZilla](https://filezilla-project.org/).
-- **Un système d'automatisation**, comme [Grunt](http://gruntjs.com/) ou [Gulp](http://gulpjs.com/), pour automatiser les tâches répétitives, comme minimiser le code, ou lancer des tests.
+- **Un programme FTP**, utilisé sur les anciens comptes d'hébergement Web pour gérer les fichiers sur les serveurs  ([Git](http://git-scm.com/) remplace de plus en plus le FTP à cette fin). Il existe une grande quantité de programmes de ce genre comme [Cyberduck](https://cyberduck.io/), [Fetch](http://fetchsoftworks.com/) et [FileZilla](https://filezilla-project.org/).
+- **Un système d'automatisation**, comme [Grunt](http://gruntjs.com/) ou [Gulp](http://gulpjs.com/), pour automatiser les tâches répétitives, comme minimiser le code, ou lancer des tests.
 - Des modèles, bibliothèques, frameworks, etc. pour accélérer le développement de fonctionnalités courantes.
 - Et encore plus d'outils !
 
@@ -37,30 +37,30 @@ Cette liste peut paraître effrayante, mais heureusement vous pouvez vous lancer
 
 Vous avez probablement un éditeur de texte basique sur votre ordinateur. Par défaut Windows propose [Notepad](https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29) et macOS, [TextEdit](https://fr.wikipedia.org/wiki/TextEdit). Pour les distributions Linux cela varie. Ubuntu propose [gedit](https://fr.wikipedia.org/wiki/Gedit) par défaut.
 
-Pour le développement web, vous trouverez surement mieux que Notepad ou TextEdit. Nous vous recommandons de commencer avec [Visual Studio Code](https://code.visualstudio.com/),  qui est un éditeur libre offrant des aperçus en direct et des conseils de code.
+Pour le développement web, vous trouverez surement mieux que Notepad ou TextEdit. Nous vous recommandons de commencer avec [Visual Studio Code](https://code.visualstudio.com/),  qui est un éditeur libre offrant des aperçus en direct et des conseils de code.
 
 ### Installer un navigateur moderne
 
 Pour l'instant, nous n'installerons que deux navigateurs pour y tester notre code. Choisissez votre système d'exploitation ci-dessous et cliquez sur les liens pour télécharger les programmes d'installation correspondants à vos navigateurs favoris :
 
 - Linux : [Firefox](https://www.mozilla.org/en-US/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/).
-- Windows : [Firefox](https://www.mozilla.org/en-US/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/download-ie),  [Microsoft Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) (Windows 10 est livré avec Edge par défaut, si vous avez Windows 7 ou supérieur, vous pouvez installer Internet Explorer 11, sinon, vous devez installer un autre navigateur).
+- Windows : [Firefox](https://www.mozilla.org/en-US/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/download-ie),  [Microsoft Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) (Windows 10 est livré avec Edge par défaut, si vous avez Windows 7 ou supérieur, vous pouvez installer Internet Explorer 11, sinon, vous devez installer un autre navigateur).
 - Mac : [Firefox](https://www.mozilla.org/en-US/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Safari](https://www.apple.com/safari/) (Safari est proposé sur iOS et macOS par défaut).
 
 Avant de continuer, vous devriez installer au moins deux de ces navigateurs et les préparer pour les tests.
 
-**Note**: Internet Explorer n'est pas compatible avec les dernières améliorations proposées par le Web. Il est possible que votre projet ne fonctionne pas sur ce navigateur. Vous n'avez généralement pas à vous soucier de rendre vos projets Web compatibles avec celui-ci, car très peu de personnes l'utilisent encore. Mais pour certains besoins spécifique, il faudra rendre votre projet compatible.
+**Note**: Internet Explorer n'est pas compatible avec les dernières améliorations proposées par le Web. Il est possible que votre projet ne fonctionne pas sur ce navigateur. Vous n'avez généralement pas à vous soucier de rendre vos projets Web compatibles avec celui-ci, car très peu de personnes l'utilisent encore. Mais pour certains besoins spécifique, il faudra rendre votre projet compatible.
 
 ### Installer un serveur web local
 
-Certains projets Web ont besoin d'être lancés sur un serveur Web pour fonctionner correctement. Vous pouvez trouver ces explications ici: [Comment installer en local un serveur de tests ?](/fr/Apprendre/Common_questions/configurer_un_serveur_de_test_local)
+Certains projets Web ont besoin d'être lancés sur un serveur Web pour fonctionner correctement. Vous pouvez trouver ces explications ici: [Comment installer en local un serveur de tests&nbsp;?](/fr/Apprendre/Common_questions/configurer_un_serveur_de_test_local)
 
 {{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}}
 
 ## Dans ce module
 
 - [Installer les logiciels de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base)
-- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site)
+- [Quel aspect pour votre site Web&nbsp;?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site)
 - [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers)
 - [Bases du HTML](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML)
 - [Bases des CSS](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS)
diff --git a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md
index c921163441..6bf3f0f88e 100644
--- a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md
+++ b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md
@@ -13,41 +13,41 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_JavaScript
 {{LearnSidebar}}
 {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}
 
-JavaScript est un langage de programmation qui ajoute de l'interactivité à votre site web (par exemple : jeux, réponses quand on clique sur un bouton ou des données entrées dans des formulaires, composition dynamique, animations). Cet article vous aide à débuter dans ce langage passionnant et vous donne une idée de ses possibilités.
+JavaScript est un langage de programmation qui ajoute de l'interactivité à votre site web (par exemple&nbsp;: jeux, réponses quand on clique sur un bouton ou des données entrées dans des formulaires, composition dynamique, animations). Cet article vous aide à débuter dans ce langage passionnant et vous donne une idée de ses possibilités.
 
 ## Qu'est le JavaScript, réellement ?
 
-{{Glossary("JavaScript")}} (« JS » en abrégé) est un langage de {{Glossary("Dynamic programming language", "programmation dynamique")}} complet qui, appliqué à un document {{Glossary("HTML")}}, peut fournir une interactivité dynamique sur les sites Web. Il a été inventé par Brendan Eich, co-fondateur du projet Mozilla, de la Mozilla Foundation et de la Mozilla Corporation.
+{{Glossary("JavaScript")}} («&nbsp;JS&nbsp;» en abrégé) est un langage de {{Glossary("Dynamic programming language", "programmation dynamique")}} complet qui, appliqué à un document {{Glossary("HTML")}}, peut fournir une interactivité dynamique sur les sites Web. Il a été inventé par Brendan Eich, co-fondateur du projet Mozilla, de la Mozilla Foundation et de la Mozilla Corporation.
 
 JavaScript est d'une incroyable flexibilité. Vous pouvez commencer petit, avec des carrousels, des galeries d'images, des variations de mises en page et des réponses aux clics de boutons. Avec plus d'expérience, vous serez en mesure de créer des jeux, des graphiques 2D et 3D animés, des applications complètes fondées sur des bases de données et bien plus encore !
 
-JavaScript est plutôt compact tout en étant très souple. Les développeurs ont écrit de nombreux outils sur le cœur du langage JavaScript, créant des fonctionnalités supplémentaires très simplement. Parmi ces outils, il y a :
+JavaScript est plutôt compact tout en étant très souple. Les développeurs ont écrit de nombreux outils sur le cœur du langage JavaScript, créant des fonctionnalités supplémentaires très simplement. Parmi ces outils, il y a :
 
-- des Interfaces de Programmation d'Applications pour navigateurs ({{Glossary("API","API")}}) — API intégrées aux navigateurs web permettant de créer dynamiquement du HTML, de définir des styles de CSS, de collecter et manipuler un flux vidéo depuis la webcam de l'utilisateur ou de créer des graphiques 3D et des échantillonnages audio.
+- des Interfaces de Programmation d'Applications pour navigateurs ({{Glossary("API","API")}}) — API intégrées aux navigateurs web permettant de créer dynamiquement du HTML, de définir des styles de CSS, de collecter et manipuler un flux vidéo depuis la webcam de l'utilisateur ou de créer des graphiques 3D et des échantillonnages audio.
 - des API tierces‑parties permettant aux développeurs d'incorporer dans leurs sites des fonctionnalités issues d'autres fournisseurs de contenu, comme Twitter ou Facebook.
 - des modèles et bibliothèques tierces‑parties applicables à votre HTML permettant de mettre en œuvre rapidement des sites et des applications.
 
 Comme cet article est une introduction simplifiée à JavaScript, nous n'allons pas compliquer les choses à ce stade en entrant dans les détails sur les différences entre le coeur du langage JavaScript et les différents outils cités plus haut. Vous pourrez entrer dans ces détails plus tard grâce à notre [centre d'apprentissage JavaScript](/fr/docs/Apprendre/JavaScript), et le reste du MDN.
 
-Ci-dessous nous allons vous présenter quelques aspects du coeur du langage, et vous pratiquerez aussi en manipulant les fonctionnalités des API navigateur. Amusez-vous !
+Ci-dessous nous allons vous présenter quelques aspects du coeur du langage, et vous pratiquerez aussi en manipulant les fonctionnalités des API navigateur. Amusez-vous !
 
 ## Un exemple « hello world »
 
 Le paragraphe précédent laisse entrevoir quelque chose de passionnant, et cela l'est vraiment — JavaScript est une technologie web parmi les plus dynamiques. Une fois que vous commencerez à être autonome en JavaScript, vous entrerez dans une nouvelle dimension de puissance et créativité.
 
-Cependant, être à l'aise avec JavaScript est plus dur que de l'être avec HTML ou CSS. Vous pourrez démarrer petit et continuer à travailler par petites étapes de façon soutenue. Pour commencer, nous allons vous montrer comment ajouter un JavaScript basique à votre page, en créant un exemple « Hello world ! » ([la norme en matière d'exemples de programmation de base](https://fr.wikipedia.org/wiki/Hello_world)).
+Cependant, être à l'aise avec JavaScript est plus dur que de l'être avec HTML ou CSS. Vous pourrez démarrer petit et continuer à travailler par petites étapes de façon soutenue. Pour commencer, nous allons vous montrer comment ajouter un JavaScript basique à votre page, en créant un exemple « Hello world&nbsp;!&nbsp;» ([la norme en matière d'exemples de programmation de base](https://fr.wikipedia.org/wiki/Hello_world)).
 
 > **Attention :** Si vous rejoignez cette série d'articles en cours de route, [téléchargez cet exemple de code](https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip) et utilisez‑le comme point de départ.
 
-1.  Tout d'abord, allez sur votre site de test et créez un nouveau dossier nommé « scripts » (sans guillemets). Ensuite, dans le nouveau dossier `scripts` que vous venez de créer, créez un nouveau fichier appelé main.js. Sauvegardez-le dans votre dossier scripts.
+1.  Tout d'abord, allez sur votre site de test et créez un nouveau dossier nommé «&nbsp;scripts&nbsp;» (sans guillemets). Ensuite, dans le nouveau dossier `scripts` que vous venez de créer, créez un nouveau fichier appelé main.js. Sauvegardez-le dans votre dossier scripts.
 2.  Ensuite, dans votre fichier `index.html`, ajoutez l'élément suivant sur une nouvelle ligne avant la balise fermante `</body>` :
 
     ```html
     <script src="scripts/main.js"></script>
     ```
 
-3.  Cet élément a le même rôle que l'élément {{htmlelement("link")}} pour le CSS — il applique le code JavaScript à la page, de sorte qu'il puisse avoir de l'effet sur le HTML (en même temps que le CSS et autres sur la page).
-4.  Maintenant ajoutez le code suivant dans `main.js` :
+3.  Cet élément a le même rôle que l'élément {{htmlelement("link")}} pour le CSS — il applique le code JavaScript à la page, de sorte qu'il puisse avoir de l'effet sur le HTML (en même temps que le CSS et autres sur la page).
+4.  Maintenant ajoutez le code suivant dans `main.js`&nbsp;:
 
     ```js
     let myHeading = document.querySelector('h1');
@@ -56,13 +56,13 @@ Cependant, être à l'aise avec JavaScript est plus dur que de l'être avec HTML
 
 5.  Assurez-vous que les fichiers HTML et JavaScript soient enregistrés puis chargez `index.html` dans votre navigateur. Vous devriez obtenir quelque chose comme :![](hello-world.png)
 
-> **Note :** La raison pour laquelle nous avons placé l'élément {{htmlelement("script")}} en bas du fichier HTML est que le HTML est chargé par le navigateur dans l'ordre dans lequel il apparaît dans le fichier. Si le JavaScript est chargé en premier et qu'il est supposé affecter le HTML en dessous, il pourrait ne pas fonctionner, car le JavaScript serait chargé avant le HTML sur lequel il est supposé travailler. Par conséquent, placer JavaScript près du bas de la page HTML est souvent la meilleure stratégie.
+> **Note :** La raison pour laquelle nous avons placé l'élément {{htmlelement("script")}} en bas du fichier HTML est que le HTML est chargé par le navigateur dans l'ordre dans lequel il apparaît dans le fichier. Si le JavaScript est chargé en premier et qu'il est supposé affecter le HTML en dessous, il pourrait ne pas fonctionner, car le JavaScript serait chargé avant le HTML sur lequel il est supposé travailler. Par conséquent, placer JavaScript près du bas de la page HTML est souvent la meilleure stratégie.
 
 ### Que s'est-il passé ?
 
-Le texte du titre a été changé en «Bonjour, monde ! » en utilisant JavaScript. Pour cela, on a utilisé une fonction appelée {{domxref("Document.querySelector", "querySelector()")}} pour obtenir une référence sur l'en‑tête et la stocker dans une variable appelée `myHeading`. C'est assez proche de ce qu'on a fait avec les sélecteurs CSS. Lorsqu'on souhaite manipuler un élément, il faut d'abord le sélectionner.
+Le texte du titre a été changé en «Bonjour, monde ! » en utilisant JavaScript. Pour cela, on a utilisé une fonction appelée {{domxref("Document.querySelector", "querySelector()")}} pour obtenir une référence sur l'en‑tête et la stocker dans une variable appelée `myHeading`. C'est assez proche de ce qu'on a fait avec les sélecteurs CSS. Lorsqu'on souhaite manipuler un élément, il faut d'abord le sélectionner.
 
-Ensuite, nous fixons à « Bonjour, monde ! » la valeur de la propriété {{domxref("Node.textContent", "textContent")}} de la variable `myHeading` (elle représente le contenu du titre).
+Ensuite, nous fixons à «&nbsp;Bonjour, monde !&nbsp;» la valeur de la propriété {{domxref("Node.textContent", "textContent")}} de la variable `myHeading` (elle représente le contenu du titre).
 
 > **Note :** Les deux fonctions que vous avez utilisées ci-dessus font partie de l'API Document Object Model (DOM), qui vous permet de manipuler les documents.
 
@@ -74,17 +74,17 @@ Nous allons explorer les fonctionnalités de base de JavaScript pour que vous pu
 
 ### Variables
 
-Les {{Glossary("Variable", "variables")}} sont des conteneurs dans lesquels on peut stocker des valeurs. Pour commencer, il faut déclarer une variable avec le mot-clé `let` en le faisant suivre de son nom :
+Les {{Glossary("Variable", "variables")}} sont des conteneurs dans lesquels on peut stocker des valeurs. Pour commencer, il faut déclarer une variable avec le mot-clé `let` en le faisant suivre de son nom&nbsp;:
 
 ```js
 let myVariable;
 ```
 
-> **Note :** Un point-virgule en fin de ligne indique là où se termine l'instruction ; ce n'est impérativement requis que si vous devez séparer des instructions sur une même ligne. Toutefois, certains pensent qu'il est de bonne pratique de les mettre à la fin de chaque instruction. Il y a d'autres règles à propos de leur emploi ou non‑emploi — voyez [Guide des points‑virgule en JavaScript](http://news.codecademy.com/your-guide-to-semicolons-in-javascript/) pour plus de détails.
+> **Note :** Un point-virgule en fin de ligne indique là où se termine l'instruction&nbsp;; ce n'est impérativement requis que si vous devez séparer des instructions sur une même ligne. Toutefois, certains pensent qu'il est de bonne pratique de les mettre à la fin de chaque instruction. Il y a d'autres règles à propos de leur emploi ou non‑emploi — voyez [Guide des points‑virgule en JavaScript](http://news.codecademy.com/your-guide-to-semicolons-in-javascript/) pour plus de détails.
 
 > **Note :** Vous pouvez utiliser (quasiment) n'importe quel nom pour nommer une variable, mais il y a quelques restrictions (voyez [cet article](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Variables) sur les règles de nommage des variables). Si vous avez un doute, vous pouvez [vérifier le nom de votre variable](https://mothereff.in/js-variables) pour voir s'il est valide.
 
-> **Note :** JavaScript est sensible à la casse — `myVariable` est une variable différente de `myvariable`. Si vous avez des problèmes dans votre code, vérifiez la casse  !
+> **Note :** JavaScript est sensible à la casse — `myVariable` est une variable différente de `myvariable`. Si vous avez des problèmes dans votre code, vérifiez la casse &nbsp;!
 
 Une fois une variable déclarée, vous pouvez lui donner une valeur :
 
@@ -92,13 +92,13 @@ Une fois une variable déclarée, vous pouvez lui donner une valeur :
 myVariable = 'Bob';
 ```
 
-Vous pouvez faire les deux opérations sur une même ligne si vous le souhaitez :
+Vous pouvez faire les deux opérations sur une même ligne si vous le souhaitez&nbsp;:
 
 ```js
 let myVariable = 'Bob';
 ```
 
-Vous retrouvez la valeur en appelant simplement la variable par son nom :
+Vous retrouvez la valeur en appelant simplement la variable par son nom&nbsp;:
 
 ```js
 myVariable;
@@ -111,7 +111,7 @@ let myVariable = 'Bob';
 myVariable = 'Étienne';
 ```
 
-Notez que les variables peuvent contenir des [types différents de données](/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives) :
+Notez que les variables peuvent contenir des [types différents de données](/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives)&nbsp;:
 
 <table class="standard-table">
   <thead>
@@ -156,7 +156,7 @@ Notez que les variables peuvent contenir des [types différents de données](/fr
       <td>
         <p>
           <code>let myVariable = [1,'Bob','Étienne',10];</code
-          ><br />Référez‑vous à chaque élément du tableau ainsi <code
+          ><br />Référez‑vous à chaque élément du tableau ainsi <code
             >: myVariable[0]</code
           >, <code>myVariable[1]</code>, etc.
         </p>
@@ -216,7 +216,7 @@ Un {{Glossary("operator","opérateur")}} est un symbole mathématique qui produi
       </td>
       <td><code>+</code></td>
       <td>
-        <code>6 + 9;<br />"Bonjour " + "monde !";</code>
+        <code>6 + 9;<br />"Bonjour " + "monde&nbsp;!";</code>
       </td>
     </tr>
     <tr>
@@ -253,7 +253,7 @@ Un {{Glossary("operator","opérateur")}} est un symbole mathématique qui produi
       <th scope="row">Négation , N'égale pas</th>
       <td>
         <p>
-          Renvoie la valeur logique opposée à ce qu'il précède ; il change <code
+          Renvoie la valeur logique opposée à ce qu'il précède&nbsp;; il change <code
             >true</code
           >
           en <code>false</code>, etc. Utilisé avec l'opérateur d'égalité,
@@ -299,7 +299,7 @@ if (iceCream === 'chocolat') {
 }
 ```
 
-L'expression contenue dans `if ( ... )` correspond au test — Ici, on utilise l'opérateur d'égalité (décrit plus haut) pour comparer la variable iceCream avec la chaîne de caractères `chocolat` pour voir si elles sont égales. Si cette comparaison renvoie `true`, le premier bloc de code sera exécuté. Sinon, le premier bloc est sauté et  c'est le code du second bloc, celui présent après  `else`, qui est exécuté.
+L'expression contenue dans `if ( ... )` correspond au test — Ici, on utilise l'opérateur d'égalité (décrit plus haut) pour comparer la variable iceCream avec la chaîne de caractères `chocolat` pour voir si elles sont égales. Si cette comparaison renvoie `true`, le premier bloc de code sera exécuté. Sinon, le premier bloc est sauté et c'est le code du second bloc, celui présent après  `else`, qui est exécuté.
 
 ### Fonctions
 
@@ -335,11 +335,11 @@ multiply(20, 20);
 multiply(0.5, 3);
 ```
 
-> **Note :** L'instruction [`return`](/fr/docs/Web/JavaScript/Reference/Instructions/return) indique au navigateur qu'il faut renvoyer la variable `result` en dehors de la fonction afin qu'elle puisse être réutilisée par ailleurs. Cette instruction est nécessaire car les variables définies à l'intérieur des fonctions sont uniquement disponibles à l'intérieur de ces fonctions. C'est ce qu'on appelle une {{Glossary("Portée", "portée")}} (pour en savoir plus, lisez [cet article](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_portées_de_variables)).
+> **Note :** L'instruction [`return`](/fr/docs/Web/JavaScript/Reference/Instructions/return) indique au navigateur qu'il faut renvoyer la variable `result` en dehors de la fonction afin qu'elle puisse être réutilisée par ailleurs. Cette instruction est nécessaire car les variables définies à l'intérieur des fonctions sont uniquement disponibles à l'intérieur de ces fonctions. C'est ce qu'on appelle une {{Glossary("Portée", "portée")}} (pour en savoir plus, lisez [cet article](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_portées_de_variables)).
 
 ### Événements
 
-Pour qu'un site web soit vraiment interactif, vous aurez besoin d'événements. Les événements sont des structures de code qui « écoutent » ce qui se passe dans le navigateur et déclenchent du code en réponse. Le meilleur exemple est [l'événement cliquer](/fr/docs/Web/Events/click), déclenché par le navigateur quand vous cliquez sur quelque chose avec la souris. À titre de démonstration, saisissez ces quelques lignes dans la console, puis cliquez sur la page en cours :
+Pour qu'un site web soit vraiment interactif, vous aurez besoin d'événements. Les événements sont des structures de code qui « écoutent » ce qui se passe dans le navigateur et déclenchent du code en réponse. Le meilleur exemple est [l'événement cliquer](/fr/docs/Web/Events/click), déclenché par le navigateur quand vous cliquez sur quelque chose avec la souris. À titre de démonstration, saisissez ces quelques lignes dans la console, puis cliquez sur la page en cours&nbsp;:
 
 ```js
 document.querySelector('html').addEventListener('click', function() {
@@ -374,8 +374,8 @@ Dans cette section, nous allons incorporer une autre image au site en utilisant
 
 1.  Tout d'abord, trouvez une autre image à afficher sur le site. Assurez‑vous qu'elle soit de même taille que la première, ou le plus possible approchante.
 2.  Enregistrez cette image dans votre dossier `images`.
-3.  Renommez cette image « firefox2.png » (sans les guillemets).
-4.  Dans le fichier `main.js`, entrez ce code JavaScript (si votre code « Bonjour, monde » est toujours là, supprimez‑le) :
+3.  Renommez cette image «&nbsp;firefox2.png&nbsp;» (sans les guillemets).
+4.  Dans le fichier `main.js`, entrez ce code JavaScript (si votre code « Bonjour, monde&nbsp;» est toujours là, supprimez‑le) :
 
     ```js
     let myImage = document.querySelector('img');
@@ -394,7 +394,7 @@ Dans cette section, nous allons incorporer une autre image au site en utilisant
 
 Dans cet exemple, nous utilisons une référence vers l'élement {{htmlelement("img")}} grâce à la variable `myImage`. Ensuite, nous égalons la propriété du gestionnaire d'événement `onclick` de cette variable à une fonction sans nom (une fonction anonyme). Maintenant chaque fois que cet élément est cliqué :
 
-1.  nous récupèrons la valeur de l'attribut `src` de l'image.
+1.  nous récupèrons la valeur de l'attribut `src` de l'image.
 2.  nous utilisons une structure conditionnelle pour voir si la valeur de `src` est égale au chemin de l'image originale :
 
     1.  si c'est le cas, nous changeons la valeur de `src` et indiquons le chemin vers la seconde image, forçant le chargement de cette image dans l'élément {{htmlelement("img")}}.
@@ -417,7 +417,7 @@ Continuons en ajoutant encore un peu de code pour changer le titre de la page af
     let myHeading = document.querySelector('h1');
     ```
 
-3.  Ajoutons maintenant les fonctionnalités pour avoir ce message d'accueil personnalisé (cela ne servira pas immédiatement mais un peu plus tard) :
+3.  Ajoutons maintenant les fonctionnalités pour avoir ce message d'accueil personnalisé (cela ne servira pas immédiatement mais un peu plus tard) :
 
     ```js
     function setUserName() {
@@ -440,13 +440,13 @@ Continuons en ajoutant encore un peu de code pour changer le titre de la page af
     }
     ```
 
-    Ce bloc utilise l'opérateur de négation (NON logique, représenté avec le !) pour vérifier si le navigateur possède une donnée enregistrée appelée `nom`. Si non, la fonction `setUserName()` est appelée pour créer cette donnée. Si elle existe (ce qui correspond au cas où l'utilisateur est déjà venu sur la page), on la récupère avec la méthode `getItem()` et on définit le contenu de `textContent` pour le titre avec une chaîne suivie du nom de l'utilisateur, comme nous le faisons dans  `setUserName().`
+    Ce bloc utilise l'opérateur de négation (NON logique, représenté avec le !) pour vérifier si le navigateur possède une donnée enregistrée appelée `nom`. Si non, la fonction `setUserName()` est appelée pour créer cette donnée. Si elle existe (ce qui correspond au cas où l'utilisateur est déjà venu sur la page), on la récupère avec la méthode `getItem()` et on définit le contenu de `textContent` pour le titre avec une chaîne suivie du nom de l'utilisateur, comme nous le faisons dans  `setUserName().`
 
 5.  Enfin, on associe le gestionnaire `onclick` au bouton. De cette façon, quand on clique sur le bouton, cela déclenchera l'exécution de la fonction `setUserName()`. Ce bouton permet à l'utilisateur de modifier la valeur s'il le souhaite:
 
     ```js
     myButton.addEventListener('click', function() {
-      setUserName();
+      setUserName();
     });
     ```
 
@@ -467,7 +467,7 @@ Au fur et à mesure de cet article, nous n'avons fait qu'effleurer la surface de
 ## Dans ce module
 
 - [Installer les logiciels de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base)
-- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site)
+- [Quel aspect pour votre site Web&nbsp;?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site)
 - [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers)
 - [Bases du HTML](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML)
 - [Bases des CSS](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS)
diff --git a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md
index 3e684306e0..c2e70950d2 100644
--- a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md
+++ b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md
@@ -37,7 +37,7 @@ En plus, vous aurez besoin d'un programme de {{Glossary("FTP", "Protocole de tra
 
 #### Suggestions pour trouver hébergement et domaines
 
-- Nous ne faisons pas la promotion de sociétés commerciales d'hébergement ou de bureaux d'enregistrement particuliers. Pour trouver des hébergeurs et des bureaux d'enregistrement, faites une recherche pour « hébergement web » et « noms de domaine ». Tous les bureaux d'enregistrement auront une fonctionnalité vous permettant de vérifier si le nom de domaine voulu est disponible ou si quelqu'un d'autre l'a déjà enregistré.
+- Nous ne faisons pas la promotion de sociétés commerciales d'hébergement ou de bureaux d'enregistrement particuliers. Pour trouver des hébergeurs et des bureaux d'enregistrement, faites une recherche pour «&nbsp;hébergement web&nbsp;» et «&nbsp;noms de domaine&nbsp;». Tous les bureaux d'enregistrement auront une fonctionnalité vous permettant de vérifier si le nom de domaine voulu est disponible ou si quelqu'un d'autre l'a déjà enregistré.
 - Votre {{Glossary("ISP", "Fournisseur d'Accès Internet (FAI)")}} fournit peut-être un hébergement limité pour un petit site web. L'ensemble des fonctionnalités disponibles sera limité, mais il pourrait être parfait pour vos premières expériences.
 - Il existe quelques services gratuits tels que [Neocities](https://neocities.org/), [Google Sites](https://sites.google.com/), [Blogger](https://www.blogger.com). À nouveau, vous n'en aurez que pour votre argent, mais ils sont idéaux pour vos expérimentations initiales. Les services gratuits ne nécessitent pour la plupart pas de logiciel FTP pour le téléversement — il suffira de faire un glisser/déposer directement sur leur interface web.
 - Parfois, des sociétés fournissent hébergement et domaine dans un même paquet.
@@ -46,7 +46,7 @@ En plus, vous aurez besoin d'un programme de {{Glossary("FTP", "Protocole de tra
 
 Certains outils vous permettent de publier votre site web en ligne :
 
-- [GitHub](https://github.com/) est un site de « codage collaboratif ». Il vous permet de téléverser des dépôts de code pour stockage dans le **système de gestion de versions** [Git](http://git-scm.com/)**.** Vous pouvez alors collaborer à des projets de code ; le système est open source par défaut, ce qui signifie que n'importe qui dans le monde peut trouver votre code GitHub, l'utiliser, en tirer des leçons, et l'améliorer. GitHub a une fonctionnalité très utile appelée [Pages GitHub](https://pages.github.com/), qui vous permet de présenter du code de site web en direct sur le web.
+- [GitHub](https://github.com/) est un site de «&nbsp;codage collaboratif&nbsp;». Il vous permet de téléverser des dépôts de code pour stockage dans le **système de gestion de versions** [Git](http://git-scm.com/)**.** Vous pouvez alors collaborer à des projets de code ; le système est open source par défaut, ce qui signifie que n'importe qui dans le monde peut trouver votre code GitHub, l'utiliser, en tirer des leçons, et l'améliorer. GitHub a une fonctionnalité très utile appelée [Pages GitHub](https://pages.github.com/), qui vous permet de présenter du code de site web en direct sur le web.
 - [Google App Engine](https://cloud.google.com/appengine/ "App Engine - Build Scalable Web & Mobile Backends in Any Language | Google Cloud Platform") est une plateforme puissante qui vous permet de construire et d'exécuter des applications sur l'infrastructure de Google --- que vous ayez besoin de construire une application web multi‑couche à partir de zéro ou d'héberger un site web statique. Voir [Comment héberger votre site Web sur Google App Engine ?](/fr/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine) pour plus d'information.
 
 Ces options sont généralement gratuites, mais vous risquez d'être dépassé par les limitations du nombre de fonctionnalités.
diff --git a/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
index fb54d0a57e..83a65e1f2e 100644
--- a/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
+++ b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
@@ -14,7 +14,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site
 {{LearnSidebar}}
 {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Installation_outils_de_base","Apprendre/Commencer_avec_le_web/Gérer_les_fichiers","Apprendre/Commencer_avec_le_web")}}
 
-_Quel sera l'aspect de votre site web ?_ parle de planifier et concevoir (_design_), travaux à faire _avant_ d'écrire du code. Voici les questions que cela comprend : « Quelles informations mon site web offrira-t-il ? », « Quelles polices de caractères et quelles couleurs souhaité-je ? » et « Que fait mon site web ? ».
+_Quel sera l'aspect de votre site web ?_ parle de planifier et concevoir (_design_), travaux à faire _avant_ d'écrire du code. Voici les questions que cela comprend&nbsp;: « Quelles informations mon site web offrira-t-il ? », « Quelles polices de caractères et quelles couleurs souhaité-je ? » et « Que fait mon site web ? ».
 
 ## Commençons par le commencement : planification
 
@@ -22,15 +22,15 @@ Avant de faire quoi que ce soit, vous avez besoin d'idées. Qu'est-ce que votre
 
 Pour commencer, posez-vous ces questions :
 
-1.  **De quoi va parler mon site web ?** Aimez-vous les chiens, New York ou Pacman ?
+1.  **De quoi va parler mon site web ?** Aimez-vous les chiens, New York ou Pacman ?
 2.  **Quelles informations vais-je présenter sur le sujet ?** Écrivez un titre et quelques paragraphes, et trouvez une image que vous aimeriez mettre sur votre page.
-3.  **Quelle sera l'apparence de mon site web,** en simple termes de survol ? Quelle sera la couleur de l'arrière plan ? Quelle sorte de police de caractères est appropriée : formelle, dessin animé, grasse et lourde, subtile ?
+3.  **Quelle sera l'apparence de mon site web,** en simple termes de survol&nbsp;? Quelle sera la couleur de l'arrière plan ? Quelle sorte de police de caractères est appropriée : formelle, dessin animé, grasse et lourde, subtile ?
 
 > **Note :** Les projets complexes nécessitent des lignes directrices (guidelines) détaillées précisant tout : couleurs, polices, espacement entre éléments de la page, style d'écriture adapté, etc. Ceci est parfois appelé un guide de conception ou une charte graphique, vous pouvez en voir un exemple dans [Firefox OS Guidelines](https://www.mozilla.org/fr/styleguide/products/firefox-os/).
 
 ## Esquisse de votre concept
 
-Ensuite, prenez un crayon et du papier et faites une esquisse de l'apparence souhaitée pour votre site. Pour une première et simple page web, il n'y a pas beaucoup à esquisser, mais vous devriez prendre l'habitude de le faire dès maintenant. Cela aide vraiment — vous n'avez pas à être Van Gogh !
+Ensuite, prenez un crayon et du papier et faites une esquisse de l'apparence souhaitée pour votre site. Pour une première et simple page web, il n'y a pas beaucoup à esquisser, mais vous devriez prendre l'habitude de le faire dès maintenant. Cela aide vraiment — vous n'avez pas à être Van Gogh !
 
 ![](website-drawing-scan.png)
 
@@ -48,13 +48,13 @@ Vous devriez encore avoir vos paragraphes et votre titre puisque vous y avez son
 
 ### Couleur du thème
 
-Pour choisir une couleur, utilisez une [palette de couleurs](http://www.code-couleur.com/index.html) et trouvez une couleur que vous aimez. Quand vous cliquez sur une couleur, vous verrez un étrange code à six caractères comme `#660066`. Ceci est appelé un _code hexadécimal_ et il représente votre couleur. Copiez le code dans un endroit sûr pour l'instant.
+Pour choisir une couleur, utilisez une [palette de couleurs](http://www.code-couleur.com/index.html) et trouvez une couleur que vous aimez. Quand vous cliquez sur une couleur, vous verrez un étrange code à six caractères comme `#660066`. Ceci est appelé un _code hexadécimal_ et il représente votre couleur. Copiez le code dans un endroit sûr pour l'instant.
 
 ![](Screenshot%20from%202014-11-03%2017:40:49.png)
 
 ### Images
 
-Pour choisir une image, allez sur [Google Images](https://www.google.com/imghp?gws_rd=ssl) et cherchez une image qui convient.
+Pour choisir une image, allez sur [Google Images](https://www.google.com/imghp?gws_rd=ssl) et cherchez une image qui convient.
 
 1.  Quand vous avez trouvé l'image que vous voulez, cliquez sur l'image.
 2.  Appuyez sur le bouton _Afficher l'image_.
@@ -64,7 +64,7 @@ Pour choisir une image, allez sur [Google Images](https://www.google.com/imghp?g
 
 ![](Screenshot%20from%202014-11-04%2015:20:48.png)
 
-> **Note :** La plupart des images sur le Web, dont celles dans Google Images, sont protégées. Pour réduire votre probabilité de commettre une violation de droits d'auteur, vous pouvez utiliser le filtre de licence de Google. Tout simplement 1) cliquez sur **Outils de recherche**, puis  2) **Droits d'usage** :
+> **Note :** La plupart des images sur le Web, dont celles dans Google Images, sont protégées. Pour réduire votre probabilité de commettre une violation de droits d'auteur, vous pouvez utiliser le filtre de licence de Google. Tout simplement 1) cliquez sur **Outils de recherche**, puis 2) **Droits d'usage**&nbsp;:
 >
 > ![](Screenshot%20from%202014-11-04%2014:27:45.png)
 
@@ -74,7 +74,7 @@ Pour choisir une police :
 
 1.  Allez sur [Google Fonts](http://www.google.com/fonts) et faites défiler la page jusqu'à en trouver une que vous aimez. Vous pouvez aussi utiliser les contrôles sur la gauche pour filtrer plus précisément les résultats.
 2.  Cliquez sur l'icône _« + »_ (_ajouter_) à côté de la police que vous voulez.
-3.  Cliquez sur le bouton « \* Family Selected » dans le panneau en bas de la page (« \* » dépend du nombre de polices sélectionnées).
+3.  Cliquez sur le bouton « \* Family Selected » dans le panneau en bas de la page («&nbsp;\*&nbsp;» dépend du nombre de polices sélectionnées).
 4.  Sur la fenêtre contextuelle suivante, vous pouvez copier les lignes de code que Google vous donne dans votre éditeur de texte pour les garder pour plus tard.
 
 ![](font1.png)
@@ -86,7 +86,7 @@ Pour choisir une police :
 ## Dans ce module
 
 - [Installer les logiciels de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base)
-- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site)
+- [Quel aspect pour votre site Web&nbsp;?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site)
 - [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers)
 - [Bases du HTML](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML)
 - [Bases des CSS](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS)
diff --git a/files/fr/learn/html/cheatsheet/index.md b/files/fr/learn/html/cheatsheet/index.md
index 7ae8e52e78..28c67acbd4 100644
--- a/files/fr/learn/html/cheatsheet/index.md
+++ b/files/fr/learn/html/cheatsheet/index.md
@@ -17,7 +17,7 @@ Lorsqu'on utilise {{Glossary("HTML")}}, une antisèche, une page rapide et réca
 
 ## Éléments en ligne
 
-Un élément est une partie d'une page web. Certains éléments sont agissent comme des conteneurs : ils sont grands et contiennent de plus petits éléments. Certains éléments sont plus petits et sont imbriqués dans des éléments plus grands. Par défaut les éléments « en ligne » apparaissent les uns à côté des autres sur une page web. Ils prennent autant de largeur que nécessaire sur une page et s'organisent horizontalement à la façon des mots dans une phrase ou des livres dans une bibliothèque. Tous les éléments en ligne peuvent être placés à l'intérieur de l'élément `<body>`.
+Un élément est une partie d'une page web. Certains éléments sont agissent comme des conteneurs&nbsp;: ils sont grands et contiennent de plus petits éléments. Certains éléments sont plus petits et sont imbriqués dans des éléments plus grands. Par défaut les éléments «&nbsp;en ligne&nbsp;» apparaissent les uns à côté des autres sur une page web. Ils prennent autant de largeur que nécessaire sur une page et s'organisent horizontalement à la façon des mots dans une phrase ou des livres dans une bibliothèque. Tous les éléments en ligne peuvent être placés à l'intérieur de l'élément `<body>`.
 
 <table class="standard-table">
   <thead>
@@ -232,7 +232,7 @@ mais &#x3C;code>celui-ci représente du code&#x3C;/code>.</pre
       <td>{{HTMLElement("video")}}</td>
       <td id="video-example">
         <pre class="brush: html">
-&#x3C;video controls  width="250"
+&#x3C;video controls width="250"
   src="https://archive.org/download/ElephantsDream/ed_hd.ogv" >
   L'élément &#x3C;code>video&#x3C;/code> n'est pas pris en charge.
 &#x3C;/video></pre
diff --git a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md
index ca692dcccd..ae3611bd40 100644
--- a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md
+++ b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md
@@ -14,7 +14,7 @@ Dans cet article, nous verrons comment construire une carte imagée cliquable en
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Vous devez au préalable savoir comment
         <a href="/fr/Apprendre/HTML/Écrire_une_simple_page_HTML"
@@ -27,7 +27,7 @@ Dans cet article, nous verrons comment construire une carte imagée cliquable en
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectifs :</th>
+      <th scope="row">Objectifs&nbsp;:</th>
       <td>
         Apprendre comment faire pour que différentes zones d'une même image
         pointent vers différentes pages.
diff --git a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md
index 82dda020c3..6e32ba5c29 100644
--- a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md
+++ b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md
@@ -7,7 +7,7 @@ tags:
 translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
 original_slug: Web/Guide/HTML/Astuces_de_création_de_pages_HTML_à_affichage_rapide
 ---
-C'est connu, les internautes sont de grands impatients, ils veulent des résultats immédiats, avec des gros titres et des réponses courtes et efficaces. 
+C'est connu, les internautes sont de grands impatients, ils veulent des résultats immédiats, avec des gros titres et des réponses courtes et efficaces.
 Une page web optimisé prévoit non seulement un site plus réactif, mais aussi de réduire la charge sur vos serveurs Web et votre connexion Internet. Cela peut être crucial pour les gros sites ou des sites qui ont un pic de trafic dans des circonstances exceptionnelles (telles que les Unes des journaux fracassantes). De plus, Google en tient compte pour son classement.
 
 ### Réduire le poids de la page
@@ -26,7 +26,7 @@ Réduire le nombre de fichiers référencés dans une page web diminue le nombre
 
 - Utilisez le moins d'images possible sur votre site (et de gif animés ofc). Preferez des [boutons graphiques en CSS](http://css-tricks.com/examples/ButtonMaker/).
 - Compressez vos images (éviter les .png). Vous pouvez pour cela utiliser [Gimp](http://www.gimp.org/) ou [Imagemagik](http://www.imagemagick.org/script/index.php).
-- Preferez le CSS ou le JavaScript au flash: il ralenti le navigateur.
+- Preferez le CSS ou le JavaScript au flash: il ralenti le navigateur.
 
 Les videos sont diffusées progressivement depuis le serveur, elles ne ralentisseent donc pas le chargement de votre page.
 
@@ -43,8 +43,8 @@ En particulier pour les pages qui sont générées dynamiquement, une petite rec
 Plus d'informations:
 
 1. [HTTP Conditional Get for RSS Hackers](http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers)
-   2. [HTTP 304: Not Modified](http://annevankesteren.nl/archives/2005/05/http-304)
-   3. [On HTTP Last-Modified and ETag](http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html)
+   2. [HTTP 304: Not Modified](http://annevankesteren.nl/archives/2005/05/http-304)
+   3. [On HTTP Last-Modified and ETag](http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html)
 
 ### Réduire le nombre de scripts en ligne
 
@@ -54,18 +54,18 @@ Les scripts intégrés peut être coûteux pour le chargement de la page, puisqu
 
 L'utilisation de CSS modernes réduit la quantité de balisage, et peut réduire la nécessité de "spacer" les images, en termes de disposition, et peut très souvent remplacer des images de texte stylisé - qui "coutent" beaucoup plus que l'équivalent texte-et-CSS.
 Utiliser des balises valides a d'autres avantages. Tout d'abord, les navigateurs n'ont pas besoin d'effectuer de corrections d'erreurs lors de l'analyse du code HTML.
-En outre, la validité du balisage permet la libre utilisation d'autres outils qui peuvent pré-traiter vos pages web. Par exemple, [HTML Tidy](http://tidy.sourceforge.net/)  peut supprimer des espaces blancs et des balises facultatives, mais il refusera de s'exécuter sur une page avec des erreurs de balisage graves.
+En outre, la validité du balisage permet la libre utilisation d'autres outils qui peuvent pré-traiter vos pages web. Par exemple, [HTML Tidy](http://tidy.sourceforge.net/) peut supprimer des espaces blancs et des balises facultatives, mais il refusera de s'exécuter sur une page avec des erreurs de balisage graves.
 
 ### Segmentez votre contenu
 
 Remplacer la mise en page basé sur des \<table> par des blocs \<div>, plutôt que des \<table> très imbriquée comme dans l'exemple suivant:
 
     <TABLE>
-      <TABLE>
-        <TABLE>
-              ...
-        </TABLE>
-      </TABLE>
+      <TABLE>
+        <TABLE>
+              ...
+        </TABLE>
+      </TABLE>
     </TABLE>
 
 Préferez des \<table> non-imbriquées ou \<div> comme dans l'exemple suivant:
@@ -79,7 +79,7 @@ Préferez des \<table> non-imbriquées ou \<div> comme dans l'exemple suivant:
 Si le navigateur peut immédiatement déterminer la hauteur et/ou la largeur de vos images et tableaux, il sera capable d'afficher une page web sans avoir à refondre le contenu. Cela n'augmente pas seulement la vitesse d'affichage de la page, mais aussi à empêcher les changements gênants dans la disposition d'une page lors du chargement. Pour cette raison, la hauteur et la largeur doit être spécifié pour les images, chaque fois que possible.
 Les tableaux doivent utiliser le sélecteur CSS selector:property combination:
 
-      table-layout: fixed;
+      table-layout: fixed;
 
 et doit spécifier la largeur des colonnes en utilisant le COL et les balises html COLGROUP.
 
diff --git a/files/fr/learn/html/howto/define_terms_with_html/index.md b/files/fr/learn/html/howto/define_terms_with_html/index.md
index fea14083ae..0adb9134bf 100644
--- a/files/fr/learn/html/howto/define_terms_with_html/index.md
+++ b/files/fr/learn/html/howto/define_terms_with_html/index.md
@@ -14,7 +14,7 @@ HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on e
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Vous devez au préalable savoir comment
         <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML"
@@ -23,7 +23,7 @@ HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on e
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectifs :</th>
+      <th scope="row">Objectifs&nbsp;:</th>
       <td>
         Apprendre comment introduire de nouveaux mots-clés et comment construire
         une liste de définitions.
diff --git a/files/fr/learn/html/howto/use_data_attributes/index.md b/files/fr/learn/html/howto/use_data_attributes/index.md
index 4e494f5e2d..afab38eae7 100644
--- a/files/fr/learn/html/howto/use_data_attributes/index.md
+++ b/files/fr/learn/html/howto/use_data_attributes/index.md
@@ -14,14 +14,14 @@ original_slug: Apprendre/HTML/Comment/Utiliser_attributs_donnes
 
 ## Syntaxe HTML
 
-La syntaxe est simple. Tout attribut d'un élément dont le nom commence par `data-` est un attribut de données (_data attribute_). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela :
+La syntaxe est simple. Tout attribut d'un élément dont le nom commence par `data-` est un attribut de données (_data attribute_). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela&nbsp;:
 
 ```html
 <article
-  id="voitureelectrique"
-  data-columns="3"
-  data-index-number="12314"
-  data-parent="voitures">
+  id="voitureelectrique"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="voitures">
 ...
 </article>
 ```
@@ -73,7 +73,7 @@ Comme les valeurs des données sont des chaînes, toutes les valeurs doivent êt
 
 Ne stockez pas de contenu qui devrait être visible dans les attributs data, car les technologies d'assistance pourraient ne pas y avoir accès. De plus, les moteurs de recherche pourraient ne pas indexer les valeurs des attributs de données.
 
-Les principaux problèmes à prendre en considération sont le support d'Internet Explorer et la performance. Internet Explorer 11+ prend en charge le standard, mais toutes les versions antérieures  [ne prennent pas en charge le `dataset`](https://caniuse.com/#feat=dataset). Pour prendre en charge IE 10 et versions inférieures vous avez besoin d'accéder aux attributs data avec {{domxref("Element.getAttribute", "getAttribute()")}}. De plus, la [la performance de lecture des attributs de données](https://jsperf.com/data-dataset), au stockage dans des structures de données JavaScript est assez faible. Utiliser un `dataset` est même plus lent que lire les données avec `getAttribute()`.
+Les principaux problèmes à prendre en considération sont le support d'Internet Explorer et la performance. Internet Explorer 11+ prend en charge le standard, mais toutes les versions antérieures  [ne prennent pas en charge le `dataset`](https://caniuse.com/#feat=dataset). Pour prendre en charge IE 10 et versions inférieures vous avez besoin d'accéder aux attributs data avec {{domxref("Element.getAttribute", "getAttribute()")}}. De plus, la [la performance de lecture des attributs de données](https://jsperf.com/data-dataset), au stockage dans des structures de données JavaScript est assez faible. Utiliser un `dataset` est même plus lent que lire les données avec `getAttribute()`.
 
 Mais ceci dit, pour les métadonnées personnalisées associées aux éléments, c'est une excellente solution.
 
diff --git a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md
index 5c11395239..cd0eff3a76 100644
--- a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md
+++ b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md
@@ -14,7 +14,7 @@ Dans cet article, nous verrons comment améliorer les pages web en ajoutant du c
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Vous devriez au préalable savoir comment
         <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML"
@@ -23,7 +23,7 @@ Dans cet article, nous verrons comment améliorer les pages web en ajoutant du c
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectifs :</th>
+      <th scope="row">Objectifs&nbsp;:</th>
       <td>
         Savoir comment utiliser du code JavaScript dans un fichier HTML et
         apprendre les bonnes pratiques afin que le code JavaScript utilisé soit
@@ -77,7 +77,7 @@ L'accessibilité est un enjeu majeur du développement logiciel. JavaScript peut
 - **Toutes les fonctionnalités doivent être accessibles depuis le clavier.**
 
   - Les utilisateurs doivent pouvoir utiliser la touche de tabulation pour naviguer entre les différents contrôles (les liens, les entrées de formulaires, etc.) en suivant un ordre logique.
-  - Si vous utilisez les événements liés au pointage (les événéments liés à la souris ou au toucher), les fonctionnalités offertes doivent également être accessibles  via le clavier.
+  - Si vous utilisez les événements liés au pointage (les événéments liés à la souris ou au toucher), les fonctionnalités offertes doivent également être accessibles via le clavier.
   - Testez votre site en utilisant uniquement le clavier.
 
 - **N'utilisez pas de limites de temps arbitraires.** Cela prend plus de temps de naviguer au clavier ou d'écouter le contenu lu par un lecteur d'écran. Il est donc impossible de prévoir combien de temps cela prendra pour qu'un utilisateur ou pour que le navigateur accomplisse une tâche donnée.
diff --git a/files/fr/learn/html/index.md b/files/fr/learn/html/index.md
index fc00b9925e..39e562dec8 100644
--- a/files/fr/learn/html/index.md
+++ b/files/fr/learn/html/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Apprendre le HTML : guides et didacticiels'
+title: 'Apprendre le HTML&nbsp;: guides et didacticiels'
 slug: Learn/HTML
 tags:
   - Apprentissage
@@ -13,11 +13,11 @@ original_slug: Apprendre/HTML
 ---
 {{LearnSidebar}}
 
-> Pour créer des sites Web, vous devez connaître le {{Glossary('HTML')}} — technique fondamentale utilisée pour définir la structure d'une page Web. HTML est utilisé pour dire si votre contenu web doit être reconnu en tant que paragraphe, liste, en-tête, lien, image, lecteur multimédia, formulaire ou l'un des nombreux autres éléments disponibles ou même un nouvel élément à définir par vous même.
+> Pour créer des sites Web, vous devez connaître le {{Glossary('HTML')}} — technique fondamentale utilisée pour définir la structure d'une page Web. HTML est utilisé pour dire si votre contenu web doit être reconnu en tant que paragraphe, liste, en-tête, lien, image, lecteur multimédia, formulaire ou l'un des nombreux autres éléments disponibles ou même un nouvel élément à définir par vous même.
 
 ## Parcours d'apprentissage
 
-L'idéal serait que vous débutiez votre parcours d'apprentissage par l'étude du HTML. Commencez par lire [Introduction au HTML](/fr/docs/Web/Guide/HTML/Introduction). Vous pouvez ensuite passer à l'étude de sujets plus avancés comme :
+L'idéal serait que vous débutiez votre parcours d'apprentissage par l'étude du HTML. Commencez par lire [Introduction au HTML](/fr/docs/Web/Guide/HTML/Introduction). Vous pouvez ensuite passer à l'étude de sujets plus avancés comme&nbsp;:
 
 - les [CSS](/fr/docs/Learn/CSS), et comment les utiliser pour donner un style au HTML (par exemple, modifier la taille du texte et les polices utilisées, ajouter des bordures et des ombres portées, mettre en page avec plusieurs colonnes, ajouter des animations et autres effets visuels).
 - le [JavaScript](/fr/docs/Learn/JavaScript), et comment l'utiliser pour ajouter des fonctionnalités dynamiques aux pages Web (par exemple, trouver votre emplacement et le tracer sur une carte, faire apparaître/disparaître des éléments d'interface utilisateur lorsque vous basculez un bouton, enregistrer les données des utilisateurs localement sur leurs ordinateurs, et bien plus encore).
@@ -34,7 +34,7 @@ Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les pa
   - : Ce module prépare le terrain, en vous familiarisant avec les concepts importants et la syntaxe, en examinant comment appliquer le HTML au texte, comment créer des hyperliens et comment utiliser le HTML pour structurer une page Web.
 - [Multimedia et intégration](/fr/docs/Learn/HTML/Multimedia_and_embedding)
   - : Ce module explore comment utiliser le HTML pour incorporer du multimédia dans vos pages Web, y compris les diverses façons d'inclure des images, et comment intégrer de la vidéo, de l'audio et même d'autres pages Web entières.
-- [Tableaux HTML](/fr/docs/Learn/HTML/Tables)
+- [Tableaux HTML](/fr/docs/Learn/HTML/Tables)
   - : Représenter des sous forme de tableaux sur une page Web de manière compréhensible, {{Glossary("Accessibilité", "accessible")}}} peut être un défi. Ce module porte sur le balisage basique des tableaux, ainsi que des fonctions plus complexes telles que l'implémentation de légendes et de résumés.
 - [Formulaire HTML](/fr/docs/Learn/HTML/Forms)
   - : Les formulaires sont une partie très importante du Web — ils fournissent la grande partie des fonctionnalités dont vous avez besoin pour interagir avec les sites Web, par exemple enregistrement et connexion, envoi de commentaires, achat de produits et plus encore. Ce module vous permet de commencer à créer la partie des formulaires côté client.
diff --git a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md
index 7882566979..ea26226dfd 100644
--- a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md
+++ b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md
@@ -57,7 +57,7 @@ Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser [
     aparté
     Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.
 
-Les listes descriptives utilisent une enveloppe de balisage différente de celle des autres types de listes — {{htmlelement("dl")}} ; chaque terme est en plus entouré d'un élément {{htmlelement("dt")}} (**d**escription **t**erm) et chaque description d'un élément {{htmlelement("dd")}} (**d**escription **d**efinition). Terminons en balisant l'exemple ci‑dessus :
+Les listes descriptives utilisent une enveloppe de balisage différente de celle des autres types de listes — {{htmlelement("dl")}}&nbsp;; chaque terme est en plus entouré d'un élément {{htmlelement("dt")}} (**d**escription **t**erm) et chaque description d'un élément {{htmlelement("dd")}} (**d**escription **d**efinition). Terminons en balisant l'exemple ci‑dessus :
 
 ```html
 <dl>
@@ -229,7 +229,7 @@ Le HTML possède également des fonctionnalités pour marquer les citations. Le
 
 ### Blocs de citation
 
-Si une section ou un contenu de niveau bloc (que ce soit un paragraphe, de multiples paragraphes, une liste, etc.) est cité depuis une autre origine, vous pouvez le signaler en le mettant dans un élément {{htmlelement("blockquote")}} et en incluant une URL qui pointe vers la source de la citation dans un attribut {{htmlattrxref("cite","blockquote")}}. Par exemple, le balisage suivant provient de la page MDN pour l'élément `<blockquote>` :
+Si une section ou un contenu de niveau bloc (que ce soit un paragraphe, de multiples paragraphes, une liste, etc.) est cité depuis une autre origine, vous pouvez le signaler en le mettant dans un élément {{htmlelement("blockquote")}} et en incluant une URL qui pointe vers la source de la citation dans un attribut {{htmlattrxref("cite","blockquote")}}. Par exemple, le balisage suivant provient de la page MDN pour l'élément `<blockquote>`&nbsp;:
 
 ```html
 <p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc
@@ -247,7 +247,7 @@ Pour le changer en bloc de citation, on ferait simplement ceci :
 </blockquote>
 ```
 
-Le navigateur l'affichera par défaut sous forme d'un paragraphe indenté, avec l'indication qu'il s'agit d'une citation ; MDN agit de même et y ajoute un style personnalisé :
+Le navigateur l'affichera par défaut sous forme d'un paragraphe indenté, avec l'indication qu'il s'agit d'une citation&nbsp;; MDN agit de même et y ajoute un style personnalisé&nbsp;:
 
 {{EmbedLiveSample("Blocs_de_citation")}}
 
@@ -262,7 +262,7 @@ Les citations en ligne fonctionnent exactement de la même manière, sauf que l'
 pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p>
 ```
 
-Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci :
+Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci&nbsp;:
 
 {{EmbedLiveSample("Exemple_de_citation_en_ligne")}}
 
@@ -286,18 +286,18 @@ Le contenu de l'attribut {{htmlattrxref("cite","blockquote")}} semble utile, mal
 
 Les citations sont affichées avec un police italique par défaut. Vous pouvez voir l'affichage de ce code dans l'exemple [quotations.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html).
 
-### Apprentissage actif : Qui a dit quoi ?
+### Apprentissage actif&nbsp;: Qui a dit quoi&nbsp;?
 
-Il est temps de faire un autre apprentissage actif ! Dans cet exemple, nous souhaiterions que :
+Il est temps de faire un autre apprentissage actif&nbsp;! Dans cet exemple, nous souhaiterions que&nbsp;:
 
 1.  vous marquiez le paragraphe central comme étant une citation comprenant un attribut `cite`.
 2.  une partie du troisième paragraphe soit balisée en tant que citation en ligne, comprenant aussi un attribut `cite`.
 3.  vous incorporiez un élément `<cite>` pour chaque citation
 
-L'origine des citations dont vous aurez besoin se trouvent aux pages :
+L'origine des citations dont vous aurez besoin se trouvent aux pages&nbsp;:
 
 - http\://www\.brainyquote.com/quotes/authors/c/confucius.html pour la citation de Confucius,
-- http\://www\.affirmationsforpositivethinking.com/index.html pour « The Need To Eliminate Negative Self Talk » (_De la nécessité d'éliminer un discours négatif sur soi‑même_).
+- http\://www\.affirmationsforpositivethinking.com/index.html pour «&nbsp;The Need To Eliminate Negative Self Talk&nbsp;» (_De la nécessité d'éliminer un discours négatif sur soi‑même_).
 
 Si vous faites une erreur, vous pourrez toujours tout réinitialiser en pressant le bouton de même nom. Si vous êtes vraiment bloqué, pressez le bouton _Voir la solution_ pour obtenir la réponse.
 
@@ -311,9 +311,9 @@ Si vous faites une erreur, vous pourrez toujours tout réinitialiser en pressant
 <p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p>
 
 <textarea id="code" class="input" style="min-height: 150px; width: 95%">
-<p>Salut et bienvenue sur ma page de motivation. Comme Confucius a dit en son temps :</p>
+<p>Salut et bienvenue sur ma page de motivation. Comme Confucius a dit en son temps&nbsp;:</p>
 <p>La lenteur avec laquelle vous allez n'a pas d'importance tant que vous ne vous arrêtez pas.</p>
-<p>J'aime aussi ce concept de pensée positive « Il est nécessaire d'éliminer le discours négatif sur soi-même » (comme dit dans « Affirmations for Positive Thinking ».)</p>
+<p>J'aime aussi ce concept de pensée positive «&nbsp;Il est nécessaire d'éliminer le discours négatif sur soi-même&nbsp;» (comme dit dans «&nbsp;Affirmations for Positive Thinking&nbsp;».)</p>
 </textarea>
 
 <div class="playable-buttons">
@@ -375,7 +375,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var htmlSolution = '<p>Salut et bienvenue sur ma page de motivation. Comme <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> a dit en son temps :</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>La lenteur avec laquelle vous allez n\'a pas d\'importance tant que vous ne vous arrêtez pas.</p>\n</blockquote>\n\n<p>J\'aime aussi le concept de pensée positive <q cite="http://www.affirmationsforpositivethinking.com/index.htm"> Il est nécessaire d\'éliminer le discours négatif sur soi-même </q> (comme dit dans <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>';
+var htmlSolution = '<p>Salut et bienvenue sur ma page de motivation. Comme <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> a dit en son temps&nbsp;:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>La lenteur avec laquelle vous allez n\'a pas d\'importance tant que vous ne vous arrêtez pas.</p>\n</blockquote>\n\n<p>J\'aime aussi le concept de pensée positive <q cite="http://www.affirmationsforpositivethinking.com/index.htm"> Il est nécessaire d\'éliminer le discours négatif sur soi-même </q> (comme dit dans <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>';
 var solutionEntry = htmlSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -442,7 +442,7 @@ Je pense que le R. Green l'a fait dans la cuisine avec une tronçonneuse.
 
 > **Note :** Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que `<abbr>`, destiné spécifiquement aux acronymes plutôt qu'aux abréviations. Il est cependant tombé en désuétude — il n'était pas aussi bien pris en charge dans les navigateurs que \<abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser \<abbr> à la place.
 
-### Apprentissage actif : marquer une abréviation
+### Apprentissage actif&nbsp;: marquer une abréviation
 
 Pour cet apprentissage actif, nous aimerions que vous balisiez simplement une abréviation. Vous pouvez utiliser notre élément ci-après ou le remplacer par un de votre cru.
 
@@ -579,7 +579,7 @@ HTML possède l'élément {{htmlelement("address")}} pour baliser des détails d
 </address>
 ```
 
-Une chose à retenir cependant : l'élément {{htmlelement("address")}} est destiné à marquer les coordonnées de la personne ayant écrit le document HTML et non pas _n'importe quelle_ adresse. Donc, ce qui précède ne serait acceptable que si Chris avait écrit le document sur lequel ce balisage apparaît. Notez que serait également acceptable ce qui suit :
+Une chose à retenir cependant&nbsp;: l'élément {{htmlelement("address")}} est destiné à marquer les coordonnées de la personne ayant écrit le document HTML et non pas _n'importe quelle_ adresse. Donc, ce qui précède ne serait acceptable que si Chris avait écrit le document sur lequel ce balisage apparaît. Notez que serait également acceptable ce qui suit&nbsp;:
 
 ```html
 <address>
@@ -597,7 +597,7 @@ Vous devrez parfois utiliser exposants et indices pour marquer des éléments co
 <p>Si x<sup>2</sup> égale 9, x doit valoir 3 ou -3.</p>
 ```
 
-Les sorties produites par ces lignes de code se présentent comme suit :
+Les sorties produites par ces lignes de code se présentent comme suit&nbsp;:
 
 Ma date de naissance est le 1<sup>er</sup> mai 2001.
 
@@ -607,15 +607,15 @@ Si x^2 égale 9, x doit valoir 3 ou -3.
 
 ## Représentation du code informatique
 
-HTML met à votre dispositon un certain nombre d'éléments pour marquer du code informatique :
+HTML met à votre dispositon un certain nombre d'éléments pour marquer du code informatique&nbsp;:
 
-- {{htmlelement("code")}} : pour marquer des parties génériques de code.
-- {{htmlelement("pre")}} : pour conserver les blancs (généralement dans les blocs de code) — si vous indentez ou mettez des blancs en excès dans votre texte, les navigateurs les ignoreront et vous ne les verrez plus dans le rendu de la page. Par contre si vous enveloppez le texte dans des balises \<pre>\</pre>, les blancs seront rendus tels qu'il se présentent dans votre éditeur de texte.
-- {{htmlelement("var")}} : pour marquer spécifiquement les noms de variables.
-- {{htmlelement("kbd")}} : pour marquer les touches de clavier (et autres types d'entrées) à presser sur l'ordinateur.
-- {{htmlelement("samp")}} : pour marquer une sortie de programme.
+- {{htmlelement("code")}}&nbsp;: pour marquer des parties génériques de code.
+- {{htmlelement("pre")}}&nbsp;: pour conserver les blancs (généralement dans les blocs de code) — si vous indentez ou mettez des blancs en excès dans votre texte, les navigateurs les ignoreront et vous ne les verrez plus dans le rendu de la page. Par contre si vous enveloppez le texte dans des balises \<pre>\</pre>, les blancs seront rendus tels qu'il se présentent dans votre éditeur de texte.
+- {{htmlelement("var")}}&nbsp;: pour marquer spécifiquement les noms de variables.
+- {{htmlelement("kbd")}}&nbsp;: pour marquer les touches de clavier (et autres types d'entrées) à presser sur l'ordinateur.
+- {{htmlelement("samp")}}&nbsp;: pour marquer une sortie de programme.
 
-Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple [other-semantics.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html)) :
+Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple [other-semantics.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html))&nbsp;:
 
 ```html
 <pre><code>var para = document.querySelector('p');
@@ -636,7 +636,7 @@ para.onclick = function() {
 64 bytes from mozilla.org (63.245.208.195): icmp_seq=1 ttl=46 time=191 ms</samp></pre>
 ```
 
-Ce code se présente ainsi :
+Ce code se présente ainsi&nbsp;:
 
 {{ EmbedLiveSample('Représentation_du_code_informatique','100%',300) }}
 
@@ -673,7 +673,7 @@ L'exemple de base ci-dessus ne fournit qu'une simple date lisible par machine, m
 <time datetime="01-20">20 janvier</time>
 <!-- Juste l'heure, heure et minutes -->
 <time datetime="19:30">19h30</time>
-<!-- Vous pouvez aussi mettre les secondes et les millisecondes ! -->
+<!-- Vous pouvez aussi mettre les secondes et les millisecondes&nbsp;! -->
 <time datetime="19:30:01.856">19h30m1,856s</time>
 <!-- Date et heure -->
 <time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time>
diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md
index 7883e57b89..fdc4ee1fad 100644
--- a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md
+++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md
@@ -215,7 +215,7 @@ Autres conseils :
 - Ne répétez pas l'URL dans le texte du lien — les URL sont moches, et elles le sont encore plus à entendre quand un lecteur d'écran les épèle.
 - Ne dites pas « lien » ou « liens vers... » dans le texte du lien, ce n'est que du rabâchage. Les lecteurs d'écran indiquent aux gens qu'il y a un lien. Les utilisateurs visuels verront aussi qu'il y a un lien, du fait que les liens sont généralement de couleur différente et soulignés (de façon générale, cette convention tacite ne devrait pas être trahie, car les utilisateurs y sont très habitués).
 - Faites que vos étiquettes de lien soient aussi courtes que possible : les liens longs agacent particulièrement les utilisateurs de lecteurs d'écran, qui doivent en écouter la lecture entière.
-- Minimiser les cas où plusieurs copies d'un même texte pointent vers des emplacements différents. Afficher une liste de liens hors contexte peut poser problème aux utilisateurs de lecteurs d'écran : ainsi plusieurs liens tous étiquetés « cliquez ici », « cliquez ici », « cliquez ici » seront source de confusion.
+- Minimiser les cas où plusieurs copies d'un même texte pointent vers des emplacements différents. Afficher une liste de liens hors contexte peut poser problème aux utilisateurs de lecteurs d'écran&nbsp;: ainsi plusieurs liens tous étiquetés « cliquez ici », « cliquez ici », « cliquez ici » seront source de confusion.
 
 ### Utilisez des liens relatifs partout où c'est possible
 
diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/index.md b/files/fr/learn/html/introduction_to_html/debugging_html/index.md
index f30e1ee88b..21ba749a22 100644
--- a/files/fr/learn/html/introduction_to_html/debugging_html/index.md
+++ b/files/fr/learn/html/introduction_to_html/debugging_html/index.md
@@ -20,7 +20,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Être familiarisé avec les bases du HTML, traitées aux pages
         <a
@@ -38,7 +38,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Apprendre les bases de l'utilisation des outils de débogage pour
         détecter des problèmes en HTML.
@@ -51,32 +51,32 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML
 
 Quand on écrit du code , tout va généralement bien, jusqu'au moment redouté où une erreur se produit — vous avez fait quelque chose d'incorrect, donc votre code ne fonctionne pas — soit pas du tout, soit pas tout à fait comme vous l'aviez souhaité. Par exemple, ce qui suit montre une erreur signalée lors d'une tentative de {{glossary("compile","compilation")}} d'un programme simple écrit en Rust.
 
-![Console montrant le résultat de la compilation d'un programme Rust avec guillemet manquant dans une chaîne textuelle dans une instruction d'affichage. Le message signalé est « erreur : guillemet double manquant dans la chaîne ».](fr-erreur.png)Ici, le message d'erreur est relativement facile à comprendre — « unterminated double quote string » : il manque un guillemet double ouvrant ou fermant pour envelopper la chaîne. Si vous regardez le listage, vous verrez `println!(Salut, Ô Monde!");` il manque un guillemet double. Cependant, des messages d'erreur peuvent devenir plus complexes et plus abscons au fur et à mesure que le programme grossit et, même dans des cas simples devenir intimidants à quelqu'un qui ne connaît rien du Rust.
+![Console montrant le résultat de la compilation d'un programme Rust avec guillemet manquant dans une chaîne textuelle dans une instruction d'affichage. Le message signalé est «&nbsp;erreur : guillemet double manquant dans la chaîne&nbsp;».](fr-erreur.png)Ici, le message d'erreur est relativement facile à comprendre — «&nbsp;unterminated double quote string&nbsp;» : il manque un guillemet double ouvrant ou fermant pour envelopper la chaîne. Si vous regardez le listage, vous verrez `println!(Salut, Ô Monde!");` il manque un guillemet double. Cependant, des messages d'erreur peuvent devenir plus complexes et plus abscons au fur et à mesure que le programme grossit et, même dans des cas simples devenir intimidants à quelqu'un qui ne connaît rien du Rust.
 
 Déboguer ne doit toutefois pas devenir un problème — la clé pour être à l'aise lors de l'écriture et du débogage d'un programme réside dans une bonne connaissance à la fois du langage et des outils.
 
 ## HTML et le débogage
 
-HTML n'est pas aussi compliqué à comprendre que le Rust. HTML n'est pas compilé sous une forme différente avant que le navigateur n'ait fait son analyse et affiche le résultat (il est _interprété_, pas _compilé_). Et la syntaxe des {{glossary("element","éléments")}} HTML est sans doute beaucoup plus facile à comprendre qu'un « vrai langage de programmation » tel le Rust, le {{glossary("JavaScript")}} ou le {{glossary("Python")}}. La façon dont les navigateurs analysent le HTML est beaucoup plus **permissive** que celle des langages de programmation, ce qui est à la fois une bonne et une mauvaise chose.
+HTML n'est pas aussi compliqué à comprendre que le Rust. HTML n'est pas compilé sous une forme différente avant que le navigateur n'ait fait son analyse et affiche le résultat (il est _interprété_, pas _compilé_). Et la syntaxe des {{glossary("element","éléments")}} HTML est sans doute beaucoup plus facile à comprendre qu'un «&nbsp;vrai langage de programmation&nbsp;» tel le Rust, le {{glossary("JavaScript")}} ou le {{glossary("Python")}}. La façon dont les navigateurs analysent le HTML est beaucoup plus **permissive** que celle des langages de programmation, ce qui est à la fois une bonne et une mauvaise chose.
 
 ### Code permissif
 
-Que voulons‑nous dire par permissif ? Et bien, quand vous faites une erreur dans du code, vous rencontrerez deux types principaux d'erreurs :
+Que voulons‑nous dire par permissif&nbsp;? Et bien, quand vous faites une erreur dans du code, vous rencontrerez deux types principaux d'erreurs&nbsp;:
 
-- **Erreurs de syntaxe** : ce sont des « fautes d'orthographe » dans le code qui font que le programme ne fonctionne vraiment pas, comme l'erreur du Rust ci‑dessus. Elles sont généralement faciles à corriger pour autant que vous soyez à l'aise avec la syntaxe du langage et que vous sachiez ce que signifie le message d'erreur.
-- **Erreurs de logique** : ce sont des erreurs dans lesquelles la syntaxe est réellement correcte, mais pour lesquelles le code ne correspond pas à vos souhaits, ce qui veut dire que le programme ne s'exécute pas correctement. Elles sont généralement plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas de message d'erreur pour vous guider à la source de l'erreur.
+- **Erreurs de syntaxe**&nbsp;: ce sont des «&nbsp;fautes d'orthographe&nbsp;» dans le code qui font que le programme ne fonctionne vraiment pas, comme l'erreur du Rust ci‑dessus. Elles sont généralement faciles à corriger pour autant que vous soyez à l'aise avec la syntaxe du langage et que vous sachiez ce que signifie le message d'erreur.
+- **Erreurs de logique**&nbsp;: ce sont des erreurs dans lesquelles la syntaxe est réellement correcte, mais pour lesquelles le code ne correspond pas à vos souhaits, ce qui veut dire que le programme ne s'exécute pas correctement. Elles sont généralement plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas de message d'erreur pour vous guider à la source de l'erreur.
 
-HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de manière permissive : la page s'affiche toujours même s'il y a des erreurs de syntaxe. Les navigateurs intègrent des règles indiquant comment interpréter un balisage incorrectement écrit, de sorte que vous obtiendrez toujours quelque chose à l'exécution, même si ce n'est pas ce que vous attendiez. Mais cela reste, bien sûr, toujours un problème !
+HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de manière permissive&nbsp;: la page s'affiche toujours même s'il y a des erreurs de syntaxe. Les navigateurs intègrent des règles indiquant comment interpréter un balisage incorrectement écrit, de sorte que vous obtiendrez toujours quelque chose à l'exécution, même si ce n'est pas ce que vous attendiez. Mais cela reste, bien sûr, toujours un problème !
 
 > **Note :** HTML est analysé de façon permissive parce que, lorsque le Web a été créé pour la première fois, on a décidé qu'il était plus important de permettre aux gens de publier leur contenu que de s'assurer d'une syntaxe absolument correcte. Le web ne serait probablement pas aussi populaire qu'il l'est aujourd'hui, s'il avait été plus strict dans ses débuts.
 
-### Apprentissage actif : étude avec un code permissif
+### Apprentissage actif&nbsp;: étude avec un code permissif
 
 Voici le moment venu d'étudier le caractère permissif du code HTML.
 
 1.  Primo, télécharchez notre démo [debug-example](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html) et enregistrez‑le localement. Cette démo est délibérement écrite avec des erreurs pour que nous puissions les examiner (le balisage HTML est dit **malformé**, par opposition à **bien-formé**).
-2.  Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci :![Un simple document HTML intitulé « Exemples de HTML à déboguer » et quelques informations sur les erreurs HTML courantes, telles que les éléments non fermés ou mal imbriqués et des attributs non fermés. ](fr-html-errone.png)
-3.  Constatons que ce n'est pas terrible ; examinons le code source pour voir ce que nous pouvons en faire (seul le contenu de l'élément `body` est affiché) :
+2.  Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci&nbsp;:![Un simple document HTML intitulé « Exemples de HTML à déboguer » et quelques informations sur les erreurs HTML courantes, telles que les éléments non fermés ou mal imbriqués et des attributs non fermés. ](fr-html-errone.png)
+3.  Constatons que ce n'est pas terrible&nbsp;; examinons le code source pour voir ce que nous pouvons en faire (seul le contenu de l'élément `body` est affiché)&nbsp;:
 
             <h1>Exemple de HTML à déboguer</h1>
 
@@ -98,34 +98,34 @@ Voici le moment venu d'étudier le caractère permissif du code HTML.
                   lien à la page d'accueil de Mozilla</a>
             </ul>
 
-4.  Revoyons les problèmes :
+4.  Revoyons les problèmes&nbsp;:
 
     - Les élements {{htmlelement("p")}} (paragraphe) et {{htmlelement("li")}} (élément de liste) n'ont pas de balise de fermeture. En voyant l'image ci‑dessus, cela ne semble pas avoir trop sévèrement affecté le rendu, car on voit bien où un élément se termine et où le suivant commence.
     - Le premier élément {{htmlelement("strong")}} n'a pas de balise de fermeture. C'est un peu plus problématique, car il n'est pas possible de dire où l'élément est supposé se terminer. En fait, tout le reste du texte est en gras.
-    - Cette partie est mal imbriquée : `<strong>caractères gras <em>ou gras et italiques ?</strong> qu'est ce ?</em>`. Pas facile de dire comment il faut interpréter cela en raison du problème précédent.
+    - Cette partie est mal imbriquée&nbsp;: `<strong>caractères gras <em>ou gras et italiques ?</strong> qu'est ce ?</em>`. Pas facile de dire comment il faut interpréter cela en raison du problème précédent.
     - La valeur de l'attribut {{htmlattrxref("href","a")}} n'a pas de guillemet double fermant. C'est ce qui semble avoir posé le plus gros problème — le lien n'a pas été mentionné du tout.
 
 5.  Revoyons maintenant comment le navigateur a vu le balisage, par comparaison au balisage du code source. Pour ce faire, utilisons les outils de développement du navigateur. Si vous n'êtes pas un familier de l'utilisation des outils de développement du navigateur, prenez quelques minutes pour revoir [Découverte des outils de développement du navigateur](/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs).
-6.  Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble : ![L'inspecteur HTML dans Firefox, avec le paragraphe de l'exemple en surbrillance, montrant le texte "Quelles sont les causes d'erreurs en HTML ? Ici, vous pouvez voir que l'élément de paragraphe a été fermé par le navigateur.](fr-inspecteur.png)
-7.  Avec l'« Inspecteur », explorons le code en détail pour voir comment le navigateur a essayé de corriger nos erreurs HTML (nous avons fait la revue dans Firefox ; d'autres navigateurs modernes _devraient_ donner le même résultat) :
+6.  Dans l'«&nbsp;Inspecteur&nbsp;», vous pouvez voir ce à quoi le balisage du rendu ressemble&nbsp;: ![L'inspecteur HTML dans Firefox, avec le paragraphe de l'exemple en surbrillance, montrant le texte "Quelles sont les causes d'erreurs en HTML ? Ici, vous pouvez voir que l'élément de paragraphe a été fermé par le navigateur.](fr-inspecteur.png)
+7.  Avec l'«&nbsp;Inspecteur&nbsp;», explorons le code en détail pour voir comment le navigateur a essayé de corriger nos erreurs HTML (nous avons fait la revue dans Firefox&nbsp;; d'autres navigateurs modernes _devraient_ donner le même résultat)&nbsp;:
 
     - Les éléments `p` et `li` ont été pourvus de balises fermantes.
-    - L'endroit où le premier élément `<strong>` doit être fermé n'est pas clair, donc le navigateur a enveloppé séparément chaque bloc de texte avec ses propres balises `strong`, jusqu'à la fin du document !
-    - L'imbrication incorrecte a été corrigée ainsi :
+    - L'endroit où le premier élément `<strong>` doit être fermé n'est pas clair, donc le navigateur a enveloppé séparément chaque bloc de texte avec ses propres balises `strong`, jusqu'à la fin du document&nbsp;!
+    - L'imbrication incorrecte a été corrigée ainsi&nbsp;:
 
       ```html
       <strong>caractères gras
-        <em>ou caractères gras et italiques ?</em>
+        <em>ou caractères gras et italiques&nbsp;?</em>
       </strong>
-      <em> qu'est ce ?</em>
+      <em> qu'est ce&nbsp;?</em>
       ```
 
-    - Le lien avec les guillemets manquants a été illico détruit. Le dernier élément `li` ressemble à ceci :
+    - Le lien avec les guillemets manquants a été illico détruit. Le dernier élément `li` ressemble à ceci&nbsp;:
 
       ```html
       <li>
         <strong>Attributs non fermés : autre source courante de problèmes
-      en HTML. Voici un exemple :</strong>
+      en HTML. Voici un exemple&nbsp;:</strong>
       </li>
       ```
 
@@ -156,17 +156,17 @@ Cela vous donnera une liste d'erreurs et autres informations.
 
 Les messages d'erreur sont généralement utiles, mais parfois non ; avec un peu de pratique, vous trouverez comment les interpréter pour corriger votre code. Passons en revue les messages d'erreur et voyons leur signification. Chaque message est accompagné d'un numéro de ligne et de colonne pour faciliter la localisation de l'erreur.
 
-- « End tag `li` implied, but there were open elements » (2 instances) : ces messages indiquent qu'un élément ouvert devrait être fermé. La balise de fermeture est implicite, mais pas réellement mise. L'information ligne/colonne pointe sur la première ligne après laquelle la balise de fermeture devrait réellement se situer, mais c'est un bon indice pour voir ce qui ne va pas.
-- « Unclosed element `strong` » : C'est facile à comprendre — un élément {{htmlelement("strong")}} n'est pas fermé ; l'information ligne/colonne pointe directement dessus.
-- « End tag `strong` violates nesting rules » : signale des éléments incorrectement imbriqués et l'information ligne/colonne signale là où cela se trouve.
-- « End of file reached when inside an attribute value. Ignoring tag » : c'est peu clair ; la remarque se rapporte au fait qu'il y a une valeur d'attribut improprement formée quelque part, peut-être près de la fin du fichier car la fin du fichier apparaît dans la valeur de l'attribut. Le fait que le navigateur ne rende pas le lien est un bon indice pour dire que cet élément est en faute.
-- « End of file seen and there were open elements » : c'est un peu ambigu, mais se réfère au fait qu'à la base des éléments ouverts n'ont pas été proprement fermés. Les numéros de ligne pointent sur les dernières lignes du fichier et ce message d'erreur vient avec une ligne de code qui désigne un exemple d'élément ouvert :
+- «&nbsp;End tag `li` implied, but there were open elements&nbsp;» (2 instances)&nbsp;: ces messages indiquent qu'un élément ouvert devrait être fermé. La balise de fermeture est implicite, mais pas réellement mise. L'information ligne/colonne pointe sur la première ligne après laquelle la balise de fermeture devrait réellement se situer, mais c'est un bon indice pour voir ce qui ne va pas.
+- «&nbsp;Unclosed element `strong`&nbsp;»&nbsp;: C'est facile à comprendre — un élément {{htmlelement("strong")}} n'est pas fermé ; l'information ligne/colonne pointe directement dessus.
+- «&nbsp;End tag `strong` violates nesting rules&nbsp;»&nbsp;: signale des éléments incorrectement imbriqués et l'information ligne/colonne signale là où cela se trouve.
+- «&nbsp;End of file reached when inside an attribute value. Ignoring tag&nbsp;»&nbsp;: c'est peu clair&nbsp;; la remarque se rapporte au fait qu'il y a une valeur d'attribut improprement formée quelque part, peut-être près de la fin du fichier car la fin du fichier apparaît dans la valeur de l'attribut. Le fait que le navigateur ne rende pas le lien est un bon indice pour dire que cet élément est en faute.
+- «&nbsp;End of file seen and there were open elements&nbsp;»&nbsp;: c'est un peu ambigu, mais se réfère au fait qu'à la base des éléments ouverts n'ont pas été proprement fermés. Les numéros de ligne pointent sur les dernières lignes du fichier et ce message d'erreur vient avec une ligne de code qui désigne un exemple d'élément ouvert&nbsp;:
 
       exemple: <a href="https://www.mozilla.org/>lien à la page d'accueil de Mozilla</a> ↩ </ul>↩ </body>↩</html>
 
   > **Note :** un attribut sans guillemet fermant peut entraîner un élément ouvert car le reste du document est interprété comme le contenu de l'attribut.
 
-- « Unclosed element `ul` » : n'est pas vraiment utile, car l'élément {{htmlelement("ul")}} _est_ correctement fermé. Cette erreur ressort car l'élément {{htmlelement("a")}} n'est pas fermé en raison de l'absence de guillemet fermant.
+- «&nbsp;Unclosed element `ul`&nbsp;»&nbsp;: n'est pas vraiment utile, car l'élément {{htmlelement("ul")}} _est_ correctement fermé. Cette erreur ressort car l'élément {{htmlelement("a")}} n'est pas fermé en raison de l'absence de guillemet fermant.
 
 Si vous ne comprenez pas ce que signifie chaque message d'erreur, ne vous inquiétez pas — une bonne idée consiste à corriger quelques erreurs à la fois. Puis essayez de revalider le HTML pour voir les erreurs restantes. Parfois, la correction d'une erreur en amont permet aussi d'éliminer d'autres messages d'erreur — plusieurs erreurs sont souvent causées par un même problème, avec une sorte d'effet domino.
 
@@ -176,7 +176,7 @@ Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannièr
 
 ## Résumé
 
-Voilà donc une introduction au débogage HTML, qui devrait vous donner des compétences utiles sur lesquelles compter lorsque vous commencerez à déboguer des CSS, du JavaScript ou d'autres types de code plus tard dans votre carrière. Ceci marque également la fin des articles d'apprentissage du module Introduction au HTML — maintenant vous pouvez faire un auto‑test avec nos évaluations : le lien ci‑dessous vous dirige sur la première.
+Voilà donc une introduction au débogage HTML, qui devrait vous donner des compétences utiles sur lesquelles compter lorsque vous commencerez à déboguer des CSS, du JavaScript ou d'autres types de code plus tard dans votre carrière. Ceci marque également la fin des articles d'apprentissage du module Introduction au HTML — maintenant vous pouvez faire un auto‑test avec nos évaluations : le lien ci‑dessous vous dirige sur la première.
 
 {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}
 
diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md
index 47adb3bded..a58a366f71 100644
--- a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md
+++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md
@@ -22,7 +22,7 @@ De même que HTML est utilisé pour définir les diverses parties indépendantes
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Être familiarisé avec les bases du HTML, traitées à la page
         <a
@@ -41,7 +41,7 @@ De même que HTML est utilisé pour définir les diverses parties indépendantes
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         <p>
           Apprendre comment structurer votre document en utilisant des balises
@@ -59,7 +59,7 @@ Les pages web peuvent sembler assez différentes les unes des autres, mais elles
 - En‑tête (header)
   - : Généralement une grande bande placée en travers au haut de la page avec un titre ou un logo. C'est là où les principales informations du site restent d'une page à l'autre.
 - Barre de navigation
-  - : Elle fait le lien vers les principales parties du site ; d'habitude, elle est présentée sous forme de boutons de menu, de liens ou d'onglets. Comme l'en‑tête, la barre de navigation reste souvent cohérente d'une page à l'autre — avoir une navigation destructurée ne peut conduire qu'à de la confusion et la frustation pour le lecteur. Beaucoup de créateurs de site considèrent la barre de navigation partie de l'en‑tête et non comme un composant individuel, mais ce n'est pas une exigence. En fait certains soutiennent également que le fait d'avoir les deux séparés est préférable pour l'accessibilité, car les lecteurs d'écran lisent mieux les deux éléments s'ils sont séparés.
+  - : Elle fait le lien vers les principales parties du site&nbsp;; d'habitude, elle est présentée sous forme de boutons de menu, de liens ou d'onglets. Comme l'en‑tête, la barre de navigation reste souvent cohérente d'une page à l'autre — avoir une navigation destructurée ne peut conduire qu'à de la confusion et la frustation pour le lecteur. Beaucoup de créateurs de site considèrent la barre de navigation partie de l'en‑tête et non comme un composant individuel, mais ce n'est pas une exigence. En fait certains soutiennent également que le fait d'avoir les deux séparés est préférable pour l'accessibilité, car les lecteurs d'écran lisent mieux les deux éléments s'ils sont séparés.
 - Contenu principal
   - : Une grande zone au centre contenant la majeure partie du contenu unique de la dite page web, par ex. la vidéo à regarder, ou le corps de l'article à parcourir, ou la carte à lire, ou les dernières nouvelles etc. C'est la partie du site variable de page en page.
 - Barre latérale
@@ -68,7 +68,7 @@ Les pages web peuvent sembler assez différentes les unes des autres, mais elles
 
   - : Une bande au bas de la page qui contient généralement, en petits caractères, des avis de droit d'auteur ou des coordonnées de contact. C'est un endroit pour mettre de l'information commune (comme l'en-tête), mais il s'agit dans ce cas d'informations non‑critiques, voire secondaires par rapport au site Web lui-même. Le pied de page est aussi parfois utilisé à des fins de {{Glossary("SEO")}}, en fournissant des liens pour un accès rapide à des contenus prisés.
 
-    Un « site web typique » pourrait ressembler à quelque chose comme ceci :
+    Un «&nbsp;site web typique&nbsp;» pourrait ressembler à quelque chose comme ceci&nbsp;:
 
 ![un exemple simple de structure de site Web comportant un titre principal, un menu de navigation, un contenu principal, une barre latérale et un pied de page.](ecran.png)
 
@@ -76,21 +76,21 @@ Les pages web peuvent sembler assez différentes les unes des autres, mais elles
 
 L'exemple simple affiché ci-dessus n'est pas très beau, mais il est parfaitement correct pour illustrer un exemple typique de mise en page d'un site web. Certains sites Web ont plus de colonnes, d'autres sont beaucoup plus complexes, mais vous voyez l'idée. Avec le bon CSS, vous pouvez utiliser à peu près n'importe quel élément pour envelopper les différentes sections et obtenir l'apparence que vous voulez, mais comme nous l'avons déjà dit, nous devons respecter la sémantique et **utiliser le bon élément pour le bon travail**.
 
-C'est parce que le visuel ne raconte pas toute l'histoire. Nous utilisons la couleur et la taille des caractères pour attirer l'attention des utilisateurs malvoyants sur les parties les plus utiles du contenu, comme le menu de navigation et les liens connexes, mais qu'en est-il des personnes malvoyantes par exemple, qui pourraient ne pas trouver très utiles des concepts tels que le « rose » et la « grande police » ?
+C'est parce que le visuel ne raconte pas toute l'histoire. Nous utilisons la couleur et la taille des caractères pour attirer l'attention des utilisateurs malvoyants sur les parties les plus utiles du contenu, comme le menu de navigation et les liens connexes, mais qu'en est-il des personnes malvoyantes par exemple, qui pourraient ne pas trouver très utiles des concepts tels que le «&nbsp;rose&nbsp;» et la «&nbsp;grande police&nbsp;» ?
 
 > **Note :** Les daltoniens représentent environ [8% de la population mondiale](http://www.color-blindness.com/2006/04/28/colorblind-population/) ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait [285 millions de personnes aveugles et malvoyantes](https://fr.wikipedia.org/wiki/D%C3%A9ficience_visuelle) dans le monde, alors que la population totale était [d'environ 7 milliards](https://fr.wikipedia.org/wiki/Population_mondiale) d'habitants).
 
-Dans votre code HTML, vous pouvez marquer des sections de contenu selon leur fonction — vous pouvez utiliser des éléments qui représentent sans ambiguïté les sections de contenu décrites ci-dessus, et les technologies d'assistance comme les lecteurs d'écran peuvent reconnaître ces éléments et vous aider avec des tâches comme « trouver la navigation principale » ou « trouver le contenu principal ». Comme nous l'avons mentionné plus tôt dans le cours, le fait de [ne pas utiliser la bonne structure d'éléments et la bonne sémantique pour le bon travail a un certain nombre de conséquences](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure).
+Dans votre code HTML, vous pouvez marquer des sections de contenu selon leur fonction — vous pouvez utiliser des éléments qui représentent sans ambiguïté les sections de contenu décrites ci-dessus, et les technologies d'assistance comme les lecteurs d'écran peuvent reconnaître ces éléments et vous aider avec des tâches comme «&nbsp;trouver la navigation principale&nbsp;» ou «&nbsp;trouver le contenu principal ». Comme nous l'avons mentionné plus tôt dans le cours, le fait de [ne pas utiliser la bonne structure d'éléments et la bonne sémantique pour le bon travail a un certain nombre de conséquences](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure).
 
-Pour mettre en œuvre le marquage sémantique, HTML fournit des balises dédiées que vous pourrez utiliser pour représenter ces parties, par exemple :
+Pour mettre en œuvre le marquage sémantique, HTML fournit des balises dédiées que vous pourrez utiliser pour représenter ces parties, par exemple&nbsp;:
 
-- **header :** {{htmlelement("header")}}.
-- **barre de navigation :** {{htmlelement("nav")}}.
-- **contenu principal :** {{htmlelement("main")}}, avec diverses sous‑sections de contenu représentées à l'aide de des éléments {{HTMLElement("article")}}, {{htmlelement("section")}} et {{htmlelement("div")}}.
-- **barre latérale :** {{htmlelement("aside")}} ; souvent mise à l'intérieur de l'élément {{htmlelement("main")}}.
-- **pied de page :** {{htmlelement("footer")}}.
+- **header&nbsp;:** {{htmlelement("header")}}.
+- **barre de navigation&nbsp;:** {{htmlelement("nav")}}.
+- **contenu principal&nbsp;:** {{htmlelement("main")}}, avec diverses sous‑sections de contenu représentées à l'aide de des éléments {{HTMLElement("article")}}, {{htmlelement("section")}} et {{htmlelement("div")}}.
+- **barre latérale&nbsp;:** {{htmlelement("aside")}}&nbsp;; souvent mise à l'intérieur de l'élément {{htmlelement("main")}}.
+- **pied de page&nbsp;:** {{htmlelement("footer")}}.
 
-### Apprentissage actif : exploration du code de l'exemple
+### Apprentissage actif&nbsp;: exploration du code de l'exemple
 
 Notre exemple affiché plus haut est représenté par le code ci‑après (vous le trouverez également [dans le dépôt Github](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html)). Nous aimerions que vous regardiez cet exemple et que vous recherchiez dans le listing suivant les sections constituant les diverses parties du visuel.
 
@@ -193,7 +193,7 @@ La compréhension détaillée de la signification globale de tous les éléments
 
 Parfois, vous êtes dans la situation où vous ne trouvez pas l'élément sémantique idéal pour regrouper certaines entités ou envelopper certains contenus. D'autres fois, vous souhaitez simplement regrouper un ensemble d'éléments pour en faire une entité unique pour des {{glossary("CSS")}} ou des {{glossary("JavaScript")}}. Pour de tels cas, HTML met à votre disposition les éléments {{HTMLElement("div")}} et {{HTMLElement("span")}}}. Utilisez‑les de préférence avec un attribut {{htmlattrxref('class')}} approprié, en quelque sorte étiquetez‑les pour pouvoir les cibler plus facilement.
 
-{{HTMLElement("span")}} est un élément en ligne non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur élément de sémantique textuelle pour envelopper votre contenu, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple :
+{{HTMLElement("span")}} est un élément en ligne non-semantique&nbsp;; vous l'utiliserez seulement si vous ne trouvez pas de meilleur élément de sémantique textuelle pour envelopper votre contenu, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple&nbsp;:
 
 ```html
 <p>Le Roi retourna ivre à sa chambre à une heure, la bière ne l'aidant en rien
@@ -217,7 +217,7 @@ Dans ce cas, la note du rédacteur est simplement supposée fournir une indicati
       ...
     </li>
   </ul>
-  <p>Total des achats : €237,89</p>
+  <p>Total des achats&nbsp;: €237,89</p>
 </div>
 ```
 
@@ -227,9 +227,9 @@ Ce n'est pas vraiment un élément `<aside>` et il n'a pas forcément de relatio
 
 ### Sauts de ligne et traits horizontaux
 
-Les éléments {{htmlelement("br")}} et {{htmlelement("hr")}} sont utilisés à l'occasion et il convient de les connaître :
+Les éléments {{htmlelement("br")}} et {{htmlelement("hr")}} sont utilisés à l'occasion et il convient de les connaître&nbsp;:
 
-`<br>` crée un saut de ligne dans un paragraphe ; c'est le seul moyen de forcer une structure rigide quand vous voulez obtenir une suite de lignes courtes fixes, comme dans une adresse postale ou un poème. Par exemple :
+`<br>` crée un saut de ligne dans un paragraphe&nbsp;; c'est le seul moyen de forcer une structure rigide quand vous voulez obtenir une suite de lignes courtes fixes, comme dans une adresse postale ou un poème. Par exemple&nbsp;:
 
 ```html
 <p>Il y avait une fois une fille nommée Nell<br>
@@ -238,14 +238,14 @@ Mais ses structures et sémantiques affligeantes<br>
 rendaient de ses marquages la lecture inélégante.</p>
 ```
 
-Sans éléments `<br>`, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, [HTML ignore la plupart des blancs](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#whitespace_in_html)) ; avec des \<br> dans le code, voici le rendu de ce qui précède :
+Sans éléments `<br>`, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, [HTML ignore la plupart des blancs](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#whitespace_in_html))&nbsp;; avec des \<br> dans le code, voici le rendu de ce qui précède&nbsp;:
 
 Il y avait une fois une fille nommée Nell
 Qui aimait écrire du HTML
 Mais ses structures et sémantiques affligeantes
 rendaient de ses marquages la lecture inélégante.
 
-`Les éléments <hr>` créent un trait horizontal dans le document marquant un changement thématique dans le texte (comme un changement de sujet ou de scène). Visuallement, c'est juste un trait horizontal, comme dans cet exemple :
+`Les éléments <hr>` créent un trait horizontal dans le document marquant un changement thématique dans le texte (comme un changement de sujet ou de scène). Visuallement, c'est juste un trait horizontal, comme dans cet exemple&nbsp;:
 
 ### Exemple avec hr
 
@@ -255,7 +255,7 @@ rendaient de ses marquages la lecture inélégante.
     <p>Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.</p>
 ```
 
-sera rendu ainsi :
+sera rendu ainsi&nbsp;:
 
 {{EmbedLiveSample("Exemple_avec_hr")}}
 
@@ -269,7 +269,7 @@ Une fois planifié le contenu d'une simple page Web, l'étape logique suivante e
 4.  Ensuite, essayez de trier tous ces éléments de contenu par groupes, pour vous donner une idée des parties qui pourraient aller ensemble sur diverses pages. C'est très similaire à une technique appelée {{glossary("Card sorting","Tri de cartes")}}.![Les articles qui devraient apparaître sur un site de vacances triés en 5 catégories : Recherche, spéciaux, informations spécifiques au pays, résultats de la recherche et choses à acheter.](fr-tri.png)
 5.  Essayez maintenant d'esquisser un plan de site grossier — entourez d'un cercle chaque page de votre site et tracez des flèches pour montrer les flux de travail typiques entre pages. La page d'accueil sera probablement au centre et en lien vers la plupart sinon la totalité des autres ; la plupart des pages d'un petit site devraient être disponibles à partir de la navigation principale, bien qu'il y ait des exceptions. Vous voudrez peut-être aussi ajouter des notes sur la présentation des choses. ![Une carte du site montrant la page d'accueil, la page du pays, les résultats de recherche, la page spéciale, la page de paiement et la page d'achat.](fr-map.png)
 
-### Apprentissage actif : créez la cartographie de votre propre site
+### Apprentissage actif&nbsp;: créez la cartographie de votre propre site
 
 Essayez d'effectuer l'exercice ci-dessus pour un site web de votre propre création. Sur quel sujet aimeriez-vous faire un site ?
 
diff --git a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md
index 215bfa8613..db5e3a2e72 100644
--- a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md
+++ b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md
@@ -245,9 +245,9 @@ textarea.onkeyup = function(){
 
 ### Pourquoi a-t-on besoin de sémantique ?
 
-La sémantique est utilisée partout autour de nous — on se fie à nos précédentes experiences pour savoir à quoi servent les objets du quotidien; quand on voit quelque chose, on sait à quoi cela sert. Par exemple, on s'attend à ce qu'un feu rouge de signalisation signifie « Stop » et qu'un feu vert signifie « Avancez ». Les choses peuvent vite devenir plus compliquées si de mauvaises sémantiques sont appliquées (existe-t-il un pays dans lequel un feu rouge signifie que l'on peut passer ? Je ne l'espère pas.)
+La sémantique est utilisée partout autour de nous — on se fie à nos précédentes experiences pour savoir à quoi servent les objets du quotidien; quand on voit quelque chose, on sait à quoi cela sert. Par exemple, on s'attend à ce qu'un feu rouge de signalisation signifie «&nbsp;Stop&nbsp;» et qu'un feu vert signifie «&nbsp;Avancez ». Les choses peuvent vite devenir plus compliquées si de mauvaises sémantiques sont appliquées (existe-t-il un pays dans lequel un feu rouge signifie que l'on peut passer ? Je ne l'espère pas.)
 
-Dans la même optique, il faut s'assurer que l'on utilise les bons élements et que l'on donne la bonne signification, la bonne fonction et la bonne apparence à notre contenu. Dans ce contexte, l'élément {{htmlelement("h1")}} est aussi un élement sémantique. Il donne au texte auquel il s'applique la fonction (ou la signification) de « titre principal de la page ».
+Dans la même optique, il faut s'assurer que l'on utilise les bons élements et que l'on donne la bonne signification, la bonne fonction et la bonne apparence à notre contenu. Dans ce contexte, l'élément {{htmlelement("h1")}} est aussi un élement sémantique. Il donne au texte auquel il s'applique la fonction (ou la signification) de «&nbsp;titre principal de la page ».
 
 ```html
 <h1>Ceci est un titre principal</h1>
@@ -265,7 +265,7 @@ C'est un élément {{htmlelement("span")}}. Il n'a pas de valeur sémantique. Il
 
 ## Listes
 
-Intéressons-nous maintenant aux listes. Il y a des listes partout dans la vie — de la liste de courses à la liste de directions que vous suivez inconsciemment pour rentrer chez vous tous les jours, sans oublier la liste des instructions que vous suivez dans ce tutoriel ! Les listes sont aussi très répandues sur le Web, nous allons nous intéresser aux trois différents types de liste.
+Intéressons-nous maintenant aux listes. Il y a des listes partout dans la vie — de la liste de courses à la liste de directions que vous suivez inconsciemment pour rentrer chez vous tous les jours, sans oublier la liste des instructions que vous suivez dans ce tutoriel&nbsp;! Les listes sont aussi très répandues sur le Web, nous allons nous intéresser aux trois différents types de liste.
 
 ### Listes non-ordonnées
 
@@ -600,7 +600,7 @@ Si vous êtes arrivé jusqu'ici dans l'article, vous avez toutes les connaissanc
 
   Ingrédients
 
-  1 boîte (400 g) de pois chiches (garbanzos)
+  1 boîte (400 g) de pois chiches (garbanzos)
   175g de crème de sésame
   6 tomates séchées
   un demi poivron rouge
@@ -620,7 +620,7 @@ Si vous êtes arrivé jusqu'ici dans l'article, vous avez toutes les connaissanc
 
   Mettez l'houmous fini au réfrigérateur dans un récipient fermé. Vous le garderez ainsi pendant environ une semaine. S'il se met à fermenter, jettez‑le sans hésiter.
 
-  L'houmous peut être congelé ; consommez‑le dans les deux mois qui suivent sa congélation.</textarea>
+  L'houmous peut être congelé&nbsp;; consommez‑le dans les deux mois qui suivent sa congélation.</textarea>
 
 <div class="playable-buttons">
   <input id="reset" type="button" value="Réinitialiser">
@@ -749,7 +749,7 @@ Il est parfaitement possible d'imbriquer une liste dans une autre. Il se peut qu
 </ol>
 ```
 
-Comme les deux dernières puces de la liste sont très liées à celle qui les précède (elles semblent être des sous-instructions ou des choix correspondant à cette puce), il peut être judicieux de les regrouper dans une même liste non-ordonnée, et placer cette liste dans le quatrième item. Cela ressemblerait alors à ceci :
+Comme les deux dernières puces de la liste sont très liées à celle qui les précède (elles semblent être des sous-instructions ou des choix correspondant à cette puce), il peut être judicieux de les regrouper dans une même liste non-ordonnée, et placer cette liste dans le quatrième item. Cela ressemblerait alors à ceci&nbsp;:
 
 ```html
 <ol>
@@ -774,9 +774,9 @@ Dans le langage, nous mettons souvent l'accent sur certains mots pour modifier l
 
 Dans le langage parlé, pour accentuer, nous insistons sur certains mots, modifiant subtilement le sens de ce que nous disons. De même, dans le langage écrit, nous avons tendance à mettre un certain accent sur des mots en les écrivant en italique. Par exemple, les deux phrases suivantes ont des significations différentes.
 
-« Je suis content que vous n'ayez pas été en retard. »
+«&nbsp;Je suis content que vous n'ayez pas été en retard. »
 
-« Je suis _content_ que vous n'ayez pas été _en retard_. »
+«&nbsp;Je suis _content_ que vous n'ayez pas été _en retard_.&nbsp;»
 
 La première phrase semble indiquer que le locuteur est vraiment soulagé que la personne n'aie pas été en retard. En revanche, la seconde a une tonalité sarcastique ou passive-agressive, exprimant la gêne que la personne soit arrivée un peu en retard.
 
@@ -799,7 +799,7 @@ En HTML, nous utilisons l'élément {{htmlelement("strong")}} (forte importance)
 ```html
 <p>Ce liquide est <strong>hautement toxique</strong>.</p>
 
-<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p>
+<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong>&nbsp;!</p>
 ```
 
 Il est possible d'imbriquer `strong` et `em` :
@@ -809,7 +809,7 @@ Il est possible d'imbriquer `strong` et `em` :
 si vous en buvez, <strong>vous pourriez en <em>mourir</em></strong>.</p>
 ```
 
-### Apprentissage actif : soulignez l'important
+### Apprentissage actif&nbsp;: soulignez l'important
 
 Dans ce paragraphe d'apprentissage actif, nous avons donné un exemple modifiable. À l'intérieur, nous aimerions que vous essayiez d'ajouter de l'emphase et de l'importance aux mots quand vous pensez qu'ils en ont besoin, juste pour une bonne pratique.
 
@@ -950,8 +950,8 @@ HTML5 a redéfini `<b>`, `<i>` et `<u>` avec de nouveaux rôles sémantiques que
 Voici la meilleure règle d'or : il est probablement approprié d'utiliser `<b>`, `<i>`, ou `<u>` pour communiquer le sens traditionnellement associé aux caractères gras, italiques ou soulignés, à condition qu'il n'y ait pas d'élément plus approprié. Toutefois, il demeure toujours essentiel de garder présent à l'esprit le concept d'accessibilité. L'écriture en italique n'est pas très utile aux personnes utilisant des lecteurs d'écran ou un système d'écriture autre que l'alphabet latin.
 
 - {{HTMLElement('i')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec l'italique : des mots étrangers, une désignation taxonomique, des termes techniques, une pensée…
-- {{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras : des mots‑clés, des noms de produits, une phrase liminaire…
-- {{HTMLElement('u')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec le soulignement : noms propres, mauvaise orthographe...
+- {{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras&nbsp;: des mots‑clés, des noms de produits, une phrase liminaire…
+- {{HTMLElement('u')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec le soulignement&nbsp;: noms propres, mauvaise orthographe...
 
 > **Note :** Un petit avertissement à propos du soulignement : **les gens associent fortement soulignement et hyperliens**. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément `<u>` que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait.
 
@@ -987,7 +987,7 @@ Voici la meilleure règle d'or : il est probablement approprié d'utiliser `<b>`
 
 ## Résumé
 
-C'est tout pour l'instant ! Cet article doit vous avoir donné une bonne idée de la façon de commencer à baliser le texte en HTML et présenté les éléments les plus importants dans ce domaine. Il existe énormément d'autres éléments sémantiques à connaître dans ce domaine ; nous en verrons beaucoup plus dans notre article « More Semantic Elements », plus loin dans ce cours. Dans le prochain article, nous examinerons en détail comment [créer des hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks), qui est peut-être l'élément le plus important sur le Web.
+C'est tout pour l'instant ! Cet article doit vous avoir donné une bonne idée de la façon de commencer à baliser le texte en HTML et présenté les éléments les plus importants dans ce domaine. Il existe énormément d'autres éléments sémantiques à connaître dans ce domaine&nbsp;; nous en verrons beaucoup plus dans notre article «&nbsp;More Semantic Elements&nbsp;», plus loin dans ce cours. Dans le prochain article, nous examinerons en détail comment [créer des hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks), qui est peut-être l'élément le plus important sur le Web.
 
 {{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
 
diff --git a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md
index 9e8ff0d14d..12354630db 100644
--- a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md
+++ b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md
@@ -14,12 +14,12 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_à_HTML")}}
 
-Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de `<head>` en HTML.
+Tôt ou tard nous apprenons tous à écrire une lettre&nbsp;; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme&nbsp;! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de `<head>` en HTML.
 
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Avant de se lancer dans cet exercice, vous devez déja avoir travaillé
         <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started"
@@ -41,7 +41,7 @@ Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exempl
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Tester vos connaissances en balisage HTML simple et avancé de texte,
         d'hyperliens et de ce qu'il convient de mettre dans l'élément
@@ -55,30 +55,30 @@ Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exempl
 
 Pour commencer cet exercice, vous devez récupérer le [texte brut que vous allez baliser](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt) et les CSS [à inclure](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt) dans l'HTML. Créez un nouveau fichier `.html` avec l'éditeur de texte dans lequel vous allez travailler (ou bien utilisez un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire l'exercice.)
 
-## Projet « lettre »
+## Projet «&nbsp;lettre&nbsp;»
 
 Pour ce projet, votre tâche consiste à baliser une lettre destinée à être hébergée dans l'intranet d'une université. La lettre est une réponse d'une chercheuse en poste à une doctorante éventuelle à propos de sa candidature pour travailler à l'université.
 
-Sémantique de blocs/structures :
+Sémantique de blocs/structures&nbsp;:
 
 - Il convient que vous donniez à la totalité du document une structure appropriée comprenant le type de document et les éléments {{htmlelement("html")}}, {{htmlelement("head")}} et {{htmlelement("body")}}.
-- La lettre doit être marquée avec une structure de paragraphes et d'en‑têtes, en prenant en considération les points suivants : un en‑tête de haut niveau (la ligne « Re : ») et trois en-têtes de deuxième niveau.
+- La lettre doit être marquée avec une structure de paragraphes et d'en‑têtes, en prenant en considération les points suivants&nbsp;: un en‑tête de haut niveau (la ligne «&nbsp;Re&nbsp;:&nbsp;») et trois en-têtes de deuxième niveau.
 - Les dates de début des semestres, les sujets d'étude et les danses exotiques seront balisées avec les types de listes appropriés.
 - Mettez les deux adresses dans l'élement {{htmlelement("address")}}. En plus, chaque ligne des adresses doit être mise sur une nouvelle ligne sans que ce soit un nouveau paragraphe.
 
-Sémantique en ligne :
+Sémantique en ligne&nbsp;:
 
-- Les noms de l'expéditeur et du destinataire (et « Tél » et « e‑mail ») doivent être marqués comme étant de grande importance.
+- Les noms de l'expéditeur et du destinataire (et «&nbsp;Tél&nbsp;» et «&nbsp;e‑mail&nbsp;») doivent être marqués comme étant de grande importance.
 - Les quatre dates du document doivent être indiquées dans des éléments appropriés contenant des dates lisibles par la machine.
-- La première adresse et la première date de la lettre doivent recevoir une valeur d'attribut de classe « sender-column » ; le CSS que vous ajouterez plus tard les alignera à droite, comme c'est le cas dans une mise en page de lettre classique.
+- La première adresse et la première date de la lettre doivent recevoir une valeur d'attribut de classe «&nbsp;sender-column&nbsp;»&nbsp;; le CSS que vous ajouterez plus tard les alignera à droite, comme c'est le cas dans une mise en page de lettre classique.
 - Les cinq acronymes/abréviations dans le corps du texte de la lettre seront marqués pour permettre leur développement.
 - Les six indices/exposants seront balisés de manière appropriée.
-- Les symboles « degré », « plus grand que » , « multiplier » seront marqués avec les références d'entités voulues.
+- Les symboles «&nbsp;degré&nbsp;», «&nbsp;plus grand que » , «&nbsp;multiplier&nbsp;» seront marqués avec les références d'entités voulues.
 - Essayez de marquer au moins deux mots importants en gras/italique.
-- Deux emplacements nécessitent un hyperlien ; ajoutez les liens appropriés avec des intitulés. Pour l'emplacement sur lequel le lien pointe, utilisez simplement http\://example.com.
+- Deux emplacements nécessitent un hyperlien&nbsp;; ajoutez les liens appropriés avec des intitulés. Pour l'emplacement sur lequel le lien pointe, utilisez simplement http\://example.com.
 - La citation et la devise de l'université doivent être marquées avec les éléments appropriés.
 
-Dans l'en‑tête du document :
+Dans l'en‑tête du document&nbsp;:
 
 - Le jeu de caractères sera précisé comme étant utf-8 avec la balise `meta` appropriée.
 - L'auteur de la lettre sera indiqué dans une balise `meta` adéquate.
@@ -86,8 +86,8 @@ Dans l'en‑tête du document :
 
 ## Conseils et astuces
 
-- Utilisez le [validateur HTML W3C](https://validator.w3.org/) pour valider votre HTML ; Vous aurez des points supplémentaires s'il est valide.
-- Il n'est pas nécessaire de connaître les CSS pour faire cet exercice ; vous avez juste besoin de le mettre dans un élément HTML.
+- Utilisez le [validateur HTML W3C](https://validator.w3.org/) pour valider votre HTML&nbsp;; Vous aurez des points supplémentaires s'il est valide.
+- Il n'est pas nécessaire de connaître les CSS pour faire cet exercice&nbsp;; vous avez juste besoin de le mettre dans un élément HTML.
 
 ## Exemple
 
@@ -97,7 +97,7 @@ La capture d'écran suivante montre ce à quoi la lettre devrait ressembler apr�
 
 ## Évaluation
 
-Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez l'exercice d'abord — il n'y a rien à gagner à tricher !
+Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez l'exercice d'abord — il n'y a rien à gagner à tricher&nbsp;!
 
 {{PreviousMenuNext("Apprendre/HTML/Introduction_to_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_to_HTML")}}
 
diff --git a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
index 2f14f32358..88d0da5d1b 100644
--- a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
+++ b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
@@ -7,7 +7,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content
 {{LearnSidebar}}
 {{PreviousNext("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}
 
-Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page.
+Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page.
 
 <table class="standard-table">
   <tbody>
@@ -34,13 +34,13 @@ Il est essentiel de savoir structurer une page de contenu prête à être mise e
 
 ## Point de départ
 
-Pour commencer cet exercice, vous pouvez télécharger [l'archive contenant les fichiers nécessaires](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true) à cette évaluation. Elle contient :
+Pour commencer cet exercice, vous pouvez télécharger [l'archive contenant les fichiers nécessaires](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true) à cette évaluation. Elle contient :
 
 - le fichier HTML auquel vous allez devoir ajouter le balisage structurel,
 - le fichier CSS pour styliser la page,
 - les images utilisées dans la page.
 
-Décompressez l'archive sur votre ordinateur, ou bien utilisez un site web comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire votre évaluation.
+Décompressez l'archive sur votre ordinateur, ou bien utilisez un site web comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire votre évaluation.
 
 ## Aperçu du projet
 
@@ -50,7 +50,7 @@ Dans ce projet, l'objectif est d'ajouter des éléments structurels au contenu d
 - une zone de contenu principal de deux colonnes : un bloc principal avec le texte de bienvenue et une barre latérale avec des vignettes d'images,
 - un pied de page avec les informations de droits d'auteur et les crédits.
 
-Vous devez ajouter les enveloppes appropriées pour :
+Vous devez ajouter les enveloppes appropriées pour&nbsp;:
 
 - l'en-tête
 - le menu de navigation
@@ -65,8 +65,8 @@ Vous devez aussi
 
 ## **Conseils et astuces**
 
-- Utilisez le « [W3C HTML validator »](https://validator.w3.org/) pour valider votre HTML ; vous aurez des points bonus si la validation s'opère autant que possible (la ligne « googleapis » est une ligne utilisée pour importer des polices personnalisées dans la page à partir du service « Google Fonts » ; elle ne sera pas validée, donc ne vous en inquiétez pas).
-- Il n'est pas nécessaire de connaître quoi que ce soit des CSS pour faire cet exercice ; vous avez juste besoin de placer les CSS fournies dans l'élément HTML.
+- Utilisez le «&nbsp;[W3C HTML validator&nbsp;»](https://validator.w3.org/) pour valider votre HTML&nbsp;; vous aurez des points bonus si la validation s'opère autant que possible (la ligne «&nbsp;googleapis&nbsp;» est une ligne utilisée pour importer des polices personnalisées dans la page à partir du service «&nbsp;Google Fonts » ; elle ne sera pas validée, donc ne vous en inquiétez pas).
+- Il n'est pas nécessaire de connaître quoi que ce soit des CSS pour faire cet exercice&nbsp;; vous avez juste besoin de placer les CSS fournies dans l'élément HTML.
 - Les CSS jointes sont conçues de telle sorte que les éléments structuraux adéquats ont été ajoutés dans le balisage, ils apparaîtront en vert dans le rendu de la page.
 - Si vous êtes bloqué et ne voyez pas où mettre tel élément, cela peut vous aider de tracer un diagramme des blocs de disposition de la page et d'écrire sur chaque élément ce qui, à votre avis devrait envelopper chaque bloc.
 
@@ -78,7 +78,7 @@ La capture d'écran suivante montre un exemple de ce à quoi la page d'accueil p
 
 ## Évaluation
 
-Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez l'exercice d'abord — il n'y a rien à gagner à tricher !
+Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez l'exercice d'abord — il n'y a rien à gagner à tricher&nbsp;!
 
 {{PreviousMenu("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}
 
diff --git a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
index be749e12b5..97792b9300 100644
--- a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
+++ b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
@@ -19,7 +19,7 @@ Les graphiques vectoriels sont les images adaptatives par excellence : légères
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Vous devriez au préalable savoir comment
         <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML"
@@ -32,7 +32,7 @@ Les graphiques vectoriels sont les images adaptatives par excellence : légères
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectifs :</th>
+      <th scope="row">Objectifs&nbsp;:</th>
       <td>Apprendre comment intégrer une image SVG dans une page web.</td>
     </tr>
   </tbody>
@@ -52,7 +52,7 @@ Il est possible de coder le SVG à la main grâce à un éditeur de texte. En re
 
 > **Note :** Sous Inkscape, préférez le format « SVG simple » pour sauvegarder vos fichiers, cela permet d'économiser de l'espace. Pour plus d'informations sur la préparation, lire [cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web](http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html).
 
-## La méthode rapide : {{htmlelement("img")}}
+## La méthode rapide&nbsp;: {{htmlelement("img")}}
 
 Vous pouvez simplement faire référence à un fichier SVG au sein de l'élément {{htmlelement("img")}}, comme vous l'auriez fait avec une image matricielle. Il faudra utiliser l'attribut `height` ou `width` (voire les deux si le fichier SVG ne possède pas de ratio inhérent). Si ce n'est pas déjà fait, vous pouvez [lire ce tutoriel sur `<img>`](/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web).
 
@@ -66,7 +66,7 @@ Vous pouvez simplement faire référence à un fichier SVG au sein de l'élémen
 
 ### Avantages
 
-- Rapide à mettre en œuvre, syntaxe très proche avec les images matricielles, texte alternatif disponible.
+- Rapide à mettre en œuvre, syntaxe très proche avec les images matricielles, texte alternatif disponible.
 - Il est également possible de créer des hyperliens en plaçant l'élément `<img>` dans un élément {{htmlelement("a")}}.
 
 ### Inconvénients
diff --git a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md
index ab1dce1e31..a7beceb5d4 100644
--- a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md
+++ b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md
@@ -17,7 +17,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 ---
 {{LearnSidebar}}{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
 
-Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée.  Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}},  utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} .
+Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée.  Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}},  utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} .
 
 <table class="standard-table">
   <tbody>
@@ -28,10 +28,10 @@ Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureuse
         <a
           href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base"
           >installation des outils de base</a
-        >, bases  de la
+        >, bases de la
         <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers"
           >manipulation des fichiers</a
-        >, fondamentaux du HTML (comme décrit dans  <a
+        >, fondamentaux du HTML (comme décrit dans <a
           href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started"
           >Commencer avec le Web).</a
         >
@@ -50,9 +50,9 @@ Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureuse
 
 ## Comment intégrer une image à une page web ?
 
-Pour mettre une image simple sur une page web, nous utiliserons l'élément {{htmlelement("img")}}.  C'est un {{glossary("empty element","élément vide")}} (ce qui signifie qu'il ne contient ni texte ni balise de fermeture) qui demande au moins un attribut pour fonctionner — `src` (souvent appelé par son nom entier:  *source*). L'attribut `src` contient un chemin pointant vers l'image que vous voulez intégrer, qui peut être une URL absolue ou relative, de la même manière que l'élément  {{htmlelement("a")}}  `href=` attribue des valeurs.
+Pour mettre une image simple sur une page web, nous utiliserons l'élément {{htmlelement("img")}}.  C'est un {{glossary("empty element","élément vide")}} (ce qui signifie qu'il ne contient ni texte ni balise de fermeture) qui demande au moins un attribut pour fonctionner — `src` (souvent appelé par son nom entier: *source*). L'attribut `src` contient un chemin pointant vers l'image que vous voulez intégrer, qui peut être une URL absolue ou relative, de la même manière que l'élément  {{htmlelement("a")}} `href=` attribue des valeurs.
 
-> **Note :** Vous devriez lire  [Une brève présentation des URL et des chemins](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#url)  pour vous rafraîchir la mémoire avant de continuer.
+> **Note :** Vous devriez lire [Une brève présentation des URL et des chemins](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#url)  pour vous rafraîchir la mémoire avant de continuer.
 
 Donc, par exemple, si votre image s'appelle `dinosaur.jpg`, et qu'elle est située dans le même répertoire que votre page HTML, vous pouvez intégrer cette image comme ceci (URL relative) :
 
@@ -60,7 +60,7 @@ Donc, par exemple, si votre image s'appelle `dinosaur.jpg`, et qu'elle est situ�
 <img src="dinosaur.jpg">
 ```
 
-Et si cette image se trouve dans un sous-répertoire `images` situé dans le même dossier que la page HTML (ce que Google recommande pour  {{glossary("SEO")}}/dans un but d'indexation et d'optimisation de la recherche), alors vous l'intégrerez comme ceci :
+Et si cette image se trouve dans un sous-répertoire `images` situé dans le même dossier que la page HTML (ce que Google recommande pour {{glossary("SEO")}}/dans un but d'indexation et d'optimisation de la recherche), alors vous l'intégrerez comme ceci :
 
 ```html
 <img src="images/dinosaur.jpg">
@@ -68,7 +68,7 @@ Et si cette image se trouve dans un sous-répertoire `images` situé dans le m�
 
 Ainsi de suite.
 
-> **Note :** Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. `dinosaur.jpg` est infiniment mieux que `img835.png`.
+> **Note :** Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. `dinosaur.jpg` est infiniment mieux que `img835.png`.
 
 Vous pouvez intégrer l'image en utilisant son URL absolue, par exemple :
 
@@ -84,7 +84,7 @@ Ce n'est pas trés efficace, cela fait travailler le navigateur plus qu'il ne de
 > 2\) vous ayez reçu une permission explicite et écrite du propriètaire de l'image ou,
 > 3\) que vous ayez une preuve indiscutable que cette image appartient au domaine public.
 >
-> Les violations des lois sur les droits d'auteur sont non seulement illégales mais aussi non-éthiques. De plus, ne faites jamais pointer votre attribut `src` vers une image hébergée sur le site de quelqu'un d'autre sans en avoir l'autorisation. Cela s'appelle du "hotlinking". Souvenez-vous que voler de la bande passante à quelqu'un est aussi illégal. Cela ralentit aussi votre page et vous laisse sans contrôle si l'image est enlevée ou remplacée par une autre plus gênante...
+> Les violations des lois sur les droits d'auteur sont non seulement illégales mais aussi non-éthiques. De plus, ne faites jamais pointer votre attribut `src` vers une image hébergée sur le site de quelqu'un d'autre sans en avoir l'autorisation. Cela s'appelle du "hotlinking". Souvenez-vous que voler de la bande passante à quelqu'un est aussi illégal. Cela ralentit aussi votre page et vous laisse sans contrôle si l'image est enlevée ou remplacée par une autre plus gênante...
 
 Le code au-dessus vous donnera, à peu prés, le résultat suivant :
 
@@ -92,7 +92,7 @@ Le code au-dessus vous donnera, à peu prés, le résultat suivant :
 
 > **Note :** Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même.
 
-> **Note :** Vous trouverez les exemples finis de cette section sur [Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) (regardez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html).)
+> **Note :** Vous trouverez les exemples finis de cette section sur [Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) (regardez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html).)
 
 ### Texte alternatif
 
@@ -110,7 +110,7 @@ La manière la plus simple de tester votre texte `alt` est de mal épeler votre
 
 Pourquoi vous verrez partout du texte alt ? Vous en aurez besoin car c'est très pratique en maintes occasions :
 
-- L'utilisateur est un déficient visuel qui utilise un [lecteur d'écran](https://fr.wikipedia.org/wiki/Lecteur_d%27%C3%A9cran) qui s'en sert pour "lire" le web. En fait, avoir du texte alt disponible pour décrire les images est très utile à beaucoup d'utilisateurs.
+- L'utilisateur est un déficient visuel qui utilise un [lecteur d'écran](https://fr.wikipedia.org/wiki/Lecteur_d%27%C3%A9cran) qui s'en sert pour "lire" le web. En fait, avoir du texte alt disponible pour décrire les images est très utile à beaucoup d'utilisateurs.
 - Comme nous l'avons vu au-dessus, vous pourriez avoir mal épelé le nom ou le chemin du fichier.
 - Le navigateur ne gère pas ce type d'image. Certains utilisent encore des navigateurs en terminal, affichant seulement du texte (comme [Lynx)](<https://fr.wikipedia.org/wiki/Lynx_(navigateur)>), qui affichent le texte alt des images.
 - Vous pouvez avoir envie de fournir du texte que pourraient utiliser les moteurs de recherche. Par exemple, ils mettront en relation le texte alt avec des requêtes de recherche.
@@ -121,15 +121,15 @@ Que devriez-vous noter dans vos attributs `alt` ? En premier lieu, cela dépend
 - **Decoration.** Vous devriez utiliser {{anch("CSS background images")}} pour les images décoratives mais si vous devez utiliser du HTML, ajoutez un `alt=""` vide. Si l'image ne fait pas vraiment partie du contenu, un lecteur d'écran ne perdra pas de temps à la lire.
 - **Contenu.** Si votre image fournit une ou plusieurs informations supplémentaires significatives, inscrivez ces mêmes informations dans un *bref* `alt` text – ou mieux, dans le texte principal, que tout le monde puisse les voir. N'écrivez pas de `alt` text redondants. Imaginez combien ce serait ennuyeux pour un lecteur si tous les paragraphes étaient écrits en double... Si l'image est décrite de manière adéquate dans le corps de texte principal, vous pouvez utiliser simplement `alt=""`.
 - **Lien.** Si vous mettez une image à l'intérieur d'une ancre {{htmlelement("a")}} pour transformer une image en lien, vous devez quand même fournir un [Lien texte accessible](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#bplien). Dans de tels cas, vous pouvez, soit l'inclure dans le même élément `<a>`, soit dans l'attribut `alt` de l'image – utilisez ce qui marche le mieux dans votre cas.
-- **Texte.** Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple,  [utilisez CSS](/fr/docs/Web/CSS/text-shadow)  pour ça, plutôt que de mettre du texte dans une image. De toutes manières, si vous ne pouvez pas éviter de faire ça, vous devez ajouter le texte dans l'attribut  `alt` .
+- **Texte.** Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple, [utilisez CSS](/fr/docs/Web/CSS/text-shadow) pour ça, plutôt que de mettre du texte dans une image. De toutes manières, si vous ne pouvez pas éviter de faire ça, vous devez ajouter le texte dans l'attribut `alt` .
 
 Le but est de livrer essentiellement une expérience de qualité, même quand les images ne peuvent être vues. Cela assure à tous les utilisateurs de ne rien manquer du contenu. Essayez de ne pas afficher les images dans votre navigateur et regardez ce qu'il se passe. Vous allez vite réaliser que le texte fourni à la place est réellement utile.
 
-> **Note :** Pour plus d'informations, voyez notre guide  [Textes Alternatifs](/fr/docs/Learn/Accessibility/HTML#Text_alternatives)
+> **Note :** Pour plus d'informations, voyez notre guide  [Textes Alternatifs](/fr/docs/Learn/Accessibility/HTML#Text_alternatives)
 
 ### Largeur et hauteur (width-height)
 
-Vous pouvez vous servir des attributs  `width` et `height` pour spécifier la largeur et la hauteur de votre image. Vous pouvez trouver la largeur et la hauteur de différentes manières. Sur Mac, par exemple, vous pouvez utiliser   <kbd>Cmd</kbd> + <kbd>I</kbd> pour afficher l'info relative au fichier image. Pour revenir à notre exemple, nous pourrions faire ceci :
+Vous pouvez vous servir des attributs  `width` et `height` pour spécifier la largeur et la hauteur de votre image. Vous pouvez trouver la largeur et la hauteur de différentes manières. Sur Mac, par exemple, vous pouvez utiliser   <kbd>Cmd</kbd> + <kbd>I</kbd> pour afficher l'info relative au fichier image. Pour revenir à notre exemple, nous pourrions faire ceci :
 
 ```html
 <img src="images/dinosaur.jpg"
@@ -145,13 +145,13 @@ Cela ne fait pas grande différence à l'affichage dans des circonstances normal
 
 C'est une bonne pratique, cela donne une page se chargeant plus rapidement et en douceur.
 
-De toutes manières, vous ne devez pas altérer la taille de vos images avec les attributs  HTML . Si vous réglez la taille de l'image trop grande, vous aurez un résultat avec beaucoup de "grain", flou ou trop petit et vous dépensez de la bande passante en téléchargeant une image qui ne convient pas aux besoins de l'utilisateur.  Votre image peut aussi sortir distordue, si vous n'en maintenez pas le bon  [Format d'image](https://fr.wikipedia.org/wiki/Format_d%27image). Vous devriez utiliser un éditeur d'images pour la mettre à la bonne taille avant de la mettre dans votre page web.
+De toutes manières, vous ne devez pas altérer la taille de vos images avec les attributs HTML . Si vous réglez la taille de l'image trop grande, vous aurez un résultat avec beaucoup de "grain", flou ou trop petit et vous dépensez de la bande passante en téléchargeant une image qui ne convient pas aux besoins de l'utilisateur.  Votre image peut aussi sortir distordue, si vous n'en maintenez pas le bon  [Format d'image](https://fr.wikipedia.org/wiki/Format_d%27image). Vous devriez utiliser un éditeur d'images pour la mettre à la bonne taille avant de la mettre dans votre page web.
 
-> **Note :** Si vous devez absolument modifier une taille d' image, vous devriez vous servir de  [CSS](/fr/Apprendre/CSS) .
+> **Note :** Si vous devez absolument modifier une taille d' image, vous devriez vous servir de  [CSS](/fr/Apprendre/CSS) .
 
 ### Titre d'images
 
-Comme décrit dans le chapitre [Création d'hyperliens](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks), vous pouvez aussi ajouter un attribut `title` aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :
+Comme décrit dans le chapitre [Création d'hyperliens](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks), vous pouvez aussi ajouter un attribut `title` aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :
 
 ```html
 <img src="images/dinosaur.jpg"
@@ -178,11 +178,11 @@ Nous avons dit plus tôt de ne jamais faire de "hotlinking" sur d'autres serveur
 
 Nous avons encore quelques petites choses pour vous :
 
-- Ajoutez du texte `alt`  , et vérifiez qu'il marche en faisant une faute dans l'URL de l'image.
-- Réglez l'image à une bonne taille :  `width` et `height` ( conseil : c'est 200px wide (large) and 171px high (haut)), puis expérimentez d'autres valeurs pour en appréhender les effets.
-- Mettez un  `title`  sur l'image.
+- Ajoutez du texte `alt`  , et vérifiez qu'il marche en faisant une faute dans l'URL de l'image.
+- Réglez l'image à une bonne taille :  `width` et `height` ( conseil : c'est 200px wide (large) and 171px high (haut)), puis expérimentez d'autres valeurs pour en appréhender les effets.
+- Mettez un  `title`  sur l'image.
 
-Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  _Reset_ .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S*how solution* :
+Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton _Reset_ .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S*how solution* :
 
 ```html hidden
 <h2>Live output</h2>
@@ -323,7 +323,7 @@ En parlant de légendes, il y a de nombreuses manières d'en ajouter qui ira ave
 </div>
 ```
 
-C'est bon. Ça contient ce que vous voulez et c'est aisément stylisable en CSS.  Mais il y a un problème : il n'y a rien de sensé qui relie l'image à sa légende. Ce qui peut poser des problèmes à un lecteur d'écran. Par exemple, quand vous avez 50 images, quelle légende va avec quelle image ?
+C'est bon. Ça contient ce que vous voulez et c'est aisément stylisable en CSS.  Mais il y a un problème : il n'y a rien de sensé qui relie l'image à sa légende. Ce qui peut poser des problèmes à un lecteur d'écran. Par exemple, quand vous avez 50 images, quelle légende va avec quelle image ?
 
 Une meilleure solution consiste en l'utilisation des éléments HTML5 {{htmlelement("figure")}} et {{htmlelement("figcaption")}} . Ils ont été conçus pour cela : fournir un conteneur sémantique aux objets et lier clairement cet objet à sa légende. Notre exemple précédent pourrait être réécrit comme ceci :
 
@@ -337,9 +337,9 @@ Une meilleure solution consiste en l'utilisation des éléments HTML5 {{htmlelem
       <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
     </figure>
 
-L'élément {{htmlelement("figcaption")}}  dit au navigateur et aux technologies d'assistance que la légende décrit le contenu de l'autre élément {{htmlelement("figure")}}.
+L'élément {{htmlelement("figcaption")}}  dit au navigateur et aux technologies d'assistance que la légende décrit le contenu de l'autre élément {{htmlelement("figure")}}.
 
-> **Note :** D'un  point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte `alt` devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble.
+> **Note :** D'un point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte `alt` devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble.
 
 Un objet \<figure> n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui :
 
@@ -347,16 +347,16 @@ Un objet \<figure> n'est pas forcé de contenir une image. C'est une unité de c
 - peut se placer en plusieurs endroits dans une page à flot linéaire.
 - Fournit une information essentielle qui supporte le texte principal.
 
-Cet objet peut être un ensemble d'images, des bribes de code, de l'audio, de la vidéo, des équations, un tableau ou bien d'autres choses.
+Cet objet peut être un ensemble d'images, des bribes de code, de l'audio, de la vidéo, des équations, un tableau ou bien d'autres choses.
 
 ### Pédagogie active : créer un objet figure
 
 Dans cette section, nous allons vous demander de récupérer le code fini de la section "Pédagogie active" précédente et d'y faire ceci :
 
 - Encapsulez-le dans un élément {{htmlelement("figure")}} .
-- Copiez le texte de l'attribut, enlevez l'attribut  `title`  et mettez le texte dans un élément  {{htmlelement("figcaption")}} sous l'image.
+- Copiez le texte de l'attribut, enlevez l'attribut  `title`  et mettez le texte dans un élément  {{htmlelement("figcaption")}} sous l'image.
 
-Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  _Reset_ .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S*how solution* :
+Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton _Reset_ .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S*how solution* :
 
 ```html hidden
 <h2>Live output</h2>
@@ -482,7 +482,7 @@ textarea.onkeyup = function(){
 
 ## Images d'arrière-plan CSS
 
-Vous pouvez également utiliser du CSS pour intégrer des images dans vos pages web (ou JavaScript, mais c'est une autre histoire). Les propriétés CSS {{cssxref("background-image")}} et `background` , sont utilisées pour contrôler le placement de l'image d'arrière-plan. Par exemple, pour placer une image d'arrière-plan sur chaque paragraphe de la page, vous pourriez faire ceci :
+Vous pouvez également utiliser du CSS pour intégrer des images dans vos pages web (ou JavaScript, mais c'est une autre histoire). Les propriétés CSS {{cssxref("background-image")}} et `background`, sont utilisées pour contrôler le placement de l'image d'arrière-plan. Par exemple, pour placer une image d'arrière-plan sur chaque paragraphe de la page, vous pourriez faire ceci :
 
 ```css
 p {
@@ -494,7 +494,7 @@ Le résultat est probablement plus facile à positionner et contrôler qu'une im
 
 En résumé : si une image a du sens, en terme de contenu, vous devriez utiliser une image HTML. Si une image n'est que pure décoration, il vaut mieux utiliser les images d'arrière-plan CSS.
 
-> **Note :** Vous en apprendrez beaucoup plus sur les  [CSS background images](/fr/docs/Learn/CSS/Styling_boxes/Backgrounds) dans notre topic  [CSS](/fr/Apprendre/CSS) .
+> **Note :** Vous en apprendrez beaucoup plus sur les  [CSS background images](/fr/docs/Learn/CSS/Styling_boxes/Backgrounds) dans notre topic  [CSS](/fr/Apprendre/CSS) .
 
 C'est tout pour l'instant. Nous avons découvert en détails les images et légendes. Dans le prochain article, nous monterons en régime pour aborder la manière d'utiliser HTML pour intégrer des vidéos et de l'audio dans une page web.
 
diff --git a/files/fr/learn/html/multimedia_and_embedding/index.md b/files/fr/learn/html/multimedia_and_embedding/index.md
index 62036f5f33..9e8648c61a 100644
--- a/files/fr/learn/html/multimedia_and_embedding/index.md
+++ b/files/fr/learn/html/multimedia_and_embedding/index.md
@@ -22,11 +22,11 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding
 ---
 {{LearnSidebar}}
 
-Jusqu'ici, nous avons vu et utilisé beaucoup de texte dans ce cours mais le web serait vraiment ennuyeux s'il n'utilisait que du texte.  Voyons ensemble la manière de le rendre plus vivant avec plus de contenu intéressant ! Ce module explore l'utilisation d'HTML pour inclure du contenu multimedia dans vos pages web. Cela comprend les différentes manières d'ajouter des images, d'intégrer de la video, de l'audio et même des pages web entières.
+Jusqu'ici, nous avons vu et utilisé beaucoup de texte dans ce cours mais le web serait vraiment ennuyeux s'il n'utilisait que du texte.  Voyons ensemble la manière de le rendre plus vivant avec plus de contenu intéressant&nbsp;! Ce module explore l'utilisation d'HTML pour inclure du contenu multimedia dans vos pages web. Cela comprend les différentes manières d'ajouter des images, d'intégrer de la video, de l'audio et même des pages web entières.
 
 ## Prérequis
 
-Pour commencer ce module dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML comme il est recommandé dans l'article : [introduction au HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML). Nous vous recommandons de passer du temps sur cette introduction en premier lieu (ou un article équivalent d'initiation au HTML) puis de repasser ici pour continuer.
+Pour commencer ce module dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML comme il est recommandé dans l'article : [introduction au HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML). Nous vous recommandons de passer du temps sur cette introduction en premier lieu (ou un article équivalent d'initiation au HTML) puis de repasser ici pour continuer.
 
 > **Note :** Si vous travaillez sur une tablette, ordinateur ou autre périphérique où vous n'auriez pas la capacité de créer vos propres fichiers, sachez que vous pouvez tester (la plupart) de vos lignes de code sur des programmes en ligne comme [JSBin](https://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/).
 
@@ -35,10 +35,10 @@ Pour commencer ce module dans de bonnes conditions, vous devriez posséder les 
 Ce module contient les articles suivants, qui vous guideront à travers les fondamentaux de l'intégration multimedia sur une page web.
 
 - **[Images en HTML](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML)**
-  - : Il existe d'autres types de multimedia à prendre en compte mais il est logique de commencer par cet élément si humble qu'est  l'élément {{htmlelement("img")}}. Il est utilisé pour integrér une simple image dans une page web. Au long de cet article, nous verrons son utilisation en détails, des rudiments à l'annotation par légendes en utilisant {{HTMLElement("figure")}}, et de quelle manière il est liè  aux images d'arrière-plan de CSS.
+  - : Il existe d'autres types de multimedia à prendre en compte mais il est logique de commencer par cet élément si humble qu'est l'élément {{htmlelement("img")}}. Il est utilisé pour integrér une simple image dans une page web. Au long de cet article, nous verrons son utilisation en détails, des rudiments à l'annotation par légendes en utilisant {{HTMLElement("figure")}}, et de quelle manière il est liè aux images d'arrière-plan de CSS.
 - **[Vidéo et contenu audio](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video)**
-  - : Ensuite, nous étudierons la façon d'utiliser les éléments HTML5 {{HTMLElement("video")}} et {{HTMLElement("audio")}}, pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs,  enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens.
-- [De \<object> à \<iframe> — autres techniques d'intégration](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies)
+  - : Ensuite, nous étudierons la façon d'utiliser les éléments HTML5 {{HTMLElement("video")}} et {{HTMLElement("audio")}}, pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs, enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens.
+- [De \<object> à \<iframe> — autres techniques d'intégration](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies)
   - : À ce stade, nous aimerions faire un pas de côté, en examinant quelques éléments qui vous permettent d'intégrer une grande variété de types de contenu dans vos pages web : les éléments {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} et {{HTMLElement("object")}}. `<iframe>` est fait pour intégrer d'autres pages web, les deux autres vous autorisent à faire de même pour les PDFs, SVG, et même Flash — une technologie en voie de disparition, mais que vous pouvez encore voir de façon semi-régulière.
 - [Ajouter des images vectorielles sur le Web](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web)
   - : Les images vectorielles peuvent être très utiles dans certaines situations. Contrairement aux formats classiques comme le PNG/JPG, elles ne se déforment pas lorsqu'on les agrandit et peuvent rester lisses lorsqu'on les met à l'échelle. Cet article vous présente ce que sont les images vectorielles et comment inclure le populaire format {{glossary("SVG")}} dans les pages web.
@@ -50,11 +50,11 @@ Ce module contient les articles suivants, qui vous guideront à travers les fond
 Les évaluations qui suivent sont là pour tester votre compréhension des bases du HTML traitées dans les guides ci-dessus.
 
 - [Évaluation : page d'accueil Mozilla](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page)
-  - : Cette évaluation concernera vos connaissances de quelques unes des techniques traitées dans les articles de ce module, vous amenant à ajouter des images et vidéos à une page de garde « funky » développant les atouts de Mozilla !
+  - : Cette évaluation concernera vos connaissances de quelques unes des techniques traitées dans les articles de ce module, vous amenant à ajouter des images et vidéos à une page de garde «&nbsp;funky&nbsp;» développant les atouts de Mozilla&nbsp;!
 
 ## À voir aussi
 
 - [Intégrer une carte interactive en haut d'une image](/fr/docs/Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image)
-  - : Une représentation cartographique fournit un mécanisme qui lie différents secteurs d'une image à différents endroits. Pensez à une carte qui fournirait des informations plus approfondies sur chaque pays sur lequel vous cliquez. Cette technique peut parfois être d'une grande utilité.
+  - : Une représentation cartographique fournit un mécanisme qui lie différents secteurs d'une image à différents endroits. Pensez à une carte qui fournirait des informations plus approfondies sur chaque pays sur lequel vous cliquez. Cette technique peut parfois être d'une grande utilité.
 - [Web Principes fondamentaux 2](https://teach.mozilla.org/activities/web-lit-basics-two/)
-  - : Un excellent cours de Mozilla qui explore et teste les compétences développées dans le module :  *Multimedia et intégration*. Approfondissez les fondamentaux de la composition de pages web, concevez des outils pour l'accessibilité, le partage de ressources, découvrez l'utilisation de supports en ligne et la mutualisation du travail (ce qui signifie que votre travail est librement disponible et partagé avec d'autres).
+  - : Un excellent cours de Mozilla qui explore et teste les compétences développées dans le module : *Multimedia et intégration*. Approfondissez les fondamentaux de la composition de pages web, concevez des outils pour l'accessibilité, le partage de ressources, découvrez l'utilisation de supports en ligne et la mutualisation du travail (ce qui signifie que votre travail est librement disponible et partagé avec d'autres).
diff --git a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
index 03ce70e743..53b04d3c49 100644
--- a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
+++ b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
@@ -35,7 +35,7 @@ Dans cette partie, nous testerons vos connaissances des quelques techniques abor
 
 Pour démarrer cette étude, vous devez aller chercher toutes les images et l'HTML disponibles dans le répertoire [mdn-splash-page-start](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/) sur github. Mettez le contenu du fichier [index.html](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html) dans un fichier appelé `index.html` sur votre disque dur local, dans un nouveau répertoire. Puis copiez [pattern.png](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png) dans le même dossier (clic droit sur l'image pour le menu des options).
 
-Allez dans le répertoire [originals](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals) chercher les différentes images et faites la même chose; vous aurez peut-être à les enregistrer dans un nouveau dossier pour l'instant, au cas où vous auriez besoin d'en manipuler certaines en utilisant un éditeur graphique avant de pouvoir les utiliser.
+Allez dans le répertoire [originals](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals) chercher les différentes images et faites la même chose; vous aurez peut-être à les enregistrer dans un nouveau dossier pour l'instant, au cas où vous auriez besoin d'en manipuler certaines en utilisant un éditeur graphique avant de pouvoir les utiliser.
 
 > **Note :** le fichier HTML en exemple contient un bon nombre de CSS, pour styliser la page. Vous n'avez pas besoin de modifier le CSS, juste l'HTML dans l'élément {{htmlelement("body")}} — tant que vous insérez les bonnes balises, le style sera cohérent.
 
@@ -51,7 +51,7 @@ Avec votre éditeur d'images favori, créez des versions de 400 et 120 px de lar
 - `firefox-addons.jpg`
 - `mozilla-dinosaur-head.png`
 
-Donnez-leur des noms similaires comme :  `firefoxlogo400.png` et `firefoxlogo120.png`.
+Donnez-leur des noms similaires comme :  `firefoxlogo400.png` et `firefoxlogo120.png`.
 
 Continuons avec `mdn.svg`, ces images seront vos icônes pour lier aux ressources externes, contenues dans l'espace`further-info`. Vous ferez aussi un lien vers le logo firefox dans l'en-tête du site. Réservez toutes ces copies dans le même dossier que l'`index.html`.
 
@@ -65,7 +65,7 @@ A l'intèrieur de l'élément {{htmlelement("header")}} , ajoutez un élément {
 
 ### Ajouter une vidéo dans le contenu principal de l'article
 
-Dans l'élément {{htmlelement("article")}}  (juste en-dessous de la balise d'ouverture), intégrez la vidéo YouTube trouvée ici : <https://www.youtube.com/watch?v=ojcNcvb1olg>, en utilisant les outils YouTube appropriés pour générer le code. La vidéo devra faire 400px de large.
+Dans l'élément {{htmlelement("article")}}  (juste en-dessous de la balise d'ouverture), intégrez la vidéo YouTube trouvée ici : <https://www.youtube.com/watch?v=ojcNcvb1olg>, en utilisant les outils YouTube appropriés pour générer le code. La vidéo devra faire 400px de large.
 
 ### Ajouter des images adaptatives aux liens vers les ressources externes
 
@@ -91,7 +91,7 @@ La capture d'écran suivante montre à quoi devrait ressembler la page d'accueil
 
 ## Évaluation
 
-Si vous suivez cette étude en faisant partie d'un programme de cours organisé, vous devriez pouvoir montrer votre travail à votre professeur/mentor pour une correction. Si vous apprenez seul, alors vous pourrez obtenir des informations et des corrections en demandant sur le  [fil de discussion concernant cet exercice](https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679), ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez de faire l'exercice d'abord — On ne gagne rien en trichant !
+Si vous suivez cette étude en faisant partie d'un programme de cours organisé, vous devriez pouvoir montrer votre travail à votre professeur/mentor pour une correction. Si vous apprenez seul, alors vous pourrez obtenir des informations et des corrections en demandant sur le  [fil de discussion concernant cet exercice](https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679), ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez de faire l'exercice d'abord — On ne gagne rien en trichant !
 
 {{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
 
diff --git a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
index b2cc02ff0a..90b98611fd 100644
--- a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
+++ b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
@@ -1,5 +1,5 @@
 ---
-title: Des objets aux « iframe » — autres techniques d'intégration
+title: Des objets aux «&nbsp;iframe&nbsp;» — autres techniques d'intégration
 slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
 tags:
   - Apprentissage
@@ -19,21 +19,21 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technolog
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
 
-Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les  `<iframe>` servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement.
+Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les  `<iframe>` servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement.
 
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
-        Compétences informatiques de base, 
+        Compétences informatiques de base,
         <a
           href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base"
           >installation des outils de base</a
         >, bases de la
         <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers"
           >manipulation des fichiers</a
-        >, connaissance des fondamentaux du HTML (comme expliqué dans 
+        >, connaissance des fondamentaux du HTML (comme expliqué dans
         <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started"
           >Commencer avec le HTML)</a
         >
@@ -41,11 +41,11 @@ Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans l
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Apprendre comment incorporer des éléments, tels que d'autres pages ou
-        des clips Flash,  dans des pages Web à l'aide de
-        {{htmlelement("object")}}, {{htmlelement("embed")}}, et
+        des clips Flash,  dans des pages Web à l'aide de
+        {{htmlelement("object")}}, {{htmlelement("embed")}}, et
         {{htmlelement("iframe")}}.
       </td>
     </tr>
@@ -58,15 +58,15 @@ Il y a longtemps, sur le Web, il était courant d'utiliser des **cadres** pour c
 
 
 
-Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les [applets Java](/fr/docs/Glossary/Java) et [Flash](/fr/docs/Glossary/Adobe_Flash) — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes : accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner.
+Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les [applets Java](/fr/docs/Glossary/Java) et [Flash](/fr/docs/Glossary/Adobe_Flash) — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes&nbsp;: accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner.
 
-Enfin, l'élément {{htmlelement("iframe")}} est apparu (avec d'autres moyens d'intégration de contenu, comme {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc). Cet élément permet d'intégrer un document web entier dans un autre, comme s'il s'agissait d'un élément {{htmlelement("img")}}} ou d'un autre élément de ce type. Il  est régulièrement utilisé aujourd'hui.
+Enfin, l'élément {{htmlelement("iframe")}} est apparu (avec d'autres moyens d'intégration de contenu, comme {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc). Cet élément permet d'intégrer un document web entier dans un autre, comme s'il s'agissait d'un élément {{htmlelement("img")}}} ou d'un autre élément de ce type. Il est régulièrement utilisé aujourd'hui.
 
 Maintenant que la leçon d'histoire est terminée, passons à autre chose et voyons comment utiliser certains d'entre eux.
 
 
 
-## Apprentissage actif : utilisations classiques de l'intégration
+## Apprentissage actif&nbsp;: utilisations classiques de l'intégration
 
 Dans cet article, passons directement à l'apprentissage actif pour vous donner tout de suite une idée concrète de l'utilité des techniques d'intégration. Le monde en ligne connaît très bien [Youtube](https://www.youtube.com/), mais beaucoup de gens ne connaissent pas les facilités de partage dont il dispose. Voyons comment Youtube nous permet d'intégrer une vidéo dans toute page qui nous plairait à l'aide d'un élément {{htmlelement("iframe")}}}.
 
@@ -78,7 +78,7 @@ Dans cet article, passons directement à l'apprentissage actif pour vous donner
 En prime, vous pouvez aussi essayer d'intégrer une carte [Google Map](https://www.google.com/maps/) dans l'exemple.
 
 1.  Allez sur Google Maps et trouvez une carte qui vous plaise.
-2.  Cliquez sur le  « Menu Hamburger » (trois lignes horizontales) en haut à gauche de l'interface utilisateur.
+2.  Cliquez sur le  «&nbsp;Menu Hamburger&nbsp;» (trois lignes horizontales) en haut à gauche de l'interface utilisateur.
 3.  Selectionnez l'option _Share or embed map_ (Partager ou intégrer une carte).
 4.  Selectionnez l'option _Embed map_ (intégrer une carte), qui vous fournira du code `<iframe>` — copiez‑le.
 5.  Inserez‑le dans la boîte _Input_ di‑dessous et voyez le résultat dans _Output_.
@@ -209,9 +209,9 @@ textarea.onkeyup = function(){
 
 ## Iframes en détail
 
-Alors, facile et amusant, non ? Les éléments {{htmlelement("iframe")}} sont conçus pour intégrer d'autres documents Web dans le document en cours de traitement. C'est ce qu'il y a de mieux pour incorporer des contenus tierce‑partie dans un site Web, contenus sur lesquels vous n'aurez peut‑être pas de contrôle direct, mais pour lesquels vous ne voulez pas implémenter votre propre version — comme une vidéo de fournisseurs de vidéo en ligne, un système de commentaires comme [Disqus](https://disqus.com/), des cartes de fournisseurs en ligne, des bandeaux publicitaires, etc. Les exemples modifiables en direct utilisés dans ce cours ont été implémentés avec des `<iframe>`.
+Alors, facile et amusant, non ? Les éléments {{htmlelement("iframe")}} sont conçus pour intégrer d'autres documents Web dans le document en cours de traitement. C'est ce qu'il y a de mieux pour incorporer des contenus tierce‑partie dans un site Web, contenus sur lesquels vous n'aurez peut‑être pas de contrôle direct, mais pour lesquels vous ne voulez pas implémenter votre propre version — comme une vidéo de fournisseurs de vidéo en ligne, un système de commentaires comme [Disqus](https://disqus.com/), des cartes de fournisseurs en ligne, des bandeaux publicitaires, etc. Les exemples modifiables en direct utilisés dans ce cours ont été implémentés avec des `<iframe>`.
 
-Il y a de sérieux {{anch("problèmes de sécurité")}} à prendre en considération avec \<iframe>, comme nous le verrons plus loin, mais cela ne veut pas dire que vous ne devez pas les utiliser dans vos sites Web — cela demande juste un peu de connaissance et de soin à la conception. Examinons le code un peu plus en détail. Disons que vous voulez intégrer le glossaire MDN dans une de vos pages Web — vous pourriez tenter quelque chose comme :
+Il y a de sérieux {{anch("problèmes de sécurité")}} à prendre en considération avec \<iframe>, comme nous le verrons plus loin, mais cela ne veut pas dire que vous ne devez pas les utiliser dans vos sites Web — cela demande juste un peu de connaissance et de soin à la conception. Examinons le code un peu plus en détail. Disons que vous voulez intégrer le glossaire MDN dans une de vos pages Web — vous pourriez tenter quelque chose comme&nbsp;:
 
     <iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
             width="100%" height="500" frameborder="0"
@@ -220,30 +220,30 @@ Il y a de sérieux {{anch("problèmes de sécurité")}} à prendre en considéra
         Lien de repli pour les navigateurs ne prenant pas en charge iframe  </a> </p>
     </iframe>
 
-Cet exemple inclut les éléments de base essentiels nécessaires à l'utilisation d'un `<iframe>` :
+Cet exemple inclut les éléments de base essentiels nécessaires à l'utilisation d'un `<iframe>`&nbsp;:
 
 - {{htmlattrxref('allowfullscreen','iframe')}}
   - : Si activé, `<iframe>` pourra être mis en mode plein écran avec [Full Screen API](/fr/docs/Web/API/Fullscreen_API) (un peu hors‑sujet dans cet article).
 - {{htmlattrxref('frameborder','iframe')}}
   - : Si défini à la valeur 1, demande à l'explorateur de tracer une bordure entre cadres, c'est le comportement par défaut. 0 supprime la bordure. L'utilisation d'un tel attribut n'est plus trop recommandée, car le même résultat peut être obtenu en mieux avec {{cssxref('border')}}`: none;` dans le {{Glossary('CSS')}}.
 - {{htmlattrxref('src','iframe')}}
-  - : Cet attribut, comme  avec {{htmlelement("video")}} ou {{htmlelement("img")}}, contient un chemin vers l'URL du document à intégrer.
+  - : Cet attribut, comme avec {{htmlelement("video")}} ou {{htmlelement("img")}}, contient un chemin vers l'URL du document à intégrer.
 - {{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}
   - : Ces attributs définissent la largeur et la hauteur souhaitée pour `<iframe>`.
 - **Contenu de repli**
   - : Comme pour d'autres éléments semblables, tels {{htmlelement("video")}}, vous pouvez préciser un contenu de repli entre les balises ouvrantes et fermantes `<iframe></iframe>` qui seront affichées si l'explorateur ne prend pas en charge `<iframe>`. Dans notre cas nous avons mis un lien vers une page. Il est peu vraisemblable que vous rencontriez de nos jours un explorateur qui ne prenne pas en charge `<iframe>`.
 - {{htmlattrxref('sandbox','iframe')}}
-  - : Cet attribut n'est fonctionnel que dans des explorateurs un peu plus récents, contrairement aux autres attributs de  `<iframe>` (par ex. IE 10 et au‑delà). Il requiert des paramètres de sécurité renforcés ; nous vous en disons plus dans le paragraphe suivant.
+  - : Cet attribut n'est fonctionnel que dans des explorateurs un peu plus récents, contrairement aux autres attributs de  `<iframe>` (par ex. IE 10 et au‑delà). Il requiert des paramètres de sécurité renforcés&nbsp;; nous vous en disons plus dans le paragraphe suivant.
 
 > **Note :** Afin d'améliorer la vitesse, il est pertinent de définir l'attribut `src` de `iframe` avec JavaScript après que le chargement du contenu principal est effectué. La page est utilisable plus tôt et le temps de chargement officiel de la page est diminué (une métrique {{glossary("SEO")}} importante).
 
 ### Problèmes de sécurité
 
-Nous avons dit plus haut qu'il y avait des problèmes en matière de sécurité — entrons maintenant un peu plus dans le détail. Nous ne nous attendons pas à cette problèmatique vous soit parfaiment claire dès la première lecture ; nous voulons simplement vous y sensibiliser et fournir un point de référence auquel vous pourrez revenir quand vous aurez plus d'expérience et commencerez à prévoir l'utilisation de `<iframe>` dans vos travaux et expérimentations. Car, il n'y a pas de craintes inutiles à avoir et refuser d'utiliser `<iframe>` — il faut juste être prudent. Poursuivons ...
+Nous avons dit plus haut qu'il y avait des problèmes en matière de sécurité — entrons maintenant un peu plus dans le détail. Nous ne nous attendons pas à cette problèmatique vous soit parfaiment claire dès la première lecture&nbsp;; nous voulons simplement vous y sensibiliser et fournir un point de référence auquel vous pourrez revenir quand vous aurez plus d'expérience et commencerez à prévoir l'utilisation de `<iframe>` dans vos travaux et expérimentations. Car, il n'y a pas de craintes inutiles à avoir et refuser d'utiliser `<iframe>` — il faut juste être prudent. Poursuivons ...
 
-Fabricants de navigateurs et développeurs Web ont appris à la dure que `<iframe>` constitue sur le Web une cible commune (terme officiel : un **vecteur d'attaque**) pour des personnes mal intentionnées.  `<iframe>` est une porte d'entrée pour les attaques de ces personnes quand ils essaient de modifier malicieusement une page Web ou d'amener des utilisateurs à faire quelque chose qu'ils ne voudraient pas faire, comme révéler des informations confidentielles comme noms d'utilisateur et mots de passe. Pour cette raison, les ingénieurs spécialistes et les développeurs de navigateurs ont développé divers mécanismes de sécurité pour rendre `<iframe>` plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous.
+Fabricants de navigateurs et développeurs Web ont appris à la dure que `<iframe>` constitue sur le Web une cible commune (terme officiel : un **vecteur d'attaque**) pour des personnes mal intentionnées.  `<iframe>` est une porte d'entrée pour les attaques de ces personnes quand ils essaient de modifier malicieusement une page Web ou d'amener des utilisateurs à faire quelque chose qu'ils ne voudraient pas faire, comme révéler des informations confidentielles comme noms d'utilisateur et mots de passe. Pour cette raison, les ingénieurs spécialistes et les développeurs de navigateurs ont développé divers mécanismes de sécurité pour rendre `<iframe>` plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous.
 
-> **Note :** Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de `<iframe>` : les hackeurs incorporent un `<iframe>` invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles.
+> **Note :** Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de `<iframe>`&nbsp;: les hackeurs incorporent un `<iframe>` invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles.
 
 Un exemple rapide d'abord - essayez de charger l'exemple précédent que nous avons montré ci-dessus dans votre navigateur - vous pouvez le [trouver en direct sur Github](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html) (voyez le [code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html) aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la _Console_ dans les [outils de développement](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique _Load denied by X-Frame-Options: https\://developer.mozilla.org/en-US/docs/Glossary does not permit framing_ (_Chargement interdit par X-Frame-Options: https\://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre_) . C'est parce que les développeurs qui ont construit MDN ont inclus un paramètre sur le serveur des pages du site empêchant l'intégration de ces pages sur un autre site avec `<iframe>` (voir {{anch("Configurer les directives CSP")}}, ci-dessous). Parfaitement sensé — il n'y a aucune raison d'intégrer une page entière de MDN dans d'autres pages, sauf à vouloir les intégrer dans votre site et les prétendre vôtres, ou bien tenter de voler des données par l'intermédiaire d'un détournement de clic, actions qui sont tous les deux des malhonnêtetés. De plus, si tout le monde se mettait à faire cela, toute la bande passante supplémentaire nécessaire commencerait à coûter un paquet d'argent à Mozilla.
 
@@ -266,35 +266,35 @@ L'utilisation de HTTPS nécessite un certificat de sécurité, ce qui peut être
 
 > **Note :** [Github pages](/fr/docs/Learn/Common_questions/Using_Github_pages) allows content to be served via HTTPS by default, so is useful for hosting content. If you are using different hosting and are not sure, ask your hosting provider about it.
 
-#### Toujours utiliser l'attribut  `sandbox`
+#### Toujours utiliser l'attribut  `sandbox`
 
-Pour minimiser la possibilité que des attaquants commettent des actions néfastes  sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il  fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un [sandbox](https://en.wikipedia.org/wiki/Sandbox_(computer_security)) (_bac à sable_).
+Pour minimiser la possibilité que des attaquants commettent des actions néfastes sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un [sandbox](https://en.wikipedia.org/wiki/Sandbox_(computer_security)) (_bac à sable_).
 
-Un contenu en dehors du « bac à sable » peut faire beaucoup trop de choses (exécuter du JavaScript, soumettre des formulaires, des fenêtres « popup », etc.). Par défaut, vous devez imposer toute restriction disponible avec un attribut `sandbox` sans paramètres, comme montré dans notre exemple précédent.
+Un contenu en dehors du «&nbsp;bac à sable&nbsp;» peut faire beaucoup trop de choses (exécuter du JavaScript, soumettre des formulaires, des fenêtres «&nbsp;popup&nbsp;», etc.). Par défaut, vous devez imposer toute restriction disponible avec un attribut `sandbox` sans paramètres, comme montré dans notre exemple précédent.
 
-Si c'est absolument nécessaire, vous pouvez ajouter des permissions une à une (en tant que valeur de l'attribut `sandbox=""`) — voir l'entrée de référence {{htmlattrxref('sandbox','iframe')}} pour toutes les options disponibles. Il est important de noter que vous ne devez _jamais_ mettre à la fois les valeurs `allow-scripts` et `allow-same-origin` aux attributs de la « sandbox » — dans ce cas,, le contenu intégré pourrait contourner la politique de sécurité originelle qui empêche les sites d'exécuter des scripts et donc utiliser JavaScript pour désactiver complètement le « bac à sable ».
+Si c'est absolument nécessaire, vous pouvez ajouter des permissions une à une (en tant que valeur de l'attribut `sandbox=""`) — voir l'entrée de référence {{htmlattrxref('sandbox','iframe')}} pour toutes les options disponibles. Il est important de noter que vous ne devez _jamais_ mettre à la fois les valeurs `allow-scripts` et `allow-same-origin` aux attributs de la «&nbsp;sandbox&nbsp;» — dans ce cas,, le contenu intégré pourrait contourner la politique de sécurité originelle qui empêche les sites d'exécuter des scripts et donc utiliser JavaScript pour désactiver complètement le «&nbsp;bac à sable&nbsp;».
 
-> **Note :** Mettre le code dans le « bac à sable » n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un `<iframe>`). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}.
+> **Note :** Mettre le code dans le «&nbsp;bac à sable&nbsp;» n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un `<iframe>`). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}.
 
-#### Configurer  les directives CSP
+#### Configurer les directives CSP
 
-{{Glossary("CSP")}} est un acronyme pour « **[content security policy](/fr/docs/Web/Security/CSP)** » (politique de sécurité du contenu) ; les directives CSP fournissent un [ensemble d'en‑têtes HTTP](/fr/docs/Web/Security/CSP/CSP_policy_directives) (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les `<iframe>`, vous pouvez _[configurer votre serveur pour qu'il adresse une en‑tête appropriée `X-Frame-Options`](/fr/docs/Web/HTTP/X-Frame-Options)._ Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques) ; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut.
+{{Glossary("CSP")}} est un acronyme pour «&nbsp;**[content security policy](/fr/docs/Web/Security/CSP)** » (politique de sécurité du contenu)&nbsp;; les directives CSP fournissent un [ensemble d'en‑têtes HTTP](/fr/docs/Web/Security/CSP/CSP_policy_directives) (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les `<iframe>`, vous pouvez _[configurer votre serveur pour qu'il adresse une en‑tête appropriée `X-Frame-Options`](/fr/docs/Web/HTTP/X-Frame-Options)._ Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques)&nbsp;; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut.
 
 > **Note :** Lisez le post de Frederik Braun sur [On the X-Frame-Options Security Header](https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/) pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article.
 
 ## Les éléments \<embed> et \<object>
 
-Les éléments {{htmlelement("embed")}} et {{htmlelement("object")}} ont une fonction différente de {{htmlelement("iframe")}}} — ces éléments sont des outils d'intégration à caractère général pour importer plusieurs types de contenu externe ; cela comprend des technologies de greffons comme Java Applets ou Flash, PDF (affichable dans le navigateur avec un greffon PDF) et même du contenu comme des vidéos, du SVG ou des images !
+Les éléments {{htmlelement("embed")}} et {{htmlelement("object")}} ont une fonction différente de {{htmlelement("iframe")}}} — ces éléments sont des outils d'intégration à caractère général pour importer plusieurs types de contenu externe&nbsp;; cela comprend des technologies de greffons comme Java Applets ou Flash, PDF (affichable dans le navigateur avec un greffon PDF) et même du contenu comme des vidéos, du SVG ou des images&nbsp;!
 
 > **Note :** Un **greffon** est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native.
 
-Cependant, il est peu probable que vous utilisiez beaucoup ces éléments — les applets ne sont plus utilisés depuis des années, Flash n'est plus très apprécié pour un certain nombre de raisons (voir {{anch("Le cas « greffons »")}}}, ci-dessous), les PDF ont tendance à être plutôt liés qu'intégrés, et les autres contenus tels que les images et la vidéo disposent d'éléments d'intégration beaucoup plus faciles à manipuler. Les greffons et ces méthodes d'intégration sont assurément une technique traditionnelle héritée : nous les mentionnons principalement au cas où vous les rencontreriez dans certaines circonstances, comme des intranets ou des projets d'entreprise.
+Cependant, il est peu probable que vous utilisiez beaucoup ces éléments — les applets ne sont plus utilisés depuis des années, Flash n'est plus très apprécié pour un certain nombre de raisons (voir {{anch("Le cas «&nbsp;greffons&nbsp;»")}}}, ci-dessous), les PDF ont tendance à être plutôt liés qu'intégrés, et les autres contenus tels que les images et la vidéo disposent d'éléments d'intégration beaucoup plus faciles à manipuler. Les greffons et ces méthodes d'intégration sont assurément une technique traditionnelle héritée&nbsp;: nous les mentionnons principalement au cas où vous les rencontreriez dans certaines circonstances, comme des intranets ou des projets d'entreprise.
 
 Si vous avez besoin d'intégrer du contenu de greffon, vous aurez besoin de ce minimum d'information :
 
 
 
-|                                                                                      | {{htmlelement("embed")}}                                                          | {{htmlelement("object")}}                                                              |
+|                                                                                      | {{htmlelement("embed")}}                                                          | {{htmlelement("object")}}                                                              |
 | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
 | {{glossary("URL")}} du contenu à intégrer                                       | {{htmlattrxref('src','embed')}}                                                  | {{htmlattrxref('data','object')}}                                                  |
 | {{glossary("type MIME", 'type de media')}} _précis_ du contenu intégré | {{htmlattrxref('type','embed')}}                                              | {{htmlattrxref('type','object')}}                                                  |
@@ -304,7 +304,7 @@ Si vous avez besoin d'intégrer du contenu de greffon, vous aurez besoin de ce m
 
 
 
-> **Note :** `<object>` requiert un attribut `data`, un attribut `type`, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). `typemustmatch` empêche le fichier incorporé d'être exécuté avant que l'attribut `type` indique le type exact de média. `typemustmatch`  peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon).
+> **Note :** `<object>` requiert un attribut `data`, un attribut `type`, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). `typemustmatch` empêche le fichier incorporé d'être exécuté avant que l'attribut `type` indique le type exact de média. `typemustmatch`  peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon).
 
 Voici un exemple utilisant l'élément {{htmlelement("embed")}} pour intégrer un film Flash (voyez ceci [en direct sur Github](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html) ainsi que [le code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html) également):
 
@@ -318,7 +318,7 @@ Voici un exemple utilisant l'élément {{htmlelement("embed")}} pour intégrer u
 
 Plutôt horrible, n'est-ce pas ? Le HTML généré par l'outil Adobe Flash avait tendance à être encore pire, utilisant un élément \<objet> avec un élément \<embed> intégré pour couvrir toutes les bases (voir un exemple.) Flash a même été utilisé avec succès comme contenu de repli pour la vidéo HTML5, pendant un certain temps, mais cela est de plus en plus souvent considéré comme non nécessaire.
 
-Regardons maintenant un exemple avec `<object>` ; il intègre  un PDF dans une  (voir  [l'exemple en direct](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html) et le [code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html)) :
+Regardons maintenant un exemple avec `<object>`&nbsp;; il intègre un PDF dans une  (voir  [l'exemple en direct](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html) et le [code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html))&nbsp;:
 
 ```html
 <object data="mypdf.pdf" type="application/pdf"
@@ -329,7 +329,7 @@ Regardons maintenant un exemple avec `<object>` ; il intègre  un PDF dans un
 
 Les PDF étaient un tremplin nécessaire entre le papier et le numérique, mais ils posent de nombreux [problèmes d'accessibilité](http://webaim.org/techniques/acrobat/acrobat) et peuvent être difficiles à lire sur de petits écrans. Ils ont encore tendance à être populaires dans certains cercles, mais il est préférable d'établir un lien vers eux pour qu'ils puissent être téléchargés ou lus sur une page séparée, plutôt que de les intégrer dans une page Web.
 
-### Le cas « greffons »
+### Le cas «&nbsp;greffons&nbsp;»
 
 Il était une fois des greffons qui s'étaient rendus indispensables sur le Web. Vous souvenez-vous de l'époque où vous deviez installer Adobe Flash Player juste pour regarder un film en ligne ? Et puis vous avez constamment reçu des alertes ennuyeuses pour la mise à jour de Flash Player et de votre environnement d'exécution Java. Depuis, les technologies Web sont devenues beaucoup plus robustes, et cette époque est révolue. Pour la plupart des applications, il est temps d'arrêter de diffuser du contenu dépendant de greffons et de commencer à tirer profit des technologies Web à la place.
 
@@ -342,7 +342,7 @@ Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("Jav
 
 ## Résumé
 
-Le problème de l'intégration de contenus tiers dans des documents web peut rapidement devenir très complexe : dans cet article nous avons donc essayé de le présenter de manière simple et classique — en espérant la méthode pertinente même si elle touche à certaines fonctionnalités parmi les plus avancées des techniques impliquées. Pour commencer, il est peu probable que vous utilisiez l'intégration pour autre chose que l'intégration de contenu tiers de cartes ou vidéos dans vos pages. L'expérience grandissant, il est vraisemblable que vous lui trouverez d'autres utilisations.
+Le problème de l'intégration de contenus tiers dans des documents web peut rapidement devenir très complexe&nbsp;: dans cet article nous avons donc essayé de le présenter de manière simple et classique — en espérant la méthode pertinente même si elle touche à certaines fonctionnalités parmi les plus avancées des techniques impliquées. Pour commencer, il est peu probable que vous utilisiez l'intégration pour autre chose que l'intégration de contenu tiers de cartes ou vidéos dans vos pages. L'expérience grandissant, il est vraisemblable que vous lui trouverez d'autres utilisations.
 
 D'autres techniques impliquent l'intégration de contenu externe en plus de celles discutées ici. Nous en avons vu dans des articles précédents, comme {{htmlelement("video")}}}, {{htmlelement("audio")}}, et {{htmlelement("img")}}}, mais il y en a d'autres à découvrir, comme {{htmlelement("canvas")}} pour les graphiques 2D et 3D générés en JavaScript, et {{htmlelement("svg")}} pour intégrer des graphiques vectoriels. Nous verrons SVG dans le prochain article de ce module.
 
diff --git a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md
index 42f69234e8..834e8ebf24 100644
--- a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md
+++ b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md
@@ -11,7 +11,7 @@ Dans cet article, nous allons préciser le concept d'images adaptatives — imag
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Vous devriez connaître
         <a href="/fr/docs/Learn/HTML/Introduction_to_HTML"
@@ -25,7 +25,7 @@ Dans cet article, nous allons préciser le concept d'images adaptatives — imag
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectifs :</th>
+      <th scope="row">Objectifs&nbsp;:</th>
       <td>
         Apprendre comment utiliser des fonctionnalités comme
         <a href="/fr/docs/Web/HTML/Element/Img#attr-srcset"
@@ -41,49 +41,49 @@ Dans cet article, nous allons préciser le concept d'images adaptatives — imag
   </tbody>
 </table>
 
-## Pourquoi des images adaptatives ?
+## Pourquoi des images adaptatives&nbsp;?
 
-Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Un site web classique a peut-être une image d'en-tête pour flatter le regard des visiteurs, plus peut-être quelques images de contenu plus loin. Imaginons que vous souhaitez que l'image d'en-tête couvre toute la largeur de l'en-tête et que l'image de contenu s'insère quelque part à l'intérieur de la colonne de contenu. Voici un exemple simple :
+Quel problème essayons-nous de résoudre avec des images adaptatives&nbsp;? Examinons un scénario typique. Un site web classique a peut-être une image d'en-tête pour flatter le regard des visiteurs, plus peut-être quelques images de contenu plus loin. Imaginons que vous souhaitez que l'image d'en-tête couvre toute la largeur de l'en-tête et que l'image de contenu s'insère quelque part à l'intérieur de la colonne de contenu. Voici un exemple simple&nbsp;:
 
 ![Cet exemple de site est montré tel qu'il s'affiche sur un écran large - ici la première image s'affiche bien, et comme elle est suffisamment grande on voit le détail de l'image (promeneurs) en son centre](picture-element-wide.png)
 
-Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez [voir cet exemple en direct](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html) et trouver son [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html) sur GitHub). Nous ne nous attarderons pas sur les CSS, excepté pour préciser ceci :
+Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez [voir cet exemple en direct](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html) et trouver son [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html) sur GitHub). Nous ne nous attarderons pas sur les CSS, excepté pour préciser ceci&nbsp;:
 
-- Le contenu du corps a été fixé à une largeur maximale de 1200 pixels — dans les fenêtres de largeur supérieure, il s'affiche sur 1200 pixels et se centre dans l'espace disponible. Dans celles de largeur inférieure, le contenu occupe 100 % de la largeur de la vue.
+- Le contenu du corps a été fixé à une largeur maximale de 1200 pixels — dans les fenêtres de largeur supérieure, il s'affiche sur 1200 pixels et se centre dans l'espace disponible. Dans celles de largeur inférieure, le contenu occupe 100 % de la largeur de la vue.
 - L'image d'en-tête est définie de sorte que son milieu soit toujours au centre de l'en-tête, quelle que soit sa largeur. Ainsi, si le site est regardé sur un écran moins large, le détail important au centre de l'image (les gens) peut toujours être vu, et l'excès est perdu de part et d'autre. L'image a une hauteur de 200 pixels.
 - Les images de contenu sont définies de sorte que si l'élément corps devient plus petit que l'image, les images se contractent pour rester toujours à l'intérieur du corps sans jamais déborder.
 
-Tout cela c'est très bien, mais le problème apparaît lorsque vous commencez à regarder le site sur un écran étroit — l'en-tête semble correct, mais commence à prendre beaucoup de hauteur pour un mobile, et la première image de contenu d'autre part n'est pas terrible — à cette taille, vous avez du mal à distinguer les personnes !
+Tout cela c'est très bien, mais le problème apparaît lorsque vous commencez à regarder le site sur un écran étroit — l'en-tête semble correct, mais commence à prendre beaucoup de hauteur pour un mobile, et la première image de contenu d'autre part n'est pas terrible — à cette taille, vous avez du mal à distinguer les personnes&nbsp;!
 
-![Notre site d'exemple vu sur un écran étroit  la première image est réduite à telle point qu'il est difficile d'y voir les détails.](non-responsive-narrow.png)
+![Notre site d'exemple vu sur un écran étroit la première image est réduite à telle point qu'il est difficile d'y voir les détails.](non-responsive-narrow.png)
 
 Quand le site est vu sur un écran étroit, il serait préférable de montrer une version recadrée de l'image sur les parties importantes de la vue au lieu de faire voir des bâtiments, et peut-être quelque chose entre les deux pour un écran de largeur moyenne comme une tablette — ce problème relève de **décisions de nature artistique**.
 
-De plus, il n'est pas nécessaire d'intégrer des images aussi volumineuses sur une page destinée à être affichée sur l'écran minuscule d'un mobile ; c'est le problème des **changements de résolution** — une image matricielle est définie sur un certain nombre de pixels de large et un certain nombre de pixels de haut ; comme on a pu le voir à propos des [graphiques vectoriels](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web), une image matricielle paraît pixelisée si elle est affichée plus grande que sa taille d'origine (alors qu'un graphique vectoriel ne l'est pas).
+De plus, il n'est pas nécessaire d'intégrer des images aussi volumineuses sur une page destinée à être affichée sur l'écran minuscule d'un mobile&nbsp;; c'est le problème des **changements de résolution** — une image matricielle est définie sur un certain nombre de pixels de large et un certain nombre de pixels de haut&nbsp;; comme on a pu le voir à propos des [graphiques vectoriels](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web), une image matricielle paraît pixelisée si elle est affichée plus grande que sa taille d'origine (alors qu'un graphique vectoriel ne l'est pas).
 
 Et si elle est montrée significativement plus petite que sa taille d'origine, c'est un gaspillage de bande passante — les personnes utilisant des navigateurs mobiles en particulier ne veulent pas gaspiller leur bande passante en téléchargeant une grande image destinée à des ordinateurs de bureau, alors qu'une petite image ferait l'affaire pour leur appareil. La solution idéale serait d'avoir plusieurs résolutions disponibles et de servir des tailles appropriées selon le type d'appareil accédant au site web.
 
 Pour compliquer encore plus les choses, certains appareils ont des écrans à haute résolution, écrans qui ont besoin d'images plus grandes que ce à quoi on pourrait s'attendre pour s'afficher correctement. Il s'agit pratiquement du même problème, mais dans un contexte légèrement différent.
 
-Vous pouvez penser que des images vectorielles sont la solution à ces problèmes : elles le sont dans une certaine mesure — elles sont à la fois de petite taille et se mettent à l'échelle. Utilisez‑les partout où c'est possible. Mais elles ne conviennent pas à tous les types d'images — parfaites pour des graphiques simples, des motifs, des éléments d'interface, etc., il devient très compliqué de créer une image vectorielle avec le genre de détails que l'on trouve dans une photo, par exemple. Les formats matriciels comme JPEG sont plus adaptés au type d'images affiché dans l'exemple ci-dessus.
+Vous pouvez penser que des images vectorielles sont la solution à ces problèmes&nbsp;: elles le sont dans une certaine mesure — elles sont à la fois de petite taille et se mettent à l'échelle. Utilisez‑les partout où c'est possible. Mais elles ne conviennent pas à tous les types d'images — parfaites pour des graphiques simples, des motifs, des éléments d'interface, etc., il devient très compliqué de créer une image vectorielle avec le genre de détails que l'on trouve dans une photo, par exemple. Les formats matriciels comme JPEG sont plus adaptés au type d'images affiché dans l'exemple ci-dessus.
 
-Ce type de problème n'existait pas quand le web a vu le jour, du début jusqu'au milieu des années 90 — à l'époque, les seuls appareils permettant de naviguer sur le web étaient les ordinateurs de bureau et les portables, de sorte que les ingénieurs et rédacteurs de spécifications pour les navigateurs ne pouvaient même pas imaginer l'existence de ces problèmes. Pour résoudre les problèmes indiqués ci-dessus, les techniques d'images adaptatives sont de mise en œuvre récente : elles offrent au navigateur plusieurs fichiers d'images, soit montrant tous la même chose mais avec un nombre de pixels différent (commutation de résolution), soit des images différentes selon l'espace alloué (décisions artistiques).
+Ce type de problème n'existait pas quand le web a vu le jour, du début jusqu'au milieu des années 90 — à l'époque, les seuls appareils permettant de naviguer sur le web étaient les ordinateurs de bureau et les portables, de sorte que les ingénieurs et rédacteurs de spécifications pour les navigateurs ne pouvaient même pas imaginer l'existence de ces problèmes. Pour résoudre les problèmes indiqués ci-dessus, les techniques d'images adaptatives sont de mise en œuvre récente&nbsp;: elles offrent au navigateur plusieurs fichiers d'images, soit montrant tous la même chose mais avec un nombre de pixels différent (commutation de résolution), soit des images différentes selon l'espace alloué (décisions artistiques).
 
 > **Note :** Toutes les nouvelles fonctionnalités présentées dans cet article — [`srcset`](/fr/docs/Web/HTML/Element/Img#attr-srcset)/[`sizes`](/fr/docs/Web/HTML/Element/Img#attr-sizes)/[`<picture>`](/fr/docs/Web/HTML/Element/picture) — sont toutes prises en charge dans les versions de navigateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris le navigateur Edge de Microsoft, même si ce n'est pas le cas d'Internet Explorer).
 
-## Comment créer des images adaptatives ?
+## Comment créer des images adaptatives&nbsp;?
 
-Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément [`<img>`](/fr/docs/Web/HTML/Element/Img) du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a [sans doute de meilleurs outils](http://blog.cloudfour.com/responsive-images-101-part-8-css-images/) que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir.
+Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément [`<img>`](/fr/docs/Web/HTML/Element/Img) du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a [sans doute de meilleurs outils](http://blog.cloudfour.com/responsive-images-101-part-8-css-images/) que le HTML pour la conception adaptative&nbsp;: nous en parlerons dans le module CSS à venir.
 
-### Commutations de résolution : tailles différentes
+### Commutations de résolution&nbsp;: tailles différentes
 
-Alors, quel est le problème à résoudre à l'aide des commutations de résolution ? Nous voulons afficher un contenu d'image identique, juste plus grand ou plus petit selon l'appareil — c'est la situation de la deuxième image du contenu de notre exemple précédent. L'élément standard [`<img>`](/fr/docs/Web/HTML/Element/Img) vous permet classiquement de ne faire pointer le navigateur que vers un seul fichier source :
+Alors, quel est le problème à résoudre à l'aide des commutations de résolution&nbsp;? Nous voulons afficher un contenu d'image identique, juste plus grand ou plus petit selon l'appareil — c'est la situation de la deuxième image du contenu de notre exemple précédent. L'élément standard [`<img>`](/fr/docs/Web/HTML/Element/Img) vous permet classiquement de ne faire pointer le navigateur que vers un seul fichier source :
 
 ```html
 <img src="elva-fairy-800w.jpg" alt="Elva habillée en fée">
 ```
 
-Mais il est possible d'utiliser deux nouveaux attributs — [`srcset`](/fr/docs/Web/HTML/Element/Img#attr-srcset) et [`sizes`](/fr/docs/Web/HTML/Element/Img#attr-sizes) — permettant de fournir plusieurs images source avec des indications pour permettre au navigateur de faire le bon choix. Vous trouverez un exemple de cela dans le fichier [responsive.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) sur GitHub (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html)) :
+Mais il est possible d'utiliser deux nouveaux attributs — [`srcset`](/fr/docs/Web/HTML/Element/Img#attr-srcset) et [`sizes`](/fr/docs/Web/HTML/Element/Img#attr-sizes) — permettant de fournir plusieurs images source avec des indications pour permettre au navigateur de faire le bon choix. Vous trouverez un exemple de cela dans le fichier [responsive.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) sur GitHub (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html))&nbsp;:
 
 ```html
 <img srcset="elva-fairy-480w.jpg 480w,
@@ -96,7 +96,7 @@ Mais il est possible d'utiliser deux nouveaux attributs — [`srcset`](/fr/docs/
 
 Les attributs `srcset` et `sizes` paraissent complexes, mais ils ne sont pas difficiles à comprendre si vous les formatez comme indiqué ci-dessus, avec une partie différente de la valeur de l'attribut sur chaque ligne. Chaque valeur contient une liste séparée par des virgules et chaque partie de la liste est composée de trois sous-parties. Passons maintenant en revue leur contenu.
 
-**`srcset`** définit l'ensemble des images offertes au choix du navigateur, et la taille de chaque image. Avant chaque virgule, nous avons écrit :
+**`srcset`** définit l'ensemble des images offertes au choix du navigateur, et la taille de chaque image. Avant chaque virgule, nous avons écrit&nbsp;:
 
 1.  un nom de **fichier image** (`elva-fairy-480w.jpg`),
 2.  un espace,
@@ -110,22 +110,22 @@ Les attributs `srcset` et `sizes` paraissent complexes, mais ils ne sont pas dif
 
     pour faire apparaître l'écran des infos).
 
-**`sizes`** définit un ensemble de conditions pour le média (par ex. des largeurs d'écran) et indique quelle taille d'image serait la plus adaptée si certaines conditions sont satisfaites — ce sont les conditions dont nous avons parlé plus haut. Dans ce cas, nous écrivons avant chaque virgule :
+**`sizes`** définit un ensemble de conditions pour le média (par ex. des largeurs d'écran) et indique quelle taille d'image serait la plus adaptée si certaines conditions sont satisfaites — ce sont les conditions dont nous avons parlé plus haut. Dans ce cas, nous écrivons avant chaque virgule&nbsp;:
 
-1.  une **condition pour le média** (`(max-width:480px)`) — vous pourrez en savoir plus à ce propos dans l'[article sur les CSS](/fr/docs/Learn/CSS), mais pour le moment disons simplement que cette condition pour le média décrit un état possible de l'écran. Dans notre cas, nous disons « si la largeur de fenêtre est de 480 pixels ou moins »,
+1.  une **condition pour le média** (`(max-width:480px)`) — vous pourrez en savoir plus à ce propos dans l'[article sur les CSS](/fr/docs/Learn/CSS), mais pour le moment disons simplement que cette condition pour le média décrit un état possible de l'écran. Dans notre cas, nous disons «&nbsp;si la largeur de fenêtre est de 480 pixels ou moins »,
 2.  une espace,
-3.  **la largeur de la place** occupée par l'image si la condition pour le média est vraie (`440px`).
+3.  **la largeur de la place** occupée par l'image si la condition pour le média est vraie (`440px`).
 
-> **Note :** pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (`px`, `em`) ou relative au viewport (`vw`), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). Le navigateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média.
+> **Note :** pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (`px`, `em`) ou relative au viewport (`vw`), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). Le navigateur ignore tout ce qui suit dès la première condition concordante&nbsp;; donc soyez attentif à l'ordre de ces conditions pour le média.
 
-Ainsi, une fois ces attributs en place, le navigateur va :
+Ainsi, une fois ces attributs en place, le navigateur va&nbsp;:
 
 1.  noter la largeur du périphérique,
 2.  vérifier quelle est la première condition vraie pour le média dans la liste des tailles,
 3.  noter la largeur d'emplacement demandée par le média,
 4.  charger l'image référencée dans la liste `srcset` qui est la plus proche de la taille choisie.
 
-Et c'est tout ! Donc à ce stade, si un navigateur prenant en charge une largeur de vue de 480 px charge la page, la condition pour le média `(max-width: 480px)` sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier `elva-fairy-480w.jpg` sera chargé, car sa largeur intrinsèque (`480w`) est celle qui est la plus proche de `440px`. L'image 800 px a une taille de 128 Ko sur disque alors que la version 480 px n'occupe que 63 Ko — une économie de 65Ko. Imaginez maintenant qu'il s'agisse d'une page avec beaucoup d'images. L'utilisation de cette technique peut permettre aux personnes naviguant sur mobile d'économiser beaucoup de bande passante.
+Et c'est tout&nbsp;! Donc à ce stade, si un navigateur prenant en charge une largeur de vue de 480 px charge la page, la condition pour le média `(max-width: 480px)` sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier `elva-fairy-480w.jpg` sera chargé, car sa largeur intrinsèque (`480w`) est celle qui est la plus proche de `440px`. L'image 800 px a une taille de 128 Ko sur disque alors que la version 480 px n'occupe que 63 Ko — une économie de 65Ko. Imaginez maintenant qu'il s'agisse d'une page avec beaucoup d'images. L'utilisation de cette technique peut permettre aux personnes naviguant sur mobile d'économiser beaucoup de bande passante.
 
 > **Note :** lorsque vous testez cela avec un navigateur de bureau, si ce dernier échoue à charger l'image la plus étroite alors que vous avez réduit la largeur de la fenêtre au maximum, regardez la taille du <i lang="en">viewport</i> (dont vous pouvez avoir une approximation via l'instruction `document.querySelector("html").clientWidth` dans la console JavaScript). Selon les navigateurs, il existe différentes tailles minimales au-delà desquelles on ne pourra pas plus réduire la fenêtre (tailles minimales qui pourraient être plus larges qu'on ne le pense). Lorsque vous testez avec un navigateur mobile, vous pouvez utiliser les outils comme la page `about:debugging` de Firefox pour inspecter la page chargée sur le mobile à l'aide des outils de développement pour navigateur de bureau.
 >
@@ -133,11 +133,11 @@ Et c'est tout ! Donc à ce stade, si un navigateur prenant en charge une largeu
 
 Les navigateurs les plus anciens qui ne prennent pas en charge ces fonctionnalités les ignorent; poursuivent et chargent normalement l'image référencée dans l'attribut [`src`](/fr/docs/Web/HTML/Element/Img#attr-src).
 
-> **Note :** dans l'élément [`<head>`](/fr/docs/Web/HTML/Element/head) du document, vous trouvez la ligne `<meta name="viewport" content="width=device-width">` : ceci force les navigateurs mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains navigateurs mobiles mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception).
+> **Note :** dans l'élément [`<head>`](/fr/docs/Web/HTML/Element/head) du document, vous trouvez la ligne `<meta name="viewport" content="width=device-width">`&nbsp;: ceci force les navigateurs mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains navigateurs mobiles mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception).
 
-### Commutation de résolution : même taille, résolutions différentes
+### Commutation de résolution&nbsp;: même taille, résolutions différentes
 
-Si votre ordinateur prend en charge plusieurs résolutions d'affichage, mais que tout le monde voit l'image avec la même taille effective sur l'écran, vous pouvez permettre au navigateur de choisir une image de résolution appropriée en utilisant `srcset` avec `x-descriptors` et sans `sizes` — une syntaxe un peu plus facile en quelque sorte ! Vous pouvez trouver un exemple de ce à quoi cela ressemble dans [srcset-resolutions.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)) :
+Si votre ordinateur prend en charge plusieurs résolutions d'affichage, mais que tout le monde voit l'image avec la même taille effective sur l'écran, vous pouvez permettre au navigateur de choisir une image de résolution appropriée en utilisant `srcset` avec `x-descriptors` et sans `sizes` — une syntaxe un peu plus facile en quelque sorte ! Vous pouvez trouver un exemple de ce à quoi cela ressemble dans [srcset-resolutions.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html))&nbsp;:
 
 ```html
 <img srcset="elva-fairy-320w.jpg,
@@ -146,7 +146,7 @@ Si votre ordinateur prend en charge plusieurs résolutions d'affichage, mais que
      src="elva-fairy-640w.jpg" alt="Elva habillée en fée">
 ```
 
-![Une photo d'une petite fille habillée en fée avec un filtre appliqué à l'image pour obtenir l'effet d'une vieille photo.](resolution-example.png)Dans cet exemple, le CSS suivant est appliqué à l'image de façon à ce qu'elle ait une largeur de 320 pixels à l'écran (également nommée pixels CSS) :
+![Une photo d'une petite fille habillée en fée avec un filtre appliqué à l'image pour obtenir l'effet d'une vieille photo.](resolution-example.png)Dans cet exemple, le CSS suivant est appliqué à l'image de façon à ce qu'elle ait une largeur de 320 pixels à l'écran (également nommée pixels CSS)&nbsp;:
 
 ```css
 img {
@@ -160,13 +160,13 @@ Dans ce cas, `sizes` n'est pas nécessaire — le navigateur détermine simpleme
 
 Pour résumer, le problème des **décisions de nature artistique** réside dans le choix des modifications à apporter à l'image selon les diverses tailles d'affichage. Par exemple, si un instantané d'un grand plan paysager avec une personne au milieu, correctement affiché sur un site web avec le navigateur d'un ordinateur de bureau, est rétréci lorsque ce même site est visionné sur un navigateur de mobile, cet instantané risque d'avoir mauvaise mine, car la personne sera vraiment minuscule et difficile à voir. Il serait probablement préférable de montrer sur un mobile une image portrait plus petite d'un zoom sur la personne. L'élément [`<picture>`](/fr/docs/Web/HTML/Element/picture) nous permet d'implémenter ce type de solution.
 
-Revenons à notre exemple initial du fichier [not-responsive.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html). Cette image nécessite d'opérer un choix de nature artistique :
+Revenons à notre exemple initial du fichier [not-responsive.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html). Cette image nécessite d'opérer un choix de nature artistique&nbsp;:
 
 ```html
 <img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras">
 ```
 
-Arrangeons cela avec [`<picture>`](/fr/docs/Web/HTML/Element/picture)} ! Comme pour `<vidéo>` et `<audio>`, l'élément `<picture>` est une enveloppe conteneur de plusieurs éléments [`<source>`](/fr/docs/Web/HTML/Element/Source)} ; ces éléments indiquent plusieurs sources différentes entre lesquelles le navigateur peut choisir ; ils sont suivis du très important élément [`<img>`](/fr/docs/Web/HTML/Element/Img)}. Le code dans [responsive.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) ressemblera à :
+Arrangeons cela avec [`<picture>`](/fr/docs/Web/HTML/Element/picture)}&nbsp;! Comme pour `<vidéo>` et `<audio>`, l'élément `<picture>` est une enveloppe conteneur de plusieurs éléments [`<source>`](/fr/docs/Web/HTML/Element/Source)}&nbsp;; ces éléments indiquent plusieurs sources différentes entre lesquelles le navigateur peut choisir&nbsp;; ils sont suivis du très important élément [`<img>`](/fr/docs/Web/HTML/Element/Img)}. Le code dans [responsive.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) ressemblera à&nbsp;:
 
 ```html
 <picture>
@@ -176,17 +176,17 @@ Arrangeons cela avec [`<picture>`](/fr/docs/Web/HTML/Element/picture)} ! Comme
 </picture>
 ```
 
-- Les éléments `<source>` incluent un attribut `media` qui contient une condition pour le média — comme avec le premier exemple `srcset`, ces conditions sont testées pour décider de l'image à montrer — le premier qui renvoie `true` sera affiché. Dans notre cas, si la largeur de la fenêtre est de 799 px ou moins, l'image du premier élément `<source>` sera affichée. Si la largeur de la fenêtre est de 800 px plus, ce sera la deuxième.
+- Les éléments `<source>` incluent un attribut `media` qui contient une condition pour le média — comme avec le premier exemple `srcset`, ces conditions sont testées pour décider de l'image à montrer — le premier qui renvoie `true` sera affiché. Dans notre cas, si la largeur de la fenêtre est de 799 px ou moins, l'image du premier élément `<source>` sera affichée. Si la largeur de la fenêtre est de 800 px plus, ce sera la deuxième.
 - Les attributs `srcset` contiennent le chemin vers l'image à afficher. Noter que comme avec `<img>` plus haut, `<source>` peut prendre plusieurs attributs `srcset` référençant plusieurs images, ainsi qu'un attribut `sizes` également. Ainsi, non seulement vous pouvez offrir plusieurs images par l'intermédiaire d'un élément `<picture>`, mais aussi offrir plusieurs résolutions pour chacune d'entre elles. En réalité, vous ne ferez pas ce type de montage très souvent.
 - Dans tous les cas, vous devez fournir un élément `<img>`, avec `src` et `alt`, juste avant `</picture>`, sinon aucune image n'apparaîtra. Cet élément ménage un cas par défaut appliqué si aucune des conditions de média ne renvoie vrai (vous pouvez réellement enlever le deuxième élément `<source>` dans cet exemple), et une solution de repli pour les navigateurs qui ne prennent pas en charge l'élément `<picture>`.
 
-Ce code nous permet d'afficher une image adaptée à la fois sur un écran large et sur un écran étroit, comme montré ci‑dessous :
+Ce code nous permet d'afficher une image adaptée à la fois sur un écran large et sur un écran étroit, comme montré ci‑dessous&nbsp;:
 
 ![Notre exemple vu sur un écran assez large : la première image est OK et on voit le détail au centre.](picture-element-wide.png)![Notre exemple vu sur un écran étroit où l'élément picture permet de passer la première image à une image en portrait, plus utile sur un écran étroit.](picture-element-narrow.png)
 
-> **Note :** vous ne devez utiliser l'attribut `media` qu'avec un scénario de décision de nature artistique ; quand vous utilisez `media`, ne mettez pas de conditions pour le média avec l'attribut `sizes.`
+> **Note :** vous ne devez utiliser l'attribut `media` qu'avec un scénario de décision de nature artistique&nbsp;; quand vous utilisez `media`, ne mettez pas de conditions pour le média avec l'attribut `sizes.`
 
-### Pourquoi ne peut-on pas réaliser cela avec le CSS ou du JavaScript ?
+### Pourquoi ne peut-on pas réaliser cela avec le CSS ou du JavaScript&nbsp;?
 
 Lorsque le navigateur commence à charger une page, il commence à télécharger (précharger) toutes les images avant que l'analyseur principal n'ait commencé à charger et à interpréter le CSS et le JavaScript de la page. Cette technique est utile, car elle permet de réduire de 20 % en moyenne le temps de chargement des pages. Cependant, elle n'est d'aucune aide pour les images adaptatives, d'où la nécessité de mettre en œuvre des solutions comme `srcset`. Vous ne pourriez pas, par exemple, charger l'élément [`<img>`](/fr/docs/Web/HTML/Element/Img)}, puis détecter la largeur de fenêtre avec JavaScript et changer dynamiquement l'image source pour une image plus petite si désiré. À ce moment-là, l'image originale aurait déjà été chargée, et vous chargeriez en plus la petite image, ce qui est encore pire en termes d'image adaptative.
 
@@ -194,7 +194,7 @@ Lorsque le navigateur commence à charger une page, il commence à télécharger
 
 Il existe plusieurs nouveaux formats d'image très intéressants (comme WebP et JPEG-2000) qui sont à la fois de taille réduite et de haute qualité. Toutefois, la prise en charge par les navigateurs est ponctuelle.
 
-`<picture>` nous permet de servir encore les plus vieux navigateurs. Vous pouvez indiquer le type MIME dans les attributs `type` de façon à ce que le navigateur puisse immédiatement rejeter les types de fichiers non pris en charge :
+`<picture>` nous permet de servir encore les plus vieux navigateurs. Vous pouvez indiquer le type MIME dans les attributs `type` de façon à ce que le navigateur puisse immédiatement rejeter les types de fichiers non pris en charge&nbsp;:
 
 ```html
 <picture>
@@ -208,23 +208,23 @@ Il existe plusieurs nouveaux formats d'image très intéressants (comme WebP et
 - Dans un élément `<source>`, vous ne pouvez vous référer qu'à des images du type déclaré avec `type`.
 - Comme précédemment, il n'y a pas d'inconvénient à utiliser des listes avec une virgule comme séparateur avec `srcset` et `sizes`, selon les besoins.
 
-## Testez vos compétences !
+## Testez vos compétences&nbsp;!
 
-Et vous voici à la fin de cet article, mais saurez-vous vous rappeler les informations les plus importantes ? Vous pourrez trouver une évaluation détaillée pour tester ces compétences à la fin du module : voir [Créer une page de présentation de Mozilla](/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page).
+Et vous voici à la fin de cet article, mais saurez-vous vous rappeler les informations les plus importantes&nbsp;? Vous pourrez trouver une évaluation détaillée pour tester ces compétences à la fin du module&nbsp;: voir [Créer une page de présentation de Mozilla](/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page).
 
 ## Résumé
 
-Voilà notre paquet‑cadeau pour des images adaptatives — nous espérons que ces nouvelles techniques vous plaisent. Résumons, nous vous avons exposé deux méthodes distinctes pour résoudre ce problème :
+Voilà notre paquet‑cadeau pour des images adaptatives — nous espérons que ces nouvelles techniques vous plaisent. Résumons, nous vous avons exposé deux méthodes distinctes pour résoudre ce problème&nbsp;:
 
-- **les décisions de nature artistique** : cette méthode consiste à servir des images recadrées selon les diverses mises en page — par exemple, une image paysagère offrant toute la scène pour une mise en page destinée aux ordinateurs de bureau et une image portrait montrant le sujet principal zoomé de près pour une mise en page destinée aux mobiles. On résout alors ce problème avec [`<picture>`](/fr/docs/Web/HTML/Element/picture).
-- **la commutation de résolution** : cette méthode consiste à servir des images issues de fichiers plus petits pour les périphériques à petit écran, car ils n'ont que faire des grosses images prévues pour les écrans d'ordinateurs de bureau — et en plus, en option, adapter la résolution de l'image aux écrans de faible ou grande densité. On résout ce problème avec l'utilisation de [graphiques vectoriels](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) (images SVG) ainsi qu'à l'aide des attributs [`srcset`](/fr/docs/Web/HTML/Element/Img#attr-srcset) et [`sizes`](/fr/docs/Web/HTML/Element/Img#attr-sizes).
+- **les décisions de nature artistique**&nbsp;: cette méthode consiste à servir des images recadrées selon les diverses mises en page — par exemple, une image paysagère offrant toute la scène pour une mise en page destinée aux ordinateurs de bureau et une image portrait montrant le sujet principal zoomé de près pour une mise en page destinée aux mobiles. On résout alors ce problème avec [`<picture>`](/fr/docs/Web/HTML/Element/picture).
+- **la commutation de résolution**&nbsp;: cette méthode consiste à servir des images issues de fichiers plus petits pour les périphériques à petit écran, car ils n'ont que faire des grosses images prévues pour les écrans d'ordinateurs de bureau — et en plus, en option, adapter la résolution de l'image aux écrans de faible ou grande densité. On résout ce problème avec l'utilisation de [graphiques vectoriels](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) (images SVG) ainsi qu'à l'aide des attributs [`srcset`](/fr/docs/Web/HTML/Element/Img#attr-srcset) et [`sizes`](/fr/docs/Web/HTML/Element/Img#attr-sizes).
 
-Cet article est aussi la conclusion de l'ensemble du module [Multimedia et intégration](/fr/docs/Learn/HTML/Multimedia_and_embedding) ! Avant de passer à autre chose, il vous reste à essayer notre évaluation multimédia et à voir comment vous vous en sortez. Amusez-vous bien.
+Cet article est aussi la conclusion de l'ensemble du module [Multimedia et intégration](/fr/docs/Learn/HTML/Multimedia_and_embedding)&nbsp;! Avant de passer à autre chose, il vous reste à essayer notre évaluation multimédia et à voir comment vous vous en sortez. Amusez-vous bien.
 
 ## Voir aussi
 
 - [L'excellente introduction aux images adaptatives de Jason Grigsby](http://blog.cloudfour.com/responsive-images-101-definitions)
-- [Images adaptatives : si vous changez juste de résolution, utilisez `srcset`](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/) — comporte plus d'explications sur la façon dont le navigateur retravaille l'image à utiliser
+- [Images adaptatives&nbsp;: si vous changez juste de résolution, utilisez `srcset`](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/) — comporte plus d'explications sur la façon dont le navigateur retravaille l'image à utiliser
 - [`<img>`](/fr/docs/Web/HTML/Element/Img)
 - [`<picture>`](/fr/docs/Web/HTML/Element/picture)
 - [`<source>`](/fr/docs/Web/HTML/Element/Source)
diff --git a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
index 8d4e4c5fdf..acaf937598 100644
--- a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
+++ b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
@@ -21,16 +21,16 @@ Maintenant que nous sommes à l'aise pour ajouter de simples images dans une pag
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
-        Compétences informatiques de base, 
+        Compétences informatiques de base,
         <a
           href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base"
           >installation des outils de base</a
         >, bases de la
         <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers"
           >manipulation des fichiers</a
-        >, connaissance des fondamentaux du HTML (comme expliqué dans 
+        >, connaissance des fondamentaux du HTML (comme expliqué dans
         <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started"
           >Commencer avec le HTML)</a
         >
@@ -41,7 +41,7 @@ Maintenant que nous sommes à l'aise pour ajouter de simples images dans une pag
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectifs :</th>
+      <th scope="row">Objectifs&nbsp;:</th>
       <td>
         Apprendre à intégrer vidéos et audios dans une page web et y ajouter des
         légendes et des sous-titres.
@@ -52,13 +52,13 @@ Maintenant que nous sommes à l'aise pour ajouter de simples images dans une pag
 
 ## Audio et vidéo sur le web
 
-Les développeurs ont toujours voulu utiliser la vidéo et l'audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d'une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images). Au départ, les technologies embarquées telles que HTML n'avaient pas la capacité d'intégrer de la vidéo ou de l'audio, donc, les solutions « propriétaires » (ou basées sur des greffons) comme [Flash](https://fr.wikipedia.org/wiki/Adobe_Flash) (puis, plus tard, [Silverlight](https://fr.wikipedia.org/wiki/Silverlight)) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d'accessibilité.
+Les développeurs ont toujours voulu utiliser la vidéo et l'audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d'une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images). Au départ, les technologies embarquées telles que HTML n'avaient pas la capacité d'intégrer de la vidéo ou de l'audio, donc, les solutions «&nbsp;propriétaires&nbsp;» (ou basées sur des greffons) comme [Flash](https://fr.wikipedia.org/wiki/Adobe_Flash) (puis, plus tard, [Silverlight](https://fr.wikipedia.org/wiki/Silverlight)) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d'accessibilité.
 
-Une solution embarquée devrait résoudre la plupart de ces problèmes. Heureusement, après quelques années, la spécification {{glossary("HTML5")}} apportait ces améliorations avec les éléments  {{htmlelement("video")}} et {{htmlelement("audio")}} et des {{Glossary("API","APIs")}}{{Glossary("JavaScript")}} flambants neufs pour les contrôler. Nous ne verrons pas JavaScript ici — nous poserons juste les fondamentaux qui peuvent être obtenus avec HTML.
+Une solution embarquée devrait résoudre la plupart de ces problèmes. Heureusement, après quelques années, la spécification {{glossary("HTML5")}} apportait ces améliorations avec les éléments  {{htmlelement("video")}} et {{htmlelement("audio")}} et des {{Glossary("API","APIs")}}{{Glossary("JavaScript")}} flambants neufs pour les contrôler. Nous ne verrons pas JavaScript ici — nous poserons juste les fondamentaux qui peuvent être obtenus avec HTML.
 
-Nous ne vous apprendrons pas à produire des fichiers audio ou vidéo  — cela demande des compétences totalement différentes. Nous vous conseillons ce lien Github [fichiers d'échantillons audio et vidéo et exemples de code](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content) pour votre expérience personnelle, au cas où vous ne pourriez pas y accéder par vous-même.
+Nous ne vous apprendrons pas à produire des fichiers audio ou vidéo  — cela demande des compétences totalement différentes. Nous vous conseillons ce lien Github [fichiers d'échantillons audio et vidéo et exemples de code](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content) pour votre expérience personnelle, au cas où vous ne pourriez pas y accéder par vous-même.
 
-> **Note :** Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme [YouTube](https://www.youtube.com/), [Dailymotion](http://www.dailymotion.com), et [Vimeo](https://vimeo.com/). Pour l'audio, voyez [Soundcloud](https://soundcloud.com/)  par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant.
+> **Note :** Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme [YouTube](https://www.youtube.com/), [Dailymotion](http://www.dailymotion.com), et [Vimeo](https://vimeo.com/). Pour l'audio, voyez [Soundcloud](https://soundcloud.com/)  par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant.
 
 ### L' élément \<video>
 
@@ -73,21 +73,21 @@ L'élément {{htmlelement("video")}} vous permet d'intégrer de la vidéo très
 Les fonctionnalités de ce code sont :
 
 - {{htmlattrxref("src","video")}}
-  - : De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut `src` (source) contient le chemin vers la vidéo que vous voulez intégrer.  Cela fonctionne de la même manière.
+  - : De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut `src` (source) contient le chemin vers la vidéo que vous voulez intégrer.  Cela fonctionne de la même manière.
 - {{htmlattrxref("controls","video")}}
-  - : Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'[épilepsie](https://fr.wikipedia.org/wiki/%C3%89pilepsie).) Vous devez vous servir de l'attribut  `controls` pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'[API JavaScript](/fr/docs/Web/API/HTMLMediaElement) adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume.
+  - : Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'[épilepsie](https://fr.wikipedia.org/wiki/%C3%89pilepsie).) Vous devez vous servir de l'attribut `controls` pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'[API JavaScript](/fr/docs/Web/API/HTMLMediaElement) adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume.
 - Le paragraphe dans la balise `<video>`
-  - : Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément `<video>` , cela offre un texte alternatif qui peut être ce que vous voulez ; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise.
+  - : Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément `<video>`, cela offre un texte alternatif qui peut être ce que vous voulez&nbsp;; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise.
 
 La vidéo intégrée donnerait quelque chose comme ça :
 
 ![A simple video player showing a video of a small white rabbit](simple-video.png)
 
-Faites un essai avec [l'exemple ici](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html). (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html).)
+Faites un essai avec [l'exemple ici](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html). (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html).)
 
 ### Gestion de différents formats
 
-Il y a un problème avec l'exemple au-dessus que vous avez dû rencontrer si vous avez accédé au lien « exemple ici » avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d'audio.
+Il y a un problème avec l'exemple au-dessus que vous avez dû rencontrer si vous avez accédé au lien «&nbsp;exemple ici&nbsp;» avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d'audio.
 
 Voyons-en rapidement la terminologie. Les formats comme le MP3, MP4 et le WebM sont appelés des [formats conteneurs](https://fr.wikipedia.org/wiki/Format_conteneur). Ils contiennent plusieurs parties qui, ensemble, donnent l'intégralité de la chanson ou de la vidéo — comme une piste audio, une piste vidéo et les métadonnées qui décrivent le média qui est lu.
 
@@ -95,7 +95,7 @@ Les pistes audio et vidéo sont aussi de différents formats, par exemple :
 
 - Un conteneur WebM empaquette de l'audio Ogg Vorbis avec de la vidéo VP8/VP9. Firefox et Chrome, en particulier, assurent sa prise en charge.
 - Un conteneur MP4 assemble de l'audio AAC ou MP3 en audio avec de la vidéo H.264. Internet Explorer et Safari, principalement, le prennent en charge.
-- L'ancien conteneur Ogg rassemblait de l'audio Ogg Vorbis et de la vidéo Ogg Theora. Il était essentiellement pris en charge par Firefox and Chrome, mais il a été supplanté par le format WebM qui est de meilleure qualité.
+- L'ancien conteneur Ogg rassemblait de l'audio Ogg Vorbis et de la vidéo Ogg Theora. Il était essentiellement pris en charge par Firefox and Chrome, mais il a été supplanté par le format WebM qui est de meilleure qualité.
 
 Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur.
 
@@ -129,23 +129,23 @@ Chaque élément \<source> possède également un attribut de type. C'est facult
 
 ### Autres fonctionnalités de \<video>
 
-Il y a possibilité d'inclure d'autres fonctionnalités dans une vidéo HTML5. Regardez notre troisième exemple :
+Il y a possibilité d'inclure d'autres fonctionnalités dans une vidéo HTML5. Regardez notre troisième exemple&nbsp;:
 
 ```html
 <video controls width="400" height="400"
-       autoplay loop muted
-       poster="poster.png">
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien à la vidéo</a>.</p>
+       autoplay loop muted
+       poster="poster.png">
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien à la vidéo</a>.</p>
 </video>
 ```
 
-Cela produit une sortie du type suivant :
+Cela produit une sortie du type suivant&nbsp;:
 
 ![A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!](extra-video-features.png)
 
-Voici les nouvelles fonctionnalités :
+Voici les nouvelles fonctionnalités&nbsp;:
 
 - {{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}}
   - : Il est possible de contrôler la taille de la vidéo soit avec ces attributs, soit avec le {{Glossary("CSS")}}. Dans les deux cas, les vidéos conservent le rapport largeur‑hauteur natif — désigné sous le vocable **rapport de proportions**. Si ce dernier ne correspond pas aux tailles indiquées, la vidéo occupera tout l'espace horizontal et l'espace non rempli sera de la couleur d'arrière plan unie par défaut.
@@ -159,17 +159,17 @@ Voici les nouvelles fonctionnalités :
   - : Cet attribut prend comme valeur l'URL d'une image affichée avant la lecture de la vidéo. Il s'utilise en tant que logo de démarrage ou de publicité.
 - {{htmlattrxref("preload","video")}}
 
-  - : Cet attribut s'utilise pour mettre en tampon les gros fichiers. Il peut prendre 3 valeurs :
+  - : Cet attribut s'utilise pour mettre en tampon les gros fichiers. Il peut prendre 3 valeurs&nbsp;:
 
-    - `"none"` : ne pas mettre le fichier dans un tampon
-    - `"auto"` : mettre le fichier média dans un tampon
-    - `"metadata"` : ne mettre que les métadonnées dans le tampon
+    - `"none"`&nbsp;: ne pas mettre le fichier dans un tampon
+    - `"auto"`&nbsp;: mettre le fichier média dans un tampon
+    - `"metadata"`&nbsp;: ne mettre que les métadonnées dans le tampon
 
-Vous trouverez cet exemple [prêt pour l'interprétation](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html) sur Github ( voir aussi le [code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html)). Notez que nous n'avons pas inséré l'attribut `autoplay` dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster !
+Vous trouverez cet exemple [prêt pour l'interprétation](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html) sur Github ( voir aussi le [code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html)). Notez que nous n'avons pas inséré l'attribut `autoplay` dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster&nbsp;!
 
-### L'élément  \<audio>
+### L'élément  \<audio>
 
-L'élément {{htmlelement("audio")}} fonctionne exactement de la même manière que l'élément {{htmlelement("video")}}, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci :
+L'élément {{htmlelement("audio")}} fonctionne exactement de la même manière que l'élément {{htmlelement("video")}}, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci&nbsp;:
 
 ```html
 <audio controls>
@@ -179,13 +179,13 @@ L'élément {{htmlelement("audio")}} fonctionne exactement de la même manière
 </audio>
 ```
 
-Vous verrez quelque chose de ce genre dans un navigateur :
+Vous verrez quelque chose de ce genre dans un navigateur&nbsp;:
 
 ![A simple audio player with a play button, timer, volume control, and progress bar](audio-player.png)
 
 > **Note :** Vous pouver [lancer la démo de l'audio en direct](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html) sur Github (voir aussi le [code source de l'interpréteur](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html).)
 
-Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Voici les autres différences avec les vidéos HTML5 :
+Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Voici les autres différences avec les vidéos HTML5&nbsp;:
 
 - L'élément {{htmlelement("audio")}} ne prend pas en charge les attributs `width`/`height` — redisons‑le, il n'y a pas de composant visuel, il n'y donc pas lieu d'assigner une largeur ou une hauteur.
 - Il ne prend pas en charge non plus l'attribut `poster` — toujours pas de composant visuel.
@@ -202,9 +202,9 @@ Nous allons maintenant parler d'un concept un peu plus avancé vraiment utile à
 
 Ne serait-il pas agréable de pouvoir fournir à ces personnes la transcription des paroles prononcés dans l'audio ou la vidéo ? Eh bien, avec des vidéos HTML5 vous le pouvez, à l'aide du format WebVTT et de l'élément {{htmlelement("track")}}.
 
-> **Note :** « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante.
+> **Note :** «&nbsp;Transcrire&nbsp;» signifie écrire des paroles sous forme de texte, et «&nbsp;transcription&nbsp;» est l'action correspondante.
 
-WebVTT est un format d'écriture de fichiers texte ; il contient nombre de chaînes de texte avec des métadonnées comme l'instant dans la vidéo où vous souhaitez l'affichage du texte, et même une information succinte sur le style et la position de celui‑ci. Ces chaînes textuelles sont appelées des marqueurs, les plus courants étant :
+WebVTT est un format d'écriture de fichiers texte&nbsp;; il contient nombre de chaînes de texte avec des métadonnées comme l'instant dans la vidéo où vous souhaitez l'affichage du texte, et même une information succinte sur le style et la position de celui‑ci. Ces chaînes textuelles sont appelées des marqueurs, les plus courants étant&nbsp;:
 
 - les sous‑titres (`subtitles`)
   - : Traductions d'éléments d'une langue étrangère pour les personnes ne comprenant pas les paroles de l'audio.
@@ -213,7 +213,7 @@ WebVTT est un format d'écriture de fichiers texte ; il contient nombre de cha
 - les descriptions programmées (`descriptions`)
   - : Textes convertis en audio, pour aider les personnes avec des défauts de vision.
 
-Un fichier WebVTT typique ressemblera à :
+Un fichier WebVTT typique ressemblera à&nbsp;:
 
     WEBVTT
 
@@ -227,12 +227,12 @@ Un fichier WebVTT typique ressemblera à :
 
       ...
 
-Pour qu'il soit affiché avec la diffusion du média HTML, il faut :
+Pour qu'il soit affiché avec la diffusion du média HTML, il faut&nbsp;:
 
 1.  Enregistrer le fichier avec l'extension `.vtt` dans un endroit sensé.
-2.  Lier le fichier `.vtt` avec l'élément {{htmlelement("track")}}. `<track>` doit être placé entre les balises `<audio>` ou `<video>`, mais après tous les éléments `<source>`. Utilisez l'attribut {{htmlattrxref("kind","track")}} pour préciser si les marqueurs sont  `subtitles`, `captions` ou `descriptions`. Plus loin, utilisez l'attribut {{htmlattrxref("srclang","track")}} pour indiquer au navigateur la langue dans laquelle sont écrit les sous‑titres.
+2.  Lier le fichier `.vtt` avec l'élément {{htmlelement("track")}}. `<track>` doit être placé entre les balises `<audio>` ou `<video>`, mais après tous les éléments `<source>`. Utilisez l'attribut {{htmlattrxref("kind","track")}} pour préciser si les marqueurs sont  `subtitles`, `captions` ou `descriptions`. Plus loin, utilisez l'attribut {{htmlattrxref("srclang","track")}} pour indiquer au navigateur la langue dans laquelle sont écrit les sous‑titres.
 
-Voici un exemple :
+Voici un exemple&nbsp;:
 
 ```html
 <video controls>
@@ -242,26 +242,26 @@ Voici un exemple :
 </video>
 ```
 
-Il en résultera une vidéo dont les sous-titres seront affichés un peu comme ceci :
+Il en résultera une vidéo dont les sous-titres seront affichés un peu comme ceci&nbsp;:
 
 ![Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."](video-player-with-captions.png)
 
-Pour plus de détails, lisez [Ajouter des légendes et des sous‑titres aux vidéos HTML5](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). Vous [trouverez un exemple](http://iandevlin.github.io/mdn/video-player-with-captions/), écrit par Ian Devlin, accompagnant cet article sur Github (voyez le [code source](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions) aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton « CC » et selectionner une option — English, Deutsch ou Español.
+Pour plus de détails, lisez [Ajouter des légendes et des sous‑titres aux vidéos HTML5](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). Vous [trouverez un exemple](http://iandevlin.github.io/mdn/video-player-with-captions/), écrit par Ian Devlin, accompagnant cet article sur Github (voyez le [code source](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions) aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton «&nbsp;CC&nbsp;» et selectionner une option — English, Deutsch ou Español.
 
 > **Note :** Les pistes texte peuvent aussi vous aider avec {{glossary("SEO")}}, car les moteurs de recherche sont très performants sur le texte. Les pistes textes permettent aussi aux moteurs de recherche de faire un lien direct à un point particulier de la vidéo.
 
 ### Apprentissage interactif : intégrer vos propres vidéos et audios
 
-Pour cet exercice, nous aimerions (idéalement) que vous partiez « dans le monde » pour enregistrer vos propres vidéos et pistes audio — la plupart des téléphones actuels vous permettent facilement de le faire, et, à condition que vous puissiez le transférer sur l'ordinateur, vous pouvez l'utiliser. Vous allez devoir convertir dans les formats adaptés, WebM et MP4 pour la vidéo,  MP3 et Ogg pour l'audio. Il y a de nombreux progammes vous permettant de faire ça sans difficulté comme [Miro Video Converter](http://www.mirovideoconverter.com/) et [Audacity](https://sourceforge.net/projects/audacity/). Nous aimerions que vous essayiez !
+Pour cet exercice, nous aimerions (idéalement) que vous partiez «&nbsp;dans le monde&nbsp;» pour enregistrer vos propres vidéos et pistes audio — la plupart des téléphones actuels vous permettent facilement de le faire, et, à condition que vous puissiez le transférer sur l'ordinateur, vous pouvez l'utiliser. Vous allez devoir convertir dans les formats adaptés, WebM et MP4 pour la vidéo,  MP3 et Ogg pour l'audio. Il y a de nombreux progammes vous permettant de faire ça sans difficulté comme [Miro Video Converter](http://www.mirovideoconverter.com/) et [Audacity](https://sourceforge.net/projects/audacity/). Nous aimerions que vous essayiez !
 
-Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos [échantillons audio et vidéo](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content) pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence.
+Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos [échantillons audio et vidéo](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content) pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence.
 
 Il vous faudra :
 
 1.  Préserver vos fichiers audio et vidéo dans un nouveau dossier sur votre ordinateur.
-2.  Créer un nouveau fichier HTML dans le même répertoire nommé :  `index.html`.
-3.  Ajouter des éléments  `<audio>` et  `<video>` dans la page; faire en sorte qu'ils affichent les contrôles par défaut du navigateur.
-4.  Leur attribuer (aux deux) des éléments `<source>` que le navigateur puisse trouver le meilleur format audio et le charger. N'oubliez pas d'inclure les attributs  `type`.
+2.  Créer un nouveau fichier HTML dans le même répertoire nommé :  `index.html`.
+3.  Ajouter des éléments  `<audio>` et  `<video>` dans la page; faire en sorte qu'ils affichent les contrôles par défaut du navigateur.
+4.  Leur attribuer (aux deux) des éléments `<source>` que le navigateur puisse trouver le meilleur format audio et le charger. N'oubliez pas d'inclure les attributs  `type`.
 5.  Donner à l'élément `<video>` une image qui sera affichée avant que la vidéo ne démarre. Amusez-vous à créer votre propre visuel de l'affiche.
 
 En bonus, vous pouvez chercher des textes à intégrer et ajouter des légendes à vos vidéos.
diff --git a/files/fr/learn/html/tables/advanced/index.md b/files/fr/learn/html/tables/advanced/index.md
index 08a424fa99..65f1ab0287 100644
--- a/files/fr/learn/html/tables/advanced/index.md
+++ b/files/fr/learn/html/tables/advanced/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Tableaux HTML :  dispositions avancées et accessibilité'
+title: 'Tableaux HTML&nbsp;:  dispositions avancées et accessibilité'
 slug: Learn/HTML/Tables/Advanced
 tags:
   - Accessibilité
@@ -23,12 +23,12 @@ original_slug: Apprendre/HTML/Tableaux/Advanced
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
 
-Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.
+Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.
 
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Les bases de HTML (voir
         <a href="/fr/docs/Learn/HTML/Introduction_to_HTML"
@@ -37,7 +37,7 @@ Dans le second article de ce module, nous examinerons quelques dispositions avan
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         En apprendre plus sur les fonctionnalités HTML plus avancées et
         l'accessibilité aux tableaux.
@@ -62,13 +62,13 @@ Comme vous pouvez le voir sur le bref exemple ci-dessus, le titre consiste en un
 
 Le titre est placé directement sous la balise `<table>`.
 
-> **Note :** L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément `<table>` pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément `<caption>`,  car `summary` est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTML5, et ne peut être lu par l'utilisateur courant  (il n'apparaît pas dans la page).
+> **Note :** L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément `<table>` pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément `<caption>`,  car `summary` est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTML5, et ne peut être lu par l'utilisateur courant  (il n'apparaît pas dans la page).
 
-### Apprentissage actif : Ajouter un titre
+### Apprentissage actif&nbsp;: Ajouter un titre
 
 Essayons en revisitant un exemple rencontré dans l'article précédent.
 
-1.  Ouvrez le planning du professeur de langue de la fin de [Tableaux HTML : notions de base](/fr/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col) ou faites une copie locale du fichier [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html).
+1.  Ouvrez le planning du professeur de langue de la fin de [Tableaux HTML&nbsp;: notions de base](/fr/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col) ou faites une copie locale du fichier [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html).
 2.  Ajoutez un titre approprié pour le tableau.
 3.  Enregistrez votre code et ouvrez-le dans un navigateur pour voir à quoi il ressemble.
 
@@ -82,11 +82,11 @@ Ces éléments ne rendent pas le tableau plus accessible aux utilisateurs de lec
 
 Pour les utiliser :
 
-- L'élément `<thead>` doit couvrir la partie du tableau qui est l'en-tête — ce sera en général la première ligne contenant les en-têtes de colonnes, mais pas toujours. Dans le code, si vous utilisez les éléments  {{htmlelement("col")}}/{{htmlelement("colgroup")}}, l'en-tête du tableau devrait venir juste en-dessous de ceux-ci.
-- L'élément `<tfoot>` doit envelopper la partie du tableau qui est le pied de page — ce peut être une dernière ligne contenant, par exemple, la somme des rangées précédentes. Vous pouvez inclure l'élément \<tfoot>  à la suite du code contenant le corps du tableau, là où vous souhaitez le trouver, ou juste en-dessous de l'élément \<thead> (le navigateur l'affichera toujours en pied de tableau).
-- L'élément `<tbody>`  doit couvrir toutes les parties du tableau non contenues dans un \<thead> ou un \<tfoot>. Il pourra apparaître dans le code, sous la déclaration de l'en-tête ou du pied de page, selon la façon dont vous avez décidé de le structurer (voir les notes ci‑dessus).
+- L'élément `<thead>` doit couvrir la partie du tableau qui est l'en-tête — ce sera en général la première ligne contenant les en-têtes de colonnes, mais pas toujours. Dans le code, si vous utilisez les éléments  {{htmlelement("col")}}/{{htmlelement("colgroup")}}, l'en-tête du tableau devrait venir juste en-dessous de ceux-ci.
+- L'élément `<tfoot>` doit envelopper la partie du tableau qui est le pied de page — ce peut être une dernière ligne contenant, par exemple, la somme des rangées précédentes. Vous pouvez inclure l'élément \<tfoot>  à la suite du code contenant le corps du tableau, là où vous souhaitez le trouver, ou juste en-dessous de l'élément \<thead> (le navigateur l'affichera toujours en pied de tableau).
+- L'élément `<tbody>`  doit couvrir toutes les parties du tableau non contenues dans un \<thead> ou un \<tfoot>. Il pourra apparaître dans le code, sous la déclaration de l'en-tête ou du pied de page, selon la façon dont vous avez décidé de le structurer (voir les notes ci‑dessus).
 
-> **Note :** `<tbody>` est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément `<tbody>` et regardez le code HTML dans les [outils de développement de votre navigateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi  vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau.
+> **Note :** `<tbody>` est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément `<tbody>` et regardez le code HTML dans les [outils de développement de votre navigateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau.
 
 ### Apprentissage actif : Ajout d'une structure au tableau
 
@@ -96,7 +96,7 @@ Mettons en œuvre ces nouveaux éléments.
 2.  Essayez de les ouvrir dans un navigateur — vous verrez que cela paraît correct, mais gagnerait à être amélioré. La ligne "SUM" qui contient les totaux des montants dépensés semble être au mauvais endroit et il manque certains détails du code.
 3.  Mettez la ligne d'en-têtes en évidence avec l'élément `<thead>` , la ligne des totaux ("SUM") dans un `<tfoot>`, et le reste du contenu dans un `<tbody>`.
 4.  Enregistrez et actualisez, et vous verrez que l'ajout de l'élément `<tfoot>` a renvoyé la ligne "SUM" en bas du tableau.
-5.  Ensuite, ajoutez un attribut {{htmlattrxref("colspan","td")}}  pour générer une cellule Total ("SUM") couvrant les quatre premières colonnes, ainsi le nombre réel apparaît au pied de la colonne « Coût ».
+5.  Ensuite, ajoutez un attribut {{htmlattrxref("colspan","td")}}  pour générer une cellule Total ("SUM") couvrant les quatre premières colonnes, ainsi le nombre réel apparaît au pied de la colonne «&nbsp;Coût&nbsp;».
 6.  Ajoutons un style supplémentaire au tableau, pour vous donner une idée de l'utilité de ces éléments pour l'application des CSS. Dans le \<head> du document HTML, vous pouvez voir un élément {{htmlelement("style")}} vide, ajoutez les lignes suivantes de code CSS :
 
     ```css
@@ -176,7 +176,7 @@ Le code de votre tableau fini devrait ressembler à quelque chose comme :
         <thead>
           <tr>
             <th>Achats</th>
-            <th>Où ?</th>
+            <th>Où&nbsp;?</th>
             <th>Date</th>
             <th>Avis</th>
             <th>Coût (€)</th>
@@ -226,7 +226,7 @@ Le code de votre tableau fini devrait ressembler à quelque chose comme :
 
 {{ EmbedLiveSample("Apprentissage_actif_Ajout_d'une_structure_au_tableau", '100%', 300, "", "", "hide-codepen-jsfiddle") }}
 
-> **Note :** Vous pouvez aussi le trouver sur Github  [spending-record-finished.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html) ([voir aussi le résultat](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html) directement).
+> **Note :** Vous pouvez aussi le trouver sur Github  [spending-record-finished.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html) ([voir aussi le résultat](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html) directement).
 
 ## Tableaux imbriqués
 
@@ -289,14 +289,14 @@ Rappelons brièvement comment nous utilisons les tableaux de données. Un tablea
   </caption>
   <tbody>
     <tr>
-      <td> </td>
-      <td> </td>
+      <td></td>
+      <td></td>
       <th colspan="3" scope="colgroup">Vêtements</th>
       <th colspan="2" scope="colgroup">Accessoires</th>
     </tr>
     <tr>
-      <td> </td>
-      <td> </td>
+      <td></td>
+      <td></td>
       <th scope="col">Pantalons</th>
       <th scope="col">Jupes</th>
       <th scope="col">Robes</th>
@@ -350,25 +350,25 @@ Rappelons brièvement comment nous utilisons les tableaux de données. Un tablea
 
 Mais que faire si vous ne pouvez pas créer ces associations visuelles ? Comment pouvez-vous lire un tableau comme celui ci-dessus ? Les personnes malvoyantes utilisent souvent un lecteur d'écran qui leur lit les informations des pages web. Ce n'est pas un problème quand vous lisez du texte brut, mais l'interprêtation d'un tableau peut constituer un défi pour une personne aveugle. Néanmoins, avec le balisage approprié, nous pouvons remplacer des associations visuelles par des associations programmées.
 
-> **Note :** Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les  [données de l'OMS en 2017](http://www.who.int/mediacentre/factsheets/fs282/fr/ "Vision Impairment Data").
+> **Note :** Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les  [données de l'OMS en 2017](http://www.who.int/mediacentre/factsheets/fs282/fr/ "Vision Impairment Data").
 
 Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible.
 
 ### Utilisation des en-têtes de colonnes et de lignes
 
-Les lecteurs d'écran identifieront tous les en-têtes et les utiliseront pour réaliser automatiquement les associations entre ces en-têtes et les cellules correspondantes.  La combinaison des en-têtes des colonnes et des lignes doit permettre d'identifier et d'interprêter les données de chaque cellule. Ainsi, les utilisateurs de lecteurs d'écran peuvent accéder aux données d'une façon similaire à celle des utilisateurs voyants.
+Les lecteurs d'écran identifieront tous les en-têtes et les utiliseront pour réaliser automatiquement les associations entre ces en-têtes et les cellules correspondantes.  La combinaison des en-têtes des colonnes et des lignes doit permettre d'identifier et d'interprêter les données de chaque cellule. Ainsi, les utilisateurs de lecteurs d'écran peuvent accéder aux données d'une façon similaire à celle des utilisateurs voyants.
 
 Nous avons déjà traité des en-têtes dans notre article précédent — voir [Ajouter des en-têtes avec \<th>](/fr/docs/Learn/HTML/Tables/Basics#Adding_headers_with_%3Cth%3E_elements) .
 
 ### L'attribut `scope`
 
-Aux balises `<th>`, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément `<th>` pour indiquer précisément à un lecteur d'écran si la cellule contient un en-tête de colonne ou de ligne — par exemple, sommes‑nous dans un en-tête de ligne, ou de colonne ? En revenant à notre exemple d'enregistrement de dépenses vu plus tôt, il est possible de définir sans ambiguité un en-tête de colonne comme étant un en-tête de colonne ainsi :
+Aux balises `<th>`, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément `<th>` pour indiquer précisément à un lecteur d'écran si la cellule contient un en-tête de colonne ou de ligne — par exemple, sommes‑nous dans un en-tête de ligne, ou de colonne ? En revenant à notre exemple d'enregistrement de dépenses vu plus tôt, il est possible de définir sans ambiguité un en-tête de colonne comme étant un en-tête de colonne ainsi&nbsp;:
 
 ```html
 <thead>
   <tr>
     <th scope="col">Achats</th>
-    <th scope="col">Ou ?</th>
+    <th scope="col">Ou&nbsp;?</th>
     <th scope="col">Date</th>
     <th scope="col">Avis</th>
     <th scope="col">Coût (€)</th>
@@ -390,24 +390,24 @@ Et chaque ligne pourrait également avoir une définition de son en-tête comme
 
 Les lecteurs d'écran reconnaîtront un balisage structuré comme celui-ci et permettront à leurs utilisateurs de lire en une fois une colonne ou une ligne entière par exemple.
 
-`scope` a deux autres valeurs possibles — `colgroup` et `rowgroup`. Elles sont utilisées pour les en-têtes qui couvrent plusieurs colonnes ou lignes. Si vous revenez au tableau « Articles vendus... » au début de ce paragraphe du présent article, vous voyez que la cellule « Vêtements » se trouve au-dessus des cellules  « Pantalons », « Jupes » et « Robes ». Toutes ces cellules sont marquées comme en-têtes (`<th>`), mais « Vêtements » est un en-tête de niveau supérieur qui définit trois « sous-en-têtes ». « Vêtements » comportera donc un attribut  `scope="colgroup"`, alors que les autres doivent recevront un attribut `scope="col"`.
+`scope` a deux autres valeurs possibles — `colgroup` et `rowgroup`. Elles sont utilisées pour les en-têtes qui couvrent plusieurs colonnes ou lignes. Si vous revenez au tableau «&nbsp;Articles vendus...&nbsp;» au début de ce paragraphe du présent article, vous voyez que la cellule «&nbsp;Vêtements&nbsp;» se trouve au-dessus des cellules  «&nbsp;Pantalons&nbsp;», «&nbsp;Jupes&nbsp;» et «&nbsp;Robes&nbsp;». Toutes ces cellules sont marquées comme en-têtes (`<th>`), mais «&nbsp;Vêtements&nbsp;» est un en-tête de niveau supérieur qui définit trois «&nbsp;sous-en-têtes&nbsp;». «&nbsp;Vêtements&nbsp;» comportera donc un attribut  `scope="colgroup"`, alors que les autres doivent recevront un attribut `scope="col"`.
 
 ### Les attributs `id` et `headers`
 
 Une alternative à l'usage de l'attribut `scope` est l'utilisation des attributs {{htmlattrxref("id")}} et {{htmlattrxref("headers", "td")}} pour créer une association entre en-têtes et cellules. Ils sont utilisés de la manière suivante :
 
 1.  Vous ajoutez un identifiant unique `id` à chaque élément `<th>`.
-2.  Vous ajoutez un attribut `headers` à chaque élément  `<td>` . Chaque attribut `headers` doit contenir une liste des `id` de tous les éléments \<th> qu'il contient, séparés par des espaces.
+2.  Vous ajoutez un attribut `headers` à chaque élément  `<td>` . Chaque attribut `headers` doit contenir une liste des `id` de tous les éléments \<th> qu'il contient, séparés par des espaces.
 
 Votre tableau HTML possède donc la position explicite de chaque cellule dans le tableau, définie par les en-têtes de chaque colonne et chaque ligne qui en font partie, un peu comme dans une feuille de calcul. Pour un bon fonctionnement, le tableau a réellement besoin d'en-têtes de colonnes et de lignes.
 
-En revenant à notre exemple de tableau des dépenses et des coûts, les deux extraits précédents pourraient être réécrits ainsi :
+En revenant à notre exemple de tableau des dépenses et des coûts, les deux extraits précédents pourraient être réécrits ainsi&nbsp;:
 
 ```html
 <thead>
   <tr>
     <th id="purchase">Achats</th>
-    <th id="location">Où ?</th>
+    <th id="location">Où&nbsp;?</th>
     <th id="date">Date</th>
     <th id="evaluation">Avis</th>
     <th id="cost">Coût (€)</th>
@@ -427,16 +427,16 @@ En revenant à notre exemple de tableau des dépenses et des coûts, les deux ex
 </tbody>
 ```
 
-> **Note :** Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise **beaucoup** plus de balisage et ne laisse aucune marge d'erreur.  L'approche `scope` est généralement suffisante pour la plupart des tableaux.
+> **Note :** Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise **beaucoup** plus de balisage et ne laisse aucune marge d'erreur.  L'approche `scope` est généralement suffisante pour la plupart des tableaux.
 
-### Apprentissage actif : jouer avec `scope` et `headers`
+### Apprentissage actif&nbsp;: jouer avec `scope` et `headers`
 
 1.  Pour cet exercice final, nous aimerions que vous fassiez une copie locale de [items‑sold.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css), dans un nouveau répertoire.
 2.  Maintenant essayez d'ajouter un attribut `scope` approprié pour améliorer ce tableau.
 3.  Enfin, essayez avec une autre copie du fichier initial, de faire un tableau plus accessible en utilisant les attributs `id` et `headers`.
 
-> **Note :** Vous pouvez contrôler votre travail en le comparant à nos exemples finis  — voir [items-sold-scope.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html) ([voir aussi directement](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html))
->          et [items-sold-headers.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html) ([voir aussi directement](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)).
+> **Note :** Vous pouvez contrôler votre travail en le comparant à nos exemples finis  — voir [items-sold-scope.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html) ([voir aussi directement](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html))
+> et [items-sold-headers.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html) ([voir aussi directement](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)).
 
 ## Résumé
 
@@ -446,6 +446,6 @@ Il reste encore quelques autres choses à apprendre sur les tableaux HTML, mais
 
 ## Dans ce module
 
-- [Tableaux HTML : notions de base](/fr/docs/Learn/HTML/Tables/Basics)
+- [Tableaux HTML&nbsp;: notions de base](/fr/docs/Learn/HTML/Tables/Basics)
 - [Tableaux HTML : dispositions avancées et accessibilité](/fr/docs/Learn/HTML/Tables/Advanced)
 - [Structuration de données sur les planètes](/fr/docs/Learn/HTML/Tables/Structuring_planet_data)
diff --git a/files/fr/learn/html/tables/basics/index.md b/files/fr/learn/html/tables/basics/index.md
index afdc832c15..3f33afab43 100644
--- a/files/fr/learn/html/tables/basics/index.md
+++ b/files/fr/learn/html/tables/basics/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Tableaux HTML : notions de base'
+title: 'Tableaux HTML&nbsp;: notions de base'
 slug: Learn/HTML/Tables/Basics
 tags:
   - Apprentissage
@@ -49,7 +49,7 @@ Un tableau est un ensemble structuré de données (**table de données**) prése
 
 ![A swimming timetable showing a sample data table](swimming-timetable.png)
 
-Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800 :
+Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800&nbsp;:
 
 ![A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.](1800-census.jpg)
 
@@ -57,7 +57,7 @@ Il n'est donc pas étonnant que les créateurs du HTML fournissent un moyen de s
 
 ### Comment fonctionne un tableau ?
 
-L'avantage du tableau tient dans sa rigueur. L'information est facilement interprétée par  des associations visuelles entre les en‑têtes de lignes et colonnes. Cherchez dans la table ci-dessous par exemple et trouvez une planète géante gazeuse du système jovien avec 62 lunes. Vous pouvez trouver la réponse en associant les en-têtes de lignes et colonnes pertinents.
+L'avantage du tableau tient dans sa rigueur. L'information est facilement interprétée par des associations visuelles entre les en‑têtes de lignes et colonnes. Cherchez dans la table ci-dessous par exemple et trouvez une planète géante gazeuse du système jovien avec 62 lunes. Vous pouvez trouver la réponse en associant les en-têtes de lignes et colonnes pertinents.
 
 <table>
   <caption>
@@ -204,7 +204,7 @@ Lorsque cela est fait correctement, même les personnes malvoyantes peuvent inte
 
 ### Style de tableau
 
-Vous pouvez également [regarder sur l'exemple réel](https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html) sur GitHub ! Vous remarquerez sur celui-ci que le tableau est légèrement plus lisible  — car le tableau figurant ci-dessus présente un style minimal, alors que sa version sur GitHub est liée à un  CSS plus signifiant.
+Vous pouvez également [regarder sur l'exemple réel](https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html) sur GitHub ! Vous remarquerez sur celui-ci que le tableau est légèrement plus lisible  — car le tableau figurant ci-dessus présente un style minimal, alors que sa version sur GitHub est liée à un CSS plus signifiant.
 
 Ne vous faites pas d'illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d'informations de style avec [CSS](/fr/docs/Learn/CSS), ainsi qu'une structure solide avec HTML. Dans ce module nous nous concentrons sur la partie HTML ; pour en savoir plus sur la partie CSS, vous devrez lire notre article [Style et tableaux](/fr/docs/Learn/CSS/Styling_boxes/Styling_tables) quand vous aurez fini ici.
 
@@ -214,25 +214,25 @@ Nous n'approfondirons pas le CSS dans ce module, mais nous avons écrit une feui
 
 Les tableaux HTML ne doivent être utilisés que pour des données tabulaires — c'est pour cela qu'ils sont conçus. Malheureusement, beaucoup de gens ont utilisé les tableaux HTML pour organiser des pages Web, par exemple : une ligne pour contenir l'en-tête, une ligne pour les colonnes de contenu, une ligne pour le pied de page, etc. Vous pouvez trouver plus de détails et un exemple avec [Mises en page](/fr/docs/Learn/Accessibility/HTML#Page_layouts) dans notre [Module d'apprentissage à l'Accessibilité](/fr/docs/Learn/Accessibility). Cette dispostion a été couramment utilisée car la prise en charge des CSS parmi les navigateurs avait pour coutume d'être effroyable ; ces mises en page sont beaucoup moins fréquentes de nos jours, mais vous pouvez toujours les voir dans certains recoins du Web.
 
-Bref, utiliser les tableaux pour la mise en page [au lieu des techniques des CSS](/fr/docs/Learn/CSS/CSS_layout) est une mauvaise idée. En voici les principales raisons :
+Bref, utiliser les tableaux pour la mise en page [au lieu des techniques des CSS](/fr/docs/Learn/CSS/CSS_layout) est une mauvaise idée. En voici les principales raisons&nbsp;:
 
 1.  **Les tableaux de mise en page diminuent l'accessibilité aux malvoyants** : les [lecteurs d'écran](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders), utilisés par les non-voyants, interprêtent les balises d'une page HTML et lisent à haute voix le contenu à l'utilisateur. Comme les tables ne sont pas le bon outil pour la mise en page et que le balisage est plus complexe qu'avec les techniques de mise en page des CSS, la sortie des lecteurs d'écran sera source de confusion pour leurs utilisateurs.
 2.  **Les tables produisent de la bouillie :** Comme mentionné ci-dessus, les mises en page sur la base de tableaux comportent généralement des structures de balisage plus complexes que des techniques de mise en page appropriées. Le code résultant sera plus difficile à écrire, à maintenir et à déboguer.
 3.  **Les tableaux ne s'adaptent pas automatiquement** : Si vous utilisez les propriétés de mise en page ({{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} ou {{htmlelement("div")}}), leur largeur est par défaut 100% de celle du parent. Par contre, les tableaux sont dimensionnés en fonction de leur contenu par défaut, de sorte que des mesures supplémentaires sont nécessaires pour que le style du tableau fonctionne effectivement sur les différents types d'écran.
 
-## Apprentissage actif : créer votre premier tableau
+## Apprentissage actif&nbsp;: créer votre premier tableau
 
 Nous avons assez parlé théorie, alors, plongeons dans un exemple pratique et construisons un tableau simple.
 
 1.  Avant tout, faites une copie locale de [blank-template.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) dans un nouveau répertoire de votre ordinateur.
 2.  Le contenu de chaque tableau est encadré par ces deux balises : **[`<table></table>`](/fr/docs/Web/HTML/Element/table)**. Ajoutez‑les dans le corps de votre HTML.
-3.  Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément  **[`<td>`](/fr/docs/Web/HTML/Element/td)** (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau :
+3.  Le plus petit conteneur d'un tableau est la cellule&nbsp;; elle est créée avec l'élément  **[`<td>`](/fr/docs/Web/HTML/Element/td)** («&nbsp;td » comme «&nbsp;tableau données&nbsp;»). Ajoutez ceci entre les balises du tableau :
 
     ```html
     <td>Bonjour, je suis votre première cellule.</td>
     ```
 
-4.  Si nous voulons une rangée de quatre cellules, nous devons copier la première trois fois. Mettez à jour le contenu du tableau pour avoir quelque chose comme :
+4.  Si nous voulons une rangée de quatre cellules, nous devons copier la première trois fois. Mettez à jour le contenu du tableau pour avoir quelque chose comme&nbsp;:
 
     ```html
     <td>Bonjour, je suis votre première cellule </td>
@@ -243,7 +243,7 @@ Nous avons assez parlé théorie, alors, plongeons dans un exemple pratique et c
 
 Comme vous le verrez, les cellules ne sont pas placées les unes en dessous des autres, mais elles sont automatiquement affichées dans une même ligne. chaque élément `<td>` crée une cellule simple et ensemble elles forment la première ligne. Toutes les cellules que nous ajoutons allongent la ligne.
 
-Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise **[`<tr>`](/fr/docs/Web/HTML/Element/tr)** (« tr » comme « table rangée »). Étudions cela maintenant.
+Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise **[`<tr>`](/fr/docs/Web/HTML/Element/tr)** («&nbsp;tr&nbsp;» comme «&nbsp;table rangée&nbsp;»). Étudions cela maintenant.
 
 1.  Placez les quatre cellules que vous avez créées entre deux balises `<tr>` ainsi :
 
@@ -367,17 +367,17 @@ Maintenant, le rendu du tableau réel :
 
 Le problème ici c'est que, bien que vous puissiez comprendre le tableau, il n'est pas aussi facile de croiser les données que cela pourrait être. Si les en-têtes de colonnes et de lignes se démarquaient d'une manière ou d'une autre, ce serait mieux.
 
-### Apprentissage actif : en-tête de tableau
+### Apprentissage actif&nbsp;: en-tête de tableau
 
 Améliorons ce tableau.
 
-1.  En premier lieu, faites une copie des fichiers [dogs-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple « Dogs » ci-dessus.
-2.  Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise **[`<th>`](/fr/docs/Web/HTML/Element/th)** (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise `<td>`, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les `<td>` des cellules entourant le tableau par des `<th>`.
+1.  En premier lieu, faites une copie des fichiers [dogs-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple «&nbsp;Dogs&nbsp;» ci-dessus.
+2.  Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise **[`<th>`](/fr/docs/Web/HTML/Element/th)** («&nbsp;th&nbsp;» comme «&nbsp;table header&nbsp;» ou en-tête de tableau). Il fonctionne exactement comme la balise `<td>`, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les `<td>` des cellules entourant le tableau par des `<th>`.
 3.  Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes.
 
 > **Note :** Vous pouvez trouver notre exemple achevé [dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html) sur GitHub ([voir en direct aussi](http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html)).
 
-### Pourquoi les en-têtes sont-ils utiles ?
+### Pourquoi les en-têtes sont-ils utiles&nbsp;?
 
 Nous avons déjà partiellement répondu à cette question — il vous est plus facile de trouver les données que vous cherchez quand les en-têtes sont marqués clairement, et la conception globale du tableau paraît meilleure.
 
@@ -454,15 +454,15 @@ Nous avons besoin d'un moyen pour étendre "Animaux", "Hippopotame" et "Crocodil
 Utilisons `colspan` et `rowspan` pour améliorer ce tableau.
 
 1.  Tout d'abord, faites une copie locale de nos fichiers [animals-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) dans un nouveau répertoire sur votre ordinateur. Le HTML contient le même exemple d'animaux vu ci-dessus.
-2.  Ensuite, utilisez `colspan` pour mettre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes.
-3.  Enfin, utilisez `rowspan` pour mettre « Cheval » and « Poulet » sur deux lignes.
+2.  Ensuite, utilisez `colspan` pour mettre «&nbsp;Animaux&nbsp;», «&nbsp;Hippopotame&nbsp;» et «&nbsp;Crocodile&nbsp;» sur deux colonnes.
+3.  Enfin, utilisez `rowspan` pour mettre «&nbsp;Cheval&nbsp;» and «&nbsp;Poulet&nbsp;» sur deux lignes.
 4.  Enregistrez et ouvrez votre code sur un navigateur pour voir l'amélioration.
 
 > **Note :** Vous pouvez trouver l'exemple achevé dans [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html) sur GitHub ([voir en direct aussi](http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)).
 
 ## Attribuer un style commun aux colonnes
 
-Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments **[`<col>`](/fr/docs/Web/HTML/Element/col)** and **[`<colgroup>`](/fr/docs/Web/HTML/Element/colgroup)**. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne  — vous devez généralement spécifier les éléments de style dans chaque  `<td>` ou `<th>` de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.
+Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments **[`<col>`](/fr/docs/Web/HTML/Element/col)** and **[`<colgroup>`](/fr/docs/Web/HTML/Element/colgroup)**. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne  — vous devez généralement spécifier les éléments de style dans chaque  `<td>` ou `<th>` de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.
 
 ### Premier exemple
 
@@ -489,7 +489,7 @@ Ce qui nous donne comme résultat :
 
 {{EmbedLiveSample("Premier_exemple")}}
 
-Ce n'est pas idéal, car nous devons répéter les informations de style dans les trois cellules de la colonne  (nous aurions probablement défini une `classe` dans un projet réel et spécifié le style dans une feuille de style séparée). À la place, nous pouvons préciser l'information une seule fois dans un élément `<col>`. Les éléments `<col>` sont utilisés dans un conteneur `<colgroup>` juste en-dessous de la balise `<table>`. Nous pourrions créer le même effet que  celui vu plus haut en spécifiant notre tableau comme suit :
+Ce n'est pas idéal, car nous devons répéter les informations de style dans les trois cellules de la colonne  (nous aurions probablement défini une `classe` dans un projet réel et spécifié le style dans une feuille de style séparée). À la place, nous pouvons préciser l'information une seule fois dans un élément `<col>`. Les éléments `<col>` sont utilisés dans un conteneur `<colgroup>` juste en-dessous de la balise `<table>`. Nous pourrions créer le même effet que celui vu plus haut en spécifiant notre tableau comme suit&nbsp;:
 
 ### Autres exemples
 
@@ -514,7 +514,7 @@ Ce n'est pas idéal, car nous devons répéter les informations de style dans le
 </table>
 ```
 
-En effet, nous définissons deux « styles de colonnes », les informations de style pour chaque colonne. Nous n'appliquons pas de style pour la première colonne, mais nous devons inclure un élément `<col>`  vide — si nous ne le faisons pas, le style indiqué s'appliquera à la première colonne.
+En effet, nous définissons deux «&nbsp;styles de colonnes&nbsp;», les informations de style pour chaque colonne. Nous n'appliquons pas de style pour la première colonne, mais nous devons inclure un élément `<col>`  vide — si nous ne le faisons pas, le style indiqué s'appliquera à la première colonne.
 
 Si nous voulions appliquer les informations de style aux deux colonnes, nous devrions juste inclure un élément `<col>` avec un attribut span, comme ceci :
 
@@ -537,7 +537,7 @@ Ci-dessous, vous pouvez voir le planning d'un professeur de langues. Le vendredi
 Recréez le tableau en suivant les étapes ci-dessous.
 
 1.  Tout d'abord, faites une copie locale du fichier [timetable.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html) dans un nouveau répertoire sur votre ordinateur. Le HTML contient le tableau vu ci-dessus, à l'exception des informations de style des colonnes.
-2.  Ajoutez un élément `<colgroup>`  au début du tableau, juste en dessous de la balise `<table>`,dans lequel vous pouvez ajouter vos éléments `<col>` (voir les étapes restantes ci-dessous).
+2.  Ajoutez un élément `<colgroup>`  au début du tableau, juste en dessous de la balise `<table>`,dans lequel vous pouvez ajouter vos éléments `<col>` (voir les étapes restantes ci-dessous).
 3.  Les deux premières colonnes doivent rester sans style.
 4.  Ajoutez une couleur de fond à la troisième colonne. La valeur de votre attribut `style` est `background-color:#97DB9A;`
 5.  Définissez une largeur différente pour la quatrième colonne. La valeur de votre attribut `style` est `width: 42px;`
diff --git a/files/fr/learn/html/tables/index.md b/files/fr/learn/html/tables/index.md
index 6e5436c43b..d51265d1d1 100644
--- a/files/fr/learn/html/tables/index.md
+++ b/files/fr/learn/html/tables/index.md
@@ -19,7 +19,7 @@ Une tâche assez courante en HTML consiste à structurer des données sous forme
 
 ## Prérequis
 
-Avant de commencer ce module, vous devez déjà connaître les bases du HTML  — voyez [Introduction au HTML](/fr/docs/Learn/HTML/Introduction_to_HTML).
+Avant de commencer ce module, vous devez déjà connaître les bases du HTML  — voyez [Introduction au HTML](/fr/docs/Learn/HTML/Introduction_to_HTML).
 
 > **Note :** Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous devriez essayer (la plupart) des exemples de code dans un programme de codage en ligne comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/).
 
@@ -35,4 +35,4 @@ Ce module contient les articles suivants :
 ## Évaluation des connaissances
 
 - [Structuration de données sur les planètes](/fr/docs/Learn/HTML/Tables/Structuring_planet_data)
-  - : Pour une évaluation des connaissances en matière de tableaux, nous vous  fournissons quelques données sur les planètes du système solaire et nous vous demandons de les structurer sous forme de tableau HTML.
+  - : Pour une évaluation des connaissances en matière de tableaux, nous vous fournissons quelques données sur les planètes du système solaire et nous vous demandons de les structurer sous forme de tableau HTML.
diff --git a/files/fr/learn/html/tables/structuring_planet_data/index.md b/files/fr/learn/html/tables/structuring_planet_data/index.md
index c99f0c9cc5..a4d9020758 100644
--- a/files/fr/learn/html/tables/structuring_planet_data/index.md
+++ b/files/fr/learn/html/tables/structuring_planet_data/index.md
@@ -58,7 +58,7 @@ Les étapes suivantes décrivent ce que vous devez faire pour complèter l'exemp
 ## Conseils et astuces
 
 - La première cellule de la ligne d'en-tête doit être vierge et couvrir deux colonnes.
-- Les en-têtes regrouppant des lignes (_exemple : les planètes joviennes_) qui sont à gauche des en-têtes de lignes des noms des planètes (exemple :  _Saturne_) sont un peu difficiles à trier — vous devez vous assurer que chacun d'eux couvre le bon nombre de lignes et colonnes.
+- Les en-têtes regrouppant des lignes (_exemple : les planètes joviennes_) qui sont à gauche des en-têtes de lignes des noms des planètes (exemple :  _Saturne_) sont un peu difficiles à trier — vous devez vous assurer que chacun d'eux couvre le bon nombre de lignes et colonnes.
 - une des méthodes d'association des en-têtes avec leurs lignes et colonnes est un peu plus facile que l'autre.
 
 ## Correction
diff --git a/files/fr/learn/index.md b/files/fr/learn/index.md
index 31494005d5..6346a8caa2 100644
--- a/files/fr/learn/index.md
+++ b/files/fr/learn/index.md
@@ -41,9 +41,9 @@ Si vous avez des questions concernant des sujets que vous aimeriez voir couverts
 - Complètement débutant
   - : Si vous êtes totalement débutant dans le développement web, nous vous recommandons de commencer par travailler notre module [« Premiers pas sur le Web »](/fr/docs/Learn/Getting_started_with_the_web), qui est une introduction pratique au développement web.
 - Au-delà des bases
-  - : Si vous possédez déjà quelques connaissances, l'étape suivante consiste à étudier en détail le {{glossary("HTML")}} et les {{glossary("CSS")}} : débutez avec notre module [Introduction au HTML](/fr/docs/Learn/HTML/Introduction_to_HTML), puis voyez le module [Introduction aux CSS](/fr/docs/Learn/CSS/First_steps).
+  - : Si vous possédez déjà quelques connaissances, l'étape suivante consiste à étudier en détail le {{glossary("HTML")}} et les {{glossary("CSS")}}&nbsp;: débutez avec notre module [Introduction au HTML](/fr/docs/Learn/HTML/Introduction_to_HTML), puis voyez le module [Introduction aux CSS](/fr/docs/Learn/CSS/First_steps).
 - Écrire des scripts
-  - : Si vous êtes déjà à l'aise avec le HTML et les CSS, ou si vous êtes plutôt intéressé par le codage, voyez le {{glossary("JavaScript")}} ou le développement côté serveur. Commencez par nos modules [JavaScript : premiers pas](/fr/docs/Learn/JavaScript/First_steps) et [Premiers pas côté serveur](/fr/docs/Learn/Server-side/First_steps).
+  - : Si vous êtes déjà à l'aise avec le HTML et les CSS, ou si vous êtes plutôt intéressé par le codage, voyez le {{glossary("JavaScript")}} ou le développement côté serveur. Commencez par nos modules [JavaScript&nbsp;: premiers pas](/fr/docs/Learn/JavaScript/First_steps) et [Premiers pas côté serveur](/fr/docs/Learn/Server-side/First_steps).
 - Les _frameworks_ et l'outillage
   - : Lorsque vous aurez appris l'essentiel de HTML, CSS, et JavaScript, vous devriez étudier [les outils de développement web côté client](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools) et éventuellement approfondir [les _frameworks_ JavaScript côté client](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks), ainsi [que la programmation des sites web côté serveur](/fr/docs/Learn/Server-side).
 
@@ -72,7 +72,7 @@ Voici une liste de toutes les rubriques couvertes dans la zone d'apprentissage d
 - [Outils et tests](/fr/docs/Learn/Tools_and_testing)
   - : Cette rubrique présente les outils que les développeurs utilisent pour faciliter leur travail, tels que les outils de test inter-navigateurs, les _linters_, les outils de transformations et de mise en forme, les systèmes de gestion de version, et les outils de déploiement.
 - [Programmation de site web coté serveur](/fr/docs/Learn/Server-side)
-  - : Même si vous êtes focalisés sur le développement côté client, il est toujours utile de connaître le mode de fonctionnement des serveurs et des fonctionnalités du code côté serveur. Cette rubrique fournit une introduction générale sur le fonctionnement côté serveur et des didacticiels détaillant la manière de créer une application côté serveur à l'aide de deux environnements applicatifs populaires : Django (en Python) et Express (Node.js).
+  - : Même si vous êtes focalisés sur le développement côté client, il est toujours utile de connaître le mode de fonctionnement des serveurs et des fonctionnalités du code côté serveur. Cette rubrique fournit une introduction générale sur le fonctionnement côté serveur et des didacticiels détaillant la manière de créer une application côté serveur à l'aide de deux environnements applicatifs populaires&nbsp;: Django (en Python) et Express (Node.js).
 
 ## Obtenir nos exemples de code
 
@@ -84,7 +84,7 @@ Si vous préférez copier le dépôt d'une manière plus flexible qui permet des
 2.  [S'inscrire pour obtenir un compte GitHub](https://github.com/join).
 3.  Une fois inscrit, se connecter dans [github.com](https://github.com) avec votre nom d'utilisateur et votre mot de passe.
 4.  Ouvrir l'[invite de commande](https://www.lifewire.com/how-to-open-command-prompt-2618089) (Windows) ou un terminal ([Linux](https://help.ubuntu.com/community/UsingTheTerminal), [macOS](http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line)).
-5.  Pour copier depuis le dépôt de l'espace d'apprentissage un répertoire nommé « learning-area » à l'emplacement courant dans votre ordinateur, utilisez la commande suivante :
+5.  Pour copier depuis le dépôt de l'espace d'apprentissage un répertoire nommé «&nbsp;learning-area&nbsp;» à l'emplacement courant dans votre ordinateur, utilisez la commande suivante&nbsp;:
 
     ```bash
     git clone https://github.com/mdn/learning-area
@@ -92,15 +92,15 @@ Si vous préférez copier le dépôt d'une manière plus flexible qui permet des
 
 6.  Vous pouvez maintenant saisir le répertoire et retrouver les fichiers recherchés (soit avec votre explorateur de fichiers ou avec la [commande `cd`](<https://en.wikipedia.org/wiki/Cd_(command)>)).
 
-Vous pouvez mettre à jour le dépôt de `learning-area` pour tout changement intervenu sur la version principale « main » de GitHub en parcourant les étapes suivantes :
+Vous pouvez mettre à jour le dépôt de `learning-area` pour tout changement intervenu sur la version principale « main » de GitHub en parcourant les étapes suivantes&nbsp;:
 
-1.  Dans votre terminal/invite de commande, allez dans le répertoire `learning-area` avec `cd`. Par exemple, si vous êtes dans son répertoire parent :
+1.  Dans votre terminal/invite de commande, allez dans le répertoire `learning-area` avec `cd`. Par exemple, si vous êtes dans son répertoire parent&nbsp;:
 
     ```bash
     cd learning-area
     ```
 
-2.  Mettez à jour le dépôt avec la commande :
+2.  Mettez à jour le dépôt avec la commande&nbsp;:
 
     ```bash
     git pull
diff --git a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md
index 3fdd18cb03..d9558a70fc 100644
--- a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md
+++ b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md
@@ -17,7 +17,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
 
-Dans l'article précédent, nous avons traité essentiellement de la théorie. Le présent article fournira une expérience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions.
+Dans l'article précédent, nous avons traité essentiellement de la théorie. Le présent article fournira une expérience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions.
 
 <table class="standard-table">
   <tbody>
@@ -45,7 +45,7 @@ Dans l'article précédent, nous avons traité essentiellement de la théorie. L
 
 ## Apprentissage actif : Construisons une fonction
 
-La fonction que nous allons construire sera nommée `displayMessage()`. Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction [alert()](/fr/docs/Web/API/Window/alert) du navigateur. Vous avez déjà vu cela avant, mais nous allons simplement nous rafraîchir la mémoire — essayez le code qui suit dans la console JavaScript de votre navigateur, sur n'importe quelle page que vous aimez :
+La fonction que nous allons construire sera nommée `displayMessage()`. Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction [alert()](/fr/docs/Web/API/Window/alert) du navigateur. Vous avez déjà vu cela avant, mais nous allons simplement nous rafraîchir la mémoire — essayez le code qui suit dans la console JavaScript de votre navigateur, sur n'importe quelle page que vous aimez :
 
 ```js
 alert('This is a message');
@@ -53,18 +53,18 @@ alert('This is a message');
 
 La fonction prend un seul argument en paramètre — la chaîne de caractères qui est affichée dans la boîte d'alerte. Vous pouvez essayer de varier la syntaxe de la chaîne pour modifier le message.
 
-La fonction [alert()](/fr/docs/Web/API/Window/alert) est assez limitée : vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, une icône, ou autre chose. Nous en construirons une qui s'avérera plus amusante.
+La fonction [alert()](/fr/docs/Web/API/Window/alert) est assez limitée&nbsp;: vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, une icône, ou autre chose. Nous en construirons une qui s'avérera plus amusante.
 
-> **Note :** Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome.
+> **Note :** Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome.
 
 ## La fonction de base
 
 Pour commencer, mettons en place une fonction de base.
 
-> **Note :** Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les [conventions de noms de variables](/fr/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules). Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables.
+> **Note :** Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les [conventions de noms de variables](/fr/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules). Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables.
 
 1.  Commencez par faire une copie locale du fichier [function-start.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html). Vous pourrez voir que le code HTML est simple — l'élément body ne contient qu'un seul bouton. Nous avons également ajouté quelques règles CSS de base pour styliser la boîte de message personnalisée, et un élément {{htmlelement("script")}} pour écrire notre code JavaScript.
-2.  Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément `<script>`&nbsp;:
+2.  Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément `<script>`&nbsp;:
 
     ```js
     function displayMessage() {
@@ -72,7 +72,7 @@ Pour commencer, mettons en place une fonction de base.
     }
     ```
 
-    Nous commençons avec le mot-clé `function`, qui signifie que nous définissons une fonction. Celui-ci est suivi par le nom que nous voulons donner à notre fonction, des parenthèses et des accolades. Tous les paramètres que nous voulons donner à notre fonction vont à l'intérieur des parenthèses, et le code qui s'exécute lorsque nous appelons la fonction va à l'intérieur des accolades.
+    Nous commençons avec le mot-clé `function`, qui signifie que nous définissons une fonction. Celui-ci est suivi par le nom que nous voulons donner à notre fonction, des parenthèses et des accolades. Tous les paramètres que nous voulons donner à notre fonction vont à l'intérieur des parenthèses, et le code qui s'exécute lorsque nous appelons la fonction va à l'intérieur des accolades.
 
 3.  Enfin, ajoutez le code suivant à l'intérieur des accolades :
 
@@ -98,17 +98,17 @@ Pour commencer, mettons en place une fonction de base.
 
 Étant donné qu'il y a pas mal de code à analyser, allons-y pas à pas.
 
-La première ligne utilise une fonction de l'API DOM appelée {{domxref("document.querySelector()")}} pour sélectionner l'élément {{htmlelement("html")}} et stocker une référence vers cet élément dans une variable appelée `html`, de façon à pouvoir l'utiliser plus tard :
+La première ligne utilise une fonction de l'API DOM appelée {{domxref("document.querySelector()")}} pour sélectionner l'élément {{htmlelement("html")}} et stocker une référence vers cet élément dans une variable appelée `html`, de façon à pouvoir l'utiliser plus tard :
 
 ```js
 var html = document.querySelector('html');
 ```
 
-La section suivante utilise une autre fonction de l'API DOM appelée {{domxref("Document.createElement()")}} pour créer un élément {{htmlelement("div")}} et stocker une référence vers lui dans une variable appelée `panel` (Dans la suite de l'article, nous parlerons simplement du panneau `<div>`.). Cet élément sera le conteneur extérieur de notre boîte de message.
+La section suivante utilise une autre fonction de l'API DOM appelée {{domxref("Document.createElement()")}} pour créer un élément {{htmlelement("div")}} et stocker une référence vers lui dans une variable appelée `panel` (Dans la suite de l'article, nous parlerons simplement du panneau `<div>`.). Cet élément sera le conteneur extérieur de notre boîte de message.
 
-Puis, nous utilisons encore une autre fonction de l'API DOM appelée {{domxref("Element.setAttribute()")}} pour ajouter un attribut `class` à notre panneau qui aura pour valeur `msgBox`. Ceci rendra plus facile la mise en forme de l'élément — si vous regardez le CSS de la page, vous verrez que nous utilisons un sélecteur de classe `.msgBox` dans le but de styliser la boîte de message ainsi que son contenu.
+Puis, nous utilisons encore une autre fonction de l'API DOM appelée {{domxref("Element.setAttribute()")}} pour ajouter un attribut `class` à notre panneau qui aura pour valeur `msgBox`. Ceci rendra plus facile la mise en forme de l'élément — si vous regardez le CSS de la page, vous verrez que nous utilisons un sélecteur de classe `.msgBox` dans le but de styliser la boîte de message ainsi que son contenu.
 
-Finallement, nous appelons une fonction du DOM nommée {{domxref("Node.appendChild()")}} sur la variable `html` créée précédemment, qui insère un élément, en tant qu'enfant, à l'intérieur d'un autre. Nous spécifions le panneau `<div>` (panel) comme l'enfant que nous voulons ajouter à l'intérieur de l'élément `<html>`. Nous avons besoin de le faire puisque l'élément que nous avons créé ne peut pas apparaître de lui-même sur la page — nous avons besoin de préciser où le mettre.
+Finallement, nous appelons une fonction du DOM nommée {{domxref("Node.appendChild()")}} sur la variable `html` créée précédemment, qui insère un élément, en tant qu'enfant, à l'intérieur d'un autre. Nous spécifions le panneau `<div>` (panel) comme l'enfant que nous voulons ajouter à l'intérieur de l'élément `<html>`. Nous avons besoin de le faire puisque l'élément que nous avons créé ne peut pas apparaître de lui-même sur la page — nous avons besoin de préciser où le mettre.
 
 ```js
 var panel = document.createElement('div');
@@ -116,7 +116,7 @@ panel.setAttribute('class', 'msgBox');
 html.appendChild(panel);
 ```
 
-Les deux sections suivantes font usage des mêmes fonctions `createElement()` et `appendChild()` que nous avons déjà vu pour créer deux nouveaux éléments — l'un {{htmlelement("p")}} et l'autre {{htmlelement("button")}} —  et pour les insèrer dans la page en tant qu'enfant du panneau `<div>`. On utilise leur propriété {{domxref("Node.textContent")}} — qui représente le contenu textuel d'un élément — pour insérer un message à l'intérieur du paragraphe, ainsi qu'un 'x' à l'intérieur du bouton. Ce bouton sera cliqué / activé quand l'utilisateur voudra fermer la boîte de message.
+Les deux sections suivantes font usage des mêmes fonctions `createElement()` et `appendChild()` que nous avons déjà vu pour créer deux nouveaux éléments — l'un {{htmlelement("p")}} et l'autre {{htmlelement("button")}} —  et pour les insèrer dans la page en tant qu'enfant du panneau `<div>`. On utilise leur propriété {{domxref("Node.textContent")}} — qui représente le contenu textuel d'un élément — pour insérer un message à l'intérieur du paragraphe, ainsi qu'un 'x' à l'intérieur du bouton. Ce bouton sera cliqué / activé quand l'utilisateur voudra fermer la boîte de message.
 
 ```js
 var msg = document.createElement('p');
@@ -128,9 +128,9 @@ closeBtn.textContent = 'x';
 panel.appendChild(closeBtn);
 ```
 
-Finalement, nous utilisons un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onclick")}} de sorte qu'un clic sur le bouton déclenche le bout de code chargé de supprimer la totalité du panneau de la page — c'est-à-dire fermer la boîte de message.
+Finalement, nous utilisons un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onclick")}} de sorte qu'un clic sur le bouton déclenche le bout de code chargé de supprimer la totalité du panneau de la page — c'est-à-dire fermer la boîte de message.
 
-Le gestionnaire `onclick` est une propriété disponible sur le bouton (en fait, sur n'importe quel élément de la page) qui pourra se voir transmettre une fonction en paramètre pour spécifier quel morceau de code sera déclenché quand le bouton sera cliqué. Vous en apprendrez bien plus dans notre article sur les évènements. Nous avons passé à notre gestionnaire  `onclick` une fonction anonyme, qui contient le code exécuté quand le bouton est cliqué. L'instruction définie dans la fonction utilise la fonction de l'API DOM {{domxref("Node.removeChild()")}} pour indiquer que nous tenons à supprimer un élément enfant spécifique de l'élément HTML — dans notre cas le panneau `<div>`.
+Le gestionnaire `onclick` est une propriété disponible sur le bouton (en fait, sur n'importe quel élément de la page) qui pourra se voir transmettre une fonction en paramètre pour spécifier quel morceau de code sera déclenché quand le bouton sera cliqué. Vous en apprendrez bien plus dans notre article sur les évènements. Nous avons passé à notre gestionnaire  `onclick` une fonction anonyme, qui contient le code exécuté quand le bouton est cliqué. L'instruction définie dans la fonction utilise la fonction de l'API DOM {{domxref("Node.removeChild()")}} pour indiquer que nous tenons à supprimer un élément enfant spécifique de l'élément HTML — dans notre cas le panneau `<div>`.
 
 ```js
 closeBtn.onclick = function() {
@@ -138,7 +138,7 @@ closeBtn.onclick = function() {
 }
 ```
 
-Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'insère dans la page, ce qui ressemble à ça :
+Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'insère dans la page, ce qui ressemble à ça :
 
 ```html
 <div class="msgBox">
@@ -147,11 +147,11 @@ Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'in
 </div>
 ```
 
-Ça nous a fait beaucoup de code à passer en revue — ne vous inquiétez pas trop si vous ne vous souvenez pas exactement de comment chaque instruction fonctionne ! Bien que la partie principale sur laquelle nous voulions mettre l'accent ici est la structure de la fonction et son utilisation, nous avons voulu montrer quelque chose d'intéressant pour mettre en valeur cet exemple.
+Ça nous a fait beaucoup de code à passer en revue — ne vous inquiétez pas trop si vous ne vous souvenez pas exactement de comment chaque instruction fonctionne ! Bien que la partie principale sur laquelle nous voulions mettre l'accent ici est la structure de la fonction et son utilisation, nous avons voulu montrer quelque chose d'intéressant pour mettre en valeur cet exemple.
 
 ## Appeler la fonction
 
-À présent, nous avons notre fonction définie comme il faut dans notre balise `<script>`, mais il ne se passera rien si on laisse les choses en l'état.
+À présent, nous avons notre fonction définie comme il faut dans notre balise `<script>`, mais il ne se passera rien si on laisse les choses en l'état.
 
 1.  Ajoutez la ligne suivante au-dessous de votre fonction pour l'appeler :
 
@@ -168,7 +168,7 @@ Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'in
     Dans cette démo, nous faisons apparaître le message quand l'utilisateur clique sur le bouton.
 
 3.  Supprimez la ligne précédente que vous avez ajoutée.
-4.  Ensuite, vous sélectionnerez le bouton et stockerez une référence vers celui-ci dans une variable. Ajoutez la ligne suivante à votre code, au-dessus de la définition de fonction :
+4.  Ensuite, vous sélectionnerez le bouton et stockerez une référence vers celui-ci dans une variable. Ajoutez la ligne suivante à votre code, au-dessus de la définition de fonction :
 
     ```js
     var btn = document.querySelector('button');
@@ -180,7 +180,7 @@ Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'in
     btn.onclick = displayMessage;
     ```
 
-    D'une manière similaire à notre ligne `closeBtn.onclick...` à l'intérieur de la fonction, ici, nous appelons un certain code en réponse à un clic sur un bouton. Mais dans ce cas, au lieu d'appeler une fonction anonyme contenant du code, nous appelons directement notre nom de fonction.
+    D'une manière similaire à notre ligne `closeBtn.onclick...` à l'intérieur de la fonction, ici, nous appelons un certain code en réponse à un clic sur un bouton. Mais dans ce cas, au lieu d'appeler une fonction anonyme contenant du code, nous appelons directement notre nom de fonction.
 
 6.  Essayez d'enregistrer et de rafraîchir la page, maintenant vous devriez voir la boîte de message s'afficher lorsque vous cliquez sur le bouton.
 
@@ -196,9 +196,9 @@ Si vous avez essayé la dernière expérimentation, assurez-vous d'annuler la de
 
 ## Améliorer la fonction à l'aide de paramètres
 
-En l'état, la fonction n'est pas très utile — on ne veut pas montrer le même message par défaut à chaque fois. Améliorons la en ajoutant quelques paramètres, ils permettront d'appeler la fonction avec différentes options.
+En l'état, la fonction n'est pas très utile — on ne veut pas montrer le même message par défaut à chaque fois. Améliorons la en ajoutant quelques paramètres, ils permettront d'appeler la fonction avec différentes options.
 
-1.  Premièrement, mettons à jour la première ligne :
+1.  Premièrement, mettons à jour la première ligne&nbsp;:
 
     ```js
     function displayMessage() {
@@ -210,7 +210,7 @@ En l'état, la fonction n'est pas très utile — on ne veut pas montrer le mê
     function displayMessage(msgText, msgType) {
     ```
 
-    Maintenant, quand nous appelons la fonction, nous pouvons fournir deux valeurs de variables entre les parenthèses : une pour spécifier le message à afficher dans la boîte, l'autre pour le type de message.
+    Maintenant, quand nous appelons la fonction, nous pouvons fournir deux valeurs de variables entre les parenthèses : une pour spécifier le message à afficher dans la boîte, l'autre pour le type de message.
 
 2.  Pour faire usage du premier paramètre, mettez à jour la ligne suivante à l'intérieur de votre fonction :
 
@@ -224,7 +224,7 @@ En l'état, la fonction n'est pas très utile — on ne veut pas montrer le mê
     msg.textContent = msgText;
     ```
 
-3.  Vous devez maintenant mettre à jour votre appel de fonction pour inclure un texte de message mis à jour. Modifiez la ligne suivante :
+3.  Vous devez maintenant mettre à jour votre appel de fonction pour inclure un texte de message mis à jour. Modifiez la ligne suivante&nbsp;:
 
     ```js
     btn.onclick = displayMessage;
@@ -242,15 +242,15 @@ En l'état, la fonction n'est pas très utile — on ne veut pas montrer le mê
 
 4.  Rechargez et essayez le code à nouveau et vous verrez qu'il fonctionne toujours très bien, sauf que maintenant vous pouvez également modifier le message à l'intérieur du paramètre pour obtenir des messages différents affichés dans la boîte !
 
-### Un paramètre plus complexe
+### Un paramètre plus complexe
 
-Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — selon la valeur du paramètre `msgType`, la fonction affichera une icône et une couleur d'arrière-plan différentes.
+Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — selon la valeur du paramètre `msgType`, la fonction affichera une icône et une couleur d'arrière-plan différentes.
 
-1.  Tout d'abord, téléchargez les icônes nécessaires à cet exercice ([warning](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png) et [chat](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png)) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé `icons` dans le même répertoire que votre fichier HTML.
+1.  Tout d'abord, téléchargez les icônes nécessaires à cet exercice ([warning](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png) et [chat](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png)) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé `icons` dans le même répertoire que votre fichier HTML.
 
-    > **Note :** icônes [warning](https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon) et [chat](https://www.iconfinder.com/icons/1031441/chat_message_text_icon) trouvés sur iconfinder.com, et créés par [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr). Merci !
+    > **Note :** icônes [warning](https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon) et [chat](https://www.iconfinder.com/icons/1031441/chat_message_text_icon) trouvés sur iconfinder.com, et créés par [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr). Merci !
 
-2.  Ensuite, trouvez le CSS à l'intérieur de votre fichier HTML. Nous ferons quelques changements pour faire place aux icônes. Tout d'abord, mettez à jour la largeur `.msgBox` en changeant :
+2.  Ensuite, trouvez le CSS à l'intérieur de votre fichier HTML. Nous ferons quelques changements pour faire place aux icônes. Tout d'abord, mettez à jour la largeur `.msgBox` en changeant :
 
     ```css
     width: 200px;
@@ -262,7 +262,7 @@ Passons au paramètre suivant. Celui-ci va demander un peu plus de travail —�
     width: 242px;
     ```
 
-3.  Ensuite, ajoutez les lignes à l'intérieur de la règle CSS `.msgBox p { ... }` :
+3.  Ensuite, ajoutez les lignes à l'intérieur de la règle CSS `.msgBox p { ... }`&nbsp;:
 
     ```css
     padding-left: 82px;
@@ -270,7 +270,7 @@ Passons au paramètre suivant. Celui-ci va demander un peu plus de travail —�
     background-repeat: no-repeat;
     ```
 
-4.  Maintenant, nous devons ajouter du code à notre fonction `displayMessage()` pour gérer l'affichage de l'icône. Ajoutez le bloc suivant juste au dessus de l'accolade fermante "`}`" de votre fonction :
+4.  Maintenant, nous devons ajouter du code à notre fonction `displayMessage()` pour gérer l'affichage de l'icône. Ajoutez le bloc suivant juste au dessus de l'accolade fermante "`}`" de votre fonction :
 
     ```js
     if (msgType === 'warning') {
@@ -284,7 +284,7 @@ Passons au paramètre suivant. Celui-ci va demander un peu plus de travail —�
     }
     ```
 
-    Ici, quand `msgType` a la valeur `'warning'`, l'icône d'avertissement est affichée et le fond du panneau prend la couleur rouge. Si `msgType` a la valeur `'chat'`, l'icône de chat est affichée et l'arrière-plan du panneau est bleu. Si le paramètre `msgType` n'a pas de valeur du tout (ou s'il a une valeur totalement différente), alors la partie du code contenue dans `else { ... }` est exécutée : le paragraphe prend un padding par défaut et il n'y a ni icône ni couleur d'arrière-plan. En fait, on fournit un état par défaut si aucun paramètre `msgType` n'est fourni, ce qui signifie qu'il s'agit d'un paramètre facultatif !
+    Ici, quand `msgType` a la valeur `'warning'`, l'icône d'avertissement est affichée et le fond du panneau prend la couleur rouge. Si `msgType` a la valeur `'chat'`, l'icône de chat est affichée et l'arrière-plan du panneau est bleu. Si le paramètre `msgType` n'a pas de valeur du tout (ou s'il a une valeur totalement différente), alors la partie du code contenue dans `else { ... }` est exécutée&nbsp;: le paragraphe prend un padding par défaut et il n'y a ni icône ni couleur d'arrière-plan. En fait, on fournit un état par défaut si aucun paramètre `msgType` n'est fourni, ce qui signifie qu'il s'agit d'un paramètre facultatif !
 
 5.  Nous allons tester notre fonction mise à jour, essayez de mettre à jour l'appel `displayMessage()` :
 
@@ -301,10 +301,10 @@ Passons au paramètre suivant. Celui-ci va demander un peu plus de travail —�
 
     Vous pouvez voir à quel point notre petite (plus tant que cela maintenant) fonction est devenue utile :
 
-> **Note :** Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la [version définitive sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html) (aussi, vous pouvez tester la [démo](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html)), ou nous demander de l'aide.
+> **Note :** Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la [version définitive sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html) (aussi, vous pouvez tester la [démo](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html)), ou nous demander de l'aide.
 
 ## Conclusion
 
-Vous êtes venu à bout de cette activité, félicitations ! Cet article vous a amené à travers tout le processus de construction d'une fonction pratique personnalisée, qui avec un peu plus de travail pourrait être transposée dans un projet réel. Dans l'article suivant, nous allons conclure l'apprentissage des fonctions en expliquant un autre concept connexe essentiel — les valeurs de retour.
+Vous êtes venu à bout de cette activité, félicitations&nbsp;! Cet article vous a amené à travers tout le processus de construction d'une fonction pratique personnalisée, qui avec un peu plus de travail pourrait être transposée dans un projet réel. Dans l'article suivant, nous allons conclure l'apprentissage des fonctions en expliquant un autre concept connexe essentiel — les valeurs de retour.
 
 {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
diff --git a/files/fr/learn/javascript/building_blocks/conditionals/index.md b/files/fr/learn/javascript/building_blocks/conditionals/index.md
index 433c2c816b..195e348021 100644
--- a/files/fr/learn/javascript/building_blocks/conditionals/index.md
+++ b/files/fr/learn/javascript/building_blocks/conditionals/index.md
@@ -19,12 +19,12 @@ original_slug: Apprendre/JavaScript/Building_blocks/conditionals
 
 {{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}
 
-Dans tout langage de programmation, le code doit prendre des décisions et agir en fonction des différents paramètres. Par exemple dans un jeu, si le nombre de vies du joueur atteint 0, alors le jeu est terminé. Dans une application météo, si elle est consultée le matin, l'application montrera une image du lever de soleil ; l'application proposera des étoiles et la lune s'il fait nuit. Dans cet article nous allons découvrir comment ces instructions conditionnelles fonctionnent en JavaScript.
+Dans tout langage de programmation, le code doit prendre des décisions et agir en fonction des différents paramètres. Par exemple dans un jeu, si le nombre de vies du joueur atteint 0, alors le jeu est terminé. Dans une application météo, si elle est consultée le matin, l'application montrera une image du lever de soleil&nbsp;; l'application proposera des étoiles et la lune s'il fait nuit. Dans cet article nous allons découvrir comment ces instructions conditionnelles fonctionnent en JavaScript.
 
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Connaissances du vocabulaire informatique, compréhension des bases du
         HTML et des CSS,
@@ -34,7 +34,7 @@ Dans tout langage de programmation, le code doit prendre des décisions et agir
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Comprendre comment utiliser les structures conditionnelles en
         JavaScript.
@@ -43,21 +43,21 @@ Dans tout langage de programmation, le code doit prendre des décisions et agir
   </tbody>
 </table>
 
-## Vous l'aurez à une condition !..
+## Vous l'aurez à une condition !..
 
-Les êtres humains (et d'autres animaux) prennent tout le temps des décisions qui affectent leur vie, de la plus insignifiante (« Est‑ce que je devrais prendre un biscuit ou deux ? ») à la plus importante (« Est‑ce que je dois rester dans mon pays natal et travailler à la ferme de mon père, ou déménager aux États-Unis et étudier l'astrophysique ? »)
+Les êtres humains (et d'autres animaux) prennent tout le temps des décisions qui affectent leur vie, de la plus insignifiante («&nbsp;Est‑ce que je devrais prendre un biscuit ou deux ?&nbsp;») à la plus importante («&nbsp;Est‑ce que je dois rester dans mon pays natal et travailler à la ferme de mon père, ou déménager aux États-Unis et étudier l'astrophysique&nbsp;?&nbsp;»)
 
-Les instructions conditionnelles nous permettent de représenter ce genre de prise de décision en JavaScript, du choix qui doit être fait (par ex. « un biscuit ou deux »), à la conséquence de ces choix (il se peut que la conséquence de « manger un biscuit » soit « avoir encore faim », et celle de « manger deux biscuits » soit « se sentir rassasié, mais se faire gronder par maman pour avoir mangé tous les biscuits ».)
+Les instructions conditionnelles nous permettent de représenter ce genre de prise de décision en JavaScript, du choix qui doit être fait (par ex. «&nbsp;un biscuit ou deux »), à la conséquence de ces choix (il se peut que la conséquence de «&nbsp;manger un biscuit&nbsp;» soit «&nbsp;avoir encore faim&nbsp;», et celle de «&nbsp;manger deux biscuits&nbsp;» soit «&nbsp;se sentir rassasié, mais se faire gronder par maman pour avoir mangé tous les biscuits&nbsp;».)
 
 ![](cookie-choice-small.png)
 
 ## Instruction if ... else
 
-Intéressons nous de plus près à la forme la plus répandue d'instruction conditionnelle que vous utiliserez en JavaScript — la modeste [instruction](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) [`if ... else`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else).
+Intéressons nous de plus près à la forme la plus répandue d'instruction conditionnelle que vous utiliserez en JavaScript — la modeste [instruction](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) [`if ... else`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else).
 
 ### Syntaxe élémentaire if ... else
 
-La syntaxe élémentaire de `if...else` ressemble à cela en {{glossary("pseudocode")}}:
+La syntaxe élémentaire de `if...else` ressemble à cela en {{glossary("pseudocode")}}:
 
     if (condition) {
       code à exécuter si la condition est true
@@ -68,14 +68,14 @@ La syntaxe élémentaire de `if...else` ressemble à cela en {{glossary("pseud
 Ici nous avons:
 
 1.  Le mot‑clé `if` suivie de parenthèses.
-2.  Une condition à évaluer, placée entre les parenthèses (typiquement « cette valeur est‑elle plus grande que cet autre valeur ? » ou « cette valeur existe‑t‑elle ? »). Cette condition se servira des [opérateurs de comparaison](/fr/docs/Learn/JavaScript/First_steps/Math#Comparison_operators) que nous avons étudié dans le précédent module, et renverra `true` ou `false`.
-3.  Une paire d'accolades, à l'intérieur de laquelle se trouve du code — cela peut être n'importe quel code voulu ; il sera exécuté seulement si la condition renvoie `true`.
+2.  Une condition à évaluer, placée entre les parenthèses (typiquement «&nbsp;cette valeur est‑elle plus grande que cet autre valeur&nbsp;? » ou «&nbsp;cette valeur existe‑t‑elle ?&nbsp;»). Cette condition se servira des [opérateurs de comparaison](/fr/docs/Learn/JavaScript/First_steps/Math#Comparison_operators) que nous avons étudié dans le précédent module, et renverra `true` ou `false`.
+3.  Une paire d'accolades, à l'intérieur de laquelle se trouve du code — cela peut être n'importe quel code voulu&nbsp;; il sera exécuté seulement si la condition renvoie `true`.
 4.  Le mot‑clé `else`.
-5.  Une autre paire d'accolades, à l'intérieur de laquelle se trouve du code différent — tout code souhaité et il sera exécuté seulement si la condition ne renvoie pas `true`.
+5.  Une autre paire d'accolades, à l'intérieur de laquelle se trouve du code différent — tout code souhaité et il sera exécuté seulement si la condition ne renvoie pas `true`.
 
-Ce code est facile à lire pour une personne — il dit « **si** la **condition** renvoie `true`, exécuter le code A, **sinon** exécuter le code B ».
+Ce code est facile à lire pour une personne — il dit «&nbsp;**si** la **condition** renvoie `true`, exécuter le code A, **sinon** exécuter le code B&nbsp;».
 
-Notez qu'il n'est pas nécessaire d'inclure une instruction `else` et le deuxième bloc entre accolades — le code suivant est aussi parfaitement correct :
+Notez qu'il n'est pas nécessaire d'inclure une instruction `else` et le deuxième bloc entre accolades — le code suivant est aussi parfaitement correct&nbsp;:
 
     if (condition) {
       code à exécuter si la condition est true
@@ -83,18 +83,18 @@ Notez qu'il n'est pas nécessaire d'inclure une instruction `else` et le deuxiè
 
     exécuter un autre code
 
-Cependant, vous devez faire attention ici — dans ce cas, le deuxième bloc de code n'est pas controlé par l'instruction conditionnelle, donc il sera **toujours** exécuté, que la condition ait renvoyé `true` ou `false`. Ce n'est pas nécessairement une mauvaise chose, mais il se peut que ce ne soit pas ce que vous vouliez — le plus souvent vous voudrez exécuter un bloc de code *ou* l'autre, et non les deux.
+Cependant, vous devez faire attention ici — dans ce cas, le deuxième bloc de code n'est pas controlé par l'instruction conditionnelle, donc il sera **toujours** exécuté, que la condition ait renvoyé `true` ou `false`. Ce n'est pas nécessairement une mauvaise chose, mais il se peut que ce ne soit pas ce que vous vouliez — le plus souvent vous voudrez exécuter un bloc de code *ou* l'autre, et non les deux.
 
-Une dernière remarque, vous verrez quelques fois les instructions `if...else` écrites sans accolades, de manière abrégée, ainsi :
+Une dernière remarque, vous verrez quelques fois les instructions `if...else` écrites sans accolades, de manière abrégée, ainsi&nbsp;:
 
     if (condition) code à exécuter si la condition est true
     else exécute un autre code à la place
 
-Ce code est parfaitement valide, mais il n'est pas recommandé — il est nettement plus facile de lire le code et d'en déduire ce qui se passe si vous utilisez des accolades pour délimiter les blocs de code, des lignes séparées et des indentations.
+Ce code est parfaitement valide, mais il n'est pas recommandé — il est nettement plus facile de lire le code et d'en déduire ce qui se passe si vous utilisez des accolades pour délimiter les blocs de code, des lignes séparées et des indentations.
 
 ### Un exemple concret
 
-Pour mieux comprendre cette syntaxe, prenons un exemple concret. Imaginez un enfant à qui le père ou la mère demande de l'aide pour une tâche. Le parent pourrait dire « Mon chéri, si tu m'aides en allant faire les courses, je te donnerai un peu plus d'argent de poche pour que tu puisses t'acheter ce jouet que tu voulais ». En JavaScript, on pourrait le représenter de cette manière :
+Pour mieux comprendre cette syntaxe, prenons un exemple concret. Imaginez un enfant à qui le père ou la mère demande de l'aide pour une tâche. Le parent pourrait dire «&nbsp;Mon chéri, si tu m'aides en allant faire les courses, je te donnerai un peu plus d'argent de poche pour que tu puisses t'acheter ce jouet que tu voulais&nbsp;». En JavaScript, on pourrait le représenter de cette manière&nbsp;:
 
 ```js
 let coursesFaites = false;
@@ -106,15 +106,15 @@ if (coursesFaites === true) {
 }
 ```
 
-Avec un tel code, la variable `coursesFaites` renvoie toujours `false`, imaginez la déception de ce pauvre enfant. Il ne tient qu'à nous de fournir un mécanisme pour que le parent assigne `true` à la variable `coursesFaites` si l'enfant a fait les courses.
+Avec un tel code, la variable `coursesFaites` renvoie toujours `false`, imaginez la déception de ce pauvre enfant. Il ne tient qu'à nous de fournir un mécanisme pour que le parent assigne `true` à la variable `coursesFaites` si l'enfant a fait les courses.
 
-> **Note :** Vous pouvez voir une [version plus complète de cet exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html) (ainsi qu'en [version live](http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html).)
+> **Note :** Vous pouvez voir une [version plus complète de cet exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html) (ainsi qu'en [version live](http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html).)
 
 ### else if
 
-Il n'y a qu'une alternative dans l'exemple précédent — mais qu'en est‑il si l'on souhaite plus de choix ?
+Il n'y a qu'une alternative dans l'exemple précédent — mais qu'en est‑il si l'on souhaite plus de choix&nbsp;?
 
-Il existe un moyen d'enchaîner des choix / résultats supplémentaires à `if...else` — en utilisant `else if` entre. Chaque choix supplémentaire nécessite un bloc additionnel à placer entre `if() { ... }` et `else { ... }` — regardez l'exemple suivant plus élaboré, qui pourrait faire partie d'une simple application de prévisions météo:
+Il existe un moyen d'enchaîner des choix / résultats supplémentaires à `if...else` — en utilisant `else if` entre. Chaque choix supplémentaire nécessite un bloc additionnel à placer entre `if() { ... }` et `else { ... }` — regardez l'exemple suivant plus élaboré, qui pourrait faire partie d'une simple application de prévisions météo:
 
 ```html
 <label for="weather">Select the weather type today: </label>
@@ -155,30 +155,30 @@ function setWeather() {
 {{ EmbedLiveSample('else_if', '100%', 100) }}
 
 1.  Ici nous avons l'élément HTML {{htmlelement("select")}} nous permettant de sélectionner divers choix de temps et un simple paragraphe.
-2.  Dans le JavaScript, nous conservons une référence aussi bien à l'élément {{htmlelement("select")}} qu'à l'élément {{htmlelement("p")}}, et ajoutons un écouteur d'évènement à l'élément `<select>` de sorte que la fonction `setWeather()` soit exécutée quand sa valeur change.
-3.  Quand cette fonction est exécutée, nous commençons par assigner à la variable `choice` la valeur actuellement sélectionnée dans l'élément `<select>`. Nous utilisons ensuite une instruction conditionnelle pour montrer différents textes dans le paragraphe en fonction de la valeur de `choice`. Remarquez comment toutes les conditions sont testées avec des blocs `else if() {...}`, mis à part le tout premier testé avec un  `bloc if() {...}`.
-4.  Le tout dernier choix, à l'intérieur du bloc `else {...}`, est simplement une option de "secours" — le code qui s'y trouve ne sera exécuté que si aucune des conditions n'est `true`. Dans ce cas, il faut vider le texte du paragraphe si rien n'est sélectionné, par exemple si un utilisateur décide de resélectionner le texte à substituer « --Choisir-- » présenté au début.
+2.  Dans le JavaScript, nous conservons une référence aussi bien à l'élément {{htmlelement("select")}} qu'à l'élément {{htmlelement("p")}}, et ajoutons un écouteur d'évènement à l'élément `<select>` de sorte que la fonction `setWeather()` soit exécutée quand sa valeur change.
+3.  Quand cette fonction est exécutée, nous commençons par assigner à la variable `choice` la valeur actuellement sélectionnée dans l'élément `<select>`. Nous utilisons ensuite une instruction conditionnelle pour montrer différents textes dans le paragraphe en fonction de la valeur de `choice`. Remarquez comment toutes les conditions sont testées avec des blocs `else if() {...}`, mis à part le tout premier testé avec un `bloc if() {...}`.
+4.  Le tout dernier choix, à l'intérieur du bloc `else {...}`, est simplement une option de "secours" — le code qui s'y trouve ne sera exécuté que si aucune des conditions n'est `true`. Dans ce cas, il faut vider le texte du paragraphe si rien n'est sélectionné, par exemple si un utilisateur décide de resélectionner le texte à substituer «&nbsp;--Choisir--&nbsp;» présenté au début.
 
-> **Note :** Vous trouverez également [cet exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html) (ainsi qu'en [version live](http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html) ici.)
+> **Note :** Vous trouverez également [cet exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html) (ainsi qu'en [version live](http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html) ici.)
 
 ### Une note sur les opérateurs de comparaison
 
 Les opérateurs de comparaison sont utilisés pour tester les conditions dans nos instructions conditionnelles. Nous avons d'abord regardé les opérateurs de comparaison dans notre [Mathématiques de base en JavaScript — nombres et opérateurs](/fr/docs/Learn/JavaScript/First_steps/Math#Opérateurs_de_comparaison) article. Nos choix sont :
 
-- `===` et `!==` — teste si une valeur est identique ou non à une autre.
+- `===` et `!==` — teste si une valeur est identique ou non à une autre.
 - `<` and `>` —teste si une valeur est inférieure ou non à une autre.
 - `<=` and `>=` — teste si une valeur est inférieur ou égal, ou égal à, ou supérieur ou égal à une autre.
 
 > **Note :** Revoyez le contenu du lien précédent si vous voulez vous rafraîchir la mémoire.
 
-Nous souhaitons mentionner à propos des tests des valeurs booléennes (`true`/`false`) un modèle courant que vous rencontrerez souvent. Toute valeur autre que `false`, `undefined`, `null`, `0`, `NaN` ou une chaîne vide  (`''`) renvoie `true` lorsqu'elle est testée dans une structure conditionnelle, vous pouvez donc simplement utiliser un nom de variable pour tester si elle est `true`, ou même si elle existe (c'est-à-dire si elle n'est pas `undefined`).
+Nous souhaitons mentionner à propos des tests des valeurs booléennes (`true`/`false`) un modèle courant que vous rencontrerez souvent. Toute valeur autre que `false`, `undefined`, `null`, `0`, `NaN` ou une chaîne vide  (`''`) renvoie `true` lorsqu'elle est testée dans une structure conditionnelle, vous pouvez donc simplement utiliser un nom de variable pour tester si elle est `true`, ou même si elle existe (c'est-à-dire si elle n'est pas `undefined`).
 Par exemple :
 
 ```js
 const fromage = 'Comté';
 
 if (fromage) {
-  console.log('Ouaips ! Du fromage pour mettre sur un toast.');
+  console.log('Ouaips&nbsp;! Du fromage pour mettre sur un toast.');
 } else {
   console.log('Pas de fromage sur le toast pour vous aujourd\'hui.');
 }
@@ -196,7 +196,7 @@ if (coursesFaites) { // pas besoin d'écrire explicitement '=== true'
 }
 ```
 
-###  if ... else imbriqué
+###  if ... else imbriqué
 
 Il est parfaitement correct d'ajouter une déclaration `if...else` à l'intérieur d'une autre — pour les imbriquer. Par exemple, nous pourrions mettre à jour notre application de prévisions météo pour montrer un autre ensemble de choix en fonction de la température :
 
@@ -205,7 +205,7 @@ if (choice === 'sunny') {
   if (temperature < 86) {
     para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau et ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.';
   } else if (temperature >= 86) {
-    para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! si vous voulez sortir, n\'oubliez pas de mettre de la crème solaire.';
+    para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD&nbsp;! si vous voulez sortir, n\'oubliez pas de mettre de la crème solaire.';
   }
 }
 ```
@@ -216,16 +216,16 @@ Même si tout le code fonctionne ensemble, chaque déclaration `if...else` fonct
 
 Si vous voulez tester plusieurs conditions sans imbriquer des instructions `if...else` , les [opérateurs logiques](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques) pourront vous rendre service. Quand ils sont utilisés dans des conditions, les deux premiers sont représentés comme ci dessous :
 
-- `&&` — AND ; vous permet d'enchaîner deux ou plusieurs expressions de sorte que toutes doivent être individuellement égales à `true` pour que l'enemble de l'expression retourne `true`.
-- `||` — OR ; vous permet d'enchaîner deux ou plusieurs expressions ensemble de sorte qu'il suffit qu'une au plus soit évaluée comme étant  `true` pour que l'ensemble de l'expression renvoie `true`.
+- `&&` — AND&nbsp;; vous permet d'enchaîner deux ou plusieurs expressions de sorte que toutes doivent être individuellement égales à `true` pour que l'enemble de l'expression retourne `true`.
+- `||` — OR&nbsp;; vous permet d'enchaîner deux ou plusieurs expressions ensemble de sorte qu'il suffit qu'une au plus soit évaluée comme étant  `true` pour que l'ensemble de l'expression renvoie `true`.
 
-Pour vous donner un exemple de AND, le morceau de code précedent peut être réécrit ainsi :
+Pour vous donner un exemple de AND, le morceau de code précedent peut être réécrit ainsi&nbsp;:
 
 ```js
 if (choice === 'sunny' && temperature < 86) {
   para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau temps ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.';
 } else if (choice === 'sunny' && temperature >= 86) {
-  para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! Si vous voulez sortir, assurez‑vous d'avoir passé une crème solaire.';
+  para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD&nbsp;! Si vous voulez sortir, assurez‑vous d'avoir passé une crème solaire.';
 }
 ```
 
@@ -241,7 +241,7 @@ if (camionDeGlaces || etatDeLaMaison === 'on fire') {
 }
 ```
 
-Le dernier type d'opérateur logique, NOT, exprimé par l'opérateur `!`,  peut s'utiliser pour nier une expression. Combinons‑le avec OR dans cet exemple :
+Le dernier type d'opérateur logique, NOT, exprimé par l'opérateur `!`,  peut s'utiliser pour nier une expression. Combinons‑le avec OR dans cet exemple :
 
 ```js
 if (!(camionDeGlaces || etatDeLaMaison === 'on fire')) {
@@ -253,7 +253,7 @@ if (!(camionDeGlaces || etatDeLaMaison === 'on fire')) {
 
 Dans cet extrait, si la déclaration avec OR renvoie `true`, l'opérateur NOT va nier l'ensemble : l'expression retournera donc `false`.
 
-Vous pouvez combiner autant d'instructions logiques que vous le souhaitez, quelle que soit la structure. L'exemple suivant n'exécute le code entre accolades que si les deux instructions OR renvoient true, l'instruction AND recouvrante renvoie alors `true` :
+Vous pouvez combiner autant d'instructions logiques que vous le souhaitez, quelle que soit la structure. L'exemple suivant n'exécute le code entre accolades que si les deux instructions OR renvoient true, l'instruction AND recouvrante renvoie alors `true`&nbsp;:
 
 ```js
 if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
@@ -261,7 +261,7 @@ if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
 }
 ```
 
-Une erreur fréquente avec l'opérateur OR dans des instructions conditionnelles est de n'indiquer la variable dont vous testez la valeur qu'une fois, puis de donner une liste de valeurs sensées renvoyer `true` séparées par des || (OR) opérateurs. Par exemple :
+Une erreur fréquente avec l'opérateur OR dans des instructions conditionnelles est de n'indiquer la variable dont vous testez la valeur qu'une fois, puis de donner une liste de valeurs sensées renvoyer `true` séparées par des || (OR) opérateurs. Par exemple&nbsp;:
 
 ```js example-bad
 if (x === 5 || 7 || 10 || 20) {
@@ -269,7 +269,7 @@ if (x === 5 || 7 || 10 || 20) {
 }
 ```
 
-Dans ce cas, la condition dans le `if(...)`sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours `true`. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR :
+Dans ce cas, la condition dans le `if(...)`sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours `true`. Cette condition dit en réalité «&nbsp;si x est égal à 5, ou bien 7 est vrai&nbsp;» — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement&nbsp;! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR&nbsp;:
 
 ```js
 if (x === 5 || x === 7 || x === 10 ||x === 20) {
@@ -279,9 +279,9 @@ if (x === 5 || x === 7 || x === 10 ||x === 20) {
 
 ## Instruction switch
 
-Les Instructions `if...else`  font bien le travail d'aiguiller la programmation selon des conditions, mais elles ne sont pas sans inconvénient. Elles sont principalement adaptées aux cas où vous avez un choix binaire, chacun nécessitant une quantité raisonnable de code à exécuter, et/ou au cas où les conditions sont complexes (par ex. plusieurs opérateurs logiques). Si vous voulez juste fixer la valeur d'une variable à un choix donné ou afficher une déclaration particulière en fonction d'une condition, cette syntaxe peut devenir un peu lourde, surtout si le nombre de choix est important.
+Les Instructions `if...else`  font bien le travail d'aiguiller la programmation selon des conditions, mais elles ne sont pas sans inconvénient. Elles sont principalement adaptées aux cas où vous avez un choix binaire, chacun nécessitant une quantité raisonnable de code à exécuter, et/ou au cas où les conditions sont complexes (par ex. plusieurs opérateurs logiques). Si vous voulez juste fixer la valeur d'une variable à un choix donné ou afficher une déclaration particulière en fonction d'une condition, cette syntaxe peut devenir un peu lourde, surtout si le nombre de choix est important.
 
-Les [instructions switch](/fr/docs/Web/JavaScript/Reference/Instructions/switch) sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec. Voici un peu de pseudo-code, pour vous donner l'idée :
+Les [instructions switch](/fr/docs/Web/JavaScript/Reference/Instructions/switch) sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec. Voici un peu de pseudo-code, pour vous donner l'idée&nbsp;:
 
 ```js
 switch (expression) {
@@ -302,19 +302,19 @@ switch (expression) {
 
 Ici nous avons
 
-1.  Le mot‑clé `switch` suivi de parenthèses.
+1.  Le mot‑clé `switch` suivi de parenthèses.
 2.  Une expression ou une valeur mise entre les parenthèses.
 3.  Le mot‑clé `case` suivi d'une expression ou d'une valeur, et de deux‑points.
 4.  Le code exécuté si l'expression/valeur de `case` correspond à celles de `switch`.
 5.  Une déclaration `break`, suivie d'un point‑virgule. Si le choix précédent correspond à l'expression/valeur, le navigateur va stopper l'exécution du bloc de code ici et continuer après l'instruction **switch**.
 6.  Vous pouvez rajouter autant de **cas** que vous le souhaitez. (points 3–5)
-7.  Le mot‑clé `default`,  suivi d'une même structure de code qu'aux points 3-5, sauf que `default` n'a pas de choix après lui et n'a donc pas besoin de l'instruction `break`  puisqu'il n'y a plus rien à exécuter après ce bloc. C'est l'option `default` qui sera exécutée si aucun choix ne correspond.
+7.  Le mot‑clé `default`,  suivi d'une même structure de code qu'aux points 3-5, sauf que `default` n'a pas de choix après lui et n'a donc pas besoin de l'instruction `break`  puisqu'il n'y a plus rien à exécuter après ce bloc. C'est l'option `default` qui sera exécutée si aucun choix ne correspond.
 
-> **Note :** Vous n'avez pas à inclure la section  `default` — elle peut être omise en toute sécurité s'il n'y a aucune chance que l'expression finisse par égaler une valeur inconnue. À contrario, vous devez l'inclure s'il est possible qu'il y ait des cas inconnus.
+> **Note :** Vous n'avez pas à inclure la section  `default` — elle peut être omise en toute sécurité s'il n'y a aucune chance que l'expression finisse par égaler une valeur inconnue. À contrario, vous devez l'inclure s'il est possible qu'il y ait des cas inconnus.
 
 ### Un exemple de switch
 
-Voyons un exemple concret — nous allons réécrire notre application de prévision météo en utilisant une instruction `switch` à la place :
+Voyons un exemple concret — nous allons réécrire notre application de prévision météo en utilisant une instruction `switch` à la place&nbsp;:
 
 ```html
 <label for="weather">Select the weather type today: </label>
@@ -364,21 +364,21 @@ function setWeather() {
 
 ## Opérateur ternaire
 
-Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'[opérateur ternaire ou conditionnel](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel) est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est `true` et une autre si elle est `false` — elle est utile dans certains cas, et occupe moins de place qu'un bloc `if...else` si votre choix est limité à deux possibilités à choisir via une condition `true`/`false`. Voici le pseudo‑code correspondant :
+Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'[opérateur ternaire ou conditionnel](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel) est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est `true` et une autre si elle est `false` — elle est utile dans certains cas, et occupe moins de place qu'un bloc `if...else` si votre choix est limité à deux possibilités à choisir via une condition `true`/`false`. Voici le pseudo‑code correspondant&nbsp;:
 
     ( condition ) ? exécuter ce code : exécuter celui‑ci à la place
 
-Regardons cet exemple simple :
+Regardons cet exemple simple&nbsp;:
 
 ```js
-let formuleDePolitesse = ( est_anniversaire ) ? 'Bon anniversaire Mme Smith — nous vous souhaitons une belle journée !' : 'Bonjour Mme Smith.';
+let formuleDePolitesse = ( est_anniversaire ) ? 'Bon anniversaire Mme Smith — nous vous souhaitons une belle journée&nbsp;!' : 'Bonjour Mme Smith.';
 ```
 
-Ici, nous avons une variable nommée `est_anniversaire` — si elle est `true`, nous adressons à notre hôte un message de « Bon anniversaire » ; si ce n'est pas le cas, c'est-à-dire si `est_anniversaire` renvoie `false`, nous disons simplement « Bonjour ».
+Ici, nous avons une variable nommée `est_anniversaire` — si elle est `true`, nous adressons à notre hôte un message de «&nbsp;Bon anniversaire&nbsp;»&nbsp;; si ce n'est pas le cas, c'est-à-dire si `est_anniversaire` renvoie `false`, nous disons simplement «&nbsp;Bonjour&nbsp;».
 
 ### Exemple opérateur ternaire
 
-L'opérateur ternaire ne sert pas qu'à définir des valeurs de variables ; vous pouvez aussi exécuter des fonctions, ou des lignes de code — ce que vous voulez. Voici un exemple concret de choix de thème où le style du site est déterminé grâce à un opérateur ternaire.
+L'opérateur ternaire ne sert pas qu'à définir des valeurs de variables&nbsp;; vous pouvez aussi exécuter des fonctions, ou des lignes de code — ce que vous voulez. Voici un exemple concret de choix de thème où le style du site est déterminé grâce à un opérateur ternaire.
 
 ```html
 <label for="theme">Select theme: </label>
@@ -409,33 +409,33 @@ select.onchange = function() {
 
 Nous mettons un élément {{htmlelement('select')}} pour choisir un thème (noir ou blanc), plus un simple élément {{htmlelement('h1')}} pour afficher un titre de site web. Nous avons aussi une fonction `update()`, qui prend deux couleurs en paramètre (entrées). La couleur de fond du site est déterminée par la couleur indiquée dans le premier paramètre fourni, et la couleur du texte par le deuxième.
 
-Nous avons également mis un écouteur d'événement [onchange](/fr/docs/Web/API/GlobalEventHandlers/onchange) qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — `select.value === 'black'`. Si le test renvoie `true`, nous exécutons la fonction `update()` avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie `false`, nous exécutons `update()` avec les paramètres noir et blanc, les couleurs du site seront inversées.
+Nous avons également mis un écouteur d'événement [onchange](/fr/docs/Web/API/GlobalEventHandlers/onchange) qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — `select.value === 'black'`. Si le test renvoie `true`, nous exécutons la fonction `update()` avec les paramètres blanc et noir&nbsp;: cela signifie que le fond sera noir et le texte blanc. S'il renvoie `false`, nous exécutons `update()` avec les paramètres noir et blanc, les couleurs du site seront inversées.
 
 > **Note :** Vous trouverez également cet [exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html) (voyez‑le en [cours d'exécution](http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html) ici aussi.)
 
-## Apprentissage actif : un calendrier simple
+## Apprentissage actif&nbsp;: un calendrier simple
 
-Dans cet exemple nous allons vous aider à finaliser une application de calendrier simple. Dans le code, vous avez :
+Dans cet exemple nous allons vous aider à finaliser une application de calendrier simple. Dans le code, vous avez&nbsp;:
 
 - Un élément {{htmlelement("select")}} permettant à l'utilisateur de choisir un mois.
 - Un pilote d'événement `onchange` pour détecter si la valeur choisie dans le menu `<select>` a été modifiée.
 - Une fonction `createCalendar()` qui trace le calendrier et affiche le mois voulu dans l'élément {{htmlelement("h1")}}.
 
-Vous aurez besoin d'écrire une instruction conditionnelle dans la fonction `onchange`, juste au dessous du commentaire `// AJOUTER LA CONDITION ICI`. Elle doit :
+Vous aurez besoin d'écrire une instruction conditionnelle dans la fonction `onchange`, juste au dessous du commentaire `// AJOUTER LA CONDITION ICI`. Elle doit&nbsp;:
 
 1.  Noter le mois choisi (enregistré dans la variable `choice`. Ce doit être la valeur de l'élément `<select>` après un changement, "Janvier" par exemple).
 2.  Faire en sorte que la variable nommée `days` soit égale au nombre de jours du mois sélectionné. Pour ce faire, examinez le nombre de jours dans chaque mois de l'année. Vous pouvez ignorer les années bissextiles pour les besoins de cet exemple.
 
-Conseils :
+Conseils&nbsp;:
 
-- Utilisez un OR logique pour grouper plusieurs mois ensemble dans une même condition, beaucoup d'entre eux ont le même nombre de jours.
+- Utilisez un OR logique pour grouper plusieurs mois ensemble dans une même condition, beaucoup d'entre eux ont le même nombre de jours.
 - Voyez quel est le nombre de jours le plus courant et utilisez le comme valeur par défaut.
 
 Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton "Réinitialiser". Si vous êtes vraiment bloqué, pressez "Voir la solution".
 
 ```html hidden
 <div class="output" style="height: 500px;overflow: auto;">
-  <label for="month">Choisissez un mois : </label>
+  <label for="month">Choisissez un mois&nbsp;: </label>
   <select id="month">
     <option value="Janvier">Janvier</option>
     <option value="Février">Février</option>
@@ -531,7 +531,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n  var choice = select.value;\n  var days = 31;\n  if(choice === \'February\') {\n    days = 28;\n  } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n    days = 30;\n  }\n\n  createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n  list.innerHTML = \'\';\n  h1.textContent = choice;\n for(var i = 1; i <= days; i++) {\n    var listItem = document.createElement(\'li\');\n    listItem.textContent = i;\n    list.appendChild(listItem);\n  }\n }\n\ncreateCalendar(31,\'January\');';
+var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n var choice = select.value;\n var days = 31;\n if(choice === \'February\') {\n    days = 28;\n  } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n    days = 30;\n  }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(var i = 1; i <= days; i++) {\n    var listItem = document.createElement(\'li\');\n    listItem.textContent = i;\n    list.appendChild(listItem);\n  }\n }\n\ncreateCalendar(31,\'January\');';
 
 textarea.addEventListener('input', updateCode);
 window.addEventListener('load', updateCode);
@@ -539,19 +539,19 @@ window.addEventListener('load', updateCode);
 
 {{ EmbedLiveSample('Apprentissage_actif_un_calendrier_simple', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}
 
-## Activité : plus de choix de couleurs
+## Activité&nbsp;: plus de choix de couleurs
 
-Nous allons reprendre l'exemple de l'opérateur ternaire vu plus haut et transformer cet opérateur ternaire en une directive `switch`  qui nous permettra une plus grande variété de choix pour le site web tout simple. Voyez l'élément {{htmlelement("select")}} — cette fois, il n'y a pas deux options de thème, mais cinq. Il vous faut ajouter une directive `switch` au dessous du commentaire  `// AJOUT D'UNE DIRECTIVE SWITCH` :
+Nous allons reprendre l'exemple de l'opérateur ternaire vu plus haut et transformer cet opérateur ternaire en une directive `switch`  qui nous permettra une plus grande variété de choix pour le site web tout simple. Voyez l'élément {{htmlelement("select")}} — cette fois, il n'y a pas deux options de thème, mais cinq. Il vous faut ajouter une directive `switch` au dessous du commentaire  `// AJOUT D'UNE DIRECTIVE SWITCH`&nbsp;:
 
 - Elle doit accepter la variable `choice` comme expression d'entrée.
 - Pour chaque cas, le choix doit être égal à une des valeurs possibles pouvant être choisies, c'est-à-dire blanc, noir, mauve, jaune ou psychédélique.
-- Chaque cas exécutera la fonction `update()` à laquelle deux valeurs de couleurs seront passées, la première pour le fond, la seconde pour le texte. Souvenez vous que les valeurs de couleurs sont des chaînes ; elle doivent donc être mises entre guillemets.
+- Chaque cas exécutera la fonction `update()` à laquelle deux valeurs de couleurs seront passées, la première pour le fond, la seconde pour le texte. Souvenez vous que les valeurs de couleurs sont des chaînes&nbsp;; elle doivent donc être mises entre guillemets.
 
-Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton « Réinitialiser ». Si vous êtes vraiment bloqué, pressez « Voir la solution ».
+Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton «&nbsp;Réinitialiser&nbsp;». Si vous êtes vraiment bloqué, pressez «&nbsp;Voir la solution&nbsp;».
 
 ```html hidden
 <div class="output" style="height: 300px;">
-  <label for="theme">Choisissez un thème : </label>
+  <label for="theme">Choisissez un thème&nbsp;: </label>
   <select id="theme">
     <option value="white">Blanc</option>
     <option value="black">Noir</option>
@@ -606,7 +606,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-const jsSolution = 'const select = document.querySelector(\'select\');\nlet html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n  let choice = select.value;\n\n  switch(choice) {\n    case \'black\':\n      update(\'black\',\'white\');\n      break;\n    case \'white\':\n      update(\'white\',\'black\');\n      break;\n    case \'purple\':\n      update(\'purple\',\'white\');\n      break;\n    case \'yellow\':\n      update(\'yellow\',\'darkgray\');\n      break;\n    case \'psychedelic\':\n      update(\'lime\',\'purple\');\n      break;\n  }\n}\n\nfunction update(bgColor, textColor) {\n  html.style.backgroundColor = bgColor;\n  html.style.color = textColor;\n}';
+const jsSolution = 'const select = document.querySelector(\'select\');\nlet html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n let choice = select.value;\n\n switch(choice) {\n    case \'black\':\n      update(\'black\',\'white\');\n      break;\n    case \'white\':\n      update(\'white\',\'black\');\n      break;\n    case \'purple\':\n      update(\'purple\',\'white\');\n      break;\n    case \'yellow\':\n      update(\'yellow\',\'darkgray\');\n      break;\n    case \'psychedelic\':\n      update(\'lime\',\'purple\');\n      break;\n  }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}';
 
 textarea.addEventListener('input', updateCode);
 window.addEventListener('load', updateCode);
@@ -616,7 +616,7 @@ window.addEventListener('load', updateCode);
 
 ## Conclusion
 
-C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment ! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément ; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien [contactez‑nous](/fr/Apprendre#Nous_contacter) pour une aide.
+C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment&nbsp;! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément&nbsp;; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien [contactez‑nous](/fr/Apprendre#Nous_contacter) pour une aide.
 
 ## Voir aussi
 
diff --git a/files/fr/learn/javascript/building_blocks/functions/index.md b/files/fr/learn/javascript/building_blocks/functions/index.md
index 9b0e1d4e50..0133dfdfb7 100644
--- a/files/fr/learn/javascript/building_blocks/functions/index.md
+++ b/files/fr/learn/javascript/building_blocks/functions/index.md
@@ -69,7 +69,7 @@ var myNumber = Math.random();
 
 > **Note :** N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin.
 
-Le langage JavaScript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand vous **invoquez** (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript.
+Le langage JavaScript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand vous **invoquez** (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript.
 
 Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette [section antérieure de notre cours](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript) pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur.
 
@@ -83,7 +83,7 @@ Vous n'aurez pas besoin d'apprendre les rouages des objets structurés du JavaSc
 
 ## Fonctions personnalisées
 
-Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple [random-canvas-circles.html](http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html) tiré de l'article [les boucles dans le code](/fr/Apprendre/JavaScript/Building_blocks/Looping_code) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html) complet), nous avons inclus une fonction personnalisée `draw()`qui ressemblait à ça :
+Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple [random-canvas-circles.html](http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html) tiré de l'article [les boucles dans le code](/fr/Apprendre/JavaScript/Building_blocks/Looping_code) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html) complet), nous avons inclus une fonction personnalisée `draw()`qui ressemblait à ça :
 
 ```js
 function draw() {
@@ -97,13 +97,13 @@ function draw() {
 }
 ```
 
-Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement("canvas")}}. À chaque fois que nous voulons faire cela, il suffit d'invoquer la fonction comme suit :
+Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement("canvas")}}. À chaque fois que nous voulons faire cela, il suffit d'invoquer la fonction comme suit :
 
 ```js
 draw();
 ```
 
-au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tout le code qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction `random()` trois fois, comme définie par le code suivant :
+au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tout le code qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction `random()` trois fois, comme définie par le code suivant :
 
 ```js
 function random(number) {
@@ -111,7 +111,7 @@ function random(number) {
 }
 ```
 
-Nous avions besoin de cette fonction car la fonction intégrée du navigateur [Math.random()](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random) génère uniquement un nombre décimal aléatoire compris entre 0 et 1 alors que nous voulions un nombre entier compris entre 0 et un nombre défini.
+Nous avions besoin de cette fonction car la fonction intégrée du navigateur [Math.random()](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random) génère uniquement un nombre décimal aléatoire compris entre 0 et 1 alors que nous voulions un nombre entier compris entre 0 et un nombre défini.
 
 ## Invoquer des fonctions
 
@@ -144,7 +144,7 @@ function() {
 }
 ```
 
-Ceci est une **fonction anonyme** — elle n'a pas de nom ! De plus, elle ne produira pas d'effet par elle-même. Les fonctions anonymes sont généralement utilisées en association avec un gestionnaire d'évènement, comme dans l'exemple suivant qui lance le code inscrit dans la fonction lorsque le bouton associé est cliqué :
+Ceci est une **fonction anonyme** — elle n'a pas de nom ! De plus, elle ne produira pas d'effet par elle-même. Les fonctions anonymes sont généralement utilisées en association avec un gestionnaire d'évènement, comme dans l'exemple suivant qui lance le code inscrit dans la fonction lorsque le bouton associé est cliqué :
 
 ```js
 var myButton = document.querySelector('button');
@@ -209,7 +209,7 @@ Certaines fonctions nécessitent que l'on définisse des **paramètres** lorsqu'
 
 > **Note :** Les paramètres sont parfois appelés arguments, propriétés ou encore attributs.
 
-Par exemple, la fonction intégrée du navigateur [Math.random()](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random) ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 :
+Par exemple, la fonction intégrée du navigateur [Math.random()](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random) ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 :
 
 ```js
 var myNumber = Math.random();
@@ -242,7 +242,7 @@ Parlons un peu de la {{glossary("portée")}} — un concept très important lors
 
 Le plus haut niveau en dehors de toutes vos fonctions est appelé la **portée globale**. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe quelle partie du code.
 
-Le JavaScript est construit de cette façon pour plusieurs raisons —  mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident.
+Le JavaScript est construit de cette façon pour plusieurs raisons —  mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident.
 
 Par exemple, disons que vous avez un fichier HTML qui appelle deux fichiers JavaScript externes, et que les deux ont une variable et une fonction définie qui utilisent le même nom :
 
@@ -271,13 +271,13 @@ function greeting() {
 }
 ```
 
-Les deux fonctions que vous voulez appeler s'appellent `greeting()`, mais vous ne pouvez accéder qu'à la fonction `greeting()` du second fichier `second.js`  — car celui-ci est appliqué au code HTML plus tard dans le code source, de sorte que sa variable et sa fonction écrasent celles du premier fichier `first.js`.
+Les deux fonctions que vous voulez appeler s'appellent `greeting()`, mais vous ne pouvez accéder qu'à la fonction `greeting()` du second fichier `second.js`  — car celui-ci est appliqué au code HTML plus tard dans le code source, de sorte que sa variable et sa fonction écrasent celles du premier fichier `first.js`.
 
 > **Note :** Vous pouvez voir cet exemple [s'exécuter sur GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html) (voir aussi le [code source](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions)).
 
 En conservant des parties de votre code enfermées dans des fonctions, vous évitez de tels problèmes. Cette procédure est considérée comme une bonne pratique.
 
-C'est un peu comme au zoo. Les lions, zèbres, tigres et pingouins sont enfermés dans leurs propres enclos, et n'ont accès qu'aux éléments se trouvant à l'intérieur de leur enclos — de la même manière que la portée des fonctions. S'il leur était possible de pénétrer dans les autres enclos, des problèmes se produiraient. Au mieux, des animaux différents seraient dans l'inconfort au sein d'un habitat étranger — un lion ou un tigre se sentirait très mal dans l'environnement humide et glacé des pingouins. Au pire, les lions et les tigres pourraient essayer de manger les pingouins !
+C'est un peu comme au zoo. Les lions, zèbres, tigres et pingouins sont enfermés dans leurs propres enclos, et n'ont accès qu'aux éléments se trouvant à l'intérieur de leur enclos — de la même manière que la portée des fonctions. S'il leur était possible de pénétrer dans les autres enclos, des problèmes se produiraient. Au mieux, des animaux différents seraient dans l'inconfort au sein d'un habitat étranger — un lion ou un tigre se sentirait très mal dans l'environnement humide et glacé des pingouins. Au pire, les lions et les tigres pourraient essayer de manger les pingouins !
 
 ![](MDN-mozilla-zoo.png)
 
@@ -304,7 +304,7 @@ Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la port�
     output(z);
     ```
 
-    Toutes les deux devraient vous renvoyer un message d'erreur du type : "[ReferenceError: y is not defined](/fr/docs/Web/JavaScript/Reference/Errors/Not_defined)". Pourquoi ? À cause de la portée de la fonction — `y` and `z` sont enfermées dans les fonctions `a()` et `b()`, donc `output()` ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale.
+    Toutes les deux devraient vous renvoyer un message d'erreur du type : "[ReferenceError: y is not defined](/fr/docs/Web/JavaScript/Reference/Errors/Not_defined)". Pourquoi ? À cause de la portée de la fonction — `y` and `z` sont enfermées dans les fonctions `a()` et `b()`, donc `output()` ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale.
 
 5.  Néanmoins, que se passe-t-il losqu'elles sont appelées de l'intérieur d'une autre fonction ? Essayer d'éditer `a()` et `b()` pour qu'elles aient la forme suivante :
 
@@ -350,7 +350,7 @@ Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la port�
     b();
     ```
 
-    Les deux fonctions `a()` et `b()` appelées devraient renvoyer la valeur x — 1. Cela fonctionne très bien car même si la fonction `output()` n'est pas dans la même portée que celle dans laquelle  `x` est définie, `x` est une variable globale et donc elle est disponible dans n'importe quelle partie du code.
+    Les deux fonctions `a()` et `b()` appelées devraient renvoyer la valeur x — 1. Cela fonctionne très bien car même si la fonction `output()` n'est pas dans la même portée que celle dans laquelle  `x` est définie, `x` est une variable globale et donc elle est disponible dans n'importe quelle partie du code.
 
 8.  Pour finir, essayez de mettre à jour le code comme ceci :
 
@@ -373,15 +373,15 @@ Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la port�
     b();
     ```
 
-    Cette fois l'appel de `a()` et `b()` renverra l'erreur "[ReferenceError: z is not defined](/fr/docs/Web/JavaScript/Reference/Errors/Not_defined)"  — parce que l'appel de la fonction `output()` et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction.
+    Cette fois l'appel de `a()` et `b()` renverra l'erreur "[ReferenceError: z is not defined](/fr/docs/Web/JavaScript/Reference/Errors/Not_defined)"  — parce que l'appel de la fonction `output()` et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction.
 
 > **Note :** Ces règles de portée ne s'appliquent pas aux boucles (ex. `for() { ... }`) ni aux instructions conditionnelles (ex. `if() { ... }`) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre.
 
-> **Note :** Le message d'erreur [ReferenceError: "x" is not defined](/fr/docs/Web/JavaScript/Reference/Errors/Not_defined) est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée.
+> **Note :** Le message d'erreur [ReferenceError: "x" is not defined](/fr/docs/Web/JavaScript/Reference/Errors/Not_defined) est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée.
 
 ### Des fonctions à l'intérieur de fonctions
 
-Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction. Ceci est souvent utilisé comme un moyen de garder le code bien organisé — si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions :
+Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction. Ceci est souvent utilisé comme un moyen de garder le code bien organisé — si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions :
 
 ```js
 function myBigFunction() {
@@ -405,7 +405,7 @@ function subFunction3() {
 }
 ```
 
-Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte. L'exemple ci-dessus entraînerait une erreur `ReferenceError: myValue is not defined`, car bien que la valeur `myValue`  est définie dans la même portée que les appels de fonction, elle n'est pas définie dans les définitions de fonctions - le code réel qui est exécuté lorsque les fonctions sont appelées. Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci :
+Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte. L'exemple ci-dessus entraînerait une erreur `ReferenceError: myValue is not defined`, car bien que la valeur `myValue`  est définie dans la même portée que les appels de fonction, elle n'est pas définie dans les définitions de fonctions - le code réel qui est exécuté lorsque les fonctions sont appelées. Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci :
 
 ```js
 function myBigFunction() {
diff --git a/files/fr/learn/javascript/building_blocks/image_gallery/index.md b/files/fr/learn/javascript/building_blocks/image_gallery/index.md
index e95ecbc4a2..969fbb7f74 100644
--- a/files/fr/learn/javascript/building_blocks/image_gallery/index.md
+++ b/files/fr/learn/javascript/building_blocks/image_gallery/index.md
@@ -17,7 +17,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery
 ---
 {{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
 
-Maintenant que nous avons examiné les blocs fondamentaux de construction de JavaScript,  nous allons tester vos connaissances sur les boucles, les fonctions, les conditions et les événements  en vous aidant à créer un élément assez commun que vous verrez  sur de nombreux sites web. Une galerie JavaScript animée.
+Maintenant que nous avons examiné les blocs fondamentaux de construction de JavaScript,  nous allons tester vos connaissances sur les boucles, les fonctions, les conditions et les événements en vous aidant à créer un élément assez commun que vous verrez sur de nombreux sites web. Une galerie JavaScript animée.
 
 <table class="standard-table">
   <tbody>
@@ -25,7 +25,7 @@ Maintenant que nous avons examiné les blocs fondamentaux de construction de Jav
       <th scope="row">Conditions préalables:</th>
       <td>
         Avant de tenter cette évaluation, vous devriez avoir parcouru tous les
-        articles de ce module. 
+        articles de ce module.
       </td>
     </tr>
     <tr>
@@ -42,13 +42,13 @@ Maintenant que nous avons examiné les blocs fondamentaux de construction de Jav
 
 Pour réaliser cette évaluation, vous devez récupérer le fichier [ZIP](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true) et le décompresser quelque par sur votre ordinateur.
 
-Vous pouvez également utiliser un site comme [JSBin](http://jsbin.com/) ou  [Thimble](https://thimble.mozilla.org/) pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments `<script>`/`<style>` dans la page HTML.
+Vous pouvez également utiliser un site comme [JSBin](http://jsbin.com/) ou  [Thimble](https://thimble.mozilla.org/) pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments `<script>`/`<style>` dans la page HTML.
 
 > **Note :** Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page.
 
 ## Résumé du projet
 
-Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript; vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel. Le corps HTML ressemble à ceci:
+Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript; vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel. Le corps HTML ressemble à ceci:
 
 ```html
 <h1>Image gallery example</h1>
@@ -70,7 +70,7 @@ L'exemple ressemble à ceci:
 
 Les parties les plus intéressantes du fichier CSS de l'exemple:
 
-- Positionnez les trois éléments en absolu à l’intérieur du `full-img <div>`: le `<img>` dans lequel l’image est affichée grandeur nature, un  `<div>` vide dimensionné à la même taille que le `<img>` et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant à l'image via une couleur d'arrière-plan semi-transparente), et un bouton `<button>`qui est utilisé pour contrôler l'effet d'assombrissement.
+- Positionnez les trois éléments en absolu à l’intérieur du `full-img <div>`: le `<img>` dans lequel l’image est affichée grandeur nature, un  `<div>` vide dimensionné à la même taille que le `<img>` et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant à l'image via une couleur d'arrière-plan semi-transparente), et un bouton `<button>`qui est utilisé pour contrôler l'effet d'assombrissement.
 - Réglez la largeur des images à l'intérieur de `thumb-bar <div>`(appelées images miniatures) à 20% et faites un float à gauche pour qu'elles soient côte-à-côte sur une ligne.
 
 Votre JavaScript doit:
@@ -92,7 +92,7 @@ Nous vous avons fourni des lignes qui storent une référence à `thumb-bar <div
 Vous avez besoin de:
 
 1.  Ajouter votre code en-dessous du commentaire _Looping through images_ à l'intérieur d'une boucle qui itère sur les 5 images — vous n'avez besoin que de 5 itérations, chacune représentant une image.
-2.  Remplacez, pour chaque itération,  la valeur `xxx` de l'emplacement par une chaîne de caractères qui correspond au chemin de l'image considérée. Il faut définir la valeur de l'attribut `src` dans chaque cas. Gardez à l'esprit que, à chaque fois, l'image est dans le répertoire des images et que son nom est `pic1.jpg`, `pic2.jpg`, etc.
+2.  Remplacez, pour chaque itération,  la valeur `xxx` de l'emplacement par une chaîne de caractères qui correspond au chemin de l'image considérée. Il faut définir la valeur de l'attribut `src` dans chaque cas. Gardez à l'esprit que, à chaque fois, l'image est dans le répertoire des images et que son nom est `pic1.jpg`, `pic2.jpg`, etc.
 
 ### Ajout d'un gestionnaire onclick à chaque miniature
 
@@ -107,10 +107,10 @@ Vous avez besoin de:
 Il ne reste que notre `<button>` d'assombrissement — nous vous avons fourni une ligne qui stocke une référence au `<button>` dans une variable appelée `btn`. Vous devez ajouter un gestionnaire `onclick` qui:
 
 1.  Vérifie la classe appliquée à `<button>` — à nouveau, vous pouvez utiliser `getAttribute()`.
-2.  Si le nom de classe est `"dark"`, changer la classe du `<button>` pour `"light"` (avec [`setAttribute()`](/fr/docs/Web/API/Element/setAttribute)), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement `<div>` par `"rgba(0,0,0,0.5)"`.
+2.  Si le nom de classe est `"dark"`, changer la classe du `<button>` pour `"light"` (avec [`setAttribute()`](/fr/docs/Web/API/Element/setAttribute)), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement `<div>` par `"rgba(0,0,0,0.5)"`.
 3.  Si le nom de classe n'est pas `"dark"`, changer la classe du `<button>` pour `"dark"`, son contenu textuel par "Darken", et le {{cssxref("background-color")}} du voile d'assombrissement `<div>` par `"rgba(0,0,0,0)"`.
 
-Les lignes suivantes fournissent une base pour réaliser les changements  décrits aux points 2 et 3.
+Les lignes suivantes fournissent une base pour réaliser les changements décrits aux points 2 et 3.
 
 ```js
 btn.setAttribute('class', xxx);
diff --git a/files/fr/learn/javascript/building_blocks/index.md b/files/fr/learn/javascript/building_blocks/index.md
index ddf8519680..cf00276c10 100644
--- a/files/fr/learn/javascript/building_blocks/index.md
+++ b/files/fr/learn/javascript/building_blocks/index.md
@@ -15,7 +15,7 @@ original_slug: Apprendre/JavaScript/Building_blocks
 ---
 {{JsSidebar}}{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}
 
-Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues telles que les conditions, les boucles, les fonctions et les événements. Nous avons déjà vu ces notions dans le cours mais sans nous y attarder, nous allons maintenant les étudier en détails.
+Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues telles que les conditions, les boucles, les fonctions et les événements. Nous avons déjà vu ces notions dans le cours mais sans nous y attarder, nous allons maintenant les étudier en détails.
 
 ## Prérequis
 
@@ -28,7 +28,7 @@ Avant de commencer ce module, vous devriez connaître les bases du [HTML](/fr/Ap
 - [Prendre des décisions dans votre code — les conditions](/fr/docs/Learn/JavaScript/Building_blocks/conditionals)
   - : Quelque soit le langage de programmation, notre programme doit prendre des décisions et effectuer des actions différentes selon les valeurs traitées. Dans un jeu par exemple, si le nombre de vies du joueur est égal à 0, le jeu s'achève. Sur le même principe, une application météo affiche un fond d'aube si elle est lancée le matin, des étoiles et la Lune si, au contraire, elle est lancée la nuit. Dans cet article, nous allons voir comment les structures conditionnelles fonctionnent en JavaScript.
 - [Les boucles](/fr/Apprendre/JavaScript/Building_blocks/Looping_code)
-  - : Parfois une action doit être réalisée plusieurs fois d'affilée. Par exemple, parcourir une liste de noms. En programmation, les boucles effectuent ce genre de tâches à merveille. Ici, nous allons examiner les structures de boucles en JavaScript.
+  - : Parfois une action doit être réalisée plusieurs fois d'affilée. Par exemple, parcourir une liste de noms. En programmation, les boucles effectuent ce genre de tâches à merveille. Ici, nous allons examiner les structures de boucles en JavaScript.
 - [Les fonctions — réutiliser des blocs de code](/fr/docs/Learn/JavaScript/Building_blocks/Functions)
   - : Un autre concept essentiel en programmation est celui de **fonctions.** Les **fonctions** permettent de définir un morceau de code réalisant une tâche particulière qui pourra être appelé ultérieurement dans le reste du programme par une simple ligne, ce qui évite d'écrire plusieurs fois le même code. Dans cet article, nous allons voir les concepts qui se cachent derrière les fonctions tels que la syntaxe de base, la définition et l'appel d'une fonction, sa portée et ses paramètres.
 - [Créez votre propre fonction](/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function)
diff --git a/files/fr/learn/javascript/building_blocks/looping_code/index.md b/files/fr/learn/javascript/building_blocks/looping_code/index.md
index db4470f17c..69f1989a43 100644
--- a/files/fr/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/fr/learn/javascript/building_blocks/looping_code/index.md
@@ -245,11 +245,11 @@ Cela nous donne la sortie suivante :
 Cela montre une boucle utilisée pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici :
 
 1.  L'itérateur, `i`, commence à `0` (`let i = 0`).
-2.  On lui a demandé de s'exécuter jusqu'à ce que sa valeur ne soit plus inférieure à la longueur du tableau chats. C'est important  — la condition de sortie montre la condition à laquelle la boucle continue de s'exécuter. C'est à dire dans ce cas, tant que `i < chats.length` est vrai, la boucle continuera à s'exécuter.
-3.  Au sein de la boucle, on concatène les élèments présents dans cette boucle (`cats[i]` est `cats[quelque soit la valeur de i lors de l'iteration]`) avec une virgule et un espace, à la fin de la variable `info`. Donc :
+2.  On lui a demandé de s'exécuter jusqu'à ce que sa valeur ne soit plus inférieure à la longueur du tableau chats. C'est important  — la condition de sortie montre la condition à laquelle la boucle continue de s'exécuter. C'est à dire dans ce cas, tant que `i < chats.length` est vrai, la boucle continuera à s'exécuter.
+3.  Au sein de la boucle, on concatène les élèments présents dans cette boucle (`cats[i]` est `cats[quelque soit la valeur de i lors de l'iteration]`) avec une virgule et un espace, à la fin de la variable `info`. Donc :
 
     1.  Pendant le premier lancement, `i = 0`, donc `cats[0] + ', '` sera concaténé à ("Bill, ")
-    2.  Au second lancement, `i = 1`, donc `cats[1] + ', '` et sera concaténé à  ("Jeff, ")
+    2.  Au second lancement, `i = 1`, donc `cats[1] + ', '` et sera concaténé à  ("Jeff, ")
     3.  Et ainsi de suite. Aprés chaque tour de boucle, 1 est ajouté à `i` (`i++`), et alors le processus recommence encore.
 
 4.  Quand `i` devient égal à `cats.length`, la boucle s'arrête, et le navigateur va bouger au prochain bout de code aprés la boucle.
@@ -276,13 +276,13 @@ for (let i = 0; i < cats.length; i++) {
 
 > **Note :** Vous pouvez trouver cet exemple de code sur [GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html) (et aussi le [voir en ligne](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html)).
 
-> **Attention :** Avec for — comme avec toutes les boucles  — vous devez vous assurer que l'initialiseur est itéré de sorte qu'il finisse par atteindre la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une **boucle infinie.**
+> **Attention :** Avec for — comme avec toutes les boucles  — vous devez vous assurer que l'initialiseur est itéré de sorte qu'il finisse par atteindre la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une **boucle infinie.**
 
 ## Quitter une boucle avec break
 
 Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction [break](/fr/docs/Web/JavaScript/Reference/Instructions/break). Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les [instructions switch](/fr/Apprendre/JavaScript/Building_blocks/conditionals#Instruction_switch)&nbsp;: lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle.
 
-C'est la même chose avec les boucles – un `break` quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit.
+C'est la même chose avec les boucles – un `break` quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit.
 
 Supposons que nous voulions effectuer une recherche parmi une liste de contacts et de numéros de téléphone et que nous ne renvoyions que le nombre que nous voulions trouver. Tout d'abord, du HTML simple - un texte {{htmlelement ("input")}} nous permettant d'entrer un nom à rechercher, un élément {{htmlelement ("button")}} pour soumettre une recherche, et un {{htmlelement ("p")}} élément pour afficher les résultats dans :
 
@@ -364,7 +364,7 @@ bouton.addEventListener('click', function() {
 {{EmbedLiveSample('', '100%', 100)}}
 
 1.  Tout d'abord, nous avons quelques définitions de variables — nous avons un tableau d'informations de contact, avec chaque élément étant une chaîne contenant un nom et un numéro de téléphone séparés par deux points.
-2.  Ensuite, nous attachons un écouteur d'événement au bouton (`bouton`), de sorte que quand il est pressé, du code est exécuté pour effectuer la recherche et renvoyer les résultats.
+2.  Ensuite, nous attachons un écouteur d'événement au bouton (`bouton`), de sorte que quand il est pressé, du code est exécuté pour effectuer la recherche et renvoyer les résultats.
 3.  Nous stockons la valeur saisie dans l'input dans une variable appelée `searchName`, , avant de vider l'input et le recentrer, prêt pour la recherche suivante.
 4.  Maintenant sur la partie intéressante, la boucle for :
 
@@ -510,7 +510,7 @@ do {
 } while (i < cats.length);
 ```
 
-> **Note :** Encore, cela fonctionne toujours comme prévu — regardez le ici [GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) ([Voir en ligne](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html) le code complet).
+> **Note :** Encore, cela fonctionne toujours comme prévu — regardez le ici [GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) ([Voir en ligne](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html) le code complet).
 
 > **Attention :** Avec while et do ... while – comme avec toutes les boucles – vous devez vous assurer que l'initialiseur est itéré pour qu'il atteigne finalement la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une **boucle infinie.**
 
@@ -588,7 +588,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-let jsSolution = 'let output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i >= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n  para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}';
+let jsSolution = 'let output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i >= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}';
 let solutionEntry = jsSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -645,11 +645,11 @@ Dans cet exercice, nous vous proposons de prendre une liste d'invités stockée
 
 Plus précisément, nous attendons de vous :
 
-- Que vous écriviez une boucle qui créé une itération de 0 jusqu'à la fin du tableau `people`. Vous aurez besoin de commencer avec un initialiseur type `let i = 0;` , mais quelle sera la condition de sortie
+- Que vous écriviez une boucle qui créé une itération de 0 jusqu'à la fin du tableau `people`. Vous aurez besoin de commencer avec un initialiseur type `let i = 0;` , mais quelle sera la condition de sortie
 - Au cours de chaque itération, vérifiez si l'élément actuel du tableau est "Phil" ou "Lola" en utilisant une déclaration conditionnelle.
 
-  - Si tel est le cas, concaténez l'élément à la fin du paragraphe `refused` du `textContent`, suivi d'une virgule et d'un espace.
-  - Dans le cas contraire, concaténez l'élément à la fin du paragraphe `admitted`  du `textContent` suivi d'une virgule et d'un espace.
+  - Si tel est le cas, concaténez l'élément à la fin du paragraphe `refused` du `textContent`, suivi d'une virgule et d'un espace.
+  - Dans le cas contraire, concaténez l'élément à la fin du paragraphe `admitted`  du `textContent` suivi d'une virgule et d'un espace.
 
 Nous vous avons déjà fourni les éléments suivants :
 
@@ -796,7 +796,7 @@ textarea.onkeyup = function(){
 
 ## Quel type de boucle utiliser ?
 
-Pour des usages basiques les boucles `for`, `while`, et `do...while` sont largement interchangeables. Elles résolvent toutes le même problème et celle que vous utiliserez dépendra de vos préférences personnelles — celle que vous trouverez le plus facile à mémoriser ou la plus intuitive. Jetons-y un coup d'oeil à nouveau.
+Pour des usages basiques les boucles `for`, `while`, et `do...while` sont largement interchangeables. Elles résolvent toutes le même problème et celle que vous utiliserez dépendra de vos préférences personnelles — celle que vous trouverez le plus facile à mémoriser ou la plus intuitive. Jetons-y un coup d'oeil à nouveau.
 
 Premièrement `for`:
 
diff --git a/files/fr/learn/javascript/building_blocks/return_values/index.md b/files/fr/learn/javascript/building_blocks/return_values/index.md
index f801f4c918..9f008d39f5 100644
--- a/files/fr/learn/javascript/building_blocks/return_values/index.md
+++ b/files/fr/learn/javascript/building_blocks/return_values/index.md
@@ -16,7 +16,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Return_values
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
 
-Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions: les valeurs de retour. Certaines fonctions ne retournent pas de valeur significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela dans cet article.
+Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions: les valeurs de retour. Certaines fonctions ne retournent pas de valeur significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela dans cet article.
 
 <table class="standard-table">
   <tbody>
@@ -43,7 +43,7 @@ Il y a un concept essentiel que nous devons aborder dans ce cours, pour être co
 
 ## Qu'est-ce que les valeurs de retour?
 
-**Les valeurs de retour** sont, comme leur nom l'indique, les valeurs retournées par une fonction après son exécution. Vous en avez déjà rencontré plusieurs fois sans y avoir pensé explicitement. Revenons à notre code:
+**Les valeurs de retour** sont, comme leur nom l'indique, les valeurs retournées par une fonction après son exécution. Vous en avez déjà rencontré plusieurs fois sans y avoir pensé explicitement. Revenons à notre code:
 
 ```js
 var myText = 'I am a string';
@@ -54,17 +54,17 @@ console.log(newString);
 // a new string with the replacement made
 ```
 
-Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction [replace()](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace) sur la chaîne de caractères `myText` , et lui passons deux paramètres: la chaîne à trouver ('string'), et la chaîne de remplacement ('sausage'). Lorsque cette fonction a fini de s'exécuter, elle retourne une valeur qui est une chaîne avec le remplacement effectué. Dans le code ci-dessus, nous sauvegardons cette valeur avec la variable newString.
+Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction [replace()](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace) sur la chaîne de caractères `myText` , et lui passons deux paramètres: la chaîne à trouver ('string'), et la chaîne de remplacement ('sausage'). Lorsque cette fonction a fini de s'exécuter, elle retourne une valeur qui est une chaîne avec le remplacement effectué. Dans le code ci-dessus, nous sauvegardons cette valeur avec la variable newString.
 
-Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée [Valeur retournée](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value). Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible.
+Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée [Valeur retournée](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value). Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible.
 
-Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme `void` ou `undefined` dans de tels cas). Par exemple, dans la fonction [`displayMessage()`](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50) construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout !
+Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme `void` ou `undefined` dans de tels cas). Par exemple, dans la fonction [`displayMessage()`](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50) construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout&nbsp;!
 
 Généralement, une valeur de retour est utilisée lorsque la fonction est une étape intermédiaire dans un programme. Ces valeurs intermédiaires doivent être d'abord évaluées par une fonction, le résultat renvoyé pourra être ensuite utilisé dans l'étape suivante du programme.
 
 ### Utiliser des valeurs de retour dans vos fonctions
 
-Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef [return](/fr/docs/Web/JavaScript/Reference/Statements/return) . Nous avons vu son utilisation dans l'exemple [random-canvas-circles.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html). Notre fonction `draw()` dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}:
+Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef [return](/fr/docs/Web/JavaScript/Reference/Statements/return) . Nous avons vu son utilisation dans l'exemple [random-canvas-circles.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html). Notre fonction `draw()` dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}:
 
 ```js
 function draw() {
@@ -78,7 +78,7 @@ function draw() {
 }
 ```
 
-À chaque itération de la boucle, on fait trois fois appel à la fonction `random()` pour générer respectivement une valeur aléatoire pour les coordonnées x et y du cercle, ainsi que pour son rayon. La fonction `random()` prend un seul paramètre — un nombre entier — et elle retourne un nombre entier aléatoire compris entre 0 et ce nombre. Voici à quoi cela ressemble:
+À chaque itération de la boucle, on fait trois fois appel à la fonction `random()` pour générer respectivement une valeur aléatoire pour les coordonnées x et y du cercle, ainsi que pour son rayon. La fonction `random()` prend un seul paramètre — un nombre entier — et elle retourne un nombre entier aléatoire compris entre 0 et ce nombre. Voici à quoi cela ressemble:
 
 ```js
 function random(number) {
@@ -103,7 +103,7 @@ La fonction retourne le résultat de `Math.floor(Math.random()*number)` chaque f
 ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
 ```
 
-et que les trois appels `random()` retournent respectivement les valeurs 500, 200 et 35, la ligne pourrait être écrite de cette façon:
+et que les trois appels `random()` retournent respectivement les valeurs 500, 200 et 35, la ligne pourrait être écrite de cette façon:
 
 ```js
 ctx.arc(500, 200, 35, 0, 2 * Math.PI);
@@ -115,8 +115,8 @@ Les fonctions de la ligne sont évaluées en premières, et leurs valeurs de ret
 
 Allons-y, écrivons nos propres fonctions avec des valeurs de retour.
 
-1.  Pour commencer, faites une copie locale du fichier [function-library.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html) à partir de GitHub. Il s'agit d'une simple page HTML contenant un champ texte  {{htmlelement("input")}} et un paragraphe. Il y a également un élément {{htmlelement("script")}} qui référence ces éléments HTML dans deux variables. Cette page vous permettra d'entrer un nombre dans le champ texte, et affichera, dans le paragraphe au-dessous, différents nombres en lien avec celui entré.
-2.  Ajoutons quelques fonctions dans `<script>` . Sous les deux lignes existantes de JavaScript, ajoutez les définitions des fonctions suivantes:
+1.  Pour commencer, faites une copie locale du fichier [function-library.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html) à partir de GitHub. Il s'agit d'une simple page HTML contenant un champ texte  {{htmlelement("input")}} et un paragraphe. Il y a également un élément {{htmlelement("script")}} qui référence ces éléments HTML dans deux variables. Cette page vous permettra d'entrer un nombre dans le champ texte, et affichera, dans le paragraphe au-dessous, différents nombres en lien avec celui entré.
+2.  Ajoutons quelques fonctions dans `<script>` . Sous les deux lignes existantes de JavaScript, ajoutez les définitions des fonctions suivantes:
 
     ```js
     function squared(num) {
@@ -137,7 +137,7 @@ Allons-y, écrivons nos propres fonctions avec des valeurs de retour.
     }
     ```
 
-    Les fonctions `squared()` et `cubed()` sont plutôt évidentes, elle retournent le carré et le cube du nombre donné en paramètre. La fonction `factorial()` retourne la [factorielle](https://en.wikipedia.org/wiki/Factorial) du nombre donné.
+    Les fonctions `squared()` et `cubed()` sont plutôt évidentes, elle retournent le carré et le cube du nombre donné en paramètre. La fonction `factorial()` retourne la [factorielle](https://en.wikipedia.org/wiki/Factorial) du nombre donné.
 
 3.  Ensuite, nous allons ajouter un moyen d'afficher des informations sur le nombre entré dans le champ texte. Ajoutez le gestionnaire d'événement suivant à la suite des fonctions:
 
@@ -154,33 +154,33 @@ Allons-y, écrivons nos propres fonctions avec des valeurs de retour.
     }
     ```
 
-    Ici nous créons un gestionnaire d'événement `onchange` qui s'exécute chaque fois que l'événement `change` se déclenche sur le champ de saisie de texte, c'est-à-dire lorsqu'une nouvelle valeur est entrée dans le champ de saisie de texte, puis qu'elle est soumise (par exemple lorsqu'on entre une valeur puis qu'on appuie sur Tab). Quand cette fonction anonyme s'exécute, la valeur entrée dans le champ de saisie est stockée dans la variable `num`.
+    Ici nous créons un gestionnaire d'événement `onchange` qui s'exécute chaque fois que l'événement `change` se déclenche sur le champ de saisie de texte, c'est-à-dire lorsqu'une nouvelle valeur est entrée dans le champ de saisie de texte, puis qu'elle est soumise (par exemple lorsqu'on entre une valeur puis qu'on appuie sur Tab). Quand cette fonction anonyme s'exécute, la valeur entrée dans le champ de saisie est stockée dans la variable `num`.
 
-    Ensuite, nous faisons un test: Si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression `isNaN(num)` retourne `true`. Nous utilisons la fonction [isNaN()](/fr/docs/Web/JavaScript/Reference/Global_Objects/isNaN) pour vérifier si la valeur `num` est un nombre — si c'est le cas, elle retourne `false`, sinon `true`.
+    Ensuite, nous faisons un test: Si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression `isNaN(num)` retourne `true`. Nous utilisons la fonction [isNaN()](/fr/docs/Web/JavaScript/Reference/Global_Objects/isNaN) pour vérifier si la valeur `num` est un nombre — si c'est le cas, elle retourne `false`, sinon `true`.
 
-    Si le test retourne `false`, la valeur `num` est un nombre, alors une phrase s'affiche dans le paragraphe indiquant le carré, le cube et la factorielle du nombre. La phrase appelle les fonctions `squared()`, `cubed()` et `factorial()` pour obtenir les valeurs désirées.
+    Si le test retourne `false`, la valeur `num` est un nombre, alors une phrase s'affiche dans le paragraphe indiquant le carré, le cube et la factorielle du nombre. La phrase appelle les fonctions `squared()`, `cubed()` et `factorial()` pour obtenir les valeurs désirées.
 
 4.  Sauvegardez votre code, chargez-le dans votre navigateur et testez-le.
 
-> **Note :** Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la [Version final sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html) (également [Démonstration en direct](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html)), ou demandez-nous de l'aide.
+> **Note :** Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la [Version final sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html) (également [Démonstration en direct](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html)), ou demandez-nous de l'aide.
 
 À ce stade, nous aimerions que vous essayiez d'écrire quelque fonctions de votre choix et que vous les ajoutiez à la bibliothèque. Que diriez-vous des racines carré et cubique du nombre, ou de la circonférence d'un cercle de rayon `num`?
 
-Cet exercice a soulevé quelques points importants en plus de nous avoir permis d'étudier l'utilisation de la déclaration `return`. De plus, nous avons:
+Cet exercice a soulevé quelques points importants en plus de nous avoir permis d'étudier l'utilisation de la déclaration `return`. De plus, nous avons:
 
-- Examiné un autre exemple d'écriture de gestion d'erreurs dans nos fonctions. C'est une bonne idée de vérifier que tous les paramètres nécessaires ont été fournis, avec les bons types de données, et, s'ils sont facultatifs, qu'une valeur par défaut est fournie. De cette façon, votre programme sera moins susceptible de lever des erreurs.
-- Pensé à créer une bibliothèque de fonctions. À mesure que vous avancerez dans votre carrière de développeur, vous recommencerez les mêmes choses encore et encore. C'est une bonne idée de commencer à créer votre propre bibliothèque de fonctions utilitaires que vous utilisez très souvent — vous pouvez ensuite copier ces fonctions dans votre nouveau code, ou même utiliser la bibliothèque dans les pages HTML où vous en avez besoin.
+- Examiné un autre exemple d'écriture de gestion d'erreurs dans nos fonctions. C'est une bonne idée de vérifier que tous les paramètres nécessaires ont été fournis, avec les bons types de données, et, s'ils sont facultatifs, qu'une valeur par défaut est fournie. De cette façon, votre programme sera moins susceptible de lever des erreurs.
+- Pensé à créer une bibliothèque de fonctions. À mesure que vous avancerez dans votre carrière de développeur, vous recommencerez les mêmes choses encore et encore. C'est une bonne idée de commencer à créer votre propre bibliothèque de fonctions utilitaires que vous utilisez très souvent — vous pouvez ensuite copier ces fonctions dans votre nouveau code, ou même utiliser la bibliothèque dans les pages HTML où vous en avez besoin.
 
 ## Conclusion
 
 Nous l'avons vu, les fonctions sont amusantes, très utiles et, bien qu'il y ait beaucoup à dire en termes de syntaxe et de fonctionnalités, elles sont assez compréhensibles si elles sont étudiés correctement.
 
-Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou [contactez-nous](/fr/Learn#Contact_us) pour obtenir de l'aide.
+Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou [contactez-nous](/fr/Learn#Contact_us) pour obtenir de l'aide.
 
 ## Voir aussi
 
-- [Fonctions  en profondeur](/fr/docs/Web/JavaScript/Reference/Functions) — Un guide détaillé couvrant des information plus avancées sur les fonctions.
-- [Fonction Callback en JavaScript](https://www.impressivewebs.com/callback-functions-javascript/) — Une façon courante en JavaScript consiste à passer une fonction à une autre en tant qu'argument, qui est alors appelée à l'intérieur de la première fonction.  Cela va au delà de la portée de ce cours, mais mériterait d'être étudier rapidement.
+- [Fonctions en profondeur](/fr/docs/Web/JavaScript/Reference/Functions) — Un guide détaillé couvrant des information plus avancées sur les fonctions.
+- [Fonction Callback en JavaScript](https://www.impressivewebs.com/callback-functions-javascript/) — Une façon courante en JavaScript consiste à passer une fonction à une autre en tant qu'argument, qui est alors appelée à l'intérieur de la première fonction. Cela va au delà de la portée de ce cours, mais mériterait d'être étudier rapidement.
 
 {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
 
diff --git a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.md
index 5940cfeb39..3ce3ca510d 100644
--- a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.md
+++ b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.md
@@ -17,7 +17,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage
 
 {{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
 
-Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir.
+Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir.
 
 <table class="standard-table">
   <tbody>
@@ -50,30 +50,30 @@ Les navigateurs web modernes permettent aux sites web de stocker des données su
 
 Ailleurs dans la zone d'apprentissage de MDN, nous avons parlé de la différence entre les [sites statiques](/fr/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites) et les [sites dynamiques](/fr/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites) — ces derniers stockent des données [côté serveur](/fr/docs/Learn/Server-side) en utilisant une base de données. Ensuite, ils exécutent du code pour récupérer les données et les insérer dans des templates de page statique. Finalement, le HTML résultant est envoyé au client, qui est alors affiché par le navigateur de l'utilisateur.
 
-Le stockage côté client fonctionne sur des principes similaires, mais pour une utilisation différente. Le stockage côté client repose sur des APIs JavaScript qui permettent de stocker des données sur la machine de l'utilisateur et de les récupérer au besoin. Cela peut se révéler utile dans différents cas comme :
+Le stockage côté client fonctionne sur des principes similaires, mais pour une utilisation différente. Le stockage côté client repose sur des APIs JavaScript qui permettent de stocker des données sur la machine de l'utilisateur et de les récupérer au besoin. Cela peut se révéler utile dans différents cas comme :
 
 - Personnaliser les préférences du site (par exemple, afficher des widgets personnalisés selon le choix de l'utilisateur, changer le thème du site ou la taille de la police).
 - Enregistrer les activités sur le site (comme le contenu d'un panier d'achat d'une session précédente, ou encore se souvenir si l'utilisateur s'est déjà connecté).
 - Sauvegarder des données et ressources localement pour pouvoir accéder au site plus rapidement ou même sans connexion réseau.
 - Sauvegarder des documents générés par l'application pour une utilisation hors ligne.
 
-Souvent, le stockage côté client et côté serveur sont utilisés ensemble. Par exemple, vous pouvez télécharger à partir d'une base de données côté serveur une série de fichiers mp3 utilisés par un site web (comme un jeu ou une application de musique) vers une base de données côté client et ainsi pouvoir les lire quand vous le voulez. Avec cette stratégie, l'utilisateur n'a à télécharger le fichier qu'une seule fois — les visites suivantes, ils sont récupérés à partir de la base de données locale.
+Souvent, le stockage côté client et côté serveur sont utilisés ensemble. Par exemple, vous pouvez télécharger à partir d'une base de données côté serveur une série de fichiers mp3 utilisés par un site web (comme un jeu ou une application de musique) vers une base de données côté client et ainsi pouvoir les lire quand vous le voulez. Avec cette stratégie, l'utilisateur n'a à télécharger le fichier qu'une seule fois — les visites suivantes, ils sont récupérés à partir de la base de données locale.
 
-> **Note :** La quantité de données que l'on peut stocker à l'aide des APIs de stockage côté client est limitée (limite par API et limite globale), la limite exacte dépend du navigateur et des configurations. Voir [Limites de stockage du navigateur et critères d'éviction](/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria) pour plus d'informations.
+> **Note :** La quantité de données que l'on peut stocker à l'aide des APIs de stockage côté client est limitée (limite par API et limite globale), la limite exacte dépend du navigateur et des configurations. Voir [Limites de stockage du navigateur et critères d'éviction](/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria) pour plus d'informations.
 
 ### À l'ancienne : les cookies
 
 Le concept de stockage côté client existe depuis longtemps. Au début du web, les sites utilisaient des [cookies](/fr/docs/Web/HTTP/Cookies) pour stocker des informations et personnaliser l'expérience utilisateur. C'est la méthode de stockage côté client la plus couramment utilisée et la plus ancienne.
 
-De par leur histoire, les cookies souffrent d'un certain nombre de problèmes — tant techniques qu'au niveau de l'expérience utilisateur. Ces problèmes sont suffisamment importants pour imposer un message d'information aux utilisateurs habitant en Europe lors de leur première visite si le site utilise des cookies pour stocker des informations sur eux. Cela est dû à une loi de l'Union Européenne connue sous le nom de [directive Cookie](/fr/docs/Web/HTTP/Cookies#EU_cookie_directive).
+De par leur histoire, les cookies souffrent d'un certain nombre de problèmes — tant techniques qu'au niveau de l'expérience utilisateur. Ces problèmes sont suffisamment importants pour imposer un message d'information aux utilisateurs habitant en Europe lors de leur première visite si le site utilise des cookies pour stocker des informations sur eux. Cela est dû à une loi de l'Union Européenne connue sous le nom de [directive Cookie](/fr/docs/Web/HTTP/Cookies#EU_cookie_directive).
 
 ![](cookies-notice.png)
 
-Pour ces raisons, nous ne verrons pas dans cet article comment utiliser les cookies. Entre le fait qu'ils sont dépassés, les [problèmes de sécurité](/fr/docs/Web/HTTP/Cookies#Security) qu'ils présentent et l'incapacité de stocker des données complexes, les cookies ne sont pas la meilleure manière pour stocker des données. Il y a de meilleures alternatives, modernes, permettant de stocker des données variées sur l'ordinateur de l'utilisateur.
+Pour ces raisons, nous ne verrons pas dans cet article comment utiliser les cookies. Entre le fait qu'ils sont dépassés, les [problèmes de sécurité](/fr/docs/Web/HTTP/Cookies#Security) qu'ils présentent et l'incapacité de stocker des données complexes, les cookies ne sont pas la meilleure manière pour stocker des données. Il y a de meilleures alternatives, modernes, permettant de stocker des données variées sur l'ordinateur de l'utilisateur.
 
-Le seul avantage des cookies est qu'ils sont supportés par des navigateurs anciens : si votre projet requiert le support de navigateurs obsolètes (comme Internet Explorer 8 et inférieur), les cookies peuvent se révéler utiles. Pour la plupart des projets, vous ne devriez pas avoir besoin d'y recourir.
+Le seul avantage des cookies est qu'ils sont supportés par des navigateurs anciens : si votre projet requiert le support de navigateurs obsolètes (comme Internet Explorer 8 et inférieur), les cookies peuvent se révéler utiles. Pour la plupart des projets, vous ne devriez pas avoir besoin d'y recourir.
 
-> **Note :** Pourquoi existe-t-il encore de nouveaux sites crées à l'aide de cookies? Principalement de par les habitudes des développeurs, l'utilisation de bibliothèques anciennes qui utilisent encore des cookies et l'existence de nombreux sites web fournissant des formations et références dépassées pour apprendre à stocker des données.
+> **Note :** Pourquoi existe-t-il encore de nouveaux sites crées à l'aide de cookies? Principalement de par les habitudes des développeurs, l'utilisation de bibliothèques anciennes qui utilisent encore des cookies et l'existence de nombreux sites web fournissant des formations et références dépassées pour apprendre à stocker des données.
 
 ### La nouvelle école : Web Storage et IndexedDB
 
@@ -86,7 +86,7 @@ Vous en apprendrez plus sur ces APIs ci-dessous.
 
 ### Le futur : l'API Cache
 
-Certains navigateurs modernes prennent en charge la nouvelle API {{domxref("Cache")}}. Cette API a été conçue pour stocker les réponses HTTP de requêtes données et est très utile pour stocker des ressources du site afin qu'il soit accessible sans connexion réseau par exemple. Le cache est généralement utilisé avec l'[API Service Worker](/fr/docs/Web/API/Service_Worker_API), mais ce n'est pas obligatoire.
+Certains navigateurs modernes prennent en charge la nouvelle API {{domxref("Cache")}}. Cette API a été conçue pour stocker les réponses HTTP de requêtes données et est très utile pour stocker des ressources du site afin qu'il soit accessible sans connexion réseau par exemple. Le cache est généralement utilisé avec l'[API Service Worker](/fr/docs/Web/API/Service_Worker_API), mais ce n'est pas obligatoire.
 
 L'utilisation du Cache et des Service Workers est un sujet avancé, nous ne le traiterons pas en détail dans cet article, nous ne montrerons qu'un simple exemple dans la section {{anch("Stockage hors-ligne de ressources")}} plus bas.
 
@@ -169,7 +169,7 @@ Le HTML de l'exemple est disponible à [personal-greeting.html](https://github.c
 Nous allons construire cet exemple pas à pas, cela vous permettra de comprendre comment ça marche.
 
 1.  D'abord, copiez notre fichier [personal-greeting.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html) dans un nouveau répertoire sur votre ordinateur.
-2.  Ensuite, créez un fichier `index.js` dans le même répertoire que le fichier HTML — le fichier HTML inclut ce script (voir ligne 40).
+2.  Ensuite, créez un fichier `index.js` dans le même répertoire que le fichier HTML — le fichier HTML inclut ce script (voir ligne 40).
 3.  Nous allons commencer par récupérer les références de tous les éléments HTML qu'on manipulera dans cet exemple — nous les créons en tant que constantes car ces références n'ont pas besoin d'être modifiées au cours de l'exécution de l'application. Ajoutez les lignes suivantes à votre fichier JavaScript:
 
     ```js
@@ -255,11 +255,11 @@ Notre exemple est terminé — bien joué ! Il ne vous reste plus qu'à enregist
 
 > **Note :** Vous pouvez trouver un exemple un peu plus complexe dans l'article [Utiliser l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API).
 
-> **Note :** Dans la ligne `<script src="index.js" defer></script>` de notre version finie, l'attribut `defer` spécifie que le contenu de l'élément {{htmlelement("script")}} ne doit pas s'exécuter avant que la page ait fini de charger.
+> **Note :** Dans la ligne `<script src="index.js" defer></script>` de notre version finie, l'attribut `defer` spécifie que le contenu de l'élément {{htmlelement("script")}} ne doit pas s'exécuter avant que la page ait fini de charger.
 
 ## Stocker des données complexes — IndexedDB
 
-L'[API IndexedDB](/fr/docs/Web/API/IndexedDB_API) (parfois abrégé IDB) est un système de base de données complet disponible dans le navigateur. Vous pouvez y stocker des données complexes, les types ne sont pas limités à des valeurs simples de type chaînes ou nombres. Vous pouvez stocker des vidéos, des images et à peu près tout ce que vous voulez, dans une instance IndexedDB.
+L'[API IndexedDB](/fr/docs/Web/API/IndexedDB_API) (parfois abrégé IDB) est un système de base de données complet disponible dans le navigateur. Vous pouvez y stocker des données complexes, les types ne sont pas limités à des valeurs simples de type chaînes ou nombres. Vous pouvez stocker des vidéos, des images et à peu près tout ce que vous voulez, dans une instance IndexedDB.
 
 Cependant, cela a un coût : IndexedDB est beaucoup plus complexe à utiliser que l'API Web Storage. Dans cette section, nous ne ferons qu'égratigner la surface de ce qu'IndexedDB peut faire, mais nous vous en donnerons assez pour débuter.
 
@@ -317,13 +317,13 @@ Voyons maintenant la première chose à faire, mettre en place la base de donné
 
     Cette ligne crée une requête `request` pour ouvrir la version `1` de la base de données appelée `notes`. Si elle n'existe pas déjà, on devra la créer via un gestionnaire d'événement.
 
-    Vous verrez très souvent ce format dans IndexedDB. Les opérations de base de données prennent du temps et on ne veut pas suspendre le navigateur le temps de récupérer le résultat, les opérations sur la base de données sont donc {{Glossary("asynchronous", "asynchrones")}} — ce qui signifie qu'au lieu d'arriver immédiatement, elles se produiront à un moment ultérieur et un événement sera déclenché lorsque cela arrivera.
+    Vous verrez très souvent ce format dans IndexedDB. Les opérations de base de données prennent du temps et on ne veut pas suspendre le navigateur le temps de récupérer le résultat, les opérations sur la base de données sont donc {{Glossary("asynchronous", "asynchrones")}} — ce qui signifie qu'au lieu d'arriver immédiatement, elles se produiront à un moment ultérieur et un événement sera déclenché lorsque cela arrivera.
 
     Pour gérer cela dans IndexedDB, on crée d'abord une requête (que vous pouvez appeler comme vous le voulez — on l'appelle `request` pour que ce soit plus explicite). On utilise ensuite des gestionnaire d'événement pour exécuter du code lorsque les requêtes sont terminées, échouent, etc, ce que l'on va voir ci-dessous.
 
     > **Note :** Le numéro de version est important. Si vous voulez mettre à jour votre base de données (par exemple, pour modifier la structure de la table), vous devez ré-exécuter votre code avec un numéro de version supérieur et spécifier le schéma de la base de données avec le gestionnaire d'événement `onupgradeneeded`. Nous ne verrons pas la mise à jour de base de données dans ce tutoriel.
 
-4.  Maintenant, ajoutez les gestionnaires d'événement suivants, juste en dessous des lignes précédentes — toujours à l'intérieur de `window.onload` :
+4.  Maintenant, ajoutez les gestionnaires d'événement suivants, juste en dessous des lignes précédentes — toujours à l'intérieur de `window.onload`&nbsp;:
 
     ```js
     // la base de données n'a pas pu être ouverte avec succès
@@ -345,9 +345,9 @@ Voyons maintenant la première chose à faire, mettre en place la base de donné
 
     Le gestionnaire d'événement {{domxref("IDBRequest.onerror", "request.onerror")}} s'exécutera si la requête échoue. Cela vous permet de gérer le problème si cela arrive. Dans notre exemple, on affiche simplement un message dans la console JavaScript.
 
-    Le gestionnare d'événement {{domxref("IDBRequest.onsuccess", "request.onsuccess")}}, d'autre part, s'exécutera si la requête aboutit, que la base de données a été ouverte avec succès. Lorsque cela arrive, la propriété {{domxref("IDBRequest.result", "request.result")}} contient alors un objet représentant la base de données ouverte, qui nous permet de la manipuler. On stocke cette valeur dans la variable `db` qu'on a crée plus tôt pour pouvoir l'utiliser ensuite. On exécute également une fonction appelée `displayData()`, qu'on définira plus tard — elle affiche les données de la base de données dans le {{HTMLElement("ul")}}. On l'exécute dès à présent pour que les notes en base de données soient affichées dès que la page est chargée.
+    Le gestionnare d'événement {{domxref("IDBRequest.onsuccess", "request.onsuccess")}}, d'autre part, s'exécutera si la requête aboutit, que la base de données a été ouverte avec succès. Lorsque cela arrive, la propriété {{domxref("IDBRequest.result", "request.result")}} contient alors un objet représentant la base de données ouverte, qui nous permet de la manipuler. On stocke cette valeur dans la variable `db` qu'on a crée plus tôt pour pouvoir l'utiliser ensuite. On exécute également une fonction appelée `displayData()`, qu'on définira plus tard — elle affiche les données de la base de données dans le {{HTMLElement("ul")}}. On l'exécute dès à présent pour que les notes en base de données soient affichées dès que la page est chargée.
 
-5.  Pour en finir avec cette section, on ajoute le gestionnaire d'événement qui est  probablement le plus important, {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupdateneeded")}}. Il est exécuté si la base de données n'a pas déjà été créée ou si on veut ouvrir la base de données avec un numéro de version supérieur à celle qui existe (pour faire une mise à jour). Ajoutez le code suivant en dessous de votre gestionnaire précédent :
+5.  Pour en finir avec cette section, on ajoute le gestionnaire d'événement qui est probablement le plus important, {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupdateneeded")}}. Il est exécuté si la base de données n'a pas déjà été créée ou si on veut ouvrir la base de données avec un numéro de version supérieur à celle qui existe (pour faire une mise à jour). Ajoutez le code suivant en dessous de votre gestionnaire précédent :
 
     ```js
     // Spécifie les tables de la BDD si ce n'est pas déjà pas fait
@@ -369,7 +369,7 @@ Voyons maintenant la première chose à faire, mettre en place la base de donné
 
     C'est ici qu'on définit le schéma (la structure) de notre base de données; c'est à dire l'ensemble des champs (ou colonnes) qu'il contient.
 
-    1.  On récupère une référence à la base de données existante depuis `e.target.result` (la propriété `result` de la cible de l'événement, c'est à dire l'objet `request`). C'est l'équivalent de la ligne `db = request.result;` du gestionnaire d'événement `onsuccess`, mais on doit le faire de cette manière ici puisque le gestionnaire d'événement `onupgradeneeded` est exécuté avant `onsuccess` — la valeur de `db` n'est pas encore disponible.
+    1.  On récupère une référence à la base de données existante depuis `e.target.result` (la propriété `result` de la cible de l'événement, c'est à dire l'objet `request`). C'est l'équivalent de la ligne `db = request.result;` du gestionnaire d'événement `onsuccess`, mais on doit le faire de cette manière ici puisque le gestionnaire d'événement `onupgradeneeded` est exécuté avant `onsuccess` — la valeur de `db` n'est pas encore disponible.
     2.  Ensuite, on utilise {{domxref("IDBDatabase.createObjectStore()")}} pour créer un object store (un container pour une collection d'objets) à l'intérieur de notre base de données. C'est l'équivalent d'une table dans un système de base de données traditionnel. On lui a donné le nom `notes`, et un champs `id` avec `autoIncrement` — pour chaque nouvelle entrée dans cette table, une valeur auto-incrementée sera attributée au champ `id` sans que le développeur n'ait à le définir. Le champ `id` est la clé de l'object store: il sera utilisé pour identifier de manière unique les entrées, permettant de les mettre à jour ou les supprimer.
     3.  On crée deux autres index (champs) en utilisant la méthode {{domxref("IDBObjectStore.createIndex()")}}: `title` (qui contiendra le titre de chaque note), et `body` (qui contiendra la description de chaque note).
 
@@ -443,7 +443,7 @@ Maintenant, voyons comment ajouter des entrées dans la base de données. On le
     5.  On ajoute un nouvel enregistrement à la base de données en utilisant {{domxref("IDBObjectStore.add()")}}. Cela crée une requête, sur le même principe qu'on a déjà vu.
     6.  On ajoute des gestionnaires d'événement à `request` et `transaction` pour exécuter du code aux points importants de leur cycle de vie :
 
-        - Quand la requête a réussit, on efface les champs du formulaire — pour pouvoir ajouter une nouvelle note
+        - Quand la requête a réussit, on efface les champs du formulaire — pour pouvoir ajouter une nouvelle note
         - Quand la transaction est terminé, on réexécute la fonction `displayData()` — pour mettre à jour l'affichage de notes sur la page.
 
 ### Afficher les données
@@ -515,7 +515,7 @@ Encore une fois, pas à pas :
 2.  Ensuite, on récupère une référence à l'object store `notes` en utilisant {{domxref("IDBDatabase.transaction()")}} et {{domxref("IDBTransaction.objectStore()")}} comme nous l'avons fait dans `addData()`, mais en chaînant ces deux instructions en une seule ligne.
 3.  L'étape suivante consiste à utiliser la méthode {{domxref("IDBObjectStore.openCursor()")}} pour ouvrir un curseur — une construction qui peut être utilisée pour itérer sur les entrées d'un object store. On chaîne un gestionnaire d'événement `onsuccess` à la fin de cette opération pour rendre le code plus concis — dès que le curseur est récupéré, le gestionnaire est exécuté.
 4.  On récupère une référence au curseur lui-même (un objet {{domxref("IDBCursor")}}) avec `cursor = e.target.result`.
-5.  Ensuite, on vérifie si le curseur contient une entrée de l'object store (`if(cursor){ ... }`) — si c'est le cas, on crée des éléments du DOM, les remplit avec les données de l'entrée, et les insère dans la page (à l'intérieur de l'élément `<ul>`). On inclut un bouton de suppression, qui, quand il est cliqué, supprime l'entrée en cours en appelant la fonction `deleteItem()` — que nous allons voir dans la section suivante.
+5.  Ensuite, on vérifie si le curseur contient une entrée de l'object store (`if(cursor){ ... }`) — si c'est le cas, on crée des éléments du DOM, les remplit avec les données de l'entrée, et les insère dans la page (à l'intérieur de l'élément `<ul>`). On inclut un bouton de suppression, qui, quand il est cliqué, supprime l'entrée en cours en appelant la fonction `deleteItem()` — que nous allons voir dans la section suivante.
 6.  À la fin du bloc `if`, on utilise la méthode {{domxref("IDBCursor.continue()")}} pour avancer le curseur à la prochaine entrée dans l'object store et réexécuter le bloc. S'il reste une autre entrée sur laquelle itérer, elle sera à son tour insérée dans la page, `continue()` sera exécuté à nouveau, et ainsi de suite.
 7.  Quand il n'y a plus d'enregistrements à parcourir, le curseur retourne `undefined`, et le bloc `else` sera donc exécuté à la place. Ce bloc vérifie si des notes ont été insérées dans le `<ul>` — si ce n'est pas le cas, on insère un message indiquant qu'il n'existe aucune note.
 
@@ -612,7 +612,7 @@ Passons en revue les parties les plus intéressantes de l'exemple. Nous ne regar
 
 3.  Le bout de code qui suit est extrait de la fonction `fetchVideoFromNetwork()` — ici, on récupère les versions MP4 et WebM de la vidéos en utilisant deux requêtes {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}} distinctes. On utilise ensuite la méthode {{domxref("blob()", "Body.blob()")}} pour extraire la réponse sous forme de blob, ce qui nous donne une représentation objet de la vidéo que l'on peut stocker et afficher plus tard.
 
-    Il reste cependant un problème — ces deux requêtes sont asynchrones et ont veut afficher/stocker la vidéo uniquement lorsque les deux promesses sont résolues. Heureusement, il existe une méthode native qui gère ce problème — {{jsxref("Promise.all()")}}. Elle prend un argument — la liste de toutes les promesses qui doivent être attendues — et retourne elle-même une promesse. Quand toutes les promesses sont résolues, alors la promesse de la méthode `all()` est résolue, avec pour valeur un tableau contenant toutes les valeurs individuelles retournées par les promesses.
+    Il reste cependant un problème — ces deux requêtes sont asynchrones et ont veut afficher/stocker la vidéo uniquement lorsque les deux promesses sont résolues. Heureusement, il existe une méthode native qui gère ce problème — {{jsxref("Promise.all()")}}. Elle prend un argument — la liste de toutes les promesses qui doivent être attendues — et retourne elle-même une promesse. Quand toutes les promesses sont résolues, alors la promesse de la méthode `all()` est résolue, avec pour valeur un tableau contenant toutes les valeurs individuelles retournées par les promesses.
 
     À l'intérieur du bloc `all()`, vous pouvez voir qu'on appelle la fonction `displayVideo()`, comme on l'a fait précédemment, pour afficher les vidéos dans l'interface utilisateur, puis la fonction `storeVideo()` pour stocker ces vidéos dans la base de données.
 
@@ -654,7 +654,7 @@ Passons en revue les parties les plus intéressantes de l'exemple. Nous ne regar
     };
     ```
 
-5.  Enfin, `displayVideo()` crée les éléments DOM nécessaires pour insérer la vidéo dans l'interface utilisateur, puis les ajoute à la page. Les parties les plus intéressantes sont copiées ci-dessous — pour afficher notre blob vidéo dans un élément `<video>`, on doit créer un objet URL (URL interne qui pointe vers un blob en mémoire) en utilisant la méthode {{domxref("URL.createObjectURL()")}}. Une fois que c'est fait, on peut assigner l'URL comme valeur d'attribut `src` de l'élément {{htmlelement("source")}}, et ça marche.
+5.  Enfin, `displayVideo()` crée les éléments DOM nécessaires pour insérer la vidéo dans l'interface utilisateur, puis les ajoute à la page. Les parties les plus intéressantes sont copiées ci-dessous — pour afficher notre blob vidéo dans un élément `<video>`, on doit créer un objet URL (URL interne qui pointe vers un blob en mémoire) en utilisant la méthode {{domxref("URL.createObjectURL()")}}. Une fois que c'est fait, on peut assigner l'URL comme valeur d'attribut `src` de l'élément {{htmlelement("source")}}, et ça marche.
 
     ```js
     function displayVideo(mp4Blob, webmBlob, title) {
@@ -703,7 +703,7 @@ Voir [IndexedDB video store avec service worker en direct](https://mdn.github.io
 
 ### Enregistrer le service worker
 
-La première chose à noter est qu'il  a un peu plus de code placé dans le fichier JavaScript principal (voir [index.js](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js#L144)):
+La première chose à noter est qu'il a un peu plus de code placé dans le fichier JavaScript principal (voir [index.js](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js#L144)):
 
 ```js
 // Enregistre un service worker pour contrôler le site hors-ligne
@@ -754,7 +754,7 @@ C'est tout pour l'instant, l'installation est terminée.
 
 Avec le service worker enregistré et installé pour notre page HTML, et les ressources pertinentes ajoutées au cache, on est presque prêts. Il n'y a plus qu'une chose à faire: écrire du code pour répondre aux prochaines requêtes réseau.
 
-C'est ce que fait le second bloc de code dans `sw.js` :
+C'est ce que fait le second bloc de code dans `sw.js`&nbsp;:
 
 ```js
 self.addEventListener('fetch', function(e) {
diff --git a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.md b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.md
index 0c6e51987c..68dde76dcc 100644
--- a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.md
+++ b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.md
@@ -61,7 +61,7 @@ Autour de 2006-2007, Mozilla a commencé à travailler sur une implémentation e
 
 {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}
 
-Cet article se concentrera principalement sur les canvas 2D, car le code WebGL brut est très complexe. Nous montrerons cependant comment utiliser une bibliothèque WebGL pour créer une scène 3D plus facilement, et vous pourrez  par la suite suivre le tutoriel [WebGL](/fr/Apprendre/WebGL), qui couvre le code WebGL brut.
+Cet article se concentrera principalement sur les canvas 2D, car le code WebGL brut est très complexe. Nous montrerons cependant comment utiliser une bibliothèque WebGL pour créer une scène 3D plus facilement, et vous pourrez par la suite suivre le tutoriel [WebGL](/fr/Apprendre/WebGL), qui couvre le code WebGL brut.
 
 > **Note :** Canvas est très bien pris en charge parmi les différents navigateurs, à l'exception de IE 8 (et inférieur) pour les canvas 2D, et IE 11 (et inférieur) pour WebGL.
 
@@ -185,7 +185,7 @@ Commençons avec quelques rectangles simples.
 
     Sauvegardez et rafraichissez, et vous verrez un nouveau rectangle. Cela soulève un point important: les opérations graphiques comme dessiner des rectangles, lignes, et autres, sont executées dans l'ordre dans lequel elle apparaissent dans le code. Pensez-y comme peindre un mur, chaque couche de peinture s'ajoute par dessus les anciennes et peuvent même mettre cacher ce qu'il y a en dessous. Vous ne pouvez rien y faire, il faut donc réfléchir soigneusement à l'ordre dans lequel vous allez dessiner les éléments graphiques.
 
-4.  Notez que vous pouvez dessiner des éléments graphiques semi-transparents en spécifiant une couleur semi-transparente, par exemple en utilisant `rgba()`. La valeur `a` définit ce qu'on appelle le "canal alpha", ou la quantité de transparence de la couleur. Plus la valeur de `a` est élevée, plus la couleur est opaque. Ajoutez ce qui suit à votre code:
+4.  Notez que vous pouvez dessiner des éléments graphiques semi-transparents en spécifiant une couleur semi-transparente, par exemple en utilisant `rgba()`. La valeur `a` définit ce qu'on appelle le "canal alpha", ou la quantité de transparence de la couleur. Plus la valeur de `a` est élevée, plus la couleur est opaque. Ajoutez ce qui suit à votre code:
 
     ```js
     ctx.fillStyle = 'rgba(255, 0, 255, 0.75)';
@@ -330,7 +330,7 @@ Maintenant, voyons comment dessiner un cercle sur le canvas. Pour ce faire, on u
 
     Le motif ici est très similaire, a deux différences près:
 
-    - Nous avons mis le dernier paramètre de `arc()` à `true`, ce qui signifie que l'arc est tracé dans le sens inverse des aiguilles d'une montre.  Donc si notre arc commence à -45 degrés et fini à 45 degrés, nous dessinons un arc de 270 degrés. Si vous changez `true` à `false` et ré-exécutez le code, seule une portion de 90 degrés sera dessinée.
+    - Nous avons mis le dernier paramètre de `arc()` à `true`, ce qui signifie que l'arc est tracé dans le sens inverse des aiguilles d'une montre.  Donc si notre arc commence à -45 degrés et fini à 45 degrés, nous dessinons un arc de 270 degrés. Si vous changez `true` à `false` et ré-exécutez le code, seule une portion de 90 degrés sera dessinée.
     - Avant d'appeler `fill()`, nous ajoutons une ligne vers le centre du cercle. Nous obtenons une découpe de style Pac-Man plutôt sympa. Si vous supprimiez cette ligne (essayez!) et ré-exécutiez le code, vous auriez juste un cercle dont le bout a été coupé — entre le début et la fin de l'arc. Cela illuste un autre point important du canvas: si vous essayez de remplir une forme incomplète (qui n'est pas fermée), le navigateur ajoute une ligne droite entre le début et la fin du path et le remplit.
 
 C'est tout pour le moment; votre exemple final devrait ressembler à ceci:
@@ -352,7 +352,7 @@ Le texte peut être avec deux méthodes:
 
 Ces deux méthodes prennent trois paramètres: la chaîne de caractères à écrire et les coordonnées X et Y du coin supérieur gauche de la zone de texte (**text box**) — littéralement, la zone entourant le texte que vous écrivez.
 
-Il existe également un certain nombre de proprétés pour contrôler le rendu du texte, comme {{domxref("CanvasRenderingContext2D.font", "font")}}, qui permer de spécifier la police d'écriture, la taille, etc — elle accepte la même syntaxe que la propriété CSS {{cssxref("font")}}.
+Il existe également un certain nombre de proprétés pour contrôler le rendu du texte, comme {{domxref("CanvasRenderingContext2D.font", "font")}}, qui permer de spécifier la police d'écriture, la taille, etc — elle accepte la même syntaxe que la propriété CSS {{cssxref("font")}}.
 
 Essayez d'ajouter le bloc suivant au bas de votre javaScript:
 
@@ -390,7 +390,7 @@ Il est possible d'afficher des images externes sur le canvas. Ce peut être des
     image.src = 'firefox.png';
     ```
 
-    Ici, nous créons un nouvel objet {{domxref("HTMLImageElement")}} en utilisant le constructeur {{domxref("HTMLImageElement.Image()", "Image()")}}. (L'objet retourné est le même type que celui retourné lorsque vous récupérez une référence vers un élément {{htmlelement("img")}} existant). Nous définissons son attribut  {{htmlattrxref("src", "img")}} à notre image du logo Firefox. À ce stade, le navigateur commence à charger l'image.
+    Ici, nous créons un nouvel objet {{domxref("HTMLImageElement")}} en utilisant le constructeur {{domxref("HTMLImageElement.Image()", "Image()")}}. (L'objet retourné est le même type que celui retourné lorsque vous récupérez une référence vers un élément {{htmlelement("img")}} existant). Nous définissons son attribut  {{htmlattrxref("src", "img")}} à notre image du logo Firefox. À ce stade, le navigateur commence à charger l'image.
 
 3.  Nous pourrions essayer maintenant d'inclure l'image en utilisant `drawImage()`, mais nous devons nous assurer que le fichier image ait été chargé en premier, faute de quoi le code échouera. Nous pouvons y parvenir en utilisant le gestionnaire d'événement `onload`, qui ne sera appelé que lorsque l'image aura fini de charger. Ajoutez le bloc suivant à la suite du précédent:
 
@@ -506,7 +506,7 @@ C'est tout! L'exemple final devrait ressemble à ça:
 
 - Dessinez des rectangles ou des arcs au lieu des triangles, ou même des images externes.
 - Jouez avec les valeurs de `length` et `moveOffset`.
-- Utilisez des nombres aléatoires — grâce à la fonction `rand()` que nous avons inclue mais que nous n'avons pas utilisée.
+- Utilisez des nombres aléatoires — grâce à la fonction `rand()` que nous avons inclue mais que nous n'avons pas utilisée.
 
 > **Note :** Le code terminé est disponible sur GitHub, [6_canvas_for_loop.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html).
 
@@ -546,7 +546,7 @@ loop();
 
 Nous lançons la fonction `loop()` une fois pour commencer le cycle et dessiner la première image de l'animation. La fonction `loop()` s'occupe ensuite d'appeler `requestAnimationFrame(loop)` pour afficher la prochaine image de l'animation, et ce continuellement.
 
-Notez que sur chaque image, nous effaçons complètement le canvas et redessinons tout. Nous créons de nouvelles balles pour chaque image — au maximum 25 — puis, pour chaque balle, la dessinons, mettons à jour sa position, et vérifions si elle est en collision avec une autre balle. Une fois que vous avez dessiné quelque chose sur un canvas, il n'y a aucun moyen pour manipuler cet élément graphique individuellement comme vous pouvez le faire avec les élément DOM. Vous ne pouvez pas déplacer les balles sur le canvas parce qu'une fois dessinée, une balle n'est plus une balle mais juste des pixels sur un canvas. Au lieu de ça, vous devez effacer et redessiner, soit en effaçant et redessinant absolutement tout le canvas, soit en ayant du code qui sait exactement quelles parties doivent être effacées, et qui efface et redessine uniquement la zone minimale nécessaire.
+Notez que sur chaque image, nous effaçons complètement le canvas et redessinons tout. Nous créons de nouvelles balles pour chaque image — au maximum 25 — puis, pour chaque balle, la dessinons, mettons à jour sa position, et vérifions si elle est en collision avec une autre balle. Une fois que vous avez dessiné quelque chose sur un canvas, il n'y a aucun moyen pour manipuler cet élément graphique individuellement comme vous pouvez le faire avec les élément DOM. Vous ne pouvez pas déplacer les balles sur le canvas parce qu'une fois dessinée, une balle n'est plus une balle mais juste des pixels sur un canvas. Au lieu de ça, vous devez effacer et redessiner, soit en effaçant et redessinant absolutement tout le canvas, soit en ayant du code qui sait exactement quelles parties doivent être effacées, et qui efface et redessine uniquement la zone minimale nécessaire.
 
 Optimiser l'animation graphique est une spécialité entière de programmation, avec beaucoup de techniques ingénieuses disponibles. Mais celles-ci sont au-delà de ce dont nous avons besoin pour notre exemple!
 
@@ -764,7 +764,7 @@ Regardons un exemple simple pour créer quelque chose avec une bibliothèque Web
 
     Nous définissons également la position de la caméra à 5 unités de distance de l'axe Z, qui, comme en CSS, est hors de l'écran vers vous, le spectateur.
 
-6.  Le troisième ingrédient essentiel est un moteur de rendu. C'est un objet qui restitue une scène donnée, vu à travers une caméra donnée. Nous allons en créer dès à présent en utilisant le constructeur [`WebGLRenderer()`](https://threejs.org/docs/index.html#api/renderers/WebGLRenderer) — mais nous ne l'utiliserons que plus tard. Ajoutez les lignes suivantes à la suite de votre JavaScript:
+6.  Le troisième ingrédient essentiel est un moteur de rendu. C'est un objet qui restitue une scène donnée, vu à travers une caméra donnée. Nous allons en créer dès à présent en utilisant le constructeur [`WebGLRenderer()`](https://threejs.org/docs/index.html#api/renderers/WebGLRenderer) — mais nous ne l'utiliserons que plus tard. Ajoutez les lignes suivantes à la suite de votre JavaScript:
 
     ```js
     var renderer = new THREE.WebGLRenderer();
diff --git a/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.md b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.md
index 4cc4cf072c..1c4e52830e 100644
--- a/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.md
+++ b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.md
@@ -16,7 +16,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
 
-Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail a, en vérité, eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que XMLHttpRequest et l'API Fetch.
+Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail a, en vérité, eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que XMLHttpRequest et l'API Fetch.
 
 <table class="standard-table">
   <tbody>
@@ -51,19 +51,19 @@ Une autre tâche courante dans les sites et applications web modernes est de ré
 
 ![A basic representation of a web site architecture](web-site-architechture@2x.png)
 
-Le problème avec ce modèle c'est qu'à chaque fois que vous voulez mettre à jour une partie de la page, par exemple pour afficher la page suivante d'une liste de produits, vous devez recharger toute la page. Ce surcoût est tout à fait inutile et résulte en une mauvaise expérience utilisateur, particulièrement pour les pages qui sont lourdes, complexes et du coup longues à charger.
+Le problème avec ce modèle c'est qu'à chaque fois que vous voulez mettre à jour une partie de la page, par exemple pour afficher la page suivante d'une liste de produits, vous devez recharger toute la page. Ce surcoût est tout à fait inutile et résulte en une mauvaise expérience utilisateur, particulièrement pour les pages qui sont lourdes, complexes et du coup longues à charger.
 
 ### L'arrivée d'Ajax
 
-Pour traiter ce problème, des technologies ont été élaborées qui permettent de récupérer à la demande de petites portions de données (comme du [HTML](/fr/docs/Web/HTML), {{glossary("XML")}}, [JSON](/fr/docs/Learn/JavaScript/Objects/JSON), ou texte brut) et de les afficher dans la page web.
+Pour traiter ce problème, des technologies ont été élaborées qui permettent de récupérer à la demande de petites portions de données (comme du [HTML](/fr/docs/Web/HTML), {{glossary("XML")}}, [JSON](/fr/docs/Learn/JavaScript/Objects/JSON), ou texte brut) et de les afficher dans la page web.
 
-Nous avons pour cela l'API {{domxref("XMLHttpRequest")}} à notre disposition ou — plus récemment — l'[API Fetch](/fr/docs/Web/API/Fetch_API). Elles permettent de réaliser des requêtes [HTTP](/fr/docs/Web/HTTP) pour récupérer des ressources spécifiques disponibles sur un serveur et de formater les données retournées selon les besoins avant l'affichage dans la page.
+Nous avons pour cela l'API {{domxref("XMLHttpRequest")}} à notre disposition ou — plus récemment — l'[API Fetch](/fr/docs/Web/API/Fetch_API). Elles permettent de réaliser des requêtes [HTTP](/fr/docs/Web/HTTP) pour récupérer des ressources spécifiques disponibles sur un serveur et de formater les données retournées selon les besoins avant l'affichage dans la page.
 
 > **Note :** Dans les premiers temps, cette technique était appelée "Asynchronous JavaScript and XML" (JavaScript asychrone et XML), dit AJAX, parce qu'elle utilisait {{domxref("XMLHttpRequest")}} pour requêter des données XML. De nos jours, c'est rarement le cas; la plupart du temps, on utilise `XMLHttpRequest` ou Fetch pour requêter des données JSON. Quoi qu'il en soit, le procédé reste le même et le terme "Ajax" est resté pour décrire cette technique.
 
 ![A simple modern architecture for web sites](moderne-web-site-architechture@2x.png)
 
-Le modèle Ajax implique une API web comme proxy pour requêter les données plus intelligemment que simplement rafraîchir la page à chaque fois. Voyons plutôt l'impact que cela a :
+Le modèle Ajax implique une API web comme proxy pour requêter les données plus intelligemment que simplement rafraîchir la page à chaque fois. Voyons plutôt l'impact que cela a :
 
 1.  Allez sur un site riche en information de votre choix, comme Amazon, YouTube, CNN...
 2.  Cherchez quelque chose dans la barre de recherche, comme un nouveau produit. Le contenu principal va changer, mais la plupart de ce qui l'entoure reste statique, comme l'entête, le pied de page, le menu de navigation, etc.
@@ -73,22 +73,22 @@ C'est une bonne chose puisque :
 - La mise à jour de la page est beaucoup plus rapide et vous n'avez pas à attendre que la page se rafraîchisse, si bien que le site paraît être plus rapide et plus réactif.
 - Moins de données doivent être téléchargées pour mettre à jour la page, et donc moins de bande passante est utilisée. Cela ne fait peut-être pas une grande différence sur un ordinateur de bureau, mais cela peut devenir un problème majeur sur mobile ou dans les pays en développement, qui n'ont pas partout un service Internet ultra-rapide.
 
-Notez que pour accélerer les choses encore davantage, certains sites stockent les ressources et données chez le client lors de sa première visite, si bien que les visites suivantes, les fichiers locaux sont utilisés et non re-téléchargés du serveur. Le contenu n'est rechargé que lorsqu'il a été mis à jour sur le serveur.
+Notez que pour accélerer les choses encore davantage, certains sites stockent les ressources et données chez le client lors de sa première visite, si bien que les visites suivantes, les fichiers locaux sont utilisés et non re-téléchargés du serveur. Le contenu n'est rechargé que lorsqu'il a été mis à jour sur le serveur.
 
 ![A basic web app data flow architecture](web-app-architecture@2x.png)
 
 ## Une requête Ajax basique
 
-Voyons maintenant comment ces requêtes sont gérées, en utilisant soit {{domxref("XMLHttpRequest")}} soit [Fetch](/fr/docs/Web/API/Fetch_API). Pour ces exemples, nous allons requêter les données de différents fichiers texte et les utiliserons pour remplir une zone de contenu.
+Voyons maintenant comment ces requêtes sont gérées, en utilisant soit {{domxref("XMLHttpRequest")}} soit [Fetch](/fr/docs/Web/API/Fetch_API). Pour ces exemples, nous allons requêter les données de différents fichiers texte et les utiliserons pour remplir une zone de contenu.
 
-Ces fichiers agiront comme une fausse base de données ; dans une vraie application, il est plus probable que vous utiliseriez un langage côté serveur comme PHP, Python, ou Node pour récupérer les données à partir d'une véritable base de données. En revanche, nous voulons ici garder les choses simples ; nous allons donc nous concentrer sur le côté client.
+Ces fichiers agiront comme une fausse base de données ; dans une vraie application, il est plus probable que vous utiliseriez un langage côté serveur comme PHP, Python, ou Node pour récupérer les données à partir d'une véritable base de données. En revanche, nous voulons ici garder les choses simples ; nous allons donc nous concentrer sur le côté client.
 
 ### XMLHttpRequest
 
-`XMLHttpRequest` (qui est fréquemment abrégé XHR) est une technologie assez vieille maintenant — elle a été inventée par Microsoft dans les années 90 et a été standardisée dans les autres navigateurs il y a longtemps.
+`XMLHttpRequest` (qui est fréquemment abrégé XHR) est une technologie assez vieille maintenant — elle a été inventée par Microsoft dans les années 90 et a été standardisée dans les autres navigateurs il y a longtemps.
 
 1.  Pour commencer cet exemple, faites une copie locale de [ajax-start.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/ajax-start.html) et des quatre fichiers texte — [verse1.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt), [verse2.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt), [verse3.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt), et [verse4.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt) — dans un nouveau répertoire sur votre ordinateur. Dans cet exemple, nous allons charger le verset d'un poème (que vous pourriez bien reconnaître), quand il est sélectionné dans le menu déroulant, en utilisant XHR.
-2.  À l'intérieur de l'élément {{htmlelement("script")}}, ajoutez le code qui suit. Il stocke une référence aux éléments {{htmlelement("select")}} et {{htmlelement("pre")}} dans des variables et définit un gestionnaire d'événement {{domxref("GlobalEventHandlers.onchange","onchange")}}, pour que, quand la valeur du menu déroulant est changée, la valeur sélectionnée soit passée comme paramètre à la fonction  `updateDisplay()`.
+2.  À l'intérieur de l'élément {{htmlelement("script")}}, ajoutez le code qui suit. Il stocke une référence aux éléments {{htmlelement("select")}} et {{htmlelement("pre")}} dans des variables et définit un gestionnaire d'événement {{domxref("GlobalEventHandlers.onchange","onchange")}}, pour que, quand la valeur du menu déroulant est changée, la valeur sélectionnée soit passée comme paramètre à la fonction  `updateDisplay()`.
 
     ```js
     var verseChoose = document.querySelector('select');
@@ -110,7 +110,7 @@ Ces fichiers agiront comme une fausse base de données ; dans une vraie applicat
 
 4.  Nous allons commencer notre fonction en construisant une URL relative qui pointe vers le fichier texte que nous voulons charger, nous en aurons besoin plus tard. La valeur de l'élément {{htmlelement("select")}} à tout instant est la même que l'élément {{htmlelement("option")}} sélectionné (c'est à dire le texte de l'élément sélectionné, ou son attribut `value` s'il est spécifié) — par exemple "Verse 1". Le fichier correspondant est "verse1.txt" et il est situé dans le même répertoire que le fichier HTML, le nom du fichier seul suffira donc.
 
-    Les serveurs web sont généralement sensibles à la casse, le nom de fichier n'a pas d'espace et a une extension de fichier. Pour convertir "Verse 1" en "verse1.txt" nous allons convertir le "V" en minuscles avec {{jsxref("String.toLowerCase", "toLowerCase()")}}, supprimer l'espace avec {{jsxref("String.replace", "replace()")}} et ajouter ".txt" à la fin avec une simple [concaténation de chaînes](/fr/docs/Learn/JavaScript/First_steps/Strings#Concaténation_de_chaînes). Ajoutez les lignes suivantes à l'intérieur de la fonction `updateDisplay()` :
+    Les serveurs web sont généralement sensibles à la casse, le nom de fichier n'a pas d'espace et a une extension de fichier. Pour convertir "Verse 1" en "verse1.txt" nous allons convertir le "V" en minuscles avec {{jsxref("String.toLowerCase", "toLowerCase()")}}, supprimer l'espace avec {{jsxref("String.replace", "replace()")}} et ajouter ".txt" à la fin avec une simple [concaténation de chaînes](/fr/docs/Learn/JavaScript/First_steps/Strings#Concaténation_de_chaînes). Ajoutez les lignes suivantes à l'intérieur de la fonction `updateDisplay()`&nbsp;:
 
     ```js
     verse = verse.replace(" ", "");
@@ -138,7 +138,7 @@ Ces fichiers agiront comme une fausse base de données ; dans une vraie applicat
 
 8.  Récupérer une ressource sur le réseau est une opération {{glossary("asynchronous","asynchrone")}}, ce qui signifie que vous devez attendre que cette opération se termine (par exemple, que la ressource soit renvoyée) avant de pouvoir récupérer la réponse — sans quoi une erreur est levée. XHR permet d'exécuter du code lorsque la réponse est reçue grâce au gestionnaire d'événement {{domxref("XMLHttpRequest.onload", "onload")}} — quand l'événement {{event("load")}} est déclenché. Une fois que la réponse a été reçue, alors la réponse est accessible via la propriété `response` de l'objet XHR utilisé.
 
-    Ajoutez le bloc de code qui suit toujours au bas de la fonction `updateDisplay()`. Vous verrez qu'à l'intérieur du gestionnaire d'événément `onload`, nous assignons la propriété [`textContent`](/fr/docs/Web/API/Node/textContent) de `poemDisplay` (l'élément {{htmlelement("pre")}}) à la valeur de la propriété {{domxref("XMLHttpRequest.response", "request.response")}}.
+    Ajoutez le bloc de code qui suit toujours au bas de la fonction `updateDisplay()`. Vous verrez qu'à l'intérieur du gestionnaire d'événément `onload`, nous assignons la propriété [`textContent`](/fr/docs/Web/API/Node/textContent) de `poemDisplay` (l'élément {{htmlelement("pre")}}) à la valeur de la propriété {{domxref("XMLHttpRequest.response", "request.response")}}.
 
     ```js
     request.onload = function() {
@@ -146,7 +146,7 @@ Ces fichiers agiront comme une fausse base de données ; dans une vraie applicat
     };
     ```
 
-9.  Les étapes précédentes nous ont permis de configurer la requête XHR, mais celle-ci n'est exécutée que lorsqu'on le demande explicitement. Pour ce faire, il faut appeler la méthode {{domxref("XMLHttpRequest.send","send()")}}. Ajoutez la ligne suivante à la suite du code déjà écrit :
+9.  Les étapes précédentes nous ont permis de configurer la requête XHR, mais celle-ci n'est exécutée que lorsqu'on le demande explicitement. Pour ce faire, il faut appeler la méthode {{domxref("XMLHttpRequest.send","send()")}}. Ajoutez la ligne suivante à la suite du code déjà écrit&nbsp;:
 
     ```js
     request.send();
@@ -198,7 +198,7 @@ Voyons comment convertir le dernier exemple, en remplaçant XHR par Fetch.
     });
     ```
 
-4.  Chargez l'exemple dans votre navigateur (en l'exécutant à travers un serveur web) et il devrait produire le même résultat que la version XHR  — pourvu que vous utilisiez un navigateur moderne.
+4.  Chargez l'exemple dans votre navigateur (en l'exécutant à travers un serveur web) et il devrait produire le même résultat que la version XHR  — pourvu que vous utilisiez un navigateur moderne.
 
 #### Que se passe-t-il dans le code Fetch?
 
@@ -214,9 +214,9 @@ Enfin, dans le corps de la fonction, nous faisons la même chose que nous faisio
 
 ### À propos des promesses
 
-Les promesses peuvent être un peu déroutantes au premier abord, ne vous en souciez pas trop pour l'instant. Vous vous y ferez après un certain temps, d'autant plus après en avoir appris davantage sur les APIs JavaScript modernes — la plupart des APIs récentes utilisent beaucoup les promesses.
+Les promesses peuvent être un peu déroutantes au premier abord, ne vous en souciez pas trop pour l'instant. Vous vous y ferez après un certain temps, d'autant plus après en avoir appris davantage sur les APIs JavaScript modernes — la plupart des APIs récentes utilisent beaucoup les promesses.
 
-Regardons à nouveau la structure d'une promesse pour voir si nous pouvons en donner plus de sens.
+Regardons à nouveau la structure d'une promesse pour voir si nous pouvons en donner plus de sens.
 
 #### Promesse 1
 
@@ -228,7 +228,7 @@ fetch(url).then(function(response) {
 
 Si l'on traduit en bon français les instructions JavaScript, on pourrait dire
 
-- `fetch(url)` : récupérer la ressource située à l'adresse `url`
+- `fetch(url)`&nbsp;: récupérer la ressource située à l'adresse `url`
 - `.then(function() { ... })`: quand c'est fait, exécuter la fonction spécifiée
 
 On dit qu'une promesse est "résolue" (resolved) lorsque l'opération spécifiée à un moment donné est terminée. En l'occurence, l'opération spécifiée est de récupérer une ressource à une URL donnée (en utilisant une requête HTTP) et de retourner la réponse reçue du serveur.
@@ -245,7 +245,7 @@ myFetch.then(function(response) {
 });
 ```
 
-Parce que la méthode `fetch()` retourne une promesse qui résout une réponse HTTP, la fonction définie à l'intérieur du `.then()` reçoit la réponse en tant que paramètre. Vous pouvez appeler le paramètre comme vous souhaitez — l'exemple ci-dessous fait toujours la même chose :
+Parce que la méthode `fetch()` retourne une promesse qui résout une réponse HTTP, la fonction définie à l'intérieur du `.then()` reçoit la réponse en tant que paramètre. Vous pouvez appeler le paramètre comme vous souhaitez — l'exemple ci-dessous fait toujours la même chose :
 
 ```js
 fetch(url).then(function(dogBiscuits) {
@@ -273,7 +273,7 @@ L'objet `response` a une méthode {{domxref("Body.text","text()")}}, qui convert
 
 #### Chaîner les then()
 
-Notez que le résultat de la fonction appelée par le `.then()` est également retourné par ce dernier, nous pouvons donc mettre les `.then()` bout à bout, en passant le résultat du bloc précédent au prochain.
+Notez que le résultat de la fonction appelée par le `.then()` est également retourné par ce dernier, nous pouvons donc mettre les `.then()` bout à bout, en passant le résultat du bloc précédent au prochain.
 
 Ainsi, le bloc de code suivant fait la même chose que notre exemple original, mais écrit dans un style différent :
 
@@ -285,7 +285,7 @@ fetch(url).then(function(response) {
 });
 ```
 
-Beaucoup de développeurs préfèrent ce style, plus "plat" : il évite de définir des fonctions à l'intérieur de fonctions et est plus facile à lire lorsqu'il y a beaucoup de promesses qui s'enchaînent. La seule différence ici est que nous avons une instruction [`return`](/fr/Apprendre/JavaScript/Building_blocks/Return_values) pour retourner `response.text()`, et ce résultat est passé au prochain `.then()`.
+Beaucoup de développeurs préfèrent ce style, plus "plat" : il évite de définir des fonctions à l'intérieur de fonctions et est plus facile à lire lorsqu'il y a beaucoup de promesses qui s'enchaînent. La seule différence ici est que nous avons une instruction [`return`](/fr/Apprendre/JavaScript/Building_blocks/Return_values) pour retourner `response.text()`, et ce résultat est passé au prochain `.then()`.
 
 ### Quel mécanisme devriez-vous utiliser?
 
@@ -332,7 +332,7 @@ Vous pouvez tester le cas d'échec vous-même :
 
 1.  Faites une copie locale des fichiers d'exemple (téléchargez et dézippez le [fichier ZIP can-store](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true))
 2.  Éxecutez le code via un serveur web (comme vu précédemment dans {{anch("Serving your example from a server", "Servir votre exemple depuis un serveur")}})
-3.  Modifiez le chemin du fichier à récupérer, mettez un nom de fichier qui n'existe pas, comme 'produc.json'.
+3.  Modifiez le chemin du fichier à récupérer, mettez un nom de fichier qui n'existe pas, comme 'produc.json'.
 4.  Maintenant, chargez le fichier index dans votre navigateur (via `localhost:8000`) et regardez dans la console de développement. Vous verrez un message parmi les lignes "Network request for products.json failed with response 404: File not found" (la requête réseau pour products.json a échoué avec la réponse 404: Fichier non trouvé).
 
 #### Deuxième Fetch
@@ -352,15 +352,15 @@ fetch(url).then(function(response) {
 });
 ```
 
-Cela fonctionne à peu près de la même manière que le précédent, sauf qu'au lieu d'utiliser {{domxref("Body.json","json()")}}, on utilise {{domxref("Body.blob","blob()")}} — en l'occurence, nous voulons récupérer la réponse sous la forme d'un fichier image, et le format de données que nous utilisons est [Blob](/fr/docs/Web/API/Blob) — ce terme est une abbréviation de "Binary Large Object" (large objet binaire) et peut être utilisé pour représenter de gros objets fichier — tels que des fichiers images ou vidéo.
+Cela fonctionne à peu près de la même manière que le précédent, sauf qu'au lieu d'utiliser {{domxref("Body.json","json()")}}, on utilise {{domxref("Body.blob","blob()")}} — en l'occurence, nous voulons récupérer la réponse sous la forme d'un fichier image, et le format de données que nous utilisons est [Blob](/fr/docs/Web/API/Blob) — ce terme est une abbréviation de "Binary Large Object" (large objet binaire) et peut être utilisé pour représenter de gros objets fichier — tels que des fichiers images ou vidéo.
 
-Une fois que nous avons reçu notre blob avec succès, nous créons un objet URL, en utilisant {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Cela renvoie une URL interne temporaire qui pointe vers un blob en mémoire dans le navigateur. Cet objet n'est pas très lisible, mais vous pouvez voir à quoi il ressemble en ouvrant l'application Can Store, Ctrl + Clic droit sur l'image, et sélectionner l'option "Afficher l'image" (peut légèrement varier selon le navigateur que vous utilisez). L'URL créée sera visible à l'intérieur de la barre d'adresse et devrait ressembler à quelque chose comme ça :
+Une fois que nous avons reçu notre blob avec succès, nous créons un objet URL, en utilisant {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Cela renvoie une URL interne temporaire qui pointe vers un blob en mémoire dans le navigateur. Cet objet n'est pas très lisible, mais vous pouvez voir à quoi il ressemble en ouvrant l'application Can Store, Ctrl + Clic droit sur l'image, et sélectionner l'option "Afficher l'image" (peut légèrement varier selon le navigateur que vous utilisez). L'URL créée sera visible à l'intérieur de la barre d'adresse et devrait ressembler à quelque chose comme ça :
 
     blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4
 
 ### Challenge : une version XHR de Can Store
 
-Comme exercice pratique, nous aimerions que vous essayiez de convertir la version Fetch de l'application en une version XHR. Faites une [copie du fichier ZIP](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true) et essayiez de modifier le JavaScript en conséquence.
+Comme exercice pratique, nous aimerions que vous essayiez de convertir la version Fetch de l'application en une version XHR. Faites une [copie du fichier ZIP](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true) et essayiez de modifier le JavaScript en conséquence.
 
 Quelques conseils qui pourraient s'avérer utiles :
 
@@ -368,7 +368,7 @@ Quelques conseils qui pourraient s'avérer utiles :
 - Vous allez devoir utiliser le même modèle que vous avez vu plus tôt dans l'exemple [XHR-basic.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html).
 - Vous devrez ajouter la gestion des erreurs que nous vous avons montré dans la version Fetch de Can Store :
 
-  - La réponse se situe dans `request.response` une fois que l'événement `load` a été déclenché et non dans une promesse.
+  - La réponse se situe dans `request.response` une fois que l'événement `load` a été déclenché et non dans une promesse.
   - Le meilleur équivalent à `response.ok` en XHR est de vérifier si {{domxref("XMLHttpRequest.status","request.status")}} vaut 200 ou si {{domxref("XMLHttpRequest.readyState","request.readyState")}} est égal à 4.
   - Les propriétés permettant d'obtenir le status et le message en cas d'erreur sont toujours `status` et `statusText` mais elles se situent sur l'objet `request` (XHR) et non sur l'objet `response`.
 
diff --git a/files/fr/learn/javascript/client-side_web_apis/index.md b/files/fr/learn/javascript/client-side_web_apis/index.md
index 82e3f87488..a04542e8a5 100644
--- a/files/fr/learn/javascript/client-side_web_apis/index.md
+++ b/files/fr/learn/javascript/client-side_web_apis/index.md
@@ -24,18 +24,18 @@ Lorsque vous écrivez du JavaScript côté client pour des sites Web ou des appl
 
 ## Prérequis
 
-Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série ([Premiers pas](/fr/docs/Learn/JavaScript/First_steps), [Building blocks](/fr/docs/Learn/JavaScript/Building_blocks) et [objets JavaScript](/fr/docs/Learn/JavaScript/Objects)). Ces modules impliquent tout de même un bon nombre d'utilisations simples de l'API, car il est difficile d'écrire des exemples JavaScript côté client faisant quelque chose d'utile sans eux! Ici, nous passons à un niveau supérieur, en supposant que vous connaissiez le langage JavaScript de base et explorant les APIs Web courantes de manière un peu plus détaillée.
+Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série ([Premiers pas](/fr/docs/Learn/JavaScript/First_steps), [Building blocks](/fr/docs/Learn/JavaScript/Building_blocks) et [objets JavaScript](/fr/docs/Learn/JavaScript/Objects)). Ces modules impliquent tout de même un bon nombre d'utilisations simples de l'API, car il est difficile d'écrire des exemples JavaScript côté client faisant quelque chose d'utile sans eux! Ici, nous passons à un niveau supérieur, en supposant que vous connaissiez le langage JavaScript de base et explorant les APIs Web courantes de manière un peu plus détaillée.
 
-Une connaissance basique de [HTML](/fr/docs/Learn/HTML) et [CSS](/fr/docs/Learn/CSS) serait aussi utile.
+Une connaissance basique de [HTML](/fr/docs/Learn/HTML) et [CSS](/fr/docs/Learn/CSS) serait aussi utile.
 
-> **Note :** Si vous travaillez sur un ordinateur/tablette/autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de code en ligne tel que [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/).
+> **Note :** Si vous travaillez sur un ordinateur/tablette/autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de code en ligne tel que [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/).
 
 ## Guides
 
 - [Introduction aux API du Web](/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction)
   - : Tout d'abord, nous survolerons du concept d'API — qu'est-ce que c'est, comment ça fonctionne, comment les utiliser dans votre code, et comment sont-elles structurées. Nous verrons également quelles sont les principales API et leur utilisation.
-- [Manipuler des documents](/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents)
-  - : Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.
+- [Manipuler des documents](/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents)
+  - : Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.
 - [Récupérer des données du serveur](/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data)
   - : Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail, a en vérité eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que {{domxref("XMLHttpRequest")}} et l'[API Fetch](/fr/docs/Web/API/Fetch_API).
 - [APIs tierces](/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs)
@@ -43,6 +43,6 @@ Une connaissance basique de [HTML](/fr/docs/Learn/HTML) et [CSS](/fr/docs/Lear
 - [Dessiner des éléments graphiques](/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics)
   - : Le navigateur contient des outils de programmation graphique très puissants, du langage [SVG](/fr/docs/Web/SVG) (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir [API Canvas](/fr/docs/Web/HTML/Canvas) et [WebGL](/fr/docs/Web/API/WebGL_API)). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.
 - [APIs vidéo et audio](/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs)
-  - : HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc*.* Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.
+  - : HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc*.* Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.
 - [Stockage côté client](/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage)
   - : Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage long-terme, de sauvegarder des documents ou sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur, et plus encore. Cet article explique les fondamentaux pour y parvenir.
diff --git a/files/fr/learn/javascript/client-side_web_apis/introduction/index.md b/files/fr/learn/javascript/client-side_web_apis/introduction/index.md
index 9dd6990199..b5e0871a8f 100644
--- a/files/fr/learn/javascript/client-side_web_apis/introduction/index.md
+++ b/files/fr/learn/javascript/client-side_web_apis/introduction/index.md
@@ -22,7 +22,7 @@ Tout d'abord, nous verrons dans les grandes lignes ce qu'est une API — leur fo
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Des connaissances de base en informatique, une compréhension de base du
         <a href="/fr/docs/Learn/HTML">HTML</a> et
@@ -34,7 +34,7 @@ Tout d'abord, nous verrons dans les grandes lignes ce qu'est une API — leur fo
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Vous familiariser avec les API, ce qu'elles permettent de faire, et
         comment les utiliser dans votre code.
@@ -43,7 +43,7 @@ Tout d'abord, nous verrons dans les grandes lignes ce qu'est une API — leur fo
   </tbody>
 </table>
 
-## Qu'est-ce qu'une API ?
+## Qu'est-ce qu'une API&nbsp;?
 
 Les API (_Application Programming Interfaces_ soit « interface de programmation d'application ») sont des constructions disponibles dans les langages de programmation pour permettre aux développeurs de créer plus facilement des fonctionnalités complexes. Elles s'occupent des parties de code plus complexes, fournissant au développeur une syntaxe plus facile à utiliser à la place.
 
@@ -59,7 +59,7 @@ De la même façon, par exemple, pour programmer des graphismes en 3D, il est be
 
 ### API JavaScript côté client
 
-Le JavaScript côté client en particulier a de nombreuses API à sa disposition — elles ne font pas partie du langage JavaScript lui-même, elles sont construites par-dessus JavaScript, offrant des super-pouvoirs supplémentaires à utiliser dans votre code. Elles appartiennent généralement à une des deux catégories :
+Le JavaScript côté client en particulier a de nombreuses API à sa disposition — elles ne font pas partie du langage JavaScript lui-même, elles sont construites par-dessus JavaScript, offrant des super-pouvoirs supplémentaires à utiliser dans votre code. Elles appartiennent généralement à une des deux catégories :
 
 - **Les API du navigateur** sont intégrées au navigateur web et permettent de rendre disponibles les données du navigateur et de son environnement afin de réaliser des choses complexes avec. Ainsi, [l'API Web Audio](/fr/docs/Web/API/Web_Audio_API) fournit des constructions JavaScript pour manipuler des données audio dans le navigateur. On pourra utiliser cette API afin de récupérer une piste audio puis d'abaisser son volume, d'y appliquer des effets, etc. Sous le capot, c'est le navigateur qui s'occupe des couches plus complexes en code « bas niveau » (C++ ou Rust par exemple) afin de réaliser le traitement du signal. Là encore, cette complexité est masquée par l'abstraction offerte par l'API.
 - **Les API tierces** ne sont pas intégrées au navigateur par défaut, et vous devez généralement récupérer le code de l'API et des informations depuis un site Web.
@@ -76,26 +76,26 @@ Ci-dessus, nous avons indiqué ce qu'est une API JavaScript côté client et sa
 - Les API tierces — Constructions intégrées à des plateformes tierces (par exemple Twitter, Facebook) qui permettent d'utiliser certaines fonctionnalités de ces plateformes dans vos propres pages Web (par exemple: afficher vos derniers Tweets sur votre page Web).
 - Les bibliothèques JavaScript — Habituellement, un ou plusieurs fichiers JavaScript contenant des [fonctions personnalisées](/fr/docs/Learn/JavaScript/Building_blocks/Functions#custom_functions) que vous pouvez attacher à votre page Web pour accélérer ou activer l'écriture de fonctionnalités courantes. Des exemples incluent jQuery, Mootools et React.
 - Les _frameworks_ JavaScript — Au‑dessus des bibliothèques, les _frameworks_ JavaScript (par exemple Angular et Ember) sont plutôt des packages de HTML, CSS, JavaScript et autres technologies, que vous installez puis utilisez pour écrire une application web entière.
-  La différence essentielle entre une bibliothèque et un _framework_ est « l'Inversion du Contrôle ». Avec une bibliothèque, c'est le développeur qui appelle les méthodes de la bibliothèque — il exerce le contrôle. Avec un _framework_, le contrôle est inversé : c'est le _framework_ qui appelle le code du développeur.
+  La différence essentielle entre une bibliothèque et un _framework_ est «&nbsp;l'Inversion du Contrôle&nbsp;». Avec une bibliothèque, c'est le développeur qui appelle les méthodes de la bibliothèque — il exerce le contrôle. Avec un _framework_, le contrôle est inversé&nbsp;: c'est le _framework_ qui appelle le code du développeur.
 
-## Que peuvent faire les API ?
+## Que peuvent faire les API&nbsp;?
 
 Il y a un beaucoup d'API disponibles dans les navigateurs modernes. Elles permettent de faire un large éventail de choses. Vous pouvez vous en faire une petite idée en jetant un coup d'œil à la [page de l'index des API MDN](/fr/docs/Web/API).
 
 ### API de navigateur courantes
 
-En particulier, voici les catégories d'API de navigateur les plus courantes que vous utiliserez (et que nous allons voir dans ce module plus en détail) :
+En particulier, voici les catégories d'API de navigateur les plus courantes que vous utiliserez (et que nous allons voir dans ce module plus en détail)&nbsp;:
 
 - **Les API pour manipuler des documents** chargés dans le navigateur. L'exemple le plus évident est l'[API DOM (_Document Object Model_)](/fr/docs/Web/API/Document_Object_Model). Elle permet de manipuler le HTML et CSS — créer, supprimer et modifier du code HTML, appliquer de nouveaux styles à votre page dynamiquement, etc. Par exemple, chaque fois que vous voyez une fenêtre pop-up apparaître sur une page, ou qu'un nouveau contenu affiché, c'est que le DOM est en action. Découvrez-en plus sur ces types d'API dans la rubrique [Manipuler des documents](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents).
 - **Les API pour récupérer des données du serveur**, afin de mettre à jour des sections d'une page Web, sont couramment utilisées. Ce détail apparemment anodin a eu un impact énorme sur les performances et le comportement des sites — si vous avez juste besoin de mettre à jour une liste de produits ou afficher de nouveaux articles disponibles, le faire instantanément sans avoir à recharger toute la page du serveur peut rendre le site ou l'application beaucoup plus réactif et « accrocheur ». [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) et l'[API Fetch](/fr/docs/Web/API/Fetch_API) sont les API qui rendent ça possible. Vous verrez aussi peut-être le terme **Ajax** pour qualifier cette technique. Pour en savoir plus sur ces API, voir [Récupérer des données du serveur.](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
 - **Les API pour dessiner et manipuler des graphiques** sont maintenant couramment prises en charge dans les navigateurs — les plus populaires sont [Canvas](/fr/docs/Web/API/Canvas_API) et [WebGL](/fr/docs/Web/API/WebGL_API). Elles permettent la mise à jour, par programmation, des pixels contenus dans un élément HTML [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour créer des scènes 2D et 3D. Par exemple, vous pouvez dessiner des formes comme des rectangles ou des cercles, importer une image sur le canevas, et lui appliquer un filtre sépia ou niveau de gris à l'aide de l'API Canvas ou encore créer une scène 3D complexe avec éclairage et textures en utilisant WebGL. De telles API sont souvent combinées avec d'autres API, par exemple [`window.requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), pour créer des boucles d'animation (faire des mises à jour continues de scènes) et ainsi créer des dessins animés et des jeux. Pour en savoir plus sur ces API, voir [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics).
 - **Les API audio et vidéo** comme [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement), [Web Audio API](/fr/docs/Web/API/Web_Audio_API) ou [WebRTC](/fr/docs/Web/API/WebRTC_API), permettent de faire des choses vraiment intéressantes avec du multimédia, telles que la création de contrôles UI personnalisées pour jouer de l'audio et vidéo, l'affichage de textes comme des légendes et des sous-titres, la récupération de vidéos depuis votre webcam pour l'afficher sur l'ordinateur d'une autre personne dans une visio‑conférence ou encore l'ajout d'effets sur des pistes audio (tels que le gain, la distorsion, la balance, etc.). Pour en savoir plus sur ces API, voir [API audio et vidéo](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs).
-- **Les API de périphérique** permettent essentiellement de manier et récupérer des données à partir de périphériques modernes, de manière utile pour les applications Web. Nous avons déjà parlé de l'API de géolocalisation accédant aux données d'emplacement de l'appareil afin que vous puissiez repérer votre position sur une carte. Autres exemples : indiquer à l'utilisateur qu'une mise à jour est disponible pour une application Web via des notifications système (voir l'[API Notifications](/fr/docs/Web/API/Notifications_API)) ou des vibrations (voir l'[API Vibration](/fr/docs/Web/API/Vibration_API)).
+- **Les API de périphérique** permettent essentiellement de manier et récupérer des données à partir de périphériques modernes, de manière utile pour les applications Web. Nous avons déjà parlé de l'API de géolocalisation accédant aux données d'emplacement de l'appareil afin que vous puissiez repérer votre position sur une carte. Autres exemples&nbsp;: indiquer à l'utilisateur qu'une mise à jour est disponible pour une application Web via des notifications système (voir l'[API Notifications](/fr/docs/Web/API/Notifications_API)) ou des vibrations (voir l'[API Vibration](/fr/docs/Web/API/Vibration_API)).
 - **Les API de stockage côté client** deviennent de plus en plus répandues dans les navigateurs Web — la possibilité de stocker des données côté client est très utile si vous souhaitez créer une application qui enregistre son état entre les chargements de page, et peut-être même fonctionner lorsque le périphérique est hors ligne. Il existe un certain nombre d'options disponibles, par exemple le simple stockage nom/valeur avec l'[API Web Storage](/fr/docs/Web/API/Web_Storage_API), et le stockage plus complexe de données tabulaires avec l'[API IndexedDB](/fr/docs/Web/API/IndexedDB_API). Pour en savoir plus sur ces API, voir [Stockage côté client](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage).
 
 ### API tierces courantes
 
-Il y a une grande variété d'API tierces ; en voici quelques-unes des plus populaires que vous allez probablement utiliser tôt ou tard :
+Il y a une grande variété d'API tierces ; en voici quelques-unes des plus populaires que vous allez probablement utiliser tôt ou tard&nbsp;:
 
 - [L'API Twitter](https://dev.twitter.com/overview/documentation) vous permet d'afficher vos derniers tweets sur un site web.
 - Les API de cartographie comme [Mapquest](https://developer.mapquest.com/) et [Google Maps API](https://developers.google.com/maps/) vous permettent de réaliser toute sorte de cartes dans des pages web.
@@ -125,7 +125,7 @@ Prenons comme exemple l'API Web Audio. Il s'agit d'une API assez complexe avec p
 - [`MediaElementAudioSourceNode`](/fr/docs/Web/API/MediaElementAudioSourceNode), qui représente un élément [`<audio>`](/fr/docs/Web/HTML/Element/audio) contenant du son qu'on veut jouer et manipuler dans le contexte.
 - [`AudioDestinationNode`](/fr/docs/Web/API/AudioDestinationNode), qui représente la destination de l'audio, c'est-à-dire le composant physique qui sera utilisé pour produire le son (il s'agit généralement des hauts-parleurs ou des écouteurs).
 
-Alors comment ces objets interagissent-ils ? Si vous regardez notre exemple [d'élément audio](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/web-audio/index.html) (regardez‑le [aussi en direct](https://mdn.github.io/learning-area/javascript/apis/introduction/web-audio/)), vous verrez le code suivant :
+Alors comment ces objets interagissent-ils&nbsp;? Si vous regardez notre exemple [d'élément audio](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/web-audio/index.html) (regardez‑le [aussi en direct](https://mdn.github.io/learning-area/javascript/apis/introduction/web-audio/)), vous verrez le code suivant :
 
 ```html
 <audio src="outfoxing.mp3"></audio>
diff --git a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.md b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.md
index 79886bea99..036e580063 100644
--- a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.md
+++ b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.md
@@ -142,7 +142,7 @@ D'autres types de contrôle sont disponibles comme [`mapquest.searchControl()`](
 
 ### Ajouter un marqueur personnalisé
 
-Pour ajouter une icône sur un point de la carte, on pourra utiliser la méthode [`L.marker()`](https://leafletjs.com/reference-1.3.0.html#marker)  (documentée dans la documentation de Leaflet.js). Dans `window.onload`, vous pouvez ajouter le fragment de code suivante `window.onload` :
+Pour ajouter une icône sur un point de la carte, on pourra utiliser la méthode [`L.marker()`](https://leafletjs.com/reference-1.3.0.html#marker)  (documentée dans la documentation de Leaflet.js). Dans `window.onload`, vous pouvez ajouter le fragment de code suivante `window.onload` :
 
 ```js
 L.marker([53.480759, -2.242631], {
@@ -252,7 +252,7 @@ Tout d'abord, vous devrez créer une connexion entre l'API et votre application.
 `submitSearch()` commence par réinitialiser le nombre de page à 0 puis appelle `fetchResults()`. Cette fonction commence par appeler [`preventDefault()`](/fr/docs/Web/API/Event/preventDefault) sur l'évènement afin d'empêcher l'envoi du formulaire vers notre serveur (ce qui casserait l'exemple). Ensuite, on assemble la chaîne de caractères qui formera l'URL sur laquelle on fera la requête. Dans cette URL, on commence par mettre les fragments « obligatoires » (en tout cas pour cette démonstration) :
 
 - L'URL de base (telle que fournie par la variable `baseURL`).
-- La clé d'API qui a été passée au paramètre d'URL  `api-key` et dont la valeur dans notre script est fournie par la variable `key`.
+- La clé d'API qui a été passée au paramètre d'URL  `api-key` et dont la valeur dans notre script est fournie par la variable `key`.
 - Le nombre de pages est fourni dans l'URL avec le paramètre `page` et provient de la variable `pageNumber` dans notre script.
 - Le terme de la recherche est fourni dans l'URL avec le paramètre `q` et provient du texte `searchTerm` fourni par l'élément {{htmlelement("input")}}.
 - Le type de document qu'on souhaite obtenir dans les résultats est une expression passée via le paramètre `fq` de l'URL. Ici, on souhaite obtenir les articles.
@@ -353,7 +353,7 @@ Il y a pas mal de code ici. Reprenons étape par étape pour l'expliquer :
 
 - La boucle [`while`](/fr/docs/Web/JavaScript/Reference/Instructions/while) est utilisée afin de supprimer tout le contenu d'un élément du DOM. Dans ce cas, on enlève ce qu'il y a dans l'élément {{htmlelement("section")}}. On teste si la `<section>` possède un élément fils et si c'est le cas, on retire le premier, ainsi de suite jusqu'à ce que l'élément `<section>` n'ait plus d'éléments fils.
 - Ensuite, on renseigne la variable `articles` avec `json.response.docs` : le tableau contenant les objets qui représentent les articles renvoyés par la recherche. Ce renommage sert uniquement à rendre le code plus simple.
-- Le premier bloc [`if()`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) vérifie si 10 ont été renvoyés par l'API  (cette dernière envoie les articles par bloc de 10 à chaque appel). Dans ce cas, on affiche l'élément {{htmlelement("nav")}} qui contient des boutons de pagination _10 articles précédents_/_10 articles suivants_. S'il y a moins de 10 articles, tout le contenu tiendra sur une page et il ne sera pas nécessaire d'avoir les boutons. Nous verrons comment « câbler » ces boutons pour qu'ils fonctionnent dans la prochaine section.
+- Le premier bloc [`if()`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) vérifie si 10 ont été renvoyés par l'API  (cette dernière envoie les articles par bloc de 10 à chaque appel). Dans ce cas, on affiche l'élément {{htmlelement("nav")}} qui contient des boutons de pagination _10 articles précédents_/_10 articles suivants_. S'il y a moins de 10 articles, tout le contenu tiendra sur une page et il ne sera pas nécessaire d'avoir les boutons. Nous verrons comment « câbler » ces boutons pour qu'ils fonctionnent dans la prochaine section.
 - Le bloc `if()` suivant sert à vérifier si aucun article n'a été renvoyé. Lorsqu'il n'y a aucun résultat, on crée un élément {{htmlelement("p")}} qui affiche le texte "Aucun résultat reçu" puis on insère ce paragraphe dans l'élément `<section>`.
 - Si des articles sont renvoyés, on commence par créer les éléments qu'on souhaite utiliser afin de les afficher puis on insère le contenu dans chaque puis on insère ces éléments dans le DOM. Pour connaître les propriétés des objets obtenues via l'API, nous avons consulté la référence de l'API _Article Search_ (voir [les API NYTimes](https://developer.nytimes.com/apis)). La plupart de ces opérations sont assez parlantes mais voici quelques-unes qui sont notables :
 
diff --git a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
index c29906bb7f..9402734f17 100644
--- a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
+++ b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
@@ -16,14 +16,14 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}}
 
-HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc*.* Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.
+HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc*.* Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.
 
 <table class="standard-table">
   <tbody>
     <tr>
       <th scope="row">Prérequis:</th>
       <td>
-        Les bases du JavaScript (voir <a
+        Les bases du JavaScript (voir <a
           href="/fr/docs/Learn/JavaScript/First_steps"
           >premiers pas en JavaScript</a
         >,
@@ -31,7 +31,7 @@ HTML5 fournit des éléments pour intégrer du multimédia dans les documents �
           >les briques Javascript</a
         >,
         <a href="/fr/docs/Learn/JavaScript/Objects">Introduction aux objets</a
-        >), <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction"
+        >), <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction"
           >Introduction aux APIs web</a
         >
       </td>
@@ -46,9 +46,9 @@ HTML5 fournit des éléments pour intégrer du multimédia dans les documents �
   </tbody>
 </table>
 
-## Les balises HTML5 video et audio
+## Les balises HTML5 video et audio
 
-Les balises {{htmlelement("video")}} et {{htmlelement("audio")}} permettent d'intégrer des vidéos et de l'audio dans des pages web. Comme nous l'avons montré dans [Contenu audio et vidéo](/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video), une implémentation habituelle ressemble à ça :
+Les balises {{htmlelement("video")}} et {{htmlelement("audio")}} permettent d'intégrer des vidéos et de l'audio dans des pages web. Comme nous l'avons montré dans [Contenu audio et vidéo](/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video), une implémentation habituelle ressemble à ça :
 
 ```html
 <video controls>
@@ -62,17 +62,17 @@ Cela crée un lecteur vidéo à l'intérieur du navigateur:
 
 {{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html", '100%', 380)}}
 
-Vous pouvez consulter toutes fonctionnalités HTML audio et vidéo dans l'article mentionné précédemment. Pour notre utilisation ici, l'attribut le plus intéressant est {{htmlattrxref("controls", "video")}}. Il permet d'activer l'ensemble des contrôles de lecture par défaut; si vous ne le spécifiez pas, vous aucun contrôle ne sera affiché:
+Vous pouvez consulter toutes fonctionnalités HTML audio et vidéo dans l'article mentionné précédemment. Pour notre utilisation ici, l'attribut le plus intéressant est {{htmlattrxref("controls", "video")}}. Il permet d'activer l'ensemble des contrôles de lecture par défaut; si vous ne le spécifiez pas, vous aucun contrôle ne sera affiché:
 
 {{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats-no-controls.html", '100%', 380)}}
 
-Ce n'est pas immédiatement utile pour la lecture de vidéos, mais ça a des avantages. Les contrôles natifs des navigateurs différent complètement d'un navigateur à l'autre — ce qui est embêtant pour un support global des différents navigateurs. Un autre problème est que le contrôles natifs sont généralement assez peu accessibles au clavier.
+Ce n'est pas immédiatement utile pour la lecture de vidéos, mais ça a des avantages. Les contrôles natifs des navigateurs différent complètement d'un navigateur à l'autre — ce qui est embêtant pour un support global des différents navigateurs. Un autre problème est que le contrôles natifs sont généralement assez peu accessibles au clavier.
 
 Vous pouvez régler ces deux problèmes en cachant les contrôles natifs (en supprimant l'attribut `controls`) et en les remplaçant par les votres en HTML, CSS et JavaScript. Dans la prochaine section, nous verrons les outils de base à notre disposition pour faire ça.
 
 ## L'API HTMLMediaElement
 
-L'API {{domxref("HTMLMediaElement")}}, spécifiée dans HTML5, fournit des fonctionnalités qui permettent de controller des lecteurs audio et vidéo avec JavaScript — avec par exemple {{domxref("HTMLMediaElement.play()")}} ou encore {{domxref("HTMLMediaElement.pause()")}}. Cette interface est disponible à la fois pour les balises {{htmlelement("audio")}} et {{htmlelement("video")}}, les fonctionnalités utiles pour les deux étant quasiment identiques. Voyons un exemple pour découvrir ces fonctionnalités.
+L'API {{domxref("HTMLMediaElement")}}, spécifiée dans HTML5, fournit des fonctionnalités qui permettent de controller des lecteurs audio et vidéo avec JavaScript — avec par exemple {{domxref("HTMLMediaElement.play()")}} ou encore {{domxref("HTMLMediaElement.pause()")}}. Cette interface est disponible à la fois pour les balises {{htmlelement("audio")}} et {{htmlelement("video")}}, les fonctionnalités utiles pour les deux étant quasiment identiques. Voyons un exemple pour découvrir ces fonctionnalités.
 
 Notre exemple final ressemblera (et fonctionnera) comme ceci:
 
@@ -80,9 +80,9 @@ Notre exemple final ressemblera (et fonctionnera) comme ceci:
 
 ### Débuter
 
-Pour commencer avec cet exemple, [télechargez notre media-player-start.zip](https://github.com/mdn/learning-area/raw/master/javascript/apis/video-audio/start/media-player-start.zip) et décompressez-le dans un nouveau dossier sur votre disque dur. Si vous avez téléchargé notre dépôt d'exemples, vous le trouverez dans `javascript/apis/video-audio/start/`.
+Pour commencer avec cet exemple, [télechargez notre media-player-start.zip](https://github.com/mdn/learning-area/raw/master/javascript/apis/video-audio/start/media-player-start.zip) et décompressez-le dans un nouveau dossier sur votre disque dur. Si vous avez téléchargé notre dépôt d'exemples, vous le trouverez dans `javascript/apis/video-audio/start/`.
 
-Si vous ouvrez la page HTML, vous devriez voir un lecteur HTML5 utilisant les contrôles natifs.
+Si vous ouvrez la page HTML, vous devriez voir un lecteur HTML5 utilisant les contrôles natifs.
 
 #### Exploration du HTML
 
@@ -90,30 +90,30 @@ Ouvrez le fichier HTML d'index. Vous allez voir que le HTML contient majoritaire
 
 ```html
 <div class="player">
-  <video controls>
-    <source src="video/sintel-short.mp4" type="video/mp4">
-    <source src="video/sintel-short.mp4" type="video/webm">
-    <!-- fallback contenu ici -->
-  </video>
-  <div class="controls">
-    <button class="play" data-icon="P" aria-label="bascule lecture pause"></button>
-    <button class="stop" data-icon="S" aria-label="stop"></button>
-    <div class="timer">
+  <video controls>
+    <source src="video/sintel-short.mp4" type="video/mp4">
+    <source src="video/sintel-short.mp4" type="video/webm">
+    <!-- fallback contenu ici -->
+  </video>
+  <div class="controls">
+    <button class="play" data-icon="P" aria-label="bascule lecture pause"></button>
+    <button class="stop" data-icon="S" aria-label="stop"></button>
+    <div class="timer">
       <div></div>
       <span aria-label="timer">00:00</span>
     </div>
-    <button class="rwd" data-icon="B" aria-label="retour arrière"></button>
-    <button class="fwd" data-icon="F" aria-label="avance rapide"></button>
-  </div>
+    <button class="rwd" data-icon="B" aria-label="retour arrière"></button>
+    <button class="fwd" data-icon="F" aria-label="avance rapide"></button>
+  </div>
 </div>
 ```
 
 - Le lecteur complet est englobé dans une balise {{htmlelement("div")}} pour pouvoir appliquer du style sur le bloc complet si nécessaire.
 - La balise {{htmlelement("video")}} contient deux éléments {{htmlelement("source")}} pour permettre la lecture du média selon les capacités de chaque navigateur.
-- La partie _controls_ du HTML est la plus intéressante:
+- La partie _controls_ du HTML est la plus intéressante:
 
   - Il contient 4 {{htmlelement("button")}} : lecture/mise en pause, stop, retour arrière et avance rapide.
-  - Chaque `<button>` a un nom de classe, un attribut `data-icon` (pour définir l'icône affichée), et un attribut `aria-label` (qui fournit une description de chaque bouton pour le rendre accessible). Le contenu d'un attribut `aria-label` est lu par les lecteurs d'écran quand l'élément sur lequel il se situe prend le focus.
+  - Chaque `<button>` a un nom de classe, un attribut `data-icon` (pour définir l'icône affichée), et un attribut `aria-label` (qui fournit une description de chaque bouton pour le rendre accessible). Le contenu d'un attribut `aria-label` est lu par les lecteurs d'écran quand l'élément sur lequel il se situe prend le focus.
   - Il y a également un élément {{htmlelement("div")}}, qui affiche le temps écoulé quand la vidéo est en cours de lecture. Pour s'amuser, nous avons mis deux mécanismes en place — un {{htmlelement("span")}} qui affiche le temps écoulé en minutes/secondes, et un autre `<div>` pour afficher une barre de progrès. Pour vous faire une idée du produit final, vous pouvez jeter un d'oeil à [la version finie](https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/).
 
 #### Exploration du CSS
@@ -238,7 +238,7 @@ Nous avons déjà une interface HTML et CSS assez complète; nous avons maintena
 
     - L'élément `<video>`, et la barre de contrôle.
     - Les boutons play/pause, stop, retour arrière, et avance rapide.
-    - Le `<div>` externe, le `<span>` qui décompte le temps écoulé, et le `<div>` interne qui affiche le progrès de la vidéo.
+    - Le `<div>` externe, le `<span>` qui décompte le temps écoulé, et le `<div>` interne qui affiche le progrès de la vidéo.
 
 3.  Ensuite, insérez ce qui suit en bas de votre code:
 
@@ -273,7 +273,7 @@ Imlémentons le contrôle le plus important — le bouton play/pause.
     }
     ```
 
-    Ici, nous utilisons une instruction [`if`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) pour vérifier si la vidéo est en pause. La propriété {{domxref("HTMLMediaElement.paused")}} retourne vrai si le média est en pause — c'est le cas quand la vidéo n'est pas en cours de lecture, y compris quand la vidéo est au début après son chargement. Si elle est en pause, nous définissons la valeur de l'attribut `data-icon` à "u", qui est une icône "en pause", et invoquons la  méthode {{domxref("HTMLMediaElement.play()")}} pour jouer le média.
+    Ici, nous utilisons une instruction [`if`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) pour vérifier si la vidéo est en pause. La propriété {{domxref("HTMLMediaElement.paused")}} retourne vrai si le média est en pause — c'est le cas quand la vidéo n'est pas en cours de lecture, y compris quand la vidéo est au début après son chargement. Si elle est en pause, nous définissons la valeur de l'attribut `data-icon` à "u", qui est une icône "en pause", et invoquons la méthode {{domxref("HTMLMediaElement.play()")}} pour jouer le média.
 
     Au second clic, le bouton sera de nouveau alterné — l'icône "play" sera affiché, et la vidéo sera mise en pause avec {{domxref("HTMLMediaElement.paused()")}}.
 
@@ -298,7 +298,7 @@ Imlémentons le contrôle le plus important — le bouton play/pause.
     }
     ```
 
-    Il n'y a pas de méthode `stop()` dans l'API  HTMLMediaElement — l'équivalent du stop est de mettre `pause()` sur la vidéo, et de définir la propriété {{domxref("HTMLMediaElement.currentTime","currentTime")}} à 0. Définir une valeur à `currentTime` (en secondes) change immédiatement la position du temps du média.
+    Il n'y a pas de méthode `stop()` dans l'API HTMLMediaElement — l'équivalent du stop est de mettre `pause()` sur la vidéo, et de définir la propriété {{domxref("HTMLMediaElement.currentTime","currentTime")}} à 0. Définir une valeur à `currentTime` (en secondes) change immédiatement la position du temps du média.
 
     Tout ce qui nous reste à faire après ça est d'afficher l'icône "play". Que la vidéo ait été en train de jouer ou en pause, quand le bouton stop est pressé, vous voulez qu'elle doit prête à être lue.
 
@@ -357,7 +357,7 @@ Il y a différentes manières d'implémenter le retour arrière et l'avance rapi
     1.  Nous effaçons les classes et intervales qui sont définits sur la fonctionnalité d'avance rapide — de cette manière, si on presse le bouton `rwd` après avoir pressé le bouton `fwd`, on annule l'avance rapide et la remplaçons avec le retour arrière. Si on essayait de faire les deux à la fois, le lecteur échouerait.
     2.  Nous utilisons une instruction `if` pour vérifier si la classe `active` a été définie sur le bouton `rwd`, ce qui indique qu'il a déjà été pressé. La propriété {{domxref("classList")}} est une propriété plutôt pratique qui existe sur chaque élément — elle contient une liste de toutes les classes définies sur l'élément, ainsi que des méthodes pour en ajouter/supprimer, etc. Nous utilisons la méthode `classList.contains()` pour vérifier si la liste contient la classe `active`. Cela retourne un booléen `true`/`false` en résultat.
     3.  Si la classe `active` a été définie sur le bouton `rwd`, nous la supprimons avec `classList.remove()`, effaçons l'intervale qui a été définit sur le bouton quand il a été pressé (voir ci-dessous pour plus d'explication), et utilisons {{domxref("HTMLMediaElement.play()")}} pour annuler le retour arrière et démarrer la vidéo normalement.
-    4.  Sinon, nous ajoutons la classe `active` sur le bouton `rwd` avec `classList.add()`, mettons la vidéo en pause en utilisant {{domxref("HTMLMediaElement.pause()")}}, puis définissons la variable `intervalRwd` en appelant {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. Quand elle invoquée, la fonction `setInterval()` créé un intervale actif, ce qui signifie qu'une fonction donnée en paramètre est exécutée toutes les x millisecondes — x est la valeur du 2ème paramètre. Ainsi, nous exécutons ici la fonction `windBackward()` toutes les 200 millisecondes — nous utiliserons cette fonction pour retourner la fonction en arrière de manière constante. Pour stopper un intervale actif, vous devez appeler {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} en lui donnant l'intervale à arrêter en paramètre, dans notre cas il est stocké dans la variable `intervalRwd` (voir l'appel à `clearInterval()` effectué plus tôt dans la fonction).
+    4.  Sinon, nous ajoutons la classe `active` sur le bouton `rwd` avec `classList.add()`, mettons la vidéo en pause en utilisant {{domxref("HTMLMediaElement.pause()")}}, puis définissons la variable `intervalRwd` en appelant {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. Quand elle invoquée, la fonction `setInterval()` créé un intervale actif, ce qui signifie qu'une fonction donnée en paramètre est exécutée toutes les x millisecondes — x est la valeur du 2ème paramètre. Ainsi, nous exécutons ici la fonction `windBackward()` toutes les 200 millisecondes — nous utiliserons cette fonction pour retourner la fonction en arrière de manière constante. Pour stopper un intervale actif, vous devez appeler {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} en lui donnant l'intervale à arrêter en paramètre, dans notre cas il est stocké dans la variable `intervalRwd` (voir l'appel à `clearInterval()` effectué plus tôt dans la fonction).
 
 3.  Pour en finir avec cette section, nous devons définir les fonctions `windBackward()` et `windForward()` invoquées dans les appels `setInterval()`. Ajoutez ce qui suit après les deux fonctions précédentes:
 
@@ -431,7 +431,7 @@ C'est une fonction assez longue, alors allons-y étape par étape:
 
 1.  Tout d'abord, nous récupérons le nombre de minutes et de secondes à partir de {{domxref("HTMLMediaElement.currentTime")}}.
 2.  Ensuite, on initialise deux variables supplémentaires — `minuteValue` et `secondValue`.
-3.  Les deux instructions `if` qui suivent déterminent si le nombre de minutes et secondes est inférieur à 10. Si c'est le cas, on ajoute un zéro à gauche pour afficher le numéro sur deux chiffres — comme sur une horloge digitale.
+3.  Les deux instructions `if` qui suivent déterminent si le nombre de minutes et secondes est inférieur à 10. Si c'est le cas, on ajoute un zéro à gauche pour afficher le numéro sur deux chiffres — comme sur une horloge digitale.
 4.  Le temps est au final la concaténation de `minuteValue`, un caractère deux-points, et `secondValue`.
 5.  Le temps qu'on vient de définir devient la valeur {{domxref("Node.textContent")}} du décompte, pour qu'il s'affiche dans l'interface utilisateur.
 6.  La largeur que nous devons donner `<div>` intérieur est calculée en récupérant la largeur du `<div>` externe (la propriété {{domxref("HTMLElement.clientWidth", "clientWidth")}} retourne la largeur de l'élément), et en la multipliant par {{domxref("HTMLMediaElement.currentTime")}} divisé par le total {{domxref("HTMLMediaElement.duration")}} du média.
@@ -465,7 +465,7 @@ Je pense que nous vous en avons suffisamment appris dans cet article. L'API {{do
 Voici quelques suggestions de modifications à apporter à l'exemple que nous avons construit:
 
 1.  Si la vidéo dure plus d'une heure, le temps écoulé va bien afficher les minutes et les secondes mais pas les heures. Changez l'exemple pour lui faire afficher les heures.
-2.  Parce que les éléments `<audio>` ont la même fonctionnalité {{domxref("HTMLMediaElement")}} de disponible, vous pouvez faire fonctionner ce lecteur avec un élément `<audio>`. Essayez  de le faire.
+2.  Parce que les éléments `<audio>` ont la même fonctionnalité {{domxref("HTMLMediaElement")}} de disponible, vous pouvez faire fonctionner ce lecteur avec un élément `<audio>`. Essayez de le faire.
 3.  Trouvez un moyen de transformer le `<div>` interne en une véritable barre de progrès — quand vous cliquez quelque part sur la barre, vous vous déplacez à la position relative dans la vidéo. Un indice: vous pouvez trouver les valeurs X et Y des côtés gauche/droite et haut/bas d'un l'élément via la méthode [`getBoundingClientRect()`](/fr/docs/Web/API/Element/getBoundingClientRect), et vous pouvez trouver les coordonnées de la souris au moment du clic à l'intérieur de l'objet `event` du clic, appelé sur l'objet {{domxref("Document")}}. Par exemple:
 
     ```js
diff --git a/files/fr/learn/javascript/first_steps/a_first_splash/index.md b/files/fr/learn/javascript/first_steps/a_first_splash/index.md
index 8d609a1857..6bf0fbfd96 100644
--- a/files/fr/learn/javascript/first_steps/a_first_splash/index.md
+++ b/files/fr/learn/javascript/first_steps/a_first_splash/index.md
@@ -16,7 +16,7 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}
 
-Maintenant que vous avez appris quelques éléments théoriques sur le JavaScript, et ce que vous pouvez faire avec, nous allons vous donner un cours intensif sur les fonctionnalités basiques du JavaScript avec un tutoriel entièrement pratique. Vous allez construire un jeu simple, étape par étape. Il s'agit de faire deviner un nombre, notre jeu s'appelle « Guess the number ».
+Maintenant que vous avez appris quelques éléments théoriques sur le JavaScript, et ce que vous pouvez faire avec, nous allons vous donner un cours intensif sur les fonctionnalités basiques du JavaScript avec un tutoriel entièrement pratique. Vous allez construire un jeu simple, étape par étape. Il s'agit de faire deviner un nombre, notre jeu s'appelle «&nbsp;Guess the number&nbsp;».
 
 <table class="standard-table">
   <tbody>
@@ -34,15 +34,15 @@ Maintenant que vous avez appris quelques éléments théoriques sur le JavaScri
   </tbody>
 </table>
 
-Ne vous attendez pas à comprendre tout le code en détail immédiatement — nous voulons simplement vous présenter les grands concepts pour le moment, et vous donner une idée de la façon dont JavaScript (et d'autres langages de programmation) fonctionne. Dans les articles suivants, vous reviendrez plus en détails sur toutes ces fonctionnalités !
+Ne vous attendez pas à comprendre tout le code en détail immédiatement — nous voulons simplement vous présenter les grands concepts pour le moment, et vous donner une idée de la façon dont JavaScript (et d'autres langages de programmation) fonctionne. Dans les articles suivants, vous reviendrez plus en détails sur toutes ces fonctionnalités&nbsp;!
 
 > **Note :** De nombreuses fonctionnalités que vous allez voir en JavaScript sont identiques à celles d'autres langages de programmation — fonctions, boucles, etc. La syntaxe du code est différente mais les concepts sont globalement identiques.
 
 ## Penser comme un programmeur
 
-Une des choses les plus difficiles à apprendre en programmation n'est pas la syntaxe, mais comment l'appliquer afin de résoudre un problème réel. Vous devez commencer à penser comme un programmeur — ce qui implique généralement d'examiner les tâches que votre programme doit effectuer, de déterminer les fonctionnalités du code nécessaires à leurs réalisations et comment les faire fonctionner ensemble.
+Une des choses les plus difficiles à apprendre en programmation n'est pas la syntaxe, mais comment l'appliquer afin de résoudre un problème réel. Vous devez commencer à penser comme un programmeur — ce qui implique généralement d'examiner les tâches que votre programme doit effectuer, de déterminer les fonctionnalités du code nécessaires à leurs réalisations et comment les faire fonctionner ensemble.
 
-Cela requiert un mélange de travail acharné, d'expérience avec la syntaxe de programmation (de manière générale) et surtout de la pratique — ainsi qu'un peu de créativité. Plus vous allez coder, plus vous aller vous améliorer. On ne peut pas garantir que vous aurez un « cerveau de développeur » en 5 minutes, mais nous allons vous donner plein d'occasions pour pratiquer cette façon de penser, tout au long du cours.
+Cela requiert un mélange de travail acharné, d'expérience avec la syntaxe de programmation (de manière générale) et surtout de la pratique — ainsi qu'un peu de créativité. Plus vous allez coder, plus vous aller vous améliorer. On ne peut pas garantir que vous aurez un «&nbsp;cerveau de développeur&nbsp;» en 5 minutes, mais nous allons vous donner plein d'occasions pour pratiquer cette façon de penser, tout au long du cours.
 
 Maintenant que vous avez cela en tête, regardons l'exemple que nous allons construire dans cet article et comment le découper en plusieurs tâches qui ont du sens.
 
@@ -165,7 +165,7 @@ Essayez de jouer et familiarisez-vous avec ce jeu avant de continuer.
 
 Imaginons que votre patron vous ait donné le résumé suivant pour créer ce jeu :
 
-> Je vous demande de créer un jeu simple de devinette de nombre. Le jeu choisit aléatoirement un nombre entre 1 et 100, puis il met le joueur au défi de le deviner en 10 tentatives maxi. À chaque tour, le joueur doit être informé s'il a deviné ou non le bon nombre — si ce n'est pas le cas, le jeu lui indique si son estimation est trop basse ou trop élevée. Le jeu doit également rappeler au joueur les nombres déjà proposés. Le jeu se termine quand le joueur a deviné le nombre mystère, ou s'il a épuisé ses 10 chances. À la fin du jeu, le joueur a la possibilité de débuter une nouvelle partie.
+> Je vous demande de créer un jeu simple de devinette de nombre. Le jeu choisit aléatoirement un nombre entre 1 et 100, puis il met le joueur au défi de le deviner en 10 tentatives maxi. À chaque tour, le joueur doit être informé s'il a deviné ou non le bon nombre — si ce n'est pas le cas, le jeu lui indique si son estimation est trop basse ou trop élevée. Le jeu doit également rappeler au joueur les nombres déjà proposés. Le jeu se termine quand le joueur a deviné le nombre mystère, ou s'il a épuisé ses 10 chances. À la fin du jeu, le joueur a la possibilité de débuter une nouvelle partie.
 
 La première chose à faire en regardant ce résumé, c'est de le décomposer en tâches simples et codables comme le ferait un programmeur :
 
@@ -198,9 +198,9 @@ Voyons maintenant comment nous pouvons transformer ces étapes en code. Nous all
 
 ### Configuration initiale
 
-Pour commencer ce didacticiel, faites une copie locale du fichier [number-guessing-game-start.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html)  (à voir [directement ici](http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html)). Ouvrez-le dans votre éditeur de code et votre navigateur web. Pour l'instant, vous ne verrez qu'un titre, un paragraphe d'instructions et un formulaire pour entrer une estimation, mais le formulaire est pour l'instant inactif.
+Pour commencer ce didacticiel, faites une copie locale du fichier [number-guessing-game-start.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html)  (à voir [directement ici](http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html)). Ouvrez-le dans votre éditeur de code et votre navigateur web. Pour l'instant, vous ne verrez qu'un titre, un paragraphe d'instructions et un formulaire pour entrer une estimation, mais le formulaire est pour l'instant inactif.
 
-L'endroit où nous allons ajouter tout notre code se trouve dans l'élément {{htmlelement ("script")}} au bas du code HTML :
+L'endroit où nous allons ajouter tout notre code se trouve dans l'élément {{htmlelement ("script")}} au bas du code HTML&nbsp;:
 
 ```html
 <script>
@@ -212,7 +212,7 @@ L'endroit où nous allons ajouter tout notre code se trouve dans l'élément {{h
 
 ### Ajouter des variables pour stocker les données
 
-Commençons. Tout d'abord, ajoutez les lignes suivantes dans l'élément {{htmlelement ("script")}} :
+Commençons. Tout d'abord, ajoutez les lignes suivantes dans l'élément {{htmlelement ("script")}}&nbsp;:
 
 ```js
 let randomNumber = Math.floor(Math.random() * 100) + 1;
@@ -228,12 +228,12 @@ let guessCount = 1;
 let resetButton;
 ```
 
-Cette partie de code définit les variables nécessaires au stockage des données que notre programme utilisera. Les variables sont essentiellement des conteneurs de valeurs (tels que des nombres ou des chaînes de texte). Une variable se crée avec le mot-clé `let` suivi du nom de la variable. Vous pouvez ensuite attribuer une valeur à la variable avec le signe égal (`=`) suivi de la valeur que vous voulez lui donner.
+Cette partie de code définit les variables nécessaires au stockage des données que notre programme utilisera. Les variables sont essentiellement des conteneurs de valeurs (tels que des nombres ou des chaînes de texte). Une variable se crée avec le mot-clé `let` suivi du nom de la variable. Vous pouvez ensuite attribuer une valeur à la variable avec le signe égal (`=`) suivi de la valeur que vous voulez lui donner.
 
-Dans notre exemple :
+Dans notre exemple&nbsp;:
 
 - La première variable — `randomNumber` — reçoit le nombre aléatoire entre 1 et 100, calculé en utilisant un algorithme mathématique.
-- Les trois variables suivantes sont chacune faite pour stocker une référence aux paragraphes de résultats dans le HTML ; elles sont utilisées pour insérer des valeurs dans les paragraphes plus tard dans le code :
+- Les trois variables suivantes sont chacune faite pour stocker une référence aux paragraphes de résultats dans le HTML ; elles sont utilisées pour insérer des valeurs dans les paragraphes plus tard dans le code :
 
   ```html
   <p class="guesses"></p>
@@ -241,7 +241,7 @@ Dans notre exemple :
   <p class="lowOrHi"></p>
   ```
 
-- Les deux variables suivantes stockent des références au champ de saisie du formulaire et au bouton de soumission ; elles sont utilisées pour écouter l'envoi de la supposition (guess) plus tard.
+- Les deux variables suivantes stockent des références au champ de saisie du formulaire et au bouton de soumission ; elles sont utilisées pour écouter l'envoi de la supposition (guess) plus tard.
 
   ```html
   <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
@@ -254,7 +254,7 @@ Dans notre exemple :
 
 ### Fonctions
 
-Ajoutez maintenant ce qui suit dans votre code JavaScript :
+Ajoutez maintenant ce qui suit dans votre code JavaScript&nbsp;:
 
 ```js
 function checkGuess() {
@@ -264,7 +264,7 @@ function checkGuess() {
 
 Les fonctions sont des blocs de code réutilisables que vous pouvez écrire une fois et exécuter encore et encore, pour éviter de réécrire le même code tout le temps. C'est vraiment utile. Il y a plusieurs façons de définir les fonctions, mais pour l'instant nous allons nous concentrer sur un type simple. Ici, nous avons défini une fonction en utilisant le mot-clé `function` accompagné de son nom suivi de parenthèses. Ensuite, nous avons mis deux accolades (`{ }`). Dans ces accolades est placé tout le code à exécuter à chaque appel de la fonction.
 
-Quand nous voulons exécuter le code, nous saisissons le nom de la fonction suivi des parenthèses.
+Quand nous voulons exécuter le code, nous saisissons le nom de la fonction suivi des parenthèses.
 
 Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez dans les [outils de développement et la console JavaScript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs) et entrez la ligne suivante :
 
@@ -272,15 +272,15 @@ Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez da
 checkGuess();
 ```
 
-Après avoir pressé <kbd>Entrée</kbd> ou <kbd>Retour</kbd>, vous devriez voir apparaître une alerte « Je suis un espace réservé » ; nous avons défini une fonction dans notre code créant une alerte chaque fois que nous l'appelons.
+Après avoir pressé <kbd>Entrée</kbd> ou <kbd>Retour</kbd>, vous devriez voir apparaître une alerte «&nbsp;Je suis un espace réservé&nbsp;»&nbsp;; nous avons défini une fonction dans notre code créant une alerte chaque fois que nous l'appelons.
 
 > **Note :** Vous allez en apprendre beaucoup plus sur les fonctions plus tard dans ce cours.
 
 ### Opérateurs
 
-Les opérateurs en JavaScript nous permettent d'effectuer des tests, de faire des calculs, de joindre des chaînes ensemble et d'autres choses de ce genre.
+Les opérateurs en JavaScript nous permettent d'effectuer des tests, de faire des calculs, de joindre des chaînes ensemble et d'autres choses de ce genre.
 
-Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les [outils de développement et la console Javascript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs). Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes « Exemple » exactement comme indiqué, en appuyant sur la touche <kbd>Entrée</kbd> du clavier après chacun et regardez le résultat renvoyé. Si vous n'avez pas facilement accès aux outils de développement du navigateur, vous pouvez toujours utiliser la console intégrée ci-dessous :
+Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les [outils de développement et la console Javascript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs). Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes «&nbsp;Exemple&nbsp;» exactement comme indiqué, en appuyant sur la touche <kbd>Entrée</kbd> du clavier après chacun et regardez le résultat renvoyé. Si vous n'avez pas facilement accès aux outils de développement du navigateur, vous pouvez toujours utiliser la console intégrée ci-dessous&nbsp;:
 
 ```html hidden
 <!DOCTYPE html>
@@ -359,8 +359,8 @@ Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affi
       inputDiv.focus();
 
       if (document.querySelectorAll('div').length > 1) {
-        inputForm.focus();
-      }
+        inputForm.focus();
+      }
 
       inputForm.addEventListener('change', executeCode);
     }
@@ -376,7 +376,7 @@ Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affi
       let outputPara = document.createElement('p');
 
       outputDiv.setAttribute('class','output');
-      outputPara.textContent = 'Résultat : ' + result;
+      outputPara.textContent = 'Résultat&nbsp;: ' + result;
       outputDiv.appendChild(outputPara);
       document.body.appendChild(outputDiv);
 
@@ -394,7 +394,7 @@ Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affi
 
 {{ EmbedLiveSample('Opérateurs', '100%', 300,"", "", "hide-codepen-jsfiddle") }}
 
-Regardons d'abord les opérateurs arithmétiques, par exemple :
+Regardons d'abord les opérateurs arithmétiques, par exemple&nbsp;:
 
 | Operator | Name           | Example   |
 | -------- | -------------- | --------- |
@@ -403,12 +403,12 @@ Regardons d'abord les opérateurs arithmétiques, par exemple :
 | `*`      | Multiplication | `3 * 7`   |
 | `/`      | Division       | `10 / 5`  |
 
-L'opérateur `+` peut aussi s'utiliser pour unir des chaînes de caractères (en informatique, on dit *concaténer*). Entrez les lignes suivantes, une par une :
+L'opérateur `+` peut aussi s'utiliser pour unir des chaînes de caractères (en informatique, on dit *concaténer*). Entrez les lignes suivantes, une par une&nbsp;:
 
 ```js
 let name = 'Bingo';
 name;
-let hello = ' dit bonjour !';
+let hello = ' dit bonjour&nbsp;!';
 hello;
 let greeting = name + hello;
 greeting;
@@ -417,35 +417,35 @@ greeting;
 Des raccourcis d'opérateurs sont également disponibles, appelés [opérateurs d'assignation](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation) augmentés. Par exemple, si vous voulez simplement ajouter une nouvelle chaîne de texte à une chaîne existante et renvoyer le résultat, vous pouvez faire :
 
 ```js
-name += ' dit bonjour !';
+name += ' dit bonjour&nbsp;!';
 ```
 
 Cela équivaut à :
 
 ```js
-name = name + ' dit bonjour !';
+name = name + ' dit bonjour&nbsp;!';
 ```
 
 Lorsque nous exécutons des tests vrai/faux (par exemple, dans des conditions — voir {{anch ("Structures conditionnelles", "ci-dessous")}}, nous utilisons des [opérateurs de comparaison](/fr/docs/Web/JavaScript/Reference/Operators/Comparison_Operators), par exemple :
 
 | Operator | Name                                            | Example                    |
 | -------- | ----------------------------------------------- | -------------------------- |
-| `===`    | Égalité stricte (est-ce exactement identique ?) | `5 === 2 + 4`              |
-| `!==`    | Non égalité (est-ce différent ?)                | `'Chris' !== 'Ch' + 'ris'` |
+| `===`    | Égalité stricte (est-ce exactement identique&nbsp;?) | `5 === 2 + 4`              |
+| `!==`    | Non égalité (est-ce différent&nbsp;?)                | `'Chris' !== 'Ch' + 'ris'` |
 | `<`      | Inférieur à                                     | `10 < 6`                   |
 | `>`      | Supérieur à                                     | `10 > 20`                  |
 
 ### Structures conditionnelles
 
-Revenons à la fonction `checkGuess()`. Nous pouvons assurément dire que nous ne souhaitons pas qu'elle renvoie un message d'emplacement réservé. Nous voulons qu'elle vérifie si la supposition du joueur est correcte ou non et qu'elle renvoie une réponse appropriée.
+Revenons à la fonction `checkGuess()`. Nous pouvons assurément dire que nous ne souhaitons pas qu'elle renvoie un message d'emplacement réservé. Nous voulons qu'elle vérifie si la supposition du joueur est correcte ou non et qu'elle renvoie une réponse appropriée.
 
-Donc, remplacez l'actuelle fonction `checkGuess()` par celle-ci :
+Donc, remplacez l'actuelle fonction `checkGuess()` par celle-ci&nbsp;:
 
 ```js
 function checkGuess(){
   let userGuess = Number(guessField.value);
   if (guessCount === 1) {
-    guesses.textContent = 'Propositions précédentes : ';
+    guesses.textContent = 'Propositions précédentes&nbsp;: ';
   }
   guesses.textContent += userGuess + ' ';
 
@@ -455,10 +455,10 @@ function checkGuess(){
     lowOrHi.textContent = '';
     setGameOver();
   } else if (guessCount === 10) {
-     lastResult.textContent = '!!! PERDU !!!';
+     lastResult.textContent = '!!! PERDU&nbsp;!!!';
      setGameOver();
   } else {
-     lastResult.textContent = 'Faux !';
+     lastResult.textContent = 'Faux&nbsp;!';
      lastResult.style.backgroundColor = 'red';
      if (userGuess < randomNumber) {
       lowOrHi.textContent = 'Le nombre saisi est trop petit !';
@@ -473,22 +473,22 @@ function checkGuess(){
 }
 ```
 
-Pas mal de code — ouf ! Passons en revue chaque section et expliquons ce qu'elle fait.
+Pas mal de code — ouf&nbsp;! Passons en revue chaque section et expliquons ce qu'elle fait.
 
-- La première ligne de la fonction (ligne 2) déclare une variable nommée `userGuess` et définit sa valeur par celle qui vient d'être saisie dans le champ de texte. Nous faisons passer aussi cette valeur par la méthode  `Number()` , juste pour nous assurer que la valeur stockée dans `userGuess` est bien un nombre.
-- Ensuite, nous rencontrons notre premier bloc de code conditionnel (lignes 3-5). Il permet d'exécuter des instructions de manière sélective, selon certaines conditions qui sont vraies ou non. Cela ressemble un peu à une fonction, mais ce n'est pas le cas. La forme la plus simple du bloc conditionnel commence par le mot clé `if`, puis parenthèses, puis des accolades `{ }`.
-  A l'intérieur de ces parenthèses, nous mettons le test. S'il renvoie `true` , nous exécutons le code à l'intérieur des accolades. Sinon, nous ne le faisons pas, et passons au morceau de code suivant. Dans ce cas, le test vérifie si la variable `guessCount` est égale à `1` (c'est-à-dire s'il s'agit de la première supposition du joueur) :
+- La première ligne de la fonction (ligne 2) déclare une variable nommée `userGuess` et définit sa valeur par celle qui vient d'être saisie dans le champ de texte. Nous faisons passer aussi cette valeur par la méthode  `Number()` , juste pour nous assurer que la valeur stockée dans `userGuess` est bien un nombre.
+- Ensuite, nous rencontrons notre premier bloc de code conditionnel (lignes 3-5). Il permet d'exécuter des instructions de manière sélective, selon certaines conditions qui sont vraies ou non. Cela ressemble un peu à une fonction, mais ce n'est pas le cas. La forme la plus simple du bloc conditionnel commence par le mot clé `if`, puis parenthèses, puis des accolades `{ }`.
+  A l'intérieur de ces parenthèses, nous mettons le test. S'il renvoie `true` , nous exécutons le code à l'intérieur des accolades. Sinon, nous ne le faisons pas, et passons au morceau de code suivant. Dans ce cas, le test vérifie si la variable `guessCount` est égale à `1` (c'est-à-dire s'il s'agit de la première supposition du joueur)&nbsp;:
 
   ```js
   guessCount === 1
   ```
 
-  Si c'est le cas, nous faisons en sorte que le texte affiché soit « Propositions précédentes : ». Sinon, nous ne le faisons pas.
+  Si c'est le cas, nous faisons en sorte que le texte affiché soit «&nbsp;Propositions précédentes&nbsp;: ». Sinon, nous ne le faisons pas.
 
 - La ligne 6 ajoute la valeur courante `userGuess` à la fin du paragraphe `guesses` , plus un espace vide de sorte qu'il y aura un espace entre chaque supposition faite.
 - Le bloc suivant (lignes 8-24) effectue quelques vérifications :
 
-  - Le premier `if(){ }` vérifie si la supposition de l'utilisateur est égale au nombre aléatoire `randomNumber` situé en haut de notre code JavaScript. Si c'est le cas, le joueur a deviné correctement et a gagné le jeu, nous affichons donc un message de félicitations d'une belle couleur verte au joueur, effaçons le contenu de la boîte d'information sur la position de l'estimation et exécutons une fonction appelée `setGameOver()`, dont nous reparlerons plus tard.
+  - Le premier `if(){ }` vérifie si la supposition de l'utilisateur est égale au nombre aléatoire `randomNumber` situé en haut de notre code JavaScript. Si c'est le cas, le joueur a deviné correctement et a gagné le jeu, nous affichons donc un message de félicitations d'une belle couleur verte au joueur, effaçons le contenu de la boîte d'information sur la position de l'estimation et exécutons une fonction appelée `setGameOver()`, dont nous reparlerons plus tard.
   - Ensuite, nous chaînons un autre test à la fin du précédent avec une structure `else if(){ }`. Cette structure vérifie si l'utilisateur a épuisé toutes ses tentatives. Si c'est le cas, le programme fait la même chose que dans le bloc précédent, mais avec un message de fin de partie au lieu d'un message de félicitations.
   - Le dernier bloc chaîné à la fin de ce code (`else { }`) contient du code qui n'est exécuté que si aucun des deux autres tests n'a renvoyé _vrai_ (c'est-à-dire que le joueur n'a pas deviné juste, mais qu'il lui reste des possibilité de supposition). Dans ce cas, nous lui disons que sa supposition est mauvaise, puis nous effectuons un autre test conditionnel pour vérifier si elle est supérieure ou inférieure à la valeur exacte et affichons un autre message approprié pour indiquer si sa supposition est trop forte ou trop faible.
 
@@ -498,8 +498,8 @@ Pas mal de code — ouf ! Passons en revue chaque section et expliquons ce qu'
 
 ### Evénements
 
-À ce stade, nous avons bien implémentée la fonction `checkGuess()`, mais elle ne s'éxecutera pas parce que nous ne l'avons pas encore appelé.
-Idéalement, nous voulons l'appeler lorsque le bouton <kbd>Soumettre</kbd> est cliqué, et pour ce faire, nous devons utiliser un événement. Les événements sont des actions qui se produisent dans le navigateur, comme le clic sur un bouton, le chargement d'une page ou la lecture d'une vidéo, en réponse à quoi nous pouvons exécuter des blocs de code. Les constructions qui écoutent l'événement en cours s'appellent des **écouteurs d'événements**, et les blocs de code exécutés en réponse à l'événement déclencheur sont appelés des **gestionnaires d'évenements**.
+À ce stade, nous avons bien implémentée la fonction `checkGuess()`, mais elle ne s'éxecutera pas parce que nous ne l'avons pas encore appelé.
+Idéalement, nous voulons l'appeler lorsque le bouton <kbd>Soumettre</kbd> est cliqué, et pour ce faire, nous devons utiliser un événement. Les événements sont des actions qui se produisent dans le navigateur, comme le clic sur un bouton, le chargement d'une page ou la lecture d'une vidéo, en réponse à quoi nous pouvons exécuter des blocs de code. Les constructions qui écoutent l'événement en cours s'appellent des **écouteurs d'événements**, et les blocs de code exécutés en réponse à l'événement déclencheur sont appelés des **gestionnaires d'évenements**.
 
 Ajoutez la ligne suivante sous l'accolade de fermeture de votre fonction `checkGuess()` :
 
@@ -507,9 +507,9 @@ Ajoutez la ligne suivante sous l'accolade de fermeture de votre fonction `checkG
 guessSubmit.addEventListener('click', checkGuess);
 ```
 
-Ici, nous ajoutons un écouteur d'événement au bouton `guessSubmit` . C'est une méthode qui prend deux valeurs d'entrée (appelées arguments) - le type d'événement que nous écoutons (dans ce cas, `click`) qui est une chaîne de caractères, et le code que nous voulons exécuter quand l'événement se produit (dans ce cas, la fonction `checkGuess()`  — notez que nous n'avons pas besoin de spécifier les parenthèses lors de l'écriture dans {{domxref("EventTarget.addEventListener", "addEventListener()")}}).
+Ici, nous ajoutons un écouteur d'événement au bouton `guessSubmit` . C'est une méthode qui prend deux valeurs d'entrée (appelées arguments) - le type d'événement que nous écoutons (dans ce cas, `click`) qui est une chaîne de caractères, et le code que nous voulons exécuter quand l'événement se produit (dans ce cas, la fonction `checkGuess()`  — notez que nous n'avons pas besoin de spécifier les parenthèses lors de l'écriture dans {{domxref("EventTarget.addEventListener", "addEventListener()")}}).
 
-Essayez d'enregistrer et d'actualiser votre code, votre exemple devrait désormais fonctionner, jusqu'à un certain point. Maintenant, le seul problème est que si vous devinez la bonne réponse ou si vous n'avez plus de tours à jouer, le jeu "va se casser" parce que nous n'avons pas encore implémenté la fonction `setGameOver()` dont le rôle est de terminer proprement le jeu. Ajoutons maintenant le code manquant pour compléter notre exemple.
+Essayez d'enregistrer et d'actualiser votre code, votre exemple devrait désormais fonctionner, jusqu'à un certain point. Maintenant, le seul problème est que si vous devinez la bonne réponse ou si vous n'avez plus de tours à jouer, le jeu "va se casser" parce que nous n'avons pas encore implémenté la fonction `setGameOver()` dont le rôle est de terminer proprement le jeu. Ajoutons maintenant le code manquant pour compléter notre exemple.
 
 ### Finir les fonctionnalités du jeu
 
@@ -526,11 +526,11 @@ function setGameOver() {
 }
 ```
 
-- Les deux premières lignes désactivent l'entrée de texte et le bouton en définissant leurs propriétés désactivées à `true`.  Ceci est nécessaire, car si nous ne le faisons pas, l'utilisateur pourrait soumettre plus de propositions après la fin du jeu, ce qui gâcherait les choses.
-- Les trois lignes suivantes génèrent un nouvel {{htmlelement("button")}} élément, avec le libellé "Démarrer une nouvelle partie" et l'ajoute au bas du HTML existant.
-- La dernière ligne définit un écouteur d'événement sur ce nouveau bouton : un click sur le bouton déclenchera un appel de la fonction  `resetGame()`.
+- Les deux premières lignes désactivent l'entrée de texte et le bouton en définissant leurs propriétés désactivées à `true`.  Ceci est nécessaire, car si nous ne le faisons pas, l'utilisateur pourrait soumettre plus de propositions après la fin du jeu, ce qui gâcherait les choses.
+- Les trois lignes suivantes génèrent un nouvel {{htmlelement("button")}} élément, avec le libellé "Démarrer une nouvelle partie" et l'ajoute au bas du HTML existant.
+- La dernière ligne définit un écouteur d'événement sur ce nouveau bouton : un click sur le bouton déclenchera un appel de la fonction  `resetGame()`.
 
-Reste à définir cette fonction ! Ajoutez le code suivant, tout en bas de votre JavaScript :
+Reste à définir cette fonction&nbsp;! Ajoutez le code suivant, tout en bas de votre JavaScript :
 
 ```js
 function resetGame() {
@@ -554,36 +554,36 @@ function resetGame() {
 }
 ```
 
-Ce bloc de code assez long réinitialise complètement les paramètres du jeu (le joueur pourra commencer une nouvelle partie). Il permet de  :
+Ce bloc de code assez long réinitialise complètement les paramètres du jeu (le joueur pourra commencer une nouvelle partie). Il permet de &nbsp;:
 
 - Remettre le compteur `guessCount` à 1.
 - Effacer tous les paragraphes d'information.
 - Supprimer le bouton de réinitialisation de notre code.
-- Activer les éléments de formulaire, vide et met au point le champ de texte, prêt à entrer une nouvelle proposition.
+- Activer les éléments de formulaire, vide et met au point le champ de texte, prêt à entrer une nouvelle proposition.
 - Supprimer la couleur d'arrière-plan du paragraphe `lastResult`.
 - Génèrer un nouveau nombre aléatoire afin que vous ne deviniez plus le même nombre !
 
-**À ce stade, vous devriez avoir un jeu (simple) entièrement fonctionnel — félicitations!**
+**À ce stade, vous devriez avoir un jeu (simple) entièrement fonctionnel — félicitations!**
 
-Pour finir, c'est le moment de faire une synthèse sur  quelques caractéristiques importantes du code ;  vous les avez déjà vues, sans forcément vous en rendre compte.
+Pour finir, c'est le moment de faire une synthèse sur quelques caractéristiques importantes du code ;  vous les avez déjà vues, sans forcément vous en rendre compte.
 
 ### Boucles
 
-Dans le code précédent, une partie à examiner de plus près est la boucle [for](/fr/docs/Web/JavaScript/Reference/Instructions/for). Les boucles sont un concept très important dans la programmation, qui vous permet de continuer à exécuter un morceau de code encore et encore, jusqu'à ce qu'une certaine condition soit remplie.
+Dans le code précédent, une partie à examiner de plus près est la boucle [for](/fr/docs/Web/JavaScript/Reference/Instructions/for). Les boucles sont un concept très important dans la programmation, qui vous permet de continuer à exécuter un morceau de code encore et encore, jusqu'à ce qu'une certaine condition soit remplie.
 
-Pour commencer, allez sur votre [console developpeur Javascript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs) et entrez ce qui suit :
+Pour commencer, allez sur votre [console developpeur Javascript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs) et entrez ce qui suit :
 
 ```js
 for (let i = 1 ; i < 21 ; i++) { console.log(i) }
 ```
 
-Que s'est-il passé ? Les nombres de 1 à 20 s'affichent dans la console. C'est à cause de la boucle. Une boucle : `for`  prend trois valeurs d'entrée (arguments)
+Que s'est-il passé&nbsp;? Les nombres de 1 à 20 s'affichent dans la console. C'est à cause de la boucle. Une boucle : `for`  prend trois valeurs d'entrée (arguments)
 
-1.  **Une valeur de départ** : Dans ce cas, nous commençons un compte à 1, mais cela pourrait être n'importe quel nombre. Vous pouvez remplacer `i` par n'importe quel nom (ou presque...) , mais `i` est utilisé par convention car il est court et facile à retenir.
-2.  **Une condition de fin** : Ici, nous avons spécifié  `i < 21` la boucle continuera jusqu'à ce que  `i`  ne soit plus inférieur à 21. Quand `i` atteindra ou dépassera 21, la boucle s'arrêtera.
-3.  **Un incrémenteur** :  Nous avons spécifié `i++`, ce qui signifie "ajouter 1 à i". La boucle sera exécutée une fois pour chaque valeur de `i`, jusqu'a ce que `i` atteigne une valeur de 21 (comme indiqué ci-dessus). Dans ce cas, nous imprimons simplement la valeur de `i`  sur la console à chaque itération en utilisant {{domxref("Console.log", "console.log()")}}.
+1.  **Une valeur de départ** : Dans ce cas, nous commençons un compte à 1, mais cela pourrait être n'importe quel nombre. Vous pouvez remplacer `i` par n'importe quel nom (ou presque...), mais `i` est utilisé par convention car il est court et facile à retenir.
+2.  **Une condition de fin** : Ici, nous avons spécifié  `i < 21` la boucle continuera jusqu'à ce que  `i`  ne soit plus inférieur à 21. Quand `i` atteindra ou dépassera 21, la boucle s'arrêtera.
+3.  **Un incrémenteur** :  Nous avons spécifié `i++`, ce qui signifie "ajouter 1 à i". La boucle sera exécutée une fois pour chaque valeur de `i`, jusqu'a ce que `i` atteigne une valeur de 21 (comme indiqué ci-dessus). Dans ce cas, nous imprimons simplement la valeur de `i`  sur la console à chaque itération en utilisant {{domxref("Console.log", "console.log()")}}.
 
-Maintenant, regardons la boucle dans notre jeu de devinettes de nombres **—** ce qui suit peut être trouvé dans la fonction `resetGame()` :
+Maintenant, regardons la boucle dans notre jeu de devinettes de nombres **—** ce qui suit peut être trouvé dans la fonction `resetGame()` :
 
 ```js
 let resetParas = document.querySelectorAll('.resultParas p');
@@ -592,7 +592,7 @@ for (let i = 0 ; i < resetParas.length ; i++) {
 }
 ```
 
-Ce code crée une variable contenant une liste de tous les paragraphes à l'intérieur de `<div class="resultParas">`  en utilisant la méthode {{domxref ("Document.querySelectorAll", "querySelectorAll ()")}}, puis il passe dans la boucle et pour chacun d'entre eux supprime le contenu du texte.
+Ce code crée une variable contenant une liste de tous les paragraphes à l'intérieur de `<div class="resultParas">`  en utilisant la méthode {{domxref ("Document.querySelectorAll", "querySelectorAll ()")}}, puis il passe dans la boucle et pour chacun d'entre eux supprime le contenu du texte.
 
 ### Une petite discussion sur les objets
 
@@ -602,11 +602,11 @@ Voyons une dernière amélioration avant d'aborder cette discussion. Ajoutez la
 guessField.focus();
 ```
 
-Cette ligne utilise la méthode{{domxref("HTMLElement.focus", "focus()")}} pour placer automatiquement le curseur dans le champ texte {{htmlelement ("input")}} dès le chargement de la page, permettant à l'utilisateur de commencer à taper sa première proposition de suite sans avoir à cliquer préalablement dans le champ. Ce n'est qu'un petit ajout, mais cela améliore la convivialité  en donnant à l'utilisateur une bonne idée visuelle de ce qu'il doit faire pour jouer.
+Cette ligne utilise la méthode{{domxref("HTMLElement.focus", "focus()")}} pour placer automatiquement le curseur dans le champ texte {{htmlelement ("input")}} dès le chargement de la page, permettant à l'utilisateur de commencer à taper sa première proposition de suite sans avoir à cliquer préalablement dans le champ. Ce n'est qu'un petit ajout, mais cela améliore la convivialité en donnant à l'utilisateur une bonne idée visuelle de ce qu'il doit faire pour jouer.
 
-Analysons ce qui se passe ici un peu plus en détail. En JavaScript, tout est objet. Un objet JavaScript possède des propriétés, chacune définissant une caractéristique. Vous pouvez créer vos propres objets, mais cela est une notion assez avancée, nous ne la couvrirons que beaucoup plus tard dans le cours. Pour l'instant, nous allons discuter brièvement des objets intégrés que contient votre navigateur, ce qui vous permet de faire beaucoup de choses utiles.
+Analysons ce qui se passe ici un peu plus en détail. En JavaScript, tout est objet. Un objet JavaScript possède des propriétés, chacune définissant une caractéristique. Vous pouvez créer vos propres objets, mais cela est une notion assez avancée, nous ne la couvrirons que beaucoup plus tard dans le cours. Pour l'instant, nous allons discuter brièvement des objets intégrés que contient votre navigateur, ce qui vous permet de faire beaucoup de choses utiles.
 
-Dans ce cas particulier, nous avons d'abord créé une variable `guessField` qui stocke une référence au champ de formulaire de saisie de texte dans notre HTML **—** la ligne suivante se trouve parmi nos déclarations de variables en haut du code :
+Dans ce cas particulier, nous avons d'abord créé une variable `guessField` qui stocke une référence au champ de formulaire de saisie de texte dans notre HTML **—** la ligne suivante se trouve parmi nos déclarations de variables en haut du code :
 
 ```js
 let guessField = document.querySelector('.guessField');
@@ -614,7 +614,7 @@ let guessField = document.querySelector('.guessField');
 
 Pour obtenir cette référence, nous avons utilisé la méthode {{domxref("document.querySelector", "querySelector()")}} de l'objet {{domxref ("document")}}. `querySelector()` prend une information - un [sélecteur CSS](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs) qui sélectionne l'élément auquel vous voulez faire référence.
 
-Parce que `guessField` contient maintenant une référence à un élément {{htmlelement ("input")}}, il aura maintenant accès à un certain nombre de propriétés (essentiellement des variables stockées dans des objets, dont certaines ne peuvent pas être modifiées) et des méthodes (essentiellement des fonctions stockées dans des objets). Une méthode disponible pour entrer des éléments est `focus()`, donc nous pouvons maintenant utiliser cette ligne pour focaliser l'entrée de texte :
+Parce que `guessField` contient maintenant une référence à un élément {{htmlelement ("input")}}, il aura maintenant accès à un certain nombre de propriétés (essentiellement des variables stockées dans des objets, dont certaines ne peuvent pas être modifiées) et des méthodes (essentiellement des fonctions stockées dans des objets). Une méthode disponible pour entrer des éléments est `focus()`, donc nous pouvons maintenant utiliser cette ligne pour focaliser l'entrée de texte :
 
 ```js
 guessField.focus();
@@ -644,9 +644,9 @@ Jouons un peu avec certains objets du navigateur.
     guesses.value
     ```
 
-    Le navigateur va retourner `undefined`, parce que `value` n'existe pas dans le paragraphe.
+    Le navigateur va retourner `undefined`, parce que `value` n'existe pas dans le paragraphe.
 
-7.  Pour changer le texte dans le paragraphe vous aurez besoin de  la propriété {{domxref("Node.textContent", "textContent")}} à la place.
+7.  Pour changer le texte dans le paragraphe vous aurez besoin de la propriété {{domxref("Node.textContent", "textContent")}} à la place.
     Essayez ceci :
 
     ```js
@@ -666,6 +666,6 @@ Chaque élément d'une page possède une propriété de `style` , qui contient e
 
 ## C'est fini pour le moment...
 
-Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou [jouez avec notre version finale ici](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html). Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport [au code source.](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)
+Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou [jouez avec notre version finale ici](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html). Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport [au code source.](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)
 
 {{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}
diff --git a/files/fr/learn/javascript/first_steps/arrays/index.md b/files/fr/learn/javascript/first_steps/arrays/index.md
index 38cb54ddef..798da512ff 100644
--- a/files/fr/learn/javascript/first_steps/arrays/index.md
+++ b/files/fr/learn/javascript/first_steps/arrays/index.md
@@ -25,14 +25,14 @@ Dans le dernier article de ce module, nous examinerons les tableaux — une faç
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Vocabulaire courant de l'informatique, bases de HTML et CSS,
         compréhension de ce que fait JavaScript.
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Comprendre ce que sont les tableaux et savoir comment les manipuler en
         JavaScript.
@@ -41,13 +41,13 @@ Dans le dernier article de ce module, nous examinerons les tableaux — une faç
   </tbody>
 </table>
 
-## Qu'est‑ce qu'un tableau ?
+## Qu'est‑ce qu'un tableau&nbsp;?
 
-Les tableaux sont généralement décrits comme des "objets de type liste" ; un tableau est un objet contenant plusieurs valeurs. Les objets tableau peuvent être stockés dans des variables et traités de la même manière que tout autre type de valeur, la différence étant que nous pouvons accéder à chaque valeur du tableau individuellement, et faire des choses super utiles et efficaces avec la liste des valeurs, comme boucler et faire la même chose pour chaque valeur. Peut-être que nous avons une série d'articles et leurs prix stockés dans un tableau, et nous voulons les parcourir tous et les imprimer sur une facture, tout en totalisant tous les prix ensemble et en imprimant le prix total en bas.
+Les tableaux sont généralement décrits comme des "objets de type liste" ; un tableau est un objet contenant plusieurs valeurs. Les objets tableau peuvent être stockés dans des variables et traités de la même manière que tout autre type de valeur, la différence étant que nous pouvons accéder à chaque valeur du tableau individuellement, et faire des choses super utiles et efficaces avec la liste des valeurs, comme boucler et faire la même chose pour chaque valeur. Peut-être que nous avons une série d'articles et leurs prix stockés dans un tableau, et nous voulons les parcourir tous et les imprimer sur une facture, tout en totalisant tous les prix ensemble et en imprimant le prix total en bas.
 
-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.
+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&nbsp;? Nous reviendrons sur cet exemple plus loin dans l'article.
 
-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 [ouvrir cette console](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparés ou utiliser la [console développeur de l'explorateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) si vous préférez).
+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 [ouvrir cette console](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparés ou utiliser la [console développeur de l'explorateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) si vous préférez).
 
 ```html hidden
 <!DOCTYPE html>
@@ -124,8 +124,8 @@ Comme précédemment, initions‑nous aux bases pratiques des tableaux en entran
       document.body.appendChild(inputDiv);
 
       if(document.querySelectorAll('div').length > 1) {
-        inputForm.focus();
-      }
+        inputForm.focus();
+      }
 
       inputForm.addEventListener('change', executeCode);
     }
@@ -163,14 +163,14 @@ Comme précédemment, initions‑nous aux bases pratiques des tableaux en entran
 
 On définit les valeurs d'un tableau par une liste d'éléments entre crochets droits, séparés par des virgules.
 
-1.  Disons que nous voulons mettre une liste d'achats dans un tableau — nous devons opérer comme suit. Entrez les lignes ci‑après dans la console :
+1.  Disons que nous voulons mettre une liste d'achats dans un tableau — nous devons opérer comme suit. Entrez les lignes ci‑après dans la console&nbsp;:
 
     ```js
     let shopping = ['pain', 'lait', 'fromage', 'houmous', 'nouilles'];
     shopping;
     ```
 
-2.  Dans ce cas, chaque élément du tableau est une chaîne, mais gardez en tête que vous pouvez stocker n'importe quel élément dans un tableau — chaîne, nombre, objet, autre variable et même d'autres tableaux. Vous pouvez également mélanger et assortir les types d'articles — il n'est pas obligatoire que ce soient tous des nombres, des chaînes, etc. Essayez ceci :
+2.  Dans ce cas, chaque élément du tableau est une chaîne, mais gardez en tête que vous pouvez stocker n'importe quel élément dans un tableau — chaîne, nombre, objet, autre variable et même d'autres tableaux. Vous pouvez également mélanger et assortir les types d'articles — il n'est pas obligatoire que ce soient tous des nombres, des chaînes, etc. Essayez ceci&nbsp;:
 3.  ```js
     let sequence = [1, 1, 2, 3, 5, 8, 13];
     let random = ['arbre', 795, [0, 1, 2]];
@@ -181,14 +181,14 @@ On définit les valeurs d'un tableau par une liste d'éléments entre crochets d
 
 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 [accès aux lettres dans une chaîne](/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods#retrieving_a_specific_string_character).
 
-1.  Entrez ceci dans la console :
+1.  Entrez ceci dans la console&nbsp;:
 
     ```js
     shopping[0];
     // renvoie "pain"
     ```
 
-2.  Vous pouvez aussi modifier un élément dans un tableau en donnant simplement une nouvelle valeur à l'élément. Essayez ceci :
+2.  Vous pouvez aussi modifier un élément dans un tableau en donnant simplement une nouvelle valeur à l'élément. Essayez ceci&nbsp;:
 
     ```js
     shopping[0] = 'crème de sésame';
@@ -196,9 +196,9 @@ Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant
     // shopping renvoie maintenant [ "crème de sésame", "lait", "fromage", "houmous", "nouilles" ]
     ```
 
-    > **Note :** Nous l'avons déjà dit, mais enseigner c'est répéter — les ordinateurs commencent les décomptes à partir de 0 !
+    > **Note :** Nous l'avons déjà dit, mais enseigner c'est répéter — les ordinateurs commencent les décomptes à partir de 0&nbsp;!
 
-3.  Notez qu'un tableau à l'intérieur d'un tableau est appelé un tableau multidimensionnel. Vous accédez à un des éléments de ce tableau interne en chaînant deux paires de crochets. Par exemple, pour avoir accès à l'un des éléments (le troisième) du tableau élément du tableau `random` (voir la section précédente), vous pouvez écrire quelque chose comme :
+3.  Notez qu'un tableau à l'intérieur d'un tableau est appelé un tableau multidimensionnel. Vous accédez à un des éléments de ce tableau interne en chaînant deux paires de crochets. Par exemple, pour avoir accès à l'un des éléments (le troisième) du tableau élément du tableau `random` (voir la section précédente), vous pouvez écrire quelque chose comme&nbsp;:
 4.  ```js
     random[2][2];
     ```
@@ -206,14 +206,14 @@ Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant
 
 ### Trouver la taille d'un tableau
 
-Vous pouvez trouver la taille d'un tableau (le nombre d'éléments qu'il comporte) de la même façon que vous obtenez la taille (en caractères) d'un chaîne — avec la propriété {{jsxref("Array.prototype.length","length")}}. Essayez :
+Vous pouvez trouver la taille d'un tableau (le nombre d'éléments qu'il comporte) de la même façon que vous obtenez la taille (en caractères) d'un chaîne — avec la propriété {{jsxref("Array.prototype.length","length")}}. Essayez&nbsp;:
 
 ```js
 sequence.length;
 // renvoie 7
 ```
 
-Il y a d'autres usages, mais le plus courant permet de dire à une boucle de poursuivre jusqu'à ce que tous les éléments du tableau aient été passés en revue. Ainsi, par exemple :
+Il y a d'autres usages, mais le plus courant permet de dire à une boucle de poursuivre jusqu'à ce que tous les éléments du tableau aient été passés en revue. Ainsi, par exemple&nbsp;:
 
 ```js
 let sequence = [1, 1, 2, 3, 5, 8, 13];
@@ -222,15 +222,15 @@ for (var i = 0; i < sequence.length; i++) {
 }
 ```
 
-Vous en apprendrez plus sur les boucles dans un prochain article, mais, en résumé, ce code dit :
+Vous en apprendrez plus sur les boucles dans un prochain article, mais, en résumé, ce code dit&nbsp;:
 
 1.  Commencer la boucle à l'élément 0 du tableau.
-2.  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).
+2.  Arrêter de tourner quand le dernier élément du tableau sera atteint. Cela fonctionne pour n'importe quelle dimension de tableau&nbsp;; 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).
 3.  Afficher chaque élément sur la console de l'explorateur avec `console.log()`.
 
 ## Quelques méthodes utiles pour les tableaux
 
-Dans ce paragraphe nous examinerons quelques méthodes de tableaux à connaître. Elles permettent de scinder des chaînes en éléments de tableau et inversement, et d'ajouter de nouveaux éléments dans des tableaux.
+Dans ce paragraphe nous examinerons quelques méthodes de tableaux à connaître. Elles permettent de scinder des chaînes en éléments de tableau et inversement, et d'ajouter de nouveaux éléments dans des tableaux.
 
 ### Conversions entre chaînes et tableaux
 
@@ -238,20 +238,20 @@ Souvent, vous serez confronté à des données brutes contenues dans une longue
 
 > **Note :** D'accord, techniquement parlant c'est une méthode de chaîne, et non une méthode de tableau, mais nous la mettons dans le chapitre des tableaux car elle est bien à sa place ici.
 
-1.  Servons‑nous en et voyons comment elle fonctionne. D'abord créons une chaîne dans la console :
+1.  Servons‑nous en et voyons comment elle fonctionne. D'abord créons une chaîne dans la console&nbsp;:
 
     ```js
     let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
     ```
 
-2.  Scindons‑la à chaque virgule :
+2.  Scindons‑la à chaque virgule&nbsp;:
 
     ```js
     let myArray = myData.split(',');
     myArray;
     ```
 
-3.  Pour terminer, trouvons la taille du nouveau tableau et retrouvons quelques‑uns de ses éléments :
+3.  Pour terminer, trouvons la taille du nouveau tableau et retrouvons quelques‑uns de ses éléments&nbsp;:
 
     ```js
     myArray.length;
@@ -260,7 +260,7 @@ Souvent, vous serez confronté à des données brutes contenues dans une longue
     myArray[myArray.length-1]; // le dernier élément du tableau
     ```
 
-4.  Vous pouvez également faire le contraire avec la méthode {{jsxref("Array.prototype.join()","join()")}}. Essayons :
+4.  Vous pouvez également faire le contraire avec la méthode {{jsxref("Array.prototype.join()","join()")}}. Essayons&nbsp;:
 
     ```js
     let myNewString = myArray.join(',');
@@ -276,7 +276,7 @@ Souvent, vous serez confronté à des données brutes contenues dans une longue
 
 ### Ajout et suppression d'éléments de tableau
 
-Nous n'avons pas encore parlé d'ajout et de suppression d'éléments de tableau — allons‑y. Nous utiliserons le tableau `myArray` dont nous nous sommes servis à la fin de la dernière section. Si vous n'avez pas entré les commandes de cette section dans la console, il est nécessaire de créer d'abord le tableau :
+Nous n'avons pas encore parlé d'ajout et de suppression d'éléments de tableau — allons‑y. Nous utiliserons le tableau `myArray` dont nous nous sommes servis à la fin de la dernière section. Si vous n'avez pas entré les commandes de cette section dans la console, il est nécessaire de créer d'abord le tableau&nbsp;:
 
 ```js
 let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];
@@ -284,7 +284,7 @@ let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carl
 
 Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous pouvez respectivement utiliser {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}}.
 
-1.  Voyons `push()` d'abord — notez que vous devez mettre en paramètre les éléments que vous souhaitez ajouter à la fin du tableau. Essayez ceci :
+1.  Voyons `push()` d'abord — notez que vous devez mettre en paramètre les éléments que vous souhaitez ajouter à la fin du tableau. Essayez ceci&nbsp;:
 
     ```js
     myArray.push('Cardiff');
@@ -293,7 +293,7 @@ Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous
     myArray;
     ```
 
-2.  La taille du tableau modifié est renvoyée quand l'appel de la méthode est terminé. Si vous voulez enregistrer la taille du nouveau tableau dans une variable, vous pouvez écrire quelque chose comme ceci :
+2.  La taille du tableau modifié est renvoyée quand l'appel de la méthode est terminé. Si vous voulez enregistrer la taille du nouveau tableau dans une variable, vous pouvez écrire quelque chose comme ceci&nbsp;:
 
     ```js
     let newLength = myArray.push('Bristol');
@@ -301,7 +301,7 @@ Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous
     newLength;
     ```
 
-3.  Supprimer le dernier élément de la liste est très simple : il suffit de lancer `pop()` sur celle‑ci. Essayez :
+3.  Supprimer le dernier élément de la liste est très simple&nbsp;: il suffit de lancer `pop()` sur celle‑ci. Essayez&nbsp;:
 
     ```js
     myArray.pop();
@@ -317,14 +317,14 @@ Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous
 
 {{jsxref("Array.prototype.unshift()","unshift()")}} et {{jsxref("Array.prototype.shift()","shift()")}} fonctionnent exactement de la même manière, excepté qu'il travaillent sur la tête du tableau au lieu de la queue.
 
-1.  D'abord `unshift()` — essayez :
+1.  D'abord `unshift()` — essayez&nbsp;:
 
     ```js
     myArray.unshift('Edinburgh');
     myArray;
     ```
 
-2.  Maintenant `shift()` — essayez !
+2.  Maintenant `shift()` — essayez&nbsp;!
 
     ```js
     let removedItem = myArray.shift();
@@ -332,16 +332,16 @@ Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous
     removedItem;
     ```
 
-## Activité : affichons les produits
+## Activité&nbsp;: affichons les produits
 
-Revenons à l'exemple que nous avons décrit plus haut — afficher les noms des produits et leurs prix pour un envoi, puis faire le total des prix et l'afficher à la fin de la liste. Dans l'exemple modifiable ci‑dessous, il y a des commentaires numérotés — chacun d'entre eux marque l'emplacement où vous devez ajouter quelque chose au code. Voici :
+Revenons à l'exemple que nous avons décrit plus haut — afficher les noms des produits et leurs prix pour un envoi, puis faire le total des prix et l'afficher à la fin de la liste. Dans l'exemple modifiable ci‑dessous, il y a des commentaires numérotés — chacun d'entre eux marque l'emplacement où vous devez ajouter quelque chose au code. Voici&nbsp;:
 
 1.  Sous le commentaire `// number 1` 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 `products`.
-2.  Sur la même ligne que le commentaire `// number 2` se trouve le début d'une boucle. Dans cette ligne nous avons actuellement `i <= 0`, test conditionnel qui fait que la [boucle](/fr/docs/Learn/JavaScript/First_steps/A_first_splash#loops) stoppe immédiatement, car ce test dit « stopper dès que `i` est inférieur ou égal à 0 » et `i` part de 0. Remplacez ce test par un qui  n'arrêtera pas la boucle tant que `i` sera inférieur à la taille du tableau `products`.
+2.  Sur la même ligne que le commentaire `// number 2` se trouve le début d'une boucle. Dans cette ligne nous avons actuellement `i <= 0`, test conditionnel qui fait que la [boucle](/fr/docs/Learn/JavaScript/First_steps/A_first_splash#loops) stoppe immédiatement, car ce test dit «&nbsp;stopper dès que `i` est inférieur ou égal à 0&nbsp;» et `i` part de 0. Remplacez ce test par un qui n'arrêtera pas la boucle tant que `i` sera inférieur à la taille du tableau `products`.
 3.  Au dessous du commentaire `// number 3` nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (`nom:prix`) 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 [Méthodes utiles pour les chaînes de caractères](/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods) pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article.
 4.  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 [premier article à propos des chaînes](/fr/docs/Learn/JavaScript/First_steps/Strings#numbers_versus_strings).
-5.  Il y a une variable nommée `total` créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous `// number 4`) 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 [opérateur d'assignation](/fr/docs/Learn/JavaScript/First_steps/Math#assignment_operators) pour faire cela ;-).
-6.  Nous souhaitons que vous modifiez la ligne au‑dessous de  `// number 5` de sorte que la variable `itemText` 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.
+5.  Il y a une variable nommée `total` créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous `// number 4`) 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 [opérateur d'assignation](/fr/docs/Learn/JavaScript/First_steps/Math#assignment_operators) pour faire cela ;-).
+6.  Nous souhaitons que vous modifiez la ligne au‑dessous de  `// number 5` de sorte que la variable `itemText` soit égale à «&nbsp;nom actuel de l'élément — $prix actuel de l'élément&nbsp;», par exemple «&nbsp;Shoes — $23.99&nbsp;» 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.
 
 ```html hidden
 <div class="output" style="min-height: 150px;">
@@ -409,7 +409,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n                \'Socks:5.99\',\n                \'T-shirt:14.99\',\n                \'Trousers:31.99\',\n                \'Shoes:23.99\'];\n\nfor(var i = 0; i < products.length; i++) {\n  var subArray = products[i].split(\':\');\n  var name = subArray[0];\n  var price = Number(subArray[1]);\n  total += price;\n  itemText = name + \' — $\' + price;\n\n  var listItem = document.createElement(\'li\');\n  listItem.textContent = itemText;\n  list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);';
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n                \'Socks:5.99\',\n                \'T-shirt:14.99\',\n                \'Trousers:31.99\',\n                \'Shoes:23.99\'];\n\nfor(var i = 0; i < products.length; i++) {\n var subArray = products[i].split(\':\');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);';
 
 textarea.addEventListener('input', updateCode);
 window.addEventListener('load', updateCode);
@@ -417,18 +417,18 @@ window.addEventListener('load', updateCode);
 
 {{ EmbedLiveSample('Activité_affichons_les_produits', '100%', 600) }}
 
-## Activité : Top 5 des recherches
+## Activité&nbsp;: Top 5 des recherches
 
 Une bonne utilisation des méthodes de tableaux comme {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}} permet de conserver un enregistrement des éléments actuellement actifs dans une application web. Dans une scène animée, par exemple, vous pouvez avoir un tableau d'objets représentant les graphiques d'arrière-plan actuellement affichés, et vous pouvez n'en vouloir que 50 à la fois, pour des raisons de performance ou d'encombrement. Chaque fois que de nouveaux objets sont créés et ajoutés au tableau, les plus anciens peuvent être supprimés du tableau pour n'en conserver que le nombre voulu.
 
-Dans cet exemple nous allons montrer une utilisation beaucoup plus simple — ici, nous allons vous fournir un site de recherche fictif, avec une boîte de recherche. Voici l'idée : quand un terme est entré dans la boîte de recherche, les 5 précédents termes entrés sont affichés dans la liste. Quand le nombre de termes dépasse 5, le dernier terme est supprimé chaque fois qu'un nouveau terme est ajouté ; ainsi, le 5 termes précédents sont toujours affichés.
+Dans cet exemple nous allons montrer une utilisation beaucoup plus simple — ici, nous allons vous fournir un site de recherche fictif, avec une boîte de recherche. Voici l'idée&nbsp;: quand un terme est entré dans la boîte de recherche, les 5 précédents termes entrés sont affichés dans la liste. Quand le nombre de termes dépasse 5, le dernier terme est supprimé chaque fois qu'un nouveau terme est ajouté&nbsp;; ainsi, le 5 termes précédents sont toujours affichés.
 
-> **Note :** Dans une application réelle avec boîte de recherche, vous pourriez vraisemblablement cliquer sur un des termes de la liste pour revenir à la recherche précédente, et l'application afficherait les vrais résultats ! Mais pour le moment nous en resterons à quelque chose de simple.
+> **Note :** Dans une application réelle avec boîte de recherche, vous pourriez vraisemblablement cliquer sur un des termes de la liste pour revenir à la recherche précédente, et l'application afficherait les vrais résultats&nbsp;! Mais pour le moment nous en resterons à quelque chose de simple.
 
-Pour terminer l'application, il vous faut :
+Pour terminer l'application, il vous faut&nbsp;:
 
 1.  Ajouter une ligne sous le commentaire `// number 1` pour ajouter la valeur qui vient d'être saisie dans la boîte au début du tableau. Cette valeur est récupérée avec `searchInput.value`.
-2.  Ajouter une ligne sous le commentaire `// number 2`  pour supprimer la valeur en fin de liste du tableau.
+2.  Ajouter une ligne sous le commentaire `// number 2`  pour supprimer la valeur en fin de liste du tableau.
 
 ```html hidden
 <div class="output" style="min-height: 150px;">
@@ -506,7 +506,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n  if(searchInput.value !== \'\') {\n    myHistory.unshift(searchInput.value);\n\n    list.innerHTML = \'\';\n\n    for(var i = 0; i < myHistory.length; i++) {\n      itemText = myHistory[i];\n      var listItem = document.createElement(\'li\');\n      listItem.textContent = itemText;\n      list.appendChild(listItem);\n    }\n\n    if(myHistory.length >= 5) {\n      myHistory.pop();\n    }\n\n    searchInput.value = \'\';\n    searchInput.focus();\n  }\n}';
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n    myHistory.unshift(searchInput.value);\n\n    list.innerHTML = \'\';\n\n    for(var i = 0; i < myHistory.length; i++) {\n      itemText = myHistory[i];\n      var listItem = document.createElement(\'li\');\n      listItem.textContent = itemText;\n      list.appendChild(listItem);\n    }\n\n    if(myHistory.length >= 5) {\n      myHistory.pop();\n    }\n\n    searchInput.value = \'\';\n    searchInput.focus();\n  }\n}';
 
 textarea.addEventListener('input', updateCode);
 window.addEventListener('load', updateCode);
@@ -516,13 +516,13 @@ window.addEventListener('load', updateCode);
 
 ## Testez vos compétences !
 
-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 [Test de compétences : les tableaux](/fr/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays).
+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 [Test de compétences&nbsp;: les tableaux](/fr/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays).
 
 ## Conclusion
 
-Après la lecture de cet article, vous conviendrez que les tableaux semblent fichtrement utiles ; vous les verrez un peu partout en JavaScript, souvent associés à des boucles pour appliquer la même action à chaque élément du tableau. Nous vous indiquerons toutes les bases utiles à savoir à propos des boucles dans le prochain module, mais pour l'instant, félicitations : prenez une pause bien méritée ; vous avez étudié tous les articles du module !
+Après la lecture de cet article, vous conviendrez que les tableaux semblent fichtrement utiles ; vous les verrez un peu partout en JavaScript, souvent associés à des boucles pour appliquer la même action à chaque élément du tableau. Nous vous indiquerons toutes les bases utiles à savoir à propos des boucles dans le prochain module, mais pour l'instant, félicitations&nbsp;: prenez une pause bien méritée ; vous avez étudié tous les articles du module !
 
-La seule chose restant à faire est de procéder à l'évaluation de ce module pour tester votre compréhension de son contenu.
+La seule chose restant à faire est de procéder à l'évaluation de ce module pour tester votre compréhension de son contenu.
 
 ## Voir aussi
 
diff --git a/files/fr/learn/javascript/first_steps/index.md b/files/fr/learn/javascript/first_steps/index.md
index 03d1d7d9e4..4f5dea5337 100644
--- a/files/fr/learn/javascript/first_steps/index.md
+++ b/files/fr/learn/javascript/first_steps/index.md
@@ -17,11 +17,11 @@ translation_of: Learn/JavaScript/First_steps
 ---
 {{LearnSidebar}}
 
-Dans notre premier module consacré à JavaScript, nous allons tout d'abord répondre à des questions fondamentales comme « qu'est-ce que JavaScript ? », « à quoi ressemble-t-il ? » et « de quoi est-il capable ? ». Nous vous accompagnerons ensuite dans votre première expérience pratique consistant à écrire du code JavaScript. Après cela, nous examinerons en détail quelques briques de base, telles que les variables, les chaînes de caractères, les nombres, et les tableaux.
+Dans notre premier module consacré à JavaScript, nous allons tout d'abord répondre à des questions fondamentales comme «&nbsp;qu'est-ce que JavaScript&nbsp;?&nbsp;», «&nbsp;à quoi ressemble-t-il&nbsp;?&nbsp;» et «&nbsp;de quoi est-il capable&nbsp;?&nbsp;». Nous vous accompagnerons ensuite dans votre première expérience pratique consistant à écrire du code JavaScript. Après cela, nous examinerons en détail quelques briques de base, telles que les variables, les chaînes de caractères, les nombres, et les tableaux.
 
 ## **Prérequis**
 
-Avant d'entamer ce module, vous n'avez besoin d'aucune connaissance préalable en JavaScript, mais vous devriez être familier avec HTML et CSS. Nous vous conseillons de lire les modules suivants avant d'aller plus loin :
+Avant d'entamer ce module, vous n'avez besoin d'aucune connaissance préalable en JavaScript, mais vous devriez être familier avec HTML et CSS. Nous vous conseillons de lire les modules suivants avant d'aller plus loin&nbsp;:
 
 - [Commencer avec le Web](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML) (qui inclut une [présentation basique de JavaScript](/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics)).
 - [Introduction au langage HTML](/fr/docs/Web/Guide/HTML/Introduction).
@@ -31,26 +31,26 @@ Avant d'entamer ce module, vous n'avez besoin d'aucune connaissance préalable e
 
 ## Guides
 
-- [Qu'est-ce que JavaScript ?](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript)
+- [Qu'est-ce que JavaScript&nbsp;?](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript)
   - : Bienvenue dans le cours de JavaScript pour débutants proposé par MDN ! Dans ce premier article, nous aborderons JavaScript sous un angle général afin de comprendre ce qu'il est et à quoi il sert. Nous nous assurerons ici que vous cernez bien le but premier du langage.
 - [Notre premier code JavaScript](/fr/docs/Learn/JavaScript/First_steps/A_first_splash)
   - : Maintenant que vous en savez un peu plus sur la partie théorique de JavaScript et sur ce que vous pouvez réaliser avec, nous allons poursuivre avec un cours accéléré sur les fonctionnalités de base du langage par le biais d'un tutoriel axé sur la pratique. Vous développerez ici, pas à pas, un jeu simple consistant à faire deviner un nombre.
-- [Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong)
-  - : Quand vous développiez le jeu de devinette dans le cadre du tutoriel précédent, vous avez pu constater que notre programme ne fonctionnait pas. Pas de panique — cet article est là pour vous éviter de vous arracher les cheveux sur de tels problèmes en vous donnant quelques conseils simples sur la manière de trouver et résoudre les erreurs dans vos programmes JavaScript.
-- [Stocker les informations dont vous avez besoin — les variables](/fr/docs/Learn/JavaScript/First_steps/Variables)
-  - : Après avoir lu les articles précédents, vous devriez maintenant mieux comprendre ce qu'est JavaScript, ce qu'il peut faire pour vous, comment l'utiliser de pair avec d'autres technologies du Web, et à quoi ressemblent ses principales fonctionnalités d'un point de vue global. Dans cet article, nous allons aborder les véritables fondements, en présentant l'une des pierres angulaires du langage : les variables.
-- [Mathématiques de base en JavaScript — nombres et opérateurs](/fr/docs/Learn/JavaScript/First_steps/Math)
+- [Qu'est-ce qui n'a pas fonctionné&nbsp;? Déboguer du code JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong)
+  - : Quand vous développiez le jeu de devinette dans le cadre du tutoriel précédent, vous avez pu constater que notre programme ne fonctionnait pas. Pas de panique — cet article est là pour vous éviter de vous arracher les cheveux sur de tels problèmes en vous donnant quelques conseils simples sur la manière de trouver et résoudre les erreurs dans vos programmes JavaScript.
+- [Stocker les informations dont vous avez besoin — les variables](/fr/docs/Learn/JavaScript/First_steps/Variables)
+  - : Après avoir lu les articles précédents, vous devriez maintenant mieux comprendre ce qu'est JavaScript, ce qu'il peut faire pour vous, comment l'utiliser de pair avec d'autres technologies du Web, et à quoi ressemblent ses principales fonctionnalités d'un point de vue global. Dans cet article, nous allons aborder les véritables fondements, en présentant l'une des pierres angulaires du langage&nbsp;: les variables.
+- [Mathématiques de base en JavaScript — nombres et opérateurs](/fr/docs/Learn/JavaScript/First_steps/Math)
   - : À ce stade du cours, nous allons parler de mathématiques en JavaScript, à savoir comment combiner des opérateurs arithmétiques avec d'autres fonctionnalités du langage pour arriver à nos fins.
-- [Gérer du texte — les chaînes de caractères en JavaScript](/fr/docs/Learn/JavaScript/First_steps/Strings)
+- [Gérer du texte — les chaînes de caractères en JavaScript](/fr/docs/Learn/JavaScript/First_steps/Strings)
   - : Attaquons-nous maintenant aux chaînes de caractères — le nom savant désignant en programmation des portions de texte. Dans cet article, nous allons voir les bases que vous devez impérativement connaître lors de votre apprentissage de JavaScript, comme la création de chaînes, l'échappement de caractères et la jonction de plusieurs chaînes.
 - [Méthodes utiles pour les chaînes de caractères](/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile)
   - : Maintenant que nous avons vu les bases relatives aux chaînes de catactères, passons à la vitesse supérieure et regardons ce que nous pouvons faire de plus poussé avec lesdites chaînes grâce aux méthodes natives, comme par exemple déterminer la longueur d'un texte, joindre et séparer des chaînes, remplacer un caractère par un autre, et bien plus encore.
 - [Les tableaux](/fr/docs/Learn/JavaScript/First_steps/tableaux)
-  - : Dans le dernier article de ce module, nous allons nous pencher sur les tableaux — un moyen ingénieux de stocker une liste d'éléments dans une unique variable. Ici nous allons voir en quoi cela est pratique, puis nous verrons entre autres comment créer un tableau et comment récupérer, ajouter et supprimer des éléments stockés.
+  - : Dans le dernier article de ce module, nous allons nous pencher sur les tableaux — un moyen ingénieux de stocker une liste d'éléments dans une unique variable. Ici nous allons voir en quoi cela est pratique, puis nous verrons entre autres comment créer un tableau et comment récupérer, ajouter et supprimer des éléments stockés.
 
 ## Auto-évaluation
 
 L'auto-évaluation suivante teste votre compréhension des bases de JavaScript abordées dans le guide ci-dessus.
 
 - [Génerateur d'histoires absurdes](/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator)
-  - : Dans le cadre de cette évaluation, votre tâche sera d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer pour créer une appli ludique qui génère aléatoirement des histoires absurdes. Amusez-vous bien !
+  - : Dans le cadre de cette évaluation, votre tâche sera d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer pour créer une appli ludique qui génère aléatoirement des histoires absurdes. Amusez-vous bien&nbsp;!
diff --git a/files/fr/learn/javascript/first_steps/math/index.md b/files/fr/learn/javascript/first_steps/math/index.md
index c7f77d2fe1..06eda01cc4 100644
--- a/files/fr/learn/javascript/first_steps/math/index.md
+++ b/files/fr/learn/javascript/first_steps/math/index.md
@@ -19,19 +19,19 @@ translation_of: Learn/JavaScript/First_steps/Math
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
 
-À ce point du didacticiel, nous parlerons de « mathématiques en JavaScript » — comment utiliser les {{Glossary("Operator","operators")}} et autres fonctionnalités pour manier avec succès les nombres pour faire nos bricolages.
+À ce point du didacticiel, nous parlerons de «&nbsp;mathématiques en JavaScript&nbsp;» — comment utiliser les {{Glossary("Operator","operators")}} et autres fonctionnalités pour manier avec succès les nombres pour faire nos bricolages.
 
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Vocabulaire courant de l'informatique, bases de HTML et CSS,
         compréhension de ce que fait JavaScript.
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>Se familiariser avec les bases des maths en JavaScript.</td>
     </tr>
   </tbody>
@@ -39,25 +39,25 @@ translation_of: Learn/JavaScript/First_steps/Math
 
 ## Tout le monde aime les maths
 
-Mouais, peut‑être pas. Certains parmi nous aiment les maths, d'autres les détestent depuis qu'il leur a fallu apprendre les tables de multiplication et les longues divisions à l'école, d'autres se situent entre les deux. Mais personne ne peut nier que les mathématiques sont une connaissance fondamentale dont il n'est pas possible de se passer. Cela devient particulièrement vrai lorsque nous apprenons à programmer en JavaScript (ou tout autre langage d'ailleurs) — une grande part de ce que nous faisons reposant en effet sur le traitement de données numériques, le calcul de nouvelles valeurs, etc. ; vous ne serez donc pas étonné d'apprendre que JavaScript dispose d'un ensemble complet de fonctions mathématiques.
+Mouais, peut‑être pas. Certains parmi nous aiment les maths, d'autres les détestent depuis qu'il leur a fallu apprendre les tables de multiplication et les longues divisions à l'école, d'autres se situent entre les deux. Mais personne ne peut nier que les mathématiques sont une connaissance fondamentale dont il n'est pas possible de se passer. Cela devient particulièrement vrai lorsque nous apprenons à programmer en JavaScript (ou tout autre langage d'ailleurs) — une grande part de ce que nous faisons reposant en effet sur le traitement de données numériques, le calcul de nouvelles valeurs, etc.&nbsp;; vous ne serez donc pas étonné d'apprendre que JavaScript dispose d'un ensemble complet de fonctions mathématiques.
 
 Cet article ne traite que des éléments de base nécessaires pour débuter.
 
 ### Types de nombres
 
-En programmation, même l'ordinaire système des nombres décimaux que nous connaissons tous si bien est plus compliqué qu'on ne pourrait le croire. Nous utilisons divers termes pour décrire différents types de nombres décimaux, par exemple :
+En programmation, même l'ordinaire système des nombres décimaux que nous connaissons tous si bien est plus compliqué qu'on ne pourrait le croire. Nous utilisons divers termes pour décrire différents types de nombres décimaux, par exemple&nbsp;:
 
-- **Entier :** (_Integer_ en anglais) c'est un nombre sans partie fractionnaire, comme son nom l'indique, par exemple 10, 400 ou -5
-- **Nombre à virgule flottante :** (_float_ en anglais) il a un **point** de séparation entre la partie entière et la partie fractionnaire (là où en France nous mettons une virgule), par exemple 12**.**5 et 56**.**7786543
-- **Doubles** : (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).
+- **Entier&nbsp;:** (_Integer_ en anglais) c'est un nombre sans partie fractionnaire, comme son nom l'indique, par exemple 10, 400 ou -5
+- **Nombre à virgule flottante&nbsp;:** (_float_ en anglais) il a un **point** de séparation entre la partie entière et la partie fractionnaire (là où en France nous mettons une virgule), par exemple 12**.**5 et 56**.**7786543
+- **Doubles**&nbsp;: (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).
 
-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 :
+Nous disposons même de plusieurs systèmes de numération&nbsp;! 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&nbsp;:
 
 - **Binaire** — utilisé par le plus bas niveau de langage des ordinateurs, il est composé de 0 et de 1.
 - **Octal** — de base 8, utilise les chiffres entre 0 et 7 dans chaque rang.
 - **Hexadécimal** — 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 [CSS](/fr/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#hexadecimal_values).
 
-**Avant que votre cervelle ne se mette à bouillir, stop !** 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.
+**Avant que votre cervelle ne se mette à bouillir, stop&nbsp;!** Pour commencer, nous ne nous intéresserons qu'aux nombres décimaux dans ce cours&nbsp;; vous aurez rarement besoin de vous servir des autres types, peut-être même jamais.
 
 L'autre bonne nouvelle, c'est que contrairement à d'autres langages de programmation, JavaScript n'a qu'un seul type de donnée pour les nombres, vous l'avez deviné : {{jsxref("Number")}}. Cela signifie que, en JavaScript, quels que soient les types de nombre avec lesquels vous travaillerez, vous les manipulerez tous exactement de la même façon.
 
@@ -69,7 +69,7 @@ Amusons‑nous avec quelques chiffres pour nous familiariser avec la syntaxe de
 
 **[Ouvrir la console dans une nouvelle fenêtre](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/)**
 
-1.  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 :
+1.  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&nbsp;:
 
     ```js
     var myInt = 5;
@@ -79,7 +79,7 @@ Amusons‑nous avec quelques chiffres pour nous familiariser avec la syntaxe de
     ```
 
 2.  Les nombres sont saisis sans guillemets — essayez de déclarer et initialiser deux ou trois variables de plus contenant des nombres avant de continuer.
-3.  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é :
+3.  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é&nbsp;:
 4.  ```js
     typeof myInt;
     typeof myFloat;
@@ -124,7 +124,7 @@ Number(myNumber) + 3;
 
 ## Opérateurs arithmétiques
 
-Ce sont les opérateurs de base pour effectuer diverses opérations :
+Ce sont les opérateurs de base pour effectuer diverses opérations&nbsp;:
 
 <table class="standard-table">
   <thead>
@@ -181,7 +181,7 @@ Ce sont les opérateurs de base pour effectuer diverses opérations :
 
 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 [console des outils de développement JavaScript](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) ou servez vous de la console intégrée plus haut, comme vous préférez, pour vous familiariser avec la syntaxe.
 
-1.  Essayez de saisir quelques exemples simples de votre cru, comme :
+1.  Essayez de saisir quelques exemples simples de votre cru, comme&nbsp;:
 
     ```js
     10 + 7
@@ -189,7 +189,7 @@ Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, m
     60 % 3
     ```
 
-2.  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 :
+2.  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&nbsp;:
 
     ```js
     var num1 = 10;
@@ -198,7 +198,7 @@ Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, m
     num2 / num1;
     ```
 
-3.  Pour terminer cette partie, entrez quelques expressions plus compliquées, comme :
+3.  Pour terminer cette partie, entrez quelques expressions plus compliquées, comme&nbsp;:
 
     ```js
     5 + 10 * 3;
@@ -206,23 +206,23 @@ Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, m
     num2 + num1 / 8 + 2;
     ```
 
-Certaines opérations de cet ensemble ne vous renvoient peut-être pas le résultat attendu ; le paragraphe qui suit vous explique pourquoi.
+Certaines opérations de cet ensemble ne vous renvoient peut-être pas le résultat attendu&nbsp;; le paragraphe qui suit vous explique pourquoi.
 
 ### Priorité des opérateurs
 
-Revenons sur le dernier exemple ci‑dessus, en supposant que `num2` contient la valeur 50 et `num1` contient 10 (comme défini plus haut) :
+Revenons sur le dernier exemple ci‑dessus, en supposant que `num2` contient la valeur 50 et `num1` contient 10 (comme défini plus haut)&nbsp;:
 
 ```js
 num2 + num1 / 8 + 2;
 ```
 
-En tant qu'humain, vous pouvez lire « *50 plus 10 égale 60 »*, puis « *8 plus 2 égale 10 »* et finalement « *60 divisé par 10 égale 6 »*.
+En tant qu'humain, vous pouvez lire «&nbsp;*50 plus 10 égale 60&nbsp;»*, puis «&nbsp;*8 plus 2 égale 10&nbsp;»* et finalement «&nbsp;*60 divisé par 10 égale 6&nbsp;»*.
 
-Mais le navigateur _calcule « 10 sur 8 égale 1.25 »_, puis « *50 plus 1.25 plus 2 égale 53.25 »*.
+Mais le navigateur _calcule «&nbsp;10 sur 8 égale 1.25&nbsp;»_, puis «&nbsp;*50 plus 1.25 plus 2 égale 53.25&nbsp;»*.
 
 Cela est dû aux **priorités entre opérateurs** — 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).
 
-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 :
+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&nbsp;:
 
 ```js
 (num2 + num1) / (8 + 2);
@@ -234,34 +234,34 @@ Essayez-le et voyez.
 
 ## Opérateurs d'incrémentation et de décrémentation
 
-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 (`++`) ou de décrementation (`--`). Nous nous sommes servis de `++` dans le jeu « Devinez le nombre » dans notre article [Première plongée dans le JavaScript](/fr/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash) pour ajouter 1 à la variable `guessCount` pour décompter le nombre de suppositions restantes après chaque tour.
+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 (`++`) ou de décrementation (`--`). Nous nous sommes servis de `++` dans le jeu «&nbsp;Devinez le nombre&nbsp;» dans notre article [Première plongée dans le JavaScript](/fr/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash) pour ajouter 1 à la variable `guessCount` pour décompter le nombre de suppositions restantes après chaque tour.
 
 ```js
 guessCount++;
 ```
 
-> **Note :** Ces opérateurs sont couramment utilisés dans des [boucles ;](/fr/docs/Web/JavaScript/Guide/Loops_and_iteration) 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.
+> **Note :** Ces opérateurs sont couramment utilisés dans des [boucles&nbsp;;](/fr/docs/Web/JavaScript/Guide/Loops_and_iteration) 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&nbsp;! Nous reverrons les boucles en détail plus loin dans ce cours.
 
-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 :
+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&nbsp;:
 
 ```js
 3++;
 ```
 
-Vous ne pouvez donc incrémenter qu'une variable déjà existante. Essayez ceci :
+Vous ne pouvez donc incrémenter qu'une variable déjà existante. Essayez ceci&nbsp;:
 
 ```js
 var num1 = 4;
 num1++;
 ```
 
-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, _puis_ incrémente la variable. Vous constaterez qu'elle a bien été incrémentée si vous demandez de la revoir :
+Ok, curieuse la ligne 2&nbsp;! En écrivant cela, elle renvoie la valeur 4 — c'est dû au fait que l'explorateur renvoie la valeur courante, _puis_ incrémente la variable. Vous constaterez qu'elle a bien été incrémentée si vous demandez de la revoir&nbsp;:
 
 ```js
 num1;
 ```
 
-C'est pareil avec `--` : essayez ce qui suit
+C'est pareil avec `--`&nbsp;: essayez ce qui suit
 
 ```js
 var num2 = 6;
@@ -273,7 +273,7 @@ num2;
 
 ## Opérateurs d'assignation
 
-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, `=` — il donne à la variable de gauche la valeur indiquée à droite :
+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, `=` — il donne à la variable de gauche la valeur indiquée à droite&nbsp;:
 
 ```js
 var x = 3; // x contient la valeur 3
@@ -292,7 +292,7 @@ Mais il existe des types plus complexes, qui procurent des raccourcis utiles pou
 
 Saisissez quelques uns de ces exemples dans la console pour avoir une idée de leur fonctionnement. Dans chaque cas, voyez si vous avez deviné la valeur avant de saisir la deuxième ligne.
 
-Notez que vous pouvez opportunément utiliser une autre variable comme opérateur sur la droite de chaque expression, par exemple :
+Notez que vous pouvez opportunément utiliser une autre variable comme opérateur sur la droite de chaque expression, par exemple&nbsp;:
 
 ```js
 var x = 3; // x contient la valeur 3
@@ -302,7 +302,7 @@ x *= y; // x contient maintenant la valeur 12
 
 > **Note :** Il y a des tas d'[autres opérateurs d'assignation disponibles](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment_operators), mais ceux‑ci sont les plus courants que vous devez les connaître dès maintenant.
 
-## Apprentissage actif : dimensionner une boîte à canevas
+## Apprentissage actif&nbsp;: dimensionner une boîte à canevas
 
 Dans cet exercice, vous allez manier quelques nombres et opérateurs pour changer la taille d'une boîte. La boîte est tracée à l'aide de l'API de navigateur nommée {{domxref("Canvas API", "", "", "true")}}. Pas besoin de savoir comment elle fonctionne — concentrez-vous simplement sur les mathématiques pour l'instant. Les largeur et hauteur de la boîte (en pixels) sont définies par les variables `x` et `y`, qui sont toutes deux initialisées avec la valeur 50.
 
@@ -336,14 +336,14 @@ Parfois nous avons besoin d'exécuter des tests vrai/faux (true/false), puis d'a
 
 > **Note :** Vous verrez peut‑être certaines personnes utiliser `==` et `!=` pour leurs test d'égalité ou non-égalité. Ces opérateurs sont valides en JavaScript, mais différents de `===`/`!==`. 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 _et_ 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.
 
-Si vous entrez certaines de ces valeurs dans une console, vous constaterez que toutes renvoient une valeur `true`/`false` — 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 :
+Si vous entrez certaines de ces valeurs dans une console, vous constaterez que toutes renvoient une valeur `true`/`false` — 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&nbsp;:
 
 - Afficher l'étiquette textuelle ad-hoc sur un bouton selon qu'une fonctionnalité est active ou pas
 - Afficher un message de fin de jeu si un jeu est terminé ou un message de victoire si le jeu a été remporté
 - Afficher des remerciements saisonniers corrects selon la saison de vacances
 - Faire un zoom avant ou arrière sur une carte selon le niveau de zoom choisi
 
-Nous verrons comment coder cette logique quand nous étudierons les directives conditionnelles dans un article ultérieur. Pour le moment, regardons un exemple rapide :
+Nous verrons comment coder cette logique quand nous étudierons les directives conditionnelles dans un article ultérieur. Pour le moment, regardons un exemple rapide&nbsp;:
 
 ```html
 <button>Démarrer la machine</button>
@@ -359,7 +359,7 @@ btn.addEventListener('click', updateBtn);
 function updateBtn() {
   if (btn.textContent === 'Démarrer la machine') {
     btn.textContent = 'Arrêter la machine';
-    txt.textContent = 'La machine est en marche !';
+    txt.textContent = 'La machine est en marche&nbsp;!';
   } else {
     btn.textContent = 'Démarrer la machine';
     txt.textContent = 'La machine est arrêtée.';
@@ -371,7 +371,7 @@ function updateBtn() {
 
 **[Ouvrir dans une nouvelle fenêtre](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html)**
 
-Vous pouvez voir l'utilisation de l'opérateur d'égalité stricte dans la fonction `updateBtn()`. Dans ce cas, nous ne testons pas si deux expressions mathématiques ont la même valeur — nous testons si le contenu textuel d'un bouton contient une certaine chaîne — mais c'est toujours le même principe. Si le bouton affiche « Démarrer la machine » quand on le presse, nous changeons son étiquette en « Arrêter la machine » et mettons à jour l'étiquette comme il convient. Si le bouton indique « Arrêter la machine » au moment de le presser, nous basculons l'étiquette à nouveau.
+Vous pouvez voir l'utilisation de l'opérateur d'égalité stricte dans la fonction `updateBtn()`. Dans ce cas, nous ne testons pas si deux expressions mathématiques ont la même valeur — nous testons si le contenu textuel d'un bouton contient une certaine chaîne — mais c'est toujours le même principe. Si le bouton affiche «&nbsp;Démarrer la machine&nbsp;» quand on le presse, nous changeons son étiquette en «&nbsp;Arrêter la machine&nbsp;» et mettons à jour l'étiquette comme il convient. Si le bouton indique «&nbsp;Arrêter la machine&nbsp;» au moment de le presser, nous basculons l'étiquette à nouveau.
 
 > **Note :** Un contrôle qui alterne entre deux états porte généralement le nom de **toggle** (bascule). Il bascule d'un état à l'autre — allumé, éteint, etc.
 
diff --git a/files/fr/learn/javascript/first_steps/silly_story_generator/index.md b/files/fr/learn/javascript/first_steps/silly_story_generator/index.md
index c24a27df3d..9ebf048231 100644
--- a/files/fr/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/fr/learn/javascript/first_steps/silly_story_generator/index.md
@@ -22,7 +22,7 @@ Dans cette évaluation, vous aurez pour tâche d'utiliser les connaissances que
       <th scope="row">Objectif :</th>
       <td>
         <p>
-          Tester la compréhension des fondamentaux JavaScript tels que les
+          Tester la compréhension des fondamentaux JavaScript tels que les
           variables, les nombres, les opérateurs, les chaînes de caractères et
           les tableaux.
         </p>
@@ -69,10 +69,10 @@ Variables initiales et fonctions :
 1.  Dans le fichier de texte brut, copiez tout le code présent sous le titre "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" et collez-le en haut du fichier `main`. Cela vous donne trois variables qui stockent les références respectivement vers le champ "Enter custom name", vers le bouton "Generate random story" (`randomize`), et vers la balise {{htmlelement("p")}} en bas du corps HTML dans lequel l'histoire sera copiée (`story`). Par ailleurs, vous avez une fonction appelée `randomValueFromArray()` qui prend une table, et qui renvoie au hasard l'un des éléments qu'elle contient.
 2.  Maintenant regardons la deuxième section du fichier de texte brut : "2. RAW TEXT STRINGS". Cette section contient des chaînes de caractères qui vont se comporter comme des entrées (_input_) dans notre program. L'idée est que vous intégriez ces variables internes dans `main.js`:
 
-    1.  Stockez la première longue chaîne de caractères (string) dans la variable `storyText`.
-    2.  Stockez le premier groupe de trois strings dans le tableau `insertX`.
-    3.  Stockez le deuxième groupe de trois strings dans le tableau `insertY`.
-    4.  Stockez le troisième groupe de trois strings dans une tableau `insertZ`.
+    1.  Stockez la première longue chaîne de caractères (string) dans la variable `storyText`.
+    2.  Stockez le premier groupe de trois strings dans le tableau `insertX`.
+    3.  Stockez le deuxième groupe de trois strings dans le tableau `insertY`.
+    4.  Stockez le troisième groupe de trois strings dans une tableau `insertZ`.
 
 Mettre en place le gestionnaire d'événements (_event handler_) et le squelette de la fonction :
 
@@ -80,18 +80,18 @@ Mettre en place le gestionnaire d'événements (_event handler_) et le squelette
 2.  Copiez le code qui se trouve sous le titre "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" et collez-le en bas de votre fichier `main.js` principal. Cela :
 
     - Ajoute un gestionnaire d'événements pour les clics à la variable `randomize` de telle sorte que quand on clique sur le bouton associé, la fonction `result()` se lance.
-    - Ajoute une définition partiellement complète de la fonction `result()` à votre code. Pour le reste de l'évaluation, vous compléterez des lignes au sein de cette fonction pour la compléter et la faire fonctionner correctement.
+    - Ajoute une définition partiellement complète de la fonction `result()` à votre code. Pour le reste de l'évaluation, vous compléterez des lignes au sein de cette fonction pour la compléter et la faire fonctionner correctement.
 
 Compléter la fonction `result()` :
 
 1.  Créer une nouvelle variable nommée `newStory`, et fixer sa valeur pour qu'elle soit égale à `storyText`. C'est nécessaire pour que soit créée une nouvelle histoire au hasard à chaque fois qu'on appuiera sur le bouton "Generate" et que la fonction sera lancée. Si on apportait des modifications directement à `storyText`, on ne pourrait générer une nouvelle histoire qu'une seule fois.
 2.  Créer trois nouvelles variables nommées `xItem`, `yItem`, et `zItem`, et faites en sorte qu'elles soient égales au résultat de l'appel de `randomValueFromArray()` sur vos trois tables (le résultat dans chaque cas fera apparaître un élément au hasard en provenance de chacune des tables appelées). Par exemple, vous pouvez appeler la fonction et lui faire retourner une chaîne de caractères au hasard depuis `insertX` en écrivant `randomValueFromArray(insertX)`.
 3.  Ensuite nous allons remplacer les trois fichiers temporaires dans la chaîne `newStory` — `:insertx:`, `:inserty:`, et `:insertz:` — par les chaînes stockées dans `xItem`, `yItem`, and `zItem`. Ici, une méthode particulière de chaînes pourra vous aider : dans chaque cas, faites que l'appel à la méthode soit égal à `newStory`, de sorte qu'à chaque appel, `newStory` est égal à lui-même, mais avec les substitutions effectuées. Ainsi, à chaque fois qu'on appuiera sur le bouton, ces fichiers temporaires seront chacun remplacés par une chaîne de caractères absurdes au hasard. Pour information, la méthode en question remplace seulement la première séquence de sous-chaîne qu'elle trouve, donc vous devrez peut-être l'un des appels deux fois.
-4.  Dans le premier block `if`, ajoutez une autre méthode de remplacement de chaîne pour remplacer le nom 'Bob' que vous trouverez dans la chaîne `newStory` en tant que variable `name`. Dans ce block, on établit que "Si une valeur a été entrée dans le champ `customName` text input, on remplacera dans l'histoire le mot Bob par ce nom personnalisé".
+4.  Dans le premier block `if`, ajoutez une autre méthode de remplacement de chaîne pour remplacer le nom 'Bob' que vous trouverez dans la chaîne `newStory` en tant que variable `name`. Dans ce block, on établit que "Si une valeur a été entrée dans le champ `customName` text input, on remplacera dans l'histoire le mot Bob par ce nom personnalisé".
 5.  Dans le deuxième block `if`, on vérifie que le bouton radio `uk` a été coché. Si c'est le cas, nous voulons convertir les valeurs de poids et de température de l'histoire. Les pounds et les farenheit deviennent des stones et des centigrades. Procédez comme suit :
 
     1.  Cherchez la formule pour convertir les pounds en stones et les fareinheit en centigrades.
-    2.  Dans la ligne qui définit la variable `weight` (poids), remplacez 300 par un calcul qui convertit 300 pounds en stones. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez `'stone'`.
+    2.  Dans la ligne qui définit la variable `weight` (poids), remplacez 300 par un calcul qui convertit 300 pounds en stones. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez `'stone'`.
     3.  Dans la ligne qui définit la variable `temperature`, remplacez 94 par un calcul qui convertit 94 fahrenheit en centigrades. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez `'centigrade'`.
     4.  Juste sous la définition des deux variables, ajoutez deux lignes de remplacement de chaînes supplémentaires qui remplacent '94 farhenheit' par les contenus de la variable `temperature`, et '300 pounds' par les contenus de la variable `weight`.
 
@@ -108,11 +108,11 @@ Compléter la fonction `result()` :
 
 ## Évaluation
 
-Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir soumettre votre travail à votre enseignant/encadrant pour être évalué. Si vous êtes autodidacte, vous pouvez facilement obtenir le guide de notation en vous adressant à la mailing list [dev-mdc](https://lists.mozilla.org/listinfo/dev-mdc) ou au canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez de faire l'exercice d'abord — vous ne gagnez rien à tricher !
+Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir soumettre votre travail à votre enseignant/encadrant pour être évalué. Si vous êtes autodidacte, vous pouvez facilement obtenir le guide de notation en vous adressant à la mailing list [dev-mdc](https://lists.mozilla.org/listinfo/dev-mdc) ou au canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez de faire l'exercice d'abord — vous ne gagnez rien à tricher !
 
 {{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
 
-## Dans ce module
+## Dans ce module
 
 - [What is JavaScript?](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript)
 - [A first splash into JavaScript](/fr/docs/Learn/JavaScript/First_steps/A_first_splash)
diff --git a/files/fr/learn/javascript/first_steps/strings/index.md b/files/fr/learn/javascript/first_steps/strings/index.md
index 7ee4808221..9f9245596b 100644
--- a/files/fr/learn/javascript/first_steps/strings/index.md
+++ b/files/fr/learn/javascript/first_steps/strings/index.md
@@ -5,7 +5,7 @@ translation_of: Learn/JavaScript/First_steps/Strings
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}
 
-Concentrons-nous maintenant sur les chaînes de caractères - c'est le nom donné à un segment de texte en programmation. Dans cet article, nous aborderons les aspects les plus communs des chaînes de caractères que vous devez vraiment connaître quand vous apprenez JavaScript, comme créer une chaîne de caractères, échapper des guillemets dans une chaîne ou encore concaténer des chaînes.
+Concentrons-nous maintenant sur les chaînes de caractères - c'est le nom donné à un segment de texte en programmation. Dans cet article, nous aborderons les aspects les plus communs des chaînes de caractères que vous devez vraiment connaître quand vous apprenez JavaScript, comme créer une chaîne de caractères, échapper des guillemets dans une chaîne ou encore concaténer des chaînes.
 
 <table class="standard-table">
   <tbody>
@@ -34,7 +34,7 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p
 
 ## Chaînes de caractères — les bases
 
-À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez  [l'ouvrir](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparée, ou bien utiliser celle de [l'explorateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools); comme vous préférez).
+À première vue, les chaînes se traitent de la même manière que les nombres&nbsp;; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez [l'ouvrir](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparée, ou bien utiliser celle de [l'explorateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools); comme vous préférez).
 
 ```html hidden
 <!DOCTYPE html>
@@ -111,8 +111,8 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p
       document.body.appendChild(inputDiv);
 
       if(document.querySelectorAll('div').length > 1) {
-        inputForm.focus();
-      }
+        inputForm.focus();
+      }
 
       inputForm.addEventListener('change', executeCode);
     }
@@ -148,16 +148,16 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p
 
 ### Créer une chaîne de texte
 
-1.  Pour débuter, entrez les lignes suivantes :
+1.  Pour débuter, entrez les lignes suivantes&nbsp;:
 
     ```js
     let string = 'La révolution ne sera pas télévisée.';
     string;
     ```
 
-    Comme nous l'avons fait avec les nombres, nous déclarons une variable, l'initialisons avec une valeur de chaîne, puis renvoyons la valeur. La seule différence ici est que lorsque nous écrivons une chaîne, nous la mettons entre guillemets.
+    Comme nous l'avons fait avec les nombres, nous déclarons une variable, l'initialisons avec une valeur de chaîne, puis renvoyons la valeur. La seule différence ici est que lorsque nous écrivons une chaîne, nous la mettons entre guillemets.
 
-2.  Si vous ne le faites pas, ou si vous oubliez un des guillemets, vous déclenchez une erreur. Essayez d'entrer une de ces lignes :
+2.  Si vous ne le faites pas, ou si vous oubliez un des guillemets, vous déclenchez une erreur. Essayez d'entrer une de ces lignes&nbsp;:
 
     ```js example-bad
     let badString = Voici un test;
@@ -165,9 +165,9 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p
     let badString = Voici un test';
     ```
 
-    Ces lignes de code ne fonctionnent pas parce que toute chaîne de texte qui n'est pas écrite entre guillemets est considérée comme un nom de variable, un nom de propriété, un mot réservé ou quelque chose de semblable. Quand l'interpréteur ne parvient pas à trouver la déclaration de ladite variable, une erreur est déclenchée (par ex. « missing ; before statement »). Si l'interpréteur voit le début d'une chaîne  mais ne trouve pas sa fin, comme dans la ligne 2, il se plaint en émettant une erreur (avec « *unterminated string literal* »). Si votre programme produit de telles erreurs, revoyez‑le et vérifiez qu'aucun guillemet ne manque.
+    Ces lignes de code ne fonctionnent pas parce que toute chaîne de texte qui n'est pas écrite entre guillemets est considérée comme un nom de variable, un nom de propriété, un mot réservé ou quelque chose de semblable. Quand l'interpréteur ne parvient pas à trouver la déclaration de ladite variable, une erreur est déclenchée (par ex. «&nbsp;missing ; before statement »). Si l'interpréteur voit le début d'une chaîne mais ne trouve pas sa fin, comme dans la ligne 2, il se plaint en émettant une erreur (avec «&nbsp;*unterminated string literal* »). Si votre programme produit de telles erreurs, revoyez‑le et vérifiez qu'aucun guillemet ne manque.
 
-3.  L'assertion suivante fonctionne si la variable `string` a été préalablement définie — essayez maintenant :
+3.  L'assertion suivante fonctionne si la variable `string` a été préalablement définie — essayez maintenant&nbsp;:
 
     ```js
     let badString = string;
@@ -178,7 +178,7 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p
 
 ### Guillemets simples vs guillemets doubles
 
-1.  En JavaScript, vous pouvez envelopper vos chaînes entre des guillemets simples ou doubles. Les deux expressions suivantes sont correctes :
+1.  En JavaScript, vous pouvez envelopper vos chaînes entre des guillemets simples ou doubles. Les deux expressions suivantes sont correctes&nbsp;:
 
     ```js
     let sgl = 'Guillemet simple.';
@@ -187,13 +187,13 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p
     dbl;
     ```
 
-2.  Il y a une toute petite différence entre les deux, et celle que vous retenez relève de la préférence personnelle. Prenez-en une, et tenez‑vous y toutefois : du code avec des mises entre guillemets diversifiées peut amener des confusions, en particulier si vous utilisez les deux sortes dans la même chaîne ! Ce qui suit renvoie une erreur :
+2.  Il y a une toute petite différence entre les deux, et celle que vous retenez relève de la préférence personnelle. Prenez-en une, et tenez‑vous y toutefois&nbsp;: du code avec des mises entre guillemets diversifiées peut amener des confusions, en particulier si vous utilisez les deux sortes dans la même chaîne&nbsp;! Ce qui suit renvoie une erreur&nbsp;:
 
     ```js example-bad
-    let badQuotes = 'Quoi sur Terre ?";
+    let badQuotes = 'Quoi sur Terre&nbsp;?";
     ```
 
-3.  L'interpréteur pensera que la chaîne n'a pas été fermée, car le type de guillemet autre ne servant pas à délimiter les chaînes peut y être employé. Par exemple, ces deux assertions sont valables :
+3.  L'interpréteur pensera que la chaîne n'a pas été fermée, car le type de guillemet autre ne servant pas à délimiter les chaînes peut y être employé. Par exemple, ces deux assertions sont valables&nbsp;:
 
     ```js
     let sglDbl = 'Mangeriez‑vous un "souper de poisson"?';
@@ -202,7 +202,7 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p
     dblSgl;
     ```
 
-4.  Bien entendu, vous ne pouvez pas inclure dans la chaîne le même type de guillemet que celui qui est utilisé pour la délimiter. Ce qui suit conduit à une erreur, car l'explorateur ne peut pas déterminer là où se termine la chaîne :
+4.  Bien entendu, vous ne pouvez pas inclure dans la chaîne le même type de guillemet que celui qui est utilisé pour la délimiter. Ce qui suit conduit à une erreur, car l'explorateur ne peut pas déterminer là où se termine la chaîne&nbsp;:
 
     ```js example-bad
     let bigmouth = 'Je n'ai pas eu droit à prendre place...';
@@ -212,47 +212,47 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p
 
 ### Échappement de caractères dans une chaîne
 
-Pour corriger l'erreur dans notre ligne de code précédente, il nous suffit d'échapper au problème que pose le guillemet. « Échapper des caractères » signifie que nous les marquons de manière à ce qu'ils soient reconnus comme partie intégrante du texte, et non pas comme symbole de code. Dans JavaScript, nous le faisons en mettant une barre oblique inverse juste avant le caractère. Essayons :
+Pour corriger l'erreur dans notre ligne de code précédente, il nous suffit d'échapper au problème que pose le guillemet. «&nbsp;Échapper des caractères&nbsp;» signifie que nous les marquons de manière à ce qu'ils soient reconnus comme partie intégrante du texte, et non pas comme symbole de code. Dans JavaScript, nous le faisons en mettant une barre oblique inverse juste avant le caractère. Essayons&nbsp;:
 
 ```js
 let bigmouth = 'Je n\'ai pas eu droit à prendre place...';
 bigmouth;
 ```
 
-Cela fonctionne à la perfection. Vous pouvez échapper d'autres caractères de la même manière, par ex. `\"`,  et il y a certains codes spéciaux à côté. Voyez  [Notations d'échappement](/fr/docs/Web/JavaScript/Reference/Global_Objects/String#escape_notation) pour plus de détails.
+Cela fonctionne à la perfection. Vous pouvez échapper d'autres caractères de la même manière, par ex. `\"`,  et il y a certains codes spéciaux à côté. Voyez  [Notations d'échappement](/fr/docs/Web/JavaScript/Reference/Global_Objects/String#escape_notation) pour plus de détails.
 
 ## Concaténation de chaînes
 
-1.  Concaténer est un terme de programmation du genre chic qui signifie « attacher ensemble ». Pour attacher des chaînes en JavaScript, on utilise l'opérateur plus (+) , le même que l'on utilise pour ajouter deux nombres, mais dans ce contexte il fait quelque chose de différent. Voyons un exemple dans la console.
+1.  Concaténer est un terme de programmation du genre chic qui signifie «&nbsp;attacher ensemble&nbsp;». Pour attacher des chaînes en JavaScript, on utilise l'opérateur plus (+) , le même que l'on utilise pour ajouter deux nombres, mais dans ce contexte il fait quelque chose de différent. Voyons un exemple dans la console.
 
     ```js
     let one = 'Hello, ';
-    let two = 'comment allez‑vous ?';
+    let two = 'comment allez‑vous&nbsp;?';
     let joined = one + two;
     joined;
     ```
 
-    Il en résulte que la variable nommée `joined` contient la valeur "Hello, comment allez‑vous ?".
+    Il en résulte que la variable nommée `joined` contient la valeur "Hello, comment allez‑vous&nbsp;?".
 
-2.  Dans le dernier exemple, nous avons juste attaché deux chaînes ensemble, mais vous pouvez en attacher autant que vous voulez, pour autant que vous mettiez un signe  `+`  entre chacune. Essayez ceci :
+2.  Dans le dernier exemple, nous avons juste attaché deux chaînes ensemble, mais vous pouvez en attacher autant que vous voulez, pour autant que vous mettiez un signe  `+`  entre chacune. Essayez ceci&nbsp;:
 
     ```js
     let multiple = one + one + one + one + two;
     multiple;
     ```
 
-3.  Vous pouvez aussi mélanger des variables avec des vraies chaînes. Regardez :
+3.  Vous pouvez aussi mélanger des variables avec des vraies chaînes. Regardez&nbsp;:
 
     ```js
     let response = one + 'Je vais bien — et vous ' + two;
     response;
     ```
 
-> **Note :** Quand vous entrez une chaîne dans votre code, entre guillemets simples ou doubles, on l'appelle **chaîne littérale**.
+> **Note :** Quand vous entrez une chaîne dans votre code, entre guillemets simples ou doubles, on l'appelle **chaîne littérale**.
 
 ### Concaténation dans un contexte
 
-Examinons une concaténation dans une action — voici un exemple tiré en amont de ce cours :
+Examinons une concaténation dans une action — voici un exemple tiré en amont de ce cours&nbsp;:
 
 ```html
 <button>Pressez‑moi</button>
@@ -262,8 +262,8 @@ Examinons une concaténation dans une action — voici un exemple tiré en amont
 let button = document.querySelector('button');
 
 button.onclick = function() {
-  let name = prompt('Quel est votre nom ?');
-  alert('Hello ' + name + ', sympa de vous voir !');
+  let name = prompt('Quel est votre nom&nbsp;?');
+  alert('Hello ' + name + ', sympa de vous voir&nbsp;!');
 }
 ```
 
@@ -273,7 +273,7 @@ Ici nous utilisons en ligne 4 la fonction {{domxref("Window.prompt()", "Window.p
 
 ### Nombres vs chaînes
 
-1.  Que se passe-t-il quand nous essayons d'additionner (ou concaténer) une chaîne et un nombre ? Essayons dans la console :
+1.  Que se passe-t-il quand nous essayons d'additionner (ou concaténer) une chaîne et un nombre&nbsp;? Essayons dans la console&nbsp;:
 
     ```js
     'Front ' + 242;
@@ -288,9 +288,9 @@ Ici nous utilisons en ligne 4 la fonction {{domxref("Window.prompt()", "Window.p
     typeof myDate;
     ```
 
-3.  Si vous avez une variable numérique que vous souhaitez convertir en chaîne sans autre modification, ou une variable numérique que vous voulez convertir en chaîne sans autre modification, vous pouvez utiliser les constructions suivantes :
+3.  Si vous avez une variable numérique que vous souhaitez convertir en chaîne sans autre modification, ou une variable numérique que vous voulez convertir en chaîne sans autre modification, vous pouvez utiliser les constructions suivantes&nbsp;:
 
-    - L'objet {{jsxref("Number")}} convertit tout ce qui lui est passé en nombre, si c'est possible. Essayez :
+    - L'objet {{jsxref("Number")}} convertit tout ce qui lui est passé en nombre, si c'est possible. Essayez&nbsp;:
 
       ```js
       let myString = '123';
@@ -298,7 +298,7 @@ Ici nous utilisons en ligne 4 la fonction {{domxref("Window.prompt()", "Window.p
       typeof myNum;
       ```
 
-    - D'autre part, tout nombre possède une méthode nommée [`toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) qui le convertit en chaîne équivalente. Essayez :
+    - D'autre part, tout nombre possède une méthode nommée [`toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) qui le convertit en chaîne équivalente. Essayez&nbsp;:
 
       ```js
       let myNum = 123;
diff --git a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md
index 6ee07beb5c..63e4f6aafc 100644
--- a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md
+++ b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md
@@ -19,19 +19,19 @@ original_slug: Learn/JavaScript/First_steps/methode_chaine_utile
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
 
-À présent que nous avons vu les bases de la manipulation des chaînes de caractères, allons un cran plus loin et commençons à imaginer les opérations utiles que nous pourrions faire sur les chaînes de caractères avec les méthodes intégrées : trouver la longueur d'une chaîne, assembler ou couper des chaînes, substituer un caractère à un autre dans une chaîne, et plus encore.
+À présent que nous avons vu les bases de la manipulation des chaînes de caractères, allons un cran plus loin et commençons à imaginer les opérations utiles que nous pourrions faire sur les chaînes de caractères avec les méthodes intégrées&nbsp;: trouver la longueur d'une chaîne, assembler ou couper des chaînes, substituer un caractère à un autre dans une chaîne, et plus encore.
 
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Vocabulaire courant de l'informatique, bases de HTML et CSS,
         compréhension de ce que fait JavaScript.
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Comprendre que les chaînes de caractères sont des objets, et apprendre à
         utiliser certaines méthodes basiques disponibles sur ces objets pour
@@ -49,9 +49,9 @@ Nous l'avons déjà dit, et nous le redirons — _tout_ est objet en JavaScript.
 let string = 'Ceci est une chaîne';
 ```
 
-votre variable devient une instance de l'objet `String`, et par conséquent possède un grand nombre de propriétés et de méthodes associées. Allez sur la page de l'objet {{jsxref("String")}} et regardez la liste sur le côté de la page !
+votre variable devient une instance de l'objet `String`, et par conséquent possède un grand nombre de propriétés et de méthodes associées. Allez sur la page de l'objet {{jsxref("String")}} et regardez la liste sur le côté de la page&nbsp;!
 
-**Avant que votre cervelle ne commence à bouillir, pas de panique !** Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous en utiliserez certaines assez souvent. Nous allons les voir maintenant.
+**Avant que votre cervelle ne commence à bouillir, pas de panique !** Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous en utiliserez certaines assez souvent. Nous allons les voir maintenant.
 
 Entrez quelques exemples dans une console vierge. En voici une ci-dessous (vous pouvez aussi [ouvrir cette console](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparés, ou utiliser la [console de développement du navigateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) si vous préférez).
 
@@ -163,50 +163,50 @@ Entrez quelques exemples dans une console vierge. En voici une ci-dessous (vous
 
 ### Trouver la longueur d'une chaîne
 
-C'est facile — il suffit d'utiliser la propriété {{jsxref("String.prototype.length", "length")}}. Entrez ceci :
+C'est facile — il suffit d'utiliser la propriété {{jsxref("String.prototype.length", "length")}}. Entrez ceci&nbsp;:
 
 ```js
 let browserType = 'mozilla';
 browserType.length;
 ```
 
-Cette commande doit renvoyer le nombre 7, parce que « mozilla » comporte 7 caractères. C'est utile pour de nombreuses raisons ; par exemple, vous pourriez avoir besoin de trouver les longueurs d'une série de noms pour les afficher par taille ou faire savoir à un utilisateur qu'il a entré un nom trop long dans un champ de formulaire à partir du moment où il dépasse une certaine taille.
+Cette commande doit renvoyer le nombre 7, parce que «&nbsp;mozilla&nbsp;» comporte 7 caractères. C'est utile pour de nombreuses raisons ; par exemple, vous pourriez avoir besoin de trouver les longueurs d'une série de noms pour les afficher par taille ou faire savoir à un utilisateur qu'il a entré un nom trop long dans un champ de formulaire à partir du moment où il dépasse une certaine taille.
 
 ### Retrouver un caractère donné dans une chaîne
 
-Dans le même ordre d'idées, il est possible de faire renvoyer tout caractère d'une chaîne avec **la notation crochets** — c'est-à-dire en ajoutant des crochets (`[]`) à la fin du nom de la variable. Entre les crochets, mettez le rang du caractère à retrouver ; par exemple, pour retrouver le premier caractère, vous devez  écrire ceci :
+Dans le même ordre d'idées, il est possible de faire renvoyer tout caractère d'une chaîne avec **la notation crochets** — c'est-à-dire en ajoutant des crochets (`[]`) à la fin du nom de la variable. Entre les crochets, mettez le rang du caractère à retrouver&nbsp;; par exemple, pour retrouver le premier caractère, vous devez écrire ceci&nbsp;:
 
 ```js
 browserType[0];
 ```
 
-Les ordinateurs décomptent à partir de 0, pas de 1 ! Pour retrouver le dernier caractère de _n'importe quelle_ chaîne, on peut utiliser la commande qui suit ; elle combine cette technique avec la propriété `length`  que nous avons vue plus haut :
+Les ordinateurs décomptent à partir de 0, pas de 1&nbsp;! Pour retrouver le dernier caractère de _n'importe quelle_ chaîne, on peut utiliser la commande qui suit&nbsp;; elle combine cette technique avec la propriété `length`  que nous avons vue plus haut&nbsp;:
 
 ```js
 browserType[browserType.length-1];
 ```
 
-La longueur de « mozilla » est de 7 caractères, mais comme le décompte se fait à partir de 0, la position du caractère est 6, d'où la nécessité d'écrire `length-1`. Vous pourrez utiliser cette propriété pour, par exemple, trouver la première lettre d'une série de chaînes et les trier alphabétiquement.
+La longueur de «&nbsp;mozilla&nbsp;» est de 7 caractères, mais comme le décompte se fait à partir de 0, la position du caractère est 6, d'où la nécessité d'écrire `length-1`. Vous pourrez utiliser cette propriété pour, par exemple, trouver la première lettre d'une série de chaînes et les trier alphabétiquement.
 
 ### Trouver une sous-chaîne à l'intérieur d'une chaîne et l'extraire
 
-1.  Parfois, vous aurez besoin de trouver si une chaîne est présente à l'intérieur d'une autre chaîne plus grande (on dit en général _si une sous-chaîne est présente à l'intérieur d'une chaîne_). La méthode {{jsxref("String.prototype.indexOf()", "indexOf()")}} permet de le faire ; elle prend un unique ({{glossary("parameter")}}) — la sous-chaîne recherchée. Essayez :
+1.  Parfois, vous aurez besoin de trouver si une chaîne est présente à l'intérieur d'une autre chaîne plus grande (on dit en général _si une sous-chaîne est présente à l'intérieur d'une chaîne_). La méthode {{jsxref("String.prototype.indexOf()", "indexOf()")}} permet de le faire&nbsp;; elle prend un unique ({{glossary("parameter")}}) — la sous-chaîne recherchée. Essayez&nbsp;:
 
     ```js
     browserType.indexOf('zilla');
     ```
 
-    La commande donne 2 comme résultat, car la sous-chaîne « zilla » commence à la position 2 (0, 1, 2 — donc au troisième caractère) dans « mozilla ». Un tel code s'utilise pour filtrer des chaînes. Par exemple, vous pourriez avoir une liste d'adresses web et ne vouloir afficher que celles qui contiennent « mozilla ».
+    La commande donne 2 comme résultat, car la sous-chaîne «&nbsp;zilla&nbsp;» commence à la position 2 (0, 1, 2 — donc au troisième caractère) dans «&nbsp;mozilla&nbsp;». Un tel code s'utilise pour filtrer des chaînes. Par exemple, vous pourriez avoir une liste d'adresses web et ne vouloir afficher que celles qui contiennent «&nbsp;mozilla ».
 
-2.  On peut faire cela autrement, peut-être plus efficacement encore. Écrivez :
+2.  On peut faire cela autrement, peut-être plus efficacement encore. Écrivez&nbsp;:
 
     ```js
     browserType.indexOf('vanilla');
     ```
 
-    Cela doit vous donner `-1` comme résultat — renvoyé quand la sous-chaîne, en l'occurence « vanilla », n'est pas trouvée dans la chaîne principale.
+    Cela doit vous donner `-1` comme résultat — renvoyé quand la sous-chaîne, en l'occurence «&nbsp;vanilla&nbsp;», n'est pas trouvée dans la chaîne principale.
 
-    Vous pouvez utiliser cette propriété pour trouver tous les cas de chaînes **ne** **contenant** **pas** la sous-chaîne « mozilla », ou bien **la contenant**, si vous utilisez l'opérateur négation logique, tel que montré ci-dessous. Vous pourriez faire quelque chose comme :
+    Vous pouvez utiliser cette propriété pour trouver tous les cas de chaînes **ne** **contenant** **pas** la sous-chaîne «&nbsp;mozilla&nbsp;», ou bien **la contenant**, si vous utilisez l'opérateur négation logique, tel que montré ci-dessous. Vous pourriez faire quelque chose comme :
 
     ```js
     if(browserType.indexOf('mozilla') !== -1) {
@@ -214,23 +214,23 @@ La longueur de « mozilla » est de 7 caractères, mais comme le décompte s
     }
     ```
 
-3.  Lorsque vous savez où la sous-chaîne commence à l'intérieur de la chaîne, et savez à quel caractère elle prend fin, vous pouvez utiliser {{jsxref("String.prototype.slice()", "slice()")}} pour l'extraire. Voyez ce code :
+3.  Lorsque vous savez où la sous-chaîne commence à l'intérieur de la chaîne, et savez à quel caractère elle prend fin, vous pouvez utiliser {{jsxref("String.prototype.slice()", "slice()")}} pour l'extraire. Voyez ce code&nbsp;:
 
     ```js
     browserType.slice(0,3);
     ```
 
-    Il renvoie « moz » — le premier paramètre est la position du caractère où doit commencer l'extraction, et le second paramètre est la position du caractère se trouvant après le dernier à extraire. Ainsi, l'extraction va de la première position à la dernière, celle-ci non comprise. On peut dire, dans notre cas, que le second paramètre est égal à la longueur de la chaîne retournée.
+    Il renvoie «&nbsp;moz&nbsp;» — le premier paramètre est la position du caractère où doit commencer l'extraction, et le second paramètre est la position du caractère se trouvant après le dernier à extraire. Ainsi, l'extraction va de la première position à la dernière, celle-ci non comprise. On peut dire, dans notre cas, que le second paramètre est égal à la longueur de la chaîne retournée.
 
-4.  Également, si vous souhaitez extraire tous les caractères après un caractère donné jusqu'à la fin de la chaîne, vous n'avez pas à mettre le second paramètre ! Il suffit d'indiquer la position du caractère à partir duquel vous voulez extraire les caractères restants dans la chaîne. Essayez la commande :
+4.  Également, si vous souhaitez extraire tous les caractères après un caractère donné jusqu'à la fin de la chaîne, vous n'avez pas à mettre le second paramètre&nbsp;! Il suffit d'indiquer la position du caractère à partir duquel vous voulez extraire les caractères restants dans la chaîne. Essayez la commande&nbsp;:
 
     ```js
     browserType.slice(2);
     ```
 
-    Elle renvoie « zilla » — le caractère à la position 2 est « z » et comme nous n'avons pas mis de second paramètre, la sous-chaîne retournée comporte tous les caractères restants de la chaîne.
+    Elle renvoie «&nbsp;zilla&nbsp;» — le caractère à la position 2 est «&nbsp;z&nbsp;» et comme nous n'avons pas mis de second paramètre, la sous-chaîne retournée comporte tous les caractères restants de la chaîne.
 
-> **Note :** Le second paramètre de `slice()` est optionnel : s'il n'est pas defini, l'extraction va jusqu'à la fin de la chaîne originale. Il existe aussi d'autres options, allez à la page de {{jsxref("String.prototype.slice()", "slice()")}} pour voir ces autres options.
+> **Note :** Le second paramètre de `slice()` est optionnel : s'il n'est pas defini, l'extraction va jusqu'à la fin de la chaîne originale. Il existe aussi d'autres options, allez à la page de {{jsxref("String.prototype.slice()", "slice()")}} pour voir ces autres options.
 
 ### Changer la casse
 
@@ -254,13 +254,13 @@ La méthode prend deux paramètres — la chaîne que vous voulez remplacer et l
 browserType.replace('moz','van');
 ```
 
-À noter : pour que, dans un programme réel, la variable `browserType` reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire : `browserType = browserType.replace('moz','van');`.
+À noter&nbsp;: pour que, dans un programme réel, la variable `browserType` reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire&nbsp;: `browserType = browserType.replace('moz','van');`.
 
 ## Apprendre en pratiquant
 
-Dans cette section, vous allez pouvoir vous entraîner à écrire du code de manipulation de chaîne. Dans chacun des exercices ci-dessous, nous avons un tableau de chaînes, une boucle qui traîte chaque valeur dans le tableau et l'affiche dans une liste à puces. Vous n'avez pas besoin de comprendre comment fonctionnent les tableaux ou les boucles dès maintenant — cela vous sera expliqué dans de prochains articles. Tout ce dont vous avez besoin dans chaque cas est d'écrire le code qui va renvoyer les chaînes dans le format souhaité.
+Dans cette section, vous allez pouvoir vous entraîner à écrire du code de manipulation de chaîne. Dans chacun des exercices ci-dessous, nous avons un tableau de chaînes, une boucle qui traîte chaque valeur dans le tableau et l'affiche dans une liste à puces. Vous n'avez pas besoin de comprendre comment fonctionnent les tableaux ou les boucles dès maintenant — cela vous sera expliqué dans de prochains articles. Tout ce dont vous avez besoin dans chaque cas est d'écrire le code qui va renvoyer les chaînes dans le format souhaité.
 
-Chaque exemple est accompagné d'un bouton « Réinitialiser », que vous pouvez utiliser pour réinitialiser le code si vous faites une erreur et que vous ne parvenez pas à la corriger, et un bouton « Montrer la solution » sur lequel vous pouvez cliquer pour afficher une réponse possible si jamais vous êtes vraiment bloqué.
+Chaque exemple est accompagné d'un bouton «&nbsp;Réinitialiser&nbsp;», que vous pouvez utiliser pour réinitialiser le code si vous faites une erreur et que vous ne parvenez pas à la corriger, et un bouton «&nbsp;Montrer la solution&nbsp;» sur lequel vous pouvez cliquer pour afficher une réponse possible si jamais vous êtes vraiment bloqué.
 
 ### Filtrer des messages de vœux
 
@@ -327,7 +327,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar greetings = [\'Happy Birthday!\',\n                 \'Merry Christmas my love\',\n                 \'A happy Christmas to all the family\',\n                 \'You\\\'re all I want for Christmas\',\n                 \'Get well soon\'];\n\nfor(var i = 0; i < greetings.length; i++) {\n  var input = greetings[i];\n  if(greetings[i].indexOf(\'Christmas\') !== -1) {\n    var result = input;\n    var listItem = document.createElement(\'li\');\n    listItem.textContent = result;\n    list.appendChild(listItem);\n  }\n}';
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar greetings = [\'Happy Birthday!\',\n                 \'Merry Christmas my love\',\n                 \'A happy Christmas to all the family\',\n                 \'You\\\'re all I want for Christmas\',\n                 \'Get well soon\'];\n\nfor(var i = 0; i < greetings.length; i++) {\n var input = greetings[i];\n if(greetings[i].indexOf(\'Christmas\') !== -1) {\n    var result = input;\n    var listItem = document.createElement(\'li\');\n    listItem.textContent = result;\n    list.appendChild(listItem);\n  }\n}';
 
 textarea.addEventListener('input', updateCode);
 window.addEventListener('load', updateCode);
@@ -396,7 +396,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];\n\nfor(var i = 0; i < cities.length; i++) {\n  var input = cities[i];\n  var lower = input.toLowerCase();\n  var firstLetter = lower.slice(0,1);\n  var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n  var result = capitalized;\n  var listItem = document.createElement(\'li\');\n  listItem.textContent = result;\n  list.appendChild(listItem);\n\n}';
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];\n\nfor(var i = 0; i < cities.length; i++) {\n var input = cities[i];\n var lower = input.toLowerCase();\n var firstLetter = lower.slice(0,1);\n var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n var result = capitalized;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n\n}';
 
 textarea.addEventListener('input', updateCode);
 window.addEventListener('load', updateCode);
@@ -477,7 +477,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',\n                \'GNF576746573fhdg4737dh4;Greenfield\',\n                \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',\n                \'SYB4f65hf75f736463;Stalybridge\',\n                \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];\n\nfor(var i = 0; i < stations.length; i++) {\n  var input = stations[i];\n  var code = input.slice(0,3);\n  var semiC = input.indexOf(\';\');\n  var name = input.slice(semiC + 1);\n  var result = code + \': \' + name;\n  var listItem = document.createElement(\'li\');\n  listItem.textContent = result;\n  list.appendChild(listItem);\n}';
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',\n                \'GNF576746573fhdg4737dh4;Greenfield\',\n                \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',\n                \'SYB4f65hf75f736463;Stalybridge\',\n                \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];\n\nfor(var i = 0; i < stations.length; i++) {\n var input = stations[i];\n var code = input.slice(0,3);\n var semiC = input.indexOf(\';\');\n var name = input.slice(semiC + 1);\n var result = code + \': \' + name;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n}';
 
 
 textarea.addEventListener('input', updateCode);
diff --git a/files/fr/learn/javascript/first_steps/variables/index.md b/files/fr/learn/javascript/first_steps/variables/index.md
index f95a52cfa5..069edb90f5 100644
--- a/files/fr/learn/javascript/first_steps/variables/index.md
+++ b/files/fr/learn/javascript/first_steps/variables/index.md
@@ -10,14 +10,14 @@ Après lecture des deux articles précédents, vous savez maintenant ce qu'est J
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Vocabulaire courant de l'informatique, bases de HTML et CSS,
         compréhension de ce que fait JavaScript.
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Se familiariser avec l'usage élémentaire des variables en JavaScript.
       </td>
@@ -31,9 +31,9 @@ Tout au long de cet article, on vous demandera de saisir des lignes de code pour
 
 Toutefois, nous avons aussi incorporé une console JavaScript dans cette page pour vous permettre d'y écrire le code au cas où vous n'utiliseriez pas un navigateur avec une console JavaScript facilement accessible, ou si vous estimez qu'une console incorporée est plus confortable.
 
-## Qu'est ce qu'une variable ?
+## Qu'est ce qu'une variable&nbsp;?
 
-Une variable est un conteneur pour une valeur, tel un nombre à utiliser pour une addition, ou une chaîne devant faire partie d'une phrase. Mais un aspect spécial des variables est que les valeurs contenues peuvent changer. Voyons un exemple simple :
+Une variable est un conteneur pour une valeur, tel un nombre à utiliser pour une addition, ou une chaîne devant faire partie d'une phrase. Mais un aspect spécial des variables est que les valeurs contenues peuvent changer. Voyons un exemple simple&nbsp;:
 
 ```html
 <button>Pressez moi</button>
@@ -43,40 +43,40 @@ Une variable est un conteneur pour une valeur, tel un nombre à utiliser pour un
 const button = document.querySelector('button');
 
 button.onclick = function() {
-  let name = prompt('Quel est votre nom ?');
-  alert('Salut ' + name + ', sympa de vous voir !');
+  let name = prompt('Quel est votre nom&nbsp;?');
+  alert('Salut ' + name + ', sympa de vous voir&nbsp;!');
 }
 ```
 
 {{ EmbedLiveSample('Qu\'est_ce_qu\'une_variable_?', '100%', 50) }}
 
-Dans cet exemple, presser le bouton déclenche l'exécution de quelques lignes de code. La première ligne affiche à l'écran une boîte priant l'utilisateur de saisir son nom et stocke la valeur entrée dans une variable. La deuxième affiche un message de bienvenue avec la valeur de la variable.
+Dans cet exemple, presser le bouton déclenche l'exécution de quelques lignes de code. La première ligne affiche à l'écran une boîte priant l'utilisateur de saisir son nom et stocke la valeur entrée dans une variable. La deuxième affiche un message de bienvenue avec la valeur de la variable.
 
-Pour comprendre le pratique de la chose, imaginons comment nous aurions du coder cet exemple sans utiliser de variable. Serait-ce comme cela ?
+Pour comprendre le pratique de la chose, imaginons comment nous aurions du coder cet exemple sans utiliser de variable. Serait-ce comme cela&nbsp;?
 
 ```plain example-bad
-let name = prompt('Quel est votre nom ?');
+let name = prompt('Quel est votre nom&nbsp;?');
 
 if (name === 'Adam') {
-  alert('Salut Adam, sympa de vous voir !');
+  alert('Salut Adam, sympa de vous voir&nbsp;!');
 } else if (name === 'Alan') {
-  alert('Salut Alan, sympa de vous voir !');
+  alert('Salut Alan, sympa de vous voir&nbsp;!');
 } else if (name === 'Bella') {
-  alert('Salut Bella, sympa de vous voir !');
+  alert('Salut Bella, sympa de vous voir&nbsp;!');
 } else if (name === 'Bianca') {
-  alert('Salut Bianca, sympa de vous voir !');
+  alert('Salut Bianca, sympa de vous voir&nbsp;!');
 } else if (name === 'Chris') {
-  alert('Salut Chris, sympa de vous voir !');
+  alert('Salut Chris, sympa de vous voir&nbsp;!');
 }
 
 // ... etc.
 ```
 
-Peut-être ne comprenez‑vous pas (encore !) la syntaxe utilisée, mais vous l'imaginerez sans peine  — si nous n'avions pas de variables à disposition, nous devrions implémenter un bloc de code géant qui vérifierait quel était le nom saisi, puis afficherait un message approprié à ce nom. Cela est évidemment inefficace (le code est déjà plus volumineux avec seulement quatre possibilités) et il ne fonctionnerait certainement pas — il n'est pas possible de stocker tous les choix possibles.
+Peut-être ne comprenez‑vous pas (encore&nbsp;!) la syntaxe utilisée, mais vous l'imaginerez sans peine  — si nous n'avions pas de variables à disposition, nous devrions implémenter un bloc de code géant qui vérifierait quel était le nom saisi, puis afficherait un message approprié à ce nom. Cela est évidemment inefficace (le code est déjà plus volumineux avec seulement quatre possibilités) et il ne fonctionnerait certainement pas — il n'est pas possible de stocker tous les choix possibles.
 
-Les variables sont essentielles et à mesure que vous en apprendrez plus sur JavaScript, elles deviendront une seconde nature pour vous.
+Les variables sont essentielles et à mesure que vous en apprendrez plus sur JavaScript, elles deviendront une seconde nature pour vous.
 
-Une autre particularité des variables : elle peuvent contenir pratiquement de tout — pas uniquement des chaînes ou des nombres. Elles peuvent aussi contenir des données complexes et même des fonctions, ce qui permet de réaliser des choses étonnantes. Vous en apprendrez plus à ce propos au long de ce parcours.
+Une autre particularité des variables&nbsp;: elle peuvent contenir pratiquement de tout — pas uniquement des chaînes ou des nombres. Elles peuvent aussi contenir des données complexes et même des fonctions, ce qui permet de réaliser des choses étonnantes. Vous en apprendrez plus à ce propos au long de ce parcours.
 
 > **Note :** Nous disons que les variables contiennent des valeurs. C'est un distingo important. Les variables ne sont pas les valeurs elles‑mêmes : ce sont des conteneurs pour ces valeurs. Vous pouvez vous les représenter comme une boîte en carton dans laquelle il est possible de ranger des choses.
 
@@ -84,7 +84,7 @@ Une autre particularité des variables : elle peuvent contenir pratiquement de
 
 ## Déclarer une variable
 
-Avant de se servir d'une variable, il faut d'abord la créer — plus précisément, nous disons _déclarer la variable_. Pour ce faire, nous saisissons le mot‑clé `var` ou `let` suivi du nom que vous voulez donner à la variable :
+Avant de se servir d'une variable, il faut d'abord la créer — plus précisément, nous disons _déclarer la variable_. Pour ce faire, nous saisissons le mot‑clé `var` ou `let` suivi du nom que vous voulez donner à la variable&nbsp;:
 
 ```js
 let myName;
@@ -168,8 +168,8 @@ Dans ces lignes, nous venons de créer deux variables nommées respectivement `m
       document.body.appendChild(inputDiv);
 
       if(document.querySelectorAll('div').length > 1) {
-        inputForm.focus();
-      }
+        inputForm.focus();
+      }
 
       inputForm.addEventListener('change', executeCode);
     }
@@ -212,43 +212,43 @@ myName;
 myAge;
 ```
 
-Actuellement elles ne contiennent aucune valeur ; ce sont des conteneurs vides. Quand vous entrez les noms des variables, vous obtiendrez la valeur `undefined` en retour. Si elles n'existent pas, vous aurez un message d'erreur — essayez en saisissant
+Actuellement elles ne contiennent aucune valeur&nbsp;; ce sont des conteneurs vides. Quand vous entrez les noms des variables, vous obtiendrez la valeur `undefined` en retour. Si elles n'existent pas, vous aurez un message d'erreur — essayez en saisissant
 
 ```js
 scoobyDoo;
 ```
 
-> **Note :** Ne confondez pas une variable qui existe mais sans valeur définie avec une variable qui n'existe pas du tout — ce sont deux choses tout à fait différentes. Dans l'analogie des boîtes, _ne pas exister_ correspond à l'absence de boîte ; *valeur indéfinie* correspond à une boîte vide.
+> **Note :** Ne confondez pas une variable qui existe mais sans valeur définie avec une variable qui n'existe pas du tout — ce sont deux choses tout à fait différentes. Dans l'analogie des boîtes, _ne pas exister_ correspond à l'absence de boîte ; *valeur indéfinie* correspond à une boîte vide.
 
 ## Initialisation d'une variable
 
-Une fois la variable déclarée, vous pouvez l'initialiser avec une valeur. On réalise cela en saisissant le nom de la variable, suivi d'un signe égale (`=`), lui-même suivi de la valeur souhaitée pour la variable. Par exemple :
+Une fois la variable déclarée, vous pouvez l'initialiser avec une valeur. On réalise cela en saisissant le nom de la variable, suivi d'un signe égale (`=`), lui-même suivi de la valeur souhaitée pour la variable. Par exemple&nbsp;:
 
 ```js
 myName = 'Chris';
 myAge = 37;
 ```
 
-Revenez à la console maintenant et saisissez‑y ces deux lignes. Constatez que la console renvoie en confirmation la  valeur assignée à la variable dans chaque cas. Vous pouvez, à nouveau, faire renvoyer par la console les valeurs de variable en saisissant simplement son nom dans la console — essayez encore :
+Revenez à la console maintenant et saisissez‑y ces deux lignes. Constatez que la console renvoie en confirmation la valeur assignée à la variable dans chaque cas. Vous pouvez, à nouveau, faire renvoyer par la console les valeurs de variable en saisissant simplement son nom dans la console — essayez encore&nbsp;:
 
 ```js
 myName;
 myAge;
 ```
 
-Il est possible de déclarer et initialiser une variable en même temps, comme ceci :
+Il est possible de déclarer et initialiser une variable en même temps, comme ceci&nbsp;:
 
 ```js
 let myDog = 'Rover';
 ```
 
-C'est probablement ce que vous ferez la plupart du temps, c'est plus rapide que d'effectuer ces deux actions sur deux lignes distinctes.
+C'est probablement ce que vous ferez la plupart du temps, c'est plus rapide que d'effectuer ces deux actions sur deux lignes distinctes.
 
 ## La différence entre `var` et `let`
 
 A ce moment de votre apprentissage, vous vous demandez sans doute : mais quel besoin de deux mot-clé pour définir une variable ? Pourquoi `var` et `let` ?
 
-Les raisons sont d'ordre historique. A l'origine, quand Javascript fut créé, il n'y avait que `var`. Cela fonctionnait plutôt bien dans la plupart des cas, avec parfois quelques surprises -- l'implémentation étonnante du `var` peut amener à une mauvaise interprétation, voire à des soucis. Ainsi, `let` a été ajouté dans les versions plus récentes de Javascript, un nouveau mot-clé pour créer des variables, avec un fonctionnement différent de celui du `var`, réglant ainsi les difficultés évoquées ci-dessus.
+Les raisons sont d'ordre historique. A l'origine, quand Javascript fut créé, il n'y avait que `var`. Cela fonctionnait plutôt bien dans la plupart des cas, avec parfois quelques surprises -- l'implémentation étonnante du `var` peut amener à une mauvaise interprétation, voire à des soucis. Ainsi, `let` a été ajouté dans les versions plus récentes de Javascript, un nouveau mot-clé pour créer des variables, avec un fonctionnement différent de celui du `var`, réglant ainsi les difficultés évoquées ci-dessus.
 
 Nous évoquons ci-dessous quelques unes de ces différences, sans pouvoir faire ici le tour complet de la question. Vous comprendrez mieux la différence entre ces deux constructions au fur et à mesure de votre progression en JavaScript (si vous ne pouvez pas attendre, consultez la page de référence du `let`).
 
@@ -266,9 +266,9 @@ logName();
 var myName;
 ```
 
-> **Note :** l'exemple ci-dessus ne fonctionnera pas si on tape des lignes une à une dans la console, mais seulement quand on exécute un script JavaScript multi-lignes dans un document web.
+> **Note :** l'exemple ci-dessus ne fonctionnera pas si on tape des lignes une à une dans la console, mais seulement quand on exécute un script JavaScript multi-lignes dans un document web.
 
-Ce processus se nomme **«** **hoisting »** (en français, "hissage") — lisez [var hoisting](/fr/docs/Web/JavaScript/Reference/Statements/var#var_hoisting) pour plus de précisions sur ce sujet.
+Ce processus se nomme **«** **hoisting&nbsp;»** (en français, "hissage") — lisez [var hoisting](/fr/docs/Web/JavaScript/Reference/Statements/var#var_hoisting) pour plus de précisions sur ce sujet.
 
 Le hissage ne fonctionne plus avec `let`. Si on remplaçait var par let dans l'exemple ci-dessus, l'exécution du script planterait sur une erreur. C'est une bonne chose — déclarer une variable après l'avoir initialisé produit un code obscur, difficile à lire.
 
@@ -279,7 +279,7 @@ var myName = 'Chris';
 var myName = 'Bob';
 ```
 
-Celui là produit une erreur sur la seconde ligne :
+Celui là produit une erreur sur la seconde ligne&nbsp;:
 
 ```js
 let myName = 'Chris';
@@ -294,13 +294,13 @@ let myName = 'Chris' ;
 myName = 'Bob' ;
 ```
 
-Encore une fois, c'est une décision sensée des concepteurs du langage. Il n'y a aucune bonne raison de redéclarer une variable —  cela rend les choses obscures.
+Encore une fois, c'est une décision sensée des concepteurs du langage. Il n'y a aucune bonne raison de redéclarer une variable —  cela rend les choses obscures.
 
 Pour ces raisons, et d'autres, nous recommandons d'utiliser `let` plutôt que `var`. Il n'y a pas de bonne raison d'utiliser `var`, sauf à rechercher la compatibilité avec de vieilles versions d'Internet Explorer (pas de support du `let` avant la version 11 ; le support de `let` par le navigateur Edge ne pose pas de problème).
 
 ## Mise à jour d'une variable
 
-Une fois la variable initialisée avec une valeur, vous pouvez simplement modifier (ou mettre à jour) cette valeur en lui assignant une nouvelle valeur. Entrez ces deux lignes dans la console :
+Une fois la variable initialisée avec une valeur, vous pouvez simplement modifier (ou mettre à jour) cette valeur en lui assignant une nouvelle valeur. Entrez ces deux lignes dans la console&nbsp;:
 
 ```js
 myName = 'Bob';
@@ -309,19 +309,19 @@ myAge = 40;
 
 ### Aparté concernant les règles de nommage des variables
 
-Vous pouvez nommer une variable comme vous l'entendez, mais il y a des restrictions. Généralement, il convient de se limiter à l'emploi des caractères latins (0-9, a-z, A-Z)  et du underscore ( \_ ).
+Vous pouvez nommer une variable comme vous l'entendez, mais il y a des restrictions. Généralement, il convient de se limiter à l'emploi des caractères latins (0-9, a-z, A-Z)  et du underscore ( \_ ).
 
-- N'utilisez pas d'autres caractères ; ils pourraient entraîner des erreurs ou être difficiles à comprendre pour un auditoire international.
-- N'utilisez pas le underscore comme premier caractère d'un nom de variable — cette façon d'opérer est utilisée dans certaines constructions JavaScript pour signer certaines spécificités ; il pourrait y avoir confusion.
+- N'utilisez pas d'autres caractères&nbsp;; ils pourraient entraîner des erreurs ou être difficiles à comprendre pour un auditoire international.
+- N'utilisez pas le underscore comme premier caractère d'un nom de variable — cette façon d'opérer est utilisée dans certaines constructions JavaScript pour signer certaines spécificités&nbsp;; il pourrait y avoir confusion.
 - Ne mettez pas un chiffre en début de nom de variable. Ce n'est pas permis et provoque une erreur.
-- Une convention sûre, nommée ["lower camel case"](https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms) (dos de chameau), consiste à accoler plusieurs mots en mettant le premier en minuscules les suivants commençant par une majuscule. Dans cet article, nous avons adopté cette convention pour les noms de variables.
-- Prenez des noms de variable intuitifs, décrivant les données que la variable contient. Évitez les noms se limitant à un caractère ou à l'inverse des noms trop longs, trop verbeux.
-- Les variables sont sensibles à la casse — donc `myage` et `myAge` correspondent à deux variables différentes.
-- Enfin les _mots réservés_ du langage JavaScript ne peuvent pas être choisis comme nom pour une variable — les mots réservés sont les mots qui font effectivement partie de la syntaxe du JavaScript. Donc, vous ne pouvez pas utiliser des mots comme `var`, `function`, `let` ou `for` comme noms de variable. Les navigateurs les reconnaîtront en tant qu'éléments de code, et cela déclenchera des erreurs.
+- Une convention sûre, nommée ["lower camel case"](https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms) (dos de chameau), consiste à accoler plusieurs mots en mettant le premier en minuscules les suivants commençant par une majuscule. Dans cet article, nous avons adopté cette convention pour les noms de variables.
+- Prenez des noms de variable intuitifs, décrivant les données que la variable contient. Évitez les noms se limitant à un caractère ou à l'inverse des noms trop longs, trop verbeux.
+- Les variables sont sensibles à la casse — donc `myage` et `myAge` correspondent à deux variables différentes.
+- Enfin les _mots réservés_ du langage JavaScript ne peuvent pas être choisis comme nom pour une variable — les mots réservés sont les mots qui font effectivement partie de la syntaxe du JavaScript. Donc, vous ne pouvez pas utiliser des mots comme `var`, `function`, `let` ou `for` comme noms de variable. Les navigateurs les reconnaîtront en tant qu'éléments de code, et cela déclenchera des erreurs.
 
-> **Note :** Une liste exhaustive des mots réservés est proposée dans la page [Lexical grammar — keywords](/fr/docs/Web/JavaScript/Reference/Lexical_grammar#keywords).
+> **Note :** Une liste exhaustive des mots réservés est proposée dans la page [Lexical grammar — keywords](/fr/docs/Web/JavaScript/Reference/Lexical_grammar#keywords).
 
-Exemples de noms corrects :
+Exemples de noms corrects&nbsp;:
 
 ```plain example-good
 age
@@ -333,7 +333,7 @@ audio1
 audio2
 ```
 
-Exemples de noms incorrects (soit illégal, soit non conforme aux recommandations) :
+Exemples de noms incorrects (soit illégal, soit non conforme aux recommandations) :
 
 ```plain example-bad
 1
@@ -347,7 +347,7 @@ skjfndskjfnbdskjfb
 thisisareallylongstupidvariablenameman
 ```
 
-Parmi ces noms, les suivants déclenchent une `SyntaxError`  :
+Parmi ces noms, les suivants déclenchent une `SyntaxError` &nbsp;:
 
 ```js example-bad
 1 //la variable commence par un chiffre
@@ -381,37 +381,37 @@ var dolphinGoodbye = 'So long and thanks for all the fish';
 
 ### Booléens
 
-Les booléens sont des valeurs true/false (vrai/faux) — elles ne peuvent prendre que deux valeurs: `true` ou `false`. Elles sont généralement utilisées pour tester une condition, à la suite de laquelle le code est exécuté de manière appropriée. Ainsi, par exemple, un cas simple pourrait être :
+Les booléens sont des valeurs true/false (vrai/faux) — elles ne peuvent prendre que deux valeurs: `true` ou `false`. Elles sont généralement utilisées pour tester une condition, à la suite de laquelle le code est exécuté de manière appropriée. Ainsi, par exemple, un cas simple pourrait être&nbsp;:
 
 ```js
 var iAmAlive = true;
 ```
 
-Toutefois, en réalité, un booléen sera plutôt utilisé ainsi :
+Toutefois, en réalité, un booléen sera plutôt utilisé ainsi&nbsp;:
 
 ```js
 var test = 6 < 3;
 ```
 
-Cette expression utilise l'opérateur  « inférieur à » (`<`) pour tester si 6 est plus petit que 3. Comme vous pouvez vous y attendre, cette expression renverra `false`, car 6 n'est pas plus petit que 3 ! Vous en apprendrez bien plus à propos de ces opérateurs plus loin dans ce cours.
+Cette expression utilise l'opérateur  «&nbsp;inférieur à&nbsp;» (`<`) pour tester si 6 est plus petit que 3. Comme vous pouvez vous y attendre, cette expression renverra `false`, car 6 n'est pas plus petit que 3&nbsp;! Vous en apprendrez bien plus à propos de ces opérateurs plus loin dans ce cours.
 
 ### Tableaux
 
-Une tableau est un objet unique contenant plusieurs valeurs entre crochets séparées par des virgules. Saisissez les lignes suivantes dans la console :
+Une tableau est un objet unique contenant plusieurs valeurs entre crochets séparées par des virgules. Saisissez les lignes suivantes dans la console&nbsp;:
 
 ```js
 var myNameArray = ['Chris', 'Bob', 'Jim'];
 var myNumberArray = [10,15,40];
 ```
 
-Un fois ces tableaux définis, vous pouvez avoir accès à chaque valeur en fonction de leur emplacement dans le tableau. Voyez ces lignes :
+Un fois ces tableaux définis, vous pouvez avoir accès à chaque valeur en fonction de leur emplacement dans le tableau. Voyez ces lignes&nbsp;:
 
 ```js
 myNameArray[0]; // renverra 'Chris'
 myNumberArray[2]; // renverra 40
 ```
 
-La valeur entre crochets précise l'index correspondant à la position de la valeur que vous souhaitez voir renvoyée. Vous remarquerez que les tableaux en JavaScript sont indexés à partir de zéro : le premier élément a l'index 0.
+La valeur entre crochets précise l'index correspondant à la position de la valeur que vous souhaitez voir renvoyée. Vous remarquerez que les tableaux en JavaScript sont indexés à partir de zéro&nbsp;: le premier élément a l'index 0.
 
 Vous en apprendrez beaucoup plus au sujet des tableaux dans un article suivant.
 
@@ -419,13 +419,13 @@ Vous en apprendrez beaucoup plus au sujet des tableaux dans un article suivant.
 
 En programmation, un objet est une structure de code qui modélise un objet du réel. Vous pouvez avoir un objet simple représentant une place de parking avec sa largeur et sa profondeur ou bien un objet représentant une personne avec comme données son nom, sa taille, son poids, son vernaculaire, comment le contacter, et plus encore.
 
-Entrez la ligne suivant dans la console de votre explorateur :
+Entrez la ligne suivant dans la console de votre explorateur&nbsp;:
 
 ```js
 var dog = { name : 'Spot', breed : 'Dalmatian' };
 ```
 
-Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante :
+Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante&nbsp;:
 
 ```js
 dog.name
@@ -435,15 +435,15 @@ Nous en resterons là avec les objets pour le moment — vous en saurez plus à
 
 ## Typage faible
 
-JavaScript est un « langage faiblement typé », ce qui veut dire que, contrairement à d'autres langages, vous n'êtes pas obligé de préciser quel est le type de donnée que doit contenir une variable (par ex. nombres, chaînes, tableaux, etc).
+JavaScript est un «&nbsp;langage faiblement typé&nbsp;», ce qui veut dire que, contrairement à d'autres langages, vous n'êtes pas obligé de préciser quel est le type de donnée que doit contenir une variable (par ex. nombres, chaînes, tableaux, etc).
 
-Par exemple, si vous déclarez une variable et si vous y placez une valeur entre guillemets, le navigateur la traitera comme étant une chaîne :
+Par exemple, si vous déclarez une variable et si vous y placez une valeur entre guillemets, le navigateur la traitera comme étant une chaîne&nbsp;:
 
 ```js
 var myString = 'Hello';
 ```
 
-Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents :
+Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents&nbsp;:
 
 ```js
 var myNumber = '500'; // oops, c'est toujours une chaîne
diff --git a/files/fr/learn/javascript/first_steps/what_is_javascript/index.md b/files/fr/learn/javascript/first_steps/what_is_javascript/index.md
index a57bb397aa..c19f2ce355 100644
--- a/files/fr/learn/javascript/first_steps/what_is_javascript/index.md
+++ b/files/fr/learn/javascript/first_steps/what_is_javascript/index.md
@@ -5,12 +5,12 @@ translation_of: Learn/JavaScript/First_steps/What_is_JavaScript
 ---
 {{LearnSidebar}}{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
 
-Bienvenue dans le cours JavaScript pour débutants sur le MDN. Dans ce premier article nous donnons une description générale de JavaScript en présentant le « pourquoi » et le « comment » du JavaScript. L'objectif est que vous compreniez bien son but.
+Bienvenue dans le cours JavaScript pour débutants sur le MDN. Dans ce premier article nous donnons une description générale de JavaScript en présentant le «&nbsp;pourquoi&nbsp;» et le «&nbsp;comment&nbsp;» du JavaScript. L'objectif est que vous compreniez bien son but.
 
 <table>
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         <p>
           Une culture informatique basique et une compréhension élémentaire de
@@ -19,7 +19,7 @@ Bienvenue dans le cours JavaScript pour débutants sur le MDN. Dans ce premier a
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Se familiariser avec JavaScript, ce qu'il peut faire et comment il
         s'intègre dans un site web.
@@ -38,7 +38,7 @@ JavaScript est un langage de programmation qui permet d'implémenter des mécani
 - {{glossary("CSS")}} est un langage de règles de style utilisé pour mettre en forme le contenu HTML. Par exemple : en modifiant la couleur d'arrière-plan ou les polices, ou en disposant le contenu en plusieurs colonnes.
 - {{glossary("JavaScript")}} est un langage de programmation qui permet de créer du contenu mis à jour de façon dynamique, de contrôler le contenu multimédia, d'animer des images, et tout ce à quoi on peut penser. Bon, peut-être pas tout, mais vous pouvez faire bien des choses avec quelques lignes de JavaScript.
 
-Les trois couches se superposent naturellement. Prenons pour exemple une simple étiquette texte. Les balises HTML lui donnent une structure et un but :
+Les trois couches se superposent naturellement. Prenons pour exemple une simple étiquette texte. Les balises HTML lui donnent une structure et un but&nbsp;:
 
 ```html
 <p>Player 1: Chris</p>
@@ -46,7 +46,7 @@ Les trois couches se superposent naturellement. Prenons pour exemple une simple
 
 ![](just-html.png)
 
-Nous pouvons ensuite ajouter du CSS pour rendre cela plus joli :
+Nous pouvons ensuite ajouter du CSS pour rendre cela plus joli&nbsp;:
 
 ```css
 p {
@@ -67,7 +67,7 @@ p {
 
 ![](html-and-css.png)
 
-Et enfin utiliser JavaScript pour ajouter un comportement dynamique :
+Et enfin utiliser JavaScript pour ajouter un comportement dynamique&nbsp;:
 
 ```js
 let para = document.querySelector('p');
@@ -86,42 +86,42 @@ Essayez de cliquer sur l'étiquette texte pour voir ce qui se passe. Notez que v
 
 JavaScript peut faire bien plus. Voyons cela plus en détail.
 
-## Que peut-il _vraiment_ faire ?
+## Que peut-il _vraiment_ faire&nbsp;?
 
-Le cœur de JavaScript est constitué de fonctionnalités communes de programmation permettant de :
+Le cœur de JavaScript est constitué de fonctionnalités communes de programmation permettant de&nbsp;:
 
 - stocker des valeurs utiles dans des variables. Dans l'exemple plus haut, nous demandons un nouveau nom à l'utilisateur puis le stockons dans une variable appelée `name`.
-- faire des opérations sur des morceaux de texte (appelés en programmation « chaînes de caractères » ou « strings » en anglais). Dans l'exemple plus haut, nous prenons la chaîne de caractères "Player 1: " et lui adjoignons la variable `name` pour créer l'étiquette ''Player 1: Chris".
-- exécuter du code en réponse à certains événements se produisant sur une page web. Dans l'exemple, nous avons utilisé un événement (« event ») {{Event("click")}} pour détecter quand l'utilisateur clique sur le bouton ; on exécute alors le code qui met à jour l'étiquette.
-- Et bien plus encore !
+- faire des opérations sur des morceaux de texte (appelés en programmation «&nbsp;chaînes de caractères&nbsp;» ou «&nbsp;strings&nbsp;» en anglais). Dans l'exemple plus haut, nous prenons la chaîne de caractères "Player 1: " et lui adjoignons la variable `name` pour créer l'étiquette ''Player 1: Chris".
+- exécuter du code en réponse à certains événements se produisant sur une page web. Dans l'exemple, nous avons utilisé un événement («&nbsp;event&nbsp;») {{Event("click")}} pour détecter quand l'utilisateur clique sur le bouton ; on exécute alors le code qui met à jour l'étiquette.
+- Et bien plus encore&nbsp;!
 
-Là où ça devient excitant, c'est que de nombreuses fonctionnalités sont basées sur ce cœur de JavaScript. Les « interfaces de programmation applicatives » (API pour « Application Programming Interfaces ») donnent accès à des fonctionnalités presqu'illimitées dans votre code JavaScript.
+Là où ça devient excitant, c'est que de nombreuses fonctionnalités sont basées sur ce cœur de JavaScript. Les «&nbsp;interfaces de programmation applicatives&nbsp;» (API pour «&nbsp;Application Programming Interfaces&nbsp;») donnent accès à des fonctionnalités presqu'illimitées dans votre code JavaScript.
 
 Les API sont des blocs de code déjà prêts qui permettent à un développeur d'implémenter des programmes qui seraient difficiles voire impossibles à implémenter sans elles. C'est comme du code "en kit" pour la programmation, très pratiques à assembler et à combiner. Les API sont au code ce que les meubles en kits sont aux fournitures de maison — il est beaucoup plus facile de prendre des panneaux prêts à l'emploi et de les visser ensemble pour faire une étagère que de travailler vous-même sur le design, d'aller chercher le bon bois, de couper tous les panneaux à la bonne taille et la bonne forme, de trouver les vis de la bonne taille, puis les assembler pour faire une étagère.
 
-Elles se divisent généralement en deux catégories :
+Elles se divisent généralement en deux catégories&nbsp;:
 
 ![](browser.png)
 
-**Les API de navigateur** font partie intégrante de votre navigateur web, et peuvent accéder à des données de l'environnement informatique (l'ordinateur), ou faire d'autres choses complexes. Par exemple :
+**Les API de navigateur** font partie intégrante de votre navigateur web, et peuvent accéder à des données de l'environnement informatique (l'ordinateur), ou faire d'autres choses complexes. Par exemple&nbsp;:
 
-- l'[API DOM (Document Object Model)](/fr/docs/Web/API/Document_Object_Model) permet de manipuler du HTML et du CSS (créer, supprimer et modifier du HTML, appliquer de nouveaux styles à la page de façon dynamique, etc.). Chaque fois que vous voyez une fenêtre popup sur une page ou du nouveau contenu apparaître (comme dans notre démonstration plus haut), il s'agit d'une action du DOM.
+- l'[API DOM (Document Object Model)](/fr/docs/Web/API/Document_Object_Model) permet de manipuler du HTML et du CSS (créer, supprimer et modifier du HTML, appliquer de nouveaux styles à la page de façon dynamique, etc.). Chaque fois que vous voyez une fenêtre popup sur une page ou du nouveau contenu apparaître (comme dans notre démonstration plus haut), il s'agit d'une action du DOM.
 - l'[API de géolocalisation](/fr/docs/Web/API/Geolocation) récupère des informations géographiques. C'est ainsi que [Google Maps](https://www.google.com/maps) peut trouver votre position et la situer sur une carte.
 - les API [Canvas](/fr/docs/Web/API/Canvas_API) et [WebGL](/fr/docs/Web/API/WebGL_API) permettent de créer des animations 2D et 3D. On fait des choses incroyables avec ces technologies, voyez [Chrome Experiments](https://www.chromeexperiments.com/webgl) et [webglsamples](https://webglsamples.org/).
 - [les API Audio et Video](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery), comme {{domxref("HTMLMediaElement")}} et [WebRTC](/fr/docs/Web/API/WebRTC_API) permettent des actions intéressantes sur le multimédia, telles que jouer de l'audio ou de la vidéo directement dans une page web, ou récupérer le flux vidéo de votre webcam et l'afficher sur l'ordinateur de quelqu'un d'autre (essayez la [Snapshot demo](http://chrisdavidmills.github.io/snapshot/) pour vous faire une idée).
 
 > **Note :** Beaucoup des exemples ci-dessus ne fonctionneront pas dans un ancien navigateur. Il vaut mieux utiliser un navigateur moderne comme Firefox, Chrome, Edge ou Opera pour exécuter votre code et faire vos tests. Si vous êtes amené à écrire du code de production (c'est-à-dire destiné à de véritables utilisateurs), il vous faudra prendre en compte la compatibilité pour différents navigateurs.
 
-Les **APIs tierces** ne font par défaut pas partie de votre navigateur, et vous devrez en général récupérer le code et les informations les concernant quelque part sur le web. Par exemple :
+Les **APIs tierces** ne font par défaut pas partie de votre navigateur, et vous devrez en général récupérer le code et les informations les concernant quelque part sur le web. Par exemple&nbsp;:
 
 - l'[API Twitter](https://dev.twitter.com/overview/documentation) vous permet par exemple d'afficher vos derniers tweets sur votre site.
 - l'[API Google Maps](https://developers.google.com/maps/) permet d'intégrer à votre site des cartes personnalisées et d'autres fonctionnalités de ce type.
 
 > **Note :** ces APIs sont d'un niveau avancé et nous ne couvrirons aucune d'entre elles dans ce cours, mais les liens ci-dessus fournissent une large documentation si vous voulez en savoir davantage.
 
-Et il y a bien plus encore ! Pas de précipitation cependant. Vous ne serez pas en mesure de créer le nouveau Facebook, Google Maps ou Instagram après une journée de travail sur JavaScript, il y a d'abord beaucoup de bases à assimiler. Et c'est pourquoi vous êtes ici. Allons-y !
+Et il y a bien plus encore&nbsp;! Pas de précipitation cependant. Vous ne serez pas en mesure de créer le nouveau Facebook, Google Maps ou Instagram après une journée de travail sur JavaScript, il y a d'abord beaucoup de bases à assimiler. Et c'est pourquoi vous êtes ici. Allons-y&nbsp;!
 
-## Que fait JavaScript sur votre page ?
+## Que fait JavaScript sur votre page&nbsp;?
 
 Ici nous allons commencer à réellement nous intéresser au code, et, ce faisant, à explorer ce qui se passe quand vous exécutez du JavaScript dans votre page.
 
@@ -135,13 +135,13 @@ C'est une bonne chose, étant donné qu'un usage fréquent de JavaScript est de
 
 ### Sécurité du navigateur
 
-Chaque onglet du navigateur constitue un périmètre séparé dans lequel s'exécute le code (en termes techniques ces périmètres sont des « environnements d'exécution ») ce qui signifie que, dans la plupart des cas, le code de chaque onglet est exécuté complètement séparément, et le code d'un onglet ne peut affecter directement le code d'un autre onglet ou d'un autre site. C'est une bonne mesure de sécurité. Si ce n'était pas le cas, des pirates pourraient par exemple écrire du code pour voler des informations sur d'autres sites web.
+Chaque onglet du navigateur constitue un périmètre séparé dans lequel s'exécute le code (en termes techniques ces périmètres sont des «&nbsp;environnements d'exécution&nbsp;») ce qui signifie que, dans la plupart des cas, le code de chaque onglet est exécuté complètement séparément, et le code d'un onglet ne peut affecter directement le code d'un autre onglet ou d'un autre site. C'est une bonne mesure de sécurité. Si ce n'était pas le cas, des pirates pourraient par exemple écrire du code pour voler des informations sur d'autres sites web.
 
 > **Note :** il existe des moyens d'envoyer du code et des données entre différents sites/onglets de façon sécurisée, mais ce sont des techniques avancées que ne nous couvrirons pas dans ce cours.
 
 ### Ordre d'exécution du JavaScript
 
-Quand le navigateur rencontre un bloc de JavaScript, il l'exécute généralement dans l'ordre, de haut en bas. Vous devrez donc faire attention à l'ordre dans lequel vous écrivez les choses. Reprenons le bloc de JavaScript vu dans notre premier exemple :
+Quand le navigateur rencontre un bloc de JavaScript, il l'exécute généralement dans l'ordre, de haut en bas. Vous devrez donc faire attention à l'ordre dans lequel vous écrivez les choses. Reprenons le bloc de JavaScript vu dans notre premier exemple&nbsp;:
 
 ```js
 let para = document.querySelector('p');
@@ -154,9 +154,9 @@ function updateName() {
 }
 ```
 
-Nous sélectionnons ici un paragraphe de texte (ligne 1), puis lui attachons un « gestionnaire d'évènement »  (<i lang="en">event listener</i>)  ligne 3, pour qu'ensuite, lors d'un clic sur le paragraphe, le bloc de code `updateName()` (lignes 5-8) s'exécute. Le bloc de code `updateName()` (ces blocs de code réutilisables sont appelés « fonctions ») demande à l'utilisateur un nouveau nom, et l'insère dans le paragraphe pour mettre à jour l'affichage.
+Nous sélectionnons ici un paragraphe de texte (ligne 1), puis lui attachons un «&nbsp;gestionnaire d'évènement&nbsp;»  (<i lang="en">event listener</i>)  ligne 3, pour qu'ensuite, lors d'un clic sur le paragraphe, le bloc de code `updateName()` (lignes 5-8) s'exécute. Le bloc de code `updateName()` (ces blocs de code réutilisables sont appelés «&nbsp;fonctions&nbsp;») demande à l'utilisateur un nouveau nom, et l'insère dans le paragraphe pour mettre à jour l'affichage.
 
-Si vous échangiez les deux premières lignes de code, rien ne fonctionnerait plus, vous obtiendriez une erreur dans la console développeur du navigateur : `TypeError: para is undefined`. Cela signifie que l'objet `para` n'existe pas encore, donc nous ne pouvons pas y ajouter de gestionnaire d'évènement.
+Si vous échangiez les deux premières lignes de code, rien ne fonctionnerait plus, vous obtiendriez une erreur dans la console développeur du navigateur&nbsp;: `TypeError: para is undefined`. Cela signifie que l'objet `para` n'existe pas encore, donc nous ne pouvons pas y ajouter de gestionnaire d'évènement.
 
 > **Note :** c'est une erreur très fréquente. Il faut veiller à ce que les objets référencés dans votre code existent avant d'essayer de les utiliser.
 
@@ -172,7 +172,7 @@ Chaque approche a ses avantages, ce que nous ne développerons pas pour l'instan
 
 Vous pouvez aussi rencontrer les termes de code **côté serveur** et **côté client**, notamment dans le contexte du développement web. Le code **côté client** est du code exécuté sur l'ordinateur de l'utilisateur : quand une page web est vue, le code côté client de la page est téléchargé, puis exécuté et affiché par le navigateur. Dans ce module JavaScript, nous parlons explicitement de **JavaScript côté client**.
 
-Le code **côté serveur** quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript ! JavaScript peut aussi s'utiliser comme un langage **côté serveur**, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article [Programmation de Sites Web côté serveur](/fr/docs/Learn/Server-side).
+Le code **côté serveur** quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript&nbsp;! JavaScript peut aussi s'utiliser comme un langage **côté serveur**, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article [Programmation de Sites Web côté serveur](/fr/docs/Learn/Server-side).
 
 ### Code dynamique contre code statique
 
@@ -180,15 +180,15 @@ Le mot **dynamique** est utilisé tant pour qualifier le JavaScript côté clien
 
 Une page web sans contenu mis à jour dynamiquement est appelé **statique** : elle montre simplement toujours le même contenu.
 
-## Comment ajouter du JavaScript à votre page ?
+## Comment ajouter du JavaScript à votre page&nbsp;?
 
-Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Les éléments {{htmlelement("link")}} permettent d'appliquer des feuilles de style externes au HTML alors que les feuilles de style internes utilisent les éléments {{htmlelement("style")}}. Pour ajouter du JavaScript à un document HTML, il n'y a qu'une seule façon : avec l'élément {{htmlelement("script")}}. Voyons cela sur un exemple.
+Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Les éléments {{htmlelement("link")}} permettent d'appliquer des feuilles de style externes au HTML alors que les feuilles de style internes utilisent les éléments {{htmlelement("style")}}. Pour ajouter du JavaScript à un document HTML, il n'y a qu'une seule façon&nbsp;: avec l'élément {{htmlelement("script")}}. Voyons cela sur un exemple.
 
 ### JavaScript interne
 
 1.  Faites d'abord une copie locale de notre fichier d'exemple [apply-javascript.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html). Enregistrez-le dans un répertoire approprié.
 2.  Ouvrez le fichier dans votre navigateur web et dans un éditeur de texte. Vous verrez que le HTML crée une page web simple contenant un bouton cliquable.
-3.  Ensuite, allez dans votre éditeur de texte et ajoutez ce qui suit juste avant la balise fermante `</head>` :
+3.  Ensuite, allez dans votre éditeur de texte et ajoutez ce qui suit juste avant la balise fermante `</head>`&nbsp;:
 
     ```html
     <script>
@@ -198,7 +198,7 @@ Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Les élémen
     </script>
     ```
 
-4.  Ajoutons maintenant du JavaScript dans notre élément {{htmlelement("script")}} pour rendre la page plus dynamique. Ajoutez le code suivant juste en dessous de la ligne "// JavaScript goes here" :
+4.  Ajoutons maintenant du JavaScript dans notre élément {{htmlelement("script")}} pour rendre la page plus dynamique. Ajoutez le code suivant juste en dessous de la ligne "// JavaScript goes here"&nbsp;:
 
     ```js
       document.addEventListener("DOMContentLoaded", function() {
@@ -218,17 +218,17 @@ Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Les élémen
 
 5.  Enregistrez le fichier et actualisez le navigateur. Vous pouvez maintenant voir que, lorsque vous cliquez sur le bouton, un nouveau paragraphe est généré et placé en dessous.
 
-> **Note :** si l'exemple ne semble pas marcher, reprenez pas à pas chaque étape. Avez-vous bien enregistré le code de départ comme un fichier `.html` ? Avez-vous bien ajouté l'élément {{htmlelement("script")}} juste après la balise `</head>` ? Avez-vous collé le bon code JavaScript au bon endroit ? **JavaScript est sensible à la casse, et assez tatillon, il faut donc respecter scrupuleusement la syntaxe indiquée, sans quoi il peut ne pas fonctionner.**
+> **Note :** si l'exemple ne semble pas marcher, reprenez pas à pas chaque étape. Avez-vous bien enregistré le code de départ comme un fichier `.html`&nbsp;? Avez-vous bien ajouté l'élément {{htmlelement("script")}} juste après la balise `</head>`&nbsp;? Avez-vous collé le bon code JavaScript au bon endroit&nbsp;? **JavaScript est sensible à la casse, et assez tatillon, il faut donc respecter scrupuleusement la syntaxe indiquée, sans quoi il peut ne pas fonctionner.**
 
 > **Note :** vous pouvez voir cette version sur GitHub avec [apply-javascript-internal.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html) ([et aussi en live](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html)).
 
 ### JavaScript externe
 
-Ça marche très bien, mais si nous voulons mettre notre JavaScript dans un fichier externe ? Voyons cela.
+Ça marche très bien, mais si nous voulons mettre notre JavaScript dans un fichier externe&nbsp;? Voyons cela.
 
 1.  Créez d'abord un nouveau fichier dans le même répertoire que votre fichier HTML. Nommez-le `script.js` (vérifiez qu'il a bien l'extension de fichier .js, c'est ainsi qu'il est identifié comme fichier JavaScript).
 2.  Ensuite, copiez-collez tout le script contenu dans l'élément {{htmlelement("script")}} vers le fichier .js, et enregistrez le fichier.
-3.  À présent remplacez l'élément {{htmlelement("script")}} par :
+3.  À présent remplacez l'élément {{htmlelement("script")}} par&nbsp;:
 
     ```html
     <script src="script.js" defer></script>
@@ -240,7 +240,7 @@ Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Les élémen
 
 ### Handlers JavaScript en ligne
 
-Notez que parfois vous tomberez sur des morceaux de JavaScript directement dans le HTML. Ce qui peut ressembler à ça :
+Notez que parfois vous tomberez sur des morceaux de JavaScript directement dans le HTML. Ce qui peut ressembler à ça&nbsp;:
 
 ```js example-bad
 function createParagraph() {
@@ -264,7 +264,7 @@ Cet exemple a exactement le même comportement que ceux des deux sections préc�
 
 ### En JavaScript pur
 
-Une construction en JavaScript pur permet de sélectionner tous les boutons avec une instruction. Dans l'exemple précédent c'est cette partie qui s'en charge :
+Une construction en JavaScript pur permet de sélectionner tous les boutons avec une instruction. Dans l'exemple précédent c'est cette partie qui s'en charge&nbsp;:
 
 ```js
 let buttons = document.querySelectorAll('button');
@@ -276,7 +276,7 @@ for(let i = 0; i < buttons.length ; i++) {
 
 Cela peut sembler un peu plus long que l'attribut `onclick`, mais cela fonctionnera pour tous les boutons peu importe leur nombre sur la page, et peu importe si des boutons sont ajoutés ou retirés, le code JavaScript n'aura pas besoin d'être modifié.
 
-> **Note :** essayez de modifier votre version de `apply-javascript.html` et d'y ajouter quelques boutons dans le fichier. En actualisant la page, tous les boutons devraient créer un paragraphe quand ils sont cliqués. Pas mal, non ?
+> **Note :** essayez de modifier votre version de `apply-javascript.html` et d'y ajouter quelques boutons dans le fichier. En actualisant la page, tous les boutons devraient créer un paragraphe quand ils sont cliqués. Pas mal, non&nbsp;?
 
 ### Stratégies de chargement de script
 
@@ -347,15 +347,15 @@ Pour résumer :
 
 ## Commentaires
 
-Comme pour le HTML et le CSS, il est possible d'écrire des commentaires dans le code JavaScript qui seront ignorés par le navigateur. Ils ne sont là que pour apporter des précisions aux autres développeurs sur le fonctionnement du code (et vous-même, si vous reprenez votre code après six mois sans pouvoir vous rappeler ce que vous avez fait). Les commentaires sont très utiles, et vous devriez les utiliser fréquemment, surtout pour des applications de grande taille. Il y en a deux types :
+Comme pour le HTML et le CSS, il est possible d'écrire des commentaires dans le code JavaScript qui seront ignorés par le navigateur. Ils ne sont là que pour apporter des précisions aux autres développeurs sur le fonctionnement du code (et vous-même, si vous reprenez votre code après six mois sans pouvoir vous rappeler ce que vous avez fait). Les commentaires sont très utiles, et vous devriez les utiliser fréquemment, surtout pour des applications de grande taille. Il y en a deux types&nbsp;:
 
-- Un commentaire sur une ligne s'écrit après un double slash, par exemple :
+- Un commentaire sur une ligne s'écrit après un double slash, par exemple&nbsp;:
 
   ```js
   // Ceci est un commentaire
   ```
 
-- Un commentaire sur plusieurs lignes s'écrit entre deux balises /\* et \*/, par exemple :
+- Un commentaire sur plusieurs lignes s'écrit entre deux balises /\* et \*/, par exemple&nbsp;:
 
   ```js
   /*
@@ -364,7 +364,7 @@ Comme pour le HTML et le CSS, il est possible d'écrire des commentaires dans le
   */
   ```
 
-Ainsi, vous pourriez par exemple annoter notre dernière démonstration de JavaScript de cette manière :
+Ainsi, vous pourriez par exemple annoter notre dernière démonstration de JavaScript de cette manière&nbsp;:
 
 ```js
 // Fonction: créer un nouveau paragraphe et l'ajouter en bas du HTML
@@ -399,15 +399,15 @@ Le JavaScript peut sembler un peu impressionnant pour l'instant, mais pas d'inqu
 
 ## Dans ce module
 
-- [Qu'est-ce que JavaScript ?](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript)
+- [Qu'est-ce que JavaScript&nbsp;?](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript)
 - [Un premier code JavaScript](/fr/docs/Learn/JavaScript/First_steps/A_first_splash)
-- [Quel est le souci ? Analyser un problème avec JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong)
-- [Stocker les informations nécessaires : les variables](/fr/docs/Learn/JavaScript/First_steps/Variables)
-- [Opérations mathématiques de base en JavaScript : les nombres et les opérateurs](/fr/docs/Learn/JavaScript/First_steps/Math)
-- [Gérer le texte : les chaînes de caractères en JavaScript](/fr/docs/Learn/JavaScript/First_steps/Strings)
+- [Quel est le souci&nbsp;? Analyser un problème avec JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong)
+- [Stocker les informations nécessaires&nbsp;: les variables](/fr/docs/Learn/JavaScript/First_steps/Variables)
+- [Opérations mathématiques de base en JavaScript&nbsp;: les nombres et les opérateurs](/fr/docs/Learn/JavaScript/First_steps/Math)
+- [Gérer le texte&nbsp;: les chaînes de caractères en JavaScript](/fr/docs/Learn/JavaScript/First_steps/Strings)
 - [Les méthodes utiles pour les chaînes de caractères](/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods)
 - [Les tableaux <i lang="en">(arrays)</i>](/fr/docs/Learn/JavaScript/First_steps/Arrays)
 
   <i lang="en">(arrays)</i>
 
-- [Évaluation : Générateur d'histoires aléatoires](/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator)
+- [Évaluation&nbsp;: Générateur d'histoires aléatoires](/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator)
diff --git a/files/fr/learn/javascript/first_steps/what_went_wrong/index.md b/files/fr/learn/javascript/first_steps/what_went_wrong/index.md
index ead4a81f29..c19587bda7 100644
--- a/files/fr/learn/javascript/first_steps/what_went_wrong/index.md
+++ b/files/fr/learn/javascript/first_steps/what_went_wrong/index.md
@@ -1,5 +1,5 @@
 ---
-title: Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript
+title: Qu'est-ce qui n'a pas fonctionné&nbsp;? Déboguer du code JavaScript
 slug: Learn/JavaScript/First_steps/What_went_wrong
 tags:
   - Apprentissage
@@ -21,7 +21,7 @@ Après avoir créé le jeu "Devinez le nombre" de l'article précédent, vous av
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         <p>
           Vocabulaire courant de l'informatique, bases de HTML et CSS,
@@ -30,7 +30,7 @@ Après avoir créé le jeu "Devinez le nombre" de l'article précédent, vous av
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Acquérir la capacité et la confiance pour commencer à résoudre des
         problèmes simples dans votre propre code.
@@ -41,37 +41,37 @@ Après avoir créé le jeu "Devinez le nombre" de l'article précédent, vous av
 
 ## Types d' erreurs
 
-En règle générale, les erreurs dans un code sont à ranger dans deux catégories :
+En règle générale, les erreurs dans un code sont à ranger dans deux catégories&nbsp;:
 
-- **Erreurs de syntaxe :** Ce sont les fautes d'orthographe. Elles empêchent réellement le programme de fonctionner ou l'arrêtent en cours de chemin — elles sont accompagnées de messages d'erreur. Ces erreurs sont généralement simple à corriger, pour autant que vous connaissiez les bons outils et sachiez ce que signifient les messages !
-- **Erreurs logiques :** La syntaxe est correcte, mais le code n'est pas ce que vous attendiez : le programme tourne sans planter mais donne des résultats inattendus. Ces erreurs sont souvent plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas, en général, de message d'erreur pour vous diriger vers la source de l'erreur.
+- **Erreurs de syntaxe&nbsp;:** Ce sont les fautes d'orthographe. Elles empêchent réellement le programme de fonctionner ou l'arrêtent en cours de chemin — elles sont accompagnées de messages d'erreur. Ces erreurs sont généralement simple à corriger, pour autant que vous connaissiez les bons outils et sachiez ce que signifient les messages&nbsp;!
+- **Erreurs logiques&nbsp;:** La syntaxe est correcte, mais le code n'est pas ce que vous attendiez&nbsp;: le programme tourne sans planter mais donne des résultats inattendus. Ces erreurs sont souvent plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas, en général, de message d'erreur pour vous diriger vers la source de l'erreur.
 
-Bon, mais ce n'est pas si simple que cela — il y a d'autres facteurs de différenciation lorsque vous approfondissez. Mais la classification ci-dessus suffiira pour commencer. Nous examinerons ces deux catégories d'erreur un peu plus loin.
+Bon, mais ce n'est pas si simple que cela — il y a d'autres facteurs de différenciation lorsque vous approfondissez. Mais la classification ci-dessus suffiira pour commencer. Nous examinerons ces deux catégories d'erreur un peu plus loin.
 
 ## Un exemple erroné
 
 Pour commencer, revenons à notre jeu de devinettes numériques — sauf que cette fois-ci, nous explorerons une version qui comporte des erreurs délibérées. Allez sur Github et fabriquez vous-même une copie locale de [number-game-errors.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html) ([voyez-la ici](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html) en direct).
 
 1.  Pour commencer, ouvrez la copie locale avec votre éditeur de texte favoris.
-2.  Essayez de lancer le jeu — vous remarquerez que quand vous pressez le bouton
+2.  Essayez de lancer le jeu — vous remarquerez que quand vous pressez le bouton
 
     <kbd>Submit guess</kbd>
 
     , cela ne fonctionne pas!
 
-> **Note :** Votre propre version de l'exemple de jeu ne fonctionne pas, vous pourriez vouloir la corriger ! Il nous semble plus efficace que vous travailliez sur notre version boguée, afin que vous puissiez apprendre les techniques que nous enseignons ici. Ensuite, vous pouvez revenir en arrière et essayer de réparer votre exemple.
+> **Note :** Votre propre version de l'exemple de jeu ne fonctionne pas, vous pourriez vouloir la corriger ! Il nous semble plus efficace que vous travailliez sur notre version boguée, afin que vous puissiez apprendre les techniques que nous enseignons ici. Ensuite, vous pouvez revenir en arrière et essayer de réparer votre exemple.
 
 À ce stade, consultons la [console du développeur](/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs) pour voir si nous pouvons voir des erreurs de syntaxe, puis essayez de les corriger. Vous apprendrez comment ci-dessous.
 
 ## Réparer les erreurs de syntaxe
 
-Antérieurement dans le cours, nous vous avons demandé de taper quelques commandes JavaScript simples dans la [console JavaScript](/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs) [des outils de développement](/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs) (si vous ne pouvez pas vous rappeler comment l'ouvrir dans votre navigateur, suivez le lien précédent pour savoir comment). Ce qui est encore plus utile, c'est que la console vous donne des messages d'erreur chaque fois qu'une erreur de syntaxe existe dans le JavaScript qui est introduit dans le moteur JavaScript du navigateur. Maintenant partons en chasse !
+Antérieurement dans le cours, nous vous avons demandé de taper quelques commandes JavaScript simples dans la [console JavaScript](/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs) [des outils de développement](/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs) (si vous ne pouvez pas vous rappeler comment l'ouvrir dans votre navigateur, suivez le lien précédent pour savoir comment). Ce qui est encore plus utile, c'est que la console vous donne des messages d'erreur chaque fois qu'une erreur de syntaxe existe dans le JavaScript qui est introduit dans le moteur JavaScript du navigateur. Maintenant partons en chasse !
 
-1.  Allez à l'onglet dans lequel est affiché `number-game-errors.html`, et ouvrez la console  JavaScript. Vous devriez voir un message d'erreur dans les lignes qui suivent : ![](not-a-function.png)
+1.  Allez à l'onglet dans lequel est affiché `number-game-errors.html`, et ouvrez la console JavaScript. Vous devriez voir un message d'erreur dans les lignes qui suivent&nbsp;: ![](not-a-function.png)
 2.  C'est une erreur très facile à trouver, et le navigateur vous fournit quelques indices pour vous en sortir (la copie d'écran ci‑dessus provient de Firefox, mais les autres navigateurs donnent des indications semblables). De gauche à droite, nous avons :
 
     - Une croix rouge indiquant que c'est une erreur.
-    - Un message d'erreur précisant ce qui ne va pas : "TypeError: guessSubmit.addeventListener is not a function" ("Type d'erreur : guessSubmit.addeventListener n'est pas une fonction")
+    - Un message d'erreur précisant ce qui ne va pas : "TypeError: guessSubmit.addeventListener is not a function" ("Type d'erreur&nbsp;: guessSubmit.addeventListener n'est pas une fonction")
     - Un lien "Learn More" ("En savoir plus") pointant sur une page MDN explicitant ce que l'erreur signifie avec pléthore de détails.
     - Le nom du fichier JavaScript, lié à l'onglet Debugger de l'outil de développement. Si vous suivez le lien, vous verrez exactement la ligne dans laquelle l'erreur est mise en évidence.
     - Le numéro de la ligne où se situe l'erreur, et le rang du caractère dans cette ligne où l'erreur a été repérée pour la première fois. Dans notre cas, il s'agit de la ligne 86, caractère 3.
@@ -82,34 +82,34 @@ Antérieurement dans le cours, nous vous avons demandé de taper quelques comman
     guessSubmit.addeventListener('click', checkGuess);
     ```
 
-4.  Le message d'erreur dit "guessSubmit.addeventListener n'est pas une fonction", donc nous avons probablement mal orthographié quelque chose. Si vous n'êtes pas sûr de la bonne orthographe d'un élément syntaxique, il est fréquemment opportun de regarder dans MDN. Actuellement, la meilleure façon d'opérer consiste à faire une recherche pour  "mdn _nom-de-fonctionnalité_" avec votre moteur de recherche préféré. Voici un raccourci pour gagner un peu de temps dans le cas présent : [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener).
-5.  Donc, en regardant cette page, il apparaît que nous avions mal orthographié le nom de la fonction ! Souvenez-vous que JavaScript est sensible à la casse, et que la moindre différence dans l'orthographe ou la casse déclenchera une erreur. Remplacer `addeventListener` par `addEventListener` corrigera cela. Faisons‑le maintenant.
+4.  Le message d'erreur dit "guessSubmit.addeventListener n'est pas une fonction", donc nous avons probablement mal orthographié quelque chose. Si vous n'êtes pas sûr de la bonne orthographe d'un élément syntaxique, il est fréquemment opportun de regarder dans MDN. Actuellement, la meilleure façon d'opérer consiste à faire une recherche pour  "mdn _nom-de-fonctionnalité_" avec votre moteur de recherche préféré. Voici un raccourci pour gagner un peu de temps dans le cas présent : [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener).
+5.  Donc, en regardant cette page, il apparaît que nous avions mal orthographié le nom de la fonction ! Souvenez-vous que JavaScript est sensible à la casse, et que la moindre différence dans l'orthographe ou la casse déclenchera une erreur. Remplacer `addeventListener` par `addEventListener` corrigera cela. Faisons‑le maintenant.
 
 > **Note :** Voyez la page relative à [TypeError: "x" is not a function](/fr/docs/Web/JavaScript/Reference/Errors/Not_a_function) pour plus de précisions à propos de cette erreur.
 
-### Erreurs de syntaxe : deuxième tour
+### Erreurs de syntaxe&nbsp;: deuxième tour
 
 1.  Enregistrez la page et actualisez‑la, vous constaterez que l'erreur a disparu.
-2.  Maintenant si vous entrez une supposition et pressez le bouton de soumission, vous constaterez ... une autre erreur ! ![](variable-is-null.png)
+2.  Maintenant si vous entrez une supposition et pressez le bouton de soumission, vous constaterez ... une autre erreur&nbsp;! ![](variable-is-null.png)
 3.  Cette fois‑ci, l'erreur rapportée est "TypeError: lowOrHi is null", à la ligne 78.
 
     > **Note :** [`Null`](/fr/docs/Glossary/Null) est une valeur spéciale signifiant "rien" ou "aucune valeur". Or `lowOrHi` a été déclaré et initialisé, mais sans valeur signifiante — il n'a ni type ni valeur.
 
     > **Note :** Cette erreur n'apparaît pas au moment du chargement de la page car elle survient à l'intérieur d'une fonction (dans `checkGuess() { ... }`). Comme vous l'apprendrez de manière plus précise plus loin dans l'article à propos des fonctions, le code dans les fonctions s'exécute dans une instance séparée du code en dehors des fonctions. Dans notre cas, le code n'avait pas été exécuté et l'erreur ne pouvait pas survenir avant que la fonction `checkGuess()` soit lancée à la ligne 86.
 
-4.  Regardez à la ligne 78, vous verrez ce code :
+4.  Regardez à la ligne 78, vous verrez ce code&nbsp;:
 
     ```js
     lowOrHi.textContent = 'Last guess was too high!';
     ```
 
-5.  La commande dans cette ligne essaie de définir la propriété `textContent` de la variable `lowOrHi` à l'aide d'une chaîne textuelle ; mais cela ne fonctionne pas car `lowOrHi` ne contient pas ce qui est attendu. Voyons voir — recherchons d'autres occurrences de `lowOrHi` dans le code. La plus proche que vous trouverez dans le JavaScript se situe à la ligne 48 :
+5.  La commande dans cette ligne essaie de définir la propriété `textContent` de la variable `lowOrHi` à l'aide d'une chaîne textuelle ; mais cela ne fonctionne pas car `lowOrHi` ne contient pas ce qui est attendu. Voyons voir — recherchons d'autres occurrences de `lowOrHi` dans le code. La plus proche que vous trouverez dans le JavaScript se situe à la ligne 48&nbsp;:
 
     ```js
     let lowOrHi = document.querySelector('lowOrHi');
     ```
 
-6.  Là, nous essayons de faire en sorte que la variable contienne une référence à un élément dans le HTML du document. Vérifions si sa valeur est `null` après que cette ligne ait été exécutée. Ajoutez le code suivant à la ligne 49 :
+6.  Là, nous essayons de faire en sorte que la variable contienne une référence à un élément dans le HTML du document. Vérifions si sa valeur est `null` après que cette ligne ait été exécutée. Ajoutez le code suivant à la ligne 49&nbsp;:
 
     ```js
     console.log(lowOrHi);
@@ -117,43 +117,43 @@ Antérieurement dans le cours, nous vous avons demandé de taper quelques comman
 
     > **Note :** [`console.log()`](/fr/docs/Web/API/Console/log) est vraiment utile pour déboguer une fonction en affichant sa valeur sur la console. Donc, elle affichera sur cette dernière la valeur de `lowOrHi` que nous avons essayé de définir à la ligne 48.
 
-7.  Enregistrez et actualisez la page, et vous verrez le résultat de `console.log()` sur la console. ![](console-log-output.png) C'est sûr, la valeur de `lowOrHi` est `null` à ce niveau ; il y a bien un problème à la ligne 48.
-8.  Quel est ce problème ? Réfléchissons. À la ligne 48, nous avons utilisé la méthode [`document.querySelector()`](/fr/docs/Web/API/Document/querySelector) pour obtenir une référence sur un élément avec un sélecteur CSS. En regardant plus en amont dans notre fichier, nous pouvons trouver le paragraphe en question :
+7.  Enregistrez et actualisez la page, et vous verrez le résultat de `console.log()` sur la console. ![](console-log-output.png) C'est sûr, la valeur de `lowOrHi` est `null` à ce niveau&nbsp;; il y a bien un problème à la ligne 48.
+8.  Quel est ce problème&nbsp;? Réfléchissons. À la ligne 48, nous avons utilisé la méthode [`document.querySelector()`](/fr/docs/Web/API/Document/querySelector) pour obtenir une référence sur un élément avec un sélecteur CSS. En regardant plus en amont dans notre fichier, nous pouvons trouver le paragraphe en question&nbsp;:
 
     ```js
     <p class="lowOrHi"></p>
     ```
 
-9.  Donc, il nous faut un sélecteur de classe ici, précédé d'un point (.), alors que le sélecteur passé à la méthode `querySelector()` en ligne 48 n'en a pas. Ce pourrait être le problème ! Changeons `lowOrHi` en `.lowOrHi` à la ligne 48.
-10. Enregistrons et actualisons à nouveau, et la directive `console.log()` renvoie bien l'élément  `<p>` attendu. Pfff ! Une autre erreur corrigée ! On peut enlever la ligne `console.log()` maintenant, ou bien la garder pour s'y reporter plus tard — comme vous l'entendez.
+9.  Donc, il nous faut un sélecteur de classe ici, précédé d'un point (.), alors que le sélecteur passé à la méthode `querySelector()` en ligne 48 n'en a pas. Ce pourrait être le problème&nbsp;! Changeons `lowOrHi` en `.lowOrHi` à la ligne 48.
+10. Enregistrons et actualisons à nouveau, et la directive `console.log()` renvoie bien l'élément  `<p>` attendu. Pfff&nbsp;! Une autre erreur corrigée&nbsp;! On peut enlever la ligne `console.log()` maintenant, ou bien la garder pour s'y reporter plus tard — comme vous l'entendez.
 
 > **Note :** Voyez la page relative à [TypeError: "x" is (not) "y"](/fr/docs/Web/JavaScript/Reference/Errors/Unexpected_type) pour plus de précisions à propos de cette erreur.
 
-### Erreurs de syntaxe : troisième tour
+### Erreurs de syntaxe&nbsp;: troisième tour
 
 1.  Maintenant si vous essayez de jouer, cela ira mieux — tout se déroule correctement, jusqu'à ce que vous arriviez à la fin, soit en devinant le bon chiffre, soit en épuisant le nombre de tentatives permises.
-2.  Arrivé là, le jeu échoue à nouveau et vous rencontrez la même erreur qu'au début — "TypeError: resetButton.addeventListener is not a function" ! Mais cette fois‑ci, elle vient de la ligne  94.
+2.  Arrivé là, le jeu échoue à nouveau et vous rencontrez la même erreur qu'au début — "TypeError: resetButton.addeventListener is not a function"&nbsp;! Mais cette fois‑ci, elle vient de la ligne 94.
 3.  En regardant cette ligne, il est facile de voir que nous avons fait ici la même erreur que précédemment. Il nous suffit de changer `addeventListener` en `addEventListener`. Faites‑le.
 
 ## Une erreur de logique
 
-À ce stade, le jeu se déroule correctement, mais après avoir fait quelques parties, vous noterez sans doute que le nombre « aléatoire » à deviner est toujours 0 ou 1. Franchement, de quoi vous dégoûter de jouer !
+À ce stade, le jeu se déroule correctement, mais après avoir fait quelques parties, vous noterez sans doute que le nombre «&nbsp;aléatoire&nbsp;» à deviner est toujours 0 ou 1. Franchement, de quoi vous dégoûter de jouer&nbsp;!
 
-Il y a sûrement un problème dans la logique du jeu quelque part — le jeu ne renvoie pas d'erreur ; il ne fonctionne pas correctement.
+Il y a sûrement un problème dans la logique du jeu quelque part — le jeu ne renvoie pas d'erreur&nbsp;; il ne fonctionne pas correctement.
 
-1.  Recherchons les lignes où la variable `randomNumber` est définie. L'instance qui stocke en début de jeu le nombre aléatoire à deviner se situe autour de la ligne 44 :
+1.  Recherchons les lignes où la variable `randomNumber` est définie. L'instance qui stocke en début de jeu le nombre aléatoire à deviner se situe autour de la ligne 44&nbsp;:
 
     ```js
     let randomNumber = Math.floor(Math.random()) + 1;
     ```
 
-    Et celle qui génére le nombre aléatoire pour une succession de jeux se situe autour de la ligne 113 :
+    Et celle qui génére le nombre aléatoire pour une succession de jeux se situe autour de la ligne 113&nbsp;:
 
     ```js
     randomNumber = Math.floor(Math.random()) + 1;
     ```
 
-2.  Pour vérifier si ces lignes sont vraiment à l'origine du problème, faisons appel à nouveau à notre ami `console.log()` — insérons la ligne suivante directement en dessous des deux lignes indiquées plus haut :
+2.  Pour vérifier si ces lignes sont vraiment à l'origine du problème, faisons appel à nouveau à notre ami `console.log()` — insérons la ligne suivante directement en dessous des deux lignes indiquées plus haut&nbsp;:
 
     ```js
     console.log(randomNumber);
@@ -169,23 +169,23 @@ Pour corriger cela, examinons d'abord le fonctionnement de cette ligne. Premièr
 Math.random()
 ```
 
-Puis, nous passons le résultat de l'appel de `Math.random()` à [`Math.floor()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/floor), qui arrondit le nombre passé à l'entier inférieur le plus proche. Puis, on ajoute 1 au résultat :
+Puis, nous passons le résultat de l'appel de `Math.random()` à [`Math.floor()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/floor), qui arrondit le nombre passé à l'entier inférieur le plus proche. Puis, on ajoute 1 au résultat&nbsp;:
 
     Math.floor(Math.random()) + 1
 
-Garder la partie entière d'un nombre décimal compris entre 0 et 1 renvoie toujours 0, y ajouter 1 donne toujours  1. Il faut multiplier le nombre aléatoire par 100 avant de l'arrondir par défaut. La ligne suivante nous donne un entier aléatoire entre 0 et  99 :
+Garder la partie entière d'un nombre décimal compris entre 0 et 1 renvoie toujours 0, y ajouter 1 donne toujours 1. Il faut multiplier le nombre aléatoire par 100 avant de l'arrondir par défaut. La ligne suivante nous donne un entier aléatoire entre 0 et 99&nbsp;:
 
 ```js
 Math.floor(Math.random()*100);
 ```
 
-Maintenant ajoutons 1 pour obtenir un nombre aléatoire entre 1 et 100 :
+Maintenant ajoutons 1 pour obtenir un nombre aléatoire entre 1 et 100&nbsp;:
 
 ```js
 Math.floor(Math.random()*100) + 1;
 ```
 
-Modifiez ces deux lignes comme indiqué, enregistrez, actualisez — le jeu devrait maintenant fonctionner comme il faut !
+Modifiez ces deux lignes comme indiqué, enregistrez, actualisez — le jeu devrait maintenant fonctionner comme il faut&nbsp;!
 
 ## Autres erreurs courantes
 
@@ -193,7 +193,7 @@ D'autres erreurs courantes peuvent être commises en écrivant du code. Ce parag
 
 ### SyntaxError: missing ; before statement
 
-Cette erreur signale généralement l'oubli du point‑virgule à la fin d'une ligne de code ; mais elle peut se révéler parfois plus énigmatique. Par exemple, si, dans la fonction  `checkGuess(),`nous modifions cette ligne :
+Cette erreur signale généralement l'oubli du point‑virgule à la fin d'une ligne de code&nbsp;; mais elle peut se révéler parfois plus énigmatique. Par exemple, si, dans la fonction  `checkGuess(),`nous modifions cette ligne&nbsp;:
 
 ```js
 let userGuess = Number(guessField.value);
@@ -205,13 +205,13 @@ en
 let userGuess === Number(guessField.value);
 ```
 
-cela déclenchera cette même erreur car le logiciel pense que vous êtes en train de faire quelque chose d'autre. Vous devez vous assurer que vous n'avez pas confondu l'opérateur d'assignation  (`=`) — qui fixe une valeur donnée à une variable — avec l'opérateur (`===`) qui teste la stricte égalité de deux valeurs, et renvoie un résultat  `true`/`false` (vrai/faux).
+cela déclenchera cette même erreur car le logiciel pense que vous êtes en train de faire quelque chose d'autre. Vous devez vous assurer que vous n'avez pas confondu l'opérateur d'assignation  (`=`) — qui fixe une valeur donnée à une variable — avec l'opérateur (`===`) qui teste la stricte égalité de deux valeurs, et renvoie un résultat  `true`/`false` (vrai/faux).
 
 > **Note :** Voyez la page relative à [SyntaxError: missing ; before statement](/fr/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement) pour plus de précisions à propos de cette erreur.
 
 ### Le programme dit que vous avez gagné quelle que soit votre suggestion.
 
-Voilà un autre symptome de la confusion entre opérateur d'assignation et opérateur de test d'égalité. Ainsi, dans `checkGuess()`, si vous modifiez cette ligne :
+Voilà un autre symptome de la confusion entre opérateur d'assignation et opérateur de test d'égalité. Ainsi, dans `checkGuess()`, si vous modifiez cette ligne&nbsp;:
 
 ```js
 if (userGuess === randomNumber) {
@@ -223,7 +223,7 @@ en
 if (userGuess = randomNumber) {
 ```
 
-le test renverra toujours `true` (vrai) et le programme indiquera que vous avez gagné à tout coup. Soyez attentif !
+le test renverra toujours `true` (vrai) et le programme indiquera que vous avez gagné à tout coup. Soyez attentif&nbsp;!
 
 ### SyntaxError: missing ) after argument list
 
@@ -245,7 +245,7 @@ en
 function checkGuess( {
 ```
 
-Le navigateur pense que vous essayez de passer le contenu d'un fonction comme argument pour l'autre fonction. Soyez attentifs avec les parenthèses !
+Le navigateur pense que vous essayez de passer le contenu d'un fonction comme argument pour l'autre fonction. Soyez attentifs avec les parenthèses&nbsp;!
 
 ### SyntaxError: missing } after function body
 
@@ -255,17 +255,17 @@ Facile — elle signifie généralement que vous avez omis une accolade dans une
 
 Ces erreurs signalent généralement l'oubli de guillemets ouvrants ou fermants dans une chaîne littérale. Dans la première erreur du titre, _string_ doit être remplacé par l'un ou les caractères inattendus que l'explorateur a trouvé à la place du guillemet en début de chaîne. La deuxième erreur indique que la chaîne n'a pas été clôturée avec un guillement fermant.
 
-Pour toutes ces erreurs, revoyez comment nous avons opéré dans les exemples de ce parcours. Quand une erreur survient, regardez le numéro de ligne indiqué, allez à cette ligne et voyez si vous remarquez ce qui ne va pas. N'oubliez pas que l'erreur n'est pas forcément sur la ligne indiquée, et qu'elle ne provient pas forcément d'un des problèmes évoqués plus haut !
+Pour toutes ces erreurs, revoyez comment nous avons opéré dans les exemples de ce parcours. Quand une erreur survient, regardez le numéro de ligne indiqué, allez à cette ligne et voyez si vous remarquez ce qui ne va pas. N'oubliez pas que l'erreur n'est pas forcément sur la ligne indiquée, et qu'elle ne provient pas forcément d'un des problèmes évoqués plus haut&nbsp;!
 
-> **Note :** Voyez les pages relatives à  [SyntaxError: Unexpected token](/fr/docs/Web/JavaScript/Reference/Errors/Unexpected_token) et [SyntaxError: unterminated string literal](/fr/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal) pour plus de précisions à ce propos.
+> **Note :** Voyez les pages relatives à  [SyntaxError: Unexpected token](/fr/docs/Web/JavaScript/Reference/Errors/Unexpected_token) et [SyntaxError: unterminated string literal](/fr/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal) pour plus de précisions à ce propos.
 
 ## Résumé
 
-Voilà ce que nous pouvons dire à propos des erreurs basiques pour de simples programmes JavaScript. Il n'est pas toujours aussi simple de détecter ce qui ne va pas dans du code, mais au moins vous économiserez ainsi quelques heures de veille et vous progresserez plus rapidement si les choses ne déraillent pas dès le début de votre parcours d'apprentissage.
+Voilà ce que nous pouvons dire à propos des erreurs basiques pour de simples programmes JavaScript. Il n'est pas toujours aussi simple de détecter ce qui ne va pas dans du code, mais au moins vous économiserez ainsi quelques heures de veille et vous progresserez plus rapidement si les choses ne déraillent pas dès le début de votre parcours d'apprentissage.
 
 ## Voir aussi
 
-- Il y a nombre d'autres erreurs qui n'ont pas été listées ici ; nous les avons récolées dans un référencement qui les explique en détail — voyez [JavaScript error reference](/fr/docs/Web/JavaScript/Reference/Errors).
-- Si dans votre code vous rencontrez une erreur, et même après avoir lu cet article, vous ne parvenez pas à la corriger, vous pouvez obtenir de l'aide ! Demandez‑la sur le fil de discussion [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou par le canal IRC de [#mdn](irc://irc.mozilla.org/mdn) sur  [Mozilla IRC](https://wiki.mozilla.org/IRC). Dites‑nous quelle est cette erreur, et nous essayerons de vous aider. Un listing de votre code sera aussi utile.
+- Il y a nombre d'autres erreurs qui n'ont pas été listées ici&nbsp;; nous les avons récolées dans un référencement qui les explique en détail — voyez [JavaScript error reference](/fr/docs/Web/JavaScript/Reference/Errors).
+- Si dans votre code vous rencontrez une erreur, et même après avoir lu cet article, vous ne parvenez pas à la corriger, vous pouvez obtenir de l'aide&nbsp;! Demandez‑la sur le fil de discussion [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou par le canal IRC de [#mdn](irc://irc.mozilla.org/mdn) sur  [Mozilla IRC](https://wiki.mozilla.org/IRC). Dites‑nous quelle est cette erreur, et nous essayerons de vous aider. Un listing de votre code sera aussi utile.
 
 {{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}
diff --git a/files/fr/learn/javascript/index.md b/files/fr/learn/javascript/index.md
index f730e65560..44dcb21e4f 100644
--- a/files/fr/learn/javascript/index.md
+++ b/files/fr/learn/javascript/index.md
@@ -16,7 +16,7 @@ original_slug: Apprendre/JavaScript
 
 ## Parcours d'apprentissage
 
-JavaScript est sans doute plus difficile à apprendre que les technologies connexes telles que [HTML](/fr/Apprendre/HTML) et [CSS](/fr/Apprendre/CSS). Avant d'essayer d'apprendre le JavaScript, il est fortement conseillé de se familiariser d'abord avec au moins ces deux technologies, et peut-être aussi avec d'autres. Commencez par travailler sur les modules suivants :
+JavaScript est sans doute plus difficile à apprendre que les technologies connexes telles que [HTML](/fr/Apprendre/HTML) et [CSS](/fr/Apprendre/CSS). Avant d'essayer d'apprendre le JavaScript, il est fortement conseillé de se familiariser d'abord avec au moins ces deux technologies, et peut-être aussi avec d'autres. Commencez par travailler sur les modules suivants&nbsp;:
 
 - [Commencer avec le Web](/fr/Apprendre/Commencer_avec_le_web)
 - [Introduction au HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML)
@@ -24,14 +24,14 @@ JavaScript est sans doute plus difficile à apprendre que les technologies conne
 
 Avoir une expérience antérieure avec d'autres langages de programmation peut également aider.
 
-Après vous être familiarisé avec les bases de JavaScript, vous devriez être en mesure d'en apprendre davantage sur des sujets plus avancés, par exemple :
+Après vous être familiarisé avec les bases de JavaScript, vous devriez être en mesure d'en apprendre davantage sur des sujets plus avancés, par exemple&nbsp;:
 
 - JavaScript en profondeur, comme enseigné dans notre [guide JavaScript](/fr/docs/Web/JavaScript/Guide)
 - [API web](/fr/docs/Web/API)
 
 ## Modules
 
-Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les aborder :
+Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les aborder&nbsp;:
 
 - [Premiers pas en JavaScript](/fr/docs/Learn/JavaScript/First_steps)
   - : Dans notre premier module JavaScript, nous répondons d'abord à des questions fondamentales telles que «qu'est-ce que le JavaScript ?», «à quoi cela ressemble-t-il ?» et «que peut-il faire ?», avant de passer à votre première expérience pratique d'écriture de JavaScript. Après cela, nous discutons en détail de certaines fonctionnalités clés de JavaScript, telles que les variables, les chaînes, les nombres et les tableaux.
diff --git a/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md
index c062678477..f1a56cb0f7 100644
--- a/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md
+++ b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md
@@ -16,7 +16,7 @@ original_slug: >-
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
 
-Dans cet exercice, vous devrez utiliser le jeu des balles rebondissantes de l'article précédent comme base, pour y ajouter de nouvelles fonctionnalitées intéressantes.
+Dans cet exercice, vous devrez utiliser le jeu des balles rebondissantes de l'article précédent comme base, pour y ajouter de nouvelles fonctionnalitées intéressantes.
 
 <table class="standard-table">
   <tbody>
@@ -39,76 +39,76 @@ Dans cet exercice, vous devrez utiliser le jeu des balles rebondissantes de l'ar
 
 ## Pour commencer
 
-Pour commencer, faite une copie locale de [index-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html), [style.css](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css), et [main-finished.js](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js) de l'article précédent, dans un nouveau dossier.
+Pour commencer, faite une copie locale de [index-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html), [style.css](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css), et [main-finished.js](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js) de l'article précédent, dans un nouveau dossier.
 
-> **Note :** Vous pouvez utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). Vous pouvez copier vos codes HTML, CSS et JavaScript dans l'un d'entre eux. Si celui que vous utilisez ne possède pas de fenêtres séparées pour les différents langages, ajoutez les dans des balises `<script>`/`<style>` dans votre code HTML.
+> **Note :** Vous pouvez utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). Vous pouvez copier vos codes HTML, CSS et JavaScript dans l'un d'entre eux. Si celui que vous utilisez ne possède pas de fenêtres séparées pour les différents langages, ajoutez les dans des balises `<script>`/`<style>` dans votre code HTML.
 
 ## Le projet en bref
 
-Notre jeu des balles est assez sympa, mais maintenant il s'agit de le rendre plus interactif en y ajoutant un viseur contrôlé par l'utilisateur, qui va détruire une balle s'il la touche. Nous voulons aussi tester votre capacité en programmation orientée objet en créant un object `Shape()` dont le viseur et les balles peuvent hériter. Pour terminer, nous voulons créer un compteur qui permet d'afficher combien de balles il nous reste encore à détruire.
+Notre jeu des balles est assez sympa, mais maintenant il s'agit de le rendre plus interactif en y ajoutant un viseur contrôlé par l'utilisateur, qui va détruire une balle s'il la touche. Nous voulons aussi tester votre capacité en programmation orientée objet en créant un object `Shape()` dont le viseur et les balles peuvent hériter. Pour terminer, nous voulons créer un compteur qui permet d'afficher combien de balles il nous reste encore à détruire.
 
 Ce screenshot vous donne une idée du résultat final:
 
 ![](bouncing-evil-circle.png)
 
-Si vous voulez en savoir plus, regardez [l'exemple fini ](http://mdn.github.io/learning-area/javascript/oojs/assessment/) (n'en profitez pas pour récupérer le code source !).
+Si vous voulez en savoir plus, regardez [l'exemple fini ](http://mdn.github.io/learning-area/javascript/oojs/assessment/) (n'en profitez pas pour récupérer le code source !).
 
-## Vos objectifs
+## Vos objectifs
 
 Cette section décrit ce que vous aurez à faire.
 
 ### Créons nos nouveaux objets
 
-Pour commencer, modifions le constructeur de l'objet `Ball()` pour qu'il devienne le constructeur de `Shape()` puis créons en un nouveau pour `Ball()` :
+Pour commencer, modifions le constructeur de l'objet `Ball()` pour qu'il devienne le constructeur de `Shape()` puis créons en un nouveau pour `Ball()`&nbsp;:
 
-1.  Le constructeur `Shape()` devra définir les propriétés `x`, `y`, `velX`, et `velY` de la même manière que le constructeur `Ball()` auparavant, mais sans les propriétés `color` et `size`.
-2.  `Shape()` doit aussi définir une nouvelle propriété `exists`, qui servira à identifier les balles qu'il reste à détruire dans la fenêtre (celles qui n'ont pas encore été détruites). Elle doit retourner un booléen (`true`/`false`).
-3.  Le constructeur `Ball()` doit hériter des propriétés `x`, `y`, `velX`, `velY`, et `exists` du constructeur `Shape()`.
-4.  `Ball()` doit aussi définir les propriétés `color` et `size`, comme à l'origine.
-5.  N'oubliez pas de définir le prototype de `Ball()` et son constructeur de manière approprié.
+1.  Le constructeur `Shape()` devra définir les propriétés `x`, `y`, `velX`, et `velY` de la même manière que le constructeur `Ball()` auparavant, mais sans les propriétés `color` et `size`.
+2.  `Shape()` doit aussi définir une nouvelle propriété `exists`, qui servira à identifier les balles qu'il reste à détruire dans la fenêtre (celles qui n'ont pas encore été détruites). Elle doit retourner un booléen (`true`/`false`).
+3.  Le constructeur `Ball()` doit hériter des propriétés `x`, `y`, `velX`, `velY`, et `exists` du constructeur `Shape()`.
+4.  `Ball()` doit aussi définir les propriétés `color` et `size`, comme à l'origine.
+5.  N'oubliez pas de définir le prototype de `Ball()` et son constructeur de manière approprié.
 
-Les méthodes `draw()`, `update()`, et `collisionDetect()` doivent fonctionnées comme avant, sans être modifiées.
+Les méthodes `draw()`, `update()`, et `collisionDetect()` doivent fonctionnées comme avant, sans être modifiées.
 
-Vous devrez ajouter un nouveau paramètre au constructeur `new Ball() ( ... )` — le paramètre `exists` doit être le 5ème et être égal à `true`.
+Vous devrez ajouter un nouveau paramètre au constructeur `new Ball() ( ... )` — le paramètre `exists` doit être le 5ème et être égal à `true`.
 
 Vous pouvez recharger la page — tout doit fonctionner comme avant, même après les modifications que vous avez effectuées sur les objets.
 
 ### Définition du EvilCircle() (viseur)
 
-Il est temps de vous équipez ! — le `EvilCircle()`! Dans notre jeu, nous allons créer un viseur mais nous allons nous servir de l'objet `Shape()` pour le définir. Vous voudrez certainement en ajouter un (plusieurs) autre plus tard, qu'un autre joueur ou l'ordinateur pourra contrôler. Vous n'irez probablement pas bien loin avec un seul viseur, mais ce sera suffisant pour le moment !
+Il est temps de vous équipez ! — le `EvilCircle()`! Dans notre jeu, nous allons créer un viseur mais nous allons nous servir de l'objet `Shape()` pour le définir. Vous voudrez certainement en ajouter un (plusieurs) autre plus tard, qu'un autre joueur ou l'ordinateur pourra contrôler. Vous n'irez probablement pas bien loin avec un seul viseur, mais ce sera suffisant pour le moment !
 
-Le constructeur du `EvilCircle()` doit hériter des propriétés `x`, `y`, `velX`, `velY`, et `exists` de `Shape()`, mais `velX` et `velY` doivent toujours être égales à 20.
+Le constructeur du `EvilCircle()` doit hériter des propriétés `x`, `y`, `velX`, `velY`, et `exists` de `Shape()`, mais `velX` et `velY` doivent toujours être égales à 20.
 
-Vous devriez utiliser quelque chose comme `Shape.call(this, x, y, 20, 20, exists);`
+Vous devriez utiliser quelque chose comme `Shape.call(this, x, y, 20, 20, exists);`
 
 Le constructeur doit aussi définir ses propres propriétés:
 
 - `color` — `'white'`
 - `size` — `10`
 
-Une fois de plus, souvenez-vous de définir vos propriétés héritées en paramètre du constructeur et de définir le prototype et son constructeur de manière appropriée.
+Une fois de plus, souvenez-vous de définir vos propriétés héritées en paramètre du constructeur et de définir le prototype et son constructeur de manière appropriée.
 
-### Définir les méthodes du EvilCircle() (viseur)
+### Définir les méthodes du EvilCircle() (viseur)
 
-`EvilCircle()` doit avoir quatre méthodes, comme définie en dessous.
+`EvilCircle()` doit avoir quatre méthodes, comme définie en dessous.
 
 #### `draw()`
 
-Cette méthode doit avoir la même fonction que celle de `Ball()`: soit dessiner l'objet dans le canvas. Elle fonctionnera quasiment de la même manière, copiez la fonction `Ball.prototype.draw`. Puis appliquez les modifications suivantes:
+Cette méthode doit avoir la même fonction que celle de `Ball()`: soit dessiner l'objet dans le canvas. Elle fonctionnera quasiment de la même manière, copiez la fonction `Ball.prototype.draw`. Puis appliquez les modifications suivantes:
 
-- On ne veut pas que le viseur soit plein, mais qu'il ait seulement un contour. Changez [`fillStyle`](/fr/docs/Web/API/CanvasRenderingContext2D/fillStyle) et [`fill()`](/fr/docs/Web/API/CanvasRenderingContext2D/fill) pour [`strokeStyle`](/fr/docs/Web/API/CanvasRenderingContext2D/strokeStyle) et [`stroke()`](/fr/docs/Web/API/CanvasRenderingContext2D/stroke).
-- On voudrait qu'il soit aussi un peu plus épais, pour être plus facile à voir. Pour ça on doit définir un attribut [`lineWidth`](/fr/docs/Web/API/CanvasRenderingContext2D/lineWidth) à ctx après l'appel à la fonction [`beginPath()`](/fr/docs/Web/API/CanvasRenderingContext2D/beginPath) (avec une valeur de 3).
+- On ne veut pas que le viseur soit plein, mais qu'il ait seulement un contour. Changez [`fillStyle`](/fr/docs/Web/API/CanvasRenderingContext2D/fillStyle) et [`fill()`](/fr/docs/Web/API/CanvasRenderingContext2D/fill) pour [`strokeStyle`](/fr/docs/Web/API/CanvasRenderingContext2D/strokeStyle) et [`stroke()`](/fr/docs/Web/API/CanvasRenderingContext2D/stroke).
+- On voudrait qu'il soit aussi un peu plus épais, pour être plus facile à voir. Pour ça on doit définir un attribut [`lineWidth`](/fr/docs/Web/API/CanvasRenderingContext2D/lineWidth) à ctx après l'appel à la fonction [`beginPath()`](/fr/docs/Web/API/CanvasRenderingContext2D/beginPath) (avec une valeur de 3).
 
 #### `checkBounds()`
 
-Cette méthode à la même fonction que la première partie de `Ball()` `update()` — Savoir si le viseur va hors de l'écran, et l'arrêter si besoin. Une fois encore, copié la méthode `Ball.prototype.update`, mais en effectuant quelques changements:
+Cette méthode à la même fonction que la première partie de `Ball()` `update()` — Savoir si le viseur va hors de l'écran, et l'arrêter si besoin. Une fois encore, copié la méthode `Ball.prototype.update`, mais en effectuant quelques changements:
 
 - Débarrassez-vous des deux dernières lignes — on a pas besoin de connaître la position du viseur à chaque frame, car nous le déplacerons d'une manière différente comme vous pourrez le voir.
-- Dans les conditions en `if()` , si la condition retourne true on ne veut pas modifier (update) les propriétés `velX`/`velY`; mais plutôt changer les valeurs de `x`/`y` de manière à ce que le viseur revienne doucement dans l'écran. Ajouter ou soustraire de manière appropriée la taille (`size)` du viseur sera suffisant.
+- Dans les conditions en `if()`, si la condition retourne true on ne veut pas modifier (update) les propriétés `velX`/`velY`; mais plutôt changer les valeurs de `x`/`y` de manière à ce que le viseur revienne doucement dans l'écran. Ajouter ou soustraire de manière appropriée la taille (`size)` du viseur sera suffisant.
 
 #### `setControls()`
 
-Cette méthode ajoute un écouteur d'évènement `onkeydown` à l'objet `window` ce qui permettra en enfonçant certaine touche du clavier de déplacer le viseur dans la fenêtre. Insérez le code suivant dans la méthode:
+Cette méthode ajoute un écouteur d'évènement `onkeydown` à l'objet `window` ce qui permettra en enfonçant certaine touche du clavier de déplacer le viseur dans la fenêtre. Insérez le code suivant dans la méthode:
 
 ```js
 var _this = this;
@@ -125,31 +125,31 @@ window.onkeydown = function(e) {
   }
 ```
 
-Quand une touche est enfoncée, la propriété [keyCode](/fr/docs/Web/API/KeyboardEvent/keyCode) de l'objet event est consultée pour savoir quelle touche est enfoncée. Si c'est une des touches spécifiée, alors le viseur ce déplacera à gauche, à droite, en haut ou en bas.
+Quand une touche est enfoncée, la propriété [keyCode](/fr/docs/Web/API/KeyboardEvent/keyCode) de l'objet event est consultée pour savoir quelle touche est enfoncée. Si c'est une des touches spécifiée, alors le viseur ce déplacera à gauche, à droite, en haut ou en bas.
 
-- Pour un point bonus, faite apparaître à quel touche correspond le code de celle que l'utilisateur a enfoncé.
-- Pour un second point bonus, pouvez vous nous dire pourquoi nous devons définir `var _this = this;` de cette façon ? Cela à quelque chose à voir avec la portée des fonction.
+- Pour un point bonus, faite apparaître à quel touche correspond le code de celle que l'utilisateur a enfoncé.
+- Pour un second point bonus, pouvez vous nous dire pourquoi nous devons définir `var _this = this;` de cette façon ? Cela à quelque chose à voir avec la portée des fonction.
 
 #### `collisionDetect()`
 
-Cette méthode fonctionne d'une manière similaire à `Ball()` `collisionDetect()`, copier celle-ci pour vous en servir comme base. Il y a deux différences:
+Cette méthode fonctionne d'une manière similaire à `Ball()` `collisionDetect()`, copier celle-ci pour vous en servir comme base. Il y a deux différences:
 
-- Dans la condition extérieure `if`, nous n'avons plus besoin de vérifier si la balle actuellement dans la boucle est celle actuellement surveiller — Parce que ce n'est plus une balle, mais notre viseur ! A la place, on doit tester si la balle visée existe (avec quelle propriété pourrez vous faire cela?). Si elle n'existe pas, c'est qu'elle a déjà été détruite, on a donc pas besoin de la vérifier encore une fois.
-- Dans la condition intérieur `if`, on ne souhaite plus changer un élément de couleur lorsqu'une collision est détéctée — A la place, on veut détruire les balles qui entre en collision avec le viseur (encore une fois, comment pensez-vous faire cela ?).
+- Dans la condition extérieure `if`, nous n'avons plus besoin de vérifier si la balle actuellement dans la boucle est celle actuellement surveiller — Parce que ce n'est plus une balle, mais notre viseur ! A la place, on doit tester si la balle visée existe (avec quelle propriété pourrez vous faire cela?). Si elle n'existe pas, c'est qu'elle a déjà été détruite, on a donc pas besoin de la vérifier encore une fois.
+- Dans la condition intérieur `if`, on ne souhaite plus changer un élément de couleur lorsqu'une collision est détéctée — A la place, on veut détruire les balles qui entre en collision avec le viseur (encore une fois, comment pensez-vous faire cela ?).
 
 ### Insérer le viseur dans notre programme
 
-Maintenant que nous avons définit notre viseur, on a besoin de le faire apparaître à l'écran. Pour ce faire on doit appliquer quelques modifications à la fonction `loop()`.
+Maintenant que nous avons définit notre viseur, on a besoin de le faire apparaître à l'écran. Pour ce faire on doit appliquer quelques modifications à la fonction `loop()`.
 
-- Premièrement, créons une nouvelle instance de l'objet viseur (en spécifiant les paramètres nécessaire), et appelons sa méthode `setControls()`. On doit seulement effectuer ses deux actions une seule fois, pas à chaque itération.
-- Au moment où l'on boucle à travers toutes les balles et que l'on appelle les méthodes `draw()`, `update()`, et `collisionDetect()` pour chacune d'entre elle, faite de manière à ce que ces fonctions soit appelées seulement si la balle existe.
-- Appellez les méthodes de l'instance du viseur `draw()`, `checkBounds()`, et `collisionDetect()` à chaque itération de la boucle.
+- Premièrement, créons une nouvelle instance de l'objet viseur (en spécifiant les paramètres nécessaire), et appelons sa méthode `setControls()`. On doit seulement effectuer ses deux actions une seule fois, pas à chaque itération.
+- Au moment où l'on boucle à travers toutes les balles et que l'on appelle les méthodes `draw()`, `update()`, et `collisionDetect()` pour chacune d'entre elle, faite de manière à ce que ces fonctions soit appelées seulement si la balle existe.
+- Appellez les méthodes de l'instance du viseur `draw()`, `checkBounds()`, et `collisionDetect()` à chaque itération de la boucle.
 
 ### Implémenter le compteur de score
 
 Pour implémenter le compteur de score, suivez les étapes suivantes:
 
-1.  Dans votre fichier HTML, ajoutez un élement {{HTMLElement("p")}} qui contiendra le texte suivant "Ball count: ", juste en dessous de l'élément {{HTMLElement("h1")}} .
+1.  Dans votre fichier HTML, ajoutez un élement {{HTMLElement("p")}} qui contiendra le texte suivant "Ball count: ", juste en dessous de l'élément {{HTMLElement("h1")}} .
 2.  Dans votre fichier CSS, ajouter les règlesz suivantes:
 
     ```css
@@ -176,7 +176,7 @@ Pour implémenter le compteur de score, suivez les étapes suivantes:
 
 ## Evaluation
 
-Si vous effectuez cette évalutation dans le cadre d'un cours, vous devriez pouvoir fournir votre travail à votre professeur/mentor pour correction. Si vous apprenez par vous même, vous pouvez obtenir la correction sur [discussion thread for this exercise](https://discourse.mozilla.org/t/adding-features-to-our-bouncing-balls-demo-assessment/24689), ou sur [#mdn](irc://irc.mozilla.org/mdn) IRC channel sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Tout d'abord effectuez cet exercice — vous n'obtiendrez jamais rien en trichant !
+Si vous effectuez cette évalutation dans le cadre d'un cours, vous devriez pouvoir fournir votre travail à votre professeur/mentor pour correction. Si vous apprenez par vous même, vous pouvez obtenir la correction sur [discussion thread for this exercise](https://discourse.mozilla.org/t/adding-features-to-our-bouncing-balls-demo-assessment/24689), ou sur [#mdn](irc://irc.mozilla.org/mdn) IRC channel sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Tout d'abord effectuez cet exercice — vous n'obtiendrez jamais rien en trichant !
 
 {{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
 
diff --git a/files/fr/learn/javascript/objects/basics/index.md b/files/fr/learn/javascript/objects/basics/index.md
index dfca7d223a..05f8f8baa5 100644
--- a/files/fr/learn/javascript/objects/basics/index.md
+++ b/files/fr/learn/javascript/objects/basics/index.md
@@ -41,9 +41,9 @@ Dans ce premier article sur les objets JavaScript, nous verrons la syntaxe des o
 
 ## Les bases de l'objet
 
-Un objet est une collection de données apparentées et/ou de fonctionnalités (qui, souvent, se composent de plusieurs variables et fonctions, appelées propriétés et méthodes quand elles sont dans des objets). Prenons un exemple pour voir à quoi cela ressemble.
+Un objet est une collection de données apparentées et/ou de fonctionnalités (qui, souvent, se composent de plusieurs variables et fonctions, appelées propriétés et méthodes quand elles sont dans des objets). Prenons un exemple pour voir à quoi cela ressemble.
 
-Pour commencer, faites une copie locale de notre fichier [oojs.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html). Il contient peu de choses : un élément {{HTMLElement("script")}} pour écrire notre code à l'intérieur. Nous utiliserons ces éléments de base pour explorer les bases de la syntaxe objet. Durant cette exemple, vous devriez avoir [la console JavaScript des outils de développement](/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs#La_console_JavaScript) ouverte et prête, pour y saisir des commandes.
+Pour commencer, faites une copie locale de notre fichier [oojs.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html). Il contient peu de choses : un élément {{HTMLElement("script")}} pour écrire notre code à l'intérieur. Nous utiliserons ces éléments de base pour explorer les bases de la syntaxe objet. Durant cette exemple, vous devriez avoir [la console JavaScript des outils de développement](/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs#La_console_JavaScript) ouverte et prête, pour y saisir des commandes.
 
 Comme souvent dans JavaScript, pour créer un objet, on commence avec la définition et l'initialisation d'une variable. Essayez de mettre le code ci-dessous sous le code déjà écrit de votre fichier JavaScript, puis sauvegardez et rafraichissez la page :
 
@@ -51,7 +51,7 @@ Comme souvent dans JavaScript, pour créer un objet, on commence avec la défini
 var personne = {};
 ```
 
-Désormais ouvrez la [console JavaScript](/fr/docs/Outils/Console_JavaScript#Ouvrir_la_Console_du_navigateur) de votre navigateur, saisissez `personne` à l'intérieur, et appuyez sur <kbd>Entrée</kbd>. Vous devriez obtenir le résultat suivant :
+Désormais ouvrez la [console JavaScript](/fr/docs/Outils/Console_JavaScript#Ouvrir_la_Console_du_navigateur) de votre navigateur, saisissez `personne` à l'intérieur, et appuyez sur <kbd>Entrée</kbd>. Vous devriez obtenir le résultat suivant :
 
 ```js
 [object Object]
@@ -74,7 +74,7 @@ var personne = {
 };
 ```
 
-Après avoir sauvegardé et rafraîchit la page, essayez d'entrer les lignes suivantes dans le champ de saisie `input` :
+Après avoir sauvegardé et rafraîchit la page, essayez d'entrer les lignes suivantes dans le champ de saisie `input` :
 
 ```js
 personne.nom
@@ -105,7 +105,7 @@ La valeur d'un membre dans un objet peut être n'importe quoi — dans notre obj
 
 Dans cet exemple, l'objet est créé grâce à un **objet littéral** : on écrit littéralement le contenu de l'objet pour le créer. On distinguera cette structure des objets instanciés depuis des classes, que nous verrons plus tard.
 
-C'est une pratique très courante de créer un objet en utilisant un objet littéral :  par exemple, quand on envoie une requête au serveur pour transférer des données vers une base de données.
+C'est une pratique très courante de créer un objet en utilisant un objet littéral :  par exemple, quand on envoie une requête au serveur pour transférer des données vers une base de données.
 
 Envoyer un seul objet est bien plus efficace que d'envoyer ses membres de manière individuelle, et c'est bien plus simple de travailler avec un tableau quand on veut identifier des membres par leur nom.
 
@@ -177,7 +177,7 @@ personne['age']
 personne['nom']['prenom']
 ```
 
-Cela ressemble beaucoup à la façon d'accéder aux éléments d'un tableau et c'est bien la même chose  — au lieu d'utiliser un indice numérique pour sélectionner un élément, on utilise le nom associé à chaque valeur d'un membre. Ce n'est pas pour rien que les objets sont parfois appelés tableaux associatifs : ils associent des chaînes de caractères (les noms des membres) à des valeurs, de la même façon que les tableaux associent des nombres à des valeurs.
+Cela ressemble beaucoup à la façon d'accéder aux éléments d'un tableau et c'est bien la même chose  — au lieu d'utiliser un indice numérique pour sélectionner un élément, on utilise le nom associé à chaque valeur d'un membre. Ce n'est pas pour rien que les objets sont parfois appelés tableaux associatifs : ils associent des chaînes de caractères (les noms des membres) à des valeurs, de la même façon que les tableaux associent des nombres à des valeurs.
 
 ## Définir les membres d'un objet
 
@@ -248,7 +248,7 @@ salutation: function() {
 }
 ```
 
-Vous vous demandez probablement ce que signifie « `this` ». Le mot-clé `this` se réfère à l'objet courant dans lequel le code est écrit —  dans notre cas, `this` est l'équivalent de `personne`.  Alors, pourquoi ne pas écrire `personne` à la place ? Comme vous le verrez dans l'article [la programmation JavaScript orientée objet pour les débutants](/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS), `this` est très utile — il permet de s'assurer que les bonnes valeurs sont utilisées quand le contexte d'un membre change (on peut par exemple avoir deux personnes, sous la forme de deux objets, avec des noms différents).
+Vous vous demandez probablement ce que signifie « `this` ». Le mot-clé `this` se réfère à l'objet courant dans lequel le code est écrit —  dans notre cas, `this` est l'équivalent de `personne`.  Alors, pourquoi ne pas écrire `personne` à la place ? Comme vous le verrez dans l'article [la programmation JavaScript orientée objet pour les débutants](/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS), `this` est très utile — il permet de s'assurer que les bonnes valeurs sont utilisées quand le contexte d'un membre change (on peut par exemple avoir deux personnes, sous la forme de deux objets, avec des noms différents).
 
 Essayons d'illustrer nos propos par une paire d'objet `personne` simplifiée :
 
@@ -268,7 +268,7 @@ var personne2 = {
 }
 ```
 
-Dans ce cas,  `personne1.salutation()` affichera "Bonjour ! Je suis Christophe.", tandis que `personne2.salutation()` affichera "Bonjour ! Je suis Bruno." alors que le code est le même dans les deux cas. Comme expliqué plus tôt, `this` est égal à l'objet dans lequel se situe le code. Ce n'est pas très utile quand on écrit des objets littéraux à la main, mais ça prend tout son sens quand on génère des objets dynamiques (avec des constructeurs par exemple).
+Dans ce cas,  `personne1.salutation()` affichera "Bonjour ! Je suis Christophe.", tandis que `personne2.salutation()` affichera "Bonjour ! Je suis Bruno." alors que le code est le même dans les deux cas. Comme expliqué plus tôt, `this` est égal à l'objet dans lequel se situe le code. Ce n'est pas très utile quand on écrit des objets littéraux à la main, mais ça prend tout son sens quand on génère des objets dynamiques (avec des constructeurs par exemple).
 
 ## Vous utilisiez des objets depuis le début !
 
@@ -291,7 +291,7 @@ var maVideo = document.querySelector('video');
 
 Vous utilisez une méthode disponible dans l'instance de la classe {{domxref("Document")}}. Pour chaque page web chargée, une instance de `Document` est créée, appelée `document` et qui représente la structure entière de la page, son contenu et d'autres caractéristiques telles que son URL. Encore une fois, cela signifie qu'elle possède plusieurs méthodes/propriétés communes.
 
-C'est également vrai pour beaucoup d'autres objets/API natifs que vous avez utilisé  — {{jsxref("Array")}}, {{jsxref("Math")}}, etc.
+C'est également vrai pour beaucoup d'autres objets/API natifs que vous avez utilisé  — {{jsxref("Array")}}, {{jsxref("Math")}}, etc.
 
 On notera que les objets/API natifs ne créent pas toujours automatiquement des instances d'objet. Par exemple, [l'API Notifications](/fr/docs/Web/API/Notifications_API) — qui permet aux navigateurs modernes de déclencher leurs propres notifications — vous demande d'instancier vous-même une nouvelle instance d'objet en utilisant le constructeur pour chaque notification que vous souhaitez lancer. Essayez d'entrer le code ci-dessous dans la console JavaScript :
 
@@ -305,7 +305,7 @@ Nous verrons les constructeurs dans un prochain article.
 
 ## Résumé
 
-Félicitations, vous avez terminé notre premier article sur les objets JavaScript  — vous devriez maintenant mieux comprendre comment on travaille avec des objets en JavaScript. Vous avez pu créer vos propres objets basiques. Vous devriez aussi voir que les objets sont très pratiques pour stocker des données et des fonctionnalités. Si on ne passe pas par un objet et qu'on a une variable différente pour chaque propriété et méthode de notre objet `personne`, cela sera inefficace et frustrant et vous prendrez le risque de créer des conflits avec d'autres variables et fonctions du même nom.
+Félicitations, vous avez terminé notre premier article sur les objets JavaScript  — vous devriez maintenant mieux comprendre comment on travaille avec des objets en JavaScript. Vous avez pu créer vos propres objets basiques. Vous devriez aussi voir que les objets sont très pratiques pour stocker des données et des fonctionnalités. Si on ne passe pas par un objet et qu'on a une variable différente pour chaque propriété et méthode de notre objet `personne`, cela sera inefficace et frustrant et vous prendrez le risque de créer des conflits avec d'autres variables et fonctions du même nom.
 
 Les objets permettent de conserver les informations de façon sûre, enfermées dans leur propre « paquet », hors de danger.
 
diff --git a/files/fr/learn/javascript/objects/classes_in_javascript/index.md b/files/fr/learn/javascript/objects/classes_in_javascript/index.md
index 29263128cc..c553750aab 100644
--- a/files/fr/learn/javascript/objects/classes_in_javascript/index.md
+++ b/files/fr/learn/javascript/objects/classes_in_javascript/index.md
@@ -47,7 +47,7 @@ Les présentations ayant été faites pour les concepts du JavaScript orienté o
 
 Nous avons déjà vu le concept d'héritage en action, nous avons vu comment la chaîne de prototypage fonctionnait, et comment les propriétés de cette chaîne sont lues de manière ascendante. En revanche,nous n'avons utilisé pratiquement que quelques fonctionnalités déjà intégrées dans le navigateur pour le faire. Comment créer un objet JavaScript qui hérite d'un autre objet ?
 
-Certains pensent que JavaScript n'est pas un véritable langage orienté objet. Dans les langages orientés objets classiques, on définit des classes objet et on peut ensuite définir laquelle hérite d'une autre (voir [C++ inheritance](http://www.tutorialspoint.com/cplusplus/cpp_inheritance.htm) en anglais pour des exemples simples). JavasScript utilise une approche différente : les objets héritant d'un autre n'ont pas de fonctionnalités copiées d'un autre objet, au lieu de ça, ils héritent des fonctionnalités via les liens de la chaîne de prototypage (on parle alors d'un **héritage prototypique**).
+Certains pensent que JavaScript n'est pas un véritable langage orienté objet. Dans les langages orientés objets classiques, on définit des classes objet et on peut ensuite définir laquelle hérite d'une autre (voir [C++ inheritance](http://www.tutorialspoint.com/cplusplus/cpp_inheritance.htm) en anglais pour des exemples simples). JavasScript utilise une approche différente : les objets héritant d'un autre n'ont pas de fonctionnalités copiées d'un autre objet, au lieu de ça, ils héritent des fonctionnalités via les liens de la chaîne de prototypage (on parle alors d'un **héritage prototypique**).
 
 Voyons comment cela se passe avec un exemple concret.
 
@@ -109,9 +109,9 @@ Cependant cela aurait eu pour effet de redéfinir les attributs à nouveau, sans
 
 
 
-### Hériter d'un constructeur sans paramètres
+### Hériter d'un constructeur sans paramètres
 
-Notez que si les valeurs des propriétés du constructeur dont vous héritez ne proviennent pas de paramètres, vous n'avez nullement besoin de les specifier comme arguments additionnels dans l'appel de la fonction `call()`. Donc, par exemple, si vous avez quelque chose d'aussi simple que ceci :
+Notez que si les valeurs des propriétés du constructeur dont vous héritez ne proviennent pas de paramètres, vous n'avez nullement besoin de les specifier comme arguments additionnels dans l'appel de la fonction `call()`. Donc, par exemple, si vous avez quelque chose d'aussi simple que ceci :
 
 ```js
 function Brick() {
@@ -120,7 +120,7 @@ function Brick() {
 }
 ```
 
-Vous pouvez hériter des propriétés `width` et `height` en procédant comme ceci (Mais  également en suivant bien sûr les différentes étapes décrites ci dessous) :
+Vous pouvez hériter des propriétés `width` et `height` en procédant comme ceci (Mais également en suivant bien sûr les différentes étapes décrites ci dessous) :
 
 ```js
 function BlueGlassBrick() {
@@ -131,31 +131,31 @@ function BlueGlassBrick() {
 }
 ```
 
-Notez que nous n'avons spécifié que `this` au sein de `call()` — Aucun autre paramètre n'est requis puisque nous n'héritons ici d'aucune propriété provenant de la classe parente qui soit spécifiée via paramètres.
+Notez que nous n'avons spécifié que `this` au sein de `call()` — Aucun autre paramètre n'est requis puisque nous n'héritons ici d'aucune propriété provenant de la classe parente qui soit spécifiée via paramètres.
 
 ## Définir le prototype de Professeur() et son constructeur référent.
 
-Pour le moment tout va bien, mais nous avons un petit problème. Nous avons défini un  nouveau constructeur et ce dernier possède une propriété `prototype`, qui par défaut ne contient qu'une référence à la fonction constructrice elle même. En revanche il ne contient pas les méthodes de la propriété `prototype` du constructeur `Personne()`. Pour le constater, vous pouvez par exemple entrer `Professeur.prototype.constructor` dans la console JavaScript pour voir ce qu'il en est. Le nouveau constructeur n'a en aucun cas hérité de ces méthodes. Pour le constater, comparez les sorties de `Personne.prototype.saluer` et de `Professeur.prototype.saluer`
+Pour le moment tout va bien, mais nous avons un petit problème. Nous avons défini un nouveau constructeur et ce dernier possède une propriété `prototype`, qui par défaut ne contient qu'une référence à la fonction constructrice elle même. En revanche il ne contient pas les méthodes de la propriété `prototype` du constructeur `Personne()`. Pour le constater, vous pouvez par exemple entrer `Professeur.prototype.constructor` dans la console JavaScript pour voir ce qu'il en est. Le nouveau constructeur n'a en aucun cas hérité de ces méthodes. Pour le constater, comparez les sorties de `Personne.prototype.saluer` et de `Professeur.prototype.saluer`
 
-Notre classe `Professeur()` doit hériter des méthodes définies dans le prototype de `Personne()`. Aussi comment procéder pour obtenir ce résultat ?
+Notre classe `Professeur()` doit hériter des méthodes définies dans le prototype de `Personne()`. Aussi comment procéder pour obtenir ce résultat&nbsp;?
 
 Ajoutez la ligne suivante à la suite du bloc de code que nous venons d'ajouter :
 
     Professeur.prototype = Object.create(Personne.prototype);
 
-1.  Ici, notre ami [`create()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/create) vient nous aider à nouveau. Dans ce cas, on l'utilise afin de créer un nouvel objet que nous assignons à `Professeur.prototype`. Le nouvel objet possède `Personne.prototype` désormais comme son prototype et héritera ainsi, si et quand le besoin se fera sentir, de toutes les méthodes disponible sur `Personne.prototype`.
-2.  Nous avons également besoin de faire encore une chose avant de continuer. Après avoir ajouté la ligne précédente, le constructeur du prototype de `Professeur()` est désormais équivalent à celui de `Personne()`, parce que nous avons défini `Professeur.prototype` pour référencer un objet qui hérite ses propriétés de  `Personne.prototype` ! Essayez, après avoir sauvegardé votre code et rechargé la page, d'entrer `Professeur.prototype.constructor` dans la console pour vérifier.
-3.  Cela peut devenir problématique, autant le corriger dès maintenant. C'est possible via l'ajout de la ligne de code suivante à la fin :
+1.  Ici, notre ami [`create()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/create) vient nous aider à nouveau. Dans ce cas, on l'utilise afin de créer un nouvel objet que nous assignons à `Professeur.prototype`. Le nouvel objet possède `Personne.prototype` désormais comme son prototype et héritera ainsi, si et quand le besoin se fera sentir, de toutes les méthodes disponible sur `Personne.prototype`.
+2.  Nous avons également besoin de faire encore une chose avant de continuer. Après avoir ajouté la ligne précédente, le constructeur du prototype de `Professeur()` est désormais équivalent à celui de `Personne()`, parce que nous avons défini `Professeur.prototype` pour référencer un objet qui hérite ses propriétés de `Personne.prototype` ! Essayez, après avoir sauvegardé votre code et rechargé la page, d'entrer `Professeur.prototype.constructor` dans la console pour vérifier.
+3.  Cela peut devenir problématique, autant le corriger dès maintenant. C'est possible via l'ajout de la ligne de code suivante à la fin :
 
         Professeur.prototype.constructor = Professeur;
 
-4.  A présent, si vous sauvegardez et rafraichissez après avoir écrit `Professeur.prototype.constructor`, cela devrait retourner `Professeur()`, et en plus nous héritons maintenant de `Personne()` !
+4.  A présent, si vous sauvegardez et rafraichissez après avoir écrit `Professeur.prototype.constructor`, cela devrait retourner `Professeur()`, et en plus nous héritons maintenant de `Personne()`&nbsp;!
 
 ## Donner au prototype de Professeur() une nouvelle fonction saluer()
 
 Pour terminer notre code, nous devons définir une nouvelle fonction `saluer()` sur le constructeur de `Professeur()`.
 
-La façon la plus facile d'accomplir cela est de la définir sur le prototype de Professeur() — ajoutez ceci à la suite de votre code :
+La façon la plus facile d'accomplir cela est de la définir sur le prototype de Professeur() — ajoutez ceci à la suite de votre code :
 
     Professeur.prototype.saluer = function() {
       var prefix;
@@ -171,17 +171,17 @@ La façon la plus facile d'accomplir cela est de la définir sur le prototype de
       alert('Bonjour. Mon nom est ' + prefix + ' ' + this.nom_complet.nom + ', et j\'enseigne ' + this.matiere + '.');
     };
 
-Ceci affiche la salutation du professeur, qui utilise le titre de civilité approprié à son genre, au moyen d'une instruction conditionnelle.
+Ceci affiche la salutation du professeur, qui utilise le titre de civilité approprié à son genre, au moyen d'une instruction conditionnelle.
 
 
 
 ## Exécuter l'exemple
 
-Une fois tout le code saisi, essayez de créer une instance d'objet `Professeur()` en ajoutant à la fin de votre JavaScript (ou à l'endroit de votre choix) :
+Une fois tout le code saisi, essayez de créer une instance d'objet `Professeur()` en ajoutant à la fin de votre JavaScript (ou à l'endroit de votre choix) :
 
     var professeur1 = new Professeur('Cédric', 'Villani', 44, 'm', ['football', 'cuisine'], 'les mathématiques');
 
-Sauvegardez et actualisez, et essayez d'accéder aux propriétés et méthodes de votre nouvel objet `professeur1`, par exemple :
+Sauvegardez et actualisez, et essayez d'accéder aux propriétés et méthodes de votre nouvel objet `professeur1`, par exemple :
 
     professeur1.nom_complet.nom;
     professeur1.interets[0];
@@ -189,59 +189,59 @@ Sauvegardez et actualisez, et essayez d'accéder aux propriétés et méthodes d
     professeur1.matiere;
     professeur1.saluer();Ffa
 
-Tout cela devrait parfaitement fonctionner. Les instructions des lignes 1,2,3  et 6 accèdent à des membres hérités de la classe générique `Personne()` via son constructeur, tandis que la ligne 4 accède de façon plus spécifique à un membre qui n'est disponible que via le constructeur de la classe spécialisée `Professeur()`.
+Tout cela devrait parfaitement fonctionner. Les instructions des lignes 1,2,3 et 6 accèdent à des membres hérités de la classe générique `Personne()` via son constructeur, tandis que la ligne 4 accède de façon plus spécifique à un membre qui n'est disponible que via le constructeur de la classe spécialisée `Professeur()`.
 
-**Note**: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre [version finalisée](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html) (Ou regarder tourner [notre demo en ligne](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html)).
+**Note**: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre [version finalisée](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html) (Ou regarder tourner [notre demo en ligne](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html)).
 
-La méthode que nous avons détaillée ici n'est pas la seule permettant de mettre en place l'héritage de classes en JavaScript, mais elle fonctionne parfaitement et elle vous permet d'avoir une bonne idée de comment implémenter l'héritage en JavaScript.
+La méthode que nous avons détaillée ici n'est pas la seule permettant de mettre en place l'héritage de classes en JavaScript, mais elle fonctionne parfaitement et elle vous permet d'avoir une bonne idée de comment implémenter l'héritage en JavaScript.
 
-Vous pourriez également être intéressé par certaines des nouvelles fonctionnalités de {{glossary("ECMAScript")}} qui nous permettent de mettre en place l'héritage d'une façon beaucoup plus élégante en JavaScript (Voir [Classes](/fr/docs/Web/JavaScript/Reference/Classes)). Nous ne les avons pas développées ici parce qu'elles ne sont actuellement pas supportées par tous les navigateurs. Toutes les autres constructions dont nous avons discuté dans cette série d'articles sont supportées par IE9 et les versions moins récentes et il existe des méthodes qui prennent plus en  charge les navigateurs moins récents.
+Vous pourriez également être intéressé par certaines des nouvelles fonctionnalités de {{glossary("ECMAScript")}} qui nous permettent de mettre en place l'héritage d'une façon beaucoup plus élégante en JavaScript (Voir [Classes](/fr/docs/Web/JavaScript/Reference/Classes)). Nous ne les avons pas développées ici parce qu'elles ne sont actuellement pas supportées par tous les navigateurs. Toutes les autres constructions dont nous avons discuté dans cette série d'articles sont supportées par IE9 et les versions moins récentes et il existe des méthodes qui prennent plus en charge les navigateurs moins récents.
 
 Un moyen habituel est d'utiliser les librairies JavaScript — La plupart des options populaires ont une sélection de fonctionnalités disponibles pour réaliser l'héritage plus facilement et plus rapidement.
 
-[CoffeeScript](http://coffeescript.org/#classes) par exemple fournit les fonctionnalités `class`, `extends`, etc.
+[CoffeeScript](http://coffeescript.org/#classes) par exemple fournit les fonctionnalités `class`, `extends`, etc.
 
 ## Un exercice plus complexe.
 
-Dans notre [section sur la programmation orientée objet](/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters) nous avons également inclus  une classe `Etudiant` comme un concept qui hérite de toutes les fonctionnalités de la classe `Personne`, et qui a également une méthode `saluer()` differente de celle de `Personne` qui est beaucoup moins formelle que la méthode `saluer()` de `Professeur()`. Jetez un oeil à ce à quoi ressemble la méthode `saluer()` de la classe `Etudiant` dans cette section et essayez d'implémenter votre propre constructeur `Etudiant()` qui hérite de toutes les fonctionnalités de `Personne()` et la fonction `saluer()` différente.
+Dans notre [section sur la programmation orientée objet](/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters) nous avons également inclus une classe `Etudiant` comme un concept qui hérite de toutes les fonctionnalités de la classe `Personne`, et qui a également une méthode `saluer()` differente de celle de `Personne` qui est beaucoup moins formelle que la méthode `saluer()` de `Professeur()`. Jetez un oeil à ce à quoi ressemble la méthode `saluer()` de la classe `Etudiant` dans cette section et essayez d'implémenter votre propre constructeur `Etudiant()` qui hérite de toutes les fonctionnalités de `Personne()` et la fonction `saluer()` différente.
 
-**Note**: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre [version finalisée](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html) (Ou regarder tourner [notre demo en ligne](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html)).
+**Note**: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre [version finalisée](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html) (Ou regarder tourner [notre demo en ligne](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html)).
 
 ## Résumé sur les membres de l'Objet
 
 Pour résumer, vous avez de façon basique trois types de propriétés/méthodes à prendre en compte :
 
-1.  Celles définies au sein d'un constructeur et passées en paramètres aux instances de l'objet. Celles là ne sont pas difficiles à repérer — Dans votre propre code personnalisé, elles sont les membres définis en utilisant les lignes comme `this.x = x` ; Dans les codes préconstruits propres aux navigateurs, ils sont les membres seulement accessibles aux instances d'objet (usuellement créés en appelant un constructeur via l'utilisation du mot clé `new`, exemple : `var myInstance = new myConstructor()`).
-2.  Celles définies directement sur les constructeurs eux mêmes et accessibles uniquement sur les constructeurs. Celles là sont communément présentes uniquement dans les objets préconstruits des navigateurs et sont reconnus par le fait d'être directement chaînées sur un constructeur et non sur une instance. Par exemple, [`Object.keys()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys).
-3.  Celles définies sur un prototype de constructeur qui sont héritées par toutes les instances des classes d'objet. Celles là incluent n'importe quel membre défini sur un prototype de constructeur, exemple : `myConstructor.prototype.x()`.
+1.  Celles définies au sein d'un constructeur et passées en paramètres aux instances de l'objet. Celles là ne sont pas difficiles à repérer — Dans votre propre code personnalisé, elles sont les membres définis en utilisant les lignes comme `this.x = x`&nbsp;; Dans les codes préconstruits propres aux navigateurs, ils sont les membres seulement accessibles aux instances d'objet (usuellement créés en appelant un constructeur via l'utilisation du mot clé `new`, exemple : `var myInstance = new myConstructor()`).
+2.  Celles définies directement sur les constructeurs eux mêmes et accessibles uniquement sur les constructeurs. Celles là sont communément présentes uniquement dans les objets préconstruits des navigateurs et sont reconnus par le fait d'être directement chaînées sur un constructeur et non sur une instance. Par exemple, [`Object.keys()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys).
+3.  Celles définies sur un prototype de constructeur qui sont héritées par toutes les instances des classes d'objet. Celles là incluent n'importe quel membre défini sur un prototype de constructeur, exemple : `myConstructor.prototype.x()`.
 
 Si vous êtes encore dans la confusion par rapport aux différents types ne vous inquiétez pas c'est normal — vous êtes encore entrain d'apprendre et la familiarité apparaîtra avec la pratique.
 
-## Quand devez-vous utiliser  l'héritage en JavaScript?
+## Quand devez-vous utiliser l'héritage en JavaScript?
 
-Particulièrement après ce dernier article, vous pourriez penser "woa c'est compliqué". Bien, vous avez vu juste, prototypes et héritages représentent une partie des aspects les plus complexes de JavaScript, mais une bonne partie de la puissance et de la flexibilité de JavaScript vient de sa structure Objet et de l'héritage et il est vraiment très important de comprendre comment cela fonctionne.
+Particulièrement après ce dernier article, vous pourriez penser "woa c'est compliqué". Bien, vous avez vu juste, prototypes et héritages représentent une partie des aspects les plus complexes de JavaScript, mais une bonne partie de la puissance et de la flexibilité de JavaScript vient de sa structure Objet et de l'héritage et il est vraiment très important de comprendre comment cela fonctionne.
 
-D'une certaine manière, vous utilisez l'héritage à plein temps — Que vous utilisiez différentes fonctionnalités d'une WebAPI , ou une méthode/propriété définie par défaut  sur un objet prédéfini du navigateur que vous invoquez sur vos chaînes de caractères, tableaux etc., vous utilisez de façon implicite l'héritage.
+D'une certaine manière, vous utilisez l'héritage à plein temps — Que vous utilisiez différentes fonctionnalités d'une WebAPI , ou une méthode/propriété définie par défaut sur un objet prédéfini du navigateur que vous invoquez sur vos chaînes de caractères, tableaux etc., vous utilisez de façon implicite l'héritage.
 
-En termes d'utilisation de l'héritage dans votre propre code, vous ne l'utiliserez probablement pas si souvent et spécialement pour débuter avec, et dans les petits projets — C'est une perte de temps d'utiliser les objets et l'héritage par amour pour cette pratique quand vous n'en avez pas besoin. Mais à mesure que les bases de votre code s'élargissent vous trouverez cette façon de faire probablement très utile. Si vous trouvez utile et plus pratique de commencer en créant un certain nombre d'objets spécialisés partageant les mêmes fonctionnalités, alors créer un objet générique qui contiendra toutes les fonctionnalités communes dont les objets spécialisés hériteront vous apparaîtra être une pratique peut être plus confortable et efficace par la suite.
+En termes d'utilisation de l'héritage dans votre propre code, vous ne l'utiliserez probablement pas si souvent et spécialement pour débuter avec, et dans les petits projets — C'est une perte de temps d'utiliser les objets et l'héritage par amour pour cette pratique quand vous n'en avez pas besoin. Mais à mesure que les bases de votre code s'élargissent vous trouverez cette façon de faire probablement très utile. Si vous trouvez utile et plus pratique de commencer en créant un certain nombre d'objets spécialisés partageant les mêmes fonctionnalités, alors créer un objet générique qui contiendra toutes les fonctionnalités communes dont les objets spécialisés hériteront vous apparaîtra être une pratique peut être plus confortable et efficace par la suite.
 
-**Note**: A cause de la manière dont JavaScript fonctionne, avec la chaîne de prototype, etc., le partage de fonctionnalités entre objet est souvent appelée **délégation** — Les objets spécialisés délèguent cette fonctionnalité à l'objet de type générique. C'est certainement beaucoup plus précis que de l'appeler héritage, puisque la fonctionnalité "héritée" n'est pas copiée dans les objets qui "héritent". Au contraire, elle demeure dans l'objet générique.
+**Note**: A cause de la manière dont JavaScript fonctionne, avec la chaîne de prototype, etc., le partage de fonctionnalités entre objet est souvent appelée **délégation** — Les objets spécialisés délèguent cette fonctionnalité à l'objet de type générique. C'est certainement beaucoup plus précis que de l'appeler héritage, puisque la fonctionnalité "héritée" n'est pas copiée dans les objets qui "héritent". Au contraire, elle demeure dans l'objet générique.
 
-Lorsque vous utilisez l'héritage, il est conseillé de ne pas avoir trop de degrés d'héritage et de toujours garder minutieusement trace de l'endroit où vous définissez vos propriétés et méthodes. Il est possible de commencer à écrire un code qui modifie temporairement les prototypes des objets prédéfinis du navigateur mais vous ne devriez pas le faire à moins que n'ayiez une très bonne raison. Trop de degrés d'héritages peut conduire à une confusion sans fin et une peine sans fin quand vous essayez de déboguer un tel code.
+Lorsque vous utilisez l'héritage, il est conseillé de ne pas avoir trop de degrés d'héritage et de toujours garder minutieusement trace de l'endroit où vous définissez vos propriétés et méthodes. Il est possible de commencer à écrire un code qui modifie temporairement les prototypes des objets prédéfinis du navigateur mais vous ne devriez pas le faire à moins que n'ayiez une très bonne raison. Trop de degrés d'héritages peut conduire à une confusion sans fin et une peine sans fin quand vous essayez de déboguer un tel code.
 
-En définitive, les objets sont juste une autre forme de réutilisation de code comme les fonctions et les boucles avec leurs propres rôles et avantages. Si vous trouvez utile de créer un lot de variables et fonctions relatives et que vous voulez les retracer ensemble et les empaqueter de façon ordonnée, un objet est une bonne idée. Les objets sont également très utiles quand vous souhaitez passer une collection de données d'un endroit à un autre. Toutes ces choses peuvent être accomplies sans l'utilisation d'un constructeur ou de l'héritage. Si vous n'avez besoin que d'une seule instance, l'utilisation d'un simple objet littéral serait certainement un choix beaucoup plus judicieux et vous n'avez certainement pas besoin de l'héritage.
+En définitive, les objets sont juste une autre forme de réutilisation de code comme les fonctions et les boucles avec leurs propres rôles et avantages. Si vous trouvez utile de créer un lot de variables et fonctions relatives et que vous voulez les retracer ensemble et les empaqueter de façon ordonnée, un objet est une bonne idée. Les objets sont également très utiles quand vous souhaitez passer une collection de données d'un endroit à un autre. Toutes ces choses peuvent être accomplies sans l'utilisation d'un constructeur ou de l'héritage. Si vous n'avez besoin que d'une seule instance, l'utilisation d'un simple objet littéral serait certainement un choix beaucoup plus judicieux et vous n'avez certainement pas besoin de l'héritage.
 
 ## Résumé
 
-Cet article a couvert le reste du coeur de la théorie du JSOO et des syntaxes que nous pensons que vous devriez connaître maintenant. A cet stade vous devriez comprendre l'objet JavaScript et les bases de la POO, les prototypes et l'héritage par prototype, comment créer les classes (constructeurs) et les instances d'objet, ajouter des fonctionnalités aux classes, et créer des sous classes qui héritent d'autres classes.
+Cet article a couvert le reste du coeur de la théorie du JSOO et des syntaxes que nous pensons que vous devriez connaître maintenant. A cet stade vous devriez comprendre l'objet JavaScript et les bases de la POO, les prototypes et l'héritage par prototype, comment créer les classes (constructeurs) et les instances d'objet, ajouter des fonctionnalités aux classes, et créer des sous classes qui héritent d'autres classes.
 
-Dans le prochain article, nous jetterons un regard sur comment travailler avec le (JSON),  un format commun d'échange de données écrit en utilisant les objets JavaScript.
+Dans le prochain article, nous jetterons un regard sur comment travailler avec le (JSON),  un format commun d'échange de données écrit en utilisant les objets JavaScript.
 
 ## Voir aussi
 
 - [ObjectPlayground.com](http://www.objectplayground.com/) — Un site interactif d'appentissage très utile pour en savoir plus sur les Objets.
-- [Secrets of the JavaScript Ninja](https://www.amazon.com/gp/product/193398869X/), Chapitre 6 — Un bon livre sur les concepts et techniques avancées du JavaScript par John Resig et Bear Bibeault. Le chapitre 6 couvre très bien les divers aspects des prototypes et de l'héritage ; vous trouverez sûrement facilement une version imprimée ou une version en ligne.
-- [You Don't Know JS: this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes) — Une partie de l'excellente série de manuels sur le JavaScript de Kyle Simpson. Le chapitre 5 en particulier jette un regard beaucoup plus approfondi sur les prototypes que nous ne l'avons fait ici. Nous avons présenté ici une vue simplifiée dans cette série d'articles dédiée aux débutants tandis que Kyle est allé dans les détails les plus profonds et fournit une image beaucoup plus complexe et plus précise.
+- [Secrets of the JavaScript Ninja](https://www.amazon.com/gp/product/193398869X/), Chapitre 6 — Un bon livre sur les concepts et techniques avancées du JavaScript par John Resig et Bear Bibeault. Le chapitre 6 couvre très bien les divers aspects des prototypes et de l'héritage ; vous trouverez sûrement facilement une version imprimée ou une version en ligne.
+- [You Don't Know JS: this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes) — Une partie de l'excellente série de manuels sur le JavaScript de Kyle Simpson. Le chapitre 5 en particulier jette un regard beaucoup plus approfondi sur les prototypes que nous ne l'avons fait ici. Nous avons présenté ici une vue simplifiée dans cette série d'articles dédiée aux débutants tandis que Kyle est allé dans les détails les plus profonds et fournit une image beaucoup plus complexe et plus précise.
 
 {{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}
 
@@ -250,7 +250,7 @@ Dans le prochain article, nous jetterons un regard sur comment travailler avec l
 ## Dans ce module
 
 - [Les bases de l'Objet](/fr/docs/Learn/JavaScript/Objects/Basics)
-- [JavaScript  Orienté Objet pour débutants](/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS)
+- [JavaScript Orienté Objet pour débutants](/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS)
 - [Prototypes d'Objet](/fr/docs/Learn/JavaScript/Objects/Object_prototypes)
 - [L'héritage en JavaScript](/fr/docs/Learn/JavaScript/Objects/Inheritance)
 - [Travailler avec les données JSON](/fr/docs/Learn/JavaScript/Objects/JSON)
diff --git a/files/fr/learn/javascript/objects/index.md b/files/fr/learn/javascript/objects/index.md
index ae25197ce7..4eca92f7f8 100644
--- a/files/fr/learn/javascript/objects/index.md
+++ b/files/fr/learn/javascript/objects/index.md
@@ -14,37 +14,37 @@ translation_of: Learn/JavaScript/Objects
 ---
 {{JsSidebar}}{{PreviousNext("Apprendre/JavaScript/Building_blocks", "Learn/JavaScript/Objects/Basics")}}
 
-En JavaScript, la plupart des choses sont des objets, des éléments du cœur de JavaScript, comme les chaînes de caractères et les tableaux, aux interfaces de programmation (APIs) des navigateurs construites sur la base de JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions liées et des variables au sein de paquets efficaces, et se comportant comme des conteneurs de données. Il est important de comprendre la nature orientée objet du JavaScript si vous souhaitez aller loin dans votre connaissance du langage, aussi, avons-nous fourni ce module afin de vous aider. Ici, nous enseignons la théorie de l’objet et sa syntaxe en détail, ensuite, ce sera à vous de voir comment vous souhaitez créer vos propres objets.
+En JavaScript, la plupart des choses sont des objets, des éléments du cœur de JavaScript, comme les chaînes de caractères et les tableaux, aux interfaces de programmation (APIs) des navigateurs construites sur la base de JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions liées et des variables au sein de paquets efficaces, et se comportant comme des conteneurs de données. Il est important de comprendre la nature orientée objet du JavaScript si vous souhaitez aller loin dans votre connaissance du langage, aussi, avons-nous fourni ce module afin de vous aider. Ici, nous enseignons la théorie de l’objet et sa syntaxe en détail, ensuite, ce sera à vous de voir comment vous souhaitez créer vos propres objets.
 
 ## Prérequis
 
-Avant de commencer ce module, vous devriez avoir quelques familiarités avec le HTML et le CSS. Il serait raisonnable de travailler sur les modules [Introduction au HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML) et [Introduction au CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS) avant de commencer avec le JavaScript.
+Avant de commencer ce module, vous devriez avoir quelques familiarités avec le HTML et le CSS. Il serait raisonnable de travailler sur les modules [Introduction au HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML) et [Introduction au CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS) avant de commencer avec le JavaScript.
 
 Vous devriez également être familiarisé avec les bases du JavaScript avant de poursuivre en détails avec les objets JavaScript. Avant de commencer ce module, travaillez sur [Premiers pas avec JavaScript](/fr/docs/Learn/JavaScript/First_steps) et [Les blocs de construction en JavaScript](/fr/Apprendre/JavaScript/Building_blocks).
 
-> **Note :** Si vous travaillez sur un ordinateur, une tablette ou un autre appareil où vous n’avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer les (la plupart des) exemples de code grâce à un programme en ligne comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/).
+> **Note :** Si vous travaillez sur un ordinateur, une tablette ou un autre appareil où vous n’avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer les (la plupart des) exemples de code grâce à un programme en ligne comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/).
 
 ## Guides
 
 - [Les bases de JavaScript orienté objet](/fr/docs/Learn/JavaScript/Objects/Basics)
-  - : Dans le premier article concernant les objets JavaScript, nous découvrirons la syntaxe fondamentale d’un objet JavaScript, et nous revisiterons certaines fonctionnalités du JavaScript que nous avions vues précédemment dans le cours, en insistant sur le fait que bon nombre d'éléments précedemment abordés sont en fait des objets.
+  - : Dans le premier article concernant les objets JavaScript, nous découvrirons la syntaxe fondamentale d’un objet JavaScript, et nous revisiterons certaines fonctionnalités du JavaScript que nous avions vues précédemment dans le cours, en insistant sur le fait que bon nombre d'éléments précedemment abordés sont en fait des objets.
 
 <!---->
 
 - [JavaScript orienté objet pour les débutants](/fr/docs/Learn/JavaScript/Objects/JS_orient%C3%A9-objet)
   - : Après avoir vu les notions de base, nous nous pencherons sur le JavaScript orienté objet (JSOO) — cet article présente une vue basique de la théorie de la programmation orientée objet (POO), et explore ensuite comment le JavaScript émule les classes d’objet via les fonctions des constructeurs et comment créer des instances d’objet.
 - [Objets prototypes](/fr/docs/Learn/JavaScript/Objects/Prototypes_Objet)
-  - : Les prototypes sont des mécanismes par lesquels les objets JavaScript héritent les fonctionnalités d’un autre objet, et ils fonctionnent différemment des mécanismes d’héritage des langages classiques de programmation orientée objet. Dans cet article, nous explorons cette différence, expliquant comment les chaînes de prototypes fonctionnent et jetant un regard sur comment la propriété prototype peut être utilisée pour ajouter des méthodes aux constructeurs existants.
+  - : Les prototypes sont des mécanismes par lesquels les objets JavaScript héritent les fonctionnalités d’un autre objet, et ils fonctionnent différemment des mécanismes d’héritage des langages classiques de programmation orientée objet. Dans cet article, nous explorons cette différence, expliquant comment les chaînes de prototypes fonctionnent et jetant un regard sur comment la propriété prototype peut être utilisée pour ajouter des méthodes aux constructeurs existants.
 - [L’héritage au sein de JavaScript](/fr/docs/Learn/JavaScript/Objects/Heritage)
-  - : Avec la plupart des redoutables détails du JSOO maintenant expliqués, cet article montre comment créer les classes (constructeurs) d’objet “enfant” qui héritent des fonctionnalités de leur classes “parents”. De plus, nous présentons certains conseils sur où et comment utiliser le JSOO.
+  - : Avec la plupart des redoutables détails du JSOO maintenant expliqués, cet article montre comment créer les classes (constructeurs) d’objet “enfant” qui héritent des fonctionnalités de leur classes “parents”. De plus, nous présentons certains conseils sur où et comment utiliser le JSOO.
 - [Manipuler des données JSON](/fr/docs/Learn/JavaScript/Objects/JSON)
   - : JavaScript Object Notation (JSON) est un format standard pour la représentation de données structurées comme les objets JavaScript, qui est communément utilisé pour représenter et transmettre les données sur les sites web (ex. : Envoyer certaines données du serveur au client, afin d’être affichées sur une page web). Vous le rencontrerez assez souvent. Aussi, dans cet article, nous vous donnons tout ce dont vous avez besoin pour travailler avec le format JSON utilisant le JavaScript, incluant l’accès aux éléments des données dans un objet JSON et l’écriture de votre propre JSON.
 - [Pratiques sur la construction d’objet](/fr/docs/Learn/JavaScript/Objects/Object_building_practice)
-  - : Dans l’article précédent nous avons fait le tour de l’essentiel de la théorie de l’objet JavaScript et les détails de sa syntaxe, vous donnant ainsi une solide base sur laquelle débuter. Dans cet article nous plongeons dans un exercice, vous donnant plus de pratique dans la construction d’objets JavaScript personnalisés, qui produisent quelque chose d’amusant et de plus coloré — quelques balles colorées et bondissantes.
+  - : Dans l’article précédent nous avons fait le tour de l’essentiel de la théorie de l’objet JavaScript et les détails de sa syntaxe, vous donnant ainsi une solide base sur laquelle débuter. Dans cet article nous plongeons dans un exercice, vous donnant plus de pratique dans la construction d’objets JavaScript personnalisés, qui produisent quelque chose d’amusant et de plus coloré — quelques balles colorées et bondissantes.
 
 ## Auto-évaluation
 
-- [Ajoutez des fonctionnalités  à notre  démo des ballons bondissants](/fr/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features)
+- [Ajoutez des fonctionnalitée d notre démo des ballons bondissants](/fr/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features)
   - : Dans cette évaluation, vous devrez utiliser la démo des balles bondissantes de l’article précédent comme un point de départ et y ajouter quelques nouvelles et intéressantes fonctionnalités.
 
 {{PreviousNext("Apprendre/JavaScript/Building_blocks", "JavaScript/Guide")}}
diff --git a/files/fr/learn/javascript/objects/json/index.md b/files/fr/learn/javascript/objects/json/index.md
index 78b6610785..5540825f14 100644
--- a/files/fr/learn/javascript/objects/json/index.md
+++ b/files/fr/learn/javascript/objects/json/index.md
@@ -14,7 +14,7 @@ translation_of: Learn/JavaScript/Objects/JSON
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
 
-Le JavaScript Object Notation (JSON) est un format standard utilisé pour représenter des données structurées de façon semblable aux objets Javascript. Il est habituellement utilisé pour structurer et transmettre des données sur des sites web (par exemple, envoyer des données depuis un serveur vers un client afin de les afficher sur une page web ou vice versa). Comme cette notation est extrêmement courante, cet article a pour but de vous donner les connaissances nécessaires pour travailler avec JSON en JavaScript, vous apprendre à analyser la syntaxe du JSON afin d'en extraire des données et écrire vos propres objets JSON.
+Le JavaScript Object Notation (JSON) est un format standard utilisé pour représenter des données structurées de façon semblable aux objets Javascript. Il est habituellement utilisé pour structurer et transmettre des données sur des sites web (par exemple, envoyer des données depuis un serveur vers un client afin de les afficher sur une page web ou vice versa). Comme cette notation est extrêmement courante, cet article a pour but de vous donner les connaissances nécessaires pour travailler avec JSON en JavaScript, vous apprendre à analyser la syntaxe du JSON afin d'en extraire des données et écrire vos propres objets JSON.
 
 <table class="standard-table">
   <tbody>
@@ -43,59 +43,59 @@ Le JavaScript Object Notation (JSON) est un format standard utilisé pour repré
 
 ## Plus sérieusement, qu'est ce que le JSON ?
 
-{{glossary("JSON")}} est un format de données semblable à la syntaxe des objets JavaScript, qui a été popularisé par [Douglas Crockford](https://en.wikipedia.org/wiki/Douglas_Crockford). Malgré sa syntaxe très similaire à celle des objets littéraux JavaScript, JSON peut être utilisé indépendamment de ce langage et ainsi, de nombreux autres langages de programmation disposent de fonctionnalités permettant d'analyser la syntaxe du JSON et d'en générer.
+{{glossary("JSON")}} est un format de données semblable à la syntaxe des objets JavaScript, qui a été popularisé par [Douglas Crockford](https://en.wikipedia.org/wiki/Douglas_Crockford). Malgré sa syntaxe très similaire à celle des objets littéraux JavaScript, JSON peut être utilisé indépendamment de ce langage et ainsi, de nombreux autres langages de programmation disposent de fonctionnalités permettant d'analyser la syntaxe du JSON et d'en générer.
 
-Le JSON se présente sous la forme  d'une chaîne de caractères —utile lorsque vous souhaitez transmettre les données sur un réseau. Il a donc besoin d'être converti en un objet JavaScript natif lorsque vous souhaitez accéder aux données. Ce n'est pas vraiment un souci puisque le JavaScript fournit un objet global [JSON](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON) disposant des méthodes pour assurer la conversion entre les deux.
+Le JSON se présente sous la forme d'une chaîne de caractères —utile lorsque vous souhaitez transmettre les données sur un réseau. Il a donc besoin d'être converti en un objet JavaScript natif lorsque vous souhaitez accéder aux données. Ce n'est pas vraiment un souci puisque le JavaScript fournit un objet global [JSON](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON) disposant des méthodes pour assurer la conversion entre les deux.
 
-> **Note :** Convertir une chaîne de caractères en un objet natif se nomme **analyse syntaxique (parsage)** tandis que le contraire porte le nom  de la **linéarisation (stringification)**.
+> **Note :** Convertir une chaîne de caractères en un objet natif se nomme **analyse syntaxique (parsage)** tandis que le contraire porte le nom de la **linéarisation (stringification)**.
 
 Un objet JSON peut être stocké dans son propre fichier qui se présente simplement sous la forme d'un fichier texte avec l'extension `.json` et le {{glossary("MIME type")}} `application/json`.
 
 ### Structure du JSON
 
-Nous disions tout à l'heure qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal et c'est généralement le cas. Un objet JSON accepte comme valeur les mêmes types de données de base que tout autre objet Javascript — chaînes de caractères, nombres, tableaux, booléens et tout autre objet littéral. Cela vous permet de hiérarchiser vos données comme ceci :
+Nous disions tout à l'heure qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal et c'est généralement le cas. Un objet JSON accepte comme valeur les mêmes types de données de base que tout autre objet Javascript — chaînes de caractères, nombres, tableaux, booléens et tout autre objet littéral. Cela vous permet de hiérarchiser vos données comme ceci :
 
 ```json
 {
-  "squadName": "Super hero squad",
-  "homeTown": "Metro City",
-  "formed": 2016,
-  "secretBase": "Super tower",
+  "squadName": "Super hero squad",
+  "homeTown": "Metro City",
+  "formed": 2016,
+  "secretBase": "Super tower",
   "active": true,
-  "members": [
-    {
-      "name": "Molecule Man",
-      "age": 29,
-      "secretIdentity": "Dan Jukes",
-      "powers": [
-        "Radiation resistance",
-        "Turning tiny",
-        "Radiation blast"
-      ]
-    },
-    {
-      "name": "Madame Uppercut",
-      "age": 39,
-      "secretIdentity": "Jane Wilson",
-      "powers": [
-        "Million tonne punch",
-        "Damage resistance",
-        "Superhuman reflexes"
-      ]
-    },
-    {
-      "name": "Eternal Flame",
-      "age": 1000000,
-      "secretIdentity": "Unknown",
-      "powers": [
-        "Immortality",
-        "Heat Immunity",
-        "Inferno",
-        "Teleportation",
-        "Interdimensional travel"
-      ]
-    }
-  ]
+  "members": [
+    {
+      "name": "Molecule Man",
+      "age": 29,
+      "secretIdentity": "Dan Jukes",
+      "powers": [
+        "Radiation resistance",
+        "Turning tiny",
+        "Radiation blast"
+      ]
+    },
+    {
+      "name": "Madame Uppercut",
+      "age": 39,
+      "secretIdentity": "Jane Wilson",
+      "powers": [
+        "Million tonne punch",
+        "Damage resistance",
+        "Superhuman reflexes"
+      ]
+    },
+    {
+      "name": "Eternal Flame",
+      "age": 1000000,
+      "secretIdentity": "Unknown",
+      "powers": [
+        "Immortality",
+        "Heat Immunity",
+        "Inferno",
+        "Teleportation",
+        "Interdimensional travel"
+      ]
+    }
+  ]
 }
 ```
 
@@ -106,16 +106,16 @@ superHeroes.hometown
 superHeroes['active']
 ```
 
-Pour accéder aux données plus profondes de la hiérarchie, vous n'avez qu'à enchaîner à la fois les noms des propriétés et les indexes des tableaux. Par exemple, l'expression suivante pointe vers le troisième superpouvoir du second super héros présent dans la liste :
+Pour accéder aux données plus profondes de la hiérarchie, vous n'avez qu'à enchaîner à la fois les noms des propriétés et les indexes des tableaux. Par exemple, l'expression suivante pointe vers le troisième superpouvoir du second super héros présent dans la liste&nbsp;:
 
 ```js
 superHeroes['members'][1]['powers'][2]
 ```
 
 1.  D'abord, nous partons de la variable — `superHeroes`
-2.  À l'intérieur de laquelle nous désirons accéder à la propriété `members`, donc, nous tapons `["members"]`.
+2.  À l'intérieur de laquelle nous désirons accéder à la propriété `members`, donc, nous tapons `["members"]`.
 3.  `members` contient un tableau renfermant des objets. Nous désirons accéder au second de ces objets, donc nous utilisons `[1]`.
-4.  À l'intérieur de cet objet, nous souhaitons accéder à la propriété `powers`, donc, nous utilisons `["powers"]`.
+4.  À l'intérieur de cet objet, nous souhaitons accéder à la propriété `powers`, donc, nous utilisons `["powers"]`.
 5.  Enfin, à l'intérieur de cette propriété `powers` nous trouvons un nouveau tableau qui contient les super pouvoirs de ce héros. Nous désirons obtenir le troisième, donc nous tapons `[2]`.
 
 > **Note :** L'objet JSON vu ci-dessus est disponible au sein d'une variable dans notre exemple [JSONTest.html](http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html)). Essayez de le charger et d'accéder aux données en utilisant la console Javascript de votre navigateur.
@@ -137,15 +137,15 @@ Un peu plus haut, nous avons dit qu'un objet JSON n'était ni plus ni moins qu'u
     ]
   },
   {
-    "name": "Madame Uppercut",
-    "age": 39,
-    "secretIdentity": "Jane Wilson",
-    "powers": [
-      "Million tonne punch",
-      "Damage resistance",
-      "Superhuman reflexes"
-    ]
-  }
+    "name": "Madame Uppercut",
+    "age": 39,
+    "secretIdentity": "Jane Wilson",
+    "powers": [
+      "Million tonne punch",
+      "Damage resistance",
+      "Superhuman reflexes"
+    ]
+  }
 ]
 ```
 
@@ -155,9 +155,9 @@ Le code ci dessus est une notation JSON parfaitement valide. Vous n'aurez qu'à
 
 - Un objet JSON est uniquement un format de données — il ne contient que des propriétés mais pas de méthodes.
 - La notation JSON nécessite l'usage des guillemets pour être valide. Il est obligatoire d'utiliser des guillemets et non les apostrophes autour des chaînes de caractères et des noms de propriétés.
-- Une simple virgule ou un double point mal placé peut rendre votre fichier JSON invalide et non fonctionnel. Soyez très attentif aux données que vous utilisez (bien que le JSON généré automatiquement par un programme sera moins enclin à contenir des erreurs, à partir du moment où le programme est codé correctement). Vous pouvez utiliser une application comme [JSONLint](http://jsonlint.com/) pour valider votre code JSON.
-- Dans l'absolu, le JSON peut prendre la forme de n'importe quel type de données qui serait valide pour être contenu dans du JSON et non juste des tableaux ou des objets. Ainsi, par exemple, une simple chaîne de caractères ou un nombre serait un objet JSON valide.
-- Contrairement au JavaScript dans lequel les propriétés (_keys_) non entourées de guillemets peuvent être utilisées, en JSON, seules les chaînes de caractères entourées de guillemets peuvent être utilisées en tant que propriétés.
+- Une simple virgule ou un double point mal placé peut rendre votre fichier JSON invalide et non fonctionnel. Soyez très attentif aux données que vous utilisez (bien que le JSON généré automatiquement par un programme sera moins enclin à contenir des erreurs, à partir du moment où le programme est codé correctement). Vous pouvez utiliser une application comme [JSONLint](http://jsonlint.com/) pour valider votre code JSON.
+- Dans l'absolu, le JSON peut prendre la forme de n'importe quel type de données qui serait valide pour être contenu dans du JSON et non juste des tableaux ou des objets. Ainsi, par exemple, une simple chaîne de caractères ou un nombre serait un objet JSON valide.
+- Contrairement au JavaScript dans lequel les propriétés (_keys_) non entourées de guillemets peuvent être utilisées, en JSON, seules les chaînes de caractères entourées de guillemets peuvent être utilisées en tant que propriétés.
 
 ## Activité : Manipuler le JSON au travers d'un exemple
 
@@ -165,7 +165,7 @@ Allez ! Un petit exemple pour voir comment nous pouvons nous servir de données
 
 ### Lançons nous
 
-Pour commencer, faites une copie locale de nos fichiers [heroes.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html) et [style.css](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css). Le dernier contient simplement quelques instructions CSS pour la mise en forme de notre page alors que le premier n'est ni plus ni moins qu'un squelette HTML de base :
+Pour commencer, faites une copie locale de nos fichiers [heroes.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html) et [style.css](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css). Le dernier contient simplement quelques instructions CSS pour la mise en forme de notre page alors que le premier n'est ni plus ni moins qu'un squelette HTML de base :
 
 ```html
 <header>
@@ -175,14 +175,14 @@ Pour commencer, faites une copie locale de nos fichiers [heroes.html](https://gi
 </section>
 ```
 
-Nous trouvons également un élément {{HTMLElement("script")}} dans lequel nous écrirons le code Javascript de cet exercice. Pour le moment, il ne contient que deux lignes destinées à récuperer les éléments {{HTMLElement("header")}} et {{HTMLElement("section")}} pour les stocker dans des variables :
+Nous trouvons également un élément {{HTMLElement("script")}} dans lequel nous écrirons le code Javascript de cet exercice. Pour le moment, il ne contient que deux lignes destinées à récuperer les éléments {{HTMLElement("header")}} et {{HTMLElement("section")}} pour les stocker dans des variables :
 
 ```js
 var header = document.querySelector('header');
 var section = document.querySelector('section');
 ```
 
-Nos données JSON sont disponibles sur notre GitHub ici : <https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json>.
+Nos données JSON sont disponibles sur notre GitHub ici : <https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json>.
 
 Nous souhaitons les récupérer et, après quelques manipulations du DOM, les afficher comme ceci :
 
@@ -190,7 +190,7 @@ Nous souhaitons les récupérer et, après quelques manipulations du DOM, les af
 
 ### Chargeons notre JSON
 
-Pour charger nos données JSON, nous allons utiliser l'API {{domxref("XMLHttpRequest")}} (qu'on appelle plus couramment **XHR**). Il s'agit d'un objet JavaScript extrêmement utile qui nous permet de construire une requête afin d'interroger un serveur pour obtenir des ressources diverses (images, texte, JSON, ou n'importe quel extrait HTML) le tout en Javascript. En d'autres termes, cela nous permet de mettre à jour de petites sections de contenu sans avoir à recharger notre page toute entière. Ceci conduit à des pages web plus réactives. Mais même si le sujet est très tentant, il dépasse largement l'objet de cet article pour être expliqué plus en détails.
+Pour charger nos données JSON, nous allons utiliser l'API {{domxref("XMLHttpRequest")}} (qu'on appelle plus couramment **XHR**). Il s'agit d'un objet JavaScript extrêmement utile qui nous permet de construire une requête afin d'interroger un serveur pour obtenir des ressources diverses (images, texte, JSON, ou n'importe quel extrait HTML) le tout en Javascript. En d'autres termes, cela nous permet de mettre à jour de petites sections de contenu sans avoir à recharger notre page toute entière. Ceci conduit à des pages web plus réactives. Mais même si le sujet est très tentant, il dépasse largement l'objet de cet article pour être expliqué plus en détails.
 
 1.  Donc, pour commencer, nous allons charger l'URL du fichier JSON que nous voulons récupérer dans une variable. Aussi, ajouter la ligne suivante à votre code Javascript :
 
@@ -198,7 +198,7 @@ Pour charger nos données JSON, nous allons utiliser l'API {{domxref("XMLHttpReq
     var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
     ```
 
-2.  Afin de créer une requête, nous avons besoin d'instancier un nouvel objet `XMLHttpRequest` à partir de son constructeur en utilisant le mot clé new. Ajouter la ligne suivante à votre script :
+2.  Afin de créer une requête, nous avons besoin d'instancier un nouvel objet `XMLHttpRequest` à partir de son constructeur en utilisant le mot clé new. Ajouter la ligne suivante à votre script :
 
     ```js
     var request = new XMLHttpRequest();
@@ -210,12 +210,12 @@ Pour charger nos données JSON, nous allons utiliser l'API {{domxref("XMLHttpReq
     request.open('GET', requestURL);
     ```
 
-    Cette méthode prend au moins deux paramètres — il y a d'autres paramètres optionnels disponibles.  Deux suffiront pour notre exemple :
+    Cette méthode prend au moins deux paramètres — il y a d'autres paramètres optionnels disponibles.  Deux suffiront pour notre exemple :
 
-    - La méthode HTTP à utiliser sur le réseau pour notre requête. Dans notre cas, la méthode [`GET`](/fr/docs/Web/HTTP/Methods/GET) est appropriée dans la mesure où nous voulons simplement récupérer quelques données.
+    - La méthode HTTP à utiliser sur le réseau pour notre requête. Dans notre cas, la méthode [`GET`](/fr/docs/Web/HTTP/Methods/GET) est appropriée dans la mesure où nous voulons simplement récupérer quelques données.
     - L'URL où adresser notre requête — il s'agit de l'URL du fichier JSON dont nous parlions tout à l'heure.
 
-4.  Ensuite, ajoutez les deux lignes suivantes — ici, nous attribuons la valeur `'json'` à [`responseType`](/fr/docs/Web/API/XMLHttpRequest/responseType), signalant ainsi au serveur que nous attendons une réponse au format JSON. Puis, nous envoyons notre requête à l'aide de la méthode [`send()`](/fr/docs/Web/API/XMLHttpRequest/send) :
+4.  Ensuite, ajoutez les deux lignes suivantes — ici, nous attribuons la valeur `'json'` à [`responseType`](/fr/docs/Web/API/XMLHttpRequest/responseType), signalant ainsi au serveur que nous attendons une réponse au format JSON. Puis, nous envoyons notre requête à l'aide de la méthode [`send()`](/fr/docs/Web/API/XMLHttpRequest/send)&nbsp;:
 
     ```js
     request.responseType = 'json';
@@ -232,13 +232,13 @@ Pour charger nos données JSON, nous allons utiliser l'API {{domxref("XMLHttpReq
     }
     ```
 
-Ici, nous stockons la réponse à notre requête (disponible au travers de la propriété [`response`](/fr/docs/Web/API/XMLHttpRequest/response)) dans la variable `superHeroes` ; cette variable contiendra désormais l'objet JavaScript basé sur le JSON ! Nous passerons ensuite cet objet en paramètre à deux fonctions — la première remplira le <`header>` avec les données correspondantes tandis que la seconde créera une carte d'identité pour chaque héros de l'équipe et l'ajoutera dans la `<section>`.
+Ici, nous stockons la réponse à notre requête (disponible au travers de la propriété [`response`](/fr/docs/Web/API/XMLHttpRequest/response)) dans la variable `superHeroes`&nbsp;; cette variable contiendra désormais l'objet JavaScript basé sur le JSON ! Nous passerons ensuite cet objet en paramètre à deux fonctions — la première remplira le <`header>` avec les données correspondantes tandis que la seconde créera une carte d'identité pour chaque héros de l'équipe et l'ajoutera dans la `<section>`.
 
-Nous avons encapsulé ce code dans un gestionnaire d'évènements qui s'exécutera quand l'évènement load sera déclenché sur l'objet request (voir [`onload`](/fr/docs/Web/API/XMLHttpRequestEventTarget/onload)) — simplement parce que l'évènement load est déclenché quand une réponse a été renvoyée avec succès ; en procédant de la sorte, nous serons certains que la propriété `request.response` sera disponible au moment où nous essayerons d'en faire quelque chose.
+Nous avons encapsulé ce code dans un gestionnaire d'évènements qui s'exécutera quand l'évènement load sera déclenché sur l'objet request (voir [`onload`](/fr/docs/Web/API/XMLHttpRequestEventTarget/onload)) — simplement parce que l'évènement load est déclenché quand une réponse a été renvoyée avec succès ; en procédant de la sorte, nous serons certains que la propriété `request.response` sera disponible au moment où nous essayerons d'en faire quelque chose.
 
 ### Remplissage de l'en-tête
 
-Maintenant que nous avons récupéré et converti en objet JavaScript nos données JSON, il est temps d'en faire bon usage : implémentons donc les deux fonctions évoquées ci-dessus. Avant tout, ajoutons les lignes suivantes en dessous de notre code :
+Maintenant que nous avons récupéré et converti en objet JavaScript nos données JSON, il est temps d'en faire bon usage : implémentons donc les deux fonctions évoquées ci-dessus. Avant tout, ajoutons les lignes suivantes en dessous de notre code :
 
 ```js
 function populateHeader(jsonObj) {
@@ -252,11 +252,11 @@ function populateHeader(jsonObj) {
 }
 ```
 
-Nous avons appelé le paramètre de cette fonction `jsonObj`  afin de garder en tête que cet objet JavaScript provient du JSON. Ici, nous créons tout d'abord un élément {{HTMLElement("h1")}} à l'aide de [`createElement()`](/fr/docs/Web/API/Document/createElement), nous fixons son [`textContent`](/fr/docs/Web/API/Node/textContent) à la valeur de la propriété `squadName` de l'objet, puis nous l'ajoutons à l'en-tête en utilisant [`appendChild()`](/fr/docs/Web/API/Node/appendChild). Ensuite, nous faisons quelque chose de relativement similaire avec un élément paragraphe : nous le créons, fixons son contenu et l'ajoutons à l'en-tête. La seule différence est que pour son contenu, nous avons concaténé la chaîne de caractère `homeTown` et la propriété `formed` de l'objet.
+Nous avons appelé le paramètre de cette fonction `jsonObj`  afin de garder en tête que cet objet JavaScript provient du JSON. Ici, nous créons tout d'abord un élément {{HTMLElement("h1")}} à l'aide de [`createElement()`](/fr/docs/Web/API/Document/createElement), nous fixons son [`textContent`](/fr/docs/Web/API/Node/textContent) à la valeur de la propriété `squadName` de l'objet, puis nous l'ajoutons à l'en-tête en utilisant [`appendChild()`](/fr/docs/Web/API/Node/appendChild). Ensuite, nous faisons quelque chose de relativement similaire avec un élément paragraphe : nous le créons, fixons son contenu et l'ajoutons à l'en-tête. La seule différence est que pour son contenu, nous avons concaténé la chaîne de caractère `homeTown` et la propriété `formed` de l'objet.
 
 ### Création des fiches des héros
 
-Maintenant, ajoutons la fonction suivante qui crée et affiche les fiches de nos super-héros en dessous de notre code :
+Maintenant, ajoutons la fonction suivante qui crée et affiche les fiches de nos super-héros en dessous de notre code&nbsp;:
 
 ```js
 function showHeroes(jsonObj) {
@@ -298,7 +298,7 @@ Pour commencer, on stocke la propriété `members` de l'objet JavaScript dans un
 Maintenant, on utilise une [boucle for](/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code) pour parcourir chaque object du tableau. Pour chaque cas, il faut :
 
 1.  Créer plusieurs nouveaux éléments : un `<article>`, un `<h2>`, trois `<p>`s, et un `<ul>`.
-2.  Mettre le `name` du héros actuel dans le `<h2>`.
+2.  Mettre le `name` du héros actuel dans le `<h2>`.
 3.  Remplir les trois paragraphes avec leur `secretIdentity`, leur `age`, et une ligne nommée "Superpowers:" pour présenter la liste des super-pouvoirs.
 4.  Stocker la propriété `powers` dans une nouvelle variable nommée `superPowers` contenant un tableau listant les super-pouvoirs du héros actuel.
 5.  Utiliser une autre boucle `for` pour parcourir les super-pouvoirs du héros actuel — créer pour chacun d'entre eux un élément `<li>`, y placer le super-pouvoir et placer le `listItem` dans l'élément `<ul>` (`myList`) en utilisant `appendChild()`.
@@ -306,7 +306,7 @@ Maintenant, on utilise une [boucle for](/fr/docs/Apprendre/JavaScript/Building_b
 
 > **Note :** Si vous ne parvenez pas à faire fonctionner l'exemple, consultez notre code source [heroes-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html) (ou regardez-le [en action](http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html).)
 
-> **Note :** Si vous comprenez difficilement la notation avec un point/une accolade utilisée pour accéder au JSON, ouvrez le fichier [superheroes.json](http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json) dans un nouvel onglet ou dans votre éditeur de texte et consultez-le pendant la lecture de notre code Javascript. Vous pouvez également vous reporter à notre article [Les bases du JavaScript orienté objet](/fr/docs/Learn/JavaScript/Objects/Basics) pour obtenir plus de détails sur la notation avec un point et avec une accolade.
+> **Note :** Si vous comprenez difficilement la notation avec un point/une accolade utilisée pour accéder au JSON, ouvrez le fichier [superheroes.json](http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json) dans un nouvel onglet ou dans votre éditeur de texte et consultez-le pendant la lecture de notre code Javascript. Vous pouvez également vous reporter à notre article [Les bases du JavaScript orienté objet](/fr/docs/Learn/JavaScript/Objects/Basics) pour obtenir plus de détails sur la notation avec un point et avec une accolade.
 
 ## Conversion entre objets et textes
 
@@ -316,12 +316,12 @@ Dans l'exemple ci-dessus, accéder au JSON est simple, il suffit de définir la
 request.responseType = 'json';
 ```
 
-Mais on n'a pas toujours cette chance — il est possible de recevoir la réponse JSON sous la forme d'une chaîne de caractères et il faut alors la convertir en objet. À l'inverse, lorsqu'on veut envoyer un objet JavaScript à travers le réseau il faut au préalable le convertir en JSON (une chaîne de caractères). Heureusement, ces deux problèmes sont tellement communs dans le développement web qu'un objet [JSON](/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON) interne a été ajouté aux navigateurs depuis longtemps, contenant les deux méthodes suivantes :
+Mais on n'a pas toujours cette chance — il est possible de recevoir la réponse JSON sous la forme d'une chaîne de caractères et il faut alors la convertir en objet. À l'inverse, lorsqu'on veut envoyer un objet JavaScript à travers le réseau il faut au préalable le convertir en JSON (une chaîne de caractères). Heureusement, ces deux problèmes sont tellement communs dans le développement web qu'un objet [JSON](/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON) interne a été ajouté aux navigateurs depuis longtemps, contenant les deux méthodes suivantes :
 
-- [`parse()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) qui accepte un objet JSON sous la forme d'une chaîne de caractères en paramètre et renvoie l'objet JavaScript correspondant.
-- [`stringify()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) qui accepte un objet JavaScript  en paramètre et renvoie son équivalent sous la forme d'une chaîne de caractères JSON.
+- [`parse()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) qui accepte un objet JSON sous la forme d'une chaîne de caractères en paramètre et renvoie l'objet JavaScript correspondant.
+- [`stringify()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) qui accepte un objet JavaScript en paramètre et renvoie son équivalent sous la forme d'une chaîne de caractères JSON.
 
-Vous pouvez voir la première méthode en action dans notre exemple [heroes-finished-json-parse.html](http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html)) — C'est la même chose que pour l'exemple que nous avons écrit un peu plus tôt, à ceci près qu'on indique à la requête XHR de renvoyer la réponse en JSON sous forme de texte avant d'utiliser la méthode `parse()` pour la convertir en objet JavaScript. La partie du code correspondante se trouve ci-dessous :
+Vous pouvez voir la première méthode en action dans notre exemple [heroes-finished-json-parse.html](http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html)) — C'est la même chose que pour l'exemple que nous avons écrit un peu plus tôt, à ceci près qu'on indique à la requête XHR de renvoyer la réponse en JSON sous forme de texte avant d'utiliser la méthode `parse()` pour la convertir en objet JavaScript. La partie du code correspondante se trouve ci-dessous :
 
 ```js
 request.open('GET', requestURL);
@@ -345,18 +345,18 @@ var myString = JSON.stringify(myJSON);
 myString
 ```
 
-On commence par créer un objet JavaScript puis on vérifie son contenu avant de le convertir en chaîne de caractères JSON avec `stringify()` — en sauvegardant au passage le résultat dans une nouvelle variable avant d'effectuer à nouveau une vérification du contenu.
+On commence par créer un objet JavaScript puis on vérifie son contenu avant de le convertir en chaîne de caractères JSON avec `stringify()` — en sauvegardant au passage le résultat dans une nouvelle variable avant d'effectuer à nouveau une vérification du contenu.
 
 ## Résumé
 
-Dans cet article, nous vous donnons un manuel simple pour utiliser le JSON dans vos programmes, incluant les méthodes de  création et d'analyse syntaxique (parsage)  du JSON  et d'accès aux données qu'il contient. Dans le prochain article, nous débuterons l'apprentissage du Javascript orienté objet.
+Dans cet article, nous vous donnons un manuel simple pour utiliser le JSON dans vos programmes, incluant les méthodes de création et d'analyse syntaxique (parsage)  du JSON et d'accès aux données qu'il contient. Dans le prochain article, nous débuterons l'apprentissage du Javascript orienté objet.
 
 ## Voir aussi
 
 - [La page de référence sur l'objet JSON](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON)
 - [La page de référence sur l'objet XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest)
-- [Utiliser XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)
+- [Utiliser XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)
 - [Les méthodes de requêtes HTTP](/fr/docs/Web/HTTP/Methods)
-- [Le site web officiel  avec un lien vers les normes de l' ECMA](http://json.org)
+- [Le site web officiel avec un lien vers les normes de l'ECMA](http://json.org)
 
 {{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
diff --git a/files/fr/learn/javascript/objects/object_building_practice/index.md b/files/fr/learn/javascript/objects/object_building_practice/index.md
index 7b4775abf8..6a98329949 100644
--- a/files/fr/learn/javascript/objects/object_building_practice/index.md
+++ b/files/fr/learn/javascript/objects/object_building_practice/index.md
@@ -15,7 +15,7 @@ original_slug: Learn/JavaScript/Objects/la_construction_d_objet_en_pratique
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
 
-Dans l'article précédent, nous avons passé en revue l'essentiel de la théorie de l'objet Javascript et sa syntaxe détaillée, vous donnant ainsi des bases solides sur lesquelles commencer. Dans le présent article nous plongeons dans un exercice pratique afin d'accroître votre savoir-faire dans la construction d'objets entièrement personnalisés donnant un résultat plutôt amusant et très coloré.
+Dans l'article précédent, nous avons passé en revue l'essentiel de la théorie de l'objet Javascript et sa syntaxe détaillée, vous donnant ainsi des bases solides sur lesquelles commencer. Dans le présent article nous plongeons dans un exercice pratique afin d'accroître votre savoir-faire dans la construction d'objets entièrement personnalisés donnant un résultat plutôt amusant et très coloré.
 
 <table class="standard-table">
   <tbody>
@@ -24,14 +24,14 @@ Dans l'article précédent, nous avons passé en revue l'essentiel de la théor
       <td>
         <p>
           Connaissance basique de l'informatique, une compréhension basique du
-          HTML et du CSS, une familiarité avec  les bases du JavaScript (voir
+          HTML et du CSS, une familiarité avec les bases du JavaScript (voir
           <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas</a> et
           <a href="/fr/docs/Learn/JavaScript/Building_blocks"
             >Les blocs de construction</a
-          >) et les bases de la programmation objet en JavaScript (voir <a
+          >) et les bases de la programmation objet en JavaScript (voir <a
             href="/fr/docs/Learn/JavaScript/Object-oriented/Introduction"
             >Introduction aux objets</a
-          >). 
+          >).
         </p>
       </td>
     </tr>
@@ -40,7 +40,7 @@ Dans l'article précédent, nous avons passé en revue l'essentiel de la théor
       <td>
         <p>
           Acquérir plus de pratique dans l'utilisation des objets et des
-          techniques orientées objet dans un contexte "monde réel".
+          techniques orientées objet dans un contexte "monde réel".
         </p>
       </td>
     </tr>
@@ -53,13 +53,13 @@ Dans cet article, nous écrirons une démo classique de "balles bondissantes", p
 
 ![](bouncing-balls.png)
 
-Cet exemple utilise l'[API Canvas](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) pour dessiner les balles sur l'écran, et l'API [requestAnimationFrame](/fr/docs/Web/API/window/requestAnimationFrame)  pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation **détection de collision**).
+Cet exemple utilise l'[API Canvas](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) pour dessiner les balles sur l'écran, et l'API [requestAnimationFrame](/fr/docs/Web/API/window/requestAnimationFrame) pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation **détection de collision**).
 
-Pour commencer, faites des copies locales de nos fichiers [`index.html`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html), [`style.css`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css), et [`main.js`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js). Ces fichiers contiennent respectivement :
+Pour commencer, faites des copies locales de nos fichiers [`index.html`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html), [`style.css`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css), et [`main.js`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js). Ces fichiers contiennent respectivement :
 
-1.  Un document  HTML très simple contenant un élément {{HTMLElement("h1")}} , un élément {{HTMLElement("canvas")}} pour dessiner nos balles dessus et des élements  pour appliquer notre CSS et notre JavaScript à notre HTML ;
-2.  Quelques styles très simples qui servent principalement à mettre en forme et placer le `<h1>`, et se débarasser de toutes barres de défilement ou de marges autour du pourtour de notre page (afin que cela paraisse plus sympathique et élégant) ;
-3.  Un peu de JavaScript qui sert à paramétrer l'élément  `<canvas>` et fournir les fonctions globales que nous utiliserons.
+1.  Un document HTML très simple contenant un élément {{HTMLElement("h1")}} , un élément {{HTMLElement("canvas")}} pour dessiner nos balles dessus et des élements pour appliquer notre CSS et notre JavaScript à notre HTML ;
+2.  Quelques styles très simples qui servent principalement à mettre en forme et placer le `<h1>`, et se débarasser de toutes barres de défilement ou de marges autour du pourtour de notre page (afin que cela paraisse plus sympathique et élégant) ;
+3.  Un peu de JavaScript qui sert à paramétrer l'élément  `<canvas>` et fournir les fonctions globales que nous utiliserons.
 
 La première partie du script ressemble à ceci :
 
@@ -72,9 +72,9 @@ const width = canvas.width = window.innerWidth;
 const height = canvas.height = window.innerHeight;
 ```
 
-Ce script prend une référence à l'élément  `<canvas>` et ensuite invoque la méthode  [`getContext()`](/fr/docs/Web/API/HTMLCanvasElement/getContext) sur lui, nous donnant ainsi un contexte sur lequel nous pouvons commencer à dessiner. La variable résultante  (`ctx`)  est l'objet qui représente directement la surface du Canvas où nous pouvons dessiner et qui nous permet de dessiner des formes 2D sur ce dernier.
+Ce script prend une référence à l'élément `<canvas>` et ensuite invoque la méthode [`getContext()`](/fr/docs/Web/API/HTMLCanvasElement/getContext) sur lui, nous donnant ainsi un contexte sur lequel nous pouvons commencer à dessiner. La variable résultante  (`ctx`)  est l'objet qui représente directement la surface du Canvas où nous pouvons dessiner et qui nous permet de dessiner des formes 2D sur ce dernier.
 
-Après, nous configurons  les variables `width` (largeur) et `height`(hauteur),  et la largeur et la hauteur de l'élément canvas (représentés par les propriétés  `canvas.width` et `canvas.height` ) afin qu'elles soient identiques à la fenêtre du navigateur (la surface sur laquelle apparaît la page web— Ceci peut être tiré des propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}).
+Après, nous configurons les variables `width` (largeur) et `height`(hauteur),  et la largeur et la hauteur de l'élément canvas (représentés par les propriétés `canvas.width` et `canvas.height` ) afin qu'elles soient identiques à la fenêtre du navigateur (la surface sur laquelle apparaît la page web— Ceci peut être tiré des propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}).
 
 Vous verrez qu'ici nous enchaînons les assignations de valeurs des différentes variables ensemble à des fins de rapidité. Ceci est parfaitement autorisé.
 
@@ -91,23 +91,23 @@ Cette fonction prend deux nombres comme arguments, et renvoie un nombre compris
 
 ## Modéliser une balle dans notre programme
 
-Notre programme met en œuvre beaucoup de balles bondissant partout sur l'écran. Comme nos balles se comporteront toutes de la même façon, cela semble tout à fait sensé de les représenter avec un objet. Commençons donc en ajoutant le constructeur suivant à la fin de notre code.
+Notre programme met en œuvre beaucoup de balles bondissant partout sur l'écran. Comme nos balles se comporteront toutes de la même façon, cela semble tout à fait sensé de les représenter avec un objet. Commençons donc en ajoutant le constructeur suivant à la fin de notre code.
 
 ```js
 function Ball(x, y, velX, velY, color, size) {
-  this.x = x;
-  this.y = y;
-  this.velX = velX;
-  this.velY = velY;
-  this.color = color;
-  this.size = size;
+  this.x = x;
+  this.y = y;
+  this.velX = velX;
+  this.velY = velY;
+  this.color = color;
+  this.size = size;
 }
 ```
 
-Ici, nous incluons des paramètres qui définissent  des propriétés dont chaque balle aura besoin pour fonctionner dans notre programme :
+Ici, nous incluons des paramètres qui définissent des propriétés dont chaque balle aura besoin pour fonctionner dans notre programme :
 
-- Les coordonnées `x` et `y`  — les coordonnées verticales et horizontales où la balle débutera sur l'écran. Ceci peut se trouver entre 0 (coin à gauche en haut) et la valeur de la hauteur et de la largeur de la fenêtre du navigateur (coin en bas à droite).
-- Une vitesse horizontale et verticale (`velX` et `velY`) — à chaque balle est attribuée une vitesse horizontale et verticale; en termes réels, ces valeurs seront régulièrement ajoutées aux valeurs de la coordonnée `x`/`y` quand nous commencerons à animer les balles, afin de les faire bouger d'autant sur chaque vignette (frame).
+- Les coordonnées `x` et `y` — les coordonnées verticales et horizontales où la balle débutera sur l'écran. Ceci peut se trouver entre 0 (coin à gauche en haut) et la valeur de la hauteur et de la largeur de la fenêtre du navigateur (coin en bas à droite).
+- Une vitesse horizontale et verticale (`velX` et `velY`) — à chaque balle est attribuée une vitesse horizontale et verticale; en termes réels, ces valeurs seront régulièrement ajoutées aux valeurs de la coordonnée `x`/`y` quand nous commencerons à animer les balles, afin de les faire bouger d'autant sur chaque vignette (frame).
 - Une couleur `color` — chaque balle a une couleur.
 - Une taille `size` — chaque balle a une taille. Ce sera son rayon mesuré en pixels.
 
@@ -115,7 +115,7 @@ Ceci règle le problème des propriétés mais qu'en est il des méthodes ? Nous
 
 ### Dessiner la balle
 
-En premier lieu, ajoutez la méthode `draw()` au `prototype` de `Ball()` :
+En premier lieu, ajoutez la méthode `draw()` au `prototype` de `Ball()` :
 
 ```js
 Ball.prototype.draw = function() {
@@ -126,17 +126,17 @@ Ball.prototype.draw = function() {
 }
 ```
 
-En utilisant cette fonction, nous pouvons dire à notre balle de se dessiner sur l'écran en appelant une série de membres du contexte 2D du canvas que nous avons défini plus tôt  (`ctx`). Le contexte est comme le papier et maintenant nous allons demander à notre stylo d'y dessiner quelque chose :
+En utilisant cette fonction, nous pouvons dire à notre balle de se dessiner sur l'écran en appelant une série de membres du contexte 2D du canvas que nous avons défini plus tôt (`ctx`). Le contexte est comme le papier et maintenant nous allons demander à notre stylo d'y dessiner quelque chose :
 
 - Premièrement, nous utilisons [`beginPath()`](/fr/docs/Web/API/CanvasRenderingContext2D/beginPath) pour spécifier que nous voulons dessiner une forme sur le papier.
 - Ensuite, nous utilisons [`fillStyle`](/fr/docs/Web/API/CanvasRenderingContext2D/fillStyle) pour définir de quelle couleur nous voulons que la forme soit — nous lui attribuons la valeur de la propriété `color` de notre balle.
-- Après, nous utilisons la méthode [`arc()`](/fr/docs/Web/API/CanvasRenderingContext2D/arc) pour tracer une forme en arc sur le papier. Ses paramètres sont :
+- Après, nous utilisons la méthode [`arc()`](/fr/docs/Web/API/CanvasRenderingContext2D/arc) pour tracer une forme en arc sur le papier. Ses paramètres sont :
 
-  - Les positions `x` et `y` du centre de l'arc — nous spécifions donc les propriétés `x` et `y` de notre balle.
-  - Le rayon de l'arc — nous spécifions la propriété `size` de notre balle.
-  - Les deux derniers paramètres spécifient l'intervalle de début et de fin en degrés pour dessiner l'arc. Ici nous avons spécifié 0 degré et `2 * PI` qui est l'équivalent de 360 degrés en radians (malheureusement, vous êtes obligés de spécifier ces valeurs en radians et non en degrés). Cela nous donne un cercle complet. Si vous aviez spécifié seulement  `1 * PI`, vous auriez eu un demi-cercle (180 degrés).
+  - Les positions `x` et `y` du centre de l'arc — nous spécifions donc les propriétés `x` et `y` de notre balle.
+  - Le rayon de l'arc — nous spécifions la propriété `size` de notre balle.
+  - Les deux derniers paramètres spécifient l'intervalle de début et de fin en degrés pour dessiner l'arc. Ici nous avons spécifié 0 degré et `2 * PI` qui est l'équivalent de 360 degrés en radians (malheureusement, vous êtes obligés de spécifier ces valeurs en radians et non en degrés). Cela nous donne un cercle complet. Si vous aviez spécifié seulement  `1 * PI`, vous auriez eu un demi-cercle (180 degrés).
 
-- En dernière position, nous utilisons la méthode [`fill()`](/fr/docs/Web/API/CanvasRenderingContext2D/fill) qui est habituellement utilisée pour spécifier que nous souhaitons mettre fin au dessin que nous avons commencé avec `beginPath()`, et remplir la surface délimitée avec la couleur que nous avions spécifiée plus tôt avec `fillStyle`.
+- En dernière position, nous utilisons la méthode [`fill()`](/fr/docs/Web/API/CanvasRenderingContext2D/fill) qui est habituellement utilisée pour spécifier que nous souhaitons mettre fin au dessin que nous avons commencé avec `beginPath()`, et remplir la surface délimitée avec la couleur que nous avions spécifiée plus tôt avec `fillStyle`.
 
 Vous pouvez déjà commencer à tester votre objet&nbsp;:
 
@@ -157,7 +157,7 @@ Vous pouvez déjà commencer à tester votre objet&nbsp;:
     testBall.draw()
     ```
 
-5.  Lorsque vous entrerez la dernière ligne, vous devriez voir la balle se dessiner quelque part sur votre canvas.
+5.  Lorsque vous entrerez la dernière ligne, vous devriez voir la balle se dessiner quelque part sur votre canvas.
 
 ### Mettre à jour les données de la balle
 
@@ -186,26 +186,26 @@ Ball.prototype.update = function() {
 }
 ```
 
-Les quatre premières parties de la fonction vérifient si la balle a atteint le rebord  du canvas. Si c'est le cas, nous inversons la polarité de la vitesse appropriée pour faire bouger la balle dans le sens opposé. Donc par exemple, si la balle se déplaçait vers le haut (positif `velY`) alors la vitesse verticale est changée afin qu'elle commence à bouger plutôt vers le bas (negatif `velY`).
+Les quatre premières parties de la fonction vérifient si la balle a atteint le rebord du canvas. Si c'est le cas, nous inversons la polarité de la vitesse appropriée pour faire bouger la balle dans le sens opposé. Donc par exemple, si la balle se déplaçait vers le haut (positif `velY`) alors la vitesse verticale est changée afin qu'elle commence à bouger plutôt vers le bas (negatif `velY`).
 
 Dans les quatre cas nous :
 
 - Verifions si la coordonnée `x` est plus grande que la largeur du canvas (la balle est en train de sortir du côté droit).
 - Verifions si la coordonnée `x` est plus petite que 0 (la balle est en train de sortir du côté gauche).
 - Verifions si la coordonnée `y` est plus grande que la hauteur du canvas (la balle est en train de sortir par le bas).
-- Verifions si la coordonnée `y` est plus petite que 0 (la balle est en train de sortir par le  haut).
+- Verifions si la coordonnée `y` est plus petite que 0 (la balle est en train de sortir par le haut).
 
-Dans chaque cas, nous incluons la taille `size` de la balle dans les calculs parce que les coordonnées  `x`/`y`  sont situées au centre de la balle mais nous voulons que le pourtour de la balle rebondisse sur le rebord  — nous ne voulons pas que la balle sorte à moité hors de l'écran avant de commencer à rebondir vers l'arrière.
+Dans chaque cas, nous incluons la taille `size` de la balle dans les calculs parce que les coordonnées  `x`/`y`  sont situées au centre de la balle mais nous voulons que le pourtour de la balle rebondisse sur le rebord  — nous ne voulons pas que la balle sorte à moité hors de l'écran avant de commencer à rebondir vers l'arrière.
 
 Les deux dernières lignes ajoutent la valeur `velX` à la coordonnée `x` et la valeur `velY` à la coordonnée `y` — la balle est en effet mise en mouvement chaque fois que cette méthode est invoquée.
 
-Cela suffira pour l'instant, passons à l'animation !
+Cela suffira pour l'instant, passons à l'animation !
 
 ## Animer la balle
 
-Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles au canvas et à les animer.
+Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles au canvas et à les animer.
 
-1.  Tout d'abord, nous avons besoin d'un endroit où stocker toutes nos balles. Le tableau suivant fera ce travail — ajoutez-le au bas de votre code maintenant :
+1.  Tout d'abord, nous avons besoin d'un endroit où stocker toutes nos balles. Le tableau suivant fera ce travail — ajoutez-le au bas de votre code maintenant :
 
     ```js
     let balls = [];
@@ -227,7 +227,7 @@ Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles a
           balls.push(ball);
         }
 
-    Tous les programmes qui animent les choses impliquent généralement une boucle d'animation, qui sert à mettre à jour les informations dans le programme et à restituer ensuite la vue résultante sur chaque image de l'animation. C'est la base de la plupart des jeux et autres programmes similaires.
+    Tous les programmes qui animent les choses impliquent généralement une boucle d'animation, qui sert à mettre à jour les informations dans le programme et à restituer ensuite la vue résultante sur chaque image de l'animation. C'est la base de la plupart des jeux et autres programmes similaires.
 
 2.  Ajoutez ce qui suit au bas de votre code maintenant :
 
@@ -245,14 +245,14 @@ Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles a
     }
     ```
 
-    Notre fonction `loop()` fonctionne comme suit :
+    Notre fonction `loop()` fonctionne comme suit :
 
     - On définit la couleur de remplissage du canvas en noir semi-transparent, puis dessine un rectangle de couleur sur toute la largeur et la hauteur du canvas, en utilisant `fillRect()` (les quatre paramètres fournissent une coordonnée de départ, une largeur et une hauteur pour le rectangle dessiné). Cela sert à masquer le dessin de l'image précédente avant que la suivante ne soit dessinée. Si vous ne faites pas cela, vous verrez juste de longs serpents se faufiler autour de la toile au lieu de balles qui bougent ! La couleur du remplissage est définie sur semi-transparent, `rgba (0,0,0,.25)`, pour permettre aux quelques images précédentes de briller légèrement, produisant les petites traînées derrière les balles lorsqu'elles se déplacent. Si vous avez changé 0.25 à 1, vous ne les verrez plus du tout. Essayez de faire varier ce dernier nombre (entre 0 et 1) pour voir l'effet qu'il a.
-    - On crée un nouvel objet `Ball()` avec des attributs générés aléatoirement grâce à la fonction `random()`, puis on ajoute l'objet au tableau, mais seulement lorsque le nombre de balles dans le tableau est inférieur à 25. Donc quand on a 25 balles à l'écran, plus aucune balle supplémentaire n'apparaît. Vous pouvez essayer de faire varier le nombre dans `balls.length <25` pour obtenir plus, ou moins de balles à l'écran. En fonction de la puissance de traitement de votre ordinateur / navigateur, spécifier plusieurs milliers de boules peut ralentir l'animation de façon très significative !
-    - Le programme boucle à travers tous les objets du tableau sur chacun desquels il exécute la fonction `draw()` et `update()` pour dessiner à l'écran chaque balle et faire les mises à jour de chaque attribut avant le prochain rafraîchissement.
-    - Exécute à nouveau la fonction à l'aide de la méthode `requestAnimationFrame()` — lorsque cette méthode est exécutée en permanence et a reçu le même nom de fonction, elle exécute cette fonction un nombre défini de fois par seconde pour créer une animation fluide. Cela se fait généralement de manière récursive — ce qui signifie que la fonction s'appelle elle-même à chaque fois qu'elle s'exécute, de sorte qu'elle sera répétée encore et encore.
+    - On crée un nouvel objet `Ball()` avec des attributs générés aléatoirement grâce à la fonction `random()`, puis on ajoute l'objet au tableau, mais seulement lorsque le nombre de balles dans le tableau est inférieur à 25. Donc quand on a 25 balles à l'écran, plus aucune balle supplémentaire n'apparaît. Vous pouvez essayer de faire varier le nombre dans `balls.length <25` pour obtenir plus, ou moins de balles à l'écran. En fonction de la puissance de traitement de votre ordinateur / navigateur, spécifier plusieurs milliers de boules peut ralentir l'animation de façon très significative !
+    - Le programme boucle à travers tous les objets du tableau sur chacun desquels il exécute la fonction `draw()` et `update()` pour dessiner à l'écran chaque balle et faire les mises à jour de chaque attribut avant le prochain rafraîchissement.
+    - Exécute à nouveau la fonction à l'aide de la méthode `requestAnimationFrame()` — lorsque cette méthode est exécutée en permanence et a reçu le même nom de fonction, elle exécute cette fonction un nombre défini de fois par seconde pour créer une animation fluide. Cela se fait généralement de manière récursive — ce qui signifie que la fonction s'appelle elle-même à chaque fois qu'elle s'exécute, de sorte qu'elle sera répétée encore et encore.
 
-3.  Finallement mais non moins important, ajoutez la ligne suivante au bas de votre code — nous devons appeler la fonction une fois pour démarrer l'animation.
+3.  Finallement mais non moins important, ajoutez la ligne suivante au bas de votre code — nous devons appeler la fonction une fois pour démarrer l'animation.
 
     ```js
     loop();
@@ -282,14 +282,14 @@ Maintenant, pour un peu de plaisir, ajoutons une détection de collision à notr
     }
     ```
 
-    Cette méthode est un peu complexe, donc ne vous inquiétez pas si vous ne comprenez pas exactement comment cela fonctionne pour le moment. Regardons cela pas-à-pas :
+    Cette méthode est un peu complexe, donc ne vous inquiétez pas si vous ne comprenez pas exactement comment cela fonctionne pour le moment. Regardons cela pas-à-pas&nbsp;:
 
-    - Pour chaque balle _b_, nous devons vérifier chaque autre balle pour voir si elle est entrée en collision avec *b*. Pour ce faire, on inspecte toutes les balles du tableau `balls[]` dans une boucle `for`.
-    - Immédiatement à l'intérieur de cette boucle `for`, une instruction `if` vérifie si la balle courante  *b'* , inspectée dans la boucle, n'est pas égale à la balle *b. Le code correspondant est :*  `b'!== b`_._ En effet, nous ne voulons pas vérifier si une balle _b_ est entrée en collision avec elle-même ! Nous contrôlons donc si la balle actuelle _b_—dont la méthode `collisionDetect()` est invoquée—est distincte de la balle _b'_ inspectée dans la boucle*.* Ainsi le bloc de code venant après l'instruction `if` ne s'exécutera que si les balles _b_ et _b'_ ne sont pas identiques.
-    - Un algorithme classique permet ensuite de vérifier la superposition de deux disques. Ceci est expliqué plus loin dans [2D collision detection](/fr/docs/Games/Techniques/2D_collision_detection).
+    - Pour chaque balle _b_, nous devons vérifier chaque autre balle pour voir si elle est entrée en collision avec *b*. Pour ce faire, on inspecte toutes les balles du tableau `balls[]` dans une boucle `for`.
+    - Immédiatement à l'intérieur de cette boucle `for`, une instruction `if` vérifie si la balle courante *b'* , inspectée dans la boucle, n'est pas égale à la balle *b. Le code correspondant est :* `b'!== b`_._ En effet, nous ne voulons pas vérifier si une balle _b_ est entrée en collision avec elle-même ! Nous contrôlons donc si la balle actuelle _b_—dont la méthode `collisionDetect()` est invoquée—est distincte de la balle _b'_ inspectée dans la boucle*.* Ainsi le bloc de code venant après l'instruction `if` ne s'exécutera que si les balles _b_ et _b'_ ne sont pas identiques.
+    - Un algorithme classique permet ensuite de vérifier la superposition de deux disques. Ceci est expliqué plus loin dans [2D collision detection](/fr/docs/Games/Techniques/2D_collision_detection).
     - Si une collision est détectée, le code à l'intérieur de l'instruction interne `if` est exécuté. Dans ce cas, nous définissons simplement la propriété `color` des deux cercles à une nouvelle couleur aléatoire. Nous aurions pu faire quelque chose de bien plus complexe, comme faire rebondir les balles de façon réaliste, mais cela aurait été beaucoup plus complexe à mettre en œuvre. Pour de telles simulations de physique, les développeurs ont tendance à utiliser des bibliothèques de jeux ou de physiques telles que [PhysicsJS](http://wellcaffeinated.net/PhysicsJS/), [matter.js](http://brm.io/matter-js/), [Phaser](http://phaser.io/), etc.
 
-2.  Vous devez également appeler cette méthode dans chaque image de l'animation. Ajouter le code ci-dessous  juste après la ligne `balls[i].update();`:
+2.  Vous devez également appeler cette méthode dans chaque image de l'animation. Ajouter le code ci-dessous juste après la ligne `balls[i].update();`:
 
     ```js
     balls[i].collisionDetect();
@@ -301,7 +301,7 @@ Maintenant, pour un peu de plaisir, ajoutons une détection de collision à notr
 
 ## Résumé
 
-Nous espérons que vous vous êtes amusé à écrire votre propre exemple de balles aléatoires bondissantes comme dans le monde réel, en utilisant diverses techniques orientées objet et divers objets d'un bout à l'autre du module ! Nous espérons vous avoir offert un aperçu utile de l'utilisation des objets.
+Nous espérons que vous vous êtes amusé à écrire votre propre exemple de balles aléatoires bondissantes comme dans le monde réel, en utilisant diverses techniques orientées objet et divers objets d'un bout à l'autre du module ! Nous espérons vous avoir offert un aperçu utile de l'utilisation des objets.
 
 C'est tout pour les articles sur les objets — il ne vous reste plus qu'à tester vos compétences dans l'évaluation sur les objets.
 
@@ -312,7 +312,7 @@ C'est tout pour les articles sur les objets — il ne vous reste plus qu'à test
 - [Détection de collision 2D](/fr/docs/Games/Techniques/2D_collision_detection)
 - [Détection de collision 3D](/fr/docs/Games/Techniques/3D_collision_detection)
 - [Jeu d'évasion 2D utilisant du JavaScript pu](/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) —un excellent tutoriel pour débutant montrant comment construire un jeu en 2D.
-- [Jeu d'évasion 2D utilisant phaser](/fr/docs/Games/Tutorials/2D_breakout_game_Phaser) — explique les bases de la construction d'un jeu 2D en utilisant une bibliothèque de jeux JavaScript.
+- [Jeu d'évasion 2D utilisant phaser](/fr/docs/Games/Tutorials/2D_breakout_game_Phaser) — explique les bases de la construction d'un jeu 2D en utilisant une bibliothèque de jeux JavaScript.
 
 {{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
 
diff --git a/files/fr/learn/performance/css/index.md b/files/fr/learn/performance/css/index.md
index d07d7fe267..e2d54430eb 100644
--- a/files/fr/learn/performance/css/index.md
+++ b/files/fr/learn/performance/css/index.md
@@ -53,9 +53,9 @@ La propriété CSS [`contain`](/fr/docs/Web/CSS/contain) permet quant à elle de
 
 ## Conclusion
 
-Optimiser les performances en CSS revient ainsi à améliorer deux étapes cruciales et chronophages du rendu de page :
+Optimiser les performances en CSS revient ainsi à améliorer deux étapes cruciales et chronophages du rendu de page&nbsp;:
 
-- d'une part le chargement des ressources CSS de la page (en compressant, en divisant le fichier, ou encore en l'enregistrant dans le cache par exemple) ;
+- d'une part le chargement des ressources CSS de la page (en compressant, en divisant le fichier, ou encore en l'enregistrant dans le cache par exemple)&nbsp;;
 - d'autre part le rendu, en établissant une stratégie ingénieuse de chargement et d'interprétation des ressources, notamment en distinguant les ressources essentielles pour le rendu et les autres ressources annexes, qui peuvent attendre.
 
 Enfin, les outils de développement du navigateur sont à votre disposition pour vous aider à cibler les étapes chronophages qui ralentissent le rendu de vos pages et gagner encore en efficacité, au prix parfois de quelques compromis.
diff --git a/files/fr/learn/performance/html/index.md b/files/fr/learn/performance/html/index.md
index b2f063073b..f2b3c146e0 100644
--- a/files/fr/learn/performance/html/index.md
+++ b/files/fr/learn/performance/html/index.md
@@ -10,7 +10,7 @@ HTML est par défaut rapide et accessible. Il est du devoir de toute personne d�
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Bases de l'informatique,
         <a
@@ -24,7 +24,7 @@ HTML est par défaut rapide et accessible. Il est du devoir de toute personne d�
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectifs :</th>
+      <th scope="row">Objectifs&nbsp;:</th>
       <td>
         En savoir davantage sur l'impact des éléments et attributs HTML le
         l'optimisation des performances pour le web.
diff --git a/files/fr/learn/performance/index.md b/files/fr/learn/performance/index.md
index a785a493d8..9225555d77 100644
--- a/files/fr/learn/performance/index.md
+++ b/files/fr/learn/performance/index.md
@@ -20,7 +20,7 @@ Le reste de notre matériel d'apprentissage pour débutants a essayé de s'en te
 
 ## Parcours d'apprentissage
 
-Bien que la connaissance de HTML, CSS et JavaScript soit nécessaire pour mettre en œuvre de nombreuses recommandations d'amélioration des performances Web, savoir comment créer des applications n'est pas une condition préalable nécessaire pour comprendre et mesurer les performances Web. Nous vous recommandons cependant, avant de commencer à utiliser ce module, d'avoir au moins une idée de base du développement Web en consultant notre module [Commencer avec le web](/fr/docs/Apprendre/Commencer_avec_le_web).
+Bien que la connaissance de HTML, CSS et JavaScript soit nécessaire pour mettre en œuvre de nombreuses recommandations d'amélioration des performances Web, savoir comment créer des applications n'est pas une condition préalable nécessaire pour comprendre et mesurer les performances Web. Nous vous recommandons cependant, avant de commencer à utiliser ce module, d'avoir au moins une idée de base du développement Web en consultant notre module [Commencer avec le web](/fr/docs/Apprendre/Commencer_avec_le_web).
 
 Il serait également utile d'approfondir un peu ces sujets, avec des modules tels que:
 
@@ -36,9 +36,9 @@ Cette rubrique contient les guides suivants. Voici un ordre suggéré pour les p
 
 - [Le "pourquoi" des performances Web](/fr/docs/Learn/Performance/pourquoi_performance_web)
   - : Cet article explique pourquoi les performances Web sont importantes pour l'accessibilité, l'expérience utilisateur et vos objectifs commerciaux.
-- [Qu'est-ce que la performance Web ?](/fr/docs/Learn/Performance/What_is_web_performance)
-  - : Vous savez que les performances Web sont importantes, mais en quoi consistent les performances Web ? Cet article présente les composants de la performance, du chargement et du rendu de la page Web, en passant par la manière dont votre contenu est intégré dans le navigateur de votre utilisateur pour être visualisé, aux groupes de personnes dont nous devons tenir compte lors de la réflexion sur les performances.
-- [Comment les utilisateurs perçoivent-ils les performances ?](/fr/docs/Learn/Performance/Perceived_performance)
+- [Qu'est-ce que la performance Web&nbsp;?](/fr/docs/Learn/Performance/What_is_web_performance)
+  - : Vous savez que les performances Web sont importantes, mais en quoi consistent les performances Web&nbsp;? Cet article présente les composants de la performance, du chargement et du rendu de la page Web, en passant par la manière dont votre contenu est intégré dans le navigateur de votre utilisateur pour être visualisé, aux groupes de personnes dont nous devons tenir compte lors de la réflexion sur les performances.
+- [Comment les utilisateurs perçoivent-ils les performances&nbsp;?](/fr/docs/Learn/Performance/Perceived_performance)
   - : La vitesse à laquelle vos utilisateurs perçoivent votre site est plus importante que la vitesse de votre site Web en millisecondes. Ces perceptions sont affectées par le temps de chargement réel de la page, l'inactivité, la réactivité à l'interaction de l'utilisateur et la fluidité du défilement et d'autres animations. Dans cet article, nous discutons des différentes métriques de chargement, de l'animation et de la réactivité, ainsi que des meilleures pratiques pour améliorer la perception de l'utilisateur, sinon les timings réels.
 
 <!---->
diff --git a/files/fr/learn/performance/measuring_performance/index.md b/files/fr/learn/performance/measuring_performance/index.md
index e17b0761ce..f5991e68cd 100644
--- a/files/fr/learn/performance/measuring_performance/index.md
+++ b/files/fr/learn/performance/measuring_performance/index.md
@@ -14,7 +14,7 @@ Cet article présente les indicateurs de performances web que vous pouvez utilis
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Pré-requis :</th>
+      <th scope="row">Pré-requis&nbsp;:</th>
       <td>
         Bases de l'informatique,
         <a
@@ -28,7 +28,7 @@ Cet article présente les indicateurs de performances web que vous pouvez utilis
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         <p>
           Proposer des informations sur les indicateurs de performance web que
@@ -46,7 +46,7 @@ Si vous êtes en capacité d'écrire du code pour le web, sachez qu'il existe un
 
 Vous pouvez utiliser [l'API d'horodatage de navigation](/fr/docs/Web/API/Navigation_timing_API) pour mesurer les performances web côté client. Cela comprend le volume de temps nécessaire pour décharger la page précédente, le temps que prendra la résolution du nom de domaine, le total du temps passé à exécuter le chargement de la page, et bien plus encore. Vous pouvez utiliser les API pour créer des indicateurs de mesure de tous les évènements liés à la navigation affichés dans le diagramme présenté ci-dessous.
 
-![Voici les différents gestionnaires que l'API d'horodatage de la navigation peut prendre en charge, incluant les gestionnaires suivants (en anglais) : Prompt for unload ; redirect ; unload ; App cache ; DNS ; TCP ; Request ; Response ; Processing ; onLoad ; navigationStart ; redirectStart ; redirectEnd ; fetchStart ; domainLookupEnd ; domainLookupStart ; connectStart (secureConnectionStart) ; connectEnd ; requestStart ; responseStart ; responseEnd ; unloadStart ; unloadEnd ; domLoading ; domInteractive ; domContentLoaded ; domComplete ; loadEventStart ; loadEventEnd.](navigationtimingapi.jpg)
+![Voici les différents gestionnaires que l'API d'horodatage de la navigation peut prendre en charge, incluant les gestionnaires suivants (en anglais)&nbsp;: Prompt for unload&nbsp;; redirect&nbsp;; unload&nbsp;; App cache&nbsp;; DNS&nbsp;; TCP&nbsp;; Request&nbsp;; Response&nbsp;; Processing&nbsp;; onLoad&nbsp;; navigationStart&nbsp;; redirectStart&nbsp;; redirectEnd&nbsp;; fetchStart&nbsp;; domainLookupEnd&nbsp;; domainLookupStart&nbsp;; connectStart (secureConnectionStart)&nbsp;; connectEnd&nbsp;; requestStart&nbsp;; responseStart&nbsp;; responseEnd&nbsp;; unloadStart&nbsp;; unloadEnd&nbsp;; domLoading&nbsp;; domInteractive&nbsp;; domContentLoaded&nbsp;; domComplete&nbsp;; loadEventStart&nbsp;; loadEventEnd.](navigationtimingapi.jpg)
 
 [L'API de performances](/fr/docs/Web/API/Performance_API/Using_the_Performance_API) propose un accès aux informations liées aux performances, ce qui comprend [l'API de chronologie des performances](/fr/docs/Web/API/Performance_Timeline), [l'API d'horodatage de la navigation](/fr/docs/Web/API/Navigation_timing_API), [l'API d'horodatage du visiteur](/fr/docs/Web/API/User_Timing_API) ainsi que [l'API d'horodatage des ressources](/fr/docs/Web/API/Resource_Timing_API). Ces interfaces permettent de mesurer précisément le temps que prennent les tâches JavaScript pour se dérouler.
 
@@ -58,7 +58,7 @@ Si cet article n'a pas pour but de proposer une documentation complète de ces A
 
 ## Outils de mesure
 
-Il y a beaucoup d'outils disponibles pour vous aider à améliorer les performances de vos sites. Ils sont généralement classés dans deux catégories :
+Il y a beaucoup d'outils disponibles pour vous aider à améliorer les performances de vos sites. Ils sont généralement classés dans deux catégories&nbsp;:
 
 - Les outils qui indiquent ou mesurent les performances, tels que [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) ou le [moniteur réseau](/fr/docs/Tools/Network_Monitor) et le [moniteur de performances](/fr/docs/Tools/Performance) de Firefox. Ces outils vous montrent la vitesse de chargement de votre site ou de votre application. Ils vous indiquent également les points sur lesquels votre application web peut être améliorée.
 - Les outils qui corrigent le code de votre application web ou de votre site afin d'améliorer ses performances. Par exemple, certains outils de construction empaquettent le code réparti sur plusieurs fichiers en un seul fichier unique afin de réduire le nombre de requêtes HTTP. Il existe aussi des minificateurs qui suppriment tous les espaces de votre code pour réduire la taille des fichiers.
@@ -69,7 +69,7 @@ Sur cette page, ces deux catégories d'outils seront abordées. Par ailleurs, en
 
 Les outils tels que [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) sont faits pour mesurer les performances des sites. Vous saisissez une URL, puis vous obtenez un rapport de performances en quelques secondes. Le rapport contient les scores obtenus par votre site, que ce soit sur mobile ou sur ordinateur de bureau. C'est un bon point de départ pour savoir d'où vous partez et pour connaître les points d'amélioration.
 
-Au moment de l'écriture de cette page, voici à quoi ressemblait le rapport de performances du site MDN :
+Au moment de l'écriture de cette page, voici à quoi ressemblait le rapport de performances du site MDN&nbsp;:
 
 ![Une capture d'écran montrant le rapport PageSpeed Insights de la page d'accueil de Mozilla.](pagespeed-insight-mozilla-homepage.png)
 
@@ -97,12 +97,12 @@ Cet article était destiné à proposer une vue d'ensemble rapide des indicateur
 
 ## Dans ce module
 
-- [Le « pourquoi » des performances web](/fr/docs/Learn/Performance/why_web_performance)
-- [Qu'est-ce que sont les performances web ?](/fr/docs/Learn/Performance/What_is_web_performance)
-- [Comment les visiteurs perçoivent-ils les performances ?](/fr/docs/Learn/Performance/Perceived_performance)
+- [Le «&nbsp;pourquoi&nbsp;» des performances web](/fr/docs/Learn/Performance/why_web_performance)
+- [Qu'est-ce que sont les performances web&nbsp;?](/fr/docs/Learn/Performance/What_is_web_performance)
+- [Comment les visiteurs perçoivent-ils les performances&nbsp;?](/fr/docs/Learn/Performance/Perceived_performance)
 - [Mesurer les performances](/fr/docs/Learn/Performance/Measuring_performance)
-- [Multimédia : images](/fr/docs/Learn/Performance/Multimedia)
-- [Multimédia : vidéos](/fr/docs/Learn/Performance/video)
+- [Multimédia&nbsp;: images](/fr/docs/Learn/Performance/Multimedia)
+- [Multimédia&nbsp;: vidéos](/fr/docs/Learn/Performance/video)
 - [Bonnes pratiques de performances pour JavaScript](/fr/docs/Learn/Performance/JavaScript)
 - [Fonctionnalités de HTML liées aux performances](/fr/docs/Learn/Performance/HTML)
 - [Fonctionnalités de CSS liées aux performances](/fr/docs/Learn/Performance/CSS)
diff --git a/files/fr/learn/performance/why_web_performance/index.md b/files/fr/learn/performance/why_web_performance/index.md
index 937e183fa6..d8bf6a4c60 100644
--- a/files/fr/learn/performance/why_web_performance/index.md
+++ b/files/fr/learn/performance/why_web_performance/index.md
@@ -47,7 +47,7 @@ Les performances Web font référence à la rapidité avec laquelle le contenu d
 
 Les performances Web et les meilleurs pratiques associées sont essentielles pour que les visiteurs de votre site Web aient une bonne expérience. En un sens, les performances Web peuvent être considérées comme un sous-ensemble de l'[accessibilité web](/fr/docs/Apprendre/a11y). Avec les performaces comme avec l'accessibilité, vous considérez que appareil un visiteur du site utilise pour accéder au site et la vitesse de connexion de l'appareil.
 
-À titre d'exemple, considérons l'expérience de chargement de CNN.com, qui, au moment de la rédaction de cet article,  avait plus de 400 requêtes HTTP avec une taille de fichier supérieure à 22.6Mo.
+À titre d'exemple, considérons l'expérience de chargement de CNN.com, qui, au moment de la rédaction de cet article,  avait plus de 400 requêtes HTTP avec une taille de fichier supérieure à 22.6Mo.
 
 - Imaginez charger ceci sur un ordinateur de bureau connecté à un réseau de fibre optique. Cela semblerait relativement rapide, et la taille du fichier serait en grande partie sans importance.
 - Imaginez charger ce même site en utilisant des données mobiles connectées sur un iPad de 9 ans tout en vous rendant chez vous en transport en commun. Le même site sera lent à se charger, voir presque inutilisable en fonction de la couverture cellulaire. Vous pourriez abandonner avant la fin du chargement.
diff --git a/files/fr/learn/server-side/django/admin_site/index.md b/files/fr/learn/server-side/django/admin_site/index.md
index 6752286d3d..27733d46e2 100644
--- a/files/fr/learn/server-side/django/admin_site/index.md
+++ b/files/fr/learn/server-side/django/admin_site/index.md
@@ -198,7 +198,7 @@ Pour le moment, toutes les classes d’administration sont vides (cf. pass), par
 
 ### Configurer les vues en liste
 
-La liste des auteurs (objet `Author`) est affichée dans l'application _LocalLibrary_ à l'aide du nom généré par la méthode  `__str__()`. Ceci fonctionne bien, judqu'à ce que vous aurez de nombreux auteurs et éventuellement des doublons parmi ces auteurs. Pour bien les différencier, ou simplement parce que vous souhaitez avoir directement plus d'information, vous allez utiliser la directive [list_display](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.ModelAdmin) pour ajouter d'autres champs de l'objet `Author`.
+La liste des auteurs (objet `Author`) est affichée dans l'application _LocalLibrary_ à l'aide du nom généré par la méthode  `__str__()`. Ceci fonctionne bien, judqu'à ce que vous aurez de nombreux auteurs et éventuellement des doublons parmi ces auteurs. Pour bien les différencier, ou simplement parce que vous souhaitez avoir directement plus d'information, vous allez utiliser la directive [list_display](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.ModelAdmin) pour ajouter d'autres champs de l'objet `Author`.
 
 Modifiez votre classe `AuthorAdmin` comme décrit ci-dessous (vous pouvez copier et coller le code). Les noms de champs à afficher dans la liste sont déclarés dans un tuple dans l'ordre requis. Ils sont identiques à ceux spécifiés dans votre modèle d'objet `Author`.
 
@@ -211,7 +211,7 @@ Si vous accèdez à la page d'administration des auteurs, vous devriez obtenir u
 
 ![Admin Site - Improved Author List](admin_improved_author_list.png)
 
-Pour les livres, nous allons visulaiser les objets  `Book` en affichant les champs `author` and `genre`. Le champs `author` est de type `ForeignKey` décrivant une relation un à n. En conséquence, nous afficherons l'élément produit par la méthode `__str__()` de l'objet `Author` pour l'instance associée à votre livre. Le genre est une relation n à n, donc nous allons avoir à traiter son affichage de manière particulière. Modifiez la classe `BookAdmin` comme suit :
+Pour les livres, nous allons visulaiser les objets  `Book` en affichant les champs `author` and `genre`. Le champs `author` est de type `ForeignKey` décrivant une relation un à n. En conséquence, nous afficherons l'élément produit par la méthode `__str__()` de l'objet `Author` pour l'instance associée à votre livre. Le genre est une relation n à n, donc nous allons avoir à traiter son affichage de manière particulière. Modifiez la classe `BookAdmin` comme suit :
 
 ```python
 class BookAdmin(admin.ModelAdmin):
@@ -220,12 +220,12 @@ class BookAdmin(admin.ModelAdmin):
 
 Le champ genre représente une relation n à n (`ManyToManyField`) qui ne peut pas être prise en charge par la directive `list_display`. Le coût d'accès à la base de donnée peut être important et donc le cadriciel se protège de ce phénomène. A la place, nous devons définir une fonction(`display_genre`) qui permettra de traiter l'affichage des informations souhaitées pour le genre.
 
-> **Note :** C'est dans un but pédagogique que nous recherchons ici l'affichage du `genre` qui n'a peut-être pas nécessaire d'intérêt et peut représenter un coût d'accès. Nous montrons, ici, comment appler les fonctions dans vos modèles ce qui sera très utile pour la suite de vos applications  — par exemple pour ajouter un lien de suppression de vos enregistrements en liste.
+> **Note :** C'est dans un but pédagogique que nous recherchons ici l'affichage du `genre` qui n'a peut-être pas nécessaire d'intérêt et peut représenter un coût d'accès. Nous montrons, ici, comment appler les fonctions dans vos modèles ce qui sera très utile pour la suite de vos applications  — par exemple pour ajouter un lien de suppression de vos enregistrements en liste.
 
 Ajoutez le code ci-dessous dans votre modèle d'objet `Book` (concrètement dans le fichier **locallibrary/catalog/models.py**). Cette fonction génère une chaîne de caractère contenant les trois premières valeurs de tous les genres (s'ils existent) et créer une courte destription (`short_description`) qui sera utilisé par le site d'administration avec cette méthode.
 
 ```python
-    def display_genre(self):
+    def display_genre(self):
         """Create a string for the Genre. This is required to display genre in Admin."""
         return ', '.join(genre.name for genre in self.genre.all()[:3])
 
@@ -300,7 +300,7 @@ class BookInstanceAdmin(admin.ModelAdmin):
 
 Chaque section peut avoir un titre (ou aucun si vous indiquez la valeur `None`) et des champs regroupés à l'aide de tuples enregistrés dans un dictionnaire — le schéma de déclaration peut paraître compliqué à décrire mais assez aisé à comprendre à la lecture du code ci-dessus formaté pour être plus compréhensible.
 
-Le résultat de cette description devrait vous apparaître de manière analogue à celle présente  ci-dessous :
+Le résultat de cette description devrait vous apparaître de manière analogue à celle présente ci-dessous :
 
 ![Admin Site - Improved BookInstance Detail with sections](admin_improved_bookinstance_detail_sections.png)
 
@@ -308,16 +308,16 @@ Le résultat de cette description devrait vous apparaître de manière analogue
 
 Parfois, il peut être très utile d'ajouter à l'affichage des éléments associés en même temps. C'est le cas, par exemple, pour les copies d'ouvrage associés à un livre en bibliothèque. Il est utile pour le bibliothécaire de disposer à la fois des informations sur le livre et des copies présentes ou non en rayonnage..
 
-Pour cela, vous pouvez utiliser un d'objet pour un affichage horizontal ([TabularInline](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.TabularInline)) ou vertical ([StackedInline)](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.StackedInline) (qui n'est autre que l'affichage standard des données). Modifiez le code associé à votre modèle `BookInstance` dans le fichier **admin.py** pour disposer des informations _inline_ à l'affichage des informations sur votre objet `Book`. Gardez en mémoire que c'est l'objet  `BookAdmin` qui gère l'affichage les informations de l'objet `Book`; c'est donc `BookAdmin` il doit donc être modifié :
+Pour cela, vous pouvez utiliser un d'objet pour un affichage horizontal ([TabularInline](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.TabularInline)) ou vertical ([StackedInline)](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.StackedInline) (qui n'est autre que l'affichage standard des données). Modifiez le code associé à votre modèle `BookInstance` dans le fichier **admin.py** pour disposer des informations _inline_ à l'affichage des informations sur votre objet `Book`. Gardez en mémoire que c'est l'objet  `BookAdmin` qui gère l'affichage les informations de l'objet `Book`; c'est donc `BookAdmin` il doit donc être modifié :
 
 ```python
 class BooksInstanceInline(admin.TabularInline):
-    model = BookInstance
+    model = BookInstance
 
 @admin.register(Book)
 class BookAdmin(admin.ModelAdmin):
-    list_display = ('title', 'author', 'display_genre')
-    inlines = [BooksInstanceInline]
+    list_display = ('title', 'author', 'display_genre')
+    inlines = [BooksInstanceInline]
 ```
 
 Si vous allez consulter un livre, vous devriez pouvoir, au bas de la page, consulter la liste des copies enregistrées :
@@ -341,7 +341,7 @@ Beaucoup de sujets ont été abordés dans ce chapitre... Vous avez acquis les b
 
 ## A voir aussi
 
-- [Ecrire sa première application Dajngo, 2ème partie](https://docs.djangoproject.com/fr/2.2/intro/tutorial02/#introducing-the-django-admin)  (Django docs)
+- [Ecrire sa première application Dajngo, 2ème partie](https://docs.djangoproject.com/fr/2.2/intro/tutorial02/#introducing-the-django-admin)  (Django docs)
 - [Le site d'administration de Django](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/) (Django Docs)
 
 {{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}
diff --git a/files/fr/learn/server-side/django/generic_views/index.md b/files/fr/learn/server-side/django/generic_views/index.md
index ce38891f7d..edfe0820b7 100644
--- a/files/fr/learn/server-side/django/generic_views/index.md
+++ b/files/fr/learn/server-side/django/generic_views/index.md
@@ -53,12 +53,12 @@ La page de liste des livres va afficher une liste de tous les enregistrements de
 
 ### Mappage d'URL
 
-Ouvrez le fichier **/catalog/urls.py**, et copiez-y la ligne en gras ci-dessous. Comme pour la page d'index, cette fonction `path()` définit un pattern destiné à identifier l'URL (**'books/'**), une fonction vue qui sera appelée si l'URL correspond (`views.BookListView.as_view()`), et un nom pour ce mappage particulier.
+Ouvrez le fichier **/catalog/urls.py**, et copiez-y la ligne en gras ci-dessous. Comme pour la page d'index, cette fonction `path()` définit un pattern destiné à identifier l'URL (**'books/'**), une fonction vue qui sera appelée si l'URL correspond (`views.BookListView.as_view()`), et un nom pour ce mappage particulier.
 
 ```python
 urlpatterns = [
     path('', views.index, name='index'),
-    path('books/', views.BookListView.as_view(), name='books'),
+    path('books/', views.BookListView.as_view(), name='books'),
 ]
 ```
 
@@ -70,7 +70,7 @@ En Django, on accède à la fonction appropriée d'une vue basée sur classe en
 
 ### Vue (basée sur classe)
 
-Nous pourrions assez aisément écrire la vue "liste de livres" comme une fonction ordinaire (comme notre précédente vue "index"), qui interrogerait la base de données pour tous les livres, et qui ensuite appellerait `render()` pour passer la liste à un template spécifique. À la place, cependant, nous allons utiliser une vue "liste" générique, basée sur une classe (`ListView`), une classe qui hérite d'une vue existante. Parce que la vue générique implémente déjà la plupart des fonctionnalités dont nous avons besoin et suit les meilleures pratiques Django, nous pourrons créer une vue "liste" plus robuste avec moins de code, moins de répétition, et au final moins de maintenance.
+Nous pourrions assez aisément écrire la vue "liste de livres" comme une fonction ordinaire (comme notre précédente vue "index"), qui interrogerait la base de données pour tous les livres, et qui ensuite appellerait `render()` pour passer la liste à un template spécifique. À la place, cependant, nous allons utiliser une vue "liste" générique, basée sur une classe (`ListView`), une classe qui hérite d'une vue existante. Parce que la vue générique implémente déjà la plupart des fonctionnalités dont nous avons besoin et suit les meilleures pratiques Django, nous pourrons créer une vue "liste" plus robuste avec moins de code, moins de répétition, et au final moins de maintenance.
 
 Ouvrez le fichier **catalog/views.py**, et copiez-y le code suivant à la fin :
 
@@ -81,9 +81,9 @@ class BookListView(generic.ListView):
     model = Book
 ```
 
-C'est tout ! La vue générique va adresser une requête à la base de données pour obtenir tous les enregistrements du modèle spécifié (`Book`), et ensuite rendre un template situé à l'adresse **/locallibrary/catalog/templates/catalog/book_list.html** (que nous allons créer ci-dessous). À l'intérieur du template vous pouvez accéder à la liste de livres grâce à la variable de template appelée `object_list` OU `book_list` (c'est-à-dire l'appellation générique "`the_model_name_list`").
+C'est tout ! La vue générique va adresser une requête à la base de données pour obtenir tous les enregistrements du modèle spécifié (`Book`), et ensuite rendre un template situé à l'adresse **/locallibrary/catalog/templates/catalog/book_list.html** (que nous allons créer ci-dessous). À l'intérieur du template vous pouvez accéder à la liste de livres grâce à la variable de template appelée `object_list` OU `book_list` (c'est-à-dire l'appellation générique "`the_model_name_list`").
 
-> **Note :** Ce chemin étrange vers le lieu du template n'est pas une faute de frappe : les vues génériques cherchent les templates dans `/application_name/the_model_name_list.html` (`catalog/book_list.html` dans ce cas) à l'intérieur du répertoire `/application_name/templates/` (`/catalog/templates/`).
+> **Note :** Ce chemin étrange vers le lieu du template n'est pas une faute de frappe : les vues génériques cherchent les templates dans `/application_name/the_model_name_list.html` (`catalog/book_list.html` dans ce cas) à l'intérieur du répertoire `/application_name/templates/` (`/catalog/templates/`).
 
 Vous pouvez ajouter des attributs pour changer le comportement par défaut utilisé ci-dessus. Par exemple, vous pouvez spécifier un autre fichier de template si vous souhaitez avoir plusieurs vues qui utilisent ce même modèle, ou bien vous pourriez vouloir utiliser un autre nom de variable de template, si book_list n'est pas intuitif par rapport à l'usage que vous faites de vos templates. Probablement, le changement le plus utile est de changer/filtrer le sous-ensemble des résultats retournés : au lieu de lister tous les livres, vous pourriez lister les 5 premiers livres lus par d'autres utilisateurs.
 
@@ -99,28 +99,28 @@ class BookListView(generic.ListView):
 
 Bien que nous n'ayons pas besoin de le faire ici, sachez qu'il vous est possible de ré-écrire des méthodes de classe.
 
-Par exemple, nous pouvons ré-écrire la méthode `get_queryset()` pour changer la liste des enregistrements retournés. Cette façon de faire est plus flexible que simplement définir l'attribut `queryset`, comme nous l'avons fait dans le précédent fragment de code (bien qu'il n'y ait pas vraiment d'intérêt dans ce cas) :
+Par exemple, nous pouvons ré-écrire la méthode `get_queryset()` pour changer la liste des enregistrements retournés. Cette façon de faire est plus flexible que simplement définir l'attribut `queryset`, comme nous l'avons fait dans le précédent fragment de code (bien qu'il n'y ait pas vraiment d'intérêt dans ce cas) :
 
 ```python
 class BookListView(generic.ListView):
     model = Book
 
-    def get_queryset(self):
-        return Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
+    def get_queryset(self):
+        return Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
 ```
 
-Nous pourrions aussi réécrire `get_context_data()`, afin d'envoyer au template des variables de contexte supplémentaires (par défaut c'est la liste de livres qui est envoyée). Le bout de code ci-dessous montre comment ajouter une variable appelée "`some_data`" au contexte (elle sera alors accessible comme variable de template).
+Nous pourrions aussi réécrire `get_context_data()`, afin d'envoyer au template des variables de contexte supplémentaires (par défaut c'est la liste de livres qui est envoyée). Le bout de code ci-dessous montre comment ajouter une variable appelée "`some_data`" au contexte (elle sera alors accessible comme variable de template).
 
 ```python
 class BookListView(generic.ListView):
     model = Book
 
-    def get_context_data(self, **kwargs):
-        # Call the base implementation first to get the context
-        context = super(BookListView, self).get_context_data(**kwargs)
-        # Create any data and add it to the context
-        context['some_data'] = 'This is just some data'
-        return context
+    def get_context_data(self, **kwargs):
+        # Call the base implementation first to get the context
+        context = super(BookListView, self).get_context_data(**kwargs)
+        # Create any data and add it to the context
+        context['some_data'] = 'This is just some data'
+        return context
 ```
 
 Quand vous faites cela, il est important de suivre la procédure indiquée ci-dessus :
@@ -142,25 +142,25 @@ Les templates pour vues génériques sont exactement comme les autres templates
 
 {% block content %}
   <h1>Book List</h1>
-  {% if book_list %}
-  <ul>
-    {% for book in book_list %}
-      <li>
-        <a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
-      </li>
-    {% endfor %}
-  </ul>
-  {% else %}
-    <p>There are no books in the library.</p>
-  {% endif %}
+  {% if book_list %}
+  <ul>
+    {% for book in book_list %}
+      <li>
+        <a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
+      </li>
+    {% endfor %}
+  </ul>
+  {% else %}
+    <p>There are no books in the library.</p>
+  {% endif %}
 {% endblock %}
 ```
 
-La vue envoie le contexte (liste de livres), en utilisant par défaut les alias `object_list` et `book_list` ; l'un et l'autre fonctionnent.
+La vue envoie le contexte (liste de livres), en utilisant par défaut les alias `object_list` et `book_list` ; l'un et l'autre fonctionnent.
 
 #### Exécution conditionnelle
 
-Nous utilisons les balises de templates [`if`](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#if), `else`, et `endif` pour vérifier que la `book_list` a été définie et n'est pas vide. Si `book_list` est vide, alors la condition `else` affiche un texte expliquant qu'il n'y a pas de livres à lister. Si `book_list` n'est pas vide, nous parcourons la liste de livres.
+Nous utilisons les balises de templates [`if`](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#if), `else`, et `endif` pour vérifier que la `book_list` a été définie et n'est pas vide. Si `book_list` est vide, alors la condition `else` affiche un texte expliquant qu'il n'y a pas de livres à lister. Si `book_list` n'est pas vide, nous parcourons la liste de livres.
 
 ```html
 {% if book_list %}
@@ -170,11 +170,11 @@ Nous utilisons les balises de templates [`if`](https://docs.djangoproject.com/en
 {% endif %}
 ```
 
-La condition ci-dessus ne vérifie qu'un seul cas, mais vous pouvez ajouter d'autres tests grâce à la balise de template `elif` (par exemple `{% elif var2 %}`). Pour plus d'information sur les opérateurs conditionnels, voyez ici :  [if](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#if), [ifequal/ifnotequal](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#ifequal-and-ifnotequal), et [ifchanged](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#ifchanged) dans [Built-in template tags and filters](https://docs.djangoproject.com/en/2.1/ref/templates/builtins) (Django Docs).
+La condition ci-dessus ne vérifie qu'un seul cas, mais vous pouvez ajouter d'autres tests grâce à la balise de template `elif` (par exemple `{% elif var2 %}`). Pour plus d'information sur les opérateurs conditionnels, voyez ici :  [if](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#if), [ifequal/ifnotequal](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#ifequal-and-ifnotequal), et [ifchanged](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#ifchanged) dans [Built-in template tags and filters](https://docs.djangoproject.com/en/2.1/ref/templates/builtins) (Django Docs).
 
 #### Boucles for
 
-Le template utilise les balises de template [for](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#for) et `endfor` pour boucler à travers la liste de livres, comme montré ci-dessous. Chaque itération peuple la variable de template `book` avec l'information concernant l'élément courant de la liste.
+Le template utilise les balises de template [for](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#for) et `endfor` pour boucler à travers la liste de livres, comme montré ci-dessous. Chaque itération peuple la variable de template `book` avec l'information concernant l'élément courant de la liste.
 
 ```html
 {% for book in book_list %}
@@ -182,7 +182,7 @@ Le template utilise les balises de template [for](https://docs.djangoproject.com
 {% endfor %}
 ```
 
-Bien que nous ne l'utilisions pas ici, Django, à l'intérieur de la boucle, va aussi créer d'autres variables que vous pouvez utiliser pour suivre l'itération. Par exemple, vous pouvez tester la variable `forloop.last` pour réaliser une action conditionnelle au dernier passage de la boucle.
+Bien que nous ne l'utilisions pas ici, Django, à l'intérieur de la boucle, va aussi créer d'autres variables que vous pouvez utiliser pour suivre l'itération. Par exemple, vous pouvez tester la variable `forloop.last` pour réaliser une action conditionnelle au dernier passage de la boucle.
 
 #### Accéder aux variables
 
@@ -192,15 +192,15 @@ Le code à l'intérieur de la boucle crée un élément de liste pour chaque liv
 <a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
 ```
 
-Nous accédons aux _champs_ de l'enregistrement "livre" associé, en utilisant la notation "à points" (par exemple `book.title` et `book.author`), où le texte suivant l'item `book` est le nom du champ (comme défini dans le modèle).
+Nous accédons aux _champs_ de l'enregistrement "livre" associé, en utilisant la notation "à points" (par exemple `book.title` et `book.author`), où le texte suivant l'item `book` est le nom du champ (comme défini dans le modèle).
 
-Nous pouvons aussi appeler des _fonctions_ contenues dans le modèle depuis l'intérieur de notre template — dans ce cas nous appelons `Book.get_absolute_url()` pour obtenir une URL que vous pouvez utiliser pour afficher dans la vue détail l'enregistrement associé. Cela fonctionne, pourvu que la fonction ne comporte pas d'arguments (il n'y a aucun moyen de passer des arguments !).
+Nous pouvons aussi appeler des _fonctions_ contenues dans le modèle depuis l'intérieur de notre template — dans ce cas nous appelons `Book.get_absolute_url()` pour obtenir une URL que vous pouvez utiliser pour afficher dans la vue détail l'enregistrement associé. Cela fonctionne, pourvu que la fonction ne comporte pas d'arguments (il n'y a aucun moyen de passer des arguments !).
 
 > **Note :** Il nous faut être quelque peu attentifs aux "effets de bord" quand nous appelons des fonctions dans nos templates. Ici nous récupérons simplement une URL à afficher, mais une fonction peut faire à peu près n'importe quoi — nous ne voudrions pas effacer notre base de données (par exemple) juste parce que nous avons affiché notre template !
 
 #### Mettre à jour le template de base
 
-Ouvrez le template de base (**/locallibrary/catalog/templates/_base_generic.html_**) et insérez **{% url 'books' %}** dans le lien URL pour **All books**, comme indiqué ci-dessous. Cela va afficher le lien dans toutes les pages (nous pouvons mettre en place ce lien avec succès, maintenant que nous avons créé le mappage d'URL "books").
+Ouvrez le template de base (**/locallibrary/catalog/templates/_base_generic.html_**) et insérez **{% url 'books' %}** dans le lien URL pour **All books**, comme indiqué ci-dessous. Cela va afficher le lien dans toutes les pages (nous pouvons mettre en place ce lien avec succès, maintenant que nous avons créé le mappage d'URL "books").
 
 ```python
 <li><a href="{% url 'index' %}">Home</a></li>
@@ -214,25 +214,25 @@ Vous ne pouvez pas encore construire la liste des livres, car il nous manque tou
 
 ## Page de détail d'un livre
 
-La page de détail d'un livre va afficher les informations sur un livre précis, auquel on accède en utilisant l'URL `catalog/book/<id>` (où `<id>` est la clé primaire pour le livre). En plus des champs définis dans le modèle `Book` (auteur, résumé, ISBN, langue et genre), nous allons aussi lister les détails des copies disponibles (`BookInstances`), incluant le statut, la date de retour prévue, la marque d'éditeur et l'id. Cela permettra à nos lecteurs, non seulement de s'informer sur le livre, mais aussi de confirmer si et quand il sera disponible.
+La page de détail d'un livre va afficher les informations sur un livre précis, auquel on accède en utilisant l'URL `catalog/book/<id>` (où `<id>` est la clé primaire pour le livre). En plus des champs définis dans le modèle `Book` (auteur, résumé, ISBN, langue et genre), nous allons aussi lister les détails des copies disponibles (`BookInstances`), incluant le statut, la date de retour prévue, la marque d'éditeur et l'id. Cela permettra à nos lecteurs, non seulement de s'informer sur le livre, mais aussi de confirmer si et quand il sera disponible.
 
 ### Mappage d'URL
 
-Ouvrez **/catalog/urls.py** et ajoutez-y le mappeur d'URL '**book-detail**' indiqué en gras ci-dessous. Cette fonction `path()` définit un pattern, la vue générique basée sur classe qui lui est associée, ainsi qu'un nom.
+Ouvrez **/catalog/urls.py** et ajoutez-y le mappeur d'URL '**book-detail**' indiqué en gras ci-dessous. Cette fonction `path()` définit un pattern, la vue générique basée sur classe qui lui est associée, ainsi qu'un nom.
 
 ```python
 urlpatterns = [
     path('', views.index, name='index'),
-    path('books/', views.BookListView.as_view(), name='books'),
-    path('book/<int:pk>', views.BookDetailView.as_view(), name='book-detail'),
+    path('books/', views.BookListView.as_view(), name='books'),
+    path('book/<int:pk>', views.BookDetailView.as_view(), name='book-detail'),
 ]
 ```
 
-Pour le chemin *book-detail*, le pattern d'URL utilise une syntaxe spéciale pour capturer l'id exact du livre que nous voulons voir. La syntaxe est très simple : les chevrons ('<' et '>') définissent la partie de l'URL qui doit être capturée et encadrent le nom de la variable que la vue pourra utiliser pour accéder aux données capturées. Par exemple, **\<something>**  va capturer le pattern marqué et passer la valeur à la vue en tant que variable "something". De manière optionnelle, vous pouvez faire précéder le nom de variable d'une [spécification de convertisseur](https://docs.djangoproject.com/en/2.1/topics/http/urls/#path-converters), qui définit le type de la donnée (int, str, slug, uuid, path).
+Pour le chemin *book-detail*, le pattern d'URL utilise une syntaxe spéciale pour capturer l'id exact du livre que nous voulons voir. La syntaxe est très simple : les chevrons ('<' et '>') définissent la partie de l'URL qui doit être capturée et encadrent le nom de la variable que la vue pourra utiliser pour accéder aux données capturées. Par exemple, **\<something>**  va capturer le pattern marqué et passer la valeur à la vue en tant que variable "something". De manière optionnelle, vous pouvez faire précéder le nom de variable d'une [spécification de convertisseur](https://docs.djangoproject.com/en/2.1/topics/http/urls/#path-converters), qui définit le type de la donnée (int, str, slug, uuid, path).
 
-Dans ce cas, nous utilisons `'<int:pk>'` pour capturer l'id du livre, qui doit être une chaîne formatée d'une certaine manière, et passer cet id à la vue en tant que paramètre nommé `pk` (abréviation pour primary key - clé primaire). C'est l'id qui doit être utilisé pour stocker le livre de manière unique dans la base de données, comme défini dans le modèle Book.
+Dans ce cas, nous utilisons `'<int:pk>'` pour capturer l'id du livre, qui doit être une chaîne formatée d'une certaine manière, et passer cet id à la vue en tant que paramètre nommé `pk` (abréviation pour primary key - clé primaire). C'est l'id qui doit être utilisé pour stocker le livre de manière unique dans la base de données, comme défini dans le modèle Book.
 
-> **Note :** Comme nous l'avons dit précédemment, notre URL correcte est en réalité `catalog/book/<digits>` (comme nous sommes dans l'application **catalog**, `/catalog/` est supposé).
+> **Note :** Comme nous l'avons dit précédemment, notre URL correcte est en réalité `catalog/book/<digits>` (comme nous sommes dans l'application **catalog**, `/catalog/` est supposé).
 
 > **Attention :** La vue générique basée sur classe "détail" _s'attend_ à recevoir un paramètre appelé **pk**. Si vous écrivez votre propre fonction, vous pouvez utiliser le nom que vous voulez pour votre paramètre, ou même passer l'information avec un argument non nommé.
 
@@ -240,7 +240,7 @@ Dans ce cas, nous utilisons `'<int:pk>'` pour capturer l'id du livre, qui doit
 
 > **Note :** Vous n'aurez pas besoin de cette section pour achever le tutoriel ! Nous en parlons parce que nous savons que cette option vous sera probablement utile dans votre avenir centré sur Django.
 
-La recherche de pattern fournie par `path()` est simple et utile pour les cas (très communs) où vous voulez seulement capturer _n'importe quelle_ chaîne ou entier. Si vous avez besoin d'un filtre plus affiné (par exemple pour filtrer seulement les chaînes qui ont un certain nombre de caractères), alors vous pouvez utiliser la méthode [re_path()](https://docs.djangoproject.com/en/2.1/ref/urls/#django.urls.re_path).
+La recherche de pattern fournie par `path()` est simple et utile pour les cas (très communs) où vous voulez seulement capturer _n'importe quelle_ chaîne ou entier. Si vous avez besoin d'un filtre plus affiné (par exemple pour filtrer seulement les chaînes qui ont un certain nombre de caractères), alors vous pouvez utiliser la méthode [re_path()](https://docs.djangoproject.com/en/2.1/ref/urls/#django.urls.re_path).
 
 Cette méthode est utilisée exactement comme `path()`, sauf qu'elle vous permet de spécifier un pattern utilisant une [Expression régulière](https://docs.python.org/3/library/re.html). Par exemple, le chemin précédent pourrait avoir été écrit ainsi :
 
@@ -264,7 +264,7 @@ L'essentiel de ce que vous aurez besoin de savoir pour déclarer une recherche d
 | \*              | Recherche zéro ou plus occurrence(s) du caractère précédent. Par exemple, pour rechercher "rien ou un mot", vous pourriez utiliser `\w*`.                                                                                                                                  |
 | ( )             | Capture la partie du pattern contenue dans les parenthèses. Toutes les valeurs capturées seront passées à la vue en tant que paramètres non nommés (si plusieurs patterns sont capturés, les paramètres associés seront fournis dans l'ordre de déclaration des captures). |
 | (?P<_name_>...) | Capture le pattern (indiqué par…) en tant que variable nommée (dans ce cas "name"). Les valeurs capturées sont passées à la vue avec le nom spécifié. Votre vue doit par conséquent déclarer un argument avec le même nom !                                               |
-| [  ]            | Recherche l'un des caractères contenus dans cet ensemble. Par exemple, [abc] va rechercher "a" ou "b" ou "c". [-\w] va rechercher le caractère "-" ou tout caractère de mot.                                                                                               |
+| [  ]            | Recherche l'un des caractères contenus dans cet ensemble. Par exemple, [abc] va rechercher "a" ou "b" ou "c". [-\w] va rechercher le caractère "-" ou tout caractère de mot.                                                                                               |
 
 La plupart des autres caractères peuvent être pris littéralement.
 
@@ -283,13 +283,13 @@ Considérons quelques exemples réels de patterns :
       <td>
         <p>
           C'est là l'expression régulière utilisée dans notre mappeur d'URL.
-          Elle recherche une chaîne qui a <code>book/</code> au commencement de
+          Elle recherche une chaîne qui a <code>book/</code> au commencement de
           la ligne (<strong>^book/</strong>), ensuite a au moins 1 digit
           (<code>\d+</code>), et enfin se termine (avec aucun caractère
           non-digit avant la fin du marqueur de ligne).
         </p>
         <p>
-          Elle capture aussi tous les digits <strong>(?P&#x3C;pk>\d+)</strong>
+          Elle capture aussi tous les digits <strong>(?P&#x3C;pk>\d+)</strong>
           et les passe à la vue dans un paramètre appelé 'pk'.
           <strong
             >Les valeurs capturées sont toujours passées comme des chaînes
@@ -299,7 +299,7 @@ Considérons quelques exemples réels de patterns :
         <p>
           Par exemple, cette expression régulière trouverait une correspondance
           dans l'URL <code>book/1234</code>, et enverrait alors une
-          variable <code>pk='1234'</code> à la vue.
+          variable <code>pk='1234'</code> à la vue.
         </p>
       </td>
     </tr>
@@ -316,7 +316,7 @@ Considérons quelques exemples réels de patterns :
       <td><strong>r'^book/(?P&#x3C;stub>[-\w]+)$'</strong></td>
       <td>
         <p>
-          Ceci recherche une chaîne qui a <code>book/</code> au commencement de
+          Ceci recherche une chaîne qui a <code>book/</code> au commencement de
           la ligne (<strong>^book/</strong>), ensuite a au moins 1 caractère
           étant <em>soit</em> un '-', <em>soit</em> un caractère de mot
           (<strong>[-\w]+</strong>), puis la fin. Ce pattern capture aussi cet
@@ -357,16 +357,16 @@ Ouvrez **catalog/views.py**, et copiez-y le code suivant à la fin du fichier :
 
 ```python
 class BookDetailView(generic.DetailView):
-    model = Book
+    model = Book
 ```
 
-C'est tout ! La seule chose que vous avez à faire maintenant, c'est créer un template appelé **/locallibrary/catalog/templates/catalog/book_detail.html**, et la vue va lui passer les informations de la base de donnée concernant l'enregistrement `Book` spécifique, extrait par le mapper d'URL. À l'intérieur du template, vous pouvez accéder à la liste de livres via la variable de template appelée `object` OU `book` (c'est-à-dire, de manière générique, "le_nom_du_modèle").
+C'est tout ! La seule chose que vous avez à faire maintenant, c'est créer un template appelé **/locallibrary/catalog/templates/catalog/book_detail.html**, et la vue va lui passer les informations de la base de donnée concernant l'enregistrement `Book` spécifique, extrait par le mapper d'URL. À l'intérieur du template, vous pouvez accéder à la liste de livres via la variable de template appelée `object` OU `book` (c'est-à-dire, de manière générique, "le_nom_du_modèle").
 
 Si vous en avez besoin, vous pouvez changer le template utilisé et le nom de l'objet-contexte utilisé pour désigner le livre dans le template. Vous pouvez aussi renommer les méthodes pour, par exemple, ajouter des informations supplémentaires au contexte.
 
 #### Que se passe-t-il si l'enregistrement n'existe pas ?
 
-Si l'enregistrement demandé n'existe pas, alors la vue générique basée sur classe "détail" va lever automatiquement pour vous une exception `Http404` — en production, cela va automatiquement afficher une page appropriée "ressource non trouvée", que vous pouvez personnaliser si besoin.
+Si l'enregistrement demandé n'existe pas, alors la vue générique basée sur classe "détail" va lever automatiquement pour vous une exception `Http404` — en production, cela va automatiquement afficher une page appropriée "ressource non trouvée", que vous pouvez personnaliser si besoin.
 
 Juste pour vous donner une idée de la manière dont tout cela fonctionne, le morceau de code ci-dessous montre comment vous implémenteriez cette vue comme une fonction si vous n'utilisiez **pas** la vue générique basée sur classe "détail".
 
@@ -380,21 +380,21 @@ def book_detail_view(request, primary_key):
     return render(request, 'catalog/book_detail.html', context={'book': book})
 ```
 
-La vue essaie d'abord d'obtenir du modèle l'enregistrement correspondant au livre spécifié. Si cela échoue, la vue devrait lever une exception `Http404` pour indiquer que le livre est "non trouvé". L'étape finale est ensuite, comme d'habitude, d'appeler `render()` avec le nom du template et les données concernant le livre dans le paramètre `context` (comme un dictionnaire).
+La vue essaie d'abord d'obtenir du modèle l'enregistrement correspondant au livre spécifié. Si cela échoue, la vue devrait lever une exception `Http404` pour indiquer que le livre est "non trouvé". L'étape finale est ensuite, comme d'habitude, d'appeler `render()` avec le nom du template et les données concernant le livre dans le paramètre `context` (comme un dictionnaire).
 
-Une alternative consiste à utiliser la fonction `get_object_or_404()` comme un raccourci pour lever une exception `Http404` si l'enregistrement n'existe pas.
+Une alternative consiste à utiliser la fonction `get_object_or_404()` comme un raccourci pour lever une exception `Http404` si l'enregistrement n'existe pas.
 
 ```python
 from django.shortcuts import get_object_or_404
 
 def book_detail_view(request, primary_key):
-    book = get_object_or_404(Book, pk=primary_key)
+    book = get_object_or_404(Book, pk=primary_key)
     return render(request, 'catalog/book_detail.html', context={'book': book})
 ```
 
 ### Créer le template de la Vue Détail
 
-Créez le fichier HTML **/locallibrary/catalog/templates/catalog/book_detail.html**, et copiez-y le code ci-dessous. Comme on l'a dit plus haut, c'est là le nom de template attendu par défaut par la vue générique basée sur classe _detail_ (pour un modèle appelé `Book` dans une application appelée `catalog`).
+Créez le fichier HTML **/locallibrary/catalog/templates/catalog/book_detail.html**, et copiez-y le code ci-dessous. Comme on l'a dit plus haut, c'est là le nom de template attendu par défaut par la vue générique basée sur classe _detail_ (pour un modèle appelé `Book` dans une application appelée `catalog`).
 
 ```html
 {% extends "base_generic.html" %}
@@ -434,10 +434,10 @@ Bien qu'en un peu plus grand, presque tout ce qu'il y a dans ce template a été
 
 - Nous étendons notre template de base et récrivons le block "content".
 - Nous utilisons une procédure conditionnelle pour déterminer s'il faut ou non afficher tel contenu spécifique.
-- Nous utilisons une boucle `for` pour boucler sur des listes d'objets.
-- Nous accédons aux champs du contexte en utilisant la notation à point (parce que nous avons utilisé la vue générique _detail_, le contexte est nommé `book` ; nous pourrions aussi utiliser "`object`").
+- Nous utilisons une boucle `for` pour boucler sur des listes d'objets.
+- Nous accédons aux champs du contexte en utilisant la notation à point (parce que nous avons utilisé la vue générique _detail_, le contexte est nommé `book` ; nous pourrions aussi utiliser "`object`").
 
-Une chose intéressante que nous n'avons pas encore vue, c'est la fonction `book.bookinstance_set.all()`. Cette méthode est "automagiquement" construite par Django pour retourner l'ensemble des enregistrements `BookInstance` associés à un `Book` particulier.
+Une chose intéressante que nous n'avons pas encore vue, c'est la fonction `book.bookinstance_set.all()`. Cette méthode est "automagiquement" construite par Django pour retourner l'ensemble des enregistrements `BookInstance` associés à un `Book` particulier.
 
 ```python
 {% for copy in book.bookinstance_set.all %}
@@ -445,9 +445,9 @@ Une chose intéressante que nous n'avons pas encore vue, c'est la fonction `book
 {% endfor %}
 ```
 
-Cette méthode est requise parce que vous déclarez un champ `ForeignKey` (one-to-many) seulement du côté "one" de la relation. Comme vous ne faites rien pour déclarer la relation dans les modèles opposés ("many"), Django n'a pas de champ pour récupérer l'ensemble des enregistrements associés. Pour remédier à ce problème, Django construit une fonction justement nommée "recherche inversée", que vous pouvez utiliser. Le nom de la fonction est construit en mettant en minuscule le nom du modèle où a été déclarée la `ForeignKey`, suivi de `_set` (ainsi la fonction créée dans `Book` est `bookinstance_set()`).
+Cette méthode est requise parce que vous déclarez un champ `ForeignKey` (one-to-many) seulement du côté "one" de la relation. Comme vous ne faites rien pour déclarer la relation dans les modèles opposés ("many"), Django n'a pas de champ pour récupérer l'ensemble des enregistrements associés. Pour remédier à ce problème, Django construit une fonction justement nommée "recherche inversée", que vous pouvez utiliser. Le nom de la fonction est construit en mettant en minuscule le nom du modèle où a été déclarée la `ForeignKey`, suivi de `_set` (ainsi la fonction créée dans `Book` est `bookinstance_set()`).
 
-> **Note :** Ici nous utilisons `all()` pour récupérer tous les enregistrements (comportement par défaut). Bien que vous puissiez utiliser la méthode `filter()` pour obtenir un sous-ensemble d'enregistrements dans le code, vous ne pouvez faire cela directement dans le template, parce que vous ne pouvez pas spécifier d'arguments dans les fonctions.
+> **Note :** Ici nous utilisons `all()` pour récupérer tous les enregistrements (comportement par défaut). Bien que vous puissiez utiliser la méthode `filter()` pour obtenir un sous-ensemble d'enregistrements dans le code, vous ne pouvez faire cela directement dans le template, parce que vous ne pouvez pas spécifier d'arguments dans les fonctions.
 >
 > Prenez garde également que, si vous ne définissez pas un ordre (dans votre vue basée sur classe ou votre modèle), vous allez voir des erreurs de ce genre en provenance du serveur de développement :
 >
@@ -457,13 +457,13 @@ Cette méthode est requise parce que vous déclarez un champ `ForeignKey` (one-
 >
 > Ceci vient du fait que l'[objet paginator](https://docs.djangoproject.com/en/2.1/topics/pagination/#paginator-objects) s'attend à ce qu'un ORDER BY soit exécuté sur votre base de données sous-jacente. Sans cela il ne peut pas être sûr que les enregistrements retournés sont vraiment dans le bon ordre !
 >
-> Ce tutoriel n'a pas (encore !) traité de la **pagination**, mais comme vous ne pouvez pas utiliser `sort_by()` et passer un paramètre (pour la même raison que le `filter()` décrit précédemment), vous avez le choix entre trois options :
+> Ce tutoriel n'a pas (encore !) traité de la **pagination**, mais comme vous ne pouvez pas utiliser `sort_by()` et passer un paramètre (pour la même raison que le `filter()` décrit précédemment), vous avez le choix entre trois options :
 >
-> 1.  Ajouter un `ordering` lors de la déclaration de la `class Meta` dans votre modèle.
-> 2.  Ajouter un attribut `queryset` dans votre vue personnalisée basée sur classe, en spécifiant un `order_by()`.
-> 3.  Ajouter une méthode `get_queryset` à votre vue personnalisée basée sur classe, et préciser de même un `order_by()`.
+> 1.  Ajouter un `ordering` lors de la déclaration de la `class Meta` dans votre modèle.
+> 2.  Ajouter un attribut `queryset` dans votre vue personnalisée basée sur classe, en spécifiant un `order_by()`.
+> 3.  Ajouter une méthode `get_queryset` à votre vue personnalisée basée sur classe, et préciser de même un `order_by()`.
 >
-> Si vous décidez d'ajouter une `class Meta` au modèle `Author` (solution peut-être pas aussi flexible que personnaliser la vue basée sur classe, mais assez facile), vous allez vous retrouver avec quelque chose de ce genre :
+> Si vous décidez d'ajouter une `class Meta` au modèle `Author` (solution peut-être pas aussi flexible que personnaliser la vue basée sur classe, mais assez facile), vous allez vous retrouver avec quelque chose de ce genre :
 >
 >     class Author(models.Model):
 >         first_name = models.CharField(max_length=100)
@@ -480,7 +480,7 @@ Cette méthode est requise parce que vous déclarez un champ `ForeignKey` (one-
 >         class Meta:
 >             ordering = ['last_name']
 >
-> Bien sûr le champ n'est pas forcément `last_name` : ce pourrait être un autre champ.
+> Bien sûr le champ n'est pas forcément `last_name` : ce pourrait être un autre champ.
 >
 > Dernier point, mais non le moindre : vous devriez trier les données par un attribut/colonne qui a réellement un index (unique ou pas) dans votre base de données, afin d'éviter des problèmes de performance. Bien sûr ce n'est pas requis ici (ce serait un peu exagéré avec si peu de livres et d'utilisateurs), mais il vaut mieux avoir cela à l'esprit pour de futurs projets.
 
@@ -525,34 +525,34 @@ Ouvrez **/locallibrary/catalog/templates/_base_generic.html_**, et copiez-y, sou
 ```python
 {% block content %}{% endblock %}
 
-  {% block pagination %}
-    {% if is_paginated %}
-        <div class="pagination">
-            <span class="page-links">
-                {% if page_obj.has_previous %}
-                    <a href="\{{ request.path }}?page=\{{ page_obj.previous_page_number }}">previous</a>
-                {% endif %}
-                <span class="page-current">
-                    Page \{{ page_obj.number }} of \{{ page_obj.paginator.num_pages }}.
-                </span>
-                {% if page_obj.has_next %}
-                    <a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}">next</a>
-                {% endif %}
-            </span>
-        </div>
-    {% endif %}
-  {% endblock %} 
+  {% block pagination %}
+    {% if is_paginated %}
+        <div class="pagination">
+            <span class="page-links">
+                {% if page_obj.has_previous %}
+                    <a href="\{{ request.path }}?page=\{{ page_obj.previous_page_number }}">previous</a>
+                {% endif %}
+                <span class="page-current">
+                    Page \{{ page_obj.number }} of \{{ page_obj.paginator.num_pages }}.
+                </span>
+                {% if page_obj.has_next %}
+                    <a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}">next</a>
+                {% endif %}
+            </span>
+        </div>
+    {% endif %}
+  {% endblock %}
 ```
 
-Le `page_obj` est un objet [Paginator](https://docs.djangoproject.com/en/2.1/topics/pagination/#paginator-objects) qui n'existera que si une pagination est utilisée dans la page courante. Cet objet vous permet de récupérer toutes les informations sur la page courante, les pages précédentes, combien il y a de pages au total, etc.
+Le `page_obj` est un objet [Paginator](https://docs.djangoproject.com/en/2.1/topics/pagination/#paginator-objects) qui n'existera que si une pagination est utilisée dans la page courante. Cet objet vous permet de récupérer toutes les informations sur la page courante, les pages précédentes, combien il y a de pages au total, etc.
 
-Nous utilisons `\{{ request.path }}` pour récupérer l'URL de la page courante, afin de créer les liens de pagination. Cela est utile, car cette variable est indépendante de l'objet que nous sommes en train de paginer.
+Nous utilisons `\{{ request.path }}` pour récupérer l'URL de la page courante, afin de créer les liens de pagination. Cela est utile, car cette variable est indépendante de l'objet que nous sommes en train de paginer.
 
 C'est tout !
 
 ### À quoi cela ressemble-t-il ?
 
-La capture d'écran ci-dessous montre à quoi ressemble la pagination. Si vous n'avez pas entré plus de 10 titres dans votre base de données, vous pouvez tester plus facilement cette pagination en diminuant le nombre spécifié à la ligne `paginate_by` dans votre fichier **catalog/views.py**. Pour obtenir le résultat ci-dessous, nous avons changé la ligne en `paginate_by = 2`.
+La capture d'écran ci-dessous montre à quoi ressemble la pagination. Si vous n'avez pas entré plus de 10 titres dans votre base de données, vous pouvez tester plus facilement cette pagination en diminuant le nombre spécifié à la ligne `paginate_by` dans votre fichier **catalog/views.py**. Pour obtenir le résultat ci-dessous, nous avons changé la ligne en `paginate_by = 2`.
 
 Les liens de pagination sont affichés en bas de la page, avec les liens suivant/précédent affichés selon la page sur laquelle nous nous trouvons.
 
@@ -569,7 +569,7 @@ Le code requis pour le mappeur d'URL et les vues sera virtuellement identique au
 
 > **Note :**
 >
-> - Une fois que vous aurez créé le mappeur d'URL pour la page "liste d'auteurs", vous aurez besoin de mettre aussi à jour le lien **All authors** dans le template de base. Suivez la [même procédure](#Update_the_base_template) que celle adoptée quand nous avons mis à jour le lien **All books**.
+> - Une fois que vous aurez créé le mappeur d'URL pour la page "liste d'auteurs", vous aurez besoin de mettre aussi à jour le lien **All authors** dans le template de base. Suivez la [même procédure](#Update_the_base_template) que celle adoptée quand nous avons mis à jour le lien **All books**.
 > - Une fois créé le mappeur d'URL pour la page de détails sur l'auteur, vous devrez aussi mettre à jour le [template de la vue détail d'un livre](#Creating_the_Detail_View_template) (**/locallibrary/catalog/templates/catalog/book_detail.html**), de sorte que le lien vers l'auteur pointe vers votre nouvelle page de détails sur l'auteur (au lieu d'être une URL vide). La ligne va avoir comme changement la balise montrée en gras ci-dessous.
 >
 >   ```html
diff --git a/files/fr/learn/server-side/django/home_page/index.md b/files/fr/learn/server-side/django/home_page/index.md
index 7140bf6583..5ff1163613 100644
--- a/files/fr/learn/server-side/django/home_page/index.md
+++ b/files/fr/learn/server-side/django/home_page/index.md
@@ -67,8 +67,8 @@ La liste des URLs dont nous aurons besoin se résume à :
 
 - `catalog/` — Pour la page d'accueil.
 - `catalog/books/` — Pour la liste des livres.
-- `catalog/authors/` — Pour la liste des auteurs.
-- `catalog/book/<id>` — Pour disposer du détail de chacun des livres mis en prêt et identifié par identifiant `<id>` unique (le troisième livre enregistré est consultable dans le détail via l'URL `/catalog/book/3`).
+- `catalog/authors/` — Pour la liste des auteurs.
+- `catalog/book/<id>` — Pour disposer du détail de chacun des livres mis en prêt et identifié par identifiant `<id>` unique (le troisième livre enregistré est consultable dans le détail via l'URL `/catalog/book/3`).
 - `catalog/author/<id>` — De la même manière, le détail de chacun des auteurs enregistrés, identifié de la même manière par sa clé primaire *`<id>`*.
 
 Bien que les données dépendent du contenu de la base de données, les trois premières URLs retournent les résultats de requêtes sans informations supplémentaires ; c'est le cas de la page d'accueil qui donnera des décomptes de contenus et des pages sur la liste des livres ou des auteurs.
@@ -107,7 +107,7 @@ urlpatterns = [
 
 La fonction `path()` sert à définir les éléments suivants :
 
-- Un modèle d'URL qui, dans le cas présent, est une chaîne vide : `''`. Nous évoquerons ultérieurement les modèles d'URL plus en détail quand nous travaillerons les autres vues.
+- Un modèle d'URL qui, dans le cas présent, est une chaîne vide : `''`. Nous évoquerons ultérieurement les modèles d'URL plus en détail quand nous travaillerons les autres vues.
 - Une fonction de vue, ici `views.index`, qui sera sollicitée quand le modèle d'URL sera détecté et une fonction Python qui sera appelée pour traiter l'appel d'URL est présent dans le fichier **views.py** du module `catalog`.
 
 Le paramètre `name` utilisé dans la fonction `path()` permet aussi de définir un identifiant unique qui sert à lier les pages vers celle-ci au sein de l'application. Vous pouvez alors l'utiliser à l'envers en routant dynamiquement des pages en lien vers cette ressource :
@@ -185,7 +185,7 @@ Vous pouvez en faire l'expérience dès à présent, après avoir redémarré vo
 
 Django utilise un langage pour les gabarits qui permet de résoudre certains sujets liés aux pages HTML. En l'occurrence, dans le site web de la bibliothèque nous aurons des bandeaux de navigateur et autres codes d'en-tête à réutiliser. Dans une vision classique, il faudrait récrire dans chaque page le même code pour obtenir le même rendu. Si cela peut se concevoir pour quelques pages, ce procédé devient vite inopérant voire risqué avec un site dynamique complet.
 
-Le langage de gabarit de Django permet de définir un modèle de base puis de l'étendre ensuite. L'extrait de code ci-dessous vient du fichier de gabarit **base_generic.html**, vous constaterez qu'il s'y mélange du code HTML et des sections nommées contenu dans entre des marqueurs `block` et `endblock` qui peut contenir ou non des données.
+Le langage de gabarit de Django permet de définir un modèle de base puis de l'étendre ensuite. L'extrait de code ci-dessous vient du fichier de gabarit **base_generic.html**, vous constaterez qu'il s'y mélange du code HTML et des sections nommées contenu dans entre des marqueurs `block` et `endblock` qui peut contenir ou non des données.
 
 > **Note :** Les marqueurs de gabarits sont des fonctions que vous pouvez utiliser dans un modèle pour parcourir des listes, effectuer des opérations conditionnelles en fonction de la valeur d'une variable, etc. Outre les balises de modèle, la syntaxe de gabarit vous permet de référencer les variables qui sont transmises au modèle à partir de la vue et d'utiliser des filtres de gabarit pour mettre en forme les variables (par exemple, pour convertir une chaîne en minuscule).
 
@@ -208,7 +208,7 @@ Dans l'extrait ci-dessous vous avec trois sections nommées qui pourront être r
 </html>
 ```
 
-Lorsque l'on définit un gabarit pour une vue particulière, il convient de définir une base de gabarit et d'utiliser la balise `extends` dans une page complémentaire comme dans l'exemple ci-dessous. Ensuite, il est nécessaire de préciser les sections qui seront modifiées en utilisant les balises `block`/`endblock` qui définissent le début et la fin de section.
+Lorsque l'on définit un gabarit pour une vue particulière, il convient de définir une base de gabarit et d'utiliser la balise `extends` dans une page complémentaire comme dans l'exemple ci-dessous. Ensuite, il est nécessaire de préciser les sections qui seront modifiées en utilisant les balises `block`/`endblock` qui définissent le début et la fin de section.
 
 À titre indicatif, l'extrait ci-dessous présente la manière d'activer à l'aide de la balise `extends` le remplacement de la section `content`. La page HTML générée inclura la structure de la page définie plus haut et le code généré à la fois pour la section `title`, mais avec les éléments nouveaux, ci-dessous, pour la section `content`.
 
@@ -223,7 +223,7 @@ Lorsque l'on définit un gabarit pour une vue particulière, il convient de déf
 
 #### Le gabarit de base de la bibliothèque
 
-Nous allons nous appuyer sur le gabarit ci-dessous pour construire la page de base de la bibliothèque locale. Vous le constatez, il contient des éléments HTML et des blocs dédiés Django pour spécifier trois sections `title`, `sidebar`, et `content`. La section `title` contient un titre par défaut. De même la section `sidebar` contient un lien vers la liste des livres et des auteurs qui pourra être modifié ensuite.
+Nous allons nous appuyer sur le gabarit ci-dessous pour construire la page de base de la bibliothèque locale. Vous le constatez, il contient des éléments HTML et des blocs dédiés Django pour spécifier trois sections `title`, `sidebar`, et `content`. La section `title` contient un titre par défaut. De même la section `sidebar` contient un lien vers la liste des livres et des auteurs qui pourra être modifié ensuite.
 
 > **Note :** Il y a aussi deux balises supplémentaires : `url` et `load static`. Elles seront étudiées dans le chapitre suivant.
 
@@ -298,9 +298,9 @@ Maintenant créez le fichier HTML **_index.html_** dans le dossier **/locallibra
 
 Dans la section contenu dynamique, des emplacements réservés sont définis pour pouvoir y insérer le contenu de variable qui sont identifiées à l'intérieur de doubles accolades (ouvrantes et fermantes). Pour une meilleure visibilité ces emplacements et les variables nommées sont identifiées en caractères gras dans l'extrait de code ci-dessus.
 
-> **Note :** Vous pouvez constater simplement que les balises de gabarit (fonctions) et les balises de variables sont entre accolades ; double accolades pour une variable (`\{{ num_books }}`), et simple accolade avec le pourcentage (`{% extends "base_generic.html" %}`) pour les balises.
+> **Note :** Vous pouvez constater simplement que les balises de gabarit (fonctions) et les balises de variables sont entre accolades ; double accolades pour une variable (`\{{ num_books }}`), et simple accolade avec le pourcentage (`{% extends "base_generic.html" %}`) pour les balises.
 
-Gardez en mémoire que les variables utilisées dans les gabarits sont des clés d'un dictionnaire `context` transmis à la fonction `render()` de la vue (revenez à l'exemple plus haut, ou l'extrait ci-dessous). La fonction `render()` traitera le dictionnaire pour restituer une page HTML où les variables nommées auront été remplacées par leur valeur dans le dictionnaire.
+Gardez en mémoire que les variables utilisées dans les gabarits sont des clés d'un dictionnaire `context` transmis à la fonction `render()` de la vue (revenez à l'exemple plus haut, ou l'extrait ci-dessous). La fonction `render()` traitera le dictionnaire pour restituer une page HTML où les variables nommées auront été remplacées par leur valeur dans le dictionnaire.
 
 ```python
 context = {
@@ -352,21 +352,21 @@ Par défaut Django ne sait pas où sont vos gabarits, vous devez lui indiquer o�
 
 ```python
 TEMPLATES = [
-    {
-        'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [
-            os.path.join(BASE_DIR, 'templates'),
-        ],
-        'APP_DIRS': True,
-        'OPTIONS': {
-            'context_processors': [
-                'django.template.context_processors.debug',
-                'django.template.context_processors.request',
-                'django.contrib.auth.context_processors.auth',
-                'django.contrib.messages.context_processors.messages',
-            ],
-        },
-    },
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [
+            os.path.join(BASE_DIR, 'templates'),
+        ],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
 ]
 ```
 
diff --git a/files/fr/learn/server-side/django/introduction/index.md b/files/fr/learn/server-side/django/introduction/index.md
index d5005c4b8e..6ce246058a 100644
--- a/files/fr/learn/server-side/django/introduction/index.md
+++ b/files/fr/learn/server-side/django/introduction/index.md
@@ -40,7 +40,7 @@ Dans ce premier article sur Django, nous allons répondre à la question suivant
 
 ## Qu'est ce que Django?
 
-Django est un framework Python de haut niveau, permettant un développement rapide de sites internet, sécurisés, et maintenables. Créé par des développeurs experimentés, Django prend en charge la plupart des tracas du développement web, vous pouvez donc vous concentrer sur l'écriture de votre application sans avoir besoin de réinventer la roue. Il est gratuit, open source, a une communauté active, une bonne documentation, et plusieurs options pour du support gratuit ou non.
+Django est un framework Python de haut niveau, permettant un développement rapide de sites internet, sécurisés, et maintenables. Créé par des développeurs experimentés, Django prend en charge la plupart des tracas du développement web, vous pouvez donc vous concentrer sur l'écriture de votre application sans avoir besoin de réinventer la roue. Il est gratuit, open source, a une communauté active, une bonne documentation, et plusieurs options pour du support gratuit ou non.
 
 Django vous aide à écrire une application qui est:
 
@@ -48,7 +48,7 @@ Django vous aide à écrire une application qui est:
   - : Django suit la philosophie "Piles incluses" et fournit presque tout ce que les développeurs pourraient vouloir faire. Comme tout ce dont vous avez besoin est une partie de ce "produit", tout fonctionne parfaitement ensemble, suivant des principes de conception cohérents, il possède également une [documentation complète](https://docs.djangoproject.com/en/2.0/) et à jour.
 - Polyvalent
 
-  - : Django peut être (et a été) utilisé pour créer presque tous les genres de sites — du gestionnaire de données aux wikis, jusqu'aux réseaux sociaux et aux sites d'actualités. Il peut fonctionner avec n'importe quelle infrastructure côté client, et peut renvoyer des données dans quasiment n'importe quel format (notamment HTML, RSS, JSON, XML, etc). Le site sur lequel vous lisez en ce moment est basé sur Django!
+  - : Django peut être (et a été) utilisé pour créer presque tous les genres de sites — du gestionnaire de données aux wikis, jusqu'aux réseaux sociaux et aux sites d'actualités. Il peut fonctionner avec n'importe quelle infrastructure côté client, et peut renvoyer des données dans quasiment n'importe quel format (notamment HTML, RSS, JSON, XML, etc). Le site sur lequel vous lisez en ce moment est basé sur Django!
 
     Tandis qu'il fournit presque toutes les fonctionnalités dont vous pourriez avoir besoin (comme des base de données populaires, des moteurs de modélisation, etc.), il peut tout de même être étendu pour utiliser d'autres composants si besoin.
 
@@ -61,7 +61,7 @@ Django vous aide à écrire une application qui est:
     Django active par défaut la protection contre beaucoup de vulnérabilités, comme les injections SQL, le cross-site scripting, le cross-site request forgery et le clickjacking (voir [Website security](/fr/docs/Learn/Server-side/First_steps/Website_security) pour plus de détails sur ce genre d'attaques).
 
 - Scalable
-  - : Django utilise une architecture composite "shared-nothing" (chaque composant de l'architecture est indépendant des autres, et peut ainsi être remplacé ou changé si besoin). En ayant des séparations nettes entres les différentes parties, Django peut se scaler lors d'une hausse de trafic en ajoutant du hardware à tous les niveaux : serveurs cache, serveurs de base de données, serveurs d'application. Certains des sites les plus fréquentés ont réussi à scaler Django pour répondre à leur demande (par exemple, Instagram et Disqus pour ne nommer qu'eux deux).
+  - : Django utilise une architecture composite "shared-nothing" (chaque composant de l'architecture est indépendant des autres, et peut ainsi être remplacé ou changé si besoin). En ayant des séparations nettes entres les différentes parties, Django peut se scaler lors d'une hausse de trafic en ajoutant du hardware à tous les niveaux : serveurs cache, serveurs de base de données, serveurs d'application. Certains des sites les plus fréquentés ont réussi à scaler Django pour répondre à leur demande (par exemple, Instagram et Disqus pour ne nommer qu'eux deux).
 - Maintenable
   - : Les principes de design du code Django encouragent la création d'un code simple à maintenir et réutilisable. Il fait notamment appel à la philosophie du Ne Vous Répétez Pas (DRY pour Don't Repeat Yourself en anglais), afin d'éviter toute duplication superflue, réduisant la taille de votre code. Django promeut aussi le regroupement de fonctionnalités reliées entre elles en "applications" réutilisables et, à un plus bas niveau, regroupe des lignes de code dépendantes entre elles en modules (suivant les lignes du motif d'architecture Modèle-vue-contrôleur (MVC)).
 - Portable
@@ -73,17 +73,17 @@ Django vous aide à écrire une application qui est:
 
 Django a continué à se développer et à s'améliorer, depuis sa première sortie (1.0) en Septembre 2008 jusqu'à la version 2.0 récemment sortie (2017). Chaque sortie a ajouté son lot de nouvelles fonctionnalités et de corrections de bugs, allant du support de nouveaux types de bases de données, de moteurs de templates et de cache, à l'addition de fonctions et de classes de vues 'génériques' (qui réduisent la quantité de code que doivent écrire les développeurs pour tout un tas de tâches de programmation).
 
-> **Note :** Consultez les [notes de publication](https://docs.djangoproject.com/en/1.10/releases/) sur le site web de Django pour voir les changements apportés dans les versions récentes, ainsi que tout le travail accompli pour améliorer Django.
+> **Note :** Consultez les [notes de publication](https://docs.djangoproject.com/en/1.10/releases/) sur le site web de Django pour voir les changements apportés dans les versions récentes, ainsi que tout le travail accompli pour améliorer Django.
 
 Désormais, Django est un projet open-source collaboratif florissant, avec plusieurs milliers d'utilisateurs et de contributeurs. Bien que plusieurs fonctionnalités reflètent encore ses origines, Django a évolué en un framework versatile capable de développer n'importe quel type de site web.
 
 ## À quel point Django est-il populaire ?
 
-Il n'y a pas encore de mesure toute prête et définitive de la popularité des frameworks orientés serveur (bien que des sites comme [Hot Frameworks](http://hotframeworks.com/) tentent d'estimer cette popularité en utilisant des moyens comme le comptage de projets GitHub et de questions sur StackOverflow pour chaque plateforme). Une meilleure question serait plutôt est-ce que Django est "suffisamment populaire" pour éviter les problèmes des plateformes moins populaires. Va-t-il continuer d'évoluer ? Pourrez-vous obtenir de l'aide si vous en avez besoin ? Aurez-vous des opportunités d'emploi si vous apprenez Django ?
+Il n'y a pas encore de mesure toute prête et définitive de la popularité des frameworks orientés serveur (bien que des sites comme [Hot Frameworks](http://hotframeworks.com/) tentent d'estimer cette popularité en utilisant des moyens comme le comptage de projets GitHub et de questions sur StackOverflow pour chaque plateforme). Une meilleure question serait plutôt est-ce que Django est "suffisamment populaire" pour éviter les problèmes des plateformes moins populaires. Va-t-il continuer d'évoluer ? Pourrez-vous obtenir de l'aide si vous en avez besoin ? Aurez-vous des opportunités d'emploi si vous apprenez Django ?
 
 Si l'on se base sur la quantité de sites web reconnus qui utilisent Django, la quantité de personnes contribuant à son code source, et la quantité de personnes fournissant du support libre ou payant, alors oui, Django est un framework populaire !
 
-Parmi les sites web qui utilisent Django, on retrouve : Disqus, Instagram, la Knight Foundation, la MacArthur Foundation, Mozilla, National Geographic, l'Open Knowledge Foundation, Pinterest et Open Stack (source : [Page d'accueil de Django](https://www.djangoproject.com/)).
+Parmi les sites web qui utilisent Django, on retrouve : Disqus, Instagram, la Knight Foundation, la MacArthur Foundation, Mozilla, National Geographic, l'Open Knowledge Foundation, Pinterest et Open Stack (source : [Page d'accueil de Django](https://www.djangoproject.com/)).
 
 ## Django est-il restrictif ?
 
@@ -103,10 +103,10 @@ Les applications web Django regroupent généralement le code qui gère chacune
 
 ![](basic-django.png)
 
-- **URLs :**  Bien qu'il soit possible de traiter les requêtes de chaque URL via une fonction unique, il est bien plus viable d'écrire une fonction de vue isolée qui gèrera chaque ressource. Un mapper URL est utilisé pour rediriger les requêtes HTTP à la vue appropriée d'après l'URL de requête. Le mapper URL peut aussi faire la correspondance entre des patterns de chaînes de caractères ou de nombres qui apparaissent dans une URL et passer ces derniers comme données dans une fonction de vue.
-- **Vues :** Une vue est une fonction de gestion des requêtes, qui reçoit des requêtes HTTP et renvoie des réponses HTTP. Les vues accèdent aux données requises pour satisfaire des requêtes via des _modèles_, et délèguent le formatage des réponses aux *templates*.
-- **Modèles :** Les modèles sont des objets Python, qui définissent la structure des données d'une application, et fournissent des mécanismes de gestion (ajout, modification, suppression) et requêtent les enregistrements d'une base de données.
-- **Templates:** Un template est un fichier texte qui définit la structure ou la mise en page d'un fichier (comme une page HTML), avec des balises utilisées pour représenter le contenu. Une *vue* peut créer une page HTML en dynamique en utilisant un template HTML, en la peuplant avec les données d'un *modèle*. Un template peut-être utilisé pour définir la structure de n'importe quel type de fichier; il n'est pas obligatoire que ce dernier soit un HTML !
+- **URLs :** Bien qu'il soit possible de traiter les requêtes de chaque URL via une fonction unique, il est bien plus viable d'écrire une fonction de vue isolée qui gèrera chaque ressource. Un mapper URL est utilisé pour rediriger les requêtes HTTP à la vue appropriée d'après l'URL de requête. Le mapper URL peut aussi faire la correspondance entre des patterns de chaînes de caractères ou de nombres qui apparaissent dans une URL et passer ces derniers comme données dans une fonction de vue.
+- **Vues :** Une vue est une fonction de gestion des requêtes, qui reçoit des requêtes HTTP et renvoie des réponses HTTP. Les vues accèdent aux données requises pour satisfaire des requêtes via des _modèles_, et délèguent le formatage des réponses aux *templates*.
+- **Modèles :** Les modèles sont des objets Python, qui définissent la structure des données d'une application, et fournissent des mécanismes de gestion (ajout, modification, suppression) et requêtent les enregistrements d'une base de données.
+- **Templates:** Un template est un fichier texte qui définit la structure ou la mise en page d'un fichier (comme une page HTML), avec des balises utilisées pour représenter le contenu. Une *vue* peut créer une page HTML en dynamique en utilisant un template HTML, en la peuplant avec les données d'un *modèle*. Un template peut-être utilisé pour définir la structure de n'importe quel type de fichier; il n'est pas obligatoire que ce dernier soit un HTML !
 
 > **Note :** Django mentionne cette organisation sous le nom d'architecture "Modèle Vue Template". Elle a plusieurs similarités avec l'architecture [Modèle Vue Contrôleur](/fr/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture).
 
@@ -114,27 +114,27 @@ Les sections ci-dessous vous donneront une idée de ce à quoi ressemble ces dif
 
 ### Envoyer la requête à la bonne vue (urls.py)
 
-Le mapper URL est généralement stocké dans un fichier nommé **urls.py**. Dans l'exemple ci-dessous, le mapper (`urlpatterns`) définit une liste de mappings entre des *routes* (des *patterns* d'URL spécifiques*)* et leur fonction de vue correspondante. Si une requête HTTP est reçue dont l'URL correspond à un pattern spécifié, la fonction vue associée sera alors appelée et passée dans la requête.
+Le mapper URL est généralement stocké dans un fichier nommé **urls.py**. Dans l'exemple ci-dessous, le mapper (`urlpatterns`) définit une liste de mappings entre des *routes* (des *patterns* d'URL spécifiques*)* et leur fonction de vue correspondante. Si une requête HTTP est reçue dont l'URL correspond à un pattern spécifié, la fonction vue associée sera alors appelée et passée dans la requête.
 
     urlpatterns = [
         path('admin/', admin.site.urls),
-        path('book/<int:id>/', views.book-detail, name='book-detail'),
+        path('book/<int:id>/', views.book-detail, name='book-detail'),
         path('catalog/', include('catalog.urls')),
         re_path(r'^([0-9]+)/$', views.best),
     ]
 
-L'objet `urlpatterns` est une liste de fonctions `path()` et/ou `re_path()`(les listes en Python sont définies en utilisant des crochets), où des éléments sont séparés par des virgules et peuvent avoir une [virgule de traîne optionnelle](https://docs.python.org/2/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples). Par exemple : `[item1, item2, item3,]`).
+L'objet `urlpatterns` est une liste de fonctions `path()` et/ou `re_path()`(les listes en Python sont définies en utilisant des crochets), où des éléments sont séparés par des virgules et peuvent avoir une [virgule de traîne optionnelle](https://docs.python.org/2/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples). Par exemple : `[item1, item2, item3,]`).
 
 Le premier argument de chaque méthode est une route (pattern) qui sera reconnu.
-La méthode `path()` utilise des chevrons pour définir les parties de l'URL qui seront capturées et passées dans les fonctions vues comme arguments nommés. La fonction `re_path()` utilise une approche de correspondance de pattern flexible, connue sous le nom d'expression régulière. Nous parlerons de ces dernières dans un prochain article !
+La méthode `path()` utilise des chevrons pour définir les parties de l'URL qui seront capturées et passées dans les fonctions vues comme arguments nommés. La fonction `re_path()` utilise une approche de correspondance de pattern flexible, connue sous le nom d'expression régulière. Nous parlerons de ces dernières dans un prochain article !
 
-Le second argument est une autre fonction qui sera appelée quand le pattern sera reconnu. La notation `views.book-detail` indique que la fonction s'appelle `book-detail()` , et qu'elle se trouve dans un module appelé `views` (i.e. dans un fichier intitulé `views.py`)
+Le second argument est une autre fonction qui sera appelée quand le pattern sera reconnu. La notation `views.book-detail` indique que la fonction s'appelle `book-detail()` , et qu'elle se trouve dans un module appelé `views` (i.e. dans un fichier intitulé `views.py`)
 
 ### Traiter la requête (views.py)
 
 Les vues sont le coeur des applications web. Elles reçoivent des requêtes HTTP de clients web et renvoient des réponses HTTP. Entretemps, elles mobilisent les autres ressources du framework pour accéder aux bases de données, préparer le rendu des templates, etc.
 
-L'exemple ci-dessous montre une fonction vue minimale `index()`, qui pourrait être appelée par notre mapper URL de la section précédente. Comme toutes les fonctions vues, elle reçoit un objet  `HttpRequest` comme paramètre (`request`) et renvoie un objet `HttpResponse`. Dans notre cas on ne fait rien de spécial avec la requête; et notre réponse ne renvoie qu'une chaîne de caractères brute. Nous vons montrerons une requête plus intéressante dans une autre section.
+L'exemple ci-dessous montre une fonction vue minimale `index()`, qui pourrait être appelée par notre mapper URL de la section précédente. Comme toutes les fonctions vues, elle reçoit un objet  `HttpRequest` comme paramètre (`request`) et renvoie un objet `HttpResponse`. Dans notre cas on ne fait rien de spécial avec la requête; et notre réponse ne renvoie qu'une chaîne de caractères brute. Nous vons montrerons une requête plus intéressante dans une autre section.
 
 ```python
 ## nom du fichier : view.py (fonction vue Django)
@@ -150,16 +150,16 @@ def index(request):
 
 > **Note :** Un peu de Python :
 >
-> - Les [modules Python](https://docs.python.org/3/tutorial/modules.html) sont des librairies de fonctions, stockés dans des fichiers séparés que l'on peut vouloir utiliser dans notre code. Ici, nous importons l'objet  `HttpResponse` du module `django.http` pour qu'on puisse l'utiliser dans notre vue : `from django.http import HttpResponse` . Il y a d'autres façons d'importer quelques objets (ou tous les objets) d'un module.
-> - Les fonctions sont déclarées en utilisant le mot-clé `def` comme indiqué ci-dessus, avec des paramètres nommés listés entre parenthèses après le nom de la fonction; la ligne se termine ensuite par deux points. Notez que les lignes suivantes sont **indentées**.  L'indentation est importante, car elle spécifie que les lignes de code sont contenues dans un bloc particulier (l'indentation obligatoire est un élément clé de Python, et une des raisons pour lesquelles le code Python est si simple à lire).
+> - Les [modules Python](https://docs.python.org/3/tutorial/modules.html) sont des librairies de fonctions, stockés dans des fichiers séparés que l'on peut vouloir utiliser dans notre code. Ici, nous importons l'objet  `HttpResponse` du module `django.http` pour qu'on puisse l'utiliser dans notre vue : `from django.http import HttpResponse` . Il y a d'autres façons d'importer quelques objets (ou tous les objets) d'un module.
+> - Les fonctions sont déclarées en utilisant le mot-clé `def` comme indiqué ci-dessus, avec des paramètres nommés listés entre parenthèses après le nom de la fonction; la ligne se termine ensuite par deux points. Notez que les lignes suivantes sont **indentées**.  L'indentation est importante, car elle spécifie que les lignes de code sont contenues dans un bloc particulier (l'indentation obligatoire est un élément clé de Python, et une des raisons pour lesquelles le code Python est si simple à lire).
 
 Les vues sont généralement stockées dans un fichier nommé **views.py**.
 
 ### Définir les modèles de données (models.py)
 
-Les applications web Django gèrent et requêtent les données via des objets Python appelés modèles. Les modèles définissent la structure des données stockées, ce qui inclut le champ *types* ainsi qu'au besoin leur taille maximum, les valeurs par défaut, les options de listes pouvant être sélectionnées, le texte d'aide pour la documentation — vous pouvez choisir ce dont vous avez besoin par rapport aux spécifications de votre projet. Une fois que vous avez choisi la base de données que vous souhaitez utiliser, vous n'avez pas du tout besoin de communiquer avec elle directement — vous n'avez qu'à écrire la structure de votre modèle, Django s'occupe du sale boulot de la communication avec la base de données pour vous.
+Les applications web Django gèrent et requêtent les données via des objets Python appelés modèles. Les modèles définissent la structure des données stockées, ce qui inclut le champ *types* ainsi qu'au besoin leur taille maximum, les valeurs par défaut, les options de listes pouvant être sélectionnées, le texte d'aide pour la documentation — vous pouvez choisir ce dont vous avez besoin par rapport aux spécifications de votre projet. Une fois que vous avez choisi la base de données que vous souhaitez utiliser, vous n'avez pas du tout besoin de communiquer avec elle directement — vous n'avez qu'à écrire la structure de votre modèle, Django s'occupe du sale boulot de la communication avec la base de données pour vous.
 
-L'extrait de code ci-dessous montre un modèle Django très simple pour un objet `Team`. La classe `Team` est dérivée de la classe Django `models.Model`. Elle définit le nom et le niveau de l'équipe comme des chaînes de caractères et elle spécifie le nombre maximum de caractères pouvant être stockés pour chaque enregistrement. Le champ `team_level` peut avoir plusieurs valeurs, donc nous le définissons comme une liste de choix, puis on fournit à la classe un mapping entre les choix qui seront affichés et les données stockées, avec une valeur par défaut.
+L'extrait de code ci-dessous montre un modèle Django très simple pour un objet `Team`. La classe `Team` est dérivée de la classe Django `models.Model`. Elle définit le nom et le niveau de l'équipe comme des chaînes de caractères et elle spécifie le nombre maximum de caractères pouvant être stockés pour chaque enregistrement. Le champ `team_level` peut avoir plusieurs valeurs, donc nous le définissons comme une liste de choix, puis on fournit à la classe un mapping entre les choix qui seront affichés et les données stockées, avec une valeur par défaut.
 
 ```python
 # nom du fichier : models.py
@@ -167,28 +167,28 @@ L'extrait de code ci-dessous montre un modèle Django très simple pour un objet
 from django.db import models
 
 class Team(models.Model):
-    team_name = models.CharField(max_length=40)
-
-    TEAM_LEVELS = (
-        ('U09', 'Under 09s'),
-        ('U10', 'Under 10s'),
-        ('U11', 'Under 11s'),
-        ...  # lister les autres niveaux d'équipes
-    )
-    team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
+    team_name = models.CharField(max_length=40)
+
+    TEAM_LEVELS = (
+        ('U09', 'Under 09s'),
+        ('U10', 'Under 10s'),
+        ('U11', 'Under 11s'),
+        ...  # lister les autres niveaux d'équipes
+    )
+    team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
 ```
 
 > **Note :** Un peu de Python :
 >
-> - Python supporte la "programmation orientée-objet", un type de programmation où l'on organise notre code en objets, ce qui inclut les données et fonctions liées qui agiront sur les données. Les objets peuvent être hérités/étendus/dérivés d'autres objets, ce qui permet à ces objets de partager un comportement commun. En Python, on utilise le mot-clé `class` pour définir le "squelette" d'un objet. On peut créer plusieurs *instances* spécifiques de ce type d'objet d'après le modèle d'une classe.
+> - Python supporte la "programmation orientée-objet", un type de programmation où l'on organise notre code en objets, ce qui inclut les données et fonctions liées qui agiront sur les données. Les objets peuvent être hérités/étendus/dérivés d'autres objets, ce qui permet à ces objets de partager un comportement commun. En Python, on utilise le mot-clé `class` pour définir le "squelette" d'un objet. On peut créer plusieurs *instances* spécifiques de ce type d'objet d'après le modèle d'une classe.
 >
->   Ainsi par exemple, nous avons ici une classe `Team`, dérivée de la classe `Model`.  Cela signifie que c'est un modèle, et qu'elle contiendra toutes les méthodes d'un modèle, mais qu'on peut aussi lui donner des caractéristiques spécifiques. Dans notre modèle, nous définissons les champs dont aura besoin notre base de données, en leur donnant des noms spécifiques. Django utilisera ces définitions, ce qui inclut aussi le nom des champs, pour créer la base de données sous-jacente.
+>   Ainsi par exemple, nous avons ici une classe `Team`, dérivée de la classe `Model`.  Cela signifie que c'est un modèle, et qu'elle contiendra toutes les méthodes d'un modèle, mais qu'on peut aussi lui donner des caractéristiques spécifiques. Dans notre modèle, nous définissons les champs dont aura besoin notre base de données, en leur donnant des noms spécifiques. Django utilisera ces définitions, ce qui inclut aussi le nom des champs, pour créer la base de données sous-jacente.
 
 ### Requêter les données (views.py)
 
 Le modèle Django fournit une API de requête simplifiée qui nous permet de faire des recherches dans une base de données. Cette API peut inclure plusieurs champs à la fois en supportant plusieurs critères (e.g. exactement, insensible à la casse, supérieur à, etc.), et peut supporter des déclarations complexes (par exemple, vous pouvez spécifier une recherche sur les équipes U11 ayant un nom d'équipe commençant par "Fr" ou se terminant par "al").
 
-L'extrait de code ci-dessous montre une fonction vue (gestionnaire de ressources) affichant toutes nos équipes U09. La ligne en gras montre comment on peut utiliser l'API de requête pour filtrer tous les enregistrements où le champ `team_level` comprend strictement le texte 'U09' (notez comment ce critère est passé dans la fonction `filter()` comme argument, où le nom du champ et le type de correspondance sont séparés par un double underscore : **team_level\_\_exact**).
+L'extrait de code ci-dessous montre une fonction vue (gestionnaire de ressources) affichant toutes nos équipes U09. La ligne en gras montre comment on peut utiliser l'API de requête pour filtrer tous les enregistrements où le champ `team_level` comprend strictement le texte 'U09' (notez comment ce critère est passé dans la fonction `filter()` comme argument, où le nom du champ et le type de correspondance sont séparés par un double underscore : **team_level\_\_exact**).
 
 ```python
 ## nom du fichier : views.py
@@ -197,18 +197,18 @@ from django.shortcuts import render
 from .models import Team
 
 def index(request):
-    list_teams = Team.objects.filter(team_level__exact="U09")
-    context = {'youngest_teams': list_teams}
-    return render(request, '/best/index.html', context)
+    list_teams = Team.objects.filter(team_level__exact="U09")
+    context = {'youngest_teams': list_teams}
+    return render(request, '/best/index.html', context)
 ```
 
-Cette fonction utilise la fonction `render()` pour créer la `HttpResponse` qui est renvoyée au navigateur. Cette fonction est un _raccourci_; elle créée un fichier HTML en combinant un template HTML spécifique et des données à insérer dans le template (fournies dans la variable appelée "`context`"). Dans la prochaine section, nous vous montrons comment des données sont insérées dans le template pour générer le HTML.
+Cette fonction utilise la fonction `render()` pour créer la `HttpResponse` qui est renvoyée au navigateur. Cette fonction est un _raccourci_; elle créée un fichier HTML en combinant un template HTML spécifique et des données à insérer dans le template (fournies dans la variable appelée "`context`"). Dans la prochaine section, nous vous montrons comment des données sont insérées dans le template pour générer le HTML.
 
 ### Renvoyer les données (templates HTML)
 
 Les systèmes template vous permettent de spécifier la structure d'un document en output, en utilisant des paramètres fictifs qui seront substitués par les données lorsque la page est générée. Les templates sont souvent utilisées pour créer du HTML, mais ils peuvent aussi être utilisées pour créer d'autres types de documents. Django supporte à la fois son système natif de template ainsi qu'une autre librairie Python populaire prête à l'emploi appelée Jinja2 (il peut aussi supporter d'autres systèmes au besoin).
 
-L'extrait de code ci-dessous montre à quoi pourrait ressembler le template HTML de la section précédente une fois appelé par la fonction `render().` Ce template a été écrit avec l'hypothèse qu'il aurait accès à une liste de variables appelées `youngest_teams` lorsqu'il est généré (contenu dans la variable `context` dans la fonction `render()` ci-dessus). Dans le squelette HTML nous avons une expression qui vérifie tout d'abord que la variable `youngest_teams` existe, puis itère dessus dans une boucle `for` . À chaque itération, le template affiche la valeur du `team_name` de chaque équipe dans un élément {{htmlelement("li")}}.
+L'extrait de code ci-dessous montre à quoi pourrait ressembler le template HTML de la section précédente une fois appelé par la fonction `render().` Ce template a été écrit avec l'hypothèse qu'il aurait accès à une liste de variables appelées `youngest_teams` lorsqu'il est généré (contenu dans la variable `context` dans la fonction `render()` ci-dessus). Dans le squelette HTML nous avons une expression qui vérifie tout d'abord que la variable `youngest_teams` existe, puis itère dessus dans une boucle `for` . À chaque itération, le template affiche la valeur du `team_name` de chaque équipe dans un élément {{htmlelement("li")}}.
 
 ```python
 ## nom du fichier : best/templates/best/index.html
@@ -218,13 +218,13 @@ L'extrait de code ci-dessous montre à quoi pourrait ressembler le template HTML
 <body>
 
  {% if youngest_teams %}
-    <ul>
-    {% for team in youngest_teams %}
-        <li>\{\{ team.team_name \}\}</li>
-    {% endfor %}
-    </ul>
+    <ul>
+    {% for team in youngest_teams %}
+        <li>\{\{ team.team_name \}\}</li>
+    {% endfor %}
+    </ul>
 {% else %}
-    <p>No teams are available.</p>
+    <p>No teams are available.</p>
 {% endif %}
 
 </body>
@@ -235,11 +235,11 @@ L'extrait de code ci-dessous montre à quoi pourrait ressembler le template HTML
 
 Les sections précédentes présentent les caractéristiques principales que vous utiliserez dans presque toutes vos applications web : mapping URL, vues, modèles et templates. Parmi les autres caractéristiques offertes par Django, on peut aussi trouver :
 
-- **Formulaires** : Les formulaires HTML sont utilisés pour collecter des données utilisateurs qui seront traitées sur le serveur. Django simplifie la création, la validation et le traitement des formulaires.
-- **Authentification et permissions des utilisateurs**: Django inclut un système d'authentification utilisateur et de gestion des permissions robuste créé avec la sécurité comme priorité lors de sa conception.
-- **Cache** : Générer du contenu en dynamique demande bien plus de ressources computationnelles (et est plus lent) que de servir du contenu statique. Django fournit un système de cache flexible qui vous permet de stocker toute ou une partie d'une page afin qu'elle ne soit re-générée que lorsque c'est nécessaire.
-- **Administration du site** : L'administration du site avec Django est incluse par défaut lorsque vous créez une application en utilisant le squelette de base. Django permet de créer très simplement une page d'administration où les administrateurs peuvent créer, éditer et voir n'importe quel modèle de données sur votre site.
-- **Sérialisation des données** : Django permet de simplifier la sérialisation et de servir vos données en XML ou en JSON. Cela peut être utile si vous créez un service web (un site web dont le seul but est de servir des données qui seront utilisées par d'autres applications ou sites, mais n'affiche rien par lui-même), ou quand vous créez un site web où le code côté client s'occupe d'afficher les données.
+- **Formulaires**&nbsp;: Les formulaires HTML sont utilisés pour collecter des données utilisateurs qui seront traitées sur le serveur. Django simplifie la création, la validation et le traitement des formulaires.
+- **Authentification et permissions des utilisateurs**: Django inclut un système d'authentification utilisateur et de gestion des permissions robuste créé avec la sécurité comme priorité lors de sa conception.
+- **Cache**&nbsp;: Générer du contenu en dynamique demande bien plus de ressources computationnelles (et est plus lent) que de servir du contenu statique. Django fournit un système de cache flexible qui vous permet de stocker toute ou une partie d'une page afin qu'elle ne soit re-générée que lorsque c'est nécessaire.
+- **Administration du site**&nbsp;: L'administration du site avec Django est incluse par défaut lorsque vous créez une application en utilisant le squelette de base. Django permet de créer très simplement une page d'administration où les administrateurs peuvent créer, éditer et voir n'importe quel modèle de données sur votre site.
+- **Sérialisation des données**&nbsp;: Django permet de simplifier la sérialisation et de servir vos données en XML ou en JSON. Cela peut être utile si vous créez un service web (un site web dont le seul but est de servir des données qui seront utilisées par d'autres applications ou sites, mais n'affiche rien par lui-même), ou quand vous créez un site web où le code côté client s'occupe d'afficher les données.
 
 ## Sommaire
 
diff --git a/files/fr/learn/server-side/django/models/index.md b/files/fr/learn/server-side/django/models/index.md
index 97aefd906c..4ec6ede427 100644
--- a/files/fr/learn/server-side/django/models/index.md
+++ b/files/fr/learn/server-side/django/models/index.md
@@ -49,7 +49,7 @@ Vous pourriez aussi utiliser les modèles pour définir des listes d'options (co
 
 Le choix du modèle étant posé, nous avons à considérer les relations entre les objets. Django permet d'établir trois types de relation : les relations un à un qui mettent en relation un et un seul objet avec un autre (`OneToOneField`), les relations un à n qui partage l'appartenance d'un objet à avec d'autres (`ForeignKey`) et les relations n à n qui associent des groupes d'objets entre-eux (`ManyToManyField`).
 
-Avec ces éléments présents à l'esprit, le diagramme  de classes UML ci-dessous décrit les objets de la bibliothèque.
+Avec ces éléments présents à l'esprit, le diagramme de classes UML ci-dessous décrit les objets de la bibliothèque.
 
 ![LocalLibrary Model UML](local_library_model_uml.png)
 
@@ -70,24 +70,24 @@ Les objets sont **toujours** définis dans le fichier **models.py** de chaque ap
     from django.db import models
 
     class MyModelName(models.Model):
-        """A typical class defining a model, derived from the Model class."""
+        """A typical class defining a model, derived from the Model class."""
 
-        # Fields
-        my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')
-        ...
+        # Fields
+        my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')
+        ...
 
-        # Metadata
+        # Metadata
         class Meta:
-            ordering = ['-my_field_name']
+            ordering = ['-my_field_name']
 
-        # Methods
-        def get_absolute_url(self):
-            """Returns the url to access a particular instance of MyModelName."""
-            return reverse('model-detail-view', args=[str(self.id)])
+        # Methods
+        def get_absolute_url(self):
+            """Returns the url to access a particular instance of MyModelName."""
+            return reverse('model-detail-view', args=[str(self.id)])
 
-        def __str__(self):
-            """String for representing the MyModelName object (in Admin site etc.)."""
-            return self.my_field_name
+        def __str__(self):
+            """String for representing the MyModelName object (in Admin site etc.)."""
+            return self.my_field_name
 
 Détaillons ce qu'il en retourne :
 
@@ -99,7 +99,7 @@ Chaque objet peut contenir autant d'attributs que de besoin et de quelque type q
 my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')
 ```
 
-Dans l'exemple ci-dessus, le champs est une chaîne de caractères — de type `models.CharField` —  dont le nom est `my_field_name`. Les champs ont des types pré-définis représentés par une classe d'objet Django qui va permettre de caractériser une champ du modèle de données. Cela permet aussi de valider les données qui seront fournies via les formulaires du site web décrits avec le langage HTML. Les classes caractérisant les type de champs peuvent accepter des paramètres pour préciser les contraintes appliquées à ce champ. Dans cet exemple, deux arguments sont indiqués :
+Dans l'exemple ci-dessus, le champs est une chaîne de caractères — de type `models.CharField` —  dont le nom est `my_field_name`. Les champs ont des types pré-définis représentés par une classe d'objet Django qui va permettre de caractériser une champ du modèle de données. Cela permet aussi de valider les données qui seront fournies via les formulaires du site web décrits avec le langage HTML. Les classes caractérisant les type de champs peuvent accepter des paramètres pour préciser les contraintes appliquées à ce champ. Dans cet exemple, deux arguments sont indiqués :
 
 - `max_length=20` — Défini que ce champs fait au plus 20 caractères.
 - `help_text='Enter field documentation'` — attribue un label par défaut qui sera affiché dans la page web par le navigateur.
@@ -126,7 +126,7 @@ L'ensemble [des options de champs](https://docs.djangoproject.com/fr/2.2/ref/mod
 
 Vous trouverez ci-dessous les arguments les principaux type de champs :
 
-- [CharField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#django.db.models.CharField) caractérise un champ de type chaîne de caractères de taille maximale fixe. Ce champ nécessite l'option obligatoire `max_length` pour définir la taille maximale de la chaîne de caractère.
+- [CharField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#django.db.models.CharField) caractérise un champ de type chaîne de caractères de taille maximale fixe. Ce champ nécessite l'option obligatoire `max_length` pour définir la taille maximale de la chaîne de caractère.
 - [TextField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#django.db.models.TextField) caractérise un champs texte (de longeur non définit dans la base de données). Si l'option `max_length` est utilisé, celui-ci précisera la taille du champs texte des formulaires web mais n'aura pas d'impact dans la définition du champs en base de données.
 - [IntegerField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#django.db.models.IntegerField "django.db.models.IntegerField") caractérise un champs de type nombre entier.
 - [DateField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#datefield) et [DateTimeField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#datetimefield) sont des type utilisées pour caractériser une date et une heure comme les objets `datetime.date` et `datetime.datetime` en Python. Les options (incompatibles ensemble) les plus courantes pour ces champs sont l'enregistrement au moment de la sauvegarde (`auto_now=True`), l'enregistrement à la création de l'objet (`auto_now_add`) et une valeur par défaut (`default)` qui pourra être changée par l'utilisateur.
@@ -140,7 +140,7 @@ L'ensemble [des types de champs](https://docs.djangoproject.com/fr/2.2/ref/model
 
 #### Métadonnées
 
-Vous avez la capacité de déclarer des métadonnées à l'aide de la classe  `class Meta`, comme précisé ci-dessous :
+Vous avez la capacité de déclarer des métadonnées à l'aide de la classe  `class Meta`, comme précisé ci-dessous :
 
 ```python
 class Meta:
@@ -157,7 +157,7 @@ ordering = ['title', '-pubdate']
 
 Les livres sont présenté dans l'ordre alphabétique de leur titre, puis dans l'ordre chronologique du plus récent au plus ancien.
 
-Un autre attribut très utile est celui d'un nom vernaculaire pour la classe, `verbose_name`  peut être au singulier et au pluriel :
+Un autre attribut très utile est celui d'un nom vernaculaire pour la classe, `verbose_name`  peut être au singulier et au pluriel :
 
 ```python
 verbose_name = 'BetterName'
@@ -177,7 +177,7 @@ Comme tout objet Python, une classe héritée de `model` peut utiliser des méth
 
 ```python
 def __str__(self):
-    return self.field_name
+    return self.field_name
 ```
 
 Une seconde méthode très utilisée dans le cadriciel Django est `get_absolute_url()`. Elle permet de fournir un URL pour afficher dans le site web le contenu de de chacun des enregistrements associés au modèle de données décrit. Si vous utilisez cette méthode, Django ajoutera un bouton pour permet de visualiser le détail des enregistrements. Classiquement, une méthode `get_absolute_url()` est de la forme :
@@ -196,7 +196,7 @@ Vous pouvez aussi définir toute les méthodes dont vous aurez besoin pour manip
 
 ### Administration des données
 
-A partir du moment où vous avez créé votre modèle de données, vous pouvez manipuler les instances pour créer, mettre à jour ou supprimer les enregistrements en base de données. Vous pouvez aussi faire des requêtes pour obtenir tout ou parti des enregistrements de la base. L'objet de cette section est d'évoquer la manière de manipuler ces données et sera revu progressivement dans les avancées de l'application Bibliothèque.
+A partir du moment où vous avez créé votre modèle de données, vous pouvez manipuler les instances pour créer, mettre à jour ou supprimer les enregistrements en base de données. Vous pouvez aussi faire des requêtes pour obtenir tout ou parti des enregistrements de la base. L'objet de cette section est d'évoquer la manière de manipuler ces données et sera revu progressivement dans les avancées de l'application Bibliothèque.
 
 #### Créer et modifier des enregistrements
 
@@ -252,7 +252,7 @@ Le marqueur "double souligné" permet de construire une chaîne de navigation à
 books_containing_genre = Book.objects.filter(genre__name__icontains='fiction')
 ```
 
-> **Note :** Vous pouvez construire une chemin pour naviguer dans autant de niveaux de relation (`ForeignKey`/`ManyToManyField`) que vous en avez besoin en concaténant des noms de champs à l'aide  (\_\_) . Si par exemple vous souhaitez trouver un livre (`Book`) qui possède différents type (`type`) de couvertures (`cover`) identifiées par des noms (`name`) alors le chemin sera du type : `type__cover__name__exact='hard'.`
+> **Note :** Vous pouvez construire une chemin pour naviguer dans autant de niveaux de relation (`ForeignKey`/`ManyToManyField`) que vous en avez besoin en concaténant des noms de champs à l'aide  (\_\_) . Si par exemple vous souhaitez trouver un livre (`Book`) qui possède différents type (`type`) de couvertures (`cover`) identifiées par des noms (`name`) alors le chemin sera du type : `type__cover__name__exact='hard'.`
 
 La mise en oeuvre des requêtes est très riches en fonction des modèles et des relations, de sous-ensemble de données, etc. Pour une informations détaillées, vous devez consulter [les requêtes](https://docs.djangoproject.com/fr/2.2/topics/db/queries/) sur le site de référence de Django.
 
@@ -268,17 +268,17 @@ from django.db import models
 
 ### L'objet Genre
 
-Cet objet est utilisé pour décrire et enregistrer le genre littéraire des livres — par exemple une fiction, une polard ou un roman. Comme cela a été évoqué précédemment, nous créons un modèle de données plutôt que de gérer cela à l'aide de texte libre ou de codage en dur. Copiez le texte ci-dessous à la fin du fichier _models.py_.
+Cet objet est utilisé pour décrire et enregistrer le genre littéraire des livres — par exemple une fiction, une polard ou un roman. Comme cela a été évoqué précédemment, nous créons un modèle de données plutôt que de gérer cela à l'aide de texte libre ou de codage en dur. Copiez le texte ci-dessous à la fin du fichier _models.py_.
 
 ```python
 class Genre(models.Model):
-    """Cet objet représente une catégorie ou un genre littéraire."""
-    name = models.CharField(max_length=200, help_text='Enter a book genre (e.g. Science Fiction)')
+    """Cet objet représente une catégorie ou un genre littéraire."""
+    name = models.CharField(max_length=200, help_text='Enter a book genre (e.g. Science Fiction)')
 
-    def __str__(self):
-        """Cette fonction est obligatoirement requise par Django.
+    def __str__(self):
+        """Cette fonction est obligatoirement requise par Django.
            Elle retourne une chaîne de caractère pour identifier l'instance de la classe d'objet."""
-        return self.name
+        return self.name
 ```
 
 L'objet, en relation avec la base de données, possède un seul attribut (`name`) de type chaîne de caractères (`CharField`), qui sera utilisé pour décrire le genre d'un livre (limité à 200 caractères). Une option (`help_text)` permet d'utiliser une étiquettes d'aide dans les pages et formulaires du site web. La méthode `__str__()`, qui retourne simplement le nom du genre littéraire de chaque enregistrement. Puisque qu'il n'y a pas de nom vernaculaire (`verbose_name`), le champ sera simplement nommé `Name` dans les formulaires.
@@ -291,37 +291,37 @@ Comme précédemment, vous pouvez copier le descriptif de l'objet Book à la fin
 from django.urls import reverse # Cette fonction est utilisée pour formater les URL
 
 class Book(models.Model):
-    """Cet objet représente un livre (mais ne traite pas les copies présentes en rayon)."""
-    title = models.CharField(max_length=200)
+    """Cet objet représente un livre (mais ne traite pas les copies présentes en rayon)."""
+    title = models.CharField(max_length=200)
 
     # La clé étrangère (ForeignKey) est utilisée car elle représente correcte le modèle de relation en livre et son auteur :
     #  Un livre a un seul auteur, mais un auteur a écrit plusieurs livres.
     # Le type de l'objet Author est déclré comme une chaîne de caractère car
     # la classe d'objet Author n'a pas encore été déclarée dans le fichier
-    author = models.ForeignKey('Author', on_delete=models.SET_NULL, null=True)
+    author = models.ForeignKey('Author', on_delete=models.SET_NULL, null=True)
 
-    summary = models.TextField(max_length=1000, help_text='Enter a brief description of the book')
-    isbn = models.CharField('ISBN', max_length=13, help_text='13 Character <a href="https://www.isbn-international.org/content/what-isbn">ISBN number</a>')
+    summary = models.TextField(max_length=1000, help_text='Enter a brief description of the book')
+    isbn = models.CharField('ISBN', max_length=13, help_text='13 Character <a href="https://www.isbn-international.org/content/what-isbn">ISBN number</a>')
 
-    # Le type ManyToManyField décrit correctement le modèle de relation en un livre et un genre.
+    # Le type ManyToManyField décrit correctement le modèle de relation en un livre et un genre.
     #  un livre peut avoir plusieurs genres littéraire et réciproquement.
-    # Comme la classe d'objets Genre a été définit précédemment, nous pouvons manipuler l'objet.
+    # Comme la classe d'objets Genre a été définit précédemment, nous pouvons manipuler l'objet.
     genre = models.ManyToManyField(Genre, help_text='Select a genre for this book')
 
-    def __str__(self):
-        """Fonction requise par Django pour manipuler les objets Book dans la base de données."""
-        return self.title
+    def __str__(self):
+        """Fonction requise par Django pour manipuler les objets Book dans la base de données."""
+        return self.title
 
-    def get_absolute_url(self):
-        """Cette fonction est requise pas Django, lorsque vous souhaitez détailler le contenu d'un objet."""
-        return reverse('book-detail', args=[str(self.id)])
+    def get_absolute_url(self):
+        """Cette fonction est requise pas Django, lorsque vous souhaitez détailler le contenu d'un objet."""
+        return reverse('book-detail', args=[str(self.id)])
 ```
 
 Le genre littéraire est une relation n à n (`ManyToManyField`) car un livre peut avoir plusieurs genres et inversement. Bien que des livres soient écrits à plusieurs, dans le modèle de données présent un livre n'aura qu'un et un seul auteur. Un auteur est donc vu comme une clé étrangère `(ForeignKey`) de telle sorte qu'un livre n'a qu'un seul auteur et une auteur peut avoir écrit plusieurs livres.
 
-La modélisation des relations entre les objets, c'est le cas pour les deux champs décrits à l'instant, nécessite de manipuler les classes d'objet par leur nom de classe. Vous devez déclarer l'objet par son de classe dans la déclaration de la relation entre les objets, si celui-ci a déjà été déclaré vous pouvez l'utiliser comme un nom d'objet - à l'identique d'une variable Python - ou comme une chaîne de caractère si l'objet n'a pas déjà fait l'objet d'un déclaration. les autres paramètres dans la déclaration des relations permettent de spécifier les comportement des attributs : l'option `null` positionné à `True` permet d'avoir un contenu vide en base de données, la second option `on_delete=models.SET_NULL` qualifie le fonctionnement de cet attribut si l'objet est supprimé en base de données, en l'occurence il peut être positionné à vide en base de données.
+La modélisation des relations entre les objets, c'est le cas pour les deux champs décrits à l'instant, nécessite de manipuler les classes d'objet par leur nom de classe. Vous devez déclarer l'objet par son de classe dans la déclaration de la relation entre les objets, si celui-ci a déjà été déclaré vous pouvez l'utiliser comme un nom d'objet - à l'identique d'une variable Python - ou comme une chaîne de caractère si l'objet n'a pas déjà fait l'objet d'un déclaration. les autres paramètres dans la déclaration des relations permettent de spécifier les comportement des attributs : l'option `null` positionné à `True` permet d'avoir un contenu vide en base de données, la second option `on_delete=models.SET_NULL` qualifie le fonctionnement de cet attribut si l'objet est supprimé en base de données, en l'occurence il peut être positionné à vide en base de données.
 
-Deux méthodes sont déclarées pour cet objet. La méthode `__str__()` obligatoirement requise par Django pour manipuler les instances d'objet et les enregistrements associés en base. La seconde méthode, `get_absolute_url()`, retourne une URL formatée qui peut être utilisée par le cadriciel pour délivrer le détail de chaque instance d'objet de la classe. Le routage d'URL sera associé au nom  `book-detail`, et nous aurons à définir une vue et un gabarit.
+Deux méthodes sont déclarées pour cet objet. La méthode `__str__()` obligatoirement requise par Django pour manipuler les instances d'objet et les enregistrements associés en base. La seconde méthode, `get_absolute_url()`, retourne une URL formatée qui peut être utilisée par le cadriciel pour délivrer le détail de chaque instance d'objet de la classe. Le routage d'URL sera associé au nom  `book-detail`, et nous aurons à définir une vue et un gabarit.
 
 ### L'objet BookInstance
 
@@ -368,7 +368,7 @@ class BookInstance(models.Model):
 De nouveaux types de champs sont utilisés :
 
 - Le type `UUIDField` est utilisé pour traiter d'un identifiant unique de livre comme clé primaire. Ce type de champ permet de générer un identifiant unique pour enregistrer et suivre chacune des copies de chacun des livres.
-- Le type `DateField` est utilisé pour enregistrer la date de retour d'un prêt. Ce champ peut-être vide pour gérer le cas des livres dans les rayonnages c'est-à-dire disponibles pour un prêt. Il est fait appel à la classe `Meta` pour permettre de classer les requêtes sur les objet par date de retr
+- Le type `DateField` est utilisé pour enregistrer la date de retour d'un prêt. Ce champ peut-être vide pour gérer le cas des livres dans les rayonnages c'est-à-dire disponibles pour un prêt. Il est fait appel à la classe `Meta` pour permettre de classer les requêtes sur les objet par date de retr
 - our.
 - Le champ `status` est un type connu (`CharField`) qui définit une liste de choix. Les choix sont définis dans la description de l'objet par l'usage de tuples (une paire clé-valeur) et transmis en option dans la déclaration du champs. Alors que l'utilisateur manipulera les valeurs, les clés seront enregistrées dans la base de données. Enfin, la valeur par défaut est la Maintenance car lorsqu'un ouvrage est créé il n'est pas immédiatement disponible au prêt et n'est pas directement positionné en rayon.
 
diff --git a/files/fr/learn/server-side/django/skeleton_website/index.md b/files/fr/learn/server-side/django/skeleton_website/index.md
index 24d0ecf3ef..c818f04939 100644
--- a/files/fr/learn/server-side/django/skeleton_website/index.md
+++ b/files/fr/learn/server-side/django/skeleton_website/index.md
@@ -59,8 +59,8 @@ Pour [le site web "Bibliothèque locale"](/fr/docs/Learn/Server-side/Django/Tuto
 
 ```bash
 locallibrary/         # Website folder
-    manage.py         # Script to run Django tools for this project (created using django-admin)
-    locallibrary/     # Website/project folder (created using django-admin)
+    manage.py         # Script to run Django tools for this project (created using django-admin)
+    locallibrary/     # Website/project folder (created using django-admin)
     catalog/          # Application folder (created using manage.py)
 ```
 
@@ -77,7 +77,7 @@ mkdir django_projects
 cd django_projects
 ```
 
-Pour créer un nouveau projet avec le quadriciel Django, il suffit d'utiliser la commande  `django-admin startproject`. Le résultat de cette commande sera un sous-dossier du nom du projet dans lequel il suffit de s'y déplacer comme indiqué ci-dessous :
+Pour créer un nouveau projet avec le quadriciel Django, il suffit d'utiliser la commande  `django-admin startproject`. Le résultat de cette commande sera un sous-dossier du nom du projet dans lequel il suffit de s'y déplacer comme indiqué ci-dessous :
 
 ```bash
 django-admin startproject locallibrary
@@ -88,12 +88,12 @@ La commande `django-admin` crée une arboresence contenant des fichiers et un so
 
 ```bash
 locallibrary/
-    manage.py
-    locallibrary/
+    manage.py
+    locallibrary/
         __init__.py
-        settings.py
-        urls.py
-        wsgi.py
+        settings.py
+        urls.py
+        wsgi.py
 ```
 
 Votre répertoire de travail est de la forme :
@@ -117,11 +117,11 @@ La commande ci-dessous va créer l'application _catalog_. Vous devez être dans
 python3 manage.py startapp catalog
 ```
 
-> **Note :** La commande ci-dessus est exécutée dans un environnement Linux/macOS X. Sous Windows, il se peut que la commande soit : `py -3 manage.py startapp catalog`
+> **Note :** La commande ci-dessus est exécutée dans un environnement Linux/macOS X. Sous Windows, il se peut que la commande soit : `py -3 manage.py startapp catalog`
 >
 > Si vous travaillez dans un environnement Windows, l'ensemble de la série didactique est écrite pour un environnement Linux/MacOS. Pensez, alors, à remplacer les commandes `python3` par `py -3`.
 >
-> Si vous utilisez une version postérieure à la version 3.7.0, la commande devrait désormais être  `py manage.py startapp catalog`
+> Si vous utilisez une version postérieure à la version 3.7.0, la commande devrait désormais être  `py manage.py startapp catalog`
 
 Cet outil crée un nouveau dossier, du nom de l'application, et le peuple de fichiers essentiels. La plupart des fichiers ont des noms caractéristiques de leur fonction dans le fonctionnement de Django (par exemple, les vues sont traitées dans **views.py**, le modèle de données dans **models.py**, etc.). Ces fichiers contiennent les éléments minimaux nécessaires à leur utilisation dans le projet.
 
@@ -129,16 +129,16 @@ Le dossier projet _locallibrary_ est agrémenté d'un nouveau sous-dossier _cata
 
 ```bash
 locallibrary/
-    manage.py
-    locallibrary/
-    catalog/
-        admin.py
-        apps.py
-        models.py
-        tests.py
-        views.py
-        __init__.py
-        migrations/
+    manage.py
+    locallibrary/
+    catalog/
+        admin.py
+        apps.py
+        models.py
+        tests.py
+        views.py
+        __init__.py
+        migrations/
 ```
 
 A ceci s'ajoute :
@@ -174,7 +174,7 @@ Le nouvel enregistrement défini l'objet pour cette nouvelle application avec le
 
 Dès à présent, la base de données doit être décrite. Il est souvent recommandé pour minimiser une transition délicate d'utiliser la même base de données en développement et en production. La documentation concernant les [bases de données](https://docs.djangoproject.com/fr/2.2/ref/settings/#databases) prises en charge sont bien décrites sur le site du projet Django.
 
-Le système de gestion de base de données (SGBD) SQLite sera utilisé dans le projet de cette série didactique ; nous n'aurons pas d'accès concurents massifs et ce système ne requiert pas  de paramétrages complémentaires. Ci-dessous la définition dans **settings.py** est nécessaire pour utiliser ce SGBD :
+Le système de gestion de base de données (SGBD) SQLite sera utilisé dans le projet de cette série didactique ; nous n'aurons pas d'accès concurents massifs et ce système ne requiert pas de paramétrages complémentaires. Ci-dessous la définition dans **settings.py** est nécessaire pour utiliser ce SGBD :
 
 ```python
 DATABASES = {
@@ -202,29 +202,29 @@ Il y a deux paramètres à connaître, même s'il ne seront pas modifiés pour l
 
 La création du site web s'appuie sur un routage d'URL et une gestion de la cartographie des URLs dans le fichier **urls.py**) présent dans le dossier du projet. Même si vous pouvez directement utiliser ce fichier pour gérer le routage des URLs, il est recommandé d'utiliser un mécanisme de subsidiarité avec une gestion d'URLs par application. En outre cette méthode de délégation permet une meilleure poratbilité de vos développements dans vos différents projets.
 
-A l'ouverture du fichier **locallibrary/locallibrary/urls.py**,  vous pouvez remarquer les premières instructions sur la manière de gérer la cartographie des URLs.
+A l'ouverture du fichier **locallibrary/locallibrary/urls.py**,  vous pouvez remarquer les premières instructions sur la manière de gérer la cartographie des URLs.
 
 ```python
 """locallibrary URL Configuration
 
 The `urlpatterns` list routes URLs to views. For more information please see:
-    https://docs.djangoproject.com/en/2.1/topics/http/urls/
+    https://docs.djangoproject.com/en/2.1/topics/http/urls/
 Examples:
 Function views
-    1. Add an import:  from my_app import views
-    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
 Class-based views
-    1. Add an import:  from other_app.views import Home
-    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
 Including another URLconf
-    1. Import the include() function: from django.urls import include, path
-    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.contrib import admin
 from django.urls import path
 
 urlpatterns = [
-    path('admin/', admin.site.urls),
+    path('admin/', admin.site.urls),
 ]
 ```
 
@@ -232,7 +232,7 @@ Le routage des URLs est géré à l'aide de la variable `urlpatterns`. Elle cons
 
 > **Note :** Dans la fonction `path()`, une route est une chaîne de caractères définissant une URL ou un motif d'URL. Cette chaîne peut inclure des variables nommées (entre < et >, par exemple `'catalog/<id>/'`). Ce motif correspondra à une URL du type **/catalog/*des_caractères*/**. La chaîne *des_caractères* sera transmis à la vue comme une chaîne de caractère associée à une variable nommée `id`. Ce point sera vu en détails plus loin dans la série didactique.
 
-Ajoutez les lignes ci-dessous à la fin du fichier de manière à ajouter dans la variable `urlpatterns` une nouvelle entrée à la liste des routes. Cette nouvelle entrée permet une nouvelle route pour `catalog/` dont la gestion est déléguée au fichier **urls.py** du module **catalog** (c'est-à-dire le fichier **catalog/urls.py**).
+Ajoutez les lignes ci-dessous à la fin du fichier de manière à ajouter dans la variable `urlpatterns` une nouvelle entrée à la liste des routes. Cette nouvelle entrée permet une nouvelle route pour `catalog/` dont la gestion est déléguée au fichier **urls.py** du module **catalog** (c'est-à-dire le fichier **catalog/urls.py**).
 
 ```python
 # Use include() to add paths from the catalog application
@@ -240,7 +240,7 @@ from django.urls import include
 from django.urls import path
 
 urlpatterns += [
-    path('catalog/', include('catalog.urls')),
+    path('catalog/', include('catalog.urls')),
 ]
 ```
 
@@ -252,7 +252,7 @@ Ajoutez les lignes ci-dessous au bas du fichier **urls.py** :
 #Add URL maps to redirect the base URL to our application
 from django.views.generic import RedirectView
 urlpatterns += [
-    path('', RedirectView.as_view(url='/catalog/', permanent=True)),
+    path('', RedirectView.as_view(url='/catalog/', permanent=True)),
 ]
 ```
 
@@ -281,8 +281,8 @@ Ajoutez les lignes ci-dessous au bas du fichier **urls.py** :
 >
 > ```python
 > urlpatterns = [
->     path('admin/', admin.site.urls),
->     path('catalog/', include('catalog.urls')),
+>     path('admin/', admin.site.urls),
+>     path('catalog/', include('catalog.urls')),
 >     path('', RedirectView.as_view(url='/catalog/')),
 > ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
 > ```
@@ -329,7 +329,7 @@ L'option `migrate` applique les modifications sur la base de données (Django tr
 
 Pendant la phase de développement, vous pouvez tester votre serveur sur un mode local et le consulter avec votre navigateur.
 
-> **Note :** Le serveur local n'est ni robuste ni performant, il n'est donc pas fait pour être utilisé en production, mais il permet d'être autonome pour les travaux de développement. La configuration par défaut de ce serveur est telle que votre site est accessible à l'URL `http://127.0.0.1:8000/`. Cependant, vous pouvez modifier ces paramètres et pour plus d'information vous pouvez consulter la documentation sur le site Django des commandes [django-admin and manage.py: runserver](https://docs.djangoproject.com/fr/2.2/ref/django-admin/#runserver).
+> **Note :** Le serveur local n'est ni robuste ni performant, il n'est donc pas fait pour être utilisé en production, mais il permet d'être autonome pour les travaux de développement. La configuration par défaut de ce serveur est telle que votre site est accessible à l'URL `http://127.0.0.1:8000/`. Cependant, vous pouvez modifier ces paramètres et pour plus d'information vous pouvez consulter la documentation sur le site Django des commandes [django-admin and manage.py: runserver](https://docs.djangoproject.com/fr/2.2/ref/django-admin/#runserver).
 
 Pour démarrer le serveur local, il suffit d'exécuter la commande ci-dessous dans le répertoire du projet (dossier où se trouver **manage.py**) :
 
@@ -371,7 +371,7 @@ Maintenant que ceci est fait, [le site web Local Library](/fr/docs/Learn/Server-
 
 ## A voir aussi...
 
-- [Écriture de votre première application Django, 1ère partie](https://docs.djangoproject.com/fr/2.2/intro/tutorial01/)  (Django docs)
+- [Écriture de votre première application Django, 1ère partie](https://docs.djangoproject.com/fr/2.2/intro/tutorial01/)  (Django docs)
 - [Applications](https://docs.djangoproject.com/fr/2.2/ref/applications/#configuring-applications) (Django Docs). Contains information on configuring applications.
 
 {{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}
diff --git a/files/fr/learn/server-side/django/testing/index.md b/files/fr/learn/server-side/django/testing/index.md
index f1fbaa6eea..e83217446a 100644
--- a/files/fr/learn/server-side/django/testing/index.md
+++ b/files/fr/learn/server-side/django/testing/index.md
@@ -67,23 +67,23 @@ Tester un site web est une tâche complexe, car c'est une opération qui comport
 
 Django fournit un framework de test avec une petite hiérarchie de classes construites sur la librairie standard de Python [`unittest`](https://docs.python.org/3/library/unittest.html#module-unittest "(in Python v3.5)"). Malgré son nom, ce framework de test est utilisable pour les tests unitaires aussi bien que pour les tests d'intégration. Le framework Django ajoute les méthodes et les outils d'une API pour aider à tester un site web et les comportements spécifiques à Django. Ces méthodes vous permettent de simuler des requêtes, d'insérer des données de test et d'inspecter la sortie de votre application. Django fournit aussi une API ([LiveServerTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#liveservertestcase)) et des outils pour [utiliser d'autres frameworks de test](https://docs.djangoproject.com/en/2.1/topics/testing/advanced/#other-testing-frameworks). Par exemple vous pouvez intégrer le célèbre framework [Selenium](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment) pour simuler l'interaction entre un utilisateur et un vrai navigateur.
 
-Pour écrire un test, vous partez de l'une des classes de test de base fournies par Django (ou par _unittest_) ([SimpleTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#simpletestcase), [TransactionTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#transactiontestcase), [TestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#testcase), [LiveServerTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#liveservertestcase)), et ensuite vous écrivez des méthodes séparées pour vérifier que telle fonctionnalité se comporte comme prévu (les tests utilisent des méthodes "assert" pour vérifier qu'une expression retourne `True` ou `False`, ou que deux valeurs sont égales, etc.). Quant vous commencez à lancer un test, le framework exécute les méthodes de test écrites dans vos classes dérivées. Les méthodes de test sont lancées de manière indépendante, avec en commun un réglage initial (_setUp_) et/ou un comportement de fin (_tearDown_) définis dans la classe, comme indiqué ci-dessous.
+Pour écrire un test, vous partez de l'une des classes de test de base fournies par Django (ou par _unittest_) ([SimpleTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#simpletestcase), [TransactionTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#transactiontestcase), [TestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#testcase), [LiveServerTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#liveservertestcase)), et ensuite vous écrivez des méthodes séparées pour vérifier que telle fonctionnalité se comporte comme prévu (les tests utilisent des méthodes "assert" pour vérifier qu'une expression retourne `True` ou `False`, ou que deux valeurs sont égales, etc.). Quant vous commencez à lancer un test, le framework exécute les méthodes de test écrites dans vos classes dérivées. Les méthodes de test sont lancées de manière indépendante, avec en commun un réglage initial (_setUp_) et/ou un comportement de fin (_tearDown_) définis dans la classe, comme indiqué ci-dessous.
 
 ```python
 class YourTestClass(TestCase):
-    def setUp(self):
-        # Setup run before every test method.
-        pass
+    def setUp(self):
+        # Setup run before every test method.
+        pass
 
-    def tearDown(self):
-        # Clean up run after every test method.
-        pass
+    def tearDown(self):
+        # Clean up run after every test method.
+        pass
 
-    def test_something_that_will_pass(self):
-        self.assertFalse(False)
+    def test_something_that_will_pass(self):
+        self.assertFalse(False)
 
-    def test_something_that_will_fail(self):
-        self.assertTrue(False)
+    def test_something_that_will_fail(self):
+        self.assertTrue(False)
 ```
 
 La meilleure classe de base pour la plupart des tests est [django.test.TestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#testcase). Cette classe de test crée une base de données vide avant que ses tests ne soient lancés, et lance toutes les fonctions de test dans sa propre transaction. La classe possède aussi un [Client](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#django.test.Client "django.test.Client") de test, que vous pouvez utiliser pour simuler l'interaction entre un utilisateur et le code au niveau de la vue. Dans les sections suivantes, nous allons nous concentrer sur les tests unitaires, créés en utilisant la classe de base [TestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#testcase).
@@ -94,25 +94,25 @@ La meilleure classe de base pour la plupart des tests est [django.test.TestCase]
 
 Vous pouvez tester tous les aspects de votre code, mais non les librairies ou fonctionnalités faisant partie de Python ou de Django.
 
-Ainsi par exemple, considérez le modèle `Author` défini ci-dessous. Vous n'avez pas besoin de tester explicitement que `first_name` et `last_name` ont été stockés correctement comme `CharField` dans la base de données, car c'est là quelque chose de défini par Django (cependant, bien sûr, vous allez inévitablement tester cette fonctionnalité pendant le développement). Vous n'avez pas non plus besoin de tester que `date_of_birth` a été validé comme champ date, car, encore une fois, cela est implémenté par Django.
+Ainsi par exemple, considérez le modèle `Author` défini ci-dessous. Vous n'avez pas besoin de tester explicitement que `first_name` et `last_name` ont été stockés correctement comme `CharField` dans la base de données, car c'est là quelque chose de défini par Django (cependant, bien sûr, vous allez inévitablement tester cette fonctionnalité pendant le développement). Vous n'avez pas non plus besoin de tester que `date_of_birth` a été validé comme champ date, car, encore une fois, cela est implémenté par Django.
 
 En revanche, vous pouvez tester que les textes utilisés pour les labels (_First name, Last name, Date of birth, Died_), ainsi que le respect de la taille allouée au champ texte (100 caractères), car c'est là une partie de votre propre design et quelque chose qui pourrait être cassé/modifié dans le futur.
 
 ```python
 class Author(models.Model):
-    first_name = models.CharField(max_length=100)
-    last_name = models.CharField(max_length=100)
-    date_of_birth = models.DateField(null=True, blank=True)
-    date_of_death = models.DateField('Died', null=True, blank=True)
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
 
-    def get_absolute_url(self):
-        return reverse('author-detail', args=[str(self.id)])
+    def get_absolute_url(self):
+        return reverse('author-detail', args=[str(self.id)])
 
-    def __str__(self):
-        return '%s, %s' % (self.last_name, self.first_name)
+    def __str__(self):
+        return '%s, %s' % (self.last_name, self.first_name)
 ```
 
-De même, vous pouvez tester que les méthodes personnalisées `get_absolute_url()` et `__str__()` se comportent comme prévu, car elles appartiennent à votre logique code/métier. Dans le cas de `get_absolute_url()`, vous pouvez supposer que la méthode Django `reverse()` a été implémentée correctement, aussi ce que vous allez tester, c'est que la vue associée a été effectivement définie.
+De même, vous pouvez tester que les méthodes personnalisées `get_absolute_url()` et `__str__()` se comportent comme prévu, car elles appartiennent à votre logique code/métier. Dans le cas de `get_absolute_url()`, vous pouvez supposer que la méthode Django `reverse()` a été implémentée correctement, aussi ce que vous allez tester, c'est que la vue associée a été effectivement définie.
 
 > **Note :** Les lecteurs attentifs auront noté que nous pourrions aussi vouloir limiter les dates de naissance et de décès à des valeurs sensibles, et vérifier que le décès intervient après la naissance. En Django, cette contrainte est ajoutée à vos classes de formulaires (bien que vous puissiez définir des validateurs pour les champs du modèle et des validateurs de modèles, ceux-ci ne sont utilisés qu'au niveau du formulaire s'ils sont appelés par la méthode clean() du modèle. Cela requière un ModelForm ou bien la méthode clean() du modèle a besoin d'être appelée explicitement.)
 
@@ -122,14 +122,14 @@ Avec cela en tête, commençons à voir comment définir et lancer des tests.
 
 Avant d'entrer dans le détail de "que tester", voyons d'abord brièvement _où_ et _comment_ les tests sont définis.
 
-Django utilise le [built-in test discovery](https://docs.python.org/3/library/unittest.html#unittest-test-discovery "(in Python v3.5)") du module unittest, qui va chercher des tests, sous le répertoire de travail actuel, dans tous les fichiers dont le nom contient le pattern **test.py**. Du moment que vous nommez vos fichiers de manière appropriée, vous pouvez utiliser n'importe quelle structure. Nous vous recommandons de créer un module pour coder vos tests, et d'avoir des fichiers distincts pour les modèles, les vues, les formulaires et tout autre type de code que vous avez besoin de tester. Par exemple :
+Django utilise le [built-in test discovery](https://docs.python.org/3/library/unittest.html#unittest-test-discovery "(in Python v3.5)") du module unittest, qui va chercher des tests, sous le répertoire de travail actuel, dans tous les fichiers dont le nom contient le pattern **test.py**. Du moment que vous nommez vos fichiers de manière appropriée, vous pouvez utiliser n'importe quelle structure. Nous vous recommandons de créer un module pour coder vos tests, et d'avoir des fichiers distincts pour les modèles, les vues, les formulaires et tout autre type de code que vous avez besoin de tester. Par exemple :
 
     catalog/
-      /tests/
-        __init__.py
-        test_models.py
-        test_forms.py
-        test_views.py
+      /tests/
+        __init__.py
+        test_models.py
+        test_forms.py
+        test_views.py
 
 Créez une structure de fichier comme montré ci-dessus, dans votre projet _LocalLibrary_. Le ficheir **\_\_init\_\_.py** doit être vide (il dit simplement à Python que ce répertoire est un package). Vous pouvez créer les trois fichiers de test en copiant et renommant le fichier de test du squelette **/catalog/tests.py**.
 
@@ -139,7 +139,7 @@ Créez une structure de fichier comme montré ci-dessus, dans votre projet _Loca
 
 Ouvrez le fichier **/catalog/tests/test_models.py**. Ce fichier doit importer `django.test.TestCase`, comme indiqué ci-après :
 
-Open **/catalog/tests/test_models.py**. The file should import `django.test.TestCase`, as shown:
+Open **/catalog/tests/test_models.py**. The file should import `django.test.TestCase`, as shown:
 
 ```python
 from django.test import TestCase
@@ -153,26 +153,26 @@ Ajoutez la classe de test ci-dessous à la fin du fichier. La classe montre comm
 
 ```python
 class YourTestClass(TestCase):
-    @classmethod
-    def setUpTestData(cls):
-        print("setUpTestData: Run once to set up non-modified data for all class methods.")
-        pass
-
-    def setUp(self):
-        print("setUp: Run once for every test method to setup clean data.")
-        pass
-
-    def test_false_is_false(self):
-        print("Method: test_false_is_false.")
-        self.assertFalse(False)
-
-    def test_false_is_true(self):
-        print("Method: test_false_is_true.")
-        self.assertTrue(False)
-
-    def test_one_plus_one_equals_two(self):
-        print("Method: test_one_plus_one_equals_two.")
-        self.assertEqual(1 + 1, 2)
+    @classmethod
+    def setUpTestData(cls):
+        print("setUpTestData: Run once to set up non-modified data for all class methods.")
+        pass
+
+    def setUp(self):
+        print("setUp: Run once for every test method to setup clean data.")
+        pass
+
+    def test_false_is_false(self):
+        print("Method: test_false_is_false.")
+        self.assertFalse(False)
+
+    def test_false_is_true(self):
+        print("Method: test_false_is_true.")
+        self.assertTrue(False)
+
+    def test_one_plus_one_equals_two(self):
+        print("Method: test_one_plus_one_equals_two.")
+        self.assertEqual(1 + 1, 2)
 ```
 
 La nouvelle classe définit deux méthodes que vous pouvez utiliser pour une configuration pré-test (par exemple, pour créer des modèles ou d'autres objets dont vous aurez besoin pour les tests) :
@@ -180,11 +180,11 @@ La nouvelle classe définit deux méthodes que vous pouvez utiliser pour une con
 - `setUpTestData()` est appelée une fois au début du lancement des tests pour un réglage au niveau de la classe. Vous pouvez l'utiliser pour créer des objets qui ne sont pas destinés à être modifiés ou changés dans les méthodes de test.
 - `setUp()` est appelée avant chaque fonction de test pour définir des objets qui peuvent être modifiés par le test (chaque fonction de test obtiendra une version "fraîche" de ces objets).
 
-> **Note :** Les classes de test ont aussi une méthode `tearDown()`, que nous n'avons pas utilisée. Cette méthode n'est pas particulièrement utile pour les tests avec bases de données, dans la mesure où la classe de base `TestCase` prend soin pour vous de supprimer la base de données utilisées pour les tests.
+> **Note :** Les classes de test ont aussi une méthode `tearDown()`, que nous n'avons pas utilisée. Cette méthode n'est pas particulièrement utile pour les tests avec bases de données, dans la mesure où la classe de base `TestCase` prend soin pour vous de supprimer la base de données utilisées pour les tests.
 
 En dessous de ces méthodes, nous avons un certain nombre de méthodes de test, qui utilisent des fonctions `Assert`, pour tester si certaines conditions sont vraies, fausses ou égales (`AssertTrue`, `AssertFalse`, `AssertEqual`). Si la condition ne renvoie pas le résultat escompté, le test plante et renvoie une erreur à votre console.
 
-Les méthodes `AssertTrue`, `AssertFalse` et `AssertEqual` sont des assertions standard fournies par **unittest**. Il y a d'autres assertions standard dans le framework, et aussi des [assertions spécifiques à Django](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#assertions), pour tester si une vue redirige (`assertRedirects`), pour tester si tel template a été utilisé (`assertTemplateUsed`), etc.
+Les méthodes `AssertTrue`, `AssertFalse` et `AssertEqual` sont des assertions standard fournies par **unittest**. Il y a d'autres assertions standard dans le framework, et aussi des [assertions spécifiques à Django](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#assertions), pour tester si une vue redirige (`assertRedirects`), pour tester si tel template a été utilisé (`assertTemplateUsed`), etc.
 
 > **Note :** Normallement vous ne devriez **pas** inclure de fonctions **print()** dans vos tests, comme montré ci-dessus. Nous avons fait cela uniquement pour que vous puissiez voir dans la console (dans la section suivante) l'ordre dans lequel les fonctions de setup sont appelées.
 
@@ -198,7 +198,7 @@ python3 manage.py test
 
 Cette commande va lancer la recherche de tous les fichiers ayant la forme **test.py** sous le répertoire courant, et lancer tous les tests définis, en utilisant les classes de base appropriées (ici nous avons un certain nombre de fichiers de test, mais pour le moment seul **/catalog/tests/test_models.py** contient des tests). Par défaut, chaque test ne fera de rapport qu'en cas d'échec, avec ensuite un résumé du test.
 
-> **Note :** Si vous obtenez des erreurs telles que : `ValueError: Missing staticfiles manifest entry ...`, cela peut être dû au fait que le test ne lance pas *collectstatic* par défaut, et que votre application utilise une classe de storage qui le requiert (voyez [manifest_strict](https://docs.djangoproject.com/en/2.1/ref/contrib/staticfiles/#django.contrib.staticfiles.storage.ManifestStaticFilesStorage.manifest_strict) pour plus d'information). Il y a plusieurs façons de remédier à ce problème - la plus facile est de lancer tout simplement *collectstatic* avant de lancer les tests :
+> **Note :** Si vous obtenez des erreurs telles que : `ValueError: Missing staticfiles manifest entry ...`, cela peut être dû au fait que le test ne lance pas *collectstatic* par défaut, et que votre application utilise une classe de storage qui le requiert (voyez [manifest_strict](https://docs.djangoproject.com/en/2.1/ref/contrib/staticfiles/#django.contrib.staticfiles.storage.ManifestStaticFilesStorage.manifest_strict) pour plus d'information). Il y a plusieurs façons de remédier à ce problème - la plus facile est de lancer tout simplement *collectstatic* avant de lancer les tests :
 >
 > ```bash
 > python3 manage.py collectstatic
@@ -222,8 +222,8 @@ Method: test_one_plus_one_equals_two.
 FAIL: test_false_is_true (catalog.tests.tests_models.YourTestClass)
 ----------------------------------------------------------------------
 Traceback (most recent call last):
-  File "D:\Github\django_tmp\library_w_t_2\locallibrary\catalog\tests\tests_models.py", line 22, in test_false_is_true
-    self.assertTrue(False)
+  File "D:\Github\django_tmp\library_w_t_2\locallibrary\catalog\tests\tests_models.py", line 22, in test_false_is_true
+    self.assertTrue(False)
 AssertionError: False is not true
 
 ----------------------------------------------------------------------
@@ -233,11 +233,11 @@ FAILED (failures=1)
 Destroying test database for alias 'default'...
 ```
 
-Ici nous voyons que nous avons eu un échec pour un test, et nous pouvons voir exactement quelle fonction a planté et pourquoi (cet échec était prévu, car `False` n'est pas `True` !).
+Ici nous voyons que nous avons eu un échec pour un test, et nous pouvons voir exactement quelle fonction a planté et pourquoi (cet échec était prévu, car `False` n'est pas `True` !).
 
 > **Note :** La chose la plus importante à apprendre de la sortie de test ci-dessus est qu'il est bien mieux d'utiliser des noms descriptifs/informatifs pour vos objets et méthodes.
 
-Le texte en **gras** ci-dessus n'apparaîtra pas normalement dans la sortie de test (elle est générée par les fonctions `print()` dans nos tests). Cela montre comment la méthode `setUpTestData()` est appelée une fois pour l'ensemble de classe, tandis que `setUp()` est appelée avant chaque méthode.
+Le texte en **gras** ci-dessus n'apparaîtra pas normalement dans la sortie de test (elle est générée par les fonctions `print()` dans nos tests). Cela montre comment la méthode `setUpTestData()` est appelée une fois pour l'ensemble de classe, tandis que `setUp()` est appelée avant chaque méthode.
 
 La section suivante mnotre comment vous pouvez lancer des test spécifiques, et comment contrôler la quantité d'information fournie par les tests.
 
@@ -253,7 +253,7 @@ Les niveaux de verbosité sont 0, 1, 2 et 3, avec "1" comme valeur par défaut.
 
 ### Lancer des tests spécifiques
 
-Si vous voulez lancer une sous-sélection parmi vos tests, vous pouvez le faire en spécifiant le chemin complet (avec des points) vers le ou les package(s), module, sous-classe de `TestCase` ou méthode :
+Si vous voulez lancer une sous-sélection parmi vos tests, vous pouvez le faire en spécifiant le chemin complet (avec des points) vers le ou les package(s), module, sous-classe de `TestCase` ou méthode :
 
 ```bash
 # Run the specified module
@@ -279,25 +279,25 @@ Maintenant que nous savons comment lancer nos tests et quel genre de choses nous
 
 Comme nous l'avons dit ci-dessus, nous devrions tester tout ce qui relève de notre design, ou tout ce qui est défini par du code que nous avons écrit nous-mêmes, mais pas les bibliothèques ou le code qui est déjà testé par Django ou par l'équipe qui développe Python.
 
-Par exemple, considérez le modèle `Author` ci-dessous. Ici nous devrions tester les labels de tous les champs, car, bien que nous n'ayons pas explicitement spécifié la plupart d'entre eux, nous avons un design qui dit ce que ces valeurs devraient être. Si nous ne testons pas ces valeurs, nous ne savons pas que les labels des champs ont les valeurs souhaitées. De même, alors que nous sommes tranquilles sur le fait que Django créera un champ de la longueur indiquée, il est intéressant de lancer un test spécifique pour s'assurer qu'il a été implémenté comme prévu.
+Par exemple, considérez le modèle `Author` ci-dessous. Ici nous devrions tester les labels de tous les champs, car, bien que nous n'ayons pas explicitement spécifié la plupart d'entre eux, nous avons un design qui dit ce que ces valeurs devraient être. Si nous ne testons pas ces valeurs, nous ne savons pas que les labels des champs ont les valeurs souhaitées. De même, alors que nous sommes tranquilles sur le fait que Django créera un champ de la longueur indiquée, il est intéressant de lancer un test spécifique pour s'assurer qu'il a été implémenté comme prévu.
 
 ```python
 class Author(models.Model):
-    first_name = models.CharField(max_length=100)
-    last_name = models.CharField(max_length=100)
-    date_of_birth = models.DateField(null=True, blank=True)
-    date_of_death = models.DateField('Died', null=True, blank=True)
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
 
-    def get_absolute_url(self):
-        return reverse('author-detail', args=[str(self.id)])
+    def get_absolute_url(self):
+        return reverse('author-detail', args=[str(self.id)])
 
-    def __str__(self):
-        return f'{self.last_name}, {self.first_name}'
+    def __str__(self):
+        return f'{self.last_name}, {self.first_name}'
 ```
 
 Ouvrez notre **/catalog/tests/test_models.py**, et remplacez tout le code qui s'y trouve par le code de test ci-après pour le modèle `Author`.
 
-Vous voyez que nous importons d'abord `TestCase` et faisons dériver d'elle notre classe de test (`AuthorModelTest`) en utilisant un nom descriptif, de façon à pouvoir identifier aisément dans la sortie tout test qui échoue. Nous appelons ensuite `setUpTestData()` afin de créer un objet _author_, que nous utiliserons mais que nous ne modifierons jamais dans aucun de nos tests.
+Vous voyez que nous importons d'abord `TestCase` et faisons dériver d'elle notre classe de test (`AuthorModelTest`) en utilisant un nom descriptif, de façon à pouvoir identifier aisément dans la sortie tout test qui échoue. Nous appelons ensuite `setUpTestData()` afin de créer un objet _author_, que nous utiliserons mais que nous ne modifierons jamais dans aucun de nos tests.
 
 ```python
 from django.test import TestCase
@@ -351,26 +351,26 @@ self.assertEquals(field_label, 'first name')
 
 Les choses intéressantes à noter sont :
 
-- Nous ne pouvons obtenir le `verbose_name` directement en utilisant `author.first_name.verbose_name`, car `author.first_name` est une _chaîne_ (non un moyen d'accéder à l'objet `first_name`, que nous pourrions utiliser pour accéder à ses propriétés). À la place nous devons utiliser l'attribut `_meta` de author afin d'obtenir une instance de ses champs et utiliser celle-ci pour demander l'information que nous cherchons.
-- Nous avons fait le choix d'utiliser `assertEquals(field_label,'first name')` plutôt que `assertTrue(field_label == 'first name')`. La raison en est que, en cas d'échec du test, la sortie vous dira, dans le premier cas, quel est effectivement le label du champ, ce qui rend un peu plus facile le débogage du problème.
+- Nous ne pouvons obtenir le `verbose_name` directement en utilisant `author.first_name.verbose_name`, car `author.first_name` est une _chaîne_ (non un moyen d'accéder à l'objet `first_name`, que nous pourrions utiliser pour accéder à ses propriétés). À la place nous devons utiliser l'attribut `_meta` de author afin d'obtenir une instance de ses champs et utiliser celle-ci pour demander l'information que nous cherchons.
+- Nous avons fait le choix d'utiliser `assertEquals(field_label,'first name')` plutôt que `assertTrue(field_label == 'first name')`. La raison en est que, en cas d'échec du test, la sortie vous dira, dans le premier cas, quel est effectivement le label du champ, ce qui rend un peu plus facile le débogage du problème.
 
-> **Note :** Les tests pour les labels de `last_name` et `date_of_birth`, ainsi que le test de la longueur du champ `last_name`, ont été omis. Ajoutez vos propres versions maintenant, en suivant les conventions de nommage et les approches que nous vous avons montrées ci-dessus.
+> **Note :** Les tests pour les labels de `last_name` et `date_of_birth`, ainsi que le test de la longueur du champ `last_name`, ont été omis. Ajoutez vos propres versions maintenant, en suivant les conventions de nommage et les approches que nous vous avons montrées ci-dessus.
 
-Il nous faut également tester nos méthodes personnalisées. Essentiellement, celles-ci vérifient uniquement que le nom de l'objet a été construit comme prévu, en utilisant le format "Last name", "First name", et que l'URL que nous obtenons pour un élément `Author` est telle que nous l'attendons.
+Il nous faut également tester nos méthodes personnalisées. Essentiellement, celles-ci vérifient uniquement que le nom de l'objet a été construit comme prévu, en utilisant le format "Last name", "First name", et que l'URL que nous obtenons pour un élément `Author` est telle que nous l'attendons.
 
 ```python
 def test_object_name_is_last_name_comma_first_name(self):
-    author = Author.objects.get(id=1)
-    expected_object_name = f'{author.last_name}, {author.first_name}'
-    self.assertEquals(expected_object_name, str(author))
+    author = Author.objects.get(id=1)
+    expected_object_name = f'{author.last_name}, {author.first_name}'
+    self.assertEquals(expected_object_name, str(author))
 
 def test_get_absolute_url(self):
-    author = Author.objects.get(id=1)
-    # This will also fail if the urlconf is not defined.
-    self.assertEquals(author.get_absolute_url(), '/catalog/author/1')
+    author = Author.objects.get(id=1)
+    # This will also fail if the urlconf is not defined.
+    self.assertEquals(author.get_absolute_url(), '/catalog/author/1')
 ```
 
-Maintenant lancez les tests. Si vous avez créé le modèle `Author` comme décrit dans le tutoriel sur les modèles, il est assez probable que vous allez obtenir une erreur pour le label `date_of_death`, comme montré ci-dessous. Le test plante parce qu'il a été écrit en s'attendant à ce que la définition du label suive cette convention de Django : ne pas mettre en capitale la première lettre du label (Django le fait pour vous).
+Maintenant lancez les tests. Si vous avez créé le modèle `Author` comme décrit dans le tutoriel sur les modèles, il est assez probable que vous allez obtenir une erreur pour le label `date_of_death`, comme montré ci-dessous. Le test plante parce qu'il a été écrit en s'attendant à ce que la définition du label suive cette convention de Django : ne pas mettre en capitale la première lettre du label (Django le fait pour vous).
 
 ```bash
 ======================================================================
@@ -431,38 +431,38 @@ from django.utils import timezone
 from catalog.forms import RenewBookForm
 
 class RenewBookFormTest(TestCase):
-    def test_renew_form_date_field_label(self):
-        form = RenewBookForm()
-        self.assertTrue(form.fields['renewal_date'].label == None or form.fields['renewal_date'].label == 'renewal date')
-
-    def test_renew_form_date_field_help_text(self):
-        form = RenewBookForm()
-        self.assertEqual(form.fields['renewal_date'].help_text, 'Enter a date between now and 4 weeks (default 3).')
-
-    def test_renew_form_date_in_past(self):
-        date = datetime.date.today() - datetime.timedelta(days=1)
-        form = RenewBookForm(data={'renewal_date': date})
-        self.assertFalse(form.is_valid())
-
-    def test_renew_form_date_too_far_in_future(self):
-        date = datetime.date.today() + datetime.timedelta(weeks=4) + datetime.timedelta(days=1)
-        form = RenewBookForm(data={'renewal_date': date})
-        self.assertFalse(form.is_valid())
-
-    def test_renew_form_date_today(self):
-        date = datetime.date.today()
-        form = RenewBookForm(data={'renewal_date': date})
-        self.assertTrue(form.is_valid())
-
-    def test_renew_form_date_max(self):
-        date = timezone.localtime() + datetime.timedelta(weeks=4)
-        form = RenewBookForm(data={'renewal_date': date})
-        self.assertTrue(form.is_valid())
+    def test_renew_form_date_field_label(self):
+        form = RenewBookForm()
+        self.assertTrue(form.fields['renewal_date'].label == None or form.fields['renewal_date'].label == 'renewal date')
+
+    def test_renew_form_date_field_help_text(self):
+        form = RenewBookForm()
+        self.assertEqual(form.fields['renewal_date'].help_text, 'Enter a date between now and 4 weeks (default 3).')
+
+    def test_renew_form_date_in_past(self):
+        date = datetime.date.today() - datetime.timedelta(days=1)
+        form = RenewBookForm(data={'renewal_date': date})
+        self.assertFalse(form.is_valid())
+
+    def test_renew_form_date_too_far_in_future(self):
+        date = datetime.date.today() + datetime.timedelta(weeks=4) + datetime.timedelta(days=1)
+        form = RenewBookForm(data={'renewal_date': date})
+        self.assertFalse(form.is_valid())
+
+    def test_renew_form_date_today(self):
+        date = datetime.date.today()
+        form = RenewBookForm(data={'renewal_date': date})
+        self.assertTrue(form.is_valid())
+
+    def test_renew_form_date_max(self):
+        date = timezone.localtime() + datetime.timedelta(weeks=4)
+        form = RenewBookForm(data={'renewal_date': date})
+        self.assertTrue(form.is_valid())
 ```
 
-Les deux premières fonctions testent que le `label` et le `help_text` du champ sont tels qu'on les attend. Nous devons accéder au champ en utilisant le dictionnaire du champ (p. ex. `form.fields['renewal_date']`). Notez bien ici que nous devons aussi tester si la valeur du label est `None`, car même si Django rend le label correct, il retournera `None` si la valeur n'est pas définie _explicitement_.
+Les deux premières fonctions testent que le `label` et le `help_text` du champ sont tels qu'on les attend. Nous devons accéder au champ en utilisant le dictionnaire du champ (p. ex. `form.fields['renewal_date']`). Notez bien ici que nous devons aussi tester si la valeur du label est `None`, car même si Django rend le label correct, il retournera `None` si la valeur n'est pas définie _explicitement_.
 
-Les autres fonctions testent que le formulaire est valide avec des dates de renouvellement situées à l'intérieur des limites acceptables, et invalide avec des valeurs en dehors de ces limites. Notez comment nous construisons des valeurs de dates de test autour de notre date actuelle (`datetime.date.today()`) en utilisant `datetime.timedelta()` (dans ce cas en spécifiant un nombre de jours ou de semaines). Ensuite nous créons juste le formulaire en lui passant nos données, et nous testons s'il est valide.
+Les autres fonctions testent que le formulaire est valide avec des dates de renouvellement situées à l'intérieur des limites acceptables, et invalide avec des valeurs en dehors de ces limites. Notez comment nous construisons des valeurs de dates de test autour de notre date actuelle (`datetime.date.today()`) en utilisant `datetime.timedelta()` (dans ce cas en spécifiant un nombre de jours ou de semaines). Ensuite nous créons juste le formulaire en lui passant nos données, et nous testons s'il est valide.
 
 > **Note :** Ici nous n'utilisons pas réellement la base de données ni le client de test. Envisagez de modifier ces tests pour utiliser [SimpleTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#django.test.SimpleTestCase).
 >
@@ -472,9 +472,9 @@ C'est tout pour les formulaires; nous en avons d'autres, mais ils sont automatiq
 
 ### Vues
 
-Pour valider le comportement de notre vue, nous utilisons le [client](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#django.test.Client) de test de Django. Cette classe se comporte comme un navigateur web fictif que nous pouvons utiliser pour simuler des requêtes `GET` et `POST` à une URL donnée, et observer la réponse. Nous pouvons voir à peu près tout au sujet de la réponse, depuis le HTTP bas-niveau (entêtes et codes de statut résultants) jusqu'au template que nous utilisons pour rendre le HTML et aux données de contexte que nous lui passons. Nous pouvons aussi voir la chaîne des redirections (s'il y en a) et vérifier l'URL et le code de statut à chaque étape. Cela nous permet de vérifier que chaque vue se comporte comme prévu.
+Pour valider le comportement de notre vue, nous utilisons le [client](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#django.test.Client) de test de Django. Cette classe se comporte comme un navigateur web fictif que nous pouvons utiliser pour simuler des requêtes `GET` et `POST` à une URL donnée, et observer la réponse. Nous pouvons voir à peu près tout au sujet de la réponse, depuis le HTTP bas-niveau (entêtes et codes de statut résultants) jusqu'au template que nous utilisons pour rendre le HTML et aux données de contexte que nous lui passons. Nous pouvons aussi voir la chaîne des redirections (s'il y en a) et vérifier l'URL et le code de statut à chaque étape. Cela nous permet de vérifier que chaque vue se comporte comme prévu.
 
-Commençons avec l'une de nos vues les plus simples, celle qui fournit une liste de tous les auteurs. Elle est affichée à l'URL **/catalog/authors/** (une URL nommée 'authors' dans la configuration des URL).
+Commençons avec l'une de nos vues les plus simples, celle qui fournit une liste de tous les auteurs. Elle est affichée à l'URL **/catalog/authors/** (une URL nommée 'authors' dans la configuration des URL).
 
 ```python
 class AuthorListView(generic.ListView):
@@ -493,47 +493,47 @@ from django.urls import reverse
 from catalog.models import Author
 
 class AuthorListViewTest(TestCase):
-    @classmethod
-    def setUpTestData(cls):
-        # Create 13 authors for pagination tests
-        number_of_authors = 13
+    @classmethod
+    def setUpTestData(cls):
+        # Create 13 authors for pagination tests
+        number_of_authors = 13
 
-        for author_id in range(number_of_authors):
-            Author.objects.create(
+        for author_id in range(number_of_authors):
+            Author.objects.create(
                 first_name=f'Christian {author_id}',
                 last_name=f'Surname {author_id}',
             )
 
-    def test_view_url_exists_at_desired_location(self):
-        response = self.client.get('/catalog/authors/')
-        self.assertEqual(response.status_code, 200)
-
-    def test_view_url_accessible_by_name(self):
-        response = self.client.get(reverse('authors'))
-        self.assertEqual(response.status_code, 200)
-
-    def test_view_uses_correct_template(self):
-        response = self.client.get(reverse('authors'))
-        self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, 'catalog/author_list.html')
-
-    def test_pagination_is_ten(self):
-        response = self.client.get(reverse('authors'))
-        self.assertEqual(response.status_code, 200)
-        self.assertTrue('is_paginated' in response.context)
-        self.assertTrue(response.context['is_paginated'] == True)
-        self.assertTrue(len(response.context['author_list']) == 10)
-
-    def test_lists_all_authors(self):
-        # Get second page and confirm it has (exactly) remaining 3 items
-        response = self.client.get(reverse('authors')+'?page=2')
-        self.assertEqual(response.status_code, 200)
-        self.assertTrue('is_paginated' in response.context)
-        self.assertTrue(response.context['is_paginated'] == True)
-        self.assertTrue(len(response.context['author_list']) == 3)
+    def test_view_url_exists_at_desired_location(self):
+        response = self.client.get('/catalog/authors/')
+        self.assertEqual(response.status_code, 200)
+
+    def test_view_url_accessible_by_name(self):
+        response = self.client.get(reverse('authors'))
+        self.assertEqual(response.status_code, 200)
+
+    def test_view_uses_correct_template(self):
+        response = self.client.get(reverse('authors'))
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, 'catalog/author_list.html')
+
+    def test_pagination_is_ten(self):
+        response = self.client.get(reverse('authors'))
+        self.assertEqual(response.status_code, 200)
+        self.assertTrue('is_paginated' in response.context)
+        self.assertTrue(response.context['is_paginated'] == True)
+        self.assertTrue(len(response.context['author_list']) == 10)
+
+    def test_lists_all_authors(self):
+        # Get second page and confirm it has (exactly) remaining 3 items
+        response = self.client.get(reverse('authors')+'?page=2')
+        self.assertEqual(response.status_code, 200)
+        self.assertTrue('is_paginated' in response.context)
+        self.assertTrue(response.context['is_paginated'] == True)
+        self.assertTrue(len(response.context['author_list']) == 3)
 ```
 
-Tous les tests utilisent le client (qui appartient à notre classe dérivée de `TestCase`), afin de simuler une requête `GET` et d'obtenir une réponse. La première version vérifie une URL spécifique (note : seulement le chemin spécifique, sans le domaine), tandis que la seconde génère une URL à partir de son nom tel qu'il se trouve dans la configuration des URL.
+Tous les tests utilisent le client (qui appartient à notre classe dérivée de `TestCase`), afin de simuler une requête `GET` et d'obtenir une réponse. La première version vérifie une URL spécifique (note : seulement le chemin spécifique, sans le domaine), tandis que la seconde génère une URL à partir de son nom tel qu'il se trouve dans la configuration des URL.
 
 ```python
 response = self.client.get('/catalog/authors/')
@@ -542,7 +542,7 @@ response = self.client.get(reverse('authors'))
 
 Une fois que nous avons la réponse, nous lui demandons son code de statut, le template utilisé, si la réponse est paginée ou non, le nombre d'éléments retournés et le nombre total d'éléments.
 
-> **Note :** Si, dans votre fichier **/catalog/views.py**, vous mettez la variable `paginate_by` à un nombre autre que 10, assurez-vous de mettre à jour les lignes qui testent le nombre correct d'éléments affichés dans les templates paginés, ci-dessus et dans les sections qui suivent. Par exemple, si vous mettez à 5 la variable pour la liste des auteurs, changez ainsi la ligne ci-dessus :
+> **Note :** Si, dans votre fichier **/catalog/views.py**, vous mettez la variable `paginate_by` à un nombre autre que 10, assurez-vous de mettre à jour les lignes qui testent le nombre correct d'éléments affichés dans les templates paginés, ci-dessus et dans les sections qui suivent. Par exemple, si vous mettez à 5 la variable pour la liste des auteurs, changez ainsi la ligne ci-dessus :
 >
 > ```python
 > self.assertTrue(len(response.context['author_list']) == 5)
@@ -552,7 +552,7 @@ La variable la plus intéressante que nous montrons ci-dessus est `response.cont
 
 #### Vues limitées aux utilisateurs connectés
 
-Dans certains cas, vous voudrez tester une vue qui est limitée aux seuls utilisateurs connectés. Par exemple notre vue `LoanedBooksByUserListView` est très semblable à notre vue précédente, mais n'est accessible qu'aux utilisateurs connectés, et n'affiche que des enregistrements de type `BookInstance` qui sont empruntés par l'utilisateur courant, ont le statut 'on loan', et sont triés 'le plus ancien en premier'.
+Dans certains cas, vous voudrez tester une vue qui est limitée aux seuls utilisateurs connectés. Par exemple notre vue `LoanedBooksByUserListView` est très semblable à notre vue précédente, mais n'est accessible qu'aux utilisateurs connectés, et n'affiche que des enregistrements de type `BookInstance` qui sont empruntés par l'utilisateur courant, ont le statut 'on loan', et sont triés 'le plus ancien en premier'.
 
 ```python
 from django.contrib.auth.mixins import LoginRequiredMixin
@@ -567,9 +567,9 @@ class LoanedBooksByUserListView(LoginRequiredMixin, generic.ListView):
         return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')
 ```
 
-Ajoutez le code de test suivant à **/catalog/tests/test_views.py**. Ici nous utilisons d'abord la méthode `SetUp()` pour créer des logins de comptes d'utilisateurs et des objets de type `BookInstance` (avec leurs livres et autres enregistrements associés), que nous utiliserons plus tard dans les tests. La moitié des livres sont empruntés par chaque utilisateur-test, mais nous avons initialement mis le statut de tous les livres à "maintenance". Nous avons utilisé `SetUp()` plutôt que `setUpTestData()`, parce que nous allons modifier plus tard certains de ces objets.
+Ajoutez le code de test suivant à **/catalog/tests/test_views.py**. Ici nous utilisons d'abord la méthode `SetUp()` pour créer des logins de comptes d'utilisateurs et des objets de type `BookInstance` (avec leurs livres et autres enregistrements associés), que nous utiliserons plus tard dans les tests. La moitié des livres sont empruntés par chaque utilisateur-test, mais nous avons initialement mis le statut de tous les livres à "maintenance". Nous avons utilisé `SetUp()` plutôt que `setUpTestData()`, parce que nous allons modifier plus tard certains de ces objets.
 
-> **Note :** Le code de `setUp()` ci-dessous crée un livre avec un `Language` spécifique, mais _votre_ code n'inclut peut-être pas le modèle `Language`, étant donné que celui-ci a été créé lors d'un _défi_. Si c'est le cas, commentez simplement les bouts de code qui créent ou importent des objets de type Language. Vous devrez aussi le faire dans la section `RenewBookInstancesViewTest` qui suit.
+> **Note :** Le code de `setUp()` ci-dessous crée un livre avec un `Language` spécifique, mais _votre_ code n'inclut peut-être pas le modèle `Language`, étant donné que celui-ci a été créé lors d'un _défi_. Si c'est le cas, commentez simplement les bouts de code qui créent ou importent des objets de type Language. Vous devrez aussi le faire dans la section `RenewBookInstancesViewTest` qui suit.
 
 ```python
 import datetime
@@ -580,19 +580,19 @@ from django.contrib.auth.models import User # Required to assign User as a borro
 from catalog.models import BookInstance, Book, Genre, Language
 
 class LoanedBookInstancesByUserListViewTest(TestCase):
-    def setUp(self):
-        # Create two users
-        test_user1 = User.objects.create_user(username='testuser1', password='1X<ISRUkw+tuK')
-        test_user2 = User.objects.create_user(username='testuser2', password='2HJ1vRV0Z&3iD')
+    def setUp(self):
+        # Create two users
+        test_user1 = User.objects.create_user(username='testuser1', password='1X<ISRUkw+tuK')
+        test_user2 = User.objects.create_user(username='testuser2', password='2HJ1vRV0Z&3iD')
 
         test_user1.save()
-        test_user2.save()
+        test_user2.save()
 
-        # Create a book
-        test_author = Author.objects.create(first_name='John', last_name='Smith')
-        test_genre = Genre.objects.create(name='Fantasy')
-        test_language = Language.objects.create(name='English')
-        test_book = Book.objects.create(
+        # Create a book
+        test_author = Author.objects.create(first_name='John', last_name='Smith')
+        test_genre = Genre.objects.create(name='Fantasy')
+        test_language = Language.objects.create(name='English')
+        test_book = Book.objects.create(
             title='Book Title',
             summary='My book summary',
             isbn='ABCDEFG',
@@ -601,17 +601,17 @@ class LoanedBookInstancesByUserListViewTest(TestCase):
         )
 
         # Create genre as a post-step
-        genre_objects_for_book = Genre.objects.all()
-        test_book.genre.set(genre_objects_for_book) # Direct assignment of many-to-many types not allowed.
-        test_book.save()
-
-        # Create 30 BookInstance objects
-        number_of_book_copies = 30
-        for book_copy in range(number_of_book_copies):
-            return_date = timezone.localtime() + datetime.timedelta(days=book_copy%5)
-            the_borrower = test_user1 if book_copy % 2 else test_user2
-            status = 'm'
-            BookInstance.objects.create(
+        genre_objects_for_book = Genre.objects.all()
+        test_book.genre.set(genre_objects_for_book) # Direct assignment of many-to-many types not allowed.
+        test_book.save()
+
+        # Create 30 BookInstance objects
+        number_of_book_copies = 30
+        for book_copy in range(number_of_book_copies):
+            return_date = timezone.localtime() + datetime.timedelta(days=book_copy%5)
+            the_borrower = test_user1 if book_copy % 2 else test_user2
+            status = 'm'
+            BookInstance.objects.create(
                 book=test_book,
                 imprint='Unlikely Imprint, 2016',
                 due_back=return_date,
@@ -619,86 +619,86 @@ class LoanedBookInstancesByUserListViewTest(TestCase):
                 status=status,
             )
 
-    def test_redirect_if_not_logged_in(self):
-        response = self.client.get(reverse('my-borrowed'))
-        self.assertRedirects(response, '/accounts/login/?next=/catalog/mybooks/')
+    def test_redirect_if_not_logged_in(self):
+        response = self.client.get(reverse('my-borrowed'))
+        self.assertRedirects(response, '/accounts/login/?next=/catalog/mybooks/')
 
-    def test_logged_in_uses_correct_template(self):
-        login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK')
-        response = self.client.get(reverse('my-borrowed'))
+    def test_logged_in_uses_correct_template(self):
+        login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK')
+        response = self.client.get(reverse('my-borrowed'))
 
-        # Check our user is logged in
-        self.assertEqual(str(response.context['user']), 'testuser1')
-        # Check that we got a response "success"
-        self.assertEqual(response.status_code, 200)
+        # Check our user is logged in
+        self.assertEqual(str(response.context['user']), 'testuser1')
+        # Check that we got a response "success"
+        self.assertEqual(response.status_code, 200)
 
-        # Check we used correct template
-        self.assertTemplateUsed(response, 'catalog/bookinstance_list_borrowed_user.html')
+        # Check we used correct template
+        self.assertTemplateUsed(response, 'catalog/bookinstance_list_borrowed_user.html')
 ```
 
-Pour vérifier que la vue redirige à une page de login si l'utilisateur n'est pas connecté, nous utilisons `assertRedirects`, comme montré dans `test_redirect_if_not_logged_in()`. Pour vérifier que la page est affichée pour un utilisateur connecté, nous connectons d'abord notre utilisateur-test, et ensuite nous accédons de nouveau à la page et vérifions que nous obtenons un `status_code` de 200 (succès).
+Pour vérifier que la vue redirige à une page de login si l'utilisateur n'est pas connecté, nous utilisons `assertRedirects`, comme montré dans `test_redirect_if_not_logged_in()`. Pour vérifier que la page est affichée pour un utilisateur connecté, nous connectons d'abord notre utilisateur-test, et ensuite nous accédons de nouveau à la page et vérifions que nous obtenons un `status_code` de 200 (succès).
 
 Le reste des test vérifie que notre vue ne retourne que les livres qui sont prêtés à notre emprunteur courant. Copiez ce code et collez le à la fin de la classe de test ci-dessus.
 
 ```python
-    def test_only_borrowed_books_in_list(self):
-        login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK')
-        response = self.client.get(reverse('my-borrowed'))
-
-        # Check our user is logged in
-        self.assertEqual(str(response.context['user']), 'testuser1')
-        # Check that we got a response "success"
-        self.assertEqual(response.status_code, 200)
-
-        # Check that initially we don't have any books in list (none on loan)
-        self.assertTrue('bookinstance_list' in response.context)
-        self.assertEqual(len(response.context['bookinstance_list']), 0)
-
-        # Now change all books to be on loan
-        books = BookInstance.objects.all()[:10]
-
-        for book in books:
-            book.status = 'o'
-            book.save()
-
-        # Check that now we have borrowed books in the list
-        response = self.client.get(reverse('my-borrowed'))
-        # Check our user is logged in
-        self.assertEqual(str(response.context['user']), 'testuser1')
-        # Check that we got a response "success"
-        self.assertEqual(response.status_code, 200)
-
-        self.assertTrue('bookinstance_list' in response.context)
-
-        # Confirm all books belong to testuser1 and are on loan
-        for bookitem in response.context['bookinstance_list']:
-            self.assertEqual(response.context['user'], bookitem.borrower)
-            self.assertEqual('o', bookitem.status)
-
-    def test_pages_ordered_by_due_date(self):
-        # Change all books to be on loan
-        for book in BookInstance.objects.all():
-            book.status='o'
-            book.save()
-
-        login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK')
-        response = self.client.get(reverse('my-borrowed'))
-
-        # Check our user is logged in
-        self.assertEqual(str(response.context['user']), 'testuser1')
-        # Check that we got a response "success"
-        self.assertEqual(response.status_code, 200)
-
-        # Confirm that of the items, only 10 are displayed due to pagination.
-        self.assertEqual(len(response.context['bookinstance_list']), 10)
-
-        last_date = 0
-        for book in response.context['bookinstance_list']:
-            if last_date == 0:
-                last_date = book.due_back
-            else:
+    def test_only_borrowed_books_in_list(self):
+        login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK')
+        response = self.client.get(reverse('my-borrowed'))
+
+        # Check our user is logged in
+        self.assertEqual(str(response.context['user']), 'testuser1')
+        # Check that we got a response "success"
+        self.assertEqual(response.status_code, 200)
+
+        # Check that initially we don't have any books in list (none on loan)
+        self.assertTrue('bookinstance_list' in response.context)
+        self.assertEqual(len(response.context['bookinstance_list']), 0)
+
+        # Now change all books to be on loan
+        books = BookInstance.objects.all()[:10]
+
+        for book in books:
+            book.status = 'o'
+            book.save()
+
+        # Check that now we have borrowed books in the list
+        response = self.client.get(reverse('my-borrowed'))
+        # Check our user is logged in
+        self.assertEqual(str(response.context['user']), 'testuser1')
+        # Check that we got a response "success"
+        self.assertEqual(response.status_code, 200)
+
+        self.assertTrue('bookinstance_list' in response.context)
+
+        # Confirm all books belong to testuser1 and are on loan
+        for bookitem in response.context['bookinstance_list']:
+            self.assertEqual(response.context['user'], bookitem.borrower)
+            self.assertEqual('o', bookitem.status)
+
+    def test_pages_ordered_by_due_date(self):
+        # Change all books to be on loan
+        for book in BookInstance.objects.all():
+            book.status='o'
+            book.save()
+
+        login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK')
+        response = self.client.get(reverse('my-borrowed'))
+
+        # Check our user is logged in
+        self.assertEqual(str(response.context['user']), 'testuser1')
+        # Check that we got a response "success"
+        self.assertEqual(response.status_code, 200)
+
+        # Confirm that of the items, only 10 are displayed due to pagination.
+        self.assertEqual(len(response.context['bookinstance_list']), 10)
+
+        last_date = 0
+        for book in response.context['bookinstance_list']:
+            if last_date == 0:
+                last_date = book.due_back
+            else:
                 self.assertTrue(last_date <= book.due_back)
-                last_date = book.due_back
+                last_date = book.due_back
 ```
 
 Vous pourriez aussi ajouter les tests de pagination, si vous voulez !
@@ -714,38 +714,38 @@ from catalog.forms import RenewBookForm
 
 @permission_required('catalog.can_mark_returned')
 def renew_book_librarian(request, pk):
-    """View function for renewing a specific BookInstance by librarian."""
-    book_instance = get_object_or_404(BookInstance, pk=pk)
+    """View function for renewing a specific BookInstance by librarian."""
+    book_instance = get_object_or_404(BookInstance, pk=pk)
 
-    # If this is a POST request then process the Form data
-    if request.method == 'POST':
+    # If this is a POST request then process the Form data
+    if request.method == 'POST':
 
-        # Create a form instance and populate it with data from the request (binding):
-        book_renewal_form = RenewBookForm(request.POST)
+        # Create a form instance and populate it with data from the request (binding):
+        book_renewal_form = RenewBookForm(request.POST)
 
-        # Check if the form is valid:
-        if form.is_valid():
-            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
-            book_instance.due_back = form.cleaned_data['renewal_date']
-            book_instance.save()
+        # Check if the form is valid:
+        if form.is_valid():
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_instance.due_back = form.cleaned_data['renewal_date']
+            book_instance.save()
 
-            # redirect to a new URL:
-            return HttpResponseRedirect(reverse('all-borrowed'))
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed'))
 
-    # If this is a GET (or any other method) create the default form
-    else:
-        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
-        book_renewal_form = RenewBookForm(initial={'renewal_date': proposed_renewal_date})
+    # If this is a GET (or any other method) create the default form
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        book_renewal_form = RenewBookForm(initial={'renewal_date': proposed_renewal_date})
 
     context = {
         'book_renewal_form': book_renewal_form,
         'book_instance': book_instance,
     }
 
-    return render(request, 'catalog/book_renew_librarian.html', context)
+    return render(request, 'catalog/book_renew_librarian.html', context)
 ```
 
-Nous allons devoir tester que la vue n'est disponible qu'aux utilisateurs ayant la permission `can_mark_returned`, et que les utilisateurs sont bien redirigés vers une page d'erreur HTTP 404 s'ils essaient de renouveler une `BookInstance` inexistante. Nous devons vérifier que la valeur initiale du formulaire est remplie avec une date de trois semaines dans le futur, et que si la validation réussit, nous sommes redirigés vers la vue "tous les livres empruntés". Dans le cadre des tests sur l'échec de la validation, nous allons aussi vérifier que notre formulaire envoie les bons messages d'erreur.
+Nous allons devoir tester que la vue n'est disponible qu'aux utilisateurs ayant la permission `can_mark_returned`, et que les utilisateurs sont bien redirigés vers une page d'erreur HTTP 404 s'ils essaient de renouveler une `BookInstance` inexistante. Nous devons vérifier que la valeur initiale du formulaire est remplie avec une date de trois semaines dans le futur, et que si la validation réussit, nous sommes redirigés vers la vue "tous les livres empruntés". Dans le cadre des tests sur l'échec de la validation, nous allons aussi vérifier que notre formulaire envoie les bons messages d'erreur.
 
 Ajoutez la première partie de la classe de test ci-dessous à la fin du fichier **/catalog/tests/test_views.py**. Cela crée deux utilisateurs et deux instances de livres, mais ne donne qu'à un seul utilisateur la permission d'accéder à la vue. Le code pour autoriser les permissions durant les tests est montrée en gras :
 
@@ -805,75 +805,75 @@ class RenewBookInstancesViewTest(TestCase):
         )
 ```
 
-Ajoutez les tests suivants à la fin de la classe de test. Ils vérifient que seuls les utilisateurs avec les bonnes permissions (_testuser2_) peuvent accéder à la vue. Nous vérifions tous les cas : quand l'utilisateur n'est pas connecté, quand un utilisateur est connecté mais n'a pas les permissions requises, quand l'utilisateur a les permissions mais n'est pas l'emprunteur (ce test devrait réussir), et ce qui se passe quand ils tentent d'accéder à une `BookInstance` inexistante. Nous vérifions aussi que le bon template est utilisé.
+Ajoutez les tests suivants à la fin de la classe de test. Ils vérifient que seuls les utilisateurs avec les bonnes permissions (_testuser2_) peuvent accéder à la vue. Nous vérifions tous les cas : quand l'utilisateur n'est pas connecté, quand un utilisateur est connecté mais n'a pas les permissions requises, quand l'utilisateur a les permissions mais n'est pas l'emprunteur (ce test devrait réussir), et ce qui se passe quand ils tentent d'accéder à une `BookInstance` inexistante. Nous vérifions aussi que le bon template est utilisé.
 
 ```python
    def test_redirect_if_not_logged_in(self):
-        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
-        # Manually check redirect (Can't use assertRedirect, because the redirect URL is unpredictable)
-        self.assertEqual(response.status_code, 302)
-        self.assertTrue(response.url.startswith('/accounts/login/'))
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
+        # Manually check redirect (Can't use assertRedirect, because the redirect URL is unpredictable)
+        self.assertEqual(response.status_code, 302)
+        self.assertTrue(response.url.startswith('/accounts/login/'))
 
-    def test_redirect_if_logged_in_but_not_correct_permission(self):
-        login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK')
-        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
-        self.assertEqual(response.status_code, 403)
+    def test_redirect_if_logged_in_but_not_correct_permission(self):
+        login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK')
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
+        self.assertEqual(response.status_code, 403)
 
-    def test_logged_in_with_permission_borrowed_book(self):
-        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
-        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance2.pk}))
+    def test_logged_in_with_permission_borrowed_book(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance2.pk}))
 
-        # Check that it lets us login - this is our book and we have the right permissions.
-        self.assertEqual(response.status_code, 200)
+        # Check that it lets us login - this is our book and we have the right permissions.
+        self.assertEqual(response.status_code, 200)
 
-    def test_logged_in_with_permission_another_users_borrowed_book(self):
-        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
-        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
+    def test_logged_in_with_permission_another_users_borrowed_book(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
 
-        # Check that it lets us login. We're a librarian, so we can view any users book
-        self.assertEqual(response.status_code, 200)
+        # Check that it lets us login. We're a librarian, so we can view any users book
+        self.assertEqual(response.status_code, 200)
 
-    def test_HTTP404_for_invalid_book_if_logged_in(self):
+    def test_HTTP404_for_invalid_book_if_logged_in(self):
         # unlikely UID to match our bookinstance!
-        test_uid = uuid.uuid4()
-        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
-        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk':test_uid}))
-        self.assertEqual(response.status_code, 404)
-
-    def test_uses_correct_template(self):
-        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
-        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
-        self.assertEqual(response.status_code, 200)
-
-        # Check we used correct template
-        self.assertTemplateUsed(response, 'catalog/book_renew_librarian.html')
+        test_uid = uuid.uuid4()
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk':test_uid}))
+        self.assertEqual(response.status_code, 404)
+
+    def test_uses_correct_template(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
+        self.assertEqual(response.status_code, 200)
+
+        # Check we used correct template
+        self.assertTemplateUsed(response, 'catalog/book_renew_librarian.html')
 ```
 
 Ajoutez la méthode de test suivante, comme montré ci-dessous. Elle vérifie que la date initiale pour le formulaire est trois semaines dans le futur. Notez comment nous pouvons accéder à la valeur initiale de ce champ de formulaire (en gras).
 
 ```python
-    def test_form_renewal_date_initially_has_date_three_weeks_in_future(self):
-        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
-        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
-        self.assertEqual(response.status_code, 200)
+    def test_form_renewal_date_initially_has_date_three_weeks_in_future(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
+        self.assertEqual(response.status_code, 200)
 
-        date_3_weeks_in_future = datetime.date.today() + datetime.timedelta(weeks=3)
-        self.assertEqual(response.context['form'].initial['renewal_date'], date_3_weeks_in_future)
+        date_3_weeks_in_future = datetime.date.today() + datetime.timedelta(weeks=3)
+        self.assertEqual(response.context['form'].initial['renewal_date'], date_3_weeks_in_future)
 ```
 
-> **Attention :** Si vous utilisez la class de formulaire `RenewBookModelForm(forms.ModelForm)` à la place de la classe `RenewBookForm(forms.Form)`, le nom du champ est **'due_back'** et non **'renewal_date'**.
+> **Attention :** Si vous utilisez la class de formulaire `RenewBookModelForm(forms.ModelForm)` à la place de la classe `RenewBookForm(forms.Form)`, le nom du champ est **'due_back'** et non **'renewal_date'**.
 
 Le test suivant (ajoutez-le à la classe également) vérifie que la vue redirige vers une liste de tous les livres empruntés si le renouvellement réussit. Ce qui diffère ici est que, pour la première fois, nous montrons comment vous pouvez `POST`er des données en utilisant le client. Les données postées forment le second argument de la fonction post, et elles sont spécifiées comme un dictionnaire de clés/valeurs.
 
 ```python
-    def test_redirects_to_all_borrowed_book_list_on_success(self):
-        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
-        valid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=2)
-        response = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future})
-        self.assertRedirects(response, reverse('all-borrowed'))
+    def test_redirects_to_all_borrowed_book_list_on_success(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
+        valid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=2)
+        response = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future})
+        self.assertRedirects(response, reverse('all-borrowed'))
 ```
 
-> **Attention :** La vue _all-borrowed_ a été ajoutée comme _défi_, et votre code peut, à la place, rediriger vers la page d'accueil '/'. Si c'est le cas, modifiez les deux dernières lignes du code de test pour qu'elles ressemblent au code ci-dessous. L'expression `follow=True` dans la requête s'assure que la requête retourne l'URL de la destination finale (donc vérifie `/catalog/` plutôt que `/`).
+> **Attention :** La vue _all-borrowed_ a été ajoutée comme _défi_, et votre code peut, à la place, rediriger vers la page d'accueil '/'. Si c'est le cas, modifiez les deux dernières lignes du code de test pour qu'elles ressemblent au code ci-dessous. L'expression `follow=True` dans la requête s'assure que la requête retourne l'URL de la destination finale (donc vérifie `/catalog/` plutôt que `/`).
 >
 > ```python
 >  response = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future}, follow=True )
@@ -883,19 +883,19 @@ Le test suivant (ajoutez-le à la classe également) vérifie que la vue redirig
 Copiez les deux dernières fonctions dans la classe, comme indiqué ci-dessous. Elles testent de nouveau des requêtes POST, mais dans ce cas avec des dates de renouvellement invalides. Nous utilisons la méthode assertFormError() pour vérifier que les messages d'erreur sont ceux que nous attendons.
 
 ```python
-    def test_form_invalid_renewal_date_past(self):
-        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
-        date_in_past = datetime.date.today() - datetime.timedelta(weeks=1)
-        response = self.client.post(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}), {'renewal_date': date_in_past})
-        self.assertEqual(response.status_code, 200)
-        self.assertFormError(response, 'form', 'renewal_date', 'Invalid date - renewal in past')
-
-    def test_form_invalid_renewal_date_future(self):
-        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
-        invalid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=5)
-        response = self.client.post(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}), {'renewal_date': invalid_date_in_future})
-        self.assertEqual(response.status_code, 200)
-        self.assertFormError(response, 'form', 'renewal_date', 'Invalid date - renewal more than 4 weeks ahead')
+    def test_form_invalid_renewal_date_past(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
+        date_in_past = datetime.date.today() - datetime.timedelta(weeks=1)
+        response = self.client.post(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}), {'renewal_date': date_in_past})
+        self.assertEqual(response.status_code, 200)
+        self.assertFormError(response, 'form', 'renewal_date', 'Invalid date - renewal in past')
+
+    def test_form_invalid_renewal_date_future(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
+        invalid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=5)
+        response = self.client.post(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}), {'renewal_date': invalid_date_in_future})
+        self.assertEqual(response.status_code, 200)
+        self.assertFormError(response, 'form', 'renewal_date', 'Invalid date - renewal more than 4 weeks ahead')
 ```
 
 Le même genre de technique peut être utilisé pour tester les autres vues.
@@ -938,7 +938,7 @@ Le prochain (et dernier) tutoriel montre comment vous pouvez déployer votre mer
 ## À voir également
 
 - [Writing and running tests](https://docs.djangoproject.com/en/2.1/topics/testing/overview/) (Django docs)
-- [Writing your first Django app, part 5 > Introducing automated testing](https://docs.djangoproject.com/en/2.1/intro/tutorial05/) (Django docs)
+- [Writing your first Django app, part 5 > Introducing automated testing](https://docs.djangoproject.com/en/2.1/intro/tutorial05/) (Django docs)
 - [Testing tools reference](https://docs.djangoproject.com/en/2.1/topics/testing/tools/) (Django docs)
 - [Advanced testing topics](https://docs.djangoproject.com/en/2.1/topics/testing/advanced/) (Django docs)
 - [A Guide to Testing in Django](http://toastdriven.com/blog/2011/apr/10/guide-to-testing-in-django/) (Toast Driven Blog, 2011)
diff --git a/files/fr/learn/server-side/django/tutorial_local_library_website/index.md b/files/fr/learn/server-side/django/tutorial_local_library_website/index.md
index 9a02d03bdd..924f54361f 100644
--- a/files/fr/learn/server-side/django/tutorial_local_library_website/index.md
+++ b/files/fr/learn/server-side/django/tutorial_local_library_website/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Django Didactique: Site web "Bibliothèque  locale"'
+title: 'Django Didactique: Site web "Bibliothèque locale"'
 slug: Learn/Server-side/Django/Tutorial_local_library_website
 tags:
   - Apprentissage
@@ -23,7 +23,7 @@ Le premier article de cette série didactique explique ce que vous apprendrez et
         <a href="/fr/docs/Learn/Server-side/Django/Introduction"
           >l'introduction</a
         >. Pour les articles suivants avoir mis à jour l'environnement comme
-        décrit précédemment. 
+        décrit précédemment.
       </td>
     </tr>
     <tr>
diff --git a/files/fr/learn/server-side/express_nodejs/introduction/index.md b/files/fr/learn/server-side/express_nodejs/introduction/index.md
index 378a85ce83..32a95acc67 100644
--- a/files/fr/learn/server-side/express_nodejs/introduction/index.md
+++ b/files/fr/learn/server-side/express_nodejs/introduction/index.md
@@ -13,12 +13,12 @@ translation_of: Learn/Server-side/Express_Nodejs/Introduction
 ---
 {{LearnSidebar}}{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
 
-Dans ce tout premier article consacré à Express, nous répondons aux questions « Qu'est-ce que Node ? » et « Qu'est-ce que Express ? », et vous donnons un aperçu de ce qui fait d'Express un framework web si spécial. Nous décrivons les principales fonctionnalités et montrons quelques-uns des principaux composants d'une application Express (bien que vous ne disposiez pas encore d'un environnement de développement pour le tester).
+Dans ce tout premier article consacré à Express, nous répondons aux questions «&nbsp;Qu'est-ce que Node&nbsp;?&nbsp;» et «&nbsp;Qu'est-ce que Express ?&nbsp;», et vous donnons un aperçu de ce qui fait d'Express un framework web si spécial. Nous décrivons les principales fonctionnalités et montrons quelques-uns des principaux composants d'une application Express (bien que vous ne disposiez pas encore d'un environnement de développement pour le tester).
 
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Une culture de base en informatique, une compréhension globale de la
         <a href="/fr/docs/Learn/Server-side/First_steps"
@@ -31,7 +31,7 @@ Dans ce tout premier article consacré à Express, nous répondons aux questions
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Devenir familier avec ce qu'est Express et comment il s'intègre dans
         Node, les fonctionnalités qu'il apporte, et les principales étapes pour
@@ -45,7 +45,7 @@ Dans ce tout premier article consacré à Express, nous répondons aux questions
 
 [Node](https://nodejs.org/) (ou plus formellement _Node.js_) est un environnement d'exécution open-source, multi-plateforme, qui permet aux développeuses et développeurs de créer toutes sortes d'applications et d'outils côté serveur en [JavaScript](/fr/docs/Glossary/JavaScript). Cet environnement est destiné à être utilisé en dehors du navigateur (il s'exécute directement sur son ordinateur ou dans le système d'exploitation du serveur). Aussi, Node ne permet pas d'utiliser les API JavaScript liées au navigateur mais des API plus traditionnellement utilisées sur un serveur dont notamment celles pour HTTP ou la manipulation de systèmes de fichier.
 
-Dans une perspective de développement de serveur web, Node présente un certain nombre d'avantages :
+Dans une perspective de développement de serveur web, Node présente un certain nombre d'avantages&nbsp;:
 
 - D'excellentes performances ! Node a été créé pour optimiser le rendement et l'évolution des applications web. Il s'agit d'une bonne solution à de nombreux problèmes de développement web (par exemple, les applications en temps réel).
 - Le code est intégralement écrit en JavaScript ce qui signifie que l'on dépense moins d'énergie à basculer d'un langage à l'autre quand on code côté client et côté serveur.
@@ -117,13 +117,13 @@ Bien qu'Express soit assez minimaliste, des _middlewares_ (fonctions intermédia
 
 > **Note :** Cette flexibilité est à double tranchant. Il y a une multitude de paquets pour résoudre chaque problème mais trouver le bon paquet à utiliser peut vite devenir un défi. Il n'y a pas non plus de « bonne manière » pour structurer une application et beaucoup d'exemples que vous trouverez sur le net ne sont pas optimisés ou montrent seulement une infime partie de ce que vous devez faire pour développer une application web.
 
-## D'où viennent Node et Express ?
+## D'où viennent Node et Express&nbsp;?
 
 À ses débuts en 2009, Node a été publié pour Linux uniquement. Le gestionnaire de paquets NPM est sorti en 2010, et le support natif de Windows fut ajouté en 2012. Ceci est un très court aperçu d'une aventure riche en rebondissements. Allez creuser ça sur [Wikipédia](https://fr.wikipedia.org/wiki/Node.js#Historique) si vous voulez en savoir plus.
 
 Express est sorti pour la première fois en novembre 2010. Vous pouvez consulter la [liste des modifications](https://expressjs.com/en/changelog/4x.html) pour plus d'informations sur la version courante et [GitHub](https://github.com/expressjs/express/blob/master/History.md) pour plus de détails sur l'historique des publications.
 
-## Quelle popularité pour Node et Express ?
+## Quelle popularité pour Node et Express&nbsp;?
 
 La popularité d'un _framework_ web est importante car elle conditionne la maintenance dans le temps et les ressources qu'il est raisonnable de mettre à disposition dans la documentation, les bibliothèques d'extensions et le support technique.
 
diff --git a/files/fr/learn/server-side/first_steps/client-server_overview/index.md b/files/fr/learn/server-side/first_steps/client-server_overview/index.md
index 9cf9f2b4e0..a66e0ec417 100644
--- a/files/fr/learn/server-side/first_steps/client-server_overview/index.md
+++ b/files/fr/learn/server-side/first_steps/client-server_overview/index.md
@@ -6,7 +6,7 @@ original_slug: Learn/Server-side/Premiers_pas/Client-Serveur
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
 
-Maintenant que vous connaissez le but et le bénéfice de la programmation côté serveur, nous allons analyser en détails ce qui se passe quand un serveur reçoit une requête dynamique de la part d'un navigateur. Comme la plupart des sites gèrent le code côté serveur (requêtes et réponses) de la même manière, cela vous aidera à comprendre ce que vous devrez faire ensuite en écrivant votre propre code.
+Maintenant que vous connaissez le but et le bénéfice de la programmation côté serveur, nous allons analyser en détails ce qui se passe quand un serveur reçoit une requête dynamique de la part d'un navigateur. Comme la plupart des sites gèrent le code côté serveur (requêtes et réponses) de la même manière, cela vous aidera à comprendre ce que vous devrez faire ensuite en écrivant votre propre code.
 
 <table class="standard-table">
   <tbody>
@@ -28,13 +28,13 @@ Maintenant que vous connaissez le but et le bénéfice de la programmation côt�
   </tbody>
 </table>
 
-Il n'y a pas de code "réel" dans la suite de cette présentation parce que nous n'avons pas encore choisi un framework web à utiliser pour écrire notre code ! Ce tutoriel est quand même trés pertinent car les comportements décrits doivent être implémentés par votre code côté serveur, sans qu'il ait à se soucier (le serveur...)   de quel langage de programmation ou framework vous vous servez.
+Il n'y a pas de code "réel" dans la suite de cette présentation parce que nous n'avons pas encore choisi un framework web à utiliser pour écrire notre code ! Ce tutoriel est quand même trés pertinent car les comportements décrits doivent être implémentés par votre code côté serveur, sans qu'il ait à se soucier (le serveur...) de quel langage de programmation ou framework vous vous servez.
 
 ## Serveurs Web et HTTP (un avant-goût)
 
 Les navigateurs web communiquent avec les serveurs web avec le protocole [HTTP](/fr/docs/Web/HTTP) **: H**yper**T**ext**T**ransfer **P**rotocol. Quand vous cliquez un lien sur une page, soumettez un formulaire ou lancez une recherche, le navigateur envoie une requête HTTP (_HTTP Request)_ au serveur.
 
-Cette requête inclut :
+Cette requête inclut&nbsp;:
 
 - Une URL identifiant la cible et la ressource (un fichier HTML, un point particulier de données sur le serveur ou un outil à lancer).
 - Une méthode qui définit l'action requise ( par exemple récupérer un fichier ou sauvegarder certaines données ou mises à jour). Les différentes méthodes/verbes et les actions associées sont listées ci-dessous :
@@ -48,22 +48,22 @@ Cette requête inclut :
 
 - Des informations complémentaires peuvent être encodées avec la requête (des données de formulaire HTML par exemple). Ces informations peuvent être encodées comme :
 
-  - Paramètres URL : les requêtes  `GET` encodent les données dans l'URL envoyée au serveur en ajoutant des paires nom/valeur en fin de celle-ci. Exemple : `http://mysite.com?name=Fred&age=11`.    Il y a toujours un point d'interrogation (`?`) séparant le début de l'URL des paramètres passés. Ainsi qu'un signe égal (`=`) séparant le nom de la valeur associée et une esperluette (`&`) séparant chaque paire. Les paramètres URL ne sont pas sécurisés car ils peuvent être changés et soumis une deuxième fois par l'utilisateur. Pour cette raison, les requêtes URL paramètres/`GET` requests ne sont pas utilisées pour des requêtes mettant à jour des données sur un serveur.
+  - Paramètres URL : les requêtes  `GET` encodent les données dans l'URL envoyée au serveur en ajoutant des paires nom/valeur en fin de celle-ci. Exemple : `http://mysite.com?name=Fred&age=11`. Il y a toujours un point d'interrogation (`?`) séparant le début de l'URL des paramètres passés. Ainsi qu'un signe égal (`=`) séparant le nom de la valeur associée et une esperluette (`&`) séparant chaque paire. Les paramètres URL ne sont pas sécurisés car ils peuvent être changés et soumis une deuxième fois par l'utilisateur. Pour cette raison, les requêtes URL paramètres/`GET` requests ne sont pas utilisées pour des requêtes mettant à jour des données sur un serveur.
 
-- `POST` data.  Les requêtes `POST` ajoutent de nouvelles ressources dont les données sont encodées dans le corps de la requête.
-- Cookies côté Client.  Contient les données de session du client, incluant les clés dont peut se servir le serveur pour déterminer le statut de login et les accés/permissions aux ressources.
+- `POST` data.  Les requêtes `POST` ajoutent de nouvelles ressources dont les données sont encodées dans le corps de la requête.
+- Cookies côté Client.  Contient les données de session du client, incluant les clés dont peut se servir le serveur pour déterminer le statut de login et les accés/permissions aux ressources.
 
-Les serveurs Web attendent une requête du client puis la traitent quand elle arrive. Il répond ensuite au navigateur avec un message HTTP Response. La réponse contient un statut [HTTP Response](/fr/docs/Web/HTTP/Status) indiquant si, oui ou non, la requête a abouti. (ex : "`200 OK`" pour un succés, "`404 Not Found`" si la ressource ne peut être trouvée, "`403 Forbidden`" si l'utilisateur n'est pas autorisé à voir la ressource etc. Le corps d'une réponse aboutie à une requête  `GET` contiendrait la ressource demandée.
+Les serveurs Web attendent une requête du client puis la traitent quand elle arrive. Il répond ensuite au navigateur avec un message HTTP Response. La réponse contient un statut [HTTP Response](/fr/docs/Web/HTTP/Status) indiquant si, oui ou non, la requête a abouti. (ex : "`200 OK`" pour un succés, "`404 Not Found`" si la ressource ne peut être trouvée, "`403 Forbidden`" si l'utilisateur n'est pas autorisé à voir la ressource etc. Le corps d'une réponse aboutie à une requête `GET` contiendrait la ressource demandée.
 
 Quand une page HTML est retournée, elle est affichée par le navigateur. Le navigateur, nativement, pourra découvrir des liens vers d'autres ressources (ex : une page HTML intégre habituellement des pages JavaScript et CSS ), et enverra des requêtes séparées pour télécharger ces fichiers.
 
 Les sites web dynamiques ou statiques (voir sections suivantes) utilisent les mêmes protocoles/modèles de communication.
 
-### Exemple de requête/réponse GET 
+### Exemple de requête/réponse GET
 
 Vous faites une simple requête `GET` en cliquant sur un lien ou en faisant une recherche sur un site (sur une page de moteur de recherche par exemple). Une requête HTTP envoyée lorsque vous effectuez une recherche sur MDN pour les termes : "La relation Client-Serveur" ressemblera beaucoup à ce qui suit mais ne sera pas identique car des parties du message dépendent des paramètres de votre navigateur.
 
-> **Note :** Le format des messsages HTTP est défini par un standard web  ([RFC7230](http://www.rfc-editor.org/rfc/rfc7230.txt)). Vous n'avez pas besoin de connaître ce niveau de détails mais vous saurez au moins d'où vient tout ça !
+> **Note :** Le format des messsages HTTP est défini par un standard web  ([RFC7230](http://www.rfc-editor.org/rfc/rfc7230.txt)). Vous n'avez pas besoin de connaître ce niveau de détails mais vous saurez au moins d'où vient tout ça !
 
 #### La requête
 
@@ -86,19 +86,19 @@ Chaque ligne de la requête contient des informations sur celle-ci. La première
 Les premières et secondes lignes contiennent la plupart des données déjà évoquées précédemment :
 
 - Le type de la requête (`GET`).
-- La cible de la  ressource URL (`/en-US/search`).
+- La cible de la ressource URL (`/en-US/search`).
 - Les paramètres URL (`q=La%2relation%2Client%2-%2Bserveur&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev`).
 - Le site web cible/hôte (developer.mozilla.org).
 - La fin de la première ligne inclut aussi une petite chaîne identifiant la version spécifique du protocole (`HTTP/1.1`).
 
-La dernière ligne contient des données sur les cookies côté client — vous observerez que dans ce cas, le cookie a une id pour gérer la session :    (`Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...`).
+La dernière ligne contient des données sur les cookies côté client — vous observerez que dans ce cas, le cookie a une id pour gérer la session :    (`Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...`).
 
 Les lignes restantes concernent le navigateur utilisé et les sortes de réponses qu'il peut accepter. Par exemple, vous pouvez voir ceci :
 
 - Mon navigateur (`User-Agent`) est Mozilla Firefox (`Mozilla/5.0`).
 - Il accepte les données compressées (`Accept-Encoding: gzip`).
-- Il accepte les familles de caractères suivantes :  (`Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7`) et pour les langages : (`Accept-Language: de,en;q=0.7,en-us;q=0.3`).
-- La ligne `Referer` indique l'adresse de la page web qui contenait le lien vers cette ressource (Par ex. l'origine de la requête : `https://developer.mozilla.org/en-US/`).
+- Il accepte les familles de caractères suivantes :  (`Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7`) et pour les langages : (`Accept-Language: de,en;q=0.7,en-us;q=0.3`).
+- La ligne `Referer` indique l'adresse de la page web qui contenait le lien vers cette ressource (Par ex. l'origine de la requête : `https://developer.mozilla.org/en-US/`).
 
 Les requêtes HTTP peuvent aussi avoir un corps mais dans ce cas précis, il est vide.
 
@@ -107,11 +107,11 @@ Les requêtes HTTP peuvent aussi avoir un corps mais dans ce cas précis, il est
 La première partie de la réponse à cette requête est détaillée ci-dessous. L'en-tête contient les données suivantes :
 
 - La première ligne embarque le code `200 OK`, qui nous dit que la requête a abouti.
-- Nous pouvons voir que la réponse est formatée en  `text/html` (`Content-Type`).
+- Nous pouvons voir que la réponse est formatée en  `text/html` (`Content-Type`).
 - On remarque qu'elle utilise l'ensemble des caractères UTF-8 (`Content-Type: text/html; charset=utf-8`).
 - L'en-tête indique aussi la taille (`Content-Length: 41823`).
 
-À la fin du message nous avons le contenu du corps  — lequel contient le "vrai" HTML demandé par la requête.
+À la fin du message nous avons le contenu du corps  — lequel contient le "vrai" HTML demandé par la requête.
 
 ```html
 HTTP/1.1 200 OK
@@ -130,15 +130,15 @@ Content-Length: 41823
 
 
 <!DOCTYPE html>
-<html lang="en-US" dir="ltr" class="redesign no-js"  data-ffo-opensanslight=false data-ffo-opensans=false >
+<html lang="en-US" dir="ltr" class="redesign no-js"  data-ffo-opensanslight=false data-ffo-opensans=false >
 <head prefix="og: http://ogp.me/ns#">
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-  <script>(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);</script>
-  ...
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+  <script>(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);</script>
+  ...
 ```
 
-Le reste de l'en-tête de la réponse contient des informations sur la réponse elle-même (quand elle a été générée), sur le serveur et comment le navigateur doit gérer la page ( `X-Frame-Options: DENY` cette ligne dit au navigateur de ne pas autoriser cette page a être intégrée dans une  {{htmlelement("iframe")}} dans un autre site).
+Le reste de l'en-tête de la réponse contient des informations sur la réponse elle-même (quand elle a été générée), sur le serveur et comment le navigateur doit gérer la page ( `X-Frame-Options: DENY` cette ligne dit au navigateur de ne pas autoriser cette page a être intégrée dans une  {{htmlelement("iframe")}} dans un autre site).
 
 ### Exemple de requête/réponse POST
 
@@ -168,11 +168,11 @@ Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zIPUJsAZv6
 csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwillee&user-fullname=Hamish+Willee&user-title=&user-organization=&user-location=Australia&user-locale=en-US&user-timezone=Australia%2FMelbourne&user-irc_nickname=&user-interests=&user-expertise=&user-twitter_url=&user-stackoverflow_url=&user-linkedin_url=&user-mozillians_url=&user-facebook_url=
 ```
 
-La principale différence est que l'URL ne comporte pas de paramètres.  Comme vous voyez, l'information du formulaire est encodée dans le corps de la requête (par exemple : le nom complet du nouvel utilisateur est paramétré avec  `&user-fullname=Hamish+Willee`).
+La principale différence est que l'URL ne comporte pas de paramètres.  Comme vous voyez, l'information du formulaire est encodée dans le corps de la requête (par exemple : le nom complet du nouvel utilisateur est paramétré avec `&user-fullname=Hamish+Willee`).
 
 #### La réponse
 
-La réponse à la requête est expliquée dessous. Le statut "`302 Found`" dit au navigateur que le post a abouti et qu'il peut délivrer une deuxième requête HTTP pour charger la page spécifiée dans le champ  `Location`. L'information est donc en cela similaire à une réponse de requête `GET`.
+La réponse à la requête est expliquée dessous. Le statut "`302 Found`" dit au navigateur que le post a abouti et qu'il peut délivrer une deuxième requête HTTP pour charger la page spécifiée dans le champ  `Location`. L'information est donc en cela similaire à une réponse de requête `GET`.
 
 ```html
 HTTP/1.1 302 FOUND
@@ -190,11 +190,11 @@ X-Cache-Info: not cacheable; request wasn't a GET or HEAD
 Content-Length: 0
 ```
 
-> **Note :** Les requêtes et réponses montrées dans ces exemples ont été capturées avec l'application [Fiddler](https://www.telerik.com/download/fiddler) , mais vous pouvez avoir des informations similaires en utilisant des "renifleurs" web  (e.g. [Websniffer](http://websniffer.cc/), [Wireshark](https://www.wireshark.org/)) ou des extensions de navigateur comme  [HttpFox](https://addons.mozilla.org/en-US/firefox/addon/httpfox/). Vous pouvez essayer seul. Utilisez tous les outils recommandés, naviguez sur des sites et  éditez des profils de données pour explorer les différentes requêtes et réponses. La plupart des navigateurs modernes ont aussi des outils qui gérent les requêtes réseau, par exemple le [Network Monitor](/fr/docs/Tools/Network_Monitor) dans Firefox).
+> **Note :** Les requêtes et réponses montrées dans ces exemples ont été capturées avec l'application [Fiddler](https://www.telerik.com/download/fiddler) , mais vous pouvez avoir des informations similaires en utilisant des "renifleurs" web  (e.g. [Websniffer](http://websniffer.cc/), [Wireshark](https://www.wireshark.org/)) ou des extensions de navigateur comme  [HttpFox](https://addons.mozilla.org/en-US/firefox/addon/httpfox/). Vous pouvez essayer seul. Utilisez tous les outils recommandés, naviguez sur des sites et éditez des profils de données pour explorer les différentes requêtes et réponses. La plupart des navigateurs modernes ont aussi des outils qui gérent les requêtes réseau, par exemple le [Network Monitor](/fr/docs/Tools/Network_Monitor) dans Firefox).
 
 ## Les sites statiques
 
-Un site statique renvoie le même contenu codé en dur depuis le serveur quelle que soit la ressource demandée. Si vous avez une page concernant un produit à l'adresse  `/static/myproduct1.html`, cette même page sera retournée à chaque utilisateur. Si vous ajoutez un nouveau produit, vous devez ajouter une nouvelle page (par ex : `myproduct2.html`) et ainsi de suite. Cela peut être vraiment inefficace — Comment faire quand vous avez des milliers de pages "produit" à faire ? Vous allez répéter beaucoup de code identique dans chaque page (le modèle de base de la page, sa structure, etc.) et si vous voulez changer quoique ce soit dans la structure de la page — comme une section "produits dérivés" par exemple — alors, il faudra changer chaque page individuellement..
+Un site statique renvoie le même contenu codé en dur depuis le serveur quelle que soit la ressource demandée. Si vous avez une page concernant un produit à l'adresse  `/static/myproduct1.html`, cette même page sera retournée à chaque utilisateur. Si vous ajoutez un nouveau produit, vous devez ajouter une nouvelle page (par ex : `myproduct2.html`) et ainsi de suite. Cela peut être vraiment inefficace — Comment faire quand vous avez des milliers de pages "produit" à faire ? Vous allez répéter beaucoup de code identique dans chaque page (le modèle de base de la page, sa structure, etc.) et si vous voulez changer quoique ce soit dans la structure de la page — comme une section "produits dérivés" par exemple — alors, il faudra changer chaque page individuellement..
 
 > **Note :** Les sites statiques sont trés efficace quand vous avez un petit nombre de pages et que vous voulez envoyer le même contenu à chaque utilisateur. De toutes façons, ils peuvent avoir un coût certain de maintenance au fur et à mesure de l'augmentation du nombre de pages.
 
@@ -202,19 +202,19 @@ Voyons comment tout cela marche en révisant un diagramme d'architecture de site
 
 ![A simplified diagram of a static web server.](Basic%20Static%20App%20Server.png)
 
-Quand un utilisateur veut naviguer jusqu'à une page, le navigateur envoie une requête HTTP `GET` spécifiant l'URL de sa page HTML. Le serveur retourne le document demandé depuis son système de fichiers et retourne une réponse  HTTP contenant le document et un  [HTTP Response status code](/fr/docs/Web/HTTP/Status) ( statut codé de la réponse HTTP) qui est  "`200 OK`" (indiquant le succés de l'opération). Le serveur peut retourner un statut différent, par exemple "`404 Not Found`"  si le fichier est absent sur le serveur , ou bien "`301 Moved Permanently`" si le fichier existe mais a été déplacé vers une nouvelle localisation.
+Quand un utilisateur veut naviguer jusqu'à une page, le navigateur envoie une requête HTTP `GET` spécifiant l'URL de sa page HTML. Le serveur retourne le document demandé depuis son système de fichiers et retourne une réponse HTTP contenant le document et un  [HTTP Response status code](/fr/docs/Web/HTTP/Status) ( statut codé de la réponse HTTP) qui est  "`200 OK`" (indiquant le succés de l'opération). Le serveur peut retourner un statut différent, par exemple "`404 Not Found`"  si le fichier est absent sur le serveur , ou bien "`301 Moved Permanently`" si le fichier existe mais a été déplacé vers une nouvelle localisation.
 
-Le serveur d'un site statique n'aura à faire face qu'à des requêtes  GET vu qu'il ne stocke aucune donnée modifiable. Il ne change pas non plus ses réponses basées sur les données des requêtes HTTP (c'est à dire les paramètres URL ou les cookies).
+Le serveur d'un site statique n'aura à faire face qu'à des requêtes GET vu qu'il ne stocke aucune donnée modifiable. Il ne change pas non plus ses réponses basées sur les données des requêtes HTTP (c'est à dire les paramètres URL ou les cookies).
 
 Comprendre comment fonctionnent les sites statiques est sans aucun doute trés utile à l'apprentissage de la programmation côté serveur car les sites dynamiques gèrent les requêtes pour les fichiers statiques (CSS, JavaScript, images statiques , etc.) exactement de la même manière.
 
 ## Les sites dynamiques
 
-Un site dynamique peut générer et retourner du contenu basé sur une requête URL spécifique et les données (plutôt que de toujours renvoyer le même fichier codé en dur à une URL particulière).  Toujours avec l'exemple d'un site "produits", le serveur stockera les données du produit dans une base de données plutôt que dans un fichier HTML individuel. Quand il reçoit une requête HTTP `GET` pour un produit, le serveur détermine l'ID du produit, va chercher les données dans la base de données puis construit la page HTML pour la réponse en intégrant les données dans un gabarit (template) HTML. C'est un avantage indéniable sur un site statique :
+Un site dynamique peut générer et retourner du contenu basé sur une requête URL spécifique et les données (plutôt que de toujours renvoyer le même fichier codé en dur à une URL particulière).  Toujours avec l'exemple d'un site "produits", le serveur stockera les données du produit dans une base de données plutôt que dans un fichier HTML individuel. Quand il reçoit une requête HTTP `GET` pour un produit, le serveur détermine l'ID du produit, va chercher les données dans la base de données puis construit la page HTML pour la réponse en intégrant les données dans un gabarit (template) HTML. C'est un avantage indéniable sur un site statique :
 
 Utiliser une base de données permet à l'information "produit" d'être stockée efficacement, en étant modifiable, extensible et bien indexée.
 
-Employer des gabarits HTML facilite la façon de changer la structure HTML parce que c'est fait en un seul endroit, dans un seul gabarit (template) et non pas sur potentiellement des milliers de pages statiques.
+Employer des gabarits HTML facilite la façon de changer la structure HTML parce que c'est fait en un seul endroit, dans un seul gabarit (template) et non pas sur potentiellement des milliers de pages statiques.
 
 ### Anatomie d'un requête dynamique
 
@@ -240,7 +240,7 @@ Une opération de mise à jour d'un enregistrement dans la base de données sera
 
 Le travail d'une application Web consiste à recevoir des requêtes HTTP et à renvoyer des réponses HTTP. Bien que l'interaction avec une base de données pour obtenir ou mettre à jour des informations soit une tâche très courante, le code peut faire d'autres choses en même temps, ou ne pas interagir du tout avec une base de données.Un bon exemple de tâche supplémentaire qu'une application Web pourrait exécuter serait l'envoi d'un courrier électronique aux utilisateurs pour confirmer leur inscription sur le site. Le site peut également effectuer une journalisation ou d’autres opérations.
 
-### Renvoyer autre chose que  du HTML
+### Renvoyer autre chose que du HTML
 
 Le code de site Web côté serveur ne doit pas nécessairement renvoyer des extraits / fichiers HTML dans la réponse. Au lieu de cela, il peut créer et renvoyer de manière dynamique d'autres types de fichiers (texte, PDF, CSV, etc.) ou même des données (JSON, XML, etc.).L'idée de renvoyer des données à un navigateur Web afin qu'il puisse mettre à jour de manière dynamique son propre contenu ({{glossary ("AJAX")}}) existe depuis un certain temps. Plus récemment, les "applications à page unique" sont devenues populaires, le site Web entier étant écrit avec un seul fichier HTML mis à jour de manière dynamique en cas de besoin. Les sites Web créés à l'aide de ce style d'application génèrent des coûts de calcul considérables entre le serveur et le navigateur Web, ce qui peut donner l'impression que les sites Web se comportent beaucoup plus comme des applications natives (très réactives, etc.).
 
@@ -266,7 +266,7 @@ urlpatterns = [
 
 > **Note :** Les premiers paramètres des fonctions url () peuvent paraître un peu bizarres (par exemple, r '^ junior / $') car ils utilisent une technique de correspondance de modèle appelée "expressions régulières" (RegEx ou RE). Vous n'avez pas besoin de savoir comment fonctionnent les expressions régulières à ce stade, car elles nous permettent également de faire correspondre les modèles de l'URL (plutôt que les valeurs codées en dur ci-dessus) et de les utiliser comme paramètres dans nos fonctions d'affichage. À titre d'exemple, un RegEx très simple pourrait dire "faire correspondre une seule lettre majuscule, suivie de 4 à 7 lettres minuscules".
 
-L'infrastructure Web permet également à une fonction d'affichage d'extraire facilement des informations de la base de données. La structure de nos données est définie dans des modèles, qui sont des classes Python qui définissent les champs à stocker dans la base de données sous-jacente. Si nous avons un modèle nommé Team avec un champ "team_type", nous pouvons utiliser une syntaxe de requête simple pour récupérer toutes les équipes ayant un type particulier.L’exemple ci-dessous donne la liste de toutes les équipes ayant le type d’équipe exact (sensible à la casse) de "junior" - notez le format: nom du champ (team_type) suivi du  double underscore, puis du type de match à utiliser (ici nous utilisons: exact). ). Il existe de nombreux autres types de match et nous pouvons les enchaîner. Nous pouvons également contrôler l'ordre et le nombre de résultats retournés.
+L'infrastructure Web permet également à une fonction d'affichage d'extraire facilement des informations de la base de données. La structure de nos données est définie dans des modèles, qui sont des classes Python qui définissent les champs à stocker dans la base de données sous-jacente. Si nous avons un modèle nommé Team avec un champ "team_type", nous pouvons utiliser une syntaxe de requête simple pour récupérer toutes les équipes ayant un type particulier.L’exemple ci-dessous donne la liste de toutes les équipes ayant le type d’équipe exact (sensible à la casse) de "junior" - notez le format: nom du champ (team_type) suivi du double underscore, puis du type de match à utiliser (ici nous utilisons: exact). ). Il existe de nombreux autres types de match et nous pouvons les enchaîner. Nous pouvons également contrôler l'ordre et le nombre de résultats retournés.
 
 ```python
 #best/views.py
@@ -277,9 +277,9 @@ from .models import Team
 
 
 def junior(request):
-    list_teams = Team.objects.filter(team_type__exact="junior")
-    context = {'list': list_teams}
-    return render(request, 'best/index.html', context)
+    list_teams = Team.objects.filter(team_type__exact="junior")
+    context = {'list': list_teams}
+    return render(request, 'best/index.html', context)
 ```
 
 Une fois que la fonction junior () a obtenu la liste des équipes juniors, elle appelle la fonction render () en transmettant la requête HttpRequest d'origine, un modèle HTML et un objet "context" définissant les informations à inclure dans le modèle. La fonction render () est une fonction pratique qui génère du HTML à l'aide d'un context et d'un template HTML, puis le renvoie dans un objet HttpResponse.De toute évidence, les frameworks Web peuvent vous aider dans de nombreuses autres tâches. Nous discutons beaucoup plus d'avantages et de choix de frameworks Web populaires dans le prochain article.
diff --git a/files/fr/learn/server-side/first_steps/index.md b/files/fr/learn/server-side/first_steps/index.md
index 020b17c1f0..30840e4c56 100644
--- a/files/fr/learn/server-side/first_steps/index.md
+++ b/files/fr/learn/server-side/first_steps/index.md
@@ -12,11 +12,11 @@ original_slug: Learn/Server-side/Premiers_pas
 ---
 {{LearnSidebar}}
 
-Dans ce module nous répondrons à quelques questions fondamentales sur la programmation côté serveur — "Qu'est-ce que c'est ?", "En quoi diffère-t-elle de la programmation côté client ?" et "Pourquoi est-ce si utile ?". Nous fournirons ensuite un aperçu de certaines infrastructures d'applications web (aussi appelé frameworks) côté serveurs parmi les plus populaires, ainsi que des conseils pour sélectionner la plus approprié pour créer votre premier site. Enfin un article vous présentera les questions de sécurité pour un serveur web.
+Dans ce module nous répondrons à quelques questions fondamentales sur la programmation côté serveur — "Qu'est-ce que c'est ?", "En quoi diffère-t-elle de la programmation côté client ?" et "Pourquoi est-ce si utile ?". Nous fournirons ensuite un aperçu de certaines infrastructures d'applications web (aussi appelé frameworks) côté serveurs parmi les plus populaires, ainsi que des conseils pour sélectionner la plus approprié pour créer votre premier site. Enfin un article vous présentera les questions de sécurité pour un serveur web.
 
 ## Prérequis
 
-Pour suivre ce module, aucune connaissance en programmation web côté serveur ou tout autre type de programmation n'est nécessaire.
+Pour suivre ce module, aucune connaissance en programmation web côté serveur ou tout autre type de programmation n'est nécessaire.
 
 Vous aurez besoin de comprendre "comment fonctionne le web". Nous vous recommandons de lire d'abord les sujets suivants :
 
@@ -33,9 +33,9 @@ Avec cette compréhension de base, vous serez prêts à parcourir les modules de
 - [Présentation client-serveur](/fr/docs/Learn/Server-side/Premiers_pas/Client-Serveur)
   - : Maintenant que vous connaissez le but et les avantages potentiels de la programmation côté serveur, nous allons examiner en détail ce qui se passe lorsqu'un serveur reçoit une "requête dynamique" d'un navigateur. Comme la plupart des codes côté serveur traitent les demandes et les réponses de la même manière, cela vous aidera à comprendre ce que vous devez faire lorsque vous écrivez votre propre code.
 - [Frameworks web côté serveur](/fr/docs/Learn/Server-side/Premiers_pas/Web_frameworks)
-  - : Le dernier article vous a montré ce qu'une application web côté serveur doit faire pour répondre aux demandes d'un navigateur web. Nous allons maintenant vous montrer comment les frameworks web peuvent simplifier ces tâches ; nous vous aiderons à choisir le bon framework pour coder votre première application web côté serveur.
+  - : Le dernier article vous a montré ce qu'une application web côté serveur doit faire pour répondre aux demandes d'un navigateur web. Nous allons maintenant vous montrer comment les frameworks web peuvent simplifier ces tâches ; nous vous aiderons à choisir le bon framework pour coder votre première application web côté serveur.
 - [Sécurité de votre site web](/fr/docs/Learn/Server-side/First_steps/Website_security)
-  - : La sécurité de votre site web requiert une vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre les premières mesures importantes à prendre pour mettre votre application web à l'abri des menaces les plus courantes.
+  - : La sécurité de votre site web requiert une vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre les premières mesures importantes à prendre pour mettre votre application web à l'abri des menaces les plus courantes.
 
 ## Évaluations
 
diff --git a/files/fr/learn/server-side/first_steps/introduction/index.md b/files/fr/learn/server-side/first_steps/introduction/index.md
index 9763f1cba6..2fe460b0f2 100644
--- a/files/fr/learn/server-side/first_steps/introduction/index.md
+++ b/files/fr/learn/server-side/first_steps/introduction/index.md
@@ -13,7 +13,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction
 ---
 {{LearnSidebar}}{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
 
-Bienvenue au cours pour débutant de MDN sur la programmation côté serveur. Dans ce premier article, nous allons regarder la programmation côté serveur sans rentrer dans les détails techniques, en répondant aux questions telles que "qu'est-ce que c'est?", "quelle est la différence avec la programmation côté client?", et "pourquoi est-ce utile?". Après avoir lu cet article vous comprendrez commment la programmation côté serveur donne toute leur puissance aux sites web.
+Bienvenue au cours pour débutant de MDN sur la programmation côté serveur. Dans ce premier article, nous allons regarder la programmation côté serveur sans rentrer dans les détails techniques, en répondant aux questions telles que "qu'est-ce que c'est?", "quelle est la différence avec la programmation côté client?", et "pourquoi est-ce utile?". Après avoir lu cet article vous comprendrez commment la programmation côté serveur donne toute leur puissance aux sites web.
 
 <table class="standard-table">
   <tbody>
@@ -34,9 +34,9 @@ Bienvenue au cours pour débutant de MDN sur la programmation côté serveur. Da
   </tbody>
 </table>
 
-La plupart des sites web à grande échelle utilisent du code côté serveur pour afficher dynamiquement différentes données lorsque nécessaire ; ces données sont généralement extraites d'une base de données stockée sur un serveur et envoyées au client pour être affichées avec du code (HTML et/ou JavaScript).
+La plupart des sites web à grande échelle utilisent du code côté serveur pour afficher dynamiquement différentes données lorsque nécessaire ; ces données sont généralement extraites d'une base de données stockée sur un serveur et envoyées au client pour être affichées avec du code (HTML et/ou JavaScript).
 
-L'avantage le plus significatif du code côté serveur est sans doute qu'il permet d'adapter le contenu du site web à chaque utilisateur. Les sites dynamiques peuvent mettre en évidence du contenu pertinent en fonction des préférences et des habitudes de l'utilisateur. Il peut également faciliter l'utililsation des sites web en stockant des données, des informations personnelles — par exemple donner la possibilité d'enregistrer une carte de crédit pour les achats suivants.
+L'avantage le plus significatif du code côté serveur est sans doute qu'il permet d'adapter le contenu du site web à chaque utilisateur. Les sites dynamiques peuvent mettre en évidence du contenu pertinent en fonction des préférences et des habitudes de l'utilisateur. Il peut également faciliter l'utililsation des sites web en stockant des données, des informations personnelles — par exemple donner la possibilité d'enregistrer une carte de crédit pour les achats suivants.
 
 Cela peut même permettre une interaction avec les utilisateurs du site, en envoyant des notifications et mises à jour par email ou via d'autres canaux. Toutes ces capacités rendent possible un engagement plus important avec l'utilisateur.
 
@@ -44,9 +44,9 @@ Dans le monde moderne du développement web, apprendre le développement côté
 
 ## Qu'est-ce que la programmation côté serveur?
 
-Les navigateurs web communiquent avec les [serveurs web](/fr/Apprendre/Qu_est-ce_qu_un_serveur_web) en utilisant le protocole {{glossary("HTTP")}} (**H**yper**T**ext **T**ransfer **P**rotocol). Quand vous cliquez sur un lien dans une page web, envoyez un formulaire, ou encore lancez une recherche, une **requête HTTP** est envoyée du navigateur au serveur cible.
+Les navigateurs web communiquent avec les [serveurs web](/fr/Apprendre/Qu_est-ce_qu_un_serveur_web) en utilisant le protocole {{glossary("HTTP")}} (**H**yper**T**ext **T**ransfer **P**rotocol). Quand vous cliquez sur un lien dans une page web, envoyez un formulaire, ou encore lancez une recherche, une **requête HTTP** est envoyée du navigateur au serveur cible.
 
-Une requête inclut _une URL_ pour identifier la ressource demandée, _une méthode_ pour définir l'action désirée (comme GET pour obtenir, DELETE pour supprimer ou POST pour publier) et peut également inclure des informations supplémentaires encodées dans _les paramètres_ de l'URL (des paires clés/valeurs envoyées via une chaîne de recherche — [query string](https://en.wikipedia.org/wiki/Query_string) en anglais), les données POST (données envoyées par la [méthode HTTP POST](/fr/docs/Web/HTTP/M%C3%A9thode/POST)), ou les {{glossary("Cookie", "cookies associés")}}.
+Une requête inclut _une URL_ pour identifier la ressource demandée, _une méthode_ pour définir l'action désirée (comme GET pour obtenir, DELETE pour supprimer ou POST pour publier) et peut également inclure des informations supplémentaires encodées dans _les paramètres_ de l'URL (des paires clés/valeurs envoyées via une chaîne de recherche — [query string](https://en.wikipedia.org/wiki/Query_string) en anglais), les données POST (données envoyées par la [méthode HTTP POST](/fr/docs/Web/HTTP/M%C3%A9thode/POST)), ou les {{glossary("Cookie", "cookies associés")}}.
 
 Les serveurs web attendent des requêtes du client, les traitent quand elles arrivent, et répondent au navigateur web avec une **réponse HTTP**. La réponse contient _un statut_ qui indique si la requête a pu être traitée avec succès ou non (exemple "HTTP/1.1 200 OK" pour indiquer le succès).
 
@@ -64,13 +64,13 @@ Le serveur récupère le document demandé du système de fichiers et retourne u
 
 Un site web dynamique, quant à lui, est un site dont une partie des réponses sont générées _dynamiquement_, à la demande. Sur les sites dynamiques, les pages HTML sont normalement crées en insérant des données d'une base de données dans des espaces réservés à l'intérieur de templates HTML (c'est une manière beaucoup plus efficace que des fichiers statiques pour stocker de grandes quantités de contenu).
 
-Un site dynamique peut retourner des données différentes pour une URL, en se basant sur les informations fournies par l'utilisateur ou les préférences stockées et peut effectuer des opérations avant de retourner la réponse.
+Un site dynamique peut retourner des données différentes pour une URL, en se basant sur les informations fournies par l'utilisateur ou les préférences stockées et peut effectuer des opérations avant de retourner la réponse.
 
 La plupart du code pour maintenir un site web dynamique doit s'exécuter sur le serveur. La création de ce code est ce qu'on appelle la "**programmation côté serveur**" (ou parfois "**codage back-end**").
 
 Le diagramme ci-dessous montre une architecture simple pour un _site web dynamique_. Comme dans le diagramme précédent, les navigateurs envoient des requêtes HTTP au serveur, qui les traite et retourne les réponses HTTP appropriées.
 
-Les requêtes pour les ressources _statiques_ sont toujours gérées de la même manière que pour les sites statiques (les ressources statiques sont tous les fichiers qui ne changent pas —typiquement : CSS, JavaScript, Images, fichiers PDF etc).
+Les requêtes pour les ressources _statiques_ sont toujours gérées de la même manière que pour les sites statiques (les ressources statiques sont tous les fichiers qui ne changent pas —typiquement : CSS, JavaScript, Images, fichiers PDF etc).
 
 ![A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview.](Web%20Application%20with%20HTML%20and%20Steps.png)
 
@@ -82,19 +82,19 @@ Voyons maintenant le code impliqué dans la programmation côté serveur et côt
 
 - Ils ont des objectifs et des préoccupations différents.
 - Ils n'utilisent généralement pas les mêmes langages de programmation (exception faite de JavaScript, qui peut être utilisé côté serveur et côté client).
-- Ils s'exécutent dans des environnements différents du système d'exploitation.
+- Ils s'exécutent dans des environnements différents du système d'exploitation.
 
-Le code exécuté par le navigateur est connu sous le nom de **code côté client** (ou **front-end**) et se préoccupe principalement de l'apparence et du comportement des pages web affichées. Cela inclut sélectionner et styliser les composants de l'interface utilisateur, créer la mise en page, la navigation, valider les formulaires, etc. D'un autre côté, la programmation côté serveur implique de définir le contenu retourné au navigateur en réponse aux requêtes. Le code côté serveur gère des tâches telles que la validation des données envoyées, l'utilisation des bases de données pour stocker et récupérer des données et l'envoi de données générées au client tel qu'attendu.
+Le code exécuté par le navigateur est connu sous le nom de **code côté client** (ou **front-end**) et se préoccupe principalement de l'apparence et du comportement des pages web affichées. Cela inclut sélectionner et styliser les composants de l'interface utilisateur, créer la mise en page, la navigation, valider les formulaires, etc. D'un autre côté, la programmation côté serveur implique de définir le contenu retourné au navigateur en réponse aux requêtes. Le code côté serveur gère des tâches telles que la validation des données envoyées, l'utilisation des bases de données pour stocker et récupérer des données et l'envoi de données générées au client tel qu'attendu.
 
-Le code client est écrit en [HTML](/fr/Apprendre/HTML), [CSS](/fr/Apprendre/CSS), et [JavaScript](/fr/Apprendre/JavaScript) — il est exécuté dans un navigateur web et a peu ou pas accès au système d'exploitation de l'utilisateur (inclut un accès limité au système de fichiers).
+Le code client est écrit en [HTML](/fr/Apprendre/HTML), [CSS](/fr/Apprendre/CSS), et [JavaScript](/fr/Apprendre/JavaScript) — il est exécuté dans un navigateur web et a peu ou pas accès au système d'exploitation de l'utilisateur (inclut un accès limité au système de fichiers).
 
-Les développeurs web ne peuvent pas contrôler quel navigateur est utilisé par l'utilisateur pour voir le site web  — or les navigateurs fournissent des niveaux de compatibilité inconsistants quant aux fonctionnalités du code côté client, et une partie du challenge de la programmation côté client consiste à gérer les différences de support des navigateurs.
+Les développeurs web ne peuvent pas contrôler quel navigateur est utilisé par l'utilisateur pour voir le site web  — or les navigateurs fournissent des niveaux de compatibilité inconsistants quant aux fonctionnalités du code côté client, et une partie du challenge de la programmation côté client consiste à gérer les différences de support des navigateurs.
 
-Le code côté serveur peut être écrit dans nombre de langages de programmation — les langages les plus populaires pour la programmation web côté serveur sont en autres PHP, Python, Ruby, C#, et NodeJS(JavaScript). Le code côté serveur a plein accès au système d'exploitation du serveur et le développeur est libre de choisir le langage (et la version) qu'il veut utiliser.
+Le code côté serveur peut être écrit dans nombre de langages de programmation — les langages les plus populaires pour la programmation web côté serveur sont en autres PHP, Python, Ruby, C#, et NodeJS(JavaScript). Le code côté serveur a plein accès au système d'exploitation du serveur et le développeur est libre de choisir le langage (et la version) qu'il veut utiliser.
 
 Typiquement, les développeurs écrivent leur code en utilisant des **frameworks web**. Les frameworks web sont des ensembles de fonctions, objets, règles et autres constructions de code conçus pour résoudre des problèmes courants, accélérer le développement et simplifier les différents types de tâches rencontrées dans un domaine particulier.
 
-Encore une fois, bien que le code côté client et côté serveur utilisent des frameworks, les domaines d'application sont très différents et par conséquent les frameworks aussi. Les frameworks web côté client simplifient les tâches de mise en page et de présentation tandis que les frameworks web côté serveur fournissent des fonctionnalités "courantes" que vous auriez probablement à implémenter vous-même autrement (comme le support des sessions, des utilisateurs et de l'authentification, l'accès à la base de données, les bibliothèques de templates, etc.).
+Encore une fois, bien que le code côté client et côté serveur utilisent des frameworks, les domaines d'application sont très différents et par conséquent les frameworks aussi. Les frameworks web côté client simplifient les tâches de mise en page et de présentation tandis que les frameworks web côté serveur fournissent des fonctionnalités "courantes" que vous auriez probablement à implémenter vous-même autrement (comme le support des sessions, des utilisateurs et de l'authentification, l'accès à la base de données, les bibliothèques de templates, etc.).
 
 > **Note :** Les frameworks côté client sont souvent utilisés pour accélérer le développement du code côté client, mais vous pouvez également choisir d'écrire tout le code à la main ; en vérité, écrire votre code à la main peut être plus rapide et plus efficace si vous n'avez besoin que d'une petite interface web très simple.
 >
@@ -106,15 +106,15 @@ La programmation côté serveur est très utile parce qu'elle nous permet de dé
 
 Des compagnies comme Amazon utilisent la programmation côté serveur pour construire la recherche de produits, faire des suggestions de produit ciblées sur les préférences du client et ses habitudes d'achat, simplifier les achats, etc.
 
-Les banques l'utilisent pour stocker les informations du compte ainsi que faire des transactions et n'autoriser à les consulter que les utilisateurs reconnus. D'autres services comme Facebook, Twitter, Instagram, et Wikipedia utilisent la programmation côté serveur pour mettre en avant, partager et contrôler l'accès au contenu.
+Les banques l'utilisent pour stocker les informations du compte ainsi que faire des transactions et n'autoriser à les consulter que les utilisateurs reconnus. D'autres services comme Facebook, Twitter, Instagram, et Wikipedia utilisent la programmation côté serveur pour mettre en avant, partager et contrôler l'accès au contenu.
 
 Les utilisations les plus courantes et les plus bénéfiques de la programmation côté serveur sont listées ci-dessous. Vous verrez qu'il y a quelques recoupements :
 
 ### Stockage et distribution de l'information plus efficaces
 
-Imaginez combien de produits sont disponibles sur Amazon et combien de posts ont été écrits sur Facebook. Créer une page statique distincte pour chaque produit ou article serait totalement impossible.
+Imaginez combien de produits sont disponibles sur Amazon et combien de posts ont été écrits sur Facebook. Créer une page statique distincte pour chaque produit ou article serait totalement impossible.
 
-La programmation côté serveur nous permet plutôt de stocker l'information dans une base de données et de construire et retourner dynamiquement le HTML ainsi que d'autres types de fichiers (comme les PDF, images, etc.). Il est également possible de simplement retourner des données ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) pour les afficher avec des frameworks côté client (cela réduit la charge de travail du serveur et la quantité de données qui doit être retournée).
+La programmation côté serveur nous permet plutôt de stocker l'information dans une base de données et de construire et retourner dynamiquement le HTML ainsi que d'autres types de fichiers (comme les PDF, images, etc.). Il est également possible de simplement retourner des données ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) pour les afficher avec des frameworks côté client (cela réduit la charge de travail du serveur et la quantité de données qui doit être retournée).
 
 Le serveur ne se limite pas à l'envoi d'informations à partir de bases de données, il peut retourner le résultat d'autres outils logiciels, ou les données de services de communication. Le contenu peut même être ciblé pour le type d'appareil client qui le reçoit.
 
@@ -126,11 +126,11 @@ Comme les informations se trouvent dans une base de données, elles peuvent éga
 > 2.  Cherchez un certain nombre de mot-clés et remarquez que la structure de la page de change pas, même si les résultats oui.
 > 3.  Ouvrez deux ou trois produits. Remarquez que la structure et la disposition de la page sont identiques, mais que le contenu pour les différents produits a été extrait de la base de données.
 >
-> Pour un terme de recherche courant  ("poisson", disons) vous pouvez voir littéralement des millions de valeurs retournées. Utiliser une base de données permet à ces données d'être stockées et partagées efficacement, et permet de contrôler la présentation de l'information à partir d'un seul endroit.
+> Pour un terme de recherche courant  ("poisson", disons) vous pouvez voir littéralement des millions de valeurs retournées. Utiliser une base de données permet à ces données d'être stockées et partagées efficacement, et permet de contrôler la présentation de l'information à partir d'un seul endroit.
 
 ### Expérience utilisateur personnalisée
 
-Les serveurs peuvent stocker et utiliser des informations sur les clients pour fournir une expérience utilisateur personnalisée. Par exemple, beaucoup de sites proposent d'enregistrer une carte de crédit pour que les détails n'aient pas à être saisis de nouveau. Des sites comme Google Maps peuvent utiliser les emplacement enregistrés ou l'emplacement en cours pour fournir des informations d'itinéraire et chercher ou utiliser l'historique des voyages précédents pour trouver des boutiques locales dans les résultats de recherche.
+Les serveurs peuvent stocker et utiliser des informations sur les clients pour fournir une expérience utilisateur personnalisée. Par exemple, beaucoup de sites proposent d'enregistrer une carte de crédit pour que les détails n'aient pas à être saisis de nouveau. Des sites comme Google Maps peuvent utiliser les emplacement enregistrés ou l'emplacement en cours pour fournir des informations d'itinéraire et chercher ou utiliser l'historique des voyages précédents pour trouver des boutiques locales dans les résultats de recherche.
 
 Une analyse plus approfondie des habitudes des utilisateurs peut être utilisée pour anticiper leurs intérêts et personnaliser les réponses ou les notifications du serveur, par exemple pour fournir une liste des lieux précédemment visités ou les plus populaires que vous pourriez vouloir chercher sur la carte.
 
@@ -150,14 +150,14 @@ La programmation côté serveur permet aux sites de restreindre l'accès aux uti
 
 Quelques exemples du monde réel incluent :
 
-- Les réseaux sociaux comme Facebook permettent aux utilisateurs de contrôler entièrement leurs propres données, mais permettent seulement à leurs amis de les voir ou des les commenter. L'utilisateur détermine qui peut voir ses données, et par extension, dans le flux de qui elles apparaissent —  l'autorisation est une partie centrale de l'expérience utilisateur !
+- Les réseaux sociaux comme Facebook permettent aux utilisateurs de contrôler entièrement leurs propres données, mais permettent seulement à leurs amis de les voir ou des les commenter. L'utilisateur détermine qui peut voir ses données, et par extension, dans le flux de qui elles apparaissent —  l'autorisation est une partie centrale de l'expérience utilisateur !
 - Le site sur lequel vous êtes en ce moment même contrôle l'accès au contenu : les articles sont visibles à tout le monde, mais seuls les utilisateurs identifiés peuvent éditer le contenu. Essayez de cliquer sur le bouton **Modifier** en haut de cette page — si vous êtes identifié, vous verrez la vue d'édition ; sinon, vous serez redirigé vers la page d'inscription.
 
 > **Note :** Il existe de nombreux autres exemples où l'accès au contenu est contrôlé. Par exemple, que voyez-vous si vous allez sur le site en ligne de votre banque ? Connectez-vous à votre compte — quelles autres informations pouvez-vous voir et modifier ? Quelles informations pouvez-vous voir que seule la banque peut changer ?
 
 ### Stocker les informations de session/d'état
 
-La programmation côté serveur permet aux développeurs d'utiliser des **sessions** — en gros, un mécanisme qui permet au serveur de stocker des informations sur l'utilisation en cours d'un site et d'envoyer des réponses différentes selon cette information.
+La programmation côté serveur permet aux développeurs d'utiliser des **sessions** — en gros, un mécanisme qui permet au serveur de stocker des informations sur l'utilisation en cours d'un site et d'envoyer des réponses différentes selon cette information.
 
 Cela permet, par exemple, à un site de savoir qu'un utilisateur s'est déjà identifié et afficher des messages qui lui sont destinés, d'afficher son historique de commande, ou peut-être encore, dans le cas d'un jeu, lui permettre de reprendre là où il en est resté.
 
@@ -165,7 +165,7 @@ Cela permet, par exemple, à un site de savoir qu'un utilisateur s'est déjà id
 
 ### Notifications et communication
 
-Les serveurs peuvent envoyer des notifications générales ou personnalisées à l'utilisateur via le site web lui-même ou par email, SMS, messagerie instantannée, conversations vidéo ou autres services de communication.
+Les serveurs peuvent envoyer des notifications générales ou personnalisées à l'utilisateur via le site web lui-même ou par email, SMS, messagerie instantannée, conversations vidéo ou autres services de communication.
 
 Quelques exemples incluent :
 
@@ -179,11 +179,11 @@ Quelques exemples incluent :
 
 Un site web peut collecter beaucoup de données sur les utilisateurs : ce qu'ils cherchent, ce qu'ils achètent, ce qu'ils recommandent, combien de temps ils restent sur chaque page. La programmation côté serveur peut être utilisée pour affiner les réponses en fonction de l'analyse de ces données.
 
-Par exemple, Amazon et Google font tous deux de la publicité pour des produits en se basant sur les recherches précédentes, sur les achats que vous avez faits.
+Par exemple, Amazon et Google font tous deux de la publicité pour des produits en se basant sur les recherches précédentes, sur les achats que vous avez faits.
 
 > **Note :** Si vous êtes un utilisateur de Facebook, allez sur votre flux principal et regardez les posts. Notez que certains posts ne sont pas classés par ordre numérique — en particulier, les posts qui ont le plus de "likes" sont souvent placés plus haut dans la liste que les posts plus récents.
 >
-> Observez également quels types de publicités vous voyez — vous pourrez voir des publicités pour des choses que vous avez regardé sur d'autres sites. L'algorithme de Facebook pour mettre en avant du contenu et faire de la publicité est un peu un mystérieux, mais il est clair qu'il prend en compte vos likes et ce que vous avez l'habitude de regarder !
+> Observez également quels types de publicités vous voyez — vous pourrez voir des publicités pour des choses que vous avez regardé sur d'autres sites. L'algorithme de Facebook pour mettre en avant du contenu et faire de la publicité est un peu un mystérieux, mais il est clair qu'il prend en compte vos likes et ce que vous avez l'habitude de regarder !
 
 ## Sommaire
 
@@ -191,11 +191,11 @@ Félicitations, vous avez atteint la fin du premier article sur la programmation
 
 Vous avez maintenant appris que le code côté serveur est exécuté sur un serveur web et que son rôle principal est de contrôler _quelle_ information est envoyée à l'utilisateur (tandis que le code côté client gère principalement la structure et la présentation des données pour l'utilisateur).
 
-Vous devez également comprendre que c'est utile pour créer des sites web qui délivrent de l'information _efficacement_, adaptée à chaque utilisateur et avoir une bonne idée de quelques choses que vous seriez capable de faire quand vous serez programmeur back-end.
+Vous devez également comprendre que c'est utile pour créer des sites web qui délivrent de l'information _efficacement_, adaptée à chaque utilisateur et avoir une bonne idée de quelques choses que vous seriez capable de faire quand vous serez programmeur back-end.
 
-Finalement, vous devez comprendre que le code côté serveur peut être écrit dans de nombreux langages de programmation et que l'on peut utiliser des frameworks web pour rendre ce processus plus facile.
+Finalement, vous devez comprendre que le code côté serveur peut être écrit dans de nombreux langages de programmation et que l'on peut utiliser des frameworks web pour rendre ce processus plus facile.
 
-Dans un futur article,  nous vous aiderons à choisir le framework le plus adapté pour la création d'un premier site. Ensuite, nous vous présenterons les principales interactions client-serveur plus en détails.
+Dans un futur article,  nous vous aiderons à choisir le framework le plus adapté pour la création d'un premier site. Ensuite, nous vous présenterons les principales interactions client-serveur plus en détails.
 
 {{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
 
diff --git a/files/fr/learn/server-side/first_steps/web_frameworks/index.md b/files/fr/learn/server-side/first_steps/web_frameworks/index.md
index c46e7f7ebf..afb18ef9d9 100644
--- a/files/fr/learn/server-side/first_steps/web_frameworks/index.md
+++ b/files/fr/learn/server-side/first_steps/web_frameworks/index.md
@@ -11,7 +11,7 @@ original_slug: Learn/Server-side/Premiers_pas/Web_frameworks
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}
 
-L'article précédent nous a montré à quoi ressemble la communication entre les clients et les serveurs web, la nature des demandes et des réponses HTTP et ce qu’une application web côté serveur doit faire pour répondre aux demandes d’un navigateur web. Avec ces connaissances en main, il est temps d'explorer comment les frameworks peuvent nous simplifier la tâche.  En chemin, vous comprendrez comment choisir le framework le mieux adapté pour votre première application web côté serveur.
+L'article précédent nous a montré à quoi ressemble la communication entre les clients et les serveurs web, la nature des demandes et des réponses HTTP et ce qu’une application web côté serveur doit faire pour répondre aux demandes d’un navigateur web. Avec ces connaissances en main, il est temps d'explorer comment les frameworks peuvent nous simplifier la tâche. En chemin, vous comprendrez comment choisir le framework le mieux adapté pour votre première application web côté serveur.
 
 <table class="standard-table">
   <tbody>
@@ -30,21 +30,21 @@ L'article précédent nous a montré à quoi ressemble la communication entre
   </tbody>
 </table>
 
-Les sections suivantes proposent des illustrations avec des fragments de codes utilisés par des frameworks réels. Ne soyez pas inquiété si vous ne comprenez pas tout directement. Les explications viendront au fur et à mesure.
+Les sections suivantes proposent des illustrations avec des fragments de codes utilisés par des frameworks réels. Ne soyez pas inquiété si vous ne comprenez pas tout directement. Les explications viendront au fur et à mesure.
 
 ## Vue d'ensemble
 
-Les frameworks web côté serveur (c-à-d "web application frameworks") facilitent l'écriture, la maintenance et la mise à l'échelle d'applications web. Ils fournissent des outils et des bibliothèques qui simplifient les tâches courantes de développement web, notamment l'acheminement des URL vers les gestionnaires appropriés, l'interaction avec les bases de données, les sessions et l'autorisation des utilisateurs, le formatage de la sortie (HTML, JSON, XML, par exemple) et l'amélioration de la sécurité contre les attaques web.
+Les frameworks web côté serveur (c-à-d "web application frameworks") facilitent l'écriture, la maintenance et la mise à l'échelle d'applications web. Ils fournissent des outils et des bibliothèques qui simplifient les tâches courantes de développement web, notamment l'acheminement des URL vers les gestionnaires appropriés, l'interaction avec les bases de données, les sessions et l'autorisation des utilisateurs, le formatage de la sortie (HTML, JSON, XML, par exemple) et l'amélioration de la sécurité contre les attaques web.
 
-Dans la section suivante, nous allons voir un peu plus de détails comment les frameworks facilite le développement d'applications web. Nous verrons alors les critères utilisés pour choisir un framework adapté.
+Dans la section suivante, nous allons voir un peu plus de détails comment les frameworks facilite le développement d'applications web. Nous verrons alors les critères utilisés pour choisir un framework adapté.
 
 ## Que peut faire un framework web pour vous ?
 
-Les frameworks web fournissent des outils et des bibliothèques pour simplifier les opérations de développement web courantes. Utiliser un framework web côté serveur n'est pas obligatoire, mais fortement conseillé... Cela vous facilitera grandement la vie. Cette section présente certaines des fonctionnalités parmi les plus souvent fournies par les frameworks web.
+Les frameworks web fournissent des outils et des bibliothèques pour simplifier les opérations de développement web courantes. Utiliser un framework web côté serveur n'est pas obligatoire, mais fortement conseillé... Cela vous facilitera grandement la vie. Cette section présente certaines des fonctionnalités parmi les plus souvent fournies par les frameworks web.
 
 ### Travailler directement avec les requêtes et les réponses HTTP
 
-Comme nous l'avons vu dans le dernier article, les serveurs web et les navigateurs communiquent via le protocole HTTP — les serveurs attendent les requêtes HTTP du navigateur, puis renvoient des informations dans les réponses HTTP. Les infrastructures web vous permettent d'écrire une syntaxe simplifiée qui générera un code côté serveur pour travailler avec ces demandes et réponses. Cela signifie que vous aurez un travail plus facile, en interagissant avec un code plus facile, de niveau supérieur, plutôt que des primitives de réseau de niveau inférieur.
+Comme nous l'avons vu dans le dernier article, les serveurs web et les navigateurs communiquent via le protocole HTTP — les serveurs attendent les requêtes HTTP du navigateur, puis renvoient des informations dans les réponses HTTP. Les infrastructures web vous permettent d'écrire une syntaxe simplifiée qui générera un code côté serveur pour travailler avec ces demandes et réponses. Cela signifie que vous aurez un travail plus facile, en interagissant avec un code plus facile, de niveau supérieur, plutôt que des primitives de réseau de niveau inférieur.
 
 L'exemple ci-dessous montre comment cela fonctionne dans le framework web Django (Python). Chaque fonction "view" (un gestionnaire de demandes) reçoit un objet HttpRequest contenant les informations de la demande et doit renvoyer un objet HttpResponse avec la sortie formatée (dans ce cas une chaîne).
 
@@ -137,7 +137,7 @@ Les frameworks web fournissent souvent des systèmes de templates. Ceux-ci vous
 
 Les frameworks web fournissent souvent un mécanisme facilitant la génération d'autres formats à partir de données stockées, notamment {{glossary ("JSON")}} et {{glossary ("XML")}}.
 
-Par exemple, le système de templates Django vous permet de spécifier des variables en utilisant une syntaxe "double-handlebars" (par exemple,` {`` { variable_name ``}``} ` ), qui sera remplacée par les valeurs transmises à partir de la fonction d'affichage lors du rendu d'une page. Le système de templates prend également en charge les expressions (avec la syntaxe:`{% expression %}` ), qui permettent aux templates d'effectuer des opérations simples, telles que l'itération des valeurs de liste transmises au modèle.
+Par exemple, le système de templates Django vous permet de spécifier des variables en utilisant une syntaxe "double-handlebars" (par exemple,` {`` { variable_name ``}``} ` ), qui sera remplacée par les valeurs transmises à partir de la fonction d'affichage lors du rendu d'une page. Le système de templates prend également en charge les expressions (avec la syntaxe:`{% expression %}` ), qui permettent aux templates d'effectuer des opérations simples, telles que l'itération des valeurs de liste transmises au modèle.
 
 > **Note :** Many other templating systems use a similar syntax, e.g.: Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), etc.
 
@@ -170,22 +170,22 @@ Il existe de nombreux frameworks web pour presque tous les langages de programma
 
 Certains des facteurs qui peuvent affecter votre décision sont les suivants:
 
-- **Effort d'apprentissage** : L'effort d'apprentissage d'un framework web dépend de votre familiarité avec le langage de programmation sous-jacent, de la cohérence de son API, de la qualité de sa documentation ainsi que de la taille et de l'activité de sa communauté. Si vous avez peu d'eqperience en programmation, pensez à Django (l’un des plus faciles à apprendre en fonction des critères ci-dessus). Si vous faites partie d'une équipe de développement qui possède déjà une expérience significative avec un framework web ou un langage de programmation particulier, il est logique de s'en tenir à cela.
-- **Productivité** : la productivité mesure la rapidité avec laquelle vous pouvez créer de nouvelles fonctionnalités une fois que vous êtes familiarisé avec le framework. Elle inclut à la fois les efforts d'écriture et de maintenance du code (car vous ne pouvez pas écrire de nouvelles fonctionnalités alors que les anciennes sont endommagées). Un grand nombre des facteurs qui affectent la productivité sont similaires à ceux de "Effort d'apprentissage" - par ex. documentation, communauté, expérience en programmation, etc. - les autres facteurs incluent:
+- **Effort d'apprentissage**&nbsp;: L'effort d'apprentissage d'un framework web dépend de votre familiarité avec le langage de programmation sous-jacent, de la cohérence de son API, de la qualité de sa documentation ainsi que de la taille et de l'activité de sa communauté. Si vous avez peu d'eqperience en programmation, pensez à Django (l’un des plus faciles à apprendre en fonction des critères ci-dessus). Si vous faites partie d'une équipe de développement qui possède déjà une expérience significative avec un framework web ou un langage de programmation particulier, il est logique de s'en tenir à cela.
+- **Productivité**&nbsp;: la productivité mesure la rapidité avec laquelle vous pouvez créer de nouvelles fonctionnalités une fois que vous êtes familiarisé avec le framework. Elle inclut à la fois les efforts d'écriture et de maintenance du code (car vous ne pouvez pas écrire de nouvelles fonctionnalités alors que les anciennes sont endommagées). Un grand nombre des facteurs qui affectent la productivité sont similaires à ceux de "Effort d'apprentissage" - par ex. documentation, communauté, expérience en programmation, etc. - les autres facteurs incluent:
 
-  - *Objectif / origine du framework* : certains frameworks web ont été créés à l'origine pour résoudre certains types de problèmes, et restent meilleurs pour créer des applications web avec des contraintes similaires. Par exemple, Django a été créé pour soutenir le développement d'un site web de journal. Il est donc bon pour les blogs et les autres sites impliquant la publication d'éléments. En revanche, Flask est un cadre beaucoup plus léger et est idéal pour créer des applications web s'exécutant sur des périphériques intégrés.
+  - *Objectif / origine du framework*&nbsp;: certains frameworks web ont été créés à l'origine pour résoudre certains types de problèmes, et restent meilleurs pour créer des applications web avec des contraintes similaires. Par exemple, Django a été créé pour soutenir le développement d'un site web de journal. Il est donc bon pour les blogs et les autres sites impliquant la publication d'éléments. En revanche, Flask est un cadre beaucoup plus léger et est idéal pour créer des applications web s'exécutant sur des périphériques intégrés.
   - _Populaire vs Impopulaire_: Un framework populaire est un frameqork dans lequel il est recommandé de "meilleures" manières de résoudre un problème particulier. Les frameworks populaire ont tendance à être plus productifs lorsque vous essayez de résoudre des problèmes courants, car ils vous orientent dans la bonne direction, mais ils sont parfois moins flexibles.
-  - *Ressource incluses vs. l'obtenir vous-même* : certains frameworks web incluent des outils / bibliothèques qui traitent tous les problèmes que leurs développeurs peuvent penser "par défaut", tandis que des frameworks plus légers attendent des développeurs web qu'ils choisissent la solution aux problèmes de bibliothèques séparées (Django est un exemple inclue " tout " tandis que  Flask est un exemple de framework très léger). Les frameworks qui incluent tout sont souvent plus faciles à démarrer car vous avez déjà tout ce dont vous avez besoin, et il est probable qu’il soit bien intégré et bien documenté. Cependant, si une structure plus petite contient tout ce dont vous avez besoin (le cas échéant), elle peut alors s'exécuter dans des environnements plus restreints et disposer d'un sous-ensemble de choses plus petites et plus faciles à apprendre.
-  - *Si le framework encourage ou non les bonnes pratiques de développement* : par exemple, un cadre qui encourage une architecture Model-View-Controller où on sépare le code en fonctions logiques engendrera un code plus facile à maintenir qu'un code qui n'a pas d'attente de la part des développeurs. De même, la conception de la structure peut avoir un impact important sur la facilité de test et de réutilisation du code.
+  - *Ressource incluses vs. l'obtenir vous-même*&nbsp;: certains frameworks web incluent des outils / bibliothèques qui traitent tous les problèmes que leurs développeurs peuvent penser "par défaut", tandis que des frameworks plus légers attendent des développeurs web qu'ils choisissent la solution aux problèmes de bibliothèques séparées (Django est un exemple inclue " tout " tandis que Flask est un exemple de framework très léger). Les frameworks qui incluent tout sont souvent plus faciles à démarrer car vous avez déjà tout ce dont vous avez besoin, et il est probable qu’il soit bien intégré et bien documenté. Cependant, si une structure plus petite contient tout ce dont vous avez besoin (le cas échéant), elle peut alors s'exécuter dans des environnements plus restreints et disposer d'un sous-ensemble de choses plus petites et plus faciles à apprendre.
+  - *Si le framework encourage ou non les bonnes pratiques de développement*&nbsp;: par exemple, un cadre qui encourage une architecture Model-View-Controller où on sépare le code en fonctions logiques engendrera un code plus facile à maintenir qu'un code qui n'a pas d'attente de la part des développeurs. De même, la conception de la structure peut avoir un impact important sur la facilité de test et de réutilisation du code.
 
-- **Performances du framework/langage de programmation** : généralement, la *vitesse* n’est pas le facteur le plus important dans la sélection car même des exécutions relativement lentes, comme Python, sont plus que *suffisantes* pour les sites de taille moyenne fonctionnant avec un matériel raisonnablement performant. Les avantages perçus en termes de vitesse par rapport à un autre langage comme C++ ou JavaScript peuvent être compensés par les coûts d’apprentissage et de maintenance.
-- **Mise en cache** : la popularité de votre site web grandit, vous constatez peut-être que le serveur ne peut plus gérer toutes les requêtes. À ce stade, vous pouvez envisager d’ajouter un support pour la mise en cache : une optimisation dans laquelle vous stockez tout ou partie de la réponse à une requête web afin qu'il ne soit pas nécessaire de la recalculer la prochaine fois. Retourner la réponse en cache à une requête est beaucoup plus rapide que d'en calculer une. La mise en cache peut être implémentée dans votre code ou sur le serveur (voir proxy inverse). Les infrastructures web auront différents niveaux de prise en charge pour définir le contenu pouvant être mis en cache.
-- **Adpatation** : votre site web connaît un succès fantastique, vous avez épuisé les avantages de la mise en cache, vous atteignez même les limites de la mise à l'échelle verticale (exécuter votre application Web sur un matériel plus puissant). À ce stade, il est temps de penser à une mise à l’échelle horizontale (partager la charge en répartissant votre site sur un certain nombre de serveurs web et de bases de données) ou «géographiquement», car certains de vos clients sont très éloignés de votre serveur. L'infrastructure web que vous choisissez peut faire toute la différence en termes de facilité d'adaptation de votre site.
-- **Sécurité web** : certains environnements web offrent une meilleure prise en charge de la gestion des attaques web courantes. Django, par exemple, supprime toutes les entrées utilisateur des modèles HTML afin que le code JavaScript saisi par l'utilisateur ne puisse pas être exécuté. D'autres frameworks offrent une protection similaire, mais celle-ci n'est pas toujours activée par défaut.
+- **Performances du framework/langage de programmation**&nbsp;: généralement, la *vitesse* n’est pas le facteur le plus important dans la sélection car même des exécutions relativement lentes, comme Python, sont plus que *suffisantes* pour les sites de taille moyenne fonctionnant avec un matériel raisonnablement performant. Les avantages perçus en termes de vitesse par rapport à un autre langage comme C++ ou JavaScript peuvent être compensés par les coûts d’apprentissage et de maintenance.
+- **Mise en cache** : la popularité de votre site web grandit, vous constatez peut-être que le serveur ne peut plus gérer toutes les requêtes. À ce stade, vous pouvez envisager d’ajouter un support pour la mise en cache : une optimisation dans laquelle vous stockez tout ou partie de la réponse à une requête web afin qu'il ne soit pas nécessaire de la recalculer la prochaine fois. Retourner la réponse en cache à une requête est beaucoup plus rapide que d'en calculer une. La mise en cache peut être implémentée dans votre code ou sur le serveur (voir proxy inverse). Les infrastructures web auront différents niveaux de prise en charge pour définir le contenu pouvant être mis en cache.
+- **Adpatation**&nbsp;: votre site web connaît un succès fantastique, vous avez épuisé les avantages de la mise en cache, vous atteignez même les limites de la mise à l'échelle verticale (exécuter votre application Web sur un matériel plus puissant). À ce stade, il est temps de penser à une mise à l’échelle horizontale (partager la charge en répartissant votre site sur un certain nombre de serveurs web et de bases de données) ou «géographiquement», car certains de vos clients sont très éloignés de votre serveur. L'infrastructure web que vous choisissez peut faire toute la différence en termes de facilité d'adaptation de votre site.
+- **Sécurité web**&nbsp;: certains environnements web offrent une meilleure prise en charge de la gestion des attaques web courantes. Django, par exemple, supprime toutes les entrées utilisateur des modèles HTML afin que le code JavaScript saisi par l'utilisateur ne puisse pas être exécuté. D'autres frameworks offrent une protection similaire, mais celle-ci n'est pas toujours activée par défaut.
 
 Il existe de nombreux autres facteurs possibles, y compris les licences, que le cadre soit ou non en cours de développement actif, etc.
 
-Si vous débutez en programmation, vous choisirez probablement un framework facile à prendre en main. Une documentation riche et une communauté active sont également des critères pertinents pour votre choix. Pour la suite de ce cours, nous avons choisi Django (Python) et Express (Node/JavaScript) principalement parce que ces frameworks sont faciles à apprendre et bénéficient d'un bon soutien.
+Si vous débutez en programmation, vous choisirez probablement un framework facile à prendre en main. Une documentation riche et une communauté active sont également des critères pertinents pour votre choix. Pour la suite de ce cours, nous avons choisi Django (Python) et Express (Node/JavaScript) principalement parce que ces frameworks sont faciles à apprendre et bénéficient d'un bon soutien.
 
 > **Note :** Let's go to the main websites for [Django](https://www.djangoproject.com/) (Python) and [Express](http://expressjs.com/) (Node/JavaScript) and check out their documentation and community.
 >
diff --git a/files/fr/learn/server-side/first_steps/website_security/index.md b/files/fr/learn/server-side/first_steps/website_security/index.md
index 5ea6284730..abdb71fd01 100644
--- a/files/fr/learn/server-side/first_steps/website_security/index.md
+++ b/files/fr/learn/server-side/first_steps/website_security/index.md
@@ -11,7 +11,7 @@ original_slug: Learn/Server-side/Premiers_pas/Website_security
 ---
 {{LearnSidebar}}{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/Premiers_pas")}}
 
-La sécurité d'un site web exige de la vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre d'où viennent les menaces et ce que vous pouvez faire pour renforcer votre application web contre les attaques les plus courantes.
+La sécurité d'un site web exige de la vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre d'où viennent les menaces et ce que vous pouvez faire pour renforcer votre application web contre les attaques les plus courantes.
 
 <table class="standard-table">
   <tbody>
@@ -34,13 +34,13 @@ La sécurité d'un site web exige de la vigilance dans tous les aspects de sa c
 
 Internet est un endroit dangereux ! Fréquemment, nous entendons parler de sites web devenus indisponibles en raison d'attaques par déni de service, ou affichant des informations modifiées (et souvent préjudiciables) sur leurs pages d'accueil. Dans d'autres cas, très médiatisés, des millions de mots de passe, d'adresses électroniques et de détails sur des cartes de crédit sont divulgués au public, exposant les utilisateurs du site web à la fois à l'embarras personnel et au risque de pertes financières.
 
-L'objectif de la sécurité des sites web est de prévenir ces types d'attaques. Plus formellement, la sécurité des sites web est l'acte de protéger les sites web contre l'accès, l'utilisation, la modification, la destruction ou la perturbation non autorisées.
+L'objectif de la sécurité des sites web est de prévenir ces types d'attaques. Plus formellement, la sécurité des sites web est l'acte de protéger les sites web contre l'accès, l'utilisation, la modification, la destruction ou la perturbation non autorisées.
 
-La sécurité efficace d'un site web nécessite un effort de conception sur l'ensemble du site : dans votre application web, dans la configuration du serveur web, dans vos politiques de création et de renouvellement des mots de passe et dans le code côté-client. Bien que tout cela semble très inquiétant, la bonne nouvelle est que si vous utilisez un framework web côté serveur, il incluera certainement par défaut des mécanismes de défense solides et bien pensés contre un certain nombre des attaques les plus courantes. D'autres attaques peuvent être atténuées grâce à la configuration de votre serveur web, par exemple en activant HTTPS. Enfin, les outils d'analyse de vulnérabilité accessibles au public peuvent vous aider à découvrir d'éventuelles erreurs dans votre conception.
+La sécurité efficace d'un site web nécessite un effort de conception sur l'ensemble du site : dans votre application web, dans la configuration du serveur web, dans vos politiques de création et de renouvellement des mots de passe et dans le code côté-client. Bien que tout cela semble très inquiétant, la bonne nouvelle est que si vous utilisez un framework web côté serveur, il incluera certainement par défaut des mécanismes de défense solides et bien pensés contre un certain nombre des attaques les plus courantes. D'autres attaques peuvent être atténuées grâce à la configuration de votre serveur web, par exemple en activant HTTPS. Enfin, les outils d'analyse de vulnérabilité accessibles au public peuvent vous aider à découvrir d'éventuelles erreurs dans votre conception.
 
 Le reste de cet article détaille les menaces les plus courantes qui pèsent sur les sites web et quelques étapes simples pour protèger votre site.
 
-> **Note :** ceci est un article d'introduction, conçu pour vous aider à réflechir à la sécurité de votre site web. Il n'est en rien exhaustif.
+> **Note :** ceci est un article d'introduction, conçu pour vous aider à réflechir à la sécurité de votre site web. Il n'est en rien exhaustif.
 
 ## Menaces visant la sécurité des sites web
 
@@ -54,7 +54,7 @@ XSS est un terme utilisé pour décrire une classe d'attaque qui permet à l'att
 
 Il y a deux manières principales pour demander au site de retourner un script injecté vers un navigateur web — elles sont désignées en tant que vulnérabilités XSS _réfléchie_ et _persistante_.
 
-- Une vulnérabilité XSS  réfléchie se produit quand le contenu de l'utilisateur transmis au serveur est immédiatement retourné, sans avoir été modifié, pour être affiché dans le navigateur — tout les scripts présents dans le contenu d'origine seront exécutés quand la nouvelle page sera chargée!
+- Une vulnérabilité XSS réfléchie se produit quand le contenu de l'utilisateur transmis au serveur est immédiatement retourné, sans avoir été modifié, pour être affiché dans le navigateur — tout les scripts présents dans le contenu d'origine seront exécutés quand la nouvelle page sera chargée!
   On prendra par exemple une fonction de recherche dans un site où les termes recherchés sont encodés en tant que paramètres dans l'URL, et que ces termes sont affichés en permanence avec les résultats. Un attaquant peut construire un lien de recherche contenant un script malicieux en tant que paramètre (ex: `http://mysite.com?q=beer<script%20src="http://sitedangereux.com/malicieux.js"></script>`) et le transmettre par e-mail à un autre utilisateur. Si l'utilisateur ciblé clique sur ce "lien intéressant", le script sera exécuté quand les résultats de la recherche seront affichés. Comme vu auparavant, cela donne à l'attaquant toute les informations dont il a besoin pour se connecter sur le site avec le compte de la victime — potentiellement faire des achats en tant que cet utilisateur ou accèder à la liste de contacts..
 - Une vulnérabilité XSS _persistante_ sera celle où le script malicieux est stocké sur le site web puis affiché, sans modification, un peu plus tard par les autres utilisateurs et exécuté à leur insu.
   Par exemple, un écran de discussion qui accepte les commentaires contenant du code HTML pur peuvent stocker le script malicieux de l'attaquant. Quand les commentaires sont affichés le script est exécuté et peut ensuite transmettre à l'attaquant les informations nécessaires pour accèder au compte de l'utilisateur. Cette méthode d'attaque est extrêmement courante et efficace, parce que l'attaquant n'a pas besoin d'avoir une relation directe avec les victimes.
@@ -63,7 +63,7 @@ Il y a deux manières principales pour demander au site de retourner un script i
 
 La meilleur défense contre les vulnérabilités XSS est de supprimer ou désactiver toutes les balises qui peuvent potentiellement contenir des instructions pour exécuter du code. Pour HTML cela inclut les tags comme `<script>`, `<object>`, `<embed>`, et `<link>`.
 
-Il est nécessaire de traiter les données saisies par l'utilisateur pour être sûr qu'il ne puisse ni exécuter de scripts ni pertuber le fonctionnement normal du site (ce procédé est appelé *input sanitization* en anglais). De nombreux frameworks proposent par défaut cette vérification sur les entrées des formulaires.
+Il est nécessaire de traiter les données saisies par l'utilisateur pour être sûr qu'il ne puisse ni exécuter de scripts ni pertuber le fonctionnement normal du site (ce procédé est appelé *input sanitization* en anglais). De nombreux frameworks proposent par défaut cette vérification sur les entrées des formulaires.
 
 ### Injection SQL
 
@@ -75,7 +75,7 @@ Cette vulnérabilité est présente quand la saisie de l'utilisateur est transmi
 statement = "SELECT * FROM users WHERE name = '" + userName + "';"
 ```
 
-Si l'utilisateur entre un nom correct cela marchera comme voulu. Cependant un utilisateur malveillant peut changer complètement le sens de cette requête SQL pour obtenir la requête qui suit, simplement en ajoutant le texte, **en gras** ci dessous, en tant que nom, cette requête, modifiée, va créer une requête SQL valide qui va supprimer la table `users` et sélectionner toute les données de la table `userinfo` (révèlant les informations de chaque utilisateur). Tout cela est rendu possible à cause du début du texte injecté  (`'a';`) qui va complèter la requête d'origine (`'` est le symbole pour délimiter une chaine de texte en SQL).
+Si l'utilisateur entre un nom correct cela marchera comme voulu. Cependant un utilisateur malveillant peut changer complètement le sens de cette requête SQL pour obtenir la requête qui suit, simplement en ajoutant le texte, **en gras** ci dessous, en tant que nom, cette requête, modifiée, va créer une requête SQL valide qui va supprimer la table `users` et sélectionner toute les données de la table `userinfo` (révèlant les informations de chaque utilisateur). Tout cela est rendu possible à cause du début du texte injecté (`'a';`) qui va complèter la requête d'origine (`'` est le symbole pour délimiter une chaine de texte en SQL).
 
 ```sql
 SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't';
@@ -132,9 +132,9 @@ La majorité des attaques citées précédement réusissent lorsque l'applicatio
 Quelques autres points que vous pouvez mettre en place :
 
 - Utilisez une politique de gestion des mots de passe efficace. Encouragez les mots de passe solides avec leur renouvellement fréquent. Prenez en compte une authentification à deux facteurs sur votre site (l'utilisateur, en plus du mot de passe, devra fournir un autre code d'authentification généralement fourni par un matériel physique, que seul l'utilisateur possède, comme un code envoyé sur le téléphone par SMS).
-- Configurez vos serveurs web pour utiliser [HTTPS](/fr/docs/Glossary/https) et [HTTP Strict Transport Security](/fr/docs/Web/Security/HTTP_strict_transport_security) (HSTS). HTTPS chiffre les données transmises entre le client et le serveur. Cela garantit que les données d'authentification, les cookies, les données transistant avec `POST` et les informations d'en-têtes deviennent moins disponibles pour l'attaquant.
+- Configurez vos serveurs web pour utiliser [HTTPS](/fr/docs/Glossary/https) et [HTTP Strict Transport Security](/fr/docs/Web/Security/HTTP_strict_transport_security) (HSTS). HTTPS chiffre les données transmises entre le client et le serveur. Cela garantit que les données d'authentification, les cookies, les données transistant avec `POST` et les informations d'en-têtes deviennent moins disponibles pour l'attaquant.
 - Tenez vous informé des dernières menaces ([la liste actuelle d'OWASP est ici](/fr/docs/)) et préoccupez vous toujours des vulnerabilités les plus courantes en premier.
-- Utilisez [des outils de recherche de vulnérabilités](https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools) pour faire automatiquement des recherches de bug sur votre site (votre site pourra également proposer un programme de _buf bounty_ pour déceler des bugs, [comme le fait Mozilla ici](https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/)).
+- Utilisez [des outils de recherche de vulnérabilités](https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools) pour faire automatiquement des recherches de bug sur votre site (votre site pourra également proposer un programme de _buf bounty_ pour déceler des bugs, [comme le fait Mozilla ici](https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/)).
 - Ne stockez et n'affichez que les données nécessaires. Par exemple, si votre utilisateur doit stocker des données sensibles comme des informations bancaires, affichez seulement ce qui sera suffisant pour être identifié par l'utilisateur, mais pas suffisament pour être copié par un attaquant et être utilisé sur un autre site. La méthode la plus courante en ce moment est de n'afficher que les quatre derniers chiffres du numéro de carte bancaire.
 
 Les frameworks web peuvent aider à atténuer beaucoup des vulnérabilités les plus courantes.
diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.md
index 7ffca23234..8af43d3bec 100644
--- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.md
+++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.md
@@ -20,7 +20,7 @@ Dans cet ensemble d'articles, nous chercherons à vous donner un point de dépar
 
 - Pourquoi devrais-je utiliser un framework ? Quels problèmes résolvent-ils pour moi ?
 - Quelles questions devrais-je me poser pour choisir un framework ? Ai-je au moins besoin d'un framework ?
-- Quelles fonctionnalités proposent les frameworks ? Comment fonctionnent-ils en général et comment diffèrent leurs  implantations de ces fonctionnalités ?
+- Quelles fonctionnalités proposent les frameworks ? Comment fonctionnent-ils en général et comment diffèrent leurs implantations de ces fonctionnalités ?
 - Comment se rapportent-ils au JavaScript "vanilla" ou à l'HTML ?
 
 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é.
@@ -123,7 +123,7 @@ Nous avons créé un cours qui inclut toutes les informations essentielles dont
 <!---->
 
 - [2. Commencer notre application todolist avec Svelte](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning)
-  - : 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.
+  - : 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.
 - [3. Comportements dynamiques dans Svelte : travailler avec les variables et les propriétés](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props)
   - : 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.
 - [4. Diviser notre application Svelte en composants](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components)
diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md
index 70b4132d25..87c647f053 100644
--- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md
+++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md
@@ -44,15 +44,15 @@ There are many frameworks out there, but currently the "big four" are considered
 
 ### Ember
 
-[Ember](https://emberjs.com/) was initially released in December 2011 as a continuation of work that started in the [SproutCore](https://en.wikipedia.org/wiki/SproutCore) project. It is an older framework that has less users than more modern alternatives  such as React and Vue, but it still enjoys a fair amount of popularity due to its stability, community support, and some clever coding principles.
+[Ember](https://emberjs.com/) was initially released in December 2011 as a continuation of work that started in the [SproutCore](https://en.wikipedia.org/wiki/SproutCore) project. It is an older framework that has less users than more modern alternatives such as React and Vue, but it still enjoys a fair amount of popularity due to its stability, community support, and some clever coding principles.
 
 [Start learning Ember](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started)
 
 ### Angular
 
-[Angular](https://angular.io) is an open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. It is a complete rewrite from the same team that built [AngularJS](https://angularjs.org/). Angular was officially released on the 14th of September 2016.
+[Angular](https://angular.io) is an open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. It is a complete rewrite from the same team that built [AngularJS](https://angularjs.org/). Angular was officially released on the 14th of September 2016.
 
-Angular is a component-based framework which uses declarative HTML templates. At build time, transparently to developers, the framework's compiler translates the templates to optimized JavaScript instructions. Angular uses [TypeScript](https://www.typescriptlang.org/), a superset of JavaScript that we’ll look at in a little more detail in the next chapter.
+Angular is a component-based framework which uses declarative HTML templates. At build time, transparently to developers, the framework's compiler translates the templates to optimized JavaScript instructions. Angular uses [TypeScript](https://www.typescriptlang.org/), a superset of JavaScript that we’ll look at in a little more detail in the next chapter.
 
 ### Vue
 
@@ -167,7 +167,7 @@ Read more about the JavaScript used in this section:
 
 Every JavaScript framework offers a way to write user interfaces more _declaratively_. That is, they allow you to write code that describes how your UI should look, and the framework makes it happen in the DOM behind the scenes.
 
-The vanilla JavaScript approach to building out new DOM elements in repetition was difficult to understand at a glance.  By contrast, the following block of code illustrates the way you might use Vue to describe our list of tasks:
+The vanilla JavaScript approach to building out new DOM elements in repetition was difficult to understand at a glance.  By contrast, the following block of code illustrates the way you might use Vue to describe our list of tasks:
 
 ```html
 <ul>
diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md
index c51043feed..bbc0880946 100644
--- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md
+++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md
@@ -1,5 +1,5 @@
 ---
-title: Fonctionnalités principales des  framework
+title: Fonctionnalités principales des framework
 slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features
 translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features
 ---
@@ -116,7 +116,7 @@ function add(a: number, b: number) {
 }
 ```
 
-The `: number` written after each parameter here tells TypeScript that both `a` and `b` must be numbers. If we were to use this function and pass `'2'` into it as an argument, TypeScript would raise an error during compilation, and we would be forced to fix our mistake. We could write our own JavaScript that raises these errors for us, but it would make our source code significantly more verbose. It probably makes more sense to let TypeScript handle such checks for us.
+The `: number` written after each parameter here tells TypeScript that both `a` and `b` must be numbers. If we were to use this function and pass `'2'` into it as an argument, TypeScript would raise an error during compilation, and we would be forced to fix our mistake. We could write our own JavaScript that raises these errors for us, but it would make our source code significantly more verbose. It probably makes more sense to let TypeScript handle such checks for us.
 
 ## Writing components
 
@@ -291,7 +291,7 @@ All applications benefit from test coverage that ensures your software continues
 
 Each framework has extensive tools in its ecosystem, with capabilities for unit and integration testing alike.
 
-[Testing Library](https://testing-library.com/) is a suite of testing utilities that has tools for many JavaScript environments, including React, Vue, and Angular.  The Ember docs cover the [testing of Ember apps](https://guides.emberjs.com/release/testing/).
+[Testing Library](https://testing-library.com/) is a suite of testing utilities that has tools for many JavaScript environments, including React, Vue, and Angular.  The Ember docs cover the [testing of Ember apps](https://guides.emberjs.com/release/testing/).
 
 Here’s a quick test for our `CounterButton` written with the help of React Testing Library — it tests a number of things, such as the button's existence, and whether the button is displaying the correct text after being clicked 0, 1, and 2 times:
 
diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
index 46ee16870a..2f2be02e7a 100644
--- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
+++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
@@ -277,7 +277,7 @@ function App() {
 
 The `App` function returns a JSX expression. This expression defines what your browser ultimately renders to the DOM.
 
-Some elements in the expression have attributes, which are written just like in HTML, following a pattern of `attribute="value"`. On line 3, the opening [`<div>`](/fr/docs/Web/HTML/Element/div) tag has a `className` attribute. This is the same as the [`class`](/fr/docs/Web/HTML/Global_attributes/class) attribute in HTML, but because JSX is JavaScript, we can't use the word `class` – it's reserved, meaning JavaScript already uses it for a specific purpose and it would cause problems here in our code. A few other HTML attributes are written differently in JSX than they are in HTML too, for the same kind of reason. We'll cover them as we encounter them.
+Some elements in the expression have attributes, which are written just like in HTML, following a pattern of `attribute="value"`. On line 3, the opening [`<div>`](/fr/docs/Web/HTML/Element/div) tag has a `className` attribute. This is the same as the [`class`](/fr/docs/Web/HTML/Global_attributes/class) attribute in HTML, but because JSX is JavaScript, we can't use the word `class` – it's reserved, meaning JavaScript already uses it for a specific purpose and it would cause problems here in our code. A few other HTML attributes are written differently in JSX than they are in HTML too, for the same kind of reason. We'll cover them as we encounter them.
 
 Take a moment to change the [`<p>`](/fr/docs/Web/HTML/Element/p) tag on line 6 so that it reads "Hello, world!", then save your file. You'll notice that this change is immediately rendered in the development server running at `http://localhost:3000` in your browser. Now delete the [`<a>`](/fr/docs/Web/HTML/Element/a) tag and save; the "Learn React" link will be gone.
 
diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
index e4f128d8a4..bb6d20ee58 100644
--- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
+++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
@@ -232,7 +232,7 @@ Further down, you can find our [`<ul>`](/fr/docs/Web/HTML/Element/ul) element:
 >
 ```
 
-The `role` attribute helps assistive technology explain what kind of element a tag represents. A `<ul>` is treated like a list by default, but the styles we're about to add will break that functionality. This role will restore the "list" meaning to the `<ul>`  element. If you want to learn more about why this is necessary, you can check out [Scott O'Hara’s article, “Fixing Lists”](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html).
+The `role` attribute helps assistive technology explain what kind of element a tag represents. A `<ul>` is treated like a list by default, but the styles we're about to add will break that functionality. This role will restore the "list" meaning to the `<ul>`  element. If you want to learn more about why this is necessary, you can check out [Scott O'Hara’s article, “Fixing Lists”](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html).
 
 The `aria-labelledby` attribute tells assistive technologies that we're treating our list heading as the label that describes the purpose of the list beneath it. Making this association gives the list a more informative context, which could help screen reader users better understand the purpose of it.
 
@@ -245,14 +245,14 @@ Finally, the labels and inputs in our list items have some attributes unique to
 </label>
 ```
 
-The `defaultChecked` attribute in the `<input/ >`  tag tells React to check this checkbox initially. If we were to use `checked`, as we would in regular HTML, React would log some warnings into our browser console relating to handling events on the checkbox, which we want to avoid. Don't worry too much about this for now — we will cover this later on when we get to using events.
+The `defaultChecked` attribute in the `<input/ >`  tag tells React to check this checkbox initially. If we were to use `checked`, as we would in regular HTML, React would log some warnings into our browser console relating to handling events on the checkbox, which we want to avoid. Don't worry too much about this for now — we will cover this later on when we get to using events.
 
-The `htmlFor` attribute corresponds to the `for` attribute used in HTML. We cannot use `for` as an attribute in JSX because `for` is a reserved word, so  React uses `htmlFor` instead.
+The `htmlFor` attribute corresponds to the `for` attribute used in HTML. We cannot use `for` as an attribute in JSX because `for` is a reserved word, so React uses `htmlFor` instead.
 
 Notes:
 
 - To use boolean values (`true` and `false`) in JSX attributes, you must enclose them in curly braces. If you write `defaultChecked="true"`, the value of `defaultChecked` will be `"true"` — a string literal. Remember — this is actually JavaScript, not HTML!
-- The `aria-pressed` attribute used in our earlier code snippet has a value of `"true"` because `aria-pressed` is not a true boolean attribute in the way `checked` is.
+- The `aria-pressed` attribute used in our earlier code snippet has a value of `"true"` because `aria-pressed` is not a true boolean attribute in the way `checked` is.
 
 ### Implementing our styles
 
diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
index 9f938e5728..304ff9e398 100644
--- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
+++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
@@ -127,7 +127,7 @@ To explore various features of Vue, we will be building up a sample todo list ap
 
 The CLI will now begin scaffolding out your project, and installing all of your dependencies.
 
-If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag , when you run .  So if you wanted to create the project with npm and you'd previously chosen yarn, you’d run .` --packageManager=<package-manager>``vue create``moz-todo-vue``vue create moz-todo-vue --packageManager=npm `
+If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag , when you run .  So if you wanted to create the project with npm and you'd previously chosen yarn, you’d run .` --packageManager=<package-manager>``vue create``moz-todo-vue``vue create moz-todo-vue --packageManager=npm `
 
 > **Note :** We've not gone over all of the options here, but you can [find more information on the CLI](https://cli.vuejs.org) in the Vue docs.
 
@@ -200,10 +200,10 @@ The Vue CLI comes with a built-in development server. This allows you to run you
 
 In your terminal, try running (or if you prefer yarn). Your terminal should output something like the following:` npm run serve``yarn serve `
 
-    INFO  Starting development server...
+    INFO Starting development server...
     98% after emitting CopyPlugin
 
-     DONE  Compiled successfully in 18121ms
+     DONE Compiled successfully in 18121ms
 
       App running at:
       - Local:   <http://localhost:8080/>
diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
index b4830fc154..1885f39aed 100644
--- a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
+++ b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
@@ -123,14 +123,14 @@ Comme test, vous pouvez désactiver le CSS d'un site et voir à quel point il es
 
 - Firefox : Sélectionnez _Affichage > Style de page > Aucun style_ depuis le menu principal.
 - Safari : Sélectionnez _Développement > Désactiver les styles_ depuis le menu principale (pour activer le menu _Développement_, choisissez _Safari_ > _Préférences_ > _Avancés_ > _Montrer le menu développement dans la barre de menu_).
-- Chrome : Installez l'extension Web Developer Toolbar, puis redémarrer le navigateur. Cliquez sur l'icône engrenage qui apparaîtra, puis sélectionnez _CSS_ > _Désactiver tous les styles._
+- Chrome : Installez l'extension Web Developer Toolbar, puis redémarrer le navigateur. Cliquez sur l'icône engrenage qui apparaîtra, puis sélectionnez _CSS_ > _Désactiver tous les styles._
 - Edge : Sélectionnez _Vue_ > _Style_ > _Aucun style_ depuis le menu principal.
 
 #### Utiliser l'accessibilité native du clavier
 
 Certaines fonctionnalités HTML peuvent être sélectionnées en utilisant uniquement le clavier — c'est le comportement par défaut, disponible depuis les prémices du web. Les éléments qui ont cette capacité sont les plus communs qui permettent à l'utilisateur d'interagir avec les pages web, à savoir les liens, {{htmlelement("button")}}s, et les éléments des formulaire comme {{htmlelement("input")}}.
 
-Vous pouvez essayer ceci en utilisant notre exemple [native-keyboard-accessibility.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)) — ouvrez le dans un nouvel onglet, et essayez de presser la touche tab ; après quelques pressions, vous devriez voir la focalisation du tab commencer à se déplacer entre les différents éléments focalisables ; les éléments focalisés ont un style de mise en avant par défaut dans tous les navigateurs (cela diffère peu entre les différents navigateurs) donc vous pouvez dire quel éléments est focalisé.
+Vous pouvez essayer ceci en utilisant notre exemple [native-keyboard-accessibility.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)) — ouvrez le dans un nouvel onglet, et essayez de presser la touche tab ; après quelques pressions, vous devriez voir la focalisation du tab commencer à se déplacer entre les différents éléments focalisables ; les éléments focalisés ont un style de mise en avant par défaut dans tous les navigateurs (cela diffère peu entre les différents navigateurs) donc vous pouvez dire quel éléments est focalisé.
 
 ![](button-focused-unfocused.png)
 
@@ -161,8 +161,8 @@ a:focus, input:focus, button:focus, select:focus {
 Parfois ça n'est pas possible d'éviter la perte de l'accessibilité clavier. Vous pouvez avoir hérité d'un site où la sémantique n'est pas parfaite (peut-être que vous vous êtes retrouvé avec un CMS horrible qui génère des boutons créés avec des `<div>`s), ou que vous utilisez un contrôle complexe qui n'a pas d'accessibilité clavier intégré, comme l'élément {{htmlelement("video")}} (étonnamment, Opera est le seul navigateur qui vous permet de tabuler dans l'élément `<video>` avec les contrôles par défaut du navigateur). Vous avez quelques options ici :
 
 1.  Créer des contrôles personnalisés en utilisant les éléments `<button>` (sur lequel nous pouvons tabuler par défaut !) et JavaScript pour les relier à leur fonction. Pour des bons exemples voir [Creating a cross-browser video player](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player).
-2.  Créer des raccourcis clavier en utilisant JavaScript, les fonctions sont activés quand vous appuyez sur une certaine touche du clavier. Voir [Desktop mouse and keyboard controls](/fr/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard) pour des exemples en rapport avec le jeu qui peuvent être adaptés à d'autres fins.
-3.  Utilisez des approches intéressantes pour simuler le comportement d'un bouton. Prenez par exemple notre exemple [fake-div-buttons.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html)). Nous donnons à nos faux boutons `<div>` la capacité d'être focalisé (y compris avec la tabulation) en donnant à chacun d'entre eux l'attribut `tabindex="0"` (voir l'[article tabindex](https://webaim.org/techniques/keyboard/tabindex) de WebAIM pour plus de détails utiles). Cela nous permet de tabuler sur les boutons, mais pas de les activer avec la toucher Entrée/Retour. Pour faire cela, nous devons ajouter ce petit bout de tromperie en JavaScript :
+2.  Créer des raccourcis clavier en utilisant JavaScript, les fonctions sont activés quand vous appuyez sur une certaine touche du clavier. Voir [Desktop mouse and keyboard controls](/fr/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard) pour des exemples en rapport avec le jeu qui peuvent être adaptés à d'autres fins.
+3.  Utilisez des approches intéressantes pour simuler le comportement d'un bouton. Prenez par exemple notre exemple [fake-div-buttons.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html)). Nous donnons à nos faux boutons `<div>` la capacité d'être focalisé (y compris avec la tabulation) en donnant à chacun d'entre eux l'attribut `tabindex="0"` (voir l'[article tabindex](https://webaim.org/techniques/keyboard/tabindex) de WebAIM pour plus de détails utiles). Cela nous permet de tabuler sur les boutons, mais pas de les activer avec la toucher Entrée/Retour. Pour faire cela, nous devons ajouter ce petit bout de tromperie en JavaScript :
 4.  ```js
     document.onkeydown = function(e) {
       if(e.keyCode === 13) { // The Enter/Return key
@@ -171,19 +171,19 @@ Parfois ça n'est pas possible d'éviter la perte de l'accessibilité clavier. V
     };
     ```
 
-    Ici nous ajoutons un listener à l'objet `document` pour détecter quand une touche a été appuyée sur le clavier. Nous vérifions quelle touche a été pressée avec la propriété d'évènement d'objet [keyCode](/fr/docs/Web/API/KeyboardEvent/keyCode) ; si c'est le code de la touche qui retourne Entrée/Retour, on exécute la fonction stockée dans le `onclick` du bouton en utilisant `document.activeElement.onclick()`. [`activeElement`](/fr/docs/Web/API/Document/activeElement) nous donne l'élément courant qui est focalisé sur la page.
+    Ici nous ajoutons un listener à l'objet `document` pour détecter quand une touche a été appuyée sur le clavier. Nous vérifions quelle touche a été pressée avec la propriété d'évènement d'objet [keyCode](/fr/docs/Web/API/KeyboardEvent/keyCode) ; si c'est le code de la touche qui retourne Entrée/Retour, on exécute la fonction stockée dans le `onclick` du bouton en utilisant `document.activeElement.onclick()`. [`activeElement`](/fr/docs/Web/API/Document/activeElement) nous donne l'élément courant qui est focalisé sur la page.
 
 > **Note :** Cette technique ne fonctionnera que si vous configurer vos propres gestionnaires d'évènement avec les propriétés de gestion d'évènement (par ex. `onclick`). `addEventListener` ne fonctionnera pas. C'est beaucoup de prises de tête pour construire la fonctionnalité de retour. Et il y a d'autres problèmes rattachés avec. Vaut mieux commencer par utiliser les bons éléments pour leurs buts initiaux.
 
 #### Les textes alternatifs
 
-Les textes alternatifs sont très importants pour l'accessibilité — si une personne a un trouble visuel ou auditif qui l'empêche de voir ou d'entendre un contenu, alors c'est un problème. Le texte alternatif le plus simple disponible est le modeste attribut `alt`, que nous devrions inclure dans toutes les images qui contiennent un contenu pertinent. Il peut contenir une description de l'image qui transmet clairement son sens et son contenu sur la page, pour être récupéré par un lecteur d'écran et lu à l'utilisateur.
+Les textes alternatifs sont très importants pour l'accessibilité — si une personne a un trouble visuel ou auditif qui l'empêche de voir ou d'entendre un contenu, alors c'est un problème. Le texte alternatif le plus simple disponible est le modeste attribut `alt`, que nous devrions inclure dans toutes les images qui contiennent un contenu pertinent. Il peut contenir une description de l'image qui transmet clairement son sens et son contenu sur la page, pour être récupéré par un lecteur d'écran et lu à l'utilisateur.
 
 > **Note :** Pour plus d'informations, lisez [Text alternatives](/fr/docs/Learn/Accessibility/HTML#Text_alternatives).
 
 L'oubli de texte alt peut être testé de bien des façons, par exemple en utilisant le {{anch("Auditing tools")}} d'accessibilité.
 
-Le texte alt est légèrement plus complexe pour du contenu vidéo ou audio. Il y a une manière de gérer l'affichage du texte (par ex. les sous-titres) et de les afficher quand la vidéo est jouée, sous le forme de l'élément {{htmlelement("track")}}, et du format [WebVTT](/fr/docs/Web/API/Web_Video_Text_Tracks_Format) (voir [Ajouter des légendes et des sous-titres à des vidéos HTML5](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video) pour un tutoriel détaillé). [La compatibilité entre navigateur](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#Compatibilit%C3%A9_entre_navigateurs) pour cette fonction est assez bonne, mais si vous voulez fournir des textes alternatifs pour de l'audio ou supporter les vieux navigateurs, une simple transcription du texte présenté quelque part sur la page ou sur une page séparée peut être une bonne idée.
+Le texte alt est légèrement plus complexe pour du contenu vidéo ou audio. Il y a une manière de gérer l'affichage du texte (par ex. les sous-titres) et de les afficher quand la vidéo est jouée, sous le forme de l'élément {{htmlelement("track")}}, et du format [WebVTT](/fr/docs/Web/API/Web_Video_Text_Tracks_Format) (voir [Ajouter des légendes et des sous-titres à des vidéos HTML5](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video) pour un tutoriel détaillé). [La compatibilité entre navigateur](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#Compatibilit%C3%A9_entre_navigateurs) pour cette fonction est assez bonne, mais si vous voulez fournir des textes alternatifs pour de l'audio ou supporter les vieux navigateurs, une simple transcription du texte présenté quelque part sur la page ou sur une page séparée peut être une bonne idée.
 
 #### Relations et contexte entre élément
 
@@ -213,7 +213,7 @@ Il y a quelques autres considérations que vous devriez prendre en compte.
 
 #### Couleur et contraste
 
-Lorsque vous choisissez une palette de couleurs pour votre site web, vous devez vous assurer que la couleur du texte (au premier plan) contraste bien avec la couleur d'arrière-plan. Votre design peut avoir l'air cool, mais ce n'est pas bon si les personnes avec un handicap visuel comme le daltonisme ne peuvent pas lire votre contenu. Utilisez un outil comme le [Color Contrast Checker](http://webaim.org/resources/contrastchecker/) de WebAIM si votre palette contraste suffisamment.
+Lorsque vous choisissez une palette de couleurs pour votre site web, vous devez vous assurer que la couleur du texte (au premier plan) contraste bien avec la couleur d'arrière-plan. Votre design peut avoir l'air cool, mais ce n'est pas bon si les personnes avec un handicap visuel comme le daltonisme ne peuvent pas lire votre contenu. Utilisez un outil comme le [Color Contrast Checker](http://webaim.org/resources/contrastchecker/) de WebAIM si votre palette contraste suffisamment.
 
 Une autre astuce est de ne pas compter sur une couleur seule pour les indications/informations, comme ça ne sera pas bon pour ceux qui ne peuvent pas voir la couleur. Plutôt que de marquer en rouge les champs requis d'un formulaire, par exemple, marquez-les avec un astérisque et en rouge.
 
@@ -250,13 +250,13 @@ Les implémentations JavaScript plus complexes peuvent mener à des problèmes a
 
 L'un des domaines de problématique principal pour l'accessibilité c'est les applis complexes qui nécessitent des contrôles de formulaires compliqués (comme les sélecteurs de date) et le contenu dynamique qui se met souvent à jour et de façon incrémentale.
 
-Les contrôles de formulaire compliqués non natifs sont problématiques parce qu'ils ont tendance à nécessiter beaucoup de `<div>`s imbriquées, et le navigateur ne sait pas quoi faire par défaut avec elles. Si vous les inventer vous-même, vous devez vous assurer qu'ils sont accessibles par le clavier ; si vous utilisez des structures externes, revoyez en profondeur les options disponibles pour voir à quel point elles sont accessibles avant de vous plonger dedans. [Bootstrap](http://getbootstrap.com/) à l'air d'être assez bon pour l'accessibilité, par exemple, bien que [Making Bootstrap a Little More Accessible](https://www.sitepoint.com/making-bootstrap-accessible/) de Rhiana Heath aborde certain de ses problèmes (principalement en rapport avec le contraste des couleurs), et examine certaines solutions.
+Les contrôles de formulaire compliqués non natifs sont problématiques parce qu'ils ont tendance à nécessiter beaucoup de `<div>`s imbriquées, et le navigateur ne sait pas quoi faire par défaut avec elles. Si vous les inventer vous-même, vous devez vous assurer qu'ils sont accessibles par le clavier ; si vous utilisez des structures externes, revoyez en profondeur les options disponibles pour voir à quel point elles sont accessibles avant de vous plonger dedans. [Bootstrap](http://getbootstrap.com/) à l'air d'être assez bon pour l'accessibilité, par exemple, bien que [Making Bootstrap a Little More Accessible](https://www.sitepoint.com/making-bootstrap-accessible/) de Rhiana Heath aborde certain de ses problèmes (principalement en rapport avec le contraste des couleurs), et examine certaines solutions.
 
 Le contenu dynamique régulièrement mis à jour peut-être un problème parce que les utilisateurs de lecteur d'écran peuvent le manquer, spécialement si les mises à jour sont inattendues. Si vous avez une appli en single-page avec un contenu principal dans un panneau qui est régulièrement mis à jour en utilisant [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) ou [Fetch](/fr/docs/Web/API/Fetch_API), un utilisateur utilisant un lecteur d'écran peut rater ces mises à jour.
 
 #### WAI-ARIA
 
-Avez-vous besoin d'utiliser une fonctionnalité complexe, ou à la place vous le faîte avec une bonne vieille sémantique HTML ? Si vous avez besoin de complexité, vous devriez songer à utiliser [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) (Accessible Rich Internet Applications), une spécification qui fournit une sémantique (sous la forme des nouveaux attributs HTML) pour les objets comme les contrôles complexes de formulaire et les panneaux mis à jour qui peuvent être compris par la plupart des navigateurs et les lecteurs d'écran.
+Avez-vous besoin d'utiliser une fonctionnalité complexe, ou à la place vous le faîte avec une bonne vieille sémantique HTML ? Si vous avez besoin de complexité, vous devriez songer à utiliser [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) (Accessible Rich Internet Applications), une spécification qui fournit une sémantique (sous la forme des nouveaux attributs HTML) pour les objets comme les contrôles complexes de formulaire et les panneaux mis à jour qui peuvent être compris par la plupart des navigateurs et les lecteurs d'écran.
 
 Pour traiter avec les widgets complexes de formulaire, vous devez utiliser les attributs ARIA comme `roles` pour déclarer quel rôle les différents éléments on dans un widget (par exemple, est-ce qu'ils sont un onglet, ou un panneau ?), `aria-disabled` pour dire si un contrôle est désactivé ou pas, etc.
 
@@ -273,7 +273,7 @@ Voici un exemple :
 <p><span id="LiveRegion1" aria-live="polite" aria-atomic="false"></span></p>
 ```
 
-Vous pouvez voir un exemple en action sur l'exemple [ARIA (Accessible Rich Internet Applications) Live Regions](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm) de Freedom Scientific — le paragraphe surligné doit mettre à jour son contenu toutes les 10 secondes, et un lecteur d'écran doit le lire à l'utilisateur. [ARIA Live Regions - Atomic](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegionsAtomic.htm) apporte un autre exemple utile.
+Vous pouvez voir un exemple en action sur l'exemple [ARIA (Accessible Rich Internet Applications) Live Regions](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm) de Freedom Scientific — le paragraphe surligné doit mettre à jour son contenu toutes les 10 secondes, et un lecteur d'écran doit le lire à l'utilisateur. [ARIA Live Regions - Atomic](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegionsAtomic.htm) apporte un autre exemple utile.
 
 Nous n'avons pas de place pour couvrir WAI-ARIA en détail ici, vous pouvez en apprendre beaucoup plus à ce propos sur [WAI-ARIA basics](/fr/docs/Learn/Accessibility/WAI-ARIA_basics).
 
@@ -292,7 +292,7 @@ Il y a plusieurs outils d'audit disponibles que vous pouvez placer sur vos pages
 Observons un exemple, en utilisant Tenon.
 
 1.  Aller sur la [page d'accueil de Tenon](https://tenon.io).
-2.  Entrez l'URL de notre exemple de [bad-semantics.html](http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html) dans l'entrée texte en haut de la page (ou l'URL d'une autre page que vous aimeriez analyser) et appuyez sur _Analyse your Webpage_.
+2.  Entrez l'URL de notre exemple de [bad-semantics.html](http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html) dans l'entrée texte en haut de la page (ou l'URL d'une autre page que vous aimeriez analyser) et appuyez sur _Analyse your Webpage_.
 3.  Défilez vers le bas jusqu'à que vous trouviez la section d'erreur/signalement, comme montré ci-dessous.
 
 ![](tenon-screenshot.png)
@@ -303,7 +303,7 @@ Il y a également des options que vous pouvez examiner (voir le lien _Show Optio
 
 ### Les outils d'automatisation
 
-[Deque's aXe tool](https://www.deque.com/products/axe/) va un peu plus loin que les outils d'audit que nous avons mentionné plus haut. Comme les autres, il vérifie les pages et retourne des erreurs d'accessibilité. Sa forme immédiate la plus utile est sûrement son extension navigateur :
+[Deque's aXe tool](https://www.deque.com/products/axe/) va un peu plus loin que les outils d'audit que nous avons mentionné plus haut. Comme les autres, il vérifie les pages et retourne des erreurs d'accessibilité. Sa forme immédiate la plus utile est sûrement son extension navigateur :
 
 - [aXe pour Chrome](http://bitly.com/aXe-Chrome)
 - [aXe pour Firefox](http://bit.ly/aXe-Firefox)
@@ -326,7 +326,7 @@ La plupart du temps, les lecteurs d'écran sont des applis séparées, qui s'ex�
 
 Commençons à effectuer quelques tests avec deux lecteurs d'écran différents pour vous donner une idée générale de comment ils fonctionnent et de comment tester avec eux.
 
-> **Note :** [Designing for Screen Reader Compatibility](http://webaim.org/techniques/screenreader/) de WebAIM fournit des informations utiles à propos de l'utilisation des lecteurs d'écran et qu'est-ce qui est le plus efficace pour les lecteurs d'écran. Aller également voir [Screen Reader User Survey #6 Results](http://webaim.org/projects/screenreadersurvey6/#used) pour des statistiques intéressantes concernant l'utilisation de lecteur d'écran.
+> **Note :** [Designing for Screen Reader Compatibility](http://webaim.org/techniques/screenreader/) de WebAIM fournit des informations utiles à propos de l'utilisation des lecteurs d'écran et qu'est-ce qui est le plus efficace pour les lecteurs d'écran. Aller également voir [Screen Reader User Survey #6 Results](http://webaim.org/projects/screenreadersurvey6/#used) pour des statistiques intéressantes concernant l'utilisation de lecteur d'écran.
 
 #### VoiceOver
 
@@ -652,7 +652,7 @@ Maintenant que vous vous êtes habitué à utiliser un lecteur d'écran, nous ai
 - Regardez [good-links.html](http://mdn.github.io/learning-area/accessibility/html/good-links.html), et notez comment est-ce qu'ils ont du sens vus hors contexte. Ce n'est pas le cas avec [bad-links.html](http://mdn.github.io/learning-area/accessibility/html/bad-links.html) — ceux sont juste tous des "click here".
 - Regardez [good-form.html](http://mdn.github.io/learning-area/accessibility/html/good-form.html), et regardez comment les entrées du formulaire sont décrites en utilisant leurs libellés parce que nous avons utilisé l'élément `<label>` correctement. Dans [bad-form.html](http://mdn.github.io/learning-area/accessibility/html/bad-form.html), ils ne sont que des "blank" sur toute la ligne, totalement inutiles.
 - Regardez notre exemple [punk-bands-complete.html](http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html), et observez comment le lecteur d'écran est capable d'associer les colonnes et les lignes de contenu et de les lires toutes ensembles, parce que nous avons défini les entêtes correctement. Dans [bad-table.html](http://mdn.github.io/learning-area/accessibility/html/bad-table.html), aucune des cellules ne peut être associée du tout. Notez que NVDA a étonnamment l'air d'assez bien se comporter lorsque vous n'avez qu'un seul tableau sur une page ; à la place vous pouvez essayer [WebAIM's table test page](http://webaim.org/articles/nvda/tables.htm).
-- Jetez un œil à [WAI-ARIA live regions example](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm) que nous avons vu plus tôt, et observez comment le lecteur d'écran va continuer de lire la section qui se met à constamment à jour dès qu'elle se met à jour.
+- Jetez un œil à [WAI-ARIA live regions example](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm) que nous avons vu plus tôt, et observez comment le lecteur d'écran va continuer de lire la section qui se met à constamment à jour dès qu'elle se met à jour.
 
 ### Test utilisateur
 
diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
index d746f9ca35..2b8177e2c2 100644
--- a/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
+++ b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
@@ -58,7 +58,7 @@ Commençons et regardons comment nous pouvons réduire les erreurs en navigateur
 
 Nous disions dans le [premier article de cette série](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction#Testingdiscovery) que c'était une bonne stratégie de commencer à tester sur une paire de navigateurs modernes sur desktop/mobile, afin de vous assurer que votre site fonctionne pour l'essentiel, avant de commencer à se concentrer sur les problèmes en navigateur croisé.
 
-Dans nos articles [Debugging HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) et [Debugging CSS](/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS), nous avancions quelques conseils très basiques sur le débogage HTML/CSS — si vous ne maîtrisez pas ces bases, vous devriez sans aucun doute aller étudier ces articles avant de continuer.
+Dans nos articles [Debugging HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) et [Debugging CSS](/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS), nous avancions quelques conseils très basiques sur le débogage HTML/CSS — si vous ne maîtrisez pas ces bases, vous devriez sans aucun doute aller étudier ces articles avant de continuer.
 
 Il s'agit essentiellement de vérifier si votre code HTML et CSS est bien conçu et s'il ne contient aucune erreur de syntaxe.
 
@@ -70,7 +70,7 @@ Pour le HTML, la validation implique de s'assurer que toutes vos balises sont co
 
 ![The HTML validator homepage](validator.png)
 
-Le CSS a une histoire semblable — vous devez vérifier que vos noms de propriétés sont correctement épelés, ques les valeurs des propriétés sont correctement épelées et qu'elles sont valides pour les propriétés auxquelles elles s'appliquent, que vous n'oubliez aucune accolades ouvrantes et fermantes. Les W3C a un [CSS Validator](http://jigsaw.w3.org/css-validator/) également disponible à cet effet.
+Le CSS a une histoire semblable — vous devez vérifier que vos noms de propriétés sont correctement épelés, ques les valeurs des propriétés sont correctement épelées et qu'elles sont valides pour les propriétés auxquelles elles s'appliquent, que vous n'oubliez aucune accolades ouvrantes et fermantes. Les W3C a un [CSS Validator](http://jigsaw.w3.org/css-validator/) également disponible à cet effet.
 
 ### Les linters
 
@@ -121,9 +121,9 @@ Une fois que vous avez identifié une liste des potentielles technologies à pro
 
 #### Comportement naturel du HTML
 
-Certains problèmes peuvent être résolus, seulement en tirant parti des réactions naturelles du HTML/CSS.
+Certains problèmes peuvent être résolus, seulement en tirant parti des réactions naturelles du HTML/CSS.
 
-Les éléments HTML non reconnus sont traités par les navigateurs comme des éléments inline anonymes (véritablement des éléments inline avec aucune valeur sémantiques, similaires aux éléments {{htmlelement("span")}} ). Vous pouvez toujours vous référez à eux avec leurs noms, et les styler avec du CSS, par exemple — vous avez juste besoin de vous assurer qu'ils se comportent comme vous le voulez, par exemple configurer `display: block;` sur tous les nouveaux éléments sémantiques (comme {{htmlelement("article")}}, {{htmlelement("aside")}}, etc.), mais seulement sur les vieilles versions d'IE qui ne les reconnaissent pas (donc, IE 8 et plus faible). De cette façon les nouveaux navigateurs peuvent juste utiliser le code normalement, mais les anciennes versions d'IE seront également capables de styler ces éléments.
+Les éléments HTML non reconnus sont traités par les navigateurs comme des éléments inline anonymes (véritablement des éléments inline avec aucune valeur sémantiques, similaires aux éléments {{htmlelement("span")}} ). Vous pouvez toujours vous référez à eux avec leurs noms, et les styler avec du CSS, par exemple — vous avez juste besoin de vous assurer qu'ils se comportent comme vous le voulez, par exemple configurer `display: block;` sur tous les nouveaux éléments sémantiques (comme {{htmlelement("article")}}, {{htmlelement("aside")}}, etc.), mais seulement sur les vieilles versions d'IE qui ne les reconnaissent pas (donc, IE 8 et plus faible). De cette façon les nouveaux navigateurs peuvent juste utiliser le code normalement, mais les anciennes versions d'IE seront également capables de styler ces éléments.
 
 > **Note :** Voir {{anch("IE conditional comments")}} pour une application efficace.
 
@@ -230,7 +230,7 @@ Observons un exemple — une simple boîte stylée avec du CSS, qui a certains s
 
 ![](blingy-button.png)
 
-> **Note :** Vous pouvez également voir cet exemple exécuté en direct sur GitHub comme [button-with-fallback.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/button-with-fallback.html) (voir aussi le [code source](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/button-with-fallback.html)).
+> **Note :** Vous pouvez également voir cet exemple exécuté en direct sur GitHub comme [button-with-fallback.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/button-with-fallback.html) (voir aussi le [code source](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/button-with-fallback.html)).
 
 Le bouton a un nombre de déclarations qui le style, mais les deux qui nous intéressent le plus sont les suivantes :
 
@@ -254,11 +254,11 @@ button:active {
 }
 ```
 
-Ici on fournit un {{cssxref("background-color")}} [RGBA](</fr/docs/Web/CSS/color_value#rgba()>) qui modifie l'opacité au survol afin de donner à l'utilisateur l'information que le bouton est interactif, et une ombre {{cssxref("box-shadow")}} interne semi-transparente pour donner au bouton un peu de texture et de profondeur. Le problème est que les couleurs RGBA et les box shadows ne fonctionnent pas sur les versions d'IE plus vieilles que la 9 — dans les versions plus anciennes le background ne sera juste pas visible du tout et le texte sera illisible, pas bon du tout !
+Ici on fournit un {{cssxref("background-color")}} [RGBA](</fr/docs/Web/CSS/color_value#rgba()>) qui modifie l'opacité au survol afin de donner à l'utilisateur l'information que le bouton est interactif, et une ombre {{cssxref("box-shadow")}} interne semi-transparente pour donner au bouton un peu de texture et de profondeur. Le problème est que les couleurs RGBA et les box shadows ne fonctionnent pas sur les versions d'IE plus vieilles que la 9 — dans les versions plus anciennes le background ne sera juste pas visible du tout et le texte sera illisible, pas bon du tout !
 
 ![](unreadable-button.png)
 
-Pour résoudre ce problème, nous avons ajouté une deuxième déclaration `background-color`, qui précise juste une couleur hex — c'est un recours supporté par les vieux navigateurs, et agit en tant que solution de repli si les fonctionnalités belles et brillantes ne fonctionnent pas. Ce qui se passe c'est que le navigateur parcourant cette page applique pour commencer la première valeur `background-color` ; lorsqu'il sélectionne la deuxième déclaration `background-color`, il remplace la valeur initiale avec cette valeur s'il supporte les couleurs RGBA. S'il ne supporte pas, il ignorera juste toute la déclaration et continuera à avancer.
+Pour résoudre ce problème, nous avons ajouté une deuxième déclaration `background-color`, qui précise juste une couleur hex — c'est un recours supporté par les vieux navigateurs, et agit en tant que solution de repli si les fonctionnalités belles et brillantes ne fonctionnent pas. Ce qui se passe c'est que le navigateur parcourant cette page applique pour commencer la première valeur `background-color` ; lorsqu'il sélectionne la deuxième déclaration `background-color`, il remplace la valeur initiale avec cette valeur s'il supporte les couleurs RGBA. S'il ne supporte pas, il ignorera juste toute la déclaration et continuera à avancer.
 
 > **Note :** Il se produit la même chose pour les autres caractéristiques de CSS comme les blocs [media queries](/fr/docs/Web/CSS/Media_Queries/Using_media_queries), [`@font-face`](/fr/docs/Web/CSS/@font-face) et [`@supports`](/fr/docs/Web/CSS/@supports) — s'ils ne sont pas supportés, le navigateur va juste les ignorer.
 
@@ -310,7 +310,7 @@ form > #date
 
 (L'input `date` du formulaire n'est pas directement dans le `<form>` ; vous feriez mieux d'utiliser un sélecteur descendant général plutôt qu'un sélecteur d'enfant).
 
-Il y a néanmoins un autre problème qui apparaît sur les versions d'IE plus anciennes que la 9 c'est qu'il n'y a aucun nouveau sélecteur (principalement les pseudo-classes et les pseudo-éléments comme [`:nth-of-type`](/fr/docs/Web/CSS/:nth-of-type), [`:not`](/fr/docs/Web/CSS/:not), [`::selection`](/fr/docs/Web/CSS/::selection), etc.) qui marche. Si vous voulez les utiliser dans votre CSS et que vous devez supporter les anciennes versions d'IE, une bonne initiative et d'utiliser la librairie [Selectivizr](http://selectivizr.com/) de Keith Clark — c'est une petite librairie Javascript qui s'exécute au-dessus d'une librairie Javascript existante comme  [jQuery](http://jquery.com/) ou [MooTools](http://mootools.net/).
+Il y a néanmoins un autre problème qui apparaît sur les versions d'IE plus anciennes que la 9 c'est qu'il n'y a aucun nouveau sélecteur (principalement les pseudo-classes et les pseudo-éléments comme [`:nth-of-type`](/fr/docs/Web/CSS/:nth-of-type), [`:not`](/fr/docs/Web/CSS/:not), [`::selection`](/fr/docs/Web/CSS/::selection), etc.) qui marche. Si vous voulez les utiliser dans votre CSS et que vous devez supporter les anciennes versions d'IE, une bonne initiative et d'utiliser la librairie [Selectivizr](http://selectivizr.com/) de Keith Clark — c'est une petite librairie Javascript qui s'exécute au-dessus d'une librairie Javascript existante comme  [jQuery](http://jquery.com/) ou [MooTools](http://mootools.net/).
 
 1.  Afin de tester cet exemple, faites une copie locale de [selectivizr-example-start.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/selectivizr-example-start.html). Si vous le regarder s'exécuter en direct, vous verrez qu'il contient deux paragraphes, dont l'un est stylé. Nous avons sélectionné le paragraphe avec `p:first-child`, qui ne fonctionne pas sur les anciennes versions d'IE.
 2.  Maintenant télécharger [MooTools](http://mootools.net/) et [Selectivizr](http://selectivizr.com/), et placez-les dans le même répertoire que votre fichier HTML.
@@ -345,13 +345,13 @@ background-image: -webkit-gradient(linear,left center,right center,from(green),t
 background-image: linear-gradient(to right,green,yellow);
 ```
 
-La première ligne déclare une propriété {{cssxref("transform")}} avec un préfixe `-webkit-` — c'était nécessaire pour que la transformation fonctionne sur Chrome, etc jusqu'à ce que la fonctionnalité soit finalisée et beaucoup de navigateurs ont ajouté une version de la propriété sans préfixes (au moment de la rédaction, Chrome supportait les deux versions).
+La première ligne déclare une propriété {{cssxref("transform")}} avec un préfixe `-webkit-` — c'était nécessaire pour que la transformation fonctionne sur Chrome, etc jusqu'à ce que la fonctionnalité soit finalisée et beaucoup de navigateurs ont ajouté une version de la propriété sans préfixes (au moment de la rédaction, Chrome supportait les deux versions).
 
 Les trois dernières images montrent trois versions différentes de la fonction [`linear-gradient()`](/fr/docs/Web/CSS/linear-gradient), qui est utilisée pour générer un dégradé linéaire dans la background d'un élément :
 
 1.  La première a un préfixe `-moz-`, et montre une version plutôt ancienne de la syntaxe (Firefox)
 2.  La seconde a un préfixe `-webkit-`, et montre encore une vieille version de la syntaxe de la propriété (également issue d'une vraiment vieille version du moteur Wekkit)
-3.  La troisième n'a pas de préfixe, et montre la version finale de la syntaxe (inclue dans  [CSS Image Values and Replaced Content Module Level 3 spec](https://drafts.csswg.org/css-images-3/#linear-gradients), qui définit cette fonctionnalité).
+3.  La troisième n'a pas de préfixe, et montre la version finale de la syntaxe (inclue dans  [CSS Image Values and Replaced Content Module Level 3 spec](https://drafts.csswg.org/css-images-3/#linear-gradients), qui définit cette fonctionnalité).
 
 Les fonctionnalités préfixées sont supposées ne jamais être utilisées dans des sites web en production — elles sont susceptibles de changer ou d'être supprimées sans avertissement, et causent des problèmes en navigateur croisé. C'est particulièrement un problème lorsque les développeurs décident de n'utiliser que la version `-webkit-` d'une propriété — ce qui veut dire que le site ne fonctionnera pas sur d'autres navigateurs. En fait, cela arrive tellement souvent que d'autres navigateurs ont commencé à implémenter les versions préfixées `-webkit-` de plusieurs propriétés CSS, ils marcheront donc avec un tel code. L'utilisation des préfixes fournit par chaque navigateur a récemment déclinée précisément à cause de ce type de problèmes, mais il en reste encore certain qui demandent de l'attention.
 
@@ -368,7 +368,7 @@ Essayez cet exemple simple :
     var test = document.getElementById('hplogo');
     ```
 
-5.  Maintenant essayez d'appliquer une nouvelle valeur pour la propriété CSS qui vous intéresse sur cet élément ; vous pouvez le faire en utilisant la propriété [style](/fr/docs/Web/API/HTMLElement/style) de l'élément, par exemple essayez de taper ça dans votre console Javascript :
+5.  Maintenant essayez d'appliquer une nouvelle valeur pour la propriété CSS qui vous intéresse sur cet élément ; vous pouvez le faire en utilisant la propriété [style](/fr/docs/Web/API/HTMLElement/style) de l'élément, par exemple essayez de taper ça dans votre console Javascript :
 6.  ```js
     test.style.transform = 'rotate(90deg)'
     test.style.webkitTransform = 'rotate(90deg)'
@@ -390,9 +390,9 @@ Cela vous assurera que tous les navigateurs qui supportent n'importe laquelle de
 
 Bien entendu, appliquer cela à de nombreuses différentes règles CSS peut devenir très fastidieux. Il est préférable d'utiliser des outils d'automatisation qui le font pour vous. Et de tels outils existent :
 
-La [prefix-free JavaScript library](http://leaverou.github.io/prefixfree/) peut être jointe à une page, et détectera automatiquement quels sont les aptitudes détenues par navigateurs en analysant la page et en ajoutant les préfixes appropriés. C'est très facile et pratique à utiliser, bien qu'il ait quelques inconvénients (voir le lien au-dessus pour plus de détails), et on peut discuter du fait qu'analyser chaque feuille de style de votre site et ajouter des préfixes lors de l'exécution peut être un fardeau pour la puissance de traitement de l'ordinateur pour un grand site.
+La [prefix-free JavaScript library](http://leaverou.github.io/prefixfree/) peut être jointe à une page, et détectera automatiquement quels sont les aptitudes détenues par navigateurs en analysant la page et en ajoutant les préfixes appropriés. C'est très facile et pratique à utiliser, bien qu'il ait quelques inconvénients (voir le lien au-dessus pour plus de détails), et on peut discuter du fait qu'analyser chaque feuille de style de votre site et ajouter des préfixes lors de l'exécution peut être un fardeau pour la puissance de traitement de l'ordinateur pour un grand site.
 
-Une autre solution est d'ajouter automatiquement les préfixes pendant le développement, et cela (et d'autres choses à venir) peut être fait en utilisant des outils comme [Autoprefixer](https://github.com/postcss/autoprefixer) et [PostCSS](http://postcss.org/). Ces outils peuvent être utilisés de diverses manières, par exemple Autoprefixer a une [version en ligne](http://autoprefixer.github.io/) qui vous permet d'entrer votre CSS non préfixé sur la gauche, et vous donne une version avec préfixes ajoutés sur la droite. Vous pouvez sélectionner quels navigateurs vous voulez afin de vous assurer de bien supporter en utilisant la notation définie dans [Autoprefixer options](https://github.com/postcss/autoprefixer#options)&nbsp;; pour plus de détails, voir aussi [Browserslist queries](https://github.com/ai/browserslist#queries), qui est basé dessus. Comme exemple, la requête suivante sélectionnera les deux dernières versions de tous le navigateurs principaux et les versions d'IE  supérieure à la 9.
+Une autre solution est d'ajouter automatiquement les préfixes pendant le développement, et cela (et d'autres choses à venir) peut être fait en utilisant des outils comme [Autoprefixer](https://github.com/postcss/autoprefixer) et [PostCSS](http://postcss.org/). Ces outils peuvent être utilisés de diverses manières, par exemple Autoprefixer a une [version en ligne](http://autoprefixer.github.io/) qui vous permet d'entrer votre CSS non préfixé sur la gauche, et vous donne une version avec préfixes ajoutés sur la droite. Vous pouvez sélectionner quels navigateurs vous voulez afin de vous assurer de bien supporter en utilisant la notation définie dans [Autoprefixer options](https://github.com/postcss/autoprefixer#options)&nbsp;; pour plus de détails, voir aussi [Browserslist queries](https://github.com/ai/browserslist#queries), qui est basé dessus. Comme exemple, la requête suivante sélectionnera les deux dernières versions de tous le navigateurs principaux et les versions d'IE supérieure à la 9.
 
     last 2 versions, ie > 9
 
@@ -437,10 +437,10 @@ Un autre problème qui peut survenir est la différence de mise en page entre le
 
 La plupart du travail de mise en page sur le web aujourd'hui et réalisé en utilisant les [floats](/fr/docs/Learn/CSS/CSS_layout/Floats) — c'est parce que les floats sont bien supportés (depuis IE 4, bien qu'il y ait un certain nombre de bugs qui auront besoin d'être examinés si vous essayez de supporter IE aussi loin). Il n'y a néanmoins pas de véritables explications sur la mise en page — utiliser les floats comme nous les utilisons est un vrai hack — et ils ont de sérieuses limites (par ex. voir [Why Flexbox?](/fr/docs/Learn/CSS/CSS_layout/Flexbox#Why_Flexbox))
 
-Plus récemment, des mécanismes dédiés à la disposition ont fait leur apparition, comme [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) et [CSS Grids](/fr/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout), qui rendent les tâches ordinaires de disposition bien plus simples et enlèvent les défauts. Ils ne sont cependant pas bien supportés dans les navigateurs :
+Plus récemment, des mécanismes dédiés à la disposition ont fait leur apparition, comme [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) et [CSS Grids](/fr/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout), qui rendent les tâches ordinaires de disposition bien plus simples et enlèvent les défauts. Ils ne sont cependant pas bien supportés dans les navigateurs :
 
 - Les grilles CSS sont très récentes ; au moment de la rédaction, elles n'étaient [supportées](http://gridbyexample.com/browsers/) que par les toutes nouvelles versions des navigateurs modernes.
-- Flexbox est [bien supportée](/fr/docs/Learn/CSS/CSS_layout/Flexbox#Cross_browser_compatibility) dans les navigateurs modernes, mais amène des problèmes dans les vieux navigateurs. IE9 ne le supporte pas du tout, et IE 10 et les vieilles versions d'iOS/desktop Safari supportent respectivement des vieilles versions incompatibles des spécifications de flexbox. Ceci amène à s'intéresser au jonglage des préfixes de navigateur si vous voulez essayer d'utiliser flexbox sur tous ces navigateurs (voir [Advanced Cross-Browser Flexbox](https://dev.opera.com/articles/advanced-cross-browser-flexbox/) pour vous faire une idée).
+- Flexbox est [bien supportée](/fr/docs/Learn/CSS/CSS_layout/Flexbox#Cross_browser_compatibility) dans les navigateurs modernes, mais amène des problèmes dans les vieux navigateurs. IE9 ne le supporte pas du tout, et IE 10 et les vieilles versions d'iOS/desktop Safari supportent respectivement des vieilles versions incompatibles des spécifications de flexbox. Ceci amène à s'intéresser au jonglage des préfixes de navigateur si vous voulez essayer d'utiliser flexbox sur tous ces navigateurs (voir [Advanced Cross-Browser Flexbox](https://dev.opera.com/articles/advanced-cross-browser-flexbox/) pour vous faire une idée).
 
 Les fonctionnalités de disposition ne sont pas aussi simples pour fournir des solutions de repli que de simples couleurs, ombres ou dégradés. Si les propriétés de disposition sont ignorées, la totalité de votre design sera réduit en pièces. De ce fait, vous devez utiliser une fonctionnalité de détection pour détecter si les navigateurs qui consultent votre site supportent ces caractéristiques de disposition, et appliquer différentes dispositions de manière sélective selon le résultat (nous couvrirons les fonctionnalités de détection dans un article à venir).
 
@@ -454,13 +454,13 @@ Le design responsive est la pratique de créer des dispositions web qui s'adapte
 
 La résolution est également très préoccupante — par exemple, les appareils mobiles sont moins susceptibles d'avoir besoin de grosses images lourdes que des ordinateurs de bureau, et ont davantage tendance à avoir des connexions internet plus lentes et sans doute un échange de données coûteux qui gaspille la bande passante qui est un problème supplémentaire. De plus, certains appareils peuvent avoir une gamme de plusieurs résolutions, ce qui veut dire que des petites images peuvent s'afficher pixelisées. Il y a un nombre de techniques qui vous permette de travailler autour de tels problèmes, des simples [mobile first media queries](/fr/Apps/Progressive/Responsive/Mobile_first), aux plus complexes [responsive image techniques](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes).
 
-Une autre difficulté qui peut présenter des problèmes c'est le support des fonctionnalités par les navigateurs qui rendent les techniques suscitées possibles. Les media queries ne sont pas supportés sur IE 8 ou plus vieux, donc si vous voulez utiliser une disposition mobile en premier lieu puis une disposition pour ordinateur de bureau qui applique aux vieilles versions d'IE, vous devrez appliquer un media querie {{glossary("polyfill")}} à votre page, comme [css3-mediaqueries-js](https://code.google.com/archive/p/css3-mediaqueries-js/) ou [Respond.js](https://github.com/scottjehl/Respond).
+Une autre difficulté qui peut présenter des problèmes c'est le support des fonctionnalités par les navigateurs qui rendent les techniques suscitées possibles. Les media queries ne sont pas supportés sur IE 8 ou plus vieux, donc si vous voulez utiliser une disposition mobile en premier lieu puis une disposition pour ordinateur de bureau qui applique aux vieilles versions d'IE, vous devrez appliquer un media querie {{glossary("polyfill")}} à votre page, comme [css3-mediaqueries-js](https://code.google.com/archive/p/css3-mediaqueries-js/) ou [Respond.js](https://github.com/scottjehl/Respond).
 
 ## Trouver de l'aide
 
 Il y bien d'autres problèmes que vous allez rencontrer avec le HTML et le CSS ; la chose la plus important à vraiment savoir est de comment trouver des solutions en ligne.
 
-Parmi les meilleures sources d'information de support il y a Mozilla Developer Network (c'est où vous vous trouvez actuellement !), [stackoverflow.com](http://stackoverflow.com/) et [caniuse.com](http://caniuse.com/).
+Parmi les meilleures sources d'information de support il y a Mozilla Developer Network (c'est où vous vous trouvez actuellement !), [stackoverflow.com](http://stackoverflow.com/) et [caniuse.com](http://caniuse.com/).
 
 Pour utiliser le Mozilla Developer Network (MDN), la plupart des gens font une recherche de la technologie sur laquelle ils essayent de trouver des informations, et ajoutent le terme "mdn", par exemple "mdn HTML5 video". MDN contient plusieurs types de contenus utiles :
 
@@ -468,9 +468,9 @@ Pour utiliser le Mozilla Developer Network (MDN), la plupart des gens font une r
 - D'autres références de support, par ex. [Media formats supported by the HTML audio and video elements](/fr/docs/Web/HTML/Supported_media_formats).
 - Des tutoriaux utiles qui résolvent des problèmes spécifiques, par exemple [Créer un lecteur vidéo en navigateur croisé](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player).
 
-[caniuse.com](http://caniuse.com/) fournit des informations de support, tout au long avec des ressources externes. Par exemple, voir <http://caniuse.com/#search=video> (vous avez juste à entrer la fonctionnalité que vous recherchez dans la boîte de recherche)
+[caniuse.com](http://caniuse.com/) fournit des informations de support, tout au long avec des ressources externes. Par exemple, voir <http://caniuse.com/#search=video> (vous avez juste à entrer la fonctionnalité que vous recherchez dans la boîte de recherche)
 
-[stackoverflow.com](http://stackoverflow.com/) (SO) est un forum en ligne où vous pouvez poser des questions et avez un ensemble de développeurs partageant leurs solutions, observez les commentaires passés, et aidez les autres développeurs. Nous vous conseillons de chercher et de regarder s'il existe déjà une réponse à votre question, avant de poster une nouvelle question. Par exemple, nous avons cherché pour "cross browser html5 video" sur SO, et très rapidement la solution [HTML5 Video with full cross browser compatibility](http://stackoverflow.com/questions/16212510/html5-video-with-full-cross-browser-compatibility) est remontée.
+[stackoverflow.com](http://stackoverflow.com/) (SO) est un forum en ligne où vous pouvez poser des questions et avez un ensemble de développeurs partageant leurs solutions, observez les commentaires passés, et aidez les autres développeurs. Nous vous conseillons de chercher et de regarder s'il existe déjà une réponse à votre question, avant de poster une nouvelle question. Par exemple, nous avons cherché pour "cross browser html5 video" sur SO, et très rapidement la solution [HTML5 Video with full cross browser compatibility](http://stackoverflow.com/questions/16212510/html5-video-with-full-cross-browser-compatibility) est remontée.
 
 Par ailleurs, essayez de chercher votre moteur de recherche favori pour trouver une réponse à vos problèmes. C'est souvent utile de chercher les messages d'erreur spécifiques si vous en avez — d'autres développeurs seront susceptibles d'avoir les mêmes problèmes que vous
 
diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.md
index 5ab07a6d4a..ae5d0cc024 100644
--- a/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.md
+++ b/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.md
@@ -46,9 +46,9 @@ Souvenez-vous que vous n'êtes pas votre utilisateur — uniquement parce que vo
 
 > **Note :** [Make the web work for everyone](https://hacks.mozilla.org/2016/07/make-the-web-work-for-everyone/) fournit une perspective plus précise sur les différents navigateurs que les gens utilisent, leur part de marché, et les problèmes de compatibilité entre navigateurs.
 
-Il est important de préciser quelque termes de terminologie. Pour commencer, quand on parle de "travailler en navigateurs croisés", on veut vraiment dire que chaque navigateur doit être capable  de fournir une expérience utilisateur acceptable. C'est potentiellement bon pour un site de ne pas fournir exactement la même expérience sur tous les navigateurs, tant que le noyau des fonctionnalités reste accessible. Avec des navigateurs modernes vous pourrez ajouter quelques animations 3D et stylisées, tandis que sur de plus vieux navigateurs vous pouvez juste utiliser un design plus plat représentant la même information. Tant que le propriétaire du site est content, alors vous avez terminé votre travail.
+Il est important de préciser quelque termes de terminologie. Pour commencer, quand on parle de "travailler en navigateurs croisés", on veut vraiment dire que chaque navigateur doit être capable de fournir une expérience utilisateur acceptable. C'est potentiellement bon pour un site de ne pas fournir exactement la même expérience sur tous les navigateurs, tant que le noyau des fonctionnalités reste accessible. Avec des navigateurs modernes vous pourrez ajouter quelques animations 3D et stylisées, tandis que sur de plus vieux navigateurs vous pouvez juste utiliser un design plus plat représentant la même information. Tant que le propriétaire du site est content, alors vous avez terminé votre travail.
 
-D'un autre côté, ce n'est pas ok qu'un site soit fonctionnel pour les personnes voyantes mais complètement inaccessible pour des utilisateurs qui ont des problèmes de vision  parce que leur application de lecture d'écran ne peut lire aucune des données stockées sur le site.
+D'un autre côté, ce n'est pas ok qu'un site soit fonctionnel pour les personnes voyantes mais complètement inaccessible pour des utilisateurs qui ont des problèmes de vision parce que leur application de lecture d'écran ne peut lire aucune des données stockées sur le site.
 
 De plus, lorsqu'on dit "à travers un nombre acceptable de navigateurs", on ne veut pas dire 100% des navigateurs dans le monde — c'est tout simplement impossible. Vous pouvez faire des recherches d'informations (analyse sectorielle) pour savoir quels sont les types de supports et de navigateurs que vos utilisateurs vont utiliser (comme on peut en parler dans le second article — voir [Gotta test 'em all?](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all)), mais vous ne pouvez pas tout garantir. En tant que developpeur web, vous devez convenir avec le demandeur du site d'une liste de navigateurs et d'appareils sur lesquels le code doit absolument fonctionner, au-delà de ces prérequis, vous devez vous assurer de donner un maximum de chances aux autres navigateurs de pouvoir afficher votre contenu grâce à du code préventif. Cette étape représente le défi le plus important d'un développeur web.
 
@@ -60,8 +60,8 @@ Il y a beaucoup de raisons différentes qui amènent des problèmes en navigateu
 
 Les problèmes en navigateurs croisés se produisent le plus fréquemment parce que :
 
-- Parfois les navigateurs ont des bugs, ou implémentent des fonctionnalités différemment. Cette situation n'est pas aussi grave qu'elle n'y paraît ; si on regarde IE4 et Netscape 4 qui étaient en compétition pour devenir le navigateur dominant dans les années 90,  les compagnies de navigateurs implémentaient délibérément des fonctionnalités différentes les uns des autres afin de prendre l'avantage, ce qui faisait de la vie des développeurs un véritable enfer. Les navigateurs sont biens meilleurs pour respecter les standards de nos jours, mais les bug et les différences continuent d'apparaître de temps en temps.
-- Certains navigateurs peuvent avoir différents niveaux d'acceptation de fonctionnalités par rapport à d'autres. C'est inévitable lorsque vous traitez avec des fonctionnalités de pointe que les navigateurs commencent seulement à implémenter, ou encore si vous devez supporter de vraiment vieux navigateurs qui ne sont plus du tout développés, ou qui ont arrêté  (c-à-d plus aucun travail effectué sur ces derniers) bien longtemps avant même qu'une nouvelle fonctionnalité n'est put être inventée. Par exemple, si vous voulez utiliser des fonctionnalités avancées de Javascript sur votre site, elles ne marcheront sûrement pas sur d'anciens navigateurs. Si vous devez supportez des vieux navigateurs, vous ne devriez pas utiliser ces fonctionnalités ou bien convetir votre code dans une ancienne syntaxe en utilisant un compileur ou quelque chose de similaire si nécessaire.
+- Parfois les navigateurs ont des bugs, ou implémentent des fonctionnalités différemment. Cette situation n'est pas aussi grave qu'elle n'y paraît ; si on regarde IE4 et Netscape 4 qui étaient en compétition pour devenir le navigateur dominant dans les années 90,  les compagnies de navigateurs implémentaient délibérément des fonctionnalités différentes les uns des autres afin de prendre l'avantage, ce qui faisait de la vie des développeurs un véritable enfer. Les navigateurs sont biens meilleurs pour respecter les standards de nos jours, mais les bug et les différences continuent d'apparaître de temps en temps.
+- Certains navigateurs peuvent avoir différents niveaux d'acceptation de fonctionnalités par rapport à d'autres. C'est inévitable lorsque vous traitez avec des fonctionnalités de pointe que les navigateurs commencent seulement à implémenter, ou encore si vous devez supporter de vraiment vieux navigateurs qui ne sont plus du tout développés, ou qui ont arrêté  (c-à-d plus aucun travail effectué sur ces derniers) bien longtemps avant même qu'une nouvelle fonctionnalité n'est put être inventée. Par exemple, si vous voulez utiliser des fonctionnalités avancées de Javascript sur votre site, elles ne marcheront sûrement pas sur d'anciens navigateurs. Si vous devez supportez des vieux navigateurs, vous ne devriez pas utiliser ces fonctionnalités ou bien convetir votre code dans une ancienne syntaxe en utilisant un compileur ou quelque chose de similaire si nécessaire.
 - Certains appareils peuvent avoir des contraintes qui rendraient la navigation plus lente sur un site web, ou afficheraient mal le contenu. Par exemple, si un site a été designé pour être beau sur un support PC il paraîtra sûrement très serré et très difficile à lire sur un écran de mobile. Si votre site inclut une quantité importante de grosses animation ça passera sûrement sur une tablette haut de gamme, mais peut-être lent et saccadé sur un appareil de plus basse gamme.
 
 Et encore tant d'autres raisons.
@@ -86,13 +86,13 @@ Durant la phase de plan initial, vous allez probablement avoir plusieurs réunio
 
 Une fois que vous vous êtes fait une idée des fonctionnalités requises et de quelles technologies vous allez avoir besoin pour les construire, vous pouvez commencer à rechercher le public cible — quel navigateurs, supports, etc. ce public cible va-t-il utiliser pour aller sur ce site? Le client peut déjà avoir des données à ce propos provenant de recherches qu'il aurait faites auparavant, p.e. d'un autre site web qu'il possède, ou d'une ancienne version du site sur lequel vous travaillez actuellement. Si ça n'est pas le cas, vous serez en mesure de vous faire une idée en prenant en compte d'autres sources, comme les statistiques d'utilisation pour les concurrents ou bien dans quels pays le site sera délivré. Vous pouvez évidemment vous servir un peu de votre intuition.
 
-Par exemple, vous pouvez être en train de construire un site e-commerce qui ne sera désservi que pour des utilisateurs dans l'Amérique du Nord. Le site devra entièrement fonctionner sur les toutes dernières versions des ordinateurs et des mobiles (iOS, Android, Windows phone) et les navigateurs les plus populaires  — cela doit inclure Chrome (et Opera car il est basé sur le même moteur de rendu que Chrome), Firefox, IE/Edge, et Safari. Il devra aussi fournir une expérience acceptable sur IE 8 et 9, et être accessible avec les conformité de l'Accessibilité Web.
+Par exemple, vous pouvez être en train de construire un site e-commerce qui ne sera désservi que pour des utilisateurs dans l'Amérique du Nord. Le site devra entièrement fonctionner sur les toutes dernières versions des ordinateurs et des mobiles (iOS, Android, Windows phone) et les navigateurs les plus populaires  — cela doit inclure Chrome (et Opera car il est basé sur le même moteur de rendu que Chrome), Firefox, IE/Edge, et Safari. Il devra aussi fournir une expérience acceptable sur IE 8 et 9, et être accessible avec les conformité de l'Accessibilité Web.
 
 Maintenant que vous connaissez votre plate-forme de test cible, vous devriez revenir en arrière et revoir les fonctionnalités requises ainsi que les technologies que vous allez utiliser. Par exemple, si le client du site de e-commerce veut un tour WebGL 3D de chaque produit intégré dans la page produit, il devra accepter que cela ne sera juste pas possible sur les versions d'IE avant la 11ème. Vous devez vous entendre pour fournir une version du site sans cette fonctionnalité pour les utilisateurs des anciennes versions d'IE.
 
 Vous devriez mettre en place une liste des différents champs de problèmes potentiels.
 
-> **Note :** Vous pouvez trouver les informations concernant les différentes technologies et leur support par les navigateurs en recherchant les différentes fonctionnalités sur MDN — le site sur lequel vous vous trouvez! Vous pouvrez également consulter  [caniuse.com](http://caniuse.com/), pour d'autres détails utiles.
+> **Note :** Vous pouvez trouver les informations concernant les différentes technologies et leur support par les navigateurs en recherchant les différentes fonctionnalités sur MDN — le site sur lequel vous vous trouvez! Vous pouvrez également consulter  [caniuse.com](http://caniuse.com/), pour d'autres détails utiles.
 
 Une fois que vous êtes d'accord sur ces détails, vous pouvez continuer et démarrer le développement du site.
 
@@ -103,7 +103,7 @@ Maintenant concernant le développement du site. Vous devez séparer les différ
 Il existe plusieurs stratégies générales concernant le développement multi-navigateurs, par exemple :
 
 - Obtenir toutes les fonctionnalités qui marchent le plus possible de la même manière sur tous les navigateurs croisés. Cela peut induire d'écrire différents codes qui reproduisent la même fonctionnalité d'une manière différentes visant différents navigateurs, ou bien utiliser un {{glossary("Polyfill")}} afin d'imiter tout support manquant en utilisant Javascript ou d'autres technologies, ou utiliser une librairie qui vous autorise à écrire une seule fois le code et ensuite appliquer différents comportements en arrière-plan selon ce que le navigateur prend en charge.
-- Accepter que certaines choses ne vont pas se comporter de la même manière sur tous les navigateurs, et fournir différentes solutions  (acceptables) sur les navigateurs qui ne supportent pas toutes les fonctionnalités. Parfois c'est inévitable à cause des contraintes du support — un écran de cinéma ne va pas donner la même expérience visuelle qu'un écran 4 pouces de smartphone, indépendamment de comment vous programmez votre site.
+- Accepter que certaines choses ne vont pas se comporter de la même manière sur tous les navigateurs, et fournir différentes solutions  (acceptables) sur les navigateurs qui ne supportent pas toutes les fonctionnalités. Parfois c'est inévitable à cause des contraintes du support — un écran de cinéma ne va pas donner la même expérience visuelle qu'un écran 4 pouces de smartphone, indépendamment de comment vous programmez votre site.
 - Acceptez que votre site ne va juste pas marcher sur certains vieux navigateurs, et aller au-delà. Il n'y a pas de soucis à condition que votre client/base d'utilisateurs soit d'accord avec ceci.
 
 Normalement votre développement devra inclure une combinaison des trois approches ci-dessus. La chose la plus importante est que vous testiez chacune des petites étapes avant de les commiter— n'attendez pas la fin avant de commencer à tester!
@@ -157,7 +157,7 @@ La première chose à faire est de réduire l'origine du bug avec un maximum de
 
 Ce n'est pas forcément de votre faute — si un bug existe sur un navigateur, alors on peut espérer que le distributeur le fixera rapidement. Il est peut-être même déjà réparé — par exemple si un bug est présent sur la release 49 de Firefox, mais qu'il n'existe plus sur Firefox Nightly (version52), alors il a été fixé. S'il n'a pas été résolu, alors vous pouvez déposer un bug (voir {{anch("Reporting bugs")}}, plus bas).
 
-Si c'est de votre faute, vous devez le résoudre ! Trouver la cause d'un bug implique la même stratégie que pour n'importe quel bug de développement web (à nouveau, voir [Debugging HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML), [Debugging CSS](/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS), et [What went wrong? Troubleshooting JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong)). Une fois que vous avez découvert ce qui causait le bug, vous devez décider comment est-ce que vous allez travailler sur le navigateur en particulier qui vous pose problèmes — vous ne pouvez pas juste modifier le code du problème, cela risque de casser le code sur un autre navigateur. En général, l'approche veut qu'on fasse bifurquer le code dans une certaine direction, par exemple utilisez une fonctionnalité de détecton en code Javascript pour détecter les situations où une fonctionnalité ne marche pas, et éxecuter un code différent qui fonctionnera dans ce cas.
+Si c'est de votre faute, vous devez le résoudre ! Trouver la cause d'un bug implique la même stratégie que pour n'importe quel bug de développement web (à nouveau, voir [Debugging HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML), [Debugging CSS](/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS), et [What went wrong? Troubleshooting JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong)). Une fois que vous avez découvert ce qui causait le bug, vous devez décider comment est-ce que vous allez travailler sur le navigateur en particulier qui vous pose problèmes — vous ne pouvez pas juste modifier le code du problème, cela risque de casser le code sur un autre navigateur. En général, l'approche veut qu'on fasse bifurquer le code dans une certaine direction, par exemple utilisez une fonctionnalité de détecton en code Javascript pour détecter les situations où une fonctionnalité ne marche pas, et éxecuter un code différent qui fonctionnera dans ce cas.
 
 Lorsque le fix a été créé, vous devrez repéter votre processus de test afin de vous assurer que votre réparation fonctionne bien, et n'a pas causé une faille autre part sur le site ou sur un autre navigateur.
 
diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md
index 807f81d444..21e9c8f98e 100644
--- a/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md
+++ b/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md
@@ -15,7 +15,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS","Learn/Tools_and_testing/Cross_browser_testing/Accessibility", "Learn/Tools_and_testing/Cross_browser_testing")}}
 
-Nous allons maintenant aborder les problèmes Javascript en navigateur croisé et comment les résoudre. Cela comprend des informations sur l'utilisation  des outils de dev des navigateurs pour localiser et fixer les problèmes, l'utilisation des Polyfills et de librairies pour contourner les problèmes, utiliser les fonctionnalités modernes de Javascript sur des vieux navigateurs, et plus encore.
+Nous allons maintenant aborder les problèmes Javascript en navigateur croisé et comment les résoudre. Cela comprend des informations sur l'utilisation des outils de dev des navigateurs pour localiser et fixer les problèmes, l'utilisation des Polyfills et de librairies pour contourner les problèmes, utiliser les fonctionnalités modernes de Javascript sur des vieux navigateurs, et plus encore.
 
 <table class="standard-table">
   <tbody>
@@ -24,10 +24,10 @@ Nous allons maintenant aborder les problèmes Javascript en navigateur croisé e
       <td>
         <p>
           Connaissances de la base des langages
-          <a href="/fr/Apprendre/HTML">HTML</a>, <a href="/fr/Apprendre/CSS"
+          <a href="/fr/Apprendre/HTML">HTML</a>, <a href="/fr/Apprendre/CSS"
             >CSS</a
           >
-          et <a href="/fr/docs/Learn/JavaScript">JavaScript</a> ; une idée du
+          et <a href="/fr/docs/Learn/JavaScript">JavaScript</a> ; une idée du
           haut niveau des
           <a
             href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction"
@@ -51,7 +51,7 @@ Nous allons maintenant aborder les problèmes Javascript en navigateur croisé e
 
 ## Les problèmes avec le Javascript
 
-Historiquement, Javascript présentaient des problèmes de compatibilité entre navigateurs — retour aux années 1990, les navigateurs majeurs jusqu'alors (Internet Explorer et Netscape) implémentaient des scripts dans différents langages (Netscape avait JavaScript, IE avait JScript et proposait aussi VBScript comme une option), et bien que JavaScript et JScript étaient compatibles dans une certaine mesure (les deux sont basés sur la spécification {{glossary("ECMAScript")}} ), les éléments étaient souvent implémentés avec des conflits, des incompatibilités, ce qui causait bien des cauchemards aux développeurs.
+Historiquement, Javascript présentaient des problèmes de compatibilité entre navigateurs — retour aux années 1990, les navigateurs majeurs jusqu'alors (Internet Explorer et Netscape) implémentaient des scripts dans différents langages (Netscape avait JavaScript, IE avait JScript et proposait aussi VBScript comme une option), et bien que JavaScript et JScript étaient compatibles dans une certaine mesure (les deux sont basés sur la spécification {{glossary("ECMAScript")}} ), les éléments étaient souvent implémentés avec des conflits, des incompatibilités, ce qui causait bien des cauchemards aux développeurs.
 
 De tels problèmes d'incompabilités ont persistés jusqu'au début des années 2000, étant donné que les vieux navigateurs étaient encore utilisés et devaient donc encore être supportés par les site web. C'est une des raisons principale pour laquelle les librairies comme JQuery ont vu le jour — pour faire abstraction des différences entre les implémentations des navigateur (par ex. voir le bout de code dans [Lancement d'une requête HTTP](/fr/docs/Web/Guide/AJAX/Premiers_pas#.C3.89tape_1_.E2.80.94_Lancement_d.27une_requ.C3.AAte_HTTP)) comme ça la développeurs n'ont qu'à écrire un simple morceau de code (voir [`jQuery.ajax()`](http://api.jquery.com/jquery.ajax/)). JQuery (ou qu'importe la librarie que vous utilisez) procédera ensuite au traitement en arrière-plan, donc vous n'aurez pas à le faire.
 
@@ -71,14 +71,14 @@ Comme nous le disions dans l'[article précédent](/fr/docs/Learn/Tools_and_test
 - Les problèmes basiques de syntaxe et de logique (une fois encore, aller voir [La résolution JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong)).
 - Définir des variables sûres, etc. qui sont défnies dans le périmètre correct, et que vous ne rencontrez pas des conflits entre des items déclarés à des endroits différents (voir [Function scope and conflicts](/fr/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts)).
 - La confusion à propos de [this](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this), concernant le périmètre auquel il s'applique, et par conséquent si sa valeur et celle que vous souhaitiez. Vous pouvez lire [Qu'est-ce que "this" ?](/fr/docs/Learn/JavaScript/Objects/Basics#Qu'est-ce_que_%C2%AB_this_%C2%BB) pour une simple introduction ; vous devriez également étudier des exemples comme [this one](https://github.com/mdn/learning-area/blob/7ed039d17e820c93cafaff541aa65d874dde8323/javascript/oojs/assessment/main.js#L143), qui présente un modèle typique de sauvegarde du périmètre de `this` dans une variable séparée, puis utilise cette variable dans une fonction imbriquée pour que vous soyez sûr que vous appliquez la fonction au bon périmètre de `this`.
-- Utiliser les fonctions de manière incorrecte dans les boucles — par exemple, dans [bad-for-loop.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/bad-for-loop.html) (voir [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/bad-for-loop.html)), on boucle sur 10 itérations, à chaque fois on créé un paragraphe et on y ajoute un évènement gestionnaire [onclick](/fr/docs/Web/API/GlobalEventHandlers/onclick). Lorsqu'ils sont cliqués, chacun d'entre eux doit fournir un message d'alerte contenant son numéro (la valeur de `i` au moment où il était créé), cependant chacun d'entre eux retourne `i` comme 11, parce que les boucle for font toutes leurs itérations avant que les fonctions imbriquées ne soit appelées. Si vous voulez que ça marche correctement, vous devez définir une fonction pour ajouter le gestionnaire séparément, l'appellant à chaque itération et lui passer la valeur courante de `para` et `i` à chaque fois (ou quelque chose de similaire). Voir [good-for-loop.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/good-for-loop.html) (voir également le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/good-for-loop.html)) pour une version qui fonctionne.
+- Utiliser les fonctions de manière incorrecte dans les boucles — par exemple, dans [bad-for-loop.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/bad-for-loop.html) (voir [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/bad-for-loop.html)), on boucle sur 10 itérations, à chaque fois on créé un paragraphe et on y ajoute un évènement gestionnaire [onclick](/fr/docs/Web/API/GlobalEventHandlers/onclick). Lorsqu'ils sont cliqués, chacun d'entre eux doit fournir un message d'alerte contenant son numéro (la valeur de `i` au moment où il était créé), cependant chacun d'entre eux retourne `i` comme 11, parce que les boucle for font toutes leurs itérations avant que les fonctions imbriquées ne soit appelées. Si vous voulez que ça marche correctement, vous devez définir une fonction pour ajouter le gestionnaire séparément, l'appellant à chaque itération et lui passer la valeur courante de `para` et `i` à chaque fois (ou quelque chose de similaire). Voir [good-for-loop.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/good-for-loop.html) (voir également le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/good-for-loop.html)) pour une version qui fonctionne.
 - S'assurer que les opérations asynchrones sont retournées avant d'essayer d'utiliser les valeurs qu'elles retournent. Par exemple, [cet exemple Ajax](/fr/docs/Web/Guide/AJAX/Premiers_pas#.C3.89tape_3_.E2.80.94_Un_exemple_simple) vérifie que la requête est complète et que la réponse a été retournée avant qu'on ait essayé d'utiliser cette réponse pour quoi que ce soit. Ce type d'opération a été rendue plus simple à gérer grâce à l'introduction des [Promises](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) dans le langage JavaScript.
 
 > **Note :** [Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make](https://www.toptal.com/javascript/10-most-common-javascript-mistakes) a des discussions intéressantes à propos de ces erreurs courantes et plus encore.
 
 ### Les linters
 
-Comme avec [le HTML et le CSS](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Les_linters), vous pouvez garantir une meilleure qualité, vous êtes moins susceptible de faire des erreurs en utilisant un linter, qui vous signale les erreurs et met en évidence les avertissement concernant les mauvaises pratiques, etc., et peut être configuré pour être plus stricte ou plus coulant dans leurs rapport d'erreur/avertissement. Les linters JavaScript/ECMAScript que nous vous recommandons sont [JSHint](http://jshint.com/) et [ESLint](http://eslint.org/) ; ils peuvent être utilisés de différentes façons, nous détaillerons certaines d'entre elles plus bas.
+Comme avec [le HTML et le CSS](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Les_linters), vous pouvez garantir une meilleure qualité, vous êtes moins susceptible de faire des erreurs en utilisant un linter, qui vous signale les erreurs et met en évidence les avertissement concernant les mauvaises pratiques, etc., et peut être configuré pour être plus stricte ou plus coulant dans leurs rapport d'erreur/avertissement. Les linters JavaScript/ECMAScript que nous vous recommandons sont [JSHint](http://jshint.com/) et [ESLint](http://eslint.org/) ; ils peuvent être utilisés de différentes façons, nous détaillerons certaines d'entre elles plus bas.
 
 #### En ligne
 
@@ -102,15 +102,15 @@ Pour l'installer :
 
 #### Autres usages
 
-Il y a d'autres façons d'utiliser de tels linter ; vous pouvez vous renseignez à ce propos sur les pages d'installation de [JSHint](http://jshint.com/install/) et [ESLint](http://eslint.org/docs/user-guide/getting-started).
+Il y a d'autres façons d'utiliser de tels linter ; vous pouvez vous renseignez à ce propos sur les pages d'installation de [JSHint](http://jshint.com/install/) et [ESLint](http://eslint.org/docs/user-guide/getting-started).
 
-Il convient de mentionner l'utilisation de ligne de commande — vous pouvez installer ces outils avec les utilitaires de ligne de commande (disponible via ILC — interface de ligne de commande) en utilisant npm (Node Package Manager — vous devrez installer [NodeJS](https://nodejs.org/en/) en premier). Par exemple, la ligne de commande suivante installe JSHint :
+Il convient de mentionner l'utilisation de ligne de commande — vous pouvez installer ces outils avec les utilitaires de ligne de commande (disponible via ILC — interface de ligne de commande) en utilisant npm (Node Package Manager — vous devrez installer [NodeJS](https://nodejs.org/en/) en premier). Par exemple, la ligne de commande suivante installe JSHint :
 
 ```bash
 npm install -g jshint
 ```
 
-Vous pouvez ensuite indiquer à ces outils les fichiers JavaScript que vous voulez lint, par exemple :![](js-hint-commandline.png)Vous pouvez également utiliser ces outils avec un exécuteur de tâche/outil de build comme [Gulp](http://gulpjs.com/) ou [Webpack](https://webpack.github.io/) pour linter automatiquement votre JavaScript pendant le développement. (voir [Using a task runner to automate testing tools](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Using_a_task_runner_to_automate_testing_tools) dans un article ultérieur). Voir [ESLint integrations](http://eslint.org/docs/user-guide/integrations) pour les options de ESLint ; JSHint est supporté nativement par Grunt, et a également d'autre intégrations possibles, par ex. [JSHint loader for Webpack](https://github.com/webpack/jshint-loader).
+Vous pouvez ensuite indiquer à ces outils les fichiers JavaScript que vous voulez lint, par exemple :![](js-hint-commandline.png)Vous pouvez également utiliser ces outils avec un exécuteur de tâche/outil de build comme [Gulp](http://gulpjs.com/) ou [Webpack](https://webpack.github.io/) pour linter automatiquement votre JavaScript pendant le développement. (voir [Using a task runner to automate testing tools](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Using_a_task_runner_to_automate_testing_tools) dans un article ultérieur). Voir [ESLint integrations](http://eslint.org/docs/user-guide/integrations) pour les options de ESLint ; JSHint est supporté nativement par Grunt, et a également d'autre intégrations possibles, par ex. [JSHint loader for Webpack](https://github.com/webpack/jshint-loader).
 
 > **Note :** ESLint prend un peu plus de temps à l'installation et à la configuration que JSHint, mais il est également plus puissant.
 
@@ -118,7 +118,7 @@ Vous pouvez ensuite indiquer à ces outils les fichiers JavaScript que vous voul
 
 Les outils de développement des navigateurs ont beaucoup de fonctionnalités utiles pour aider à déboguer JavaScript. Pour commencer, la console JavaScript reportera les erreurs dans votre code.
 
-Faîtes une copie locale de notre exemple [broken-ajax.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/broken-ajax.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/broken-ajax.html)). Si vous regardez dans la console, vous verrez le résultat suivant :
+Faîtes une copie locale de notre exemple [broken-ajax.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/broken-ajax.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/broken-ajax.html)). Si vous regardez dans la console, vous verrez le résultat suivant :
 
 ![](broken-ajax.png)
 
@@ -150,7 +150,7 @@ Mais cela échoue.
 
 #### L'API Console
 
-Vous savez peut-être déjà ce qui ne va pas avec ce code, mais analysons-le un peu plus pour vous montrer comment vous pouvez l'examiner. Premièrement, il y a une API [Console](/fr/docs/Web/API/Console) qui permet au code JavaScript d'interragir avec la console JavaScript du navigateur. Il y a un nombre de fonctionnalités disponibles, mais la principale que vous utiliserez le plus souvent est [`console.log()`](/fr/docs/Web/API/Console/log), qui affiche un message d'erreur personnalisé dans la console.
+Vous savez peut-être déjà ce qui ne va pas avec ce code, mais analysons-le un peu plus pour vous montrer comment vous pouvez l'examiner. Premièrement, il y a une API [Console](/fr/docs/Web/API/Console) qui permet au code JavaScript d'interragir avec la console JavaScript du navigateur. Il y a un nombre de fonctionnalités disponibles, mais la principale que vous utiliserez le plus souvent est [`console.log()`](/fr/docs/Web/API/Console/log), qui affiche un message d'erreur personnalisé dans la console.
 
 Essayer d'insérer la ligne suivante juste avant la ligne 31 (en gras au-dessus) :
 
@@ -188,7 +188,7 @@ En résumé, à chaque fois que quelque chose ne marche pas et qu'une valeur ne
 
 Nous avons résolu un problème, mais nous sommes toujours coincés avec le message d'erreur "TypeError: heroes is undefined", reporté à la ligne 51. Examinons-la maintenant, en utilisant une fonctionnalité plus sophistiquée des outils de développement web : le [débogueur JavaScript](/fr/docs/Outils/D%C3%A9bogueur) comme il est appellé dans Firefox.
 
-> **Note :** Des outils similaires sont disponibles dans d'autres navigateurs ; le [Sources tab](https://developers.google.com/web/tools/chrome-devtools/#sources) dans Chrome, le Débogueur dans Safari (voir [Safari Web Development Tools](https://developer.apple.com/safari/tools/)), etc.
+> **Note :** Des outils similaires sont disponibles dans d'autres navigateurs ; le [Sources tab](https://developers.google.com/web/tools/chrome-devtools/#sources) dans Chrome, le Débogueur dans Safari (voir [Safari Web Development Tools](https://developer.apple.com/safari/tools/)), etc.
 
 Dans Firefox, le Débogueur se présente comme suit :
 
@@ -224,11 +224,11 @@ Ici, nous pouvons obtenir des informations très utiles.
 Dès que vos applis vont devenir plus complexes vous allez commencer à utiliser plus de JavaScript, vous pouvez commencer à rencontrer des problèmes de performances, particulièrement lorsque vous visionnez vos applis sur des appareils plus lents. La performance est un gros sujet, et nous n'avons pas le temps de le couvrir en détail ici. Voici quelques conseils rapides :
 
 - Eviter de charger plus de JavaSacript que nécessaire, réunissez vos scripts dans un seul fichier en utilisant une solution comme [Browserify](http://browserify.org/). En général, réduire le nombre de requêtes HTTP est très bon pour la performance.
-- S'assurer que vos fichiers sont le plus petits en les minifiant avant de les charger sur votre serveur de production. Minifier réduit tout le code en une seule et immense ligne, donnant au fichier une taille beaucoup moins importante. C'est vilain, mais vous n'avez pas besoin de la lire lorsque c'est terminé ! Cette tâche est la mieux réalisée avec un outil de minification comme [Uglify](https://github.com/mishoo/UglifyJS2) (il y aussi une version en ligne — voir [JSCompress.com](https://jscompress.com/)).
+- S'assurer que vos fichiers sont le plus petits en les minifiant avant de les charger sur votre serveur de production. Minifier réduit tout le code en une seule et immense ligne, donnant au fichier une taille beaucoup moins importante. C'est vilain, mais vous n'avez pas besoin de la lire lorsque c'est terminé ! Cette tâche est la mieux réalisée avec un outil de minification comme [Uglify](https://github.com/mishoo/UglifyJS2) (il y aussi une version en ligne — voir [JSCompress.com](https://jscompress.com/)).
 - Lorsque que vous utilisez des APIs, assurez-vous de désactiver les fonctionnalités de l'API quand elles ne sont pas utilisées ; certains appels d'API peuvent être très coûteux en puissance de traitement. Par exemple, lorsque vous montrez un stream video, assurez-vous que s'est désactivé quand vous ne pouvez pas le voir. Quand vous tracer la localisation d'un appareil en utilisant des appels répétés de Géolocalisation, assurez-vous de le désactiver quand l'utilisateur arrête de l'utiliser.
-- Les animations peuvent être très coûteuses pour la performance. Beaucoup de librairies JavaScript fournissent des possibilités d'animation programmée avec JavaScript, mais c'est beaucoup plus rentable de faire les animations via les fonctionnalités natives des navigateurs comme [les Animations CSS](/fr/docs/Web/CSS/Animations_CSS) (ou la naissante [Web Animations API](/fr/docs/Web/API/Web_Animations_API)) qu'en JavaScript. Lisez  [Animating like you just don’t care with Element.animate](https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/) pour des théories très utiles sur l'animation coûteuse, des conseils sur comment améliorer la performance des animations, et des informations à propos de l'API Web Animations.
+- Les animations peuvent être très coûteuses pour la performance. Beaucoup de librairies JavaScript fournissent des possibilités d'animation programmée avec JavaScript, mais c'est beaucoup plus rentable de faire les animations via les fonctionnalités natives des navigateurs comme [les Animations CSS](/fr/docs/Web/CSS/Animations_CSS) (ou la naissante [Web Animations API](/fr/docs/Web/API/Web_Animations_API)) qu'en JavaScript. Lisez  [Animating like you just don’t care with Element.animate](https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/) pour des théories très utiles sur l'animation coûteuse, des conseils sur comment améliorer la performance des animations, et des informations à propos de l'API Web Animations.
 
-> **Note :** Le [Writing Fast, Memory-Efficient JavaScript](https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/ "Read 'Writing Fast, Memory-Efficient JavaScript'") de Addy Osmani contient beaucoup de détails et de astuces impeccables pour améliorer les performances en JavaScript.
+> **Note :** Le [Writing Fast, Memory-Efficient JavaScript](https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/ "Read 'Writing Fast, Memory-Efficient JavaScript'") de Addy Osmani contient beaucoup de détails et de astuces impeccables pour améliorer les performances en JavaScript.
 
 ## Les problèmes JavaScript en navigateur croisé
 
@@ -267,7 +267,7 @@ Il y a plusieurs stratégies pour gérer les incompatibilités entre navigateurs
 
 #### Fonctionnalité de détection
 
-L'idée derrière une fonctionnalité de détection est que vous pouvez exécuter un test pour déterminer si une fonctionnalité est supportée dans le navigateur courant, et ensuite exécuter conditionnellement un code pour fournir une expérience acceptable sur chaque navigateur qui supporte et ne supporte pas la fonctionnalité. A titre d'exemple rapide, l'[API Geolocalisation](/fr/docs/Using_geolocation) (qui présente des données de localisation pour l'appareil sur lequel le navigateur est en train d'être exécuté) a un point d'entrée principal pour son utilisation — une propriété `geolocation` disponible dans l'objet global [Navigator](/fr/docs/Web/API/Navigator).  Par conséquent, vous pouvez détecter si le navigateur supporte la géolocalisation ou non en utilisant quelque chose comme suit :
+L'idée derrière une fonctionnalité de détection est que vous pouvez exécuter un test pour déterminer si une fonctionnalité est supportée dans le navigateur courant, et ensuite exécuter conditionnellement un code pour fournir une expérience acceptable sur chaque navigateur qui supporte et ne supporte pas la fonctionnalité. A titre d'exemple rapide, l'[API Geolocalisation](/fr/docs/Using_geolocation) (qui présente des données de localisation pour l'appareil sur lequel le navigateur est en train d'être exécuté) a un point d'entrée principal pour son utilisation — une propriété `geolocation` disponible dans l'objet global [Navigator](/fr/docs/Web/API/Navigator).  Par conséquent, vous pouvez détecter si le navigateur supporte la géolocalisation ou non en utilisant quelque chose comme suit :
 
 ```js
 if("geolocation" in navigator) {
@@ -283,7 +283,7 @@ Vous pouvez également écrire un test de ce type pour une fonctionnalité CSS,
 
 Enfin, ne confondez pas fonction de détection avec **le détecteur navigateur** (qui détecte quel navigateur en particulier accède au site) — c'est une terrible pratique qui devrait être découragée à tout prix. Voir {{anch("Using bad browser sniffing code")}}, plus tard, pour plus de détails.
 
-> **Note :** Certaines fonctionnalités sont connues pour être indétectables — voir la liste des [Undetectables](https://github.com/Modernizr/Modernizr/wiki/Undetectables) de Modernizr.
+> **Note :** Certaines fonctionnalités sont connues pour être indétectables — voir la liste des [Undetectables](https://github.com/Modernizr/Modernizr/wiki/Undetectables) de Modernizr.
 
 > **Note :** La fonction de détection sera couverte avec beaucoup plus de détails dans son propre article dédié, plus tard dans le module.
 
@@ -294,10 +294,10 @@ Les librairies JavaScript sont essentiellement une partie externe d'unités de c
 Les librairies Javascript ont tendance à se réunir en quelques types principaux (certaines librairies serviront plus d'un de ces types) :
 
 - Les librairies utilitaires : Fournissent une quantité de fonctions pour rendre les tâches sans intérêts plus simples et moins ennuyantes à gérer. [jQuery](http://jquery.com/) par exemple fournit son propre système de sélecteurs et de librairies de manipulation de DOM, pour permettre le choix du type de sélecteur CSS, des éléments en JavaScript et une construction du DOM plus simple. Ce n'est plus aussi important aujourd'hui nous avons des fonctionnalités modernes comme les méthodes {{domxref("Document.querySelector()")}}/{{domxref("Document.querySelectorAll()")}}/{{domxref("Node")}} disponibles selon les navigateurs, mais ça peut toujours être utile quand vous avez besoin de supporter de plus vieux navigateurs.
-- Les librairies de confort : Rendent les choses difficiles plus facile à faire. Par exemple, l'[API WebGL](/fr/Apprendre/WebGL) est vraiment complexe et  se révèle difficile à écrire directement, alors la librairie [Three.js](https://threejs.org/) (et d'autres) est construite au-dessus de WebGL et apporte une API plus simple pour créer des objets 3D courants, des aspects, des textures etc. L'[API Service Worker](/fr/docs/Web/API/Service_Worker_API) est aussi très complexe à utiliser, alors des librairies de code ont commencé à apparaitre pour rendre des cas d'usage des Service Worker plus facile à implémenter (voir le [Service Worker Cookbook](https://serviceworke.rs/) pour plusieurs extrait de code utiles).
+- Les librairies de confort : Rendent les choses difficiles plus facile à faire. Par exemple, l'[API WebGL](/fr/Apprendre/WebGL) est vraiment complexe et se révèle difficile à écrire directement, alors la librairie [Three.js](https://threejs.org/) (et d'autres) est construite au-dessus de WebGL et apporte une API plus simple pour créer des objets 3D courants, des aspects, des textures etc. L'[API Service Worker](/fr/docs/Web/API/Service_Worker_API) est aussi très complexe à utiliser, alors des librairies de code ont commencé à apparaitre pour rendre des cas d'usage des Service Worker plus facile à implémenter (voir le [Service Worker Cookbook](https://serviceworke.rs/) pour plusieurs extrait de code utiles).
 - Les librairies d'effets : Ces librairies sont conçues pour vous permettre d'ajouter facilement des effets spéciaux à votre site web. C'était plus utile quand {{glossary("DHTML")}} était à la mode, et implémentait des effets impliquant beaucoup de JavaScript complexe, mais de nos jours les navigateurs ont construit une quantité de fonctionnalités en CSS3 et des APIs pour implémenter les effets plus facilement. Pour une liste de librairies, se référer à [JavaScripting.com/animation](https://www.javascripting.com/animation/).
-- Les librairies d'UI : Fournissent des méthodes pour implémenter des fonctionnalités UI complexes qui serait autrement compliquées à implémenter et à faire fonctionner en navigateur croisé, par exemple [jQuery UI](http://jqueryui.com/) et [Foundation](http://foundation.zurb.com/). Elles ont tendance à être utilisées comme les bases de la configuration de sites complets ; c'est souvent difficile de les implémenter uniquement pour une fonctionnalité UI.
-- Les librairies de nomalisation : Vous fournissent une syntaxe simple qui vous permet de compléter facilement une tâche sans avoir à vous soucier des différences entre navigateur. la librairie utilisera les APIs appopriées en arrière-plan donc la fonctionnalité marchera qu'importe le navigateur (en théorie). Par exemple, [LocalForage](https://github.com/localForage/localForage) est une librairie pour le stockage de données côté client, qui fournit une syntaxe simple pour stocker et extraire les données. En arrière-plan, elle utilise la meilleure API que la navigateur possède pour stocker les données,  que ça soit [IndexedDB](/fr/docs/Web/API/API_IndexedDB), [Web Storage](/fr/docs/Web/API/Web_Storage_API), ou encore WebSQL (qui est maintenant désapprouvée, mais qui est encore supportée dans certaines vieilles versions de Safari/IE). Comme autre exemple, JQuery.
+- Les librairies d'UI : Fournissent des méthodes pour implémenter des fonctionnalités UI complexes qui serait autrement compliquées à implémenter et à faire fonctionner en navigateur croisé, par exemple [jQuery UI](http://jqueryui.com/) et [Foundation](http://foundation.zurb.com/). Elles ont tendance à être utilisées comme les bases de la configuration de sites complets ; c'est souvent difficile de les implémenter uniquement pour une fonctionnalité UI.
+- Les librairies de nomalisation : Vous fournissent une syntaxe simple qui vous permet de compléter facilement une tâche sans avoir à vous soucier des différences entre navigateur. la librairie utilisera les APIs appopriées en arrière-plan donc la fonctionnalité marchera qu'importe le navigateur (en théorie). Par exemple, [LocalForage](https://github.com/localForage/localForage) est une librairie pour le stockage de données côté client, qui fournit une syntaxe simple pour stocker et extraire les données. En arrière-plan, elle utilise la meilleure API que la navigateur possède pour stocker les données,  que ça soit [IndexedDB](/fr/docs/Web/API/API_IndexedDB), [Web Storage](/fr/docs/Web/API/Web_Storage_API), ou encore WebSQL (qui est maintenant désapprouvée, mais qui est encore supportée dans certaines vieilles versions de Safari/IE). Comme autre exemple, JQuery.
 
 Lorsque vous choissisez une librairie pour l'utiliser, assurez-vous qu'elle fonctionne sur l'ensemble des navigateurs que vous voulez supporter, et tester vos implémentations minutieusement. Assurez-vous également que la librairie est répandue et bien supportée, et qu'elle ne va pas devenir obsolète la semaine prochaine. Parler à d'autres développeurs pour savoir ce qu'ils peuvent vous recommander, regarder l'activité et combien de contributeurs la librairie a sur Github (ou qu'importe où elle est stockée), etc.
 
@@ -309,22 +309,22 @@ L'utilisation de librairie à un niveau basique consiste à télécharger les fi
 
 #### Les Polyfills
 
-Les polyfills sont aussi des sortes de fichiers JavaScript externes que vous pouvez ajouter à votre projet, mais ils sont différents des librairies — là où les librairies améliorent les fonctionnalités existantes et rendent les choses plus simples, les polyfills apportent des fonctionnalités qui n'existent pas du tout. Les polyfills utilisent JavaScript ou d'autres technologies pour créer entièrement du support pour des fonctionnalités qu'un navigateur ne supporte pas nativement. Par exemple, vous pouvez utiliser un polyfill comme [es6-promise](https://github.com/stefanpenner/es6-promise) pour faire fonctionner les promises sur des navigateurs où elles ne fonctionneraient pas nativement.
+Les polyfills sont aussi des sortes de fichiers JavaScript externes que vous pouvez ajouter à votre projet, mais ils sont différents des librairies — là où les librairies améliorent les fonctionnalités existantes et rendent les choses plus simples, les polyfills apportent des fonctionnalités qui n'existent pas du tout. Les polyfills utilisent JavaScript ou d'autres technologies pour créer entièrement du support pour des fonctionnalités qu'un navigateur ne supporte pas nativement. Par exemple, vous pouvez utiliser un polyfill comme [es6-promise](https://github.com/stefanpenner/es6-promise) pour faire fonctionner les promises sur des navigateurs où elles ne fonctionneraient pas nativement.
 
 La liste des modernizr [HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) est utile pour trouver des polyfills pour différents objectifs. Une fois encore, renseignez-vous sur eux avant de les utiliser — assurez-vous qu'ils fonctionnent et qu'ils sont maintenus.
 
 Observons cet exercice — dans cet exemple nous allons utiliser un polyfill Fetch pour fournir du support pour une API Fetch dans de vieux navigateurs ; nous avons toutefois également besoin d'utiliser le polyfill es6-promise, comme Fetch utilise largement les promises, et les navigateurs qui ne les supportent pas seront toujours bloqués.
 
-1.  Pour commencer, faîtes une copie locale de notre exemple [fetch-polyfill.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill.html) et de [notre belle image de fleurs](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/flowers.jpg) dans un nouveau répertoire. Nous allons écrire du code pour récupérer l'image de fleurs et l'afficher sur la page.
-2.  Ensuite, sauvegarder les copies de [Fetch polyfill](https://raw.githubusercontent.com/github/fetch/master/fetch.js) et de [es6-promises polyfill](https://raw.githubusercontent.com/stefanpenner/es6-promise/master/dist/es6-promise.js) dans le même répertoire que le HTML.
-3.  Appliquer les scripts de polyfill à la page en utilisant le code suivant — placez-les au-dessus de l'élément {{htmlelement("script")}} existant ainsi ils seront déjà disponibles sur la page quand on essaiera d'utiliser Fetch :
+1.  Pour commencer, faîtes une copie locale de notre exemple [fetch-polyfill.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill.html) et de [notre belle image de fleurs](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/flowers.jpg) dans un nouveau répertoire. Nous allons écrire du code pour récupérer l'image de fleurs et l'afficher sur la page.
+2.  Ensuite, sauvegarder les copies de [Fetch polyfill](https://raw.githubusercontent.com/github/fetch/master/fetch.js) et de [es6-promises polyfill](https://raw.githubusercontent.com/stefanpenner/es6-promise/master/dist/es6-promise.js) dans le même répertoire que le HTML.
+3.  Appliquer les scripts de polyfill à la page en utilisant le code suivant — placez-les au-dessus de l'élément {{htmlelement("script")}} existant ainsi ils seront déjà disponibles sur la page quand on essaiera d'utiliser Fetch :
 
     ```js
     <script src="es6-promise.js"></script>
     <script src="fetch.js"></script>
     ```
 
-4.  Dans le {{htmlelement("script")}} original, ajoutez le code suivant :
+4.  Dans le {{htmlelement("script")}} original, ajoutez le code suivant :
 5.  ```js
     var myImage = document.querySelector('.my-image');
 
@@ -339,7 +339,7 @@ Observons cet exercice — dans cet exemple nous allons utiliser un polyfill Fet
 6.  Maintenant si vous le chargez dans un navigateur qui ne supporte pas Fetch (Safari et IE sont des candidats de choix), vous devriez quand même voir l'image de la fleur apparaitre — cool !
     ![](fetch-image.jpg)
 
-> **Note :** Vous pouvez consulter notre version terminée sur [fetch-polyfill-finished.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html)).
+> **Note :** Vous pouvez consulter notre version terminée sur [fetch-polyfill-finished.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html)).
 
 > **Note :** Une fois encore, il y a plusieurs manières différentes d'utiliser les différents polyfills que vous allez rencontrer — consulter chaque documentation individuelle d'un polyfill.
 
@@ -367,7 +367,7 @@ function browserSupportsAllFeatures() {
 }
 ```
 
-Ici on vérifie si l'objet [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) et la fonction [`fetch()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch) existent dans le navigateur. Si les deux existent, la fonction retourne true. Si la fonction retourne `false`, alors on exécute le code à l'intérieur de la deuxième partie de la condition — elle exécute une fonction appelée loadScript(), qui charge les polyfills dans la page, puis exécute `main()` après que le chargement soit terminé. `loadScript()` ressemble à ça :
+Ici on vérifie si l'objet [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) et la fonction [`fetch()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch) existent dans le navigateur. Si les deux existent, la fonction retourne true. Si la fonction retourne `false`, alors on exécute le code à l'intérieur de la deuxième partie de la condition — elle exécute une fonction appelée loadScript(), qui charge les polyfills dans la page, puis exécute `main()` après que le chargement soit terminé. `loadScript()` ressemble à ça :
 
 ```js
 function loadScript(src, done) {
@@ -387,7 +387,7 @@ Cette fonction créé un nouvel élément `<script>`, puis applique son attribut
 
 Notez que ce polyfills.js correspond aux deux polyfills que nous utilisons réunis dans un fichier. Nous l'avons fait manuellement, mais il y a des solutions intelligentes qui généreront automatiquement des paquets pour vous — voir [Browserify](http://browserify.org/) (pour un tutoriel de départ voir [Getting started with Browserify](https://www.sitepoint.com/getting-started-browserify/)). C'est une bonne idée de paqueter les fichiers JS en un seul comme ça — cela réduit le nombre de requêtes HTTP ce qui améliore la performance de votre site.
 
-Vous pouvez voir le code en direct sur [fetch-polyfill-only-when-needed.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html) (voir aussi [le code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html)). Nous aimerions être clairs sur le fait qu'on ne peut s'attribuer ce code — il a été écrit à la base par Philip Walton. Aller voir son article [Loading Polyfills Only When Needed](https://philipwalton.com/articles/loading-polyfills-only-when-needed/) pour le code original, et beaucoup d'explications utiles autour de ce large sujet.
+Vous pouvez voir le code en direct sur [fetch-polyfill-only-when-needed.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html) (voir aussi [le code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html)). Nous aimerions être clairs sur le fait qu'on ne peut s'attribuer ce code — il a été écrit à la base par Philip Walton. Aller voir son article [Loading Polyfills Only When Needed](https://philipwalton.com/articles/loading-polyfills-only-when-needed/) pour le code original, et beaucoup d'explications utiles autour de ce large sujet.
 
 > **Note :** Il y a certaines options externes à prendre en considération, par exemple [Polyfill.io](https://polyfill.io/v2/docs/) — c'est une librairie méta-polyfill qui va regarder toutes les capacités de chaque navigateur et appliquer les polyfills nécessaires, selon quelles APIs et fonctionnalités JS vous utilisez dans votre code.
 
@@ -397,7 +397,7 @@ Une autre option qui et devenue populaire pour les gens qui veulent utiliser des
 
 > **Note :** Cela s'appelle le "transpiling" — vous n'êtes pas en train de compiler du code à un niveau inférieur pour qu'il soit exécuté sur un ordinateur (comme vous l'auriez fait avec du code C) ; en fait, vous êtes en train de le transformer dans une syntaxe qui existe à un niveau similaire d'abstraction pour qu'il puisse être utilisé de la même manière, mais avec des conditions légèrement différentes (dans ce cas, transformer un type de JavaScript dans un autre).
 
-Pour l'exemple, nous parlions des fonctions fléchées (voir [arrow-function.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html) en direct, et voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/arrow-function.html)) plus tôt dans l'article, qui ne marchent que sur les tout nouveaux navigateurs :
+Pour l'exemple, nous parlions des fonctions fléchées (voir [arrow-function.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html) en direct, et voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/arrow-function.html)) plus tôt dans l'article, qui ne marchent que sur les tout nouveaux navigateurs :
 
 ```js
 () => { ... }
@@ -439,7 +439,7 @@ Cependant, le temps passant, les développeurs ont commencé à voir des graves
 
 Beaucoup de développeurs on implémenté de mauvais détecteur de code de navigateur et ne l'ont pas maintenu, et les navigateurs ont commencé à être bloqués en allant sur des sites web contenant des fonctionnalités qu'ils avaient déjà implémenté. C'est devenu une pratique commune que les navigateurs commencent à mentir à propos de quel navigateur ils étaient dans leur chaîne d'user-agent (ou déclarer qu'ils étaient tous les navigateurs), pour passer outre les détecteurs de code. Les navigateurs ont également implémenté des moyens pour permettre aux utilisateurs de changer quels chaîne d'user-agent le navigateur doit retourné lorsqu'il est interrogé par du JavaScript. Tout cela fait du détecteur de code bien plus qu'une source d'erreur, et d'inutilité.
 
-> **Note :** Vous devriez lire [History of the browser user-agent string](http://webaim.org/blog/user-agent-string-history/) de Aaron Andersen pour une présentation utile et amusante de cette situation.
+> **Note :** Vous devriez lire [History of the browser user-agent string](http://webaim.org/blog/user-agent-string-history/) de Aaron Andersen pour une présentation utile et amusante de cette situation.
 
 La leçon à retenir ici est — ne JAMAIS utiliser de détecteur de code. Le seul cas d'usage pour le détecteur de code de nos jours c'est si vous implémentez un fix pour un bug pour une version très particulière d'un navigateur en particulier. Même dans ce cas, la plupart des bugs sont fixés rapidement dans le cycle rapide des sorties des navigateurs. Cela n'arrive pas très souvent. {{anch("Feature detection")}} est presque toujours une meilleure option — si vous détectez si une fonctionnalité est supportée, vous n'aurez pas besoin de changer votre code quand de nouvelles versions de navigateur sortiront, et les tests sont bien plus fiables.
 
@@ -460,7 +460,7 @@ var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 ```
 
-Dans le cas de l'API Web Audio, les principaux points d'entrée pour utiliser l'API étaient supportés dans Chrome/Opera via les versions préfixées `webkit` (ils supportent dorénavant les versions non préfixées). Le moyen le plus simple de contourner cette situation est de créer une nouvelle version des objets qui sont  préfixés dans certains navigateurs, et de la rendre égale à la version non préfixée, OU à la version préfixée (OU n'importe quelles versions préfixées qui méritent d'être éxaminées) — quelle que soit celle supportée par le navigateur affichant le site elle sera utilisée.
+Dans le cas de l'API Web Audio, les principaux points d'entrée pour utiliser l'API étaient supportés dans Chrome/Opera via les versions préfixées `webkit` (ils supportent dorénavant les versions non préfixées). Le moyen le plus simple de contourner cette situation est de créer une nouvelle version des objets qui sont préfixés dans certains navigateurs, et de la rendre égale à la version non préfixée, OU à la version préfixée (OU n'importe quelles versions préfixées qui méritent d'être éxaminées) — quelle que soit celle supportée par le navigateur affichant le site elle sera utilisée.
 
 Ensuite utilisez cet objet pour manipuler l'API, plutôt que l'original. Dans ce cas nous créons un constructeur [AudioContext](/fr/docs/Web/API/AudioContext) modifié, puis nous créons une nouvelle instance de contexte audio à utiliser pour notre codage Web Audio.
 
diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md
index 8f2e474df0..d19b78e975 100644
--- a/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md
+++ b/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md
@@ -280,7 +280,7 @@ La plupart du temps vous permettrez à vos utilisateurs de regarder la page ou l
 
 Lorsque vous exécutez les tests, cela peut aussi être une bonne idée de :
 
-- Configurer si possible un profil navigateur séparé, avec les extensions et ces autres types de choses des navigateurs désactivées, et exécuter vos tests sur ce profile (voir [Utiliser le Profile Manager pour créer et retirer des profiles Firefox](https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles) et [Share Chrome with others or add personas](https://support.google.com/chrome/answer/2364824), par exemple).
+- Configurer si possible un profil navigateur séparé, avec les extensions et ces autres types de choses des navigateurs désactivées, et exécuter vos tests sur ce profile (voir [Utiliser le Profile Manager pour créer et retirer des profiles Firefox](https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles) et [Share Chrome with others or add personas](https://support.google.com/chrome/answer/2364824), par exemple).
 - Utiliser le mode navigation privée sur votre navigateur lorsque vous exécutez vos tests, quand il est disponible (par ex. [Private Browsing](https://support.mozilla.org/en-US/kb/private-browsing-use-firefox-without-history) sur Firefox, [Incognito Mode](https://support.google.com/chrome/answer/95464) sur Chrome) grâce à cela les cookies et les fichiers temporaires ne seront pas sauvegardés.
 
 Ces étapes sont conçues pour s'assurer que le navigateur que vous êtes en train de tester est aussi "pure" que possible. C-à-d qu'il n'y a rien d'installé qui pourrait affecter les résultats des tests.
@@ -291,7 +291,7 @@ Ces étapes sont conçues pour s'assurer que le navigateur que vous êtes en tra
 
 ## Résumé
 
-Après avoir lu cet article vous devriez maintenant avoir une bonne idée de ce que vous pouvez faire pour identifier votre liste de public cible/navigateur cible, et ensuite efficacement mener à bien vos tests en navigateur croisé en se basant sur cette liste.
+Après avoir lu cet article vous devriez maintenant avoir une bonne idée de ce que vous pouvez faire pour identifier votre liste de public cible/navigateur cible, et ensuite efficacement mener à bien vos tests en navigateur croisé en se basant sur cette liste.
 
 La prochaine fois nous tournerons notre attention sur les problèmes concrets de votre code que vos tests peuvent révéler, en commençant avec le HTML et le CSS.
 
diff --git a/files/fr/learn/tools_and_testing/github/index.md b/files/fr/learn/tools_and_testing/github/index.md
index 813f0afe66..68f83fe355 100644
--- a/files/fr/learn/tools_and_testing/github/index.md
+++ b/files/fr/learn/tools_and_testing/github/index.md
@@ -53,7 +53,7 @@ Il est aussi préférable que vous ayiez quelques connaissances fondamentales su
 
 ## Guides
 
-Notez que les liens ci-après vous amènent à des ressources sur des sites externes. Nous envisageons la possibilité d'avoir notre cours  consacré à Git/GitHub, mais pour l'instant, ceux-ci vous aideront à mieux appréhender le sujet.
+Notez que les liens ci-après vous amènent à des ressources sur des sites externes. Nous envisageons la possibilité d'avoir notre cours consacré à Git/GitHub, mais pour l'instant, ceux-ci vous aideront à mieux appréhender le sujet.
 
 - [Hello World (de GitHub)](https://guides.github.com/activities/hello-world/)
   - : C'est un bon point pour commencer — ce guide pratique vous fera entrer dans l'utilisation de GitHub en vous apprenant les fondements de Git tels que la création de dépôts et de branches, la créations de _commits_ ainsi qu'à l'ouverture et à la fusion de _pull requests_.
diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.md b/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.md
index ae7f690ae6..5f385731c3 100644
--- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.md
+++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.md
@@ -32,6 +32,6 @@ Vous devez vraiment apprendre les bases des langages [HTML](/fr/docs/Learn/HTML)
 - [Principes de base de la gestion des paquets](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management)
   - : Dans cet article, nous examinerons en détail les gestionnaires de paquets pour comprendre comment nous pouvons les utiliser dans nos propres projets - pour installer les dépendances des outils de projet, les maintenir à jour, etc.
 - [Introduction d'une chaîne d'outils complète](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain)
-  - : Dans les deux derniers articles de la série, nous solidifierons vos connaissances en matière d'outillage en vous guidant tout au long du processus de création d'un exemple de chaîne d'outils d'étude de cas. Nous irons de la mise en place d'un environnement de développement sensible et de la mise en place d'outils de transformation au déploiement effectif de votre application sur Netlify. Dans cet article, nous allons présenter l'étude de cas, configurer notre environnement de développement et configurer nos outils de transformation de code.
+  - : Dans les deux derniers articles de la série, nous solidifierons vos connaissances en matière d'outillage en vous guidant tout au long du processus de création d'un exemple de chaîne d'outils d'étude de cas. Nous irons de la mise en place d'un environnement de développement sensible et de la mise en place d'outils de transformation au déploiement effectif de votre application sur Netlify. Dans cet article, nous allons présenter l'étude de cas, configurer notre environnement de développement et configurer nos outils de transformation de code.
 - [Déployer notre application](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment)
   - : Dans le dernier article de notre série, nous prenons l'exemple de chaîne d'outils que nous avons construit dans l'article précédent et nous l'ajoutons afin de pouvoir déployer notre exemple d'application. Nous poussons le code sur GitHub, le déployons à l'aide de Netlify et vous montrons même comment ajouter un test simple au processus.