Prepare Learning Area section for Markdown conversion (#2738)

* Remove summary, spans and fonts

* Remove notranslate class

* Remove ids other than headings

* Remove hidden blocks

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* Fix notes

* Remove code in pre, sub/sup and some styles

* fix dls

* fix absolute / english links

* fix figures and others

* fix other issues from report

* Fix other one-off issues excl. imgs

* Fix images

* Fixes #2842 for Learning area

7 files changed, 77 insertions, 110 deletions

diff --git a/files/fr/learn/javascript/asynchronous/async_await/index.html b/files/fr/learn/javascript/asynchronous/async_await/index.html
index fa4956f829..5955c0f27f 100644
--- a/files/fr/learn/javascript/asynchronous/async_await/index.html
+++ b/files/fr/learn/javascript/asynchronous/async_await/index.html
@@ -17,9 +17,9 @@ translation_of: Learn/JavaScript/Asynchronous/Async_await
 
 <div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
 
-<p class="summary">Plus récemment, les <a href="/fr/docs/Web/JavaScript/Reference/Statements/async_function">fonctions async</a> et le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Operators/await">await</a></code> ont été ajoutés au langage JavaScript avec l'édition intitulée ECMAScript 2017. Ces fonctionnalités agissent essentiellement comme du sucre syntaxique sur les promesses, rendant le code asynchrone plus facile à écrire et à lire par la suite. Elles font en sorte que le code asynchrone ressemble davantage au code synchrone de la vieille école, et elles valent donc la peine d'être apprises. Cet article fournit les informations à connaître.</p>
+<p>Plus récemment, les <a href="/fr/docs/Web/JavaScript/Reference/Statements/async_function">fonctions async</a> et le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Operators/await">await</a></code> ont été ajoutés au langage JavaScript avec l'édition intitulée ECMAScript 2017. Ces fonctionnalités agissent essentiellement comme du sucre syntaxique sur les promesses, rendant le code asynchrone plus facile à écrire et à lire par la suite. Elles font en sorte que le code asynchrone ressemble davantage au code synchrone de la vieille école, et elles valent donc la peine d'être apprises. Cet article fournit les informations à connaître.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
   <tbody>
     <tr>
       <th scope="row">Prérequis :</th>
@@ -295,8 +295,7 @@ displayContent()
 <p>Pour la gestion des erreurs, nous avons inclus un bloc <code>.catch()</code> sur notre appel <code>displayContent()</code> ; cela permettra de gérer les erreurs survenant dans les deux fonctions.</p>
 
 <div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Il est également possible d'utiliser un bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause">finally</a></code> au sein d'une fonction asynchrone, à la place d'un bloc asynchrone <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code>, pour montrer un état final sur le déroulement de l'opération — vous pouvez voir cela en action dans notre <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">exemple en direct</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">code source</a>).</p>
+  <p><strong>Note :</strong> Il est également possible d'utiliser un bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause">finally</a></code> au sein d'une fonction asynchrone, à la place d'un bloc asynchrone <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code>, pour montrer un état final sur le déroulement de l'opération — vous pouvez voir cela en action dans notre <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">exemple en direct</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">code source</a>).</p>
 </div>
 
 <h2 id="handling_asyncawait_slowdown">Gérer les ralentissements potentiellement causés par async/await</h2>
diff --git a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html b/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html
index 0e44c87232..0b71c56c49 100644
--- a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html
+++ b/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html
@@ -21,9 +21,9 @@ translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
 
 <div>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div>
 
-<p class="summary">Pour terminer ce module, nous vous proposons une brève discussion sur les différentes techniques et fonctionnalités asynchrones abordées tout au long de ce module, en examinant laquelle de ces techniques est la plus pertinente en fonction de la situation ainsi que des recommandations et des rappels des pièges courants le cas échéant.</p>
+<p>Pour terminer ce module, nous vous proposons une brève discussion sur les différentes techniques et fonctionnalités asynchrones abordées tout au long de ce module, en examinant laquelle de ces techniques est la plus pertinente en fonction de la situation ainsi que des recommandations et des rappels des pièges courants le cas échéant.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
   <tbody>
     <tr>
       <th scope="row">Prérequis :</th>
diff --git a/files/fr/learn/javascript/asynchronous/concepts/index.html b/files/fr/learn/javascript/asynchronous/concepts/index.html
index ebcb242eae..ee10969b47 100644
--- a/files/fr/learn/javascript/asynchronous/concepts/index.html
+++ b/files/fr/learn/javascript/asynchronous/concepts/index.html
@@ -12,9 +12,9 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts
 ---
 <div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
 
-<p class="summary">Dans cet article, nous allons passer en revue un certain nombre de concepts importants relatifs à la programmation asynchrone et à la façon dont elle se présente dans les navigateurs web et JavaScript. Vous devriez comprendre ces concepts avant de travailler sur les autres articles du module.</p>
+<p>Dans cet article, nous allons passer en revue un certain nombre de concepts importants relatifs à la programmation asynchrone et à la façon dont elle se présente dans les navigateurs web et JavaScript. Vous devriez comprendre ces concepts avant de travailler sur les autres articles du module.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
   <tbody>
     <tr>
       <th scope="row">Prérequis :</th>
