replace class="in-page-callout webdev" with class="callout" (#589)

50 files changed, 50 insertions, 50 deletions

diff --git a/files/bg/learn/html/index.html b/files/bg/learn/html/index.html
index 46508b0e52..cd7c7b2e36 100644
--- a/files/bg/learn/html/index.html
+++ b/files/bg/learn/html/index.html
@@ -16,7 +16,7 @@ translation_of: Learn/HTML
 
 <p class="summary">To build websites, you should know about {{Glossary('HTML')}} — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/bg/learn/html/introduction_to_html/index.html b/files/bg/learn/html/introduction_to_html/index.html
index 1b35c86467..54cc110cd0 100644
--- a/files/bg/learn/html/introduction_to_html/index.html
+++ b/files/bg/learn/html/introduction_to_html/index.html
@@ -19,7 +19,7 @@ translation_of: Learn/HTML/Introduction_to_HTML
 
 <p class="summary">At its heart, {{glossary("HTML")}} is a fairly simple language made up of {{Glossary("Element","elements")}}, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand HTML.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/de/learn/css/css_layout/index.html b/files/de/learn/css/css_layout/index.html
index 4351951f84..0268f74856 100644
--- a/files/de/learn/css/css_layout/index.html
+++ b/files/de/learn/css/css_layout/index.html
@@ -25,7 +25,7 @@ translation_of: Learn/CSS/CSS_layout
 
 <p class="summary">At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/de/learn/css/first_steps/index.html b/files/de/learn/css/first_steps/index.html
index a43d3b473b..39bef7a509 100644
--- a/files/de/learn/css/first_steps/index.html
+++ b/files/de/learn/css/first_steps/index.html
@@ -7,7 +7,7 @@ translation_of: Learn/CSS/First_steps
 
 <p class="summary"><font>CSS (Cascading Style Sheets) wird zum Stylen und Layouten von Webseiten verwendet. Sie können beispielsweise die Schriftart, Farbe, Größe und den Abstand von Seiteninhalten ändern, Inhalt in mehrere Spalten aufteilen oder Animationen und andere dekorative Funktionen hinzufügen. Dieses Modul bietet einen sanften Einstieg in CSS, beginnend mit einem Überblick über Funktionsweise, Syntax und wie Sie mit CSS Darstellungsstile zu </font>HTML-Seiten <font>hinzufügen können.</font></p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/de/learn/css/styling_text/index.html b/files/de/learn/css/styling_text/index.html
index 0e5279bda2..f71e334b55 100644
--- a/files/de/learn/css/styling_text/index.html
+++ b/files/de/learn/css/styling_text/index.html
@@ -24,7 +24,7 @@ translation_of: Learn/CSS/Styling_text
 
 <p class="summary">With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/el/web/html/index.html b/files/el/web/html/index.html
index 7f6ddced03..81b787c6ed 100644
--- a/files/el/web/html/index.html
+++ b/files/el/web/html/index.html
@@ -34,7 +34,7 @@ translation_of: Web/HTML
  <dd>In our extensive <a href="/en-US/docs/Web/HTML/Reference">HTML reference</a> section, you'll find the details about every element and attribute in HTML.</dd>
 </dl>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/es/learn/html/index.html b/files/es/learn/html/index.html
index 9125d76a05..deb7369a9a 100644
--- a/files/es/learn/html/index.html
+++ b/files/es/learn/html/index.html
@@ -15,7 +15,7 @@ translation_of: Learn/HTML
 
 <p class="summary">Para crear sitios web, debes conocer el {{Glossary('HTML')}} — la tecnología fundamental que se utiliza para definir la estructura de una página web. HTML se utiliza para especificar si tu contenido web se debe reconocer como un párrafo, lista, encabezado, enlace, imagen, reproductor multimedia, formulario o uno de los muchos otros elementos disponibles o incluso un nuevo elemento que tú definas.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="¿Quieres_transformarte_en_un_desarrollador_de_la_interfaz_de_usuario_web">¿Quieres transformarte en un desarrollador de la interfaz de usuario web?</h3>
 
 <p>Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.</p>
diff --git a/files/es/learn/html/introduction_to_html/index.html b/files/es/learn/html/introduction_to_html/index.html
index cbbb3806eb..8f320aff07 100644
--- a/files/es/learn/html/introduction_to_html/index.html
+++ b/files/es/learn/html/introduction_to_html/index.html
@@ -16,7 +16,7 @@ original_slug: Learn/HTML/Introduccion_a_HTML
 
 <p class="summary">En su corazón, {{glossary("HTML")}} es un lenguaje muy sencillo compuesto de {{Glossary("Element", "elementos")}}, que se pueden aplicar a piezas de texto para darles un significado diferente en un documento (¿Esto es un párrafo? ¿Esto es una lista con viñetas? ¿Esto es parte de una tabla?), estructura un documento en secciones lógicas (¿Tiene una cabecera? ¿Tres columnas de contenido? ¿Un menú de navegación?), e incrusta contenido como imágenes y vídeos en una página. Este módulo introducirá los dos primeros de estos, e introduce conceptos fundamentales y la sintaxis que necesitas para entender HTML.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="¿Quieres_transformarte_en_un_desarrollador_de_la_interfaz_de_usuario_web">¿Quieres transformarte en un desarrollador de la interfaz de usuario web?</h3>
 
 <p>Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.</p>
diff --git a/files/es/learn/index.html b/files/es/learn/index.html
index a032b43e2d..5c414e41bf 100644
--- a/files/es/learn/index.html
+++ b/files/es/learn/index.html
@@ -26,7 +26,7 @@ translation_of: Learn
 
 <p>Si tienes preguntas sobre temas que te gustaría que se abordaran o te parece que faltan, envía un mensaje en el <a href="https://discourse.mozilla.org/c/mdn">Foro de discusión</a>, de la comunidad Mozilla (sitio en inglés).</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="¿Quieres_convertirte_en_un_desarrollador_de_interfaz_de_usuario_web">¿Quieres convertirte en un desarrollador de interfaz de usuario web?</h3>
 
 <p>Hemos elaborado un curso que incluye toda la información esencial que necesitas para alcanzar tu objetivo.</p>
diff --git a/files/es/learn/javascript/first_steps/index.html b/files/es/learn/javascript/first_steps/index.html
index 9a1211fc54..6191f412d7 100644
--- a/files/es/learn/javascript/first_steps/index.html
+++ b/files/es/learn/javascript/first_steps/index.html
@@ -28,7 +28,7 @@ translation_of: Learn/JavaScript/First_steps
 
 <p class="summary">En nuestro primer módulo de JavaScript, primero respondemos algunas preguntas fundamentales como "¿qué es JavaScript?", "¿cómo se ve?" y "¿qué puede hacer?", antes de pasar avanzar en la guía por tu primera experiencia práctica de escribir JavaScript. Después de eso, explicaremos en detalle algunos bloques de construcción clave, tal como variables, cadenas, números y arreglos.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="¿Quieres_transformarte_en_un_desarrollador_de_la_interfaz_de_usuario_web">¿Quieres transformarte en un desarrollador de la interfaz de usuario web?</h3>
 
 <p>Se elaboró un curso que incluye toda la información esencial que necesitas para alcanzar tu objetivo.</p>
diff --git a/files/es/learn/javascript/index.html b/files/es/learn/javascript/index.html
index 4703c68749..eba0b2fa22 100644
--- a/files/es/learn/javascript/index.html
+++ b/files/es/learn/javascript/index.html
@@ -16,7 +16,7 @@ translation_of: Learn/JavaScript
 
 <p class="summary">{{Glossary("JavaScript")}} es un lenguaje de programación que te permite implementar cosas complejas en páginas web. Cada vez que una página web hace algo más que sentarse ahí y mostrar información estática para que la veas — mostrando actualizaciones de contenido oportunas, mapas interactivos, gráficos animados 2D/3D, desplazando máquinas reproductoras de video, o más, puedes apostar que probablemente JavaScript esté involucrado .</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="¿Quieres_convertirte_en_un_desarrollador_web_front-end">¿Quieres convertirte en un desarrollador web front-end?</h3>
 
 <p>Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.</p>
diff --git a/files/es/learn/tools_and_testing/github/index.html b/files/es/learn/tools_and_testing/github/index.html
index 77d02cf0de..b924f8841d 100644
--- a/files/es/learn/tools_and_testing/github/index.html
+++ b/files/es/learn/tools_and_testing/github/index.html
@@ -35,7 +35,7 @@ original_slug: Learn/Herramientas_y_pruebas/GitHub
 
 <p><font><font>Hemos preparado un curso que incluye toda la información esencial que necesitas para alcanzar tu objetivo.</font></font></p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Comenzar</a></p>
 </div>
 
diff --git a/files/es/learn/tools_and_testing/understanding_client-side_tools/index.html b/files/es/learn/tools_and_testing/understanding_client-side_tools/index.html
index a18738e8a6..a457b63008 100644
--- a/files/es/learn/tools_and_testing/understanding_client-side_tools/index.html
+++ b/files/es/learn/tools_and_testing/understanding_client-side_tools/index.html
@@ -25,7 +25,7 @@ original_slug: Learn/Herramientas_y_pruebas/Understanding_client-side_tools
 
 <p>Debes aprender el núcleo básico de los lenguajes <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a> y <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, antes de intentar usar las herramientas aquí descritas.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="¿Quieres_convertirte_en_un_desarrollador_front-end">¿Quieres convertirte en un desarrollador <em>front-end</em>?</h3>
 
 <p>Tenemos un curso que incluye toda la información esencial que necesitas para lograr tu objetivo.</p>
diff --git a/files/es/web/html/index.html b/files/es/web/html/index.html
index 09d477ab33..070bbac2d7 100644
--- a/files/es/web/html/index.html
+++ b/files/es/web/html/index.html
@@ -36,7 +36,7 @@ translation_of: Web/HTML
  <dd>En nuestra extensa sección {{web.link("/es/docs/Web/HTML/Referencia", "referencia HTML")}} encontrarás los detalles sobre cada elemento y atributo en HTML.</dd>
 </dl>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="¿Quieres_transformarte_en_un_desarrollador_de_la_interfaz_de_usuario_web">¿Quieres transformarte en un desarrollador de la interfaz de usuario web?</h3>
 
 <p>Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.</p>
diff --git a/files/fr/learn/css/first_steps/index.html b/files/fr/learn/css/first_steps/index.html
index 040887386c..91a9d56dbf 100644
--- a/files/fr/learn/css/first_steps/index.html
+++ b/files/fr/learn/css/first_steps/index.html
@@ -15,7 +15,7 @@ translation_of: Learn/CSS/First_steps
 <div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation" lang="fr"><span title="">CSS (Cascading Style Sheets ou en français "Feuilles de style en cascade") est utilisé pour styliser et mettre en page des pages Web - par exemple, pour modifier la police, la couleur, la taille et l'espacement de votre contenu, le scinder en plusieurs colonnes ou ajouter des animations et autres éléments décoratifs.</span> <span title="">Ce module vous permet de commencer en douceur votre chemin vers la maîtrise de CSS avec les bases de son fonctionnement, de sa syntaxe et de la façon dont vous pouvez commencer à l'utiliser pour ajouter du style au HTML.</span></span></div>
 </div>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Vous_voulez_devenir_un_développeur_web_front-end">Vous voulez devenir un développeur web front-end ?</h3>
 
 <p>Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p>
diff --git a/files/fr/learn/tools_and_testing/github/index.html b/files/fr/learn/tools_and_testing/github/index.html
index 3dbc4a7a76..31795e70df 100644
--- a/files/fr/learn/tools_and_testing/github/index.html
+++ b/files/fr/learn/tools_and_testing/github/index.html
@@ -33,7 +33,7 @@ original_slug: Apprendre/Outils_et_tests/GitHub
 <p><strong>Note</strong>: Git est actuellement un système de contrôle des versions <em>distribué</em>, signifiant qu'une copie complète du dépôt contenant la base de code est fait sur votre ordinateur (et celui de tous les autres participants). Vous modifiez votre propre copie et puis vous les envoyez vers le serveur, où un administrateur pourra décider de les fusionner avec la copie commune ou non.</p>
 </div>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Vous_cherchez_à_devenir_un_développeur_web_front-end">Vous cherchez à devenir un développeur web front-end ?</h3>
 
 <p>Nous avons mis ensemble un cours incluant toutes les informations nécessaires dont vous avez besoin pour atteindre votre objectif.</p>
diff --git a/files/ja/learn/css/first_steps/index.html b/files/ja/learn/css/first_steps/index.html
index b576a008e4..c0042ea515 100644
--- a/files/ja/learn/css/first_steps/index.html
+++ b/files/ja/learn/css/first_steps/index.html
@@ -14,7 +14,7 @@ translation_of: Learn/CSS/First_steps
 
 <p class="summary">CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer" name="Looking_to_become_a_front-end_web_developer">フロントエンドのウェブ開発者になりたいですか？</h3>
 
 <p>ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。</p>
diff --git a/files/ja/learn/index.html b/files/ja/learn/index.html
index 2a218b21c6..c5f49319a8 100644
--- a/files/ja/learn/index.html
+++ b/files/ja/learn/index.html
@@ -24,7 +24,7 @@ translation_of: Learn
 
 <p>カバーしてほしいトピックや不足していると感じたトピックについて質問がある場合は、<a href="https://discourse.mozilla.org/c/mdn">Discourse フォーラム</a>にメッセージを送ってください。</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="フロントエンドの_Web_開発者になりたいですか？">フロントエンドの Web 開発者になりたいですか？</h3>
 
 <p>目標に向かって頑張るために必要な情報をまとめたコースをご用意しました。</p>
diff --git a/files/ja/learn/javascript/first_steps/index.html b/files/ja/learn/javascript/first_steps/index.html
index 13cb953a6c..26c69c3475 100644
--- a/files/ja/learn/javascript/first_steps/index.html
+++ b/files/ja/learn/javascript/first_steps/index.html
@@ -23,7 +23,7 @@ translation_of: Learn/JavaScript/First_steps
 
 <p class="summary">最初の JavaScript のモジュールでは、初めて JavaScript を書く実践的な経験を体験する前に、「JavaScript とは何？」や「どのようなもの？」や「何ができる？」といったような基本的な質問に答えます。その後変数や文字列、 数値、配列といったような言語の内容をお話します。</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="フロントエンドのWeb開発者になりたいですか？">フロントエンドのWeb開発者になりたいですか？</h3>
 
 <p>私たちはあなたがあなたの目標に向かって取り組むために必要なすべての重要な情報を含むコースをまとめました。</p>
diff --git a/files/ja/learn/javascript/index.html b/files/ja/learn/javascript/index.html
index 9398a79fa3..5f61ae9b76 100644
--- a/files/ja/learn/javascript/index.html
+++ b/files/ja/learn/javascript/index.html
@@ -16,7 +16,7 @@ translation_of: Learn/JavaScript
 
 <p class="summary">{{Glossary("JavaScript")}} <span id="result_box" lang="ja"><span>はウェブページ上に複雑なものを実装することを可能にするプログラミング言語です。ウェブページが表示されるたびに静的な情報が表示されるだけでなく、タイムリーにコンテンツを更新したり、インタラクティブマップや 2D/3D グラフィックスのアニメーション</span></span><span lang="ja"><span>を表示したり、またはビデオジュークボックスが流れたりします。ほかにもありますが、これらは 間違いなく JavaScript が関係しています。</span></span></p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="フロントエンドの_Web_開発者になりたいですか？">フロントエンドの Web 開発者になりたいですか？</h3>
 
 <p>目標に向かって頑張るために必要な情報をまとめたコースをご用意しました。</p>
diff --git a/files/ja/web/html/index.html b/files/ja/web/html/index.html
index 0b4050c505..a53d345784 100644
--- a/files/ja/web/html/index.html
+++ b/files/ja/web/html/index.html
@@ -32,7 +32,7 @@ translation_of: Web/HTML
  <dd>広範な <a href="/ja/docs/Web/HTML/Reference">HTML リファレンス</a>の章で、 HTML のすべての要素と属性についての詳細が分かります。</dd>
 </dl>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer" name="Looking_to_become_a_front-end_web_developer">フロントエンドウェブ開発者になるために</h3>
 
 <p>目標に向かって頑張るために必要な基本情報をまとめたコースを用意しました。</p>
diff --git a/files/ja/web/javascript/index.html b/files/ja/web/javascript/index.html
index 6e2fd83729..ac18d04596 100644
--- a/files/ja/web/javascript/index.html
+++ b/files/ja/web/javascript/index.html
@@ -19,7 +19,7 @@ translation_of: Web/JavaScript
 
 <p>JavaScript を<a href="https://ja.wikipedia.org/wiki/Java">プログラミング言語 Java</a> と混同しないでください. Java と JavaScript は両方ともアメリカやその他の国においてオラクルの商標または登録商標です。しかし、この 2 つのプログラミング言語は構文、セマンティック、利用形態が大きく異なります。</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer" name="Looking_to_become_a_front-end_web_developer">フロントエンドのウェブ開発者になりたいですか？</h3>
 
 <p>目標に向かって頑張るために必要な情報をまとめたコースをご用意しました。</p>
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/index.html
index 34a443990a..9b4a33ca1b 100644
--- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/index.html
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/index.html
@@ -28,7 +28,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
 
 <p>결과적으로 코드는 더욱 풍부해지고 전문적이게 될 것이며, 프레임워크가 구축하고 있는 근본적인 웹 플랫폼 기능을 이해한다면 보다 확실하게 문제를 해결할 수 있을 겁니다.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="프론트_개발자가_되고_싶으신가요">프론트 개발자가 되고 싶으신가요?</h3>
 
 <p>목표를 달성하는데 필요한 모든 필수 정보가 포함 된 과정을 구성했습니다.</p>
diff --git a/files/ms/learn/accessibility/index.html b/files/ms/learn/accessibility/index.html
index 22617a9e99..1e7c71bea1 100644
--- a/files/ms/learn/accessibility/index.html
+++ b/files/ms/learn/accessibility/index.html
@@ -37,7 +37,7 @@ translation_of: Learn/Accessibility
 
 <p>{{EmbedYouTube("7mqqgIxX_NU")}}</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/my/learn/css/css_layout/index.html b/files/my/learn/css/css_layout/index.html
index 4351951f84..0268f74856 100644
--- a/files/my/learn/css/css_layout/index.html
+++ b/files/my/learn/css/css_layout/index.html
@@ -25,7 +25,7 @@ translation_of: Learn/CSS/CSS_layout
 
 <p class="summary">At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/pl/learn/javascript/asynchronous/index.html b/files/pl/learn/javascript/asynchronous/index.html
index 5a445f8b99..7e46a9b37e 100644
--- a/files/pl/learn/javascript/asynchronous/index.html
+++ b/files/pl/learn/javascript/asynchronous/index.html
@@ -23,7 +23,7 @@ translation_of: Learn/JavaScript/Asynchronous
 
 <p class="summary"><span class="seoSummary">In this module we take a look at {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.</span></p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/pl/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/pl/learn/tools_and_testing/client-side_javascript_frameworks/index.html
index fa16dab55c..5ddb035fab 100644
--- a/files/pl/learn/tools_and_testing/client-side_javascript_frameworks/index.html
+++ b/files/pl/learn/tools_and_testing/client-side_javascript_frameworks/index.html
@@ -37,7 +37,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
 <p>Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.</p>
 
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/pt-pt/learn/accessibility/index.html b/files/pt-pt/learn/accessibility/index.html
index ba1b7e42b3..77403afbb0 100644
--- a/files/pt-pt/learn/accessibility/index.html
+++ b/files/pt-pt/learn/accessibility/index.html
@@ -36,7 +36,7 @@ original_slug: Learn/Acessibilidade
 
 <p>{{EmbedYouTube("7mqqgIxX_NU")}}</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Procura_ser_um_programador_de_web_front-end">Procura ser um programador de <em>web front-end</em>?</h3>
 
 <p>Nos construimos um curso que inclui toda a informação essencial que precisa para atingir o seu objetivo.</p>
diff --git a/files/pt-pt/learn/index.html b/files/pt-pt/learn/index.html
index 50491509b9..9a769eef86 100644
--- a/files/pt-pt/learn/index.html
+++ b/files/pt-pt/learn/index.html
@@ -28,7 +28,7 @@ translation_of: Learn
 
 <p>Se tem questões sobre tópicos que gostaria que fossem abordados ou acha que estão em falta, contacte nos através do <a href="https://discourse.mozilla.org/c/mdn">Discourse forum</a>.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Deseja_ser_um_programador_de_front-end">Deseja ser um programador de front-end?</h3>
 
 <p>Nos construimos um curso que inclui toda a informação essencial que precisa para atingir o seu objetivo.</p>
diff --git a/files/ru/learn/index.html b/files/ru/learn/index.html
index 521272d551..3b393ff294 100644
--- a/files/ru/learn/index.html
+++ b/files/ru/learn/index.html
@@ -29,7 +29,7 @@ translation_of: Learn
 
 <p>Если у вас есть предложения о добавлении тем, которые вы хотели бы увидеть или которых, как вы считаете, не хватает, напишите нам на нашем <a href="https://discourse.mozilla.org/c/mdn/236">форуме Discourse</a>.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Хотите_стать_фронтенд-разработчиком">Хотите стать фронтенд-разработчиком?</h3>
 
 <p>Мы составили курс, который включает всю важную информацию, необходимую для достижения вашей цели.</p>
diff --git a/files/tr/learn/css/building_blocks/index.html b/files/tr/learn/css/building_blocks/index.html
index 8c6a408465..a0c22927c6 100644
--- a/files/tr/learn/css/building_blocks/index.html
+++ b/files/tr/learn/css/building_blocks/index.html
@@ -18,7 +18,7 @@ original_slug: Öğren/CSS/CSS_yapi_taslari
 
 <p class="summary">Buradaki amaç, sana yeterli CSS yazman için altyapı hazırlamak ve <a href="/tr/docs/Learn/CSS/Styling_text">metin şekillendirme</a> ve <a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a> gibi daha karakteristik kurallara geçmeden önce tüm temel teorileri anlamana yardımcı olmak</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Bir_front-endarayüz_geliştiricisi_mi_olmak_istiyorsun">Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?</h3>
 
 <p><span>Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık</span>.</p>
diff --git a/files/tr/learn/css/css_layout/index.html b/files/tr/learn/css/css_layout/index.html
index 33c22befe6..a255fa9a34 100644
--- a/files/tr/learn/css/css_layout/index.html
+++ b/files/tr/learn/css/css_layout/index.html
@@ -24,7 +24,7 @@ original_slug: Öğren/CSS/CSS_layout
 
 <p class="summary">Bu noktaya kadar CSS'in temellerini, metnin nasıl şekillendirileceğini ve içeriğinizin iiçnde bulunduğu kutualrı nasıl biçimlendirip değiştireceğinizi inceledik. Bundan sonra, kutularınızı görüntü alanına ve birbirlerine göre doğru yere nasıl yerleştiriceğinize bakacağız. CSS düzenine derinlemesine dalabilmemiz, farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına ve hala bilmek isteyebileceğiniz bazı eski tekniklere bir göz atacağız.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Bir_Web_ön-uçfront-end_geliştiricisi_mi_olmak_istiyorsun">Bir Web ön-uç(front-end)  geliştiricisi mi olmak istiyorsun?</h3>
 
 <p>Hedefinize ulaşmak için ihtiyacınız olan tüm temel bilgileri içeren bir kurs hazırladık.</p>
diff --git a/files/tr/learn/css/first_steps/index.html b/files/tr/learn/css/first_steps/index.html
index 7a7b0f691c..8a0dae72ad 100644
--- a/files/tr/learn/css/first_steps/index.html
+++ b/files/tr/learn/css/first_steps/index.html
@@ -18,7 +18,7 @@ original_slug: Öğren/CSS/Ilk_adimlar
 
 <p class="summary">CSS (Basamaklı Stil Sayfaları), web sayfalarını biçimlendirmek ve düzenlemek için kullanılır — örn., içeriğinin yazı tipini, rengini, boyutunu ve aralığını değiştirmek; birden çok sütuna bölmek, animasyonlar ve diğer dekoratif özellikler eklemek gibi. Bu bölüm, nasıl çalıştığını, söz diziminin neye benzediğini ve bunu HTML'ye, stil ekelemek için nasıl kullanmaya başlayabileceğinle ilgili, temel bilgilerle CSS uzmanlığına doğru giden yolunda yumuşak bir başlangıç sağlar.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Bir_front-endarayüz_geliştiricisi_mi_olmak_istiyorsun"><span class="highlight-span">Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?</span></h3>
 
 <p>Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.</p>
diff --git a/files/tr/learn/css/index.html b/files/tr/learn/css/index.html
index 27330e8df2..2b3cd638c9 100644
--- a/files/tr/learn/css/index.html
+++ b/files/tr/learn/css/index.html
@@ -24,7 +24,7 @@ original_slug: Öğren/CSS
 
 <p class="summary">Basamaklı Stil Sayfaları (ing. Cascading Stylesheets) — veya {{glossary("CSS")}} — {{glossary("HTML")}}'den sonra öğrenmen gereken ikinci dildir. HTML içeriğin yapısal ve şematik tanımlamasında kullanılırken; CSS, dizayn etmek ve düzenlemek için kullanılır. Örneğin: CSS'i içeriğin fontunu, rengini, büyüklüğünü ve boşluklarını değiştirmek için kullanabilir, sütunları ayırabilir ya da animasyon veyahut decoratif özellikleri ekleyebilirsin.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Bir_front-endarayüz_geliştiricisi_mi_olmak_istiyorsun">Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?</h3>
 
 <p>Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.</p>
diff --git a/files/tr/learn/css/styling_text/index.html b/files/tr/learn/css/styling_text/index.html
index 5afce7c21f..7bfe91f8bc 100644
--- a/files/tr/learn/css/styling_text/index.html
+++ b/files/tr/learn/css/styling_text/index.html
@@ -33,7 +33,7 @@ original_slug: Öğren/CSS/Styling_text
 
 <p>CSS dilinin temelleri ele alındığında, odaklanmamız gereken bir sonraki konu, CSS ile yapacağımız en yaygın uygulamalardan biri olan metnin stilini oluşturmaktır. Bu ünitede yazı tipini, kalınlığı, italikliği, satır ve harf aralığını, alt gölgeler ve diğer metin özellikerini ayarlamak da dahil olmak üzere metin stilinin temellerine bakacağız. Sayfamıza özel yazı tiplerini uygulamak, listeleri ve bağlantıları şekillerdirmeye bakarak üniteyi tamamlayacağız.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Bir_front-endarayüz_geliştiricisi_mi_olmak_istiyorsun"><span class="highlight-span">Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?</span></h3>
 
 <p>Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.</p>
diff --git a/files/tr/web/css/index.html b/files/tr/web/css/index.html
index 6f689f8c52..f1cd50e15c 100644
--- a/files/tr/web/css/index.html
+++ b/files/tr/web/css/index.html
@@ -34,7 +34,7 @@ translation_of: Web/CSS
  </li>
 </ul>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Bir_front-endArayüz_geliştiricisimi_olmak_istiyorsunuz">Bir front-end(Arayüz) geliştiricisimi olmak istiyorsunuz?</h3>
 
 <p>Hedefinize ulaşabilmeniz için ihtiyacınız olan tüm temel bilgileri içeren bir kurs hazırladık.</p>
diff --git a/files/uk/learn/accessibility/index.html b/files/uk/learn/accessibility/index.html
index 52cd8996f0..2e721693f3 100644
--- a/files/uk/learn/accessibility/index.html
+++ b/files/uk/learn/accessibility/index.html
@@ -24,7 +24,7 @@ original_slug: Learn/Доступність
 
 <p>{{EmbedYouTube("7mqqgIxX_NU")}}</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/uk/learn/css/css_layout/index.html b/files/uk/learn/css/css_layout/index.html
index a769852c74..ed65a3192e 100644
--- a/files/uk/learn/css/css_layout/index.html
+++ b/files/uk/learn/css/css_layout/index.html
@@ -8,7 +8,7 @@ original_slug: Learn/CSS/CSS_розмітка
 
 <p class="summary">At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/uk/learn/javascript/asynchronous/index.html b/files/uk/learn/javascript/asynchronous/index.html
index c04f970dfa..355477ead5 100644
--- a/files/uk/learn/javascript/asynchronous/index.html
+++ b/files/uk/learn/javascript/asynchronous/index.html
@@ -8,7 +8,7 @@ original_slug: Learn/JavaScript/Асинхронний
 
 <p class="summary"><span class="seoSummary">In this module we take a look at {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.</span></p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/uk/learn/javascript/building_blocks/index.html b/files/uk/learn/javascript/building_blocks/index.html
index 64af01ebf9..b33be235cb 100644
--- a/files/uk/learn/javascript/building_blocks/index.html
+++ b/files/uk/learn/javascript/building_blocks/index.html
@@ -8,7 +8,7 @@ original_slug: Learn/JavaScript/Будівельні_блоки
 
 <p class="summary">In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code blocks such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/index.html
index 8486b71311..39daad4acb 100644
--- a/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/index.html
+++ b/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/index.html
@@ -29,7 +29,7 @@ original_slug: Learn/Tools_and_testing/Розуміння_JavaScript-фрейм�
 
 <p>Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/uk/learn/tools_and_testing/cross_browser_testing/index.html b/files/uk/learn/tools_and_testing/cross_browser_testing/index.html
index 460fa487f9..1437b545ea 100644
--- a/files/uk/learn/tools_and_testing/cross_browser_testing/index.html
+++ b/files/uk/learn/tools_and_testing/cross_browser_testing/index.html
@@ -8,7 +8,7 @@ original_slug: Learn/Tools_and_testing/Тестування_кросбраузе
 
 <p class="summary">This module focuses on testing web projects across different browsers. We look at identifying your target audience (e.g. what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/uk/learn/tools_and_testing/github/index.html b/files/uk/learn/tools_and_testing/github/index.html
index aee71d8e53..6af5a10937 100644
--- a/files/uk/learn/tools_and_testing/github/index.html
+++ b/files/uk/learn/tools_and_testing/github/index.html
@@ -25,7 +25,7 @@ original_slug: Learn/Tools_and_testing/Git_та_GitHub
 <p><strong>Note</strong>: Git is actually a <em>distributed</em> version control system, meaning that a complete copy of the repository containing the codebase is made on your computer (and everyone else's). You make changes to your own copy, and then push those changes back up to the server, where an administrator will decide whether to merge your changes with the master copy.</p>
 </div>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/uk/learn/tools_and_testing/index.html b/files/uk/learn/tools_and_testing/index.html
index 721a0ef87f..2cb51ee8d2 100644
--- a/files/uk/learn/tools_and_testing/index.html
+++ b/files/uk/learn/tools_and_testing/index.html
@@ -33,7 +33,7 @@ translation_of: Learn/Tools_and_testing
 </div>
 
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/uk/learn/tools_and_testing/understanding_client-side_tools/index.html b/files/uk/learn/tools_and_testing/understanding_client-side_tools/index.html
index 9720f485b7..61bc35ac77 100644
--- a/files/uk/learn/tools_and_testing/understanding_client-side_tools/index.html
+++ b/files/uk/learn/tools_and_testing/understanding_client-side_tools/index.html
@@ -14,7 +14,7 @@ original_slug: Learn/Tools_and_testing/Розуміння_інструменті
 
 <p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use the tools detailed here.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/uk/web/html/index.html b/files/uk/web/html/index.html
index 3f865c915a..da13d75c96 100644
--- a/files/uk/web/html/index.html
+++ b/files/uk/web/html/index.html
@@ -32,7 +32,7 @@ translation_of: Web/HTML
  </li>
 </ul>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Бажаєте_стати_веб-розробником_фронтенду">Бажаєте стати веб-розробником фронтенду?</h3>
 
 <p>Ми уклали повний курс, що включає в себе всю необхідну інформацію задля досягнення вашої мети.</p>
diff --git a/files/vi/learn/css/building_blocks/index.html b/files/vi/learn/css/building_blocks/index.html
index 46a3177fd8..d2eebae149 100644
--- a/files/vi/learn/css/building_blocks/index.html
+++ b/files/vi/learn/css/building_blocks/index.html
@@ -17,7 +17,7 @@ translation_of: Learn/CSS/Building_blocks
 <p class="summary">The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like <a href="/en-US/docs/Learn/CSS/Styling_text">text styling</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>.</p>
 
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
 
 <p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
diff --git a/files/vi/learn/css/first_steps/index.html b/files/vi/learn/css/first_steps/index.html
index 47c45f1921..2256b847d7 100644
--- a/files/vi/learn/css/first_steps/index.html
+++ b/files/vi/learn/css/first_steps/index.html
@@ -7,7 +7,7 @@ translation_of: Learn/CSS/First_steps
 
 <p class="summary">CSS (Cascading Style Sheets) được dùng để tạo hiểu, bố cục và định dạng hiển thị các trang web — ví dụ như, thay đổi phông chữ, màu sắc, kích thước, và khoảng trống trong nội dung, chia nọi dung thành nhiều cột, hoặc là thêm các hiệu ứng trang trí khác. Modulr này cung cấp cho bạn một khởi đầu nhẹ nhàng trên con đường làm chủ CSS với những điều cơ bản về cách hoạt động , cú pháp trông như thế nào và làm cách nào để bắt đầu sử dụng nó thêm kiểu vào HTML.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Hướng_tới_trở_thành_một_front-end_web_developer">Hướng tới trở thành một front-end web developer?</h3>
 
 <p>Chúng tôi đã tập hợp một khóa học bao gồm tất cả những thông tin cần thiết mà bạn cần để hướng tới mục tiêu đặt ra.</p>
diff --git a/files/vi/learn/html/tables/index.html b/files/vi/learn/html/tables/index.html
index 84e53983e9..c8e273b751 100644
--- a/files/vi/learn/html/tables/index.html
+++ b/files/vi/learn/html/tables/index.html
@@ -7,7 +7,7 @@ translation_of: Learn/HTML/Tables
 
 <p class="summary">Một tác vụ rất phổ biến trong HTML đó là cấu trúc dữ liệu dạng bảng, và nó có một số phần tử và thuộc tính chỉ cho mục đích này. Kết hợp với một chút <a href="/en-US/docs/Learn/CSS">CSS </a>để tạo kiểu, HTML giúp dễ dàng hiển thị các bảng thông tin trên web chẳng hạn như kế hoạch giảng dạy của trường, thời gian biểu tại bể bơi địa phương hoặc số liệu thống kê về đội khủng long hay bóng đá yêu thích của bạn. Mô-đun này đưa bạn đi qua tất cả những điều bạn cần biết về cấu trúc dữ liệu dạng bảng sử dụng HTML.</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="Muốn_trở_thành_một_nhà_phát_triển_web_front-end">Muốn trở thành một nhà phát triển web front-end?</h3>
 
 <p>Chúng tôi đã tập hợp một khóa học bao gồm tất cả những thông tin cần thiết bạn cần để chinh phục mục tiêu của bạn.</p>
diff --git a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/index.html b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/index.html
index 859a634ca9..a5cb76ebb5 100644
--- a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/index.html
+++ b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/index.html
@@ -13,7 +13,7 @@ translation_of: Learn/Tools_and_testing/Understanding_client-side_tools
 
 <p>在尝试使用这里列举的工具之前，你应该先好好学习一下 <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, 和 <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> 的核心基础知识。</p>
 
-<div class="in-page-callout webdev">
+<div class="callout">
 <h3 id="渴望成为一名前端开发人员？">渴望成为一名前端开发人员？</h3>
 
 <p>我们已经把你实现目标所需要的所有必要信息都放在了一个课程里面。</p>