@@ -33,7 +33,7 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts
 
 <p>Les utilisatrices et utilisateurs de macOS, par exemple, le voient parfois avec le curseur rotatif de couleur arc-en-ciel (ou « ballon de plage », comme on l'appelle souvent). Ce curseur est la façon dont le système d'exploitation dit "le programme que vous utilisez actuellement a dû s'arrêter et attendre que quelque chose se termine, et cela prend tellement de temps que je craignais que vous vous demandiez ce qui se passe".</p>
 
-<p><img alt="Spinner multicolore pour macOS avec ballon de plage." src="beachball.jpg" style="display: block; float: left; margin: 0px 30px 0px 0px;"></p>
+<p><img alt="Spinner multicolore pour macOS avec ballon de plage." src="beachball.jpg"></p>
 
 
 <p>C'est une expérience frustrante qui n'est pas une bonne utilisation de la puissance de traitement de l'ordinateur, surtout à une époque où les ordinateurs disposent de plusieurs cœurs de processeur. Il est inutile de rester assis à attendre quelque chose alors que vous pouvez laisser une tâche se dérouler sur un autre cœur de processeur et être averti quand elle a terminé. Cela vous permet d'effectuer d'autres travaux en même temps, ce qui est la base de la <strong>programmation asynchrone</strong>. C'est à l'environnement de programmation que vous utilisez (les navigateurs web, dans le cas du développement web) de vous fournir des API qui vous permettent d'exécuter de telles tâches de manière asynchrone.</p>
@@ -63,9 +63,8 @@ btn.addEventListener('click', () =&gt; {
 
 <p>Lorsque vous exécutez l'exemple, ouvrez votre console JavaScript, puis cliquez sur le bouton. Vous remarquerez que le paragraphe n'apparaît qu'une fois que le calcul des dates est terminé et que le message de la console a été enregistré. Le code s'exécute dans l'ordre où il apparaît dans la source, et la dernière opération ne s'exécute pas tant que la première n'est pas terminée.</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>L'exemple précédent est très peu réaliste. Vous ne calculeriez jamais 10 millions de dates sur une véritable application web ! Il sert cependant à vous donner l'idée de base.</p>
+<div class="note">
+  <p><strong>Note :</strong> L'exemple précédent est très peu réaliste. Vous ne calculeriez jamais 10 millions de dates sur une véritable application web ! Il sert cependant à vous donner l'idée de base.</p>
 </div>
 
 <p>Dans notre deuxième exemple, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">voir en direct</a>), nous simulons quelque chose de légèrement plus réaliste que vous pourriez rencontrer sur une page réelle. Nous bloquons l'interactivité de l'utilisateur avec le rendu de l'interface utilisateur. Dans cet exemple, nous avons deux boutons :</p>
@@ -92,9 +91,8 @@ alertBtn.addEventListener('click', () =&gt;
 
 <p>Si vous cliquez sur le premier bouton, puis rapidement sur le second, vous verrez que l'alerte n'apparaît pas avant que les cercles aient fini d'être rendus. La première opération bloque la seconde jusqu'à ce qu'elle ait fini de s'exécuter.</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>D'accord, dans notre cas, c'est laid et nous simulons l'effet de blocage, mais il s'agit d'un problème courant contre lequel les développeuses et développeurs d'applications réelles se battent sans cesse pour atténuer les impacts indésirables.</p>
+<div class="note">
+  <p><strong>Note :</strong> D'accord, dans notre cas, c'est laid et nous simulons l'effet de blocage, mais il s'agit d'un problème courant contre lequel les développeuses et développeurs d'applications réelles se battent sans cesse pour atténuer les impacts indésirables.</p>
 </div>
 
 <p>Pourquoi ? La réponse est que JavaScript, de manière générale, ne s'exécute que sur <strong>un seul <i>thread</i></strong>. À ce stade, nous devons introduire le concept de <strong><i>threads</i></strong>.</p>
diff --git a/files/fr/learn/javascript/asynchronous/index.html b/files/fr/learn/javascript/asynchronous/index.html
index 31e2c8bfbe..0688d5de42 100644
--- a/files/fr/learn/javascript/asynchronous/index.html
+++ b/files/fr/learn/javascript/asynchronous/index.html
@@ -19,12 +19,12 @@ translation_of: Learn/JavaScript/Asynchronous
 ---
 <div>{{LearnSidebar}}</div>
 
-<p class="summary">Dans ce module, nous examinons le <a href="/fr/docs/Glossary/JavaScript">JavaScript</a> <a href="/fr/docs/Glossary/Asynchronous">asynchrone</a>, pourquoi il est important et comment il peut être utilisé afin de gérer efficacement les opérations potentiellement bloquantes telles que la récupération de ressources sur un serveur.</p>
+<p>Dans ce module, nous examinons le <a href="/fr/docs/Glossary/JavaScript">JavaScript</a> <a href="/fr/docs/Glossary/Asynchronous">asynchrone</a>, pourquoi il est important et comment il peut être utilisé afin de gérer efficacement les opérations potentiellement bloquantes telles que la récupération de ressources sur un serveur.</p>
 
 <div class="callout">
-  <h4 id="looking_to_become_a_front-end_web_developer">Vous cherchez à devenir une développeuse ou un développeur web front-end ?</h4>
+  <p>Vous cherchez à devenir une développeuse ou un développeur web front-end ?</p>
   <p>Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p>
-  <p><a class="button primary" href="/fr/docs/Learn/Front-end_web_developer">Commencer</a>
+  <p><a href="/fr/docs/Learn/Front-end_web_developer">Commencer</a>
   </p>
 </div>
 
@@ -35,8 +35,7 @@ translation_of: Learn/JavaScript/Asynchronous
 <p>Si vous n'êtes pas familier avec le concept de programmation asynchrone, vous devriez absolument commencer par l'article <a href="/fr/docs/Learn/JavaScript/Asynchronous/Concepts">Concepts généraux de programmation asynchrone</a> de ce module. Si vous connaissez ce concept, vous pouvez probablement passer directement au module <a href="/fr/docs/Learn/JavaScript/Asynchronous/Introducing">Introduction au JavaScript asynchrone</a>.</p>
 
 <div class="note">
-  <p><b>Note :</b></p>
-  <p>Si vous travaillez sur un ordinateur/tablette/autre appareil 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 codage en ligne tel que <a href="https://jsbin.com/">JSBin</a> ou <a href="https://glitch.com">Glitch</a>.</p>
+  <p><strong>Note :</strong> Si vous travaillez sur un ordinateur/tablette/autre appareil 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 codage en ligne tel que <a href="https://jsbin.com/">JSBin</a> ou <a href="https://glitch.com">Glitch</a>.</p>
 </div>
 
 <h2 id="guides">Guides</h2>
diff --git a/files/fr/learn/javascript/asynchronous/introducing/index.html b/files/fr/learn/javascript/asynchronous/introducing/index.html
index b58da5b180..1a352017dd 100644
--- a/files/fr/learn/javascript/asynchronous/introducing/index.html
+++ b/files/fr/learn/javascript/asynchronous/introducing/index.html
@@ -19,9 +19,9 @@ translation_of: Learn/JavaScript/Asynchronous/Introducing
 
 <div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}</div>
 
-<p class="summary">Dans cet article, nous récapitulons brièvement les problèmes associés au JavaScript synchrone, et nous jetons un premier coup d'œil à certaines des différentes techniques asynchrones que vous rencontrerez, en montrant comment elles peuvent nous aider à résoudre ces problèmes.</p>
+<p>Dans cet article, nous récapitulons brièvement les problèmes associés au JavaScript synchrone, et nous jetons un premier coup d'œil à certaines des différentes techniques asynchrones que vous rencontrerez, en montrant comment elles peuvent nous aider à résoudre ces problèmes.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
   <tbody>
     <tr>
       <th scope="row">Prérequis :</th>
@@ -68,15 +68,12 @@ btn.addEventListener('click', () =&gt; {
 
 <p>Ainsi, dans l'exemple ci-dessus, après avoir cliqué sur le bouton, le paragraphe n'apparaîtra qu'après avoir appuyé sur le bouton OK dans la boîte d'alerte. Vous pouvez l'essayer vous-même :</p>
 
-<div class="hidden">
-  <pre class="brush: html">&lt;<span class="pl-ent">button</span>&gt;Cliquez sur moi&lt;/<span class="pl-ent">button</span>&gt;</pre>
-</div>
+<pre class="brush: html hidden">&lt;button&gt;Cliquez sur moi&lt;/button&gt;</pre>
 
 <p>{{EmbedLiveSample('synchronous_javascript', '100%', '110px')}}</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Il est important de se rappeler que <code><a href="/fr/docs/Web/API/Window/alert">alert()</a></code>, tout en étant très utile pour démontrer une opération de blocage synchrone, est horrible à utiliser dans des applications du monde réel.</p>
+<div class="note">
+  <p><strong>Note :</strong> Il est important de se rappeler que <code><a href="/fr/docs/Web/API/Window/alert">alert()</a></code>, tout en étant très utile pour démontrer une opération de blocage synchrone, est horrible à utiliser dans des applications du monde réel.</p>
 </div>
 
 <h2 id="asynchronous_javascript">JavaScript asynchrone</h2>
@@ -162,9 +159,8 @@ gods.forEach(function (eachName, index){
   console.log('Problème de récupération : ' + err.message);
 });</pre>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Vous pouvez trouver la version finale sur GitHub (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js">voir la source ici</a>, et aussi <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/">voir le fonctionnement en direct</a>).</p>
+<div class="note">
+  <p><strong>Note :</strong> Vous pouvez trouver la version finale sur GitHub (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js">voir la source ici</a>, et aussi <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/">voir le fonctionnement en direct</a>).</p>
 </div>
 
 <p>Nous voyons ici <code>fetch()</code> prendre un seul paramètre - l'URL d'une ressource que vous souhaitez récupérer sur le réseau - et renvoyer une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">promesse</a>. La promesse est un objet représentant l'achèvement ou l'échec de l'opération asynchrone. Elle représente un état intermédiaire, en quelque sorte. En substance, c'est la façon dont le navigateur dit « Je promets de vous donner la réponse dès que possible », d'où le nom de « promesse ».</p>
@@ -176,9 +172,8 @@ gods.forEach(function (eachName, index){
   <li>Le bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch">catch()</a></code> à la fin s'exécute si l'un des blocs <code>.then()</code> échoue - de manière similaire aux blocs synchrones <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/try...catch" >try...catch</a></code>, un objet d'erreur est mis à disposition à l'intérieur du <code>catch()</code>, qui peut être utilisé pour signaler le type d'erreur qui s'est produit. Notez cependant que le <code>try...catch</code> synchrone ne fonctionnera pas avec les promesses, bien qu'il fonctionne avec <a href="/fr/docs/Learn/JavaScript/Asynchronous/Async_await">async/await</a>, comme vous l'apprendrez plus tard.</li>
 </ul>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Vous en apprendrez beaucoup plus sur les promesses plus tard dans le module, alors ne vous inquiétez pas si vous ne les comprenez pas encore complètement.</p>
+<div class="note">
+  <p><strong>Note :</strong> Vous en apprendrez beaucoup plus sur les promesses plus tard dans le module, alors ne vous inquiétez pas si vous ne les comprenez pas encore complètement.</p>
 </div>
 
 <h3 id="the_event_queue">La file d'attente des événements</h3>
@@ -255,18 +250,16 @@ console.log(`Tout est bon !`);</pre>
 
 <p>Cela est dû au fait qu'au moment où le navigateur tente d'exécuter la troisième instruction <code>console.log()</code>, le bloc <code>fetch()</code> n'a pas fini de s'exécuter, de sorte que la variable <code>image</code> n'a pas reçu de valeur.</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Pour des raisons de sécurité, vous ne pouvez pas <code>fetch()</code> les fichiers de votre système de fichiers local (ou exécuter d'autres opérations de ce type localement) ; pour exécuter l'exemple ci-dessus localement, vous devrez le faire passer par un <a href="/fr/docs/Learn/Common_questions/set_up_a_local_testing_server">serveur web local</a>.</p>
+<div class="note">
+  <p><strong>Note :</strong> Pour des raisons de sécurité, vous ne pouvez pas <code>fetch()</code> les fichiers de votre système de fichiers local (ou exécuter d'autres opérations de ce type localement) ; pour exécuter l'exemple ci-dessus localement, vous devrez le faire passer par un <a href="/fr/docs/Learn/Common_questions/set_up_a_local_testing_server">serveur web local</a>.</p>
 </div>
 
 <h2 id="active_learning_make_it_all_async!">Apprentissage actif : rendez tout asynchrone !</h2>
 
 <p>Pour corriger l'exemple problématique de <code>fetch()</code> et faire en sorte que les trois déclarations <code>console.log()</code> apparaissent dans l'ordre souhaité, vous pourriez faire en sorte que la troisième déclaration <code>console.log()</code> s'exécute également de manière asynchrone. Cela peut être fait en la déplaçant à l'intérieur d'un autre bloc <code>.then()</code> enchaîné à la fin du deuxième, ou en la déplaçant à l'intérieur du deuxième bloc <code>then()</code>. Essayez de corriger cela maintenant.</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Si vous êtes bloqué, vous pouvez <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync-fixed.html">trouver une réponse ici</a> (voyez-la fonctionner <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync-fixed.html">en direct</a>). Vous pouvez également trouver beaucoup plus d'informations sur les promesses dans notre guide <a href="/fr/docs/Learn/JavaScript/Asynchronous/Promises">Gérer les opérations asynchrones avec élégance grâce aux Promesses</a>, plus loin dans ce module.</p>
+<div class="note">
+  <p><strong>Note :</strong> Si vous êtes bloqué, vous pouvez <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync-fixed.html">trouver une réponse ici</a> (voyez-la fonctionner <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync-fixed.html">en direct</a>). Vous pouvez également trouver beaucoup plus d'informations sur les promesses dans notre guide <a href="/fr/docs/Learn/JavaScript/Asynchronous/Promises">Gérer les opérations asynchrones avec élégance grâce aux Promesses</a>, plus loin dans ce module.</p>
 </div>
 
 <h2 id="conclusion">Conclusion</h2>
diff --git a/files/fr/learn/javascript/asynchronous/promises/index.html b/files/fr/learn/javascript/asynchronous/promises/index.html
index 499dcb87be..69f6de6a21 100644
--- a/files/fr/learn/javascript/asynchronous/promises/index.html
+++ b/files/fr/learn/javascript/asynchronous/promises/index.html
@@ -19,9 +19,9 @@ translation_of: Learn/JavaScript/Asynchronous/Promises
 
 <div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div>
 
-<p class="summary"><strong>Les promesses</strong> sont une fonctionnalité relativement nouvelle du langage JavaScript qui vous permet de reporter d'autres actions jusqu'à ce qu'une action précédente soit terminée, ou de répondre à son échec. Ceci est utile pour mettre en place une séquence d'opérations asynchrones afin qu'elles fonctionnent correctement. Cet article vous montre comment les promesses fonctionnent, comment vous les verrez utilisées avec les API Web, et comment écrire les vôtres.</p>
+<p><strong>Les promesses</strong> sont une fonctionnalité relativement nouvelle du langage JavaScript qui vous permet de reporter d'autres actions jusqu'à ce qu'une action précédente soit terminée, ou de répondre à son échec. Ceci est utile pour mettre en place une séquence d'opérations asynchrones afin qu'elles fonctionnent correctement. Cet article vous montre comment les promesses fonctionnent, comment vous les verrez utilisées avec les API Web, et comment écrire les vôtres.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
   <tbody>
     <tr>
       <th scope="row">Prérequis :</th>
@@ -69,9 +69,8 @@ translation_of: Learn/JavaScript/Asynchronous/Promises
 
 <p>La chose importante ici est que l'appel <code>getUserMedia()</code> revient presque immédiatement, même si le flux de la caméra n'a pas encore été obtenu. Même si la fonction <code>handleCallButton()</code> est déjà retournée au code qui l'a appelée, lorsque <code>getUserMedia()</code> a fini de travailler, elle appelle le gestionnaire que vous fournissez. Tant que l'application ne suppose pas que le flux a commencé, elle peut continuer à fonctionner.</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Vous pouvez en apprendre davantage sur ce sujet quelque peu avancé, si cela vous intéresse, dans l'article <a href="/fr/docs/Web/API/WebRTC_API/Signaling_and_video_calling">L'essentiel du WebRTC</a>. Un code similaire à celui-ci, mais beaucoup plus complet, est utilisé dans cet exemple.</p>
+<div class="note">
+  <p><strong>Note :</strong> Vous pouvez en apprendre davantage sur ce sujet quelque peu avancé, si cela vous intéresse, dans l'article <a href="/fr/docs/Web/API/WebRTC_API/Signaling_and_video_calling">L'essentiel du WebRTC</a>. Un code similaire à celui-ci, mais beaucoup plus complet, est utilisé dans cet exemple.</p>
 </div>
 
 <h2 id="the_trouble_with_callbacks">Le problème des fonctions de rappel</h2>
@@ -146,9 +145,8 @@ translation_of: Learn/JavaScript/Asynchronous/Promises
 
 <p>Cependant, la lecture n'est pas aussi facile et cette syntaxe peut ne pas être utilisable si vos blocs sont plus complexes que ce que nous avons montré ici.</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Vous pouvez apporter d'autres améliorations avec la syntaxe <code>async</code>/<code>await</code>, que nous aborderons dans le prochain article.</p>
+<div class="note">
+  <p><strong>Note :</strong> Vous pouvez apporter d'autres améliorations avec la syntaxe <code>async</code>/<code>await</code>, que nous aborderons dans le prochain article.</p>
 </div>
 
 <p>Dans leur forme la plus basique, les promesses sont similaires aux écouteurs d'événements, mais avec quelques différences :</p>
@@ -164,9 +162,8 @@ translation_of: Learn/JavaScript/Asynchronous/Promises
 
 <p>Dans le premier exemple, nous allons utiliser la méthode <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch"><code>fetch()</code></a> pour récupérer une image sur le web, la méthode <a href="/fr/docs/Web/API/Body/blob"><code>blob()</code></a> pour transformer le contenu brut du corps de la réponse fetch en un objet <a href="/fr/docs/Web/API/Blob"><code>Blob</code></a>, puis afficher ce blob à l'intérieur d'un élément <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>. Cet exemple est très similaire à celui que nous avons examiné dans le <a href="/fr/docs/Learn/JavaScript/Asynchronous/Introducing#asynchronous_javascript">premier article</a>, mais nous le ferons un peu différemment au fur et à mesure que nous vous ferons construire votre propre code basé sur des promesses.</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>L'exemple suivant ne fonctionnera pas si vous l'exécutez directement à partir du fichier (c'est-à-dire via une URL <code>file://</code>). Vous devez l'exécuter via un <a href="/fr/docs/Learn/Common_questions/set_up_a_local_testing_server">serveur de test local</a>, ou utiliser une solution en ligne telle que <a href="https://glitch.com/">Glitch</a> ou <a href="/fr/docs/Learn/Common_questions/Using_Github_pages">les pages GitHub</a>.</p>
+<div class="note">
+  <p><strong>Note :</strong> L'exemple suivant ne fonctionnera pas si vous l'exécutez directement à partir du fichier (c'est-à-dire via une URL <code>file://</code>). Vous devez l'exécuter via un <a href="/fr/docs/Learn/Common_questions/set_up_a_local_testing_server">serveur de test local</a>, ou utiliser une solution en ligne telle que <a href="https://glitch.com/">Glitch</a> ou <a href="/fr/docs/Learn/Common_questions/Using_Github_pages">les pages GitHub</a>.</p>
 </div>
 
 <ol>
@@ -183,9 +180,8 @@ translation_of: Learn/JavaScript/Asynchronous/Promises
   </li>
   <li>
     <p>Pour répondre à l'achèvement réussi de l'opération lorsque cela se produit (dans ce cas, lorsqu'une <a href="/fr/docs/Web/API/Response">réponse</a> est retournée), nous invoquons la méthode <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/then"><code>.then()</code></a> de l'objet promesse. La fonction de rappel à l'intérieur du bloc <code>.then()</code> s'exécute uniquement lorsque l'appel de la promesse se termine avec succès et retourne l'objet <a href="/fr/docs/Web/API/Response"><code>Response</code></a> — en langage de promesse, lorsqu'elle a été <strong>remplie</strong> (<i>fullfilled</i> en anglais). On lui passe l'objet <a href="/fr/docs/Web/API/Response"><code>Response</code></a> retourné en tant que paramètre.</p>
-    <div class="notecard note">
-      <p><b>Note :</b></p>
-      <p>Le fonctionnement d'un bloc <code>.then()</code> est similaire à celui de l'ajout d'un écouteur d'événements à un objet à l'aide de <code>AddEventListener()</code>. Il ne s'exécute pas avant qu'un événement ne se produise (lorsque la promesse se réalise). La différence la plus notable est qu'un <code>.then()</code> ne s'exécutera qu'une fois à chaque fois qu'il sera utilisé, alors qu'un écouteur d'événements pourrait être invoqué plusieurs fois.</p>
+    <div class="note">
+      <p><strong>Note :</strong> Le fonctionnement d'un bloc <code>.then()</code> est similaire à celui de l'ajout d'un écouteur d'événements à un objet à l'aide de <code>AddEventListener()</code>. Il ne s'exécute pas avant qu'un événement ne se produise (lorsque la promesse se réalise). La différence la plus notable est qu'un <code>.then()</code> ne s'exécutera qu'une fois à chaque fois qu'il sera utilisé, alors qu'un écouteur d'événements pourrait être invoqué plusieurs fois.</p>
     </div>
     <p>Nous exécutons immédiatement la méthode <code>blob()</code> sur cette réponse pour nous assurer que le corps de la réponse est entièrement téléchargé, et lorsqu'il est disponible, le transformer en un objet <code>Blob</code> avec lequel nous pouvons faire quelque chose. Le résultat de cette méthode est retourné comme suit :</p>
     <pre class="brush: js">response =&gt; response.blob()</pre>
@@ -220,9 +216,8 @@ document.body.appendChild(image);</pre>
 
 <p>Si vous enregistrez le fichier HTML que vous venez de créer et le chargez dans votre navigateur, vous verrez que l'image s'affiche dans la page comme prévu. Bon travail !</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Vous remarquerez probablement que ces exemples sont quelque peu artificiels. Vous pourriez tout simplement vous passer de toute la chaîne <code>fetch()</code> et <code>blob()</code>, et simplement créer un élément <code>&lt;img&gt;</code> et définir la valeur de son attribut <code>src</code> à l'URL du fichier image, <code>coffee.jpg</code>. Nous avons toutefois choisi cet exemple parce qu'il démontre les promesses d'une manière simple et agréable, plutôt que pour sa pertinence dans le monde réel.</p>
+<div class="note">
+  <p><strong>Note :</strong> Vous remarquerez probablement que ces exemples sont quelque peu artificiels. Vous pourriez tout simplement vous passer de toute la chaîne <code>fetch()</code> et <code>blob()</code>, et simplement créer un élément <code>&lt;img&gt;</code> et définir la valeur de son attribut <code>src</code> à l'URL du fichier image, <code>coffee.jpg</code>. Nous avons toutefois choisi cet exemple parce qu'il démontre les promesses d'une manière simple et agréable, plutôt que pour sa pertinence dans le monde réel.</p>
 </div>
 
 <h3 id="responding_to_failure">Réagir à un échec</h3>
@@ -237,9 +232,8 @@ document.body.appendChild(image);</pre>
 
 <p>Cela ne fait pas beaucoup plus que si vous ne preniez pas la peine d'inclure le bloc <code>.catch()</code> du tout, mais pensez-y - cela nous permet de contrôler la gestion des erreurs exactement comme nous le voulons. Dans une application réelle, votre bloc <code>.catch()</code> pourrait réessayer de récupérer l'image, ou afficher une image par défaut, ou demander à l'utilisateur de fournir une URL d'image différente, ou autre.</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Vous pouvez voir <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch.html">notre version de l'exemple en direct</a> (voir également son <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch.html">code source</a>).</p>
+<div class="note">
+  <p><strong>Note :</strong> Vous pouvez voir <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch.html">notre version de l'exemple en direct</a> (voir également son <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch.html">code source</a>).</p>
 </div>
 
 <h3 id="chaining_the_blocks_together">Enchaîner les blocs</h3>
@@ -266,9 +260,8 @@ document.body.appendChild(image);</pre>
 
 <p>Gardez à l'esprit que la valeur renvoyée par une promesse remplie devient le paramètre transmis à la fonction de rappel du bloc <code>.then()</code> suivant.</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Les blocs <code>.then()</code>/<code>.catch()</code> dans les promesses sont essentiellement l'équivalent asynchrone d'un bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> dans du code synchrone. Gardez à l'esprit que le <code>try...catch</code> synchrone ne fonctionnera pas dans du code asynchrone.</p>
+<div class="note">
+  <p><strong>Note :</strong> Les blocs <code>.then()</code>/<code>.catch()</code> dans les promesses sont essentiellement l'équivalent asynchrone d'un bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> dans du code synchrone. Gardez à l'esprit que le <code>try...catch</code> synchrone ne fonctionnera pas dans du code asynchrone.</p>
 </div>
 
 <h2 id="promise_terminology_recap">Récapitulatif de la terminologie des promesses</h2>
@@ -394,14 +387,12 @@ document.body.appendChild(para);</pre>
 
 <p>Le code que nous avons fourni ici pour l'affichage des articles est assez rudimentaire, mais il fonctionne comme une explication pour le moment.</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Si vous êtes bloqué, vous pouvez comparer votre version du code à la nôtre, pour voir à quoi elle est censée ressembler - <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">voir en direct</a>, et voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">code source</a>.</p>
+<div class="note">
+  <p><strong>Note :</strong> Si vous êtes bloqué, vous pouvez comparer votre version du code à la nôtre, pour voir à quoi elle est censée ressembler - <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">voir en direct</a>, et voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">code source</a>.</p>
 </div>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Si vous amélioriez ce code, vous pourriez vouloir boucler sur une liste d'éléments à afficher, en récupérant et en décodant chacun d'eux, puis boucler sur les résultats à l'intérieur de <code>Promise.all()</code>, en exécutant une fonction différente pour afficher chacun d'eux en fonction du type de code. Cela permettrait de fonctionner pour n'importe quel nombre d'éléments, pas seulement trois.</p>
+<div class="note">
+  <p><strong>Note :</strong> Si vous amélioriez ce code, vous pourriez vouloir boucler sur une liste d'éléments à afficher, en récupérant et en décodant chacun d'eux, puis boucler sur les résultats à l'intérieur de <code>Promise.all()</code>, en exécutant une fonction différente pour afficher chacun d'eux en fonction du type de code. Cela permettrait de fonctionner pour n'importe quel nombre d'éléments, pas seulement trois.</p>
   <p>De plus, vous pourriez déterminer quel est le type de fichier récupéré sans avoir besoin d'une propriété <code>type</code> explicite. Vous pourriez, par exemple, vérifier l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code></a> de la réponse dans chaque cas en utilisant <a href="/fr/docs/Web/API/Headers/get"><code>response.headers.get("content-type")</code></a>, puis agir en conséquence.</p>
 </div>
 
@@ -456,9 +447,8 @@ document.body.appendChild(para);</pre>
 
 <p>Cela permet d'envoyer un simple message à la console pour nous dire quand chaque tentative de récupération est terminée.</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p><code>then()</code>/<code>catch()</code>/<code>finally()</code> est l'équivalent asynchrone de <code>try</code>/<code>catch</code>/<code>finally</code> en code synchrone.</p>
+<div class="note">
+  <p><strong>Note :</strong> <code>then()</code>/<code>catch()</code>/<code>finally()</code> est l'équivalent asynchrone de <code>try</code>/<code>catch</code>/<code>finally</code> en code synchrone.</p>
 </div>
 
 <h2 id="building_your_own_custom_promises">Construire vos propres promesses personnalisées</h2>
@@ -496,9 +486,8 @@ document.body.appendChild(para);</pre>
 
 <p>L'exemple ci-dessus n'est pas très flexible - la promesse ne peut jamais s'accomplir qu'avec une seule chaîne de caractères, et elle n'a aucune sorte de condition <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject"><code>reject()</code></a> spécifiée (il est vrai que <code>setTimeout()</code> n'a pas vraiment de condition d'échec, donc cela n'a pas d'importance pour cet exemple).</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Pourquoi <code>resolve()</code>, et pas <code>fulfill()</code> ? La réponse que nous vous donnerons, pour l'instant, est <em>c'est compliqué</em>.</p>
+<div class="note">
+  <p><strong>Note :</strong> Pourquoi <code>resolve()</code>, et pas <code>fulfill()</code> ? La réponse que nous vous donnerons, pour l'instant, est <em>c'est compliqué</em>.</p>
 </div>
 
 <h3 id="rejecting_a_custom_promise">Rejeter une promesse personnalisée</h3>
@@ -545,9 +534,8 @@ document.body.appendChild(para);</pre>
 
 <p>Lorsque vous enregistrez et exécutez le code tel quel, après une seconde, vous obtiendrez le message d'alerte. Essayez maintenant de définir le message sur une chaîne vide ou l'intervalle sur un nombre négatif, par exemple, et vous pourrez voir la promesse rejetée avec les messages d'erreur appropriés ! Vous pouvez également essayer de faire autre chose avec le message résolu plutôt que de simplement créer une alerte.</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Vous pouvez trouver notre version de cet exemple sur GitHub sur <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/custom-promise2.html">custom-promise2.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise2.html">code source</a>).</p>
+<div class="note">
+  <p><strong>Note :</strong> Vous pouvez trouver notre version de cet exemple sur GitHub sur <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/custom-promise2.html">custom-promise2.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise2.html">code source</a>).</p>
 </div>
 
 <h3 id="a_more_real-world_example">Un exemple plus concret</h3>
diff --git a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html
index c776e4773b..e2f90a12fb 100644
--- a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html
+++ b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html
@@ -20,9 +20,9 @@ translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
 
 <div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
 
-<p class="summary">Ce tutoriel présente les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période de temps déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), discute de leur utilité et examine leurs problèmes inhérents.</p>
+<p>Ce tutoriel présente les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période de temps déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), discute de leur utilité et examine leurs problèmes inhérents.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
   <tbody>
     <tr>
       <th scope="row">Prérequis :</th>
@@ -66,9 +66,8 @@ translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
   <li>Zéro ou plusieurs valeurs représentant les paramètres que vous souhaitez transmettre à la fonction lors de son exécution.</li>
 </ul>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>La quantité de temps spécifiée (ou le délai) n'est <strong>pas</strong> le <em>temps garanti</em> à l'exécution, mais plutôt le <em>temps minimum</em> à l'exécution. Les rappels que vous passez à ces fonctions ne peuvent pas s'exécuter tant que la pile du processus principal n'est pas vide.</p>
+<div class="note">
+  <p><strong>Note :</strong> La quantité de temps spécifiée (ou le délai) n'est <strong>pas</strong> le <em>temps garanti</em> à l'exécution, mais plutôt le <em>temps minimum</em> à l'exécution. Les rappels que vous passez à ces fonctions ne peuvent pas s'exécuter tant que la pile du processus principal n'est pas vide.</p>
   <p>En conséquence, un code comme <code>setTimeout(fn, 0)</code> s'exécutera dès que la pile sera vide, <strong>pas</strong> immédiatement. Si vous exécutez un code comme <code>setTimeout(fn, 0)</code> mais qu'immédiatement après vous exécutez une boucle qui compte de 1 à 10 milliards, votre rappel sera exécuté après quelques secondes.</p>
 </div>
 
@@ -116,9 +115,8 @@ let maSalutation = setTimeout(direBonjour, 2000);</pre>
 
 <pre class="brush: js">clearTimeout(maSalutation);</pre>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Voir <code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> pour une démo un peu plus élaborée qui permet de définir le nom de la personne à saluer dans un formulaire, et d'annuler la salutation à l'aide d'un bouton séparé (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">voir aussi le code source</a>).</p>
+<div class="note">
+  <p><strong>Note :</strong> Voir <code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> pour une démo un peu plus élaborée qui permet de définir le nom de la personne à saluer dans un formulaire, et d'annuler la salutation à l'aide d'un bouton séparé (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">voir aussi le code source</a>).</p>
 </div>
 
 <h2 id="setinterval">setInterval()</h2>
@@ -179,9 +177,8 @@ clearInterval(myInterval);</pre>
   <li>Vous devriez probablement désactiver le bouton de démarrage après l'avoir pressé une fois, et le réactiver après l'avoir arrêté/réinitialisé. Sinon, les pressions multiples sur le bouton de démarrage appliqueront plusieurs <code>setInterval()</code> à l'horloge, ce qui entraînera un comportement erroné.</li>
 </ul>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Si vous êtes bloqué, vous pouvez <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">trouver notre version ici</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">code source</a>).</p>
+<div class="note">
+  <p><strong>Note :</strong> Si vous êtes bloqué, vous pouvez <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">trouver notre version ici</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">code source</a>).</p>
 </div>
 
 <h2 id="things_to_keep_in_mind_about_settimeout_and_setinterval">Choses à garder à l'esprit concernant setTimeout() et setInterval()</h2>
@@ -251,9 +248,8 @@ alert('Hello');</pre>
 
 <p>(<a href="http://creativejs.com/resources/requestanimationframe/index.html">Plus d'informations à ce sujet sur CreativeJS</a> <small>(en)</small>.)</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Vous trouverez des exemples d'utilisation de <code>requestAnimationFrame()</code> ailleurs dans le cours - voir par exemple <a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a>, et <a href="/fr/docs/Learn/JavaScript/Objects/Object_building_practice">La construction d'objet en pratique</a>.</p>
+<div class="note">
+  <p><strong>Note :</strong> Vous trouverez des exemples d'utilisation de <code>requestAnimationFrame()</code> ailleurs dans le cours - voir par exemple <a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a>, et <a href="/fr/docs/Learn/JavaScript/Objects/Object_building_practice">La construction d'objet en pratique</a>.</p>
 </div>
 
 <p>La méthode prend comme argument un rappel à invoquer avant le repeignage. C'est le modèle général dans lequel vous le verrez utilisé :</p>
@@ -267,9 +263,8 @@ draw();</pre>
 
 <p>L'idée est de définir une fonction dans laquelle votre animation est mise à jour (par exemple, vos sprites sont déplacés, le score est mis à jour, les données sont rafraîchies, ou autre). Ensuite, vous l'appelez pour lancer le processus. À la fin du bloc de fonctions, vous appelez <code>requestAnimationFrame()</code> avec la référence de la fonction passée en paramètre, et cela indique au navigateur de rappeler la fonction lors du prochain rafraîchissement de l'affichage. Ceci est ensuite exécuté en continu, car le code appelle <code>requestAnimationFrame()</code> de manière récursive.</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Si vous souhaitez réaliser une sorte d'animation DOM simple et constante, <a href="/fr/docs/Web/CSS/CSS_Animations">les animations CSS</a> sont probablement plus rapides. Elles sont calculées directement par le code interne du navigateur, plutôt que par JavaScript.</p>
+<div class="note">
+  <p><strong>Note :</strong> Si vous souhaitez réaliser une sorte d'animation DOM simple et constante, <a href="/fr/docs/Web/CSS/CSS_Animations">les animations CSS</a> sont probablement plus rapides. Elles sont calculées directement par le code interne du navigateur, plutôt que par JavaScript.</p>
   <p>Si, toutefois, vous faites quelque chose de plus complexe et impliquant des objets qui ne sont pas directement accessibles à l'intérieur du DOM (comme les objets <a href="/fr/docs/Web/API/Canvas_API">2D Canvas API</a> ou <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>), <code>requestAnimationFrame()</code> est la meilleure option dans la plupart des cas.</p>
 </div>
 
@@ -338,9 +333,8 @@ draw();</pre>
 
 <p>Assez avec la théorie ! Construisons votre propre exemple personnel de <code>requestAnimationFrame()</code>. Vous allez créer une simple "animation de toupie" - le genre que vous pourriez voir affiché dans une application lorsqu'elle est occupée à se connecter au serveur, etc.</p>
 
-<div class="notecard note">
-  <p><b>Note: </b></p>
-  <p>Dans un exemple du monde réel, vous devriez probablement utiliser des animations CSS pour exécuter ce type d'animation simple. Cependant, ce genre d'exemple est très utile pour démontrer l'utilisation de <code>requestAnimationFrame()</code>, et vous seriez plus susceptible d'utiliser ce genre de technique lorsque vous faites quelque chose de plus complexe comme la mise à jour de l'affichage d'un jeu à chaque image.</p>
+<div class="note">
+  <p><strong>Note :</strong> Dans un exemple du monde réel, vous devriez probablement utiliser des animations CSS pour exécuter ce type d'animation simple. Cependant, ce genre d'exemple est très utile pour démontrer l'utilisation de <code>requestAnimationFrame()</code>, et vous seriez plus susceptible d'utiliser ce genre de technique lorsque vous faites quelque chose de plus complexe comme la mise à jour de l'affichage d'un jeu à chaque image.</p>
 </div>
 
 <ol>
@@ -402,9 +396,8 @@ let rAF;
   </li>
 </ol>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Vous pouvez trouver l'<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">exemple terminé en direct sur GitHub</a>. (Vous pouvez également voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">code source</a>).</p>
+<div class="note">
+  <p><strong>Note :</strong> Vous pouvez trouver l'<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">exemple terminé en direct sur GitHub</a>. (Vous pouvez également voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">code source</a>).</p>
 </div>
 
 <h3 id="clearing_a_requestanimationframe_call">Effacer un appel de requestAnimationFrame()</h3>
@@ -426,9 +419,8 @@ let rAF;
   <li>Vous voudrez ajouter une variable de suivi pour vérifier si la toupie tourne ou non, effacer le cadre d'animation si c'est le cas, et le rappeler si ce n'est pas le cas.</li>
 </ul>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Essayez d'abord vous-même ; si vous êtes vraiment bloqué, consultez nos pages <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">exemple en direct</a> et <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">code source</a>.</p>
+<div class="note">
+  <p><strong>Note :</strong> Essayez d'abord vous-même ; si vous êtes vraiment bloqué, consultez nos pages <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">exemple en direct</a> et <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">code source</a>.</p>
 </div>
 
 <h3 id="throttling_a_requestanimationframe_animation">Ralentissement d'une animation requestAnimationFrame()</h3>
@@ -536,9 +528,8 @@ function start() {
   btn.style.display = 'none';
   setTimeout(setEndgame, random(5000,10000));
 }</pre>
-    <div class="notecard note">
-      <p><b>Note :</b></p>
-      <p>Vous verrez que cet exemple appelle <code>setTimeout()</code> sans stocker la valeur de retour. (Donc, pas <code>let myTimeout = setTimeout(functionName, interval)</code>.)</p>
+    <div class="note">
+      <p><strong>Note :</strong> Vous verrez que cet exemple appelle <code>setTimeout()</code> sans stocker la valeur de retour. (Donc, pas <code>let myTimeout = setTimeout(functionName, interval)</code>.)</p>
       <p>Cela fonctionne très bien, tant que vous n'avez pas besoin d'effacer votre intervalle/temps d'attente à un moment donné. Si vous le faites, vous devrez sauvegarder l'identifiant renvoyé !</p>
     </div>
     <p>Le résultat net du code précédent est que lorsque le bouton <em>Start</em> est pressé, la toupie est affichée et les joueurs sont amenés à attendre un temps aléatoire avant d'être invités à appuyer sur leur bouton. Cette dernière partie est gérée par la fonction <code>setEndgame()</code>, que vous allez définir ensuite.</p>
@@ -586,9 +577,8 @@ function start() {
 
 <p>Voilà, c'est fait !</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Si vous êtes bloqué, consultez <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">notre version du jeu en live</a> (voir également le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">code source</a>).</p>
+<div class="note">
+  <p><strong>Note :</strong> Si vous êtes bloqué, consultez <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">notre version du jeu en live</a> (voir également le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">code source</a>).</p>
 </div>
 
 <h2 id="conclusion">Conclusion</h2>