fix various fixable flaws in Learn tree (ru) (#1429)

* fix various fixable flaws in Learn tree (ru)

* Update index.html

* Update index.html

* removed error-chrome-win7.png

* error-opera-macos.png

Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com>

3 files changed, 27 insertions, 27 deletions

diff --git a/files/ru/learn/css/styling_text/styling_links/index.html b/files/ru/learn/css/styling_text/styling_links/index.html
index 5d66f90825..81b8c0bfc1 100644
--- a/files/ru/learn/css/styling_text/styling_links/index.html
+++ b/files/ru/learn/css/styling_text/styling_links/index.html
@@ -13,7 +13,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links
  <tbody>
   <tr>
    <th scope="row">Для изучения вам потребуется:</th>
-   <td>Основы компьютерной грамотности, базовые знания HTML (изучите <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), основы CSS (изучите <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>), <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals">базовые знания о текстах и шрифтах CSS</a>.</td>
+   <td>Основы компьютерной грамотности, базовые знания HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), основы CSS (изучите <a href="/en-US/docs/Learn/CSS/First_steps">Введение в CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">базовые знания о текстах и шрифтах CSS</a>.</td>
   </tr>
   <tr>
    <th scope="row">Вы узнаете:</th>
@@ -28,7 +28,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links
 
 <h3 id="Состояния_ссылок">Состояния ссылок</h3>
 
-<p><span class="tlid-translation translation" lang="ru"><span title="">Первое, что нужно понять, это концепция состояний ссылок </span></span>— разные состояния в которых могут существовать ссылки, которые могут быть стилизованы используя различные <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">псевдоклассы</a>:</p>
+<p><span class="tlid-translation translation" lang="ru"><span title="">Первое, что нужно понять, это концепция состояний ссылок </span></span>— разные состояния в которых могут существовать ссылки, которые могут быть стилизованы используя различные <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors#pseudo-classes">псевдоклассы</a>:</p>
 
 <ul>
  <li><strong>Link (не посещённая)</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Состояние по умолчанию, в котором находится ссылка</span></span>, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс {{cssxref(":link")}}.</li>
@@ -38,7 +38,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links
  <li><strong>Active</strong>: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс {{cssxref(":active")}}</li>
 </ul>
 
-<h3 id="Стили_по_умолчанию">Стили по умолчанию</h3>
+<h3 id="Default_styles">Стили по умолчанию</h3>
 
 <p>Следующий пример показывает, как будет вести себя ссылка по умолчанию (CSS просто увеличивает и центрирует текст чтоб больше выделить его).</p>
 
@@ -50,7 +50,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links
   text-align: center;
 }</pre>
 
-<p>{{ EmbedLiveSample('Стили_по_умолчанию', '100%', 120) }}</p>
+<p>{{ EmbedLiveSample('Default_styles', '100%', 120) }}</p>
 
 <p><span class="tlid-translation translation" lang="ru"><span title="">Вы заметите несколько вещей при изучении стилей по умолчанию</span></span>:</p>
 
@@ -82,7 +82,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links
 <p><strong>Обратите внимание</strong>: вы не ограничены только перечисленными выше свойствами чтобы стилизовать ссылки — <span class="tlid-translation translation" lang="ru"><span title="">вы можете использовать любые свойства, которые вам нравятся. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Просто постарайтесь не сходить с ума слишком сильно!</span></span></p>
 </div>
 
-<h3 id="Стилизация_некоторых_ссылок">Стилизация некоторых ссылок</h3>
+<h3 id="Styling_some_links">Стилизация некоторых ссылок</h3>
 
 <p>Мы уже рассмотрели состояния по умолчанию в некоторых деталях, давайте взглянем на типичный набор стилей ссылок.</p>
 
@@ -165,7 +165,7 @@ Firefox&lt;/a&gt;, &lt;a href="https://www.google.com/chrome/index.html"&gt;Goog
 
 <p>Объединение этих двух даёт нам такой результат:</p>
 
-<p>{{ EmbedLiveSample('Стилизация_некоторых_ссылок', '100%', 150) }}</p>
+<p>{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}</p>
 
 <p>Итак, что мы сделали тут? Это определённо выглядит иначе чем стилизация по умолчанию, но <span class="tlid-translation translation" lang="ru"><span title="">все ещё даёт достаточно знакомый опыт для пользователей, чтобы знать, что происходит:</span></span></p>
 
@@ -268,7 +268,7 @@ window.addEventListener("load", drawOutput);
 
 <p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
 
-<h2 id="Добавление_иконок_в_ссылки">Добавление иконок в ссылки</h2>
+<h2 id="Including_icons_on_links">Добавление иконок в ссылки</h2>
 
 <p><span class="tlid-translation translation" lang="ru"><span title="">Обычной практикой является добавление иконок в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте рассмотрим очень простой пример, который добавляет иконку к внешним ссылкам (ссылки, которые ведут на другие сайты). Такая ссылка обычно выглядит как маленькая стрела торчащая из коробочки </span></span>— например, мы будем использовать <a href="https://icons8.com/web-app/741/external-link">этот отличный образец с сайта icons8.com</a>.</p>
 
@@ -313,28 +313,28 @@ a:active {
 }
 
 a[href*="http"] {
-  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background: url('external-link-52.png') no-repeat 100% 0;
   background-size: 16px 16px;
   padding-right: 19px;
 }</pre>
 
-<p>{{ EmbedLiveSample('Добавление_иконок_в_ссылки', '100%', 150) }}</p>
+<p>{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}</p>
 
-<p>Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали <a href="/en-US/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">пользовательские маркеры для пунктов списка</a> в последней статье — в этот раз, однако, мы используем короткую запись {{cssxref("background")}} вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем <code>no-repeat</code> чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.</p>
+<p>Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали <a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists#using_a_custom_bullet_image">пользовательские маркеры для пунктов списка</a> в последней статье — в этот раз, однако, мы используем короткую запись {{cssxref("background")}} вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем <code>no-repeat</code> чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.</p>
 
 <p>Также мы используем {{cssxref("background-size")}} для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.</p>
 
 <p>Наконец, мы задаём некоторый {{cssxref("padding-right")}} для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.</p>
 
-<p>И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML ссылки</a> правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст "http" таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">селектора атрибутов</a>: <code>a[href*="http"]</code> выбирает элементы {{htmlelement("a")}}, но только если они имеют атрибут {{htmlattrxref("href","a")}} со значением содержащим "http" где-то внутри него.</p>
+<p>И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML ссылки</a> правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст "http" таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors#attribute_selectors">селектора атрибутов</a>: <code>a[href*="http"]</code> выбирает элементы {{htmlelement("a")}}, но только если они имеют атрибут {{htmlattrxref("href","a")}} со значением содержащим "http" где-то внутри него.</p>
 
 <p>Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!</p>
 
 <div class="note">
-<p><strong>Обратите внимание</strong>: Не переживайте если вы ещё не знакомы с <a href="/en-US/docs/Learn/CSS/Styling_boxes">фоном </a>и <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">адаптивным (отзывчивым) веб-дизайном</a>; это объяснено в других местах</p>
+<p><strong>Обратите внимание</strong>: Не переживайте если вы ещё не знакомы с <a href="/en-US/docs/Learn/CSS/Building_blocks">фоном </a>и <a href="/en-US/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks">адаптивным (отзывчивым) веб-дизайном</a>; это объяснено в других местах</p>
 </div>
 
-<h2 id="Стилизация_ссылок_в_виде_кнопок">Стилизация ссылок в виде кнопок</h2>
+<h2 id="Styling_links_as_buttons">Стилизация ссылок в виде кнопок</h2>
 
 <p><span class="tlid-translation translation" lang="ru"><span title="">Инструменты, которые вы исследовали в этой статье</span></span> также могут быть использованы другим способом. Например, такие состояния как hover могут быть использованы для стилизации множества различных элементов, не только ссылок — вы можете захотеть стилизовать состояние hover параграфов, элементов списка или других вещей.</p>
 
@@ -392,13 +392,13 @@ a:active {
 
 <p>Что даёт нам следующий результат:</p>
 
-<p>{{ EmbedLiveSample('Стилизация_ссылок_в_виде_кнопок', '100%', 100) }}</p>
+<p>{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}</p>
 
 <p>Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:</p>
 
 <ul>
  <li>Наше второе правило удаляет заданный по умолчанию {{cssxref("padding")}} у элемента {{htmlelement("ul")}} и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае {{htmlelement("body")}}).</li>
- <li>Элементы {{htmlelement("li")}} по умолчанию в норме являются блочными (см. <a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">типы блоков CSS</a> чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству {{cssxref("display")}} значение inline, <span class="tlid-translation translation" lang="ru"><span title="">что приводит к тому, что элементы списка располагаются в одной строке друг с другом </span></span>— теперь они ведут себя как строчные элементы.</li>
+ <li>Элементы {{htmlelement("li")}} по умолчанию в норме являются блочными (см. <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#types_of_css_boxes">типы блоков CSS</a> чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству {{cssxref("display")}} значение inline, <span class="tlid-translation translation" lang="ru"><span title="">что приводит к тому, что элементы списка располагаются в одной строке друг с другом </span></span>— теперь они ведут себя как строчные элементы.</li>
  <li>четвёртое правило — которое стилизует элемент {{htmlelement("a")}} — самое сложное; давайте пройдёмся по нему шаг за шагом:
   <ul>
    <li>как в предыдущем примере, мы начинаем отключать настройки по умолчанию для {{cssxref("text-decoration")}} и {{cssxref("outline")}} — мы не хотим, чтоб они портили нам вид.</li>
diff --git a/files/ru/learn/css/styling_text/styling_lists/index.html b/files/ru/learn/css/styling_text/styling_lists/index.html
index fd507cffeb..9fb3de53ff 100644
--- a/files/ru/learn/css/styling_text/styling_lists/index.html
+++ b/files/ru/learn/css/styling_text/styling_lists/index.html
@@ -8,14 +8,14 @@ original_slug: Learn/CSS/Styling_text/Стилизация_списков
 
 <div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div>
 
-<p class="summary"><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">Списки</a>, по-большому счету, ведут себя также как любой другой текст, но существуют некоторые специфичные настройки CSS, о которых вы должны знать. В этой статье они все описываются.</p>
+<p class="summary"><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#lists">Списки</a>, по-большому счету, ведут себя также как любой другой текст, но существуют некоторые специфичные настройки CSS, о которых вы должны знать. В этой статье они все описываются.</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
    <th scope="row">Требования:</th>
    <td>
-    <p>Базовая компьютерная грамотность, основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), основы CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">CSS основы по тексту и шрифтам.</a></p>
+    <p>Базовая компьютерная грамотность, основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), основы CSS (изучите <a href="/en-US/docs/Learn/CSS/First_steps">Введение в CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">CSS основы по тексту и шрифтам.</a></p>
    </td>
   </tr>
   <tr>
@@ -27,7 +27,7 @@ original_slug: Learn/CSS/Styling_text/Стилизация_списков
 
 <h2 id="Пример_простого_списка">Пример простого списка</h2>
 
-<p>Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки  — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">доступен на Github</a> (проверьте также <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">источник кода</a>.)</p>
+<p>Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки  — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример <a href="https://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">доступен на Github</a> (проверьте также <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">источник кода</a>.)</p>
 
 <p>HTML для нашего примера списка представлен ниже:</p>
 
@@ -83,7 +83,7 @@ paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p
 
 <h2 id="Управление_интервалами_списков">Управление интервалами списков</h2>
 
-<p>При оформлении списков, вам необходимо настроить их стили так, чтоб они сохраняли то же вертикальное расстояние, что и окружающие их элементы (такие как параграфы и изображения; иногда называемые вертикальным ритмом) и то же расстояние по горизонтали как и между собой (посмотреть <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">законченный стилизированный пример</a> на Github, а также <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">найти исходный код</a>.)</p>
+<p>При оформлении списков, вам необходимо настроить их стили так, чтоб они сохраняли то же вертикальное расстояние, что и окружающие их элементы (такие как параграфы и изображения; иногда называемые вертикальным ритмом) и то же расстояние по горизонтали как и между собой (посмотреть <a href="https://mdn.github.io/learning-area/css/styling-text/styling-lists/">законченный стилизированный пример</a> на Github, а также <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">найти исходный код</a>.)</p>
 
 <p><span class="tlid-translation translation" lang="ru"><span title="">CSS, используемый для оформления текста и интервалов, выглядит следующим образом:</span></span></p>
 
@@ -148,7 +148,7 @@ dd {
 
 <p>Это даёт нам следующий вид:</p>
 
-<p><img alt="an ordered list with the bullet points set to appear outside the list item text." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p>
+<p><img alt="an ordered list with the bullet points set to appear outside the list item text." src="outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
 
 <p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете найти гораздо больше опций, заглянув на справочную страницу {{cssxref ("list-style-type")}}.</span></span></p>
 
@@ -163,7 +163,7 @@ dd {
   list-style-position: inside;
 }</pre>
 
-<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p>
+<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
 
 <h3 id="Использование_пользовательского_изображения_как_маркер">Использование пользовательского изображения как маркер</h3>
 
@@ -173,7 +173,7 @@ dd {
   list-style-image: url(star.svg);
 }</pre>
 
-<p><span class="tlid-translation translation" lang="ru"><span title="">Однако это свойство немного ограничено с точки зрения управления позициями</span></span>, размерами (и т.д.) маркеров. <span class="tlid-translation translation" lang="ru"><span title="">Вам лучше использовать семейство свойств {{cssxref ("background")}}, о которых вы узнаете намного больше в модуле </span></span><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">А пока вот вам образец для дегустации!</span></span></p>
+<p><span class="tlid-translation translation" lang="ru"><span title="">Однако это свойство немного ограничено с точки зрения управления позициями</span></span>, размерами (и т.д.) маркеров. <span class="tlid-translation translation" lang="ru"><span title="">Вам лучше использовать семейство свойств {{cssxref ("background")}}, о которых вы узнаете намного больше в модуле </span></span><a href="/en-US/docs/Learn/CSS/Building_blocks">Styling boxes</a><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">А пока вот вам образец для дегустации!</span></span></p>
 
 <p>В нашем законченном примере мы оформили неупорядоченный список следующим образом (<span class="tlid-translation translation" lang="ru"><span title="">поверх того, что вы уже видели выше</span></span>):</p>
 
@@ -207,7 +207,7 @@ ul li {
 
 <p>Это даёт нам следующий результат:</p>
 
-<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/16226/list_formatting.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p>
+<p><img alt="an unordered list with the bullet points set as little star images" src="list_formatting.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
 
 <h3 id="короткая_запись_list-style">короткая запись list-style</h3>
 
@@ -386,5 +386,5 @@ window.addEventListener("load", drawOutput);
  <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Стилизация списков</a></li>
  <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Стилизация ссылок</a></li>
  <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Веб-шрифты</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Вёрстка домашней страницы общественной школы</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Вёрстка домашней страницы общественной школы</a></li>
 </ul>
diff --git a/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html b/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html
index 53db98ecdd..d19626e533 100644
--- a/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html
+++ b/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html
@@ -32,7 +32,7 @@ original_slug: Learn/CSS/Styling_text/Задание:_Стилизировани
  <li>Сделайте их копии на вашем компьютере.</li>
 </ul>
 
-<p>В качестве альтернативы, вы можете пользоваться сайтами как  <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a href="https://glitch.com/">Glitch</a> чтобы выполнить оценку. Вы можете вставить HTML и заполнить CSS в одном из этих онлайн-редакторов и использовать <a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">этот URL</a> чтобы указать фоновое изображение. Если же онлайн-редактор, которым вы пользуетесь, не имеет отдельной CSS панели, тогда вводите его в элемент <code>&lt;style&gt;</code> в head документа.</p>
+<p>В качестве альтернативы, вы можете пользоваться сайтами как  <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a href="https://glitch.com/">Glitch</a> чтобы выполнить оценку. Вы можете вставить HTML и заполнить CSS в одном из этих онлайн-редакторов и использовать <a href="https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">этот URL</a> чтобы указать фоновое изображение. Если же онлайн-редактор, которым вы пользуетесь, не имеет отдельной CSS панели, тогда вводите его в элемент <code>&lt;style&gt;</code> в head документа.</p>
 
 <div class="blockIndicator note">
 <p><strong>Обратите внимание</strong>: Если вы застрянете, то попросите помощи — см. секцию {{anch("Оценка или дальнейшая помощь")}} в конце этой страницы.</p>
@@ -96,7 +96,7 @@ original_slug: Learn/CSS/Styling_text/Задание:_Стилизировани
 
 <p>Следующий скриншот показывает пример того, как может выглядеть законченный дизайн.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/12994/example2.png" style="display: block; height: 1106px; margin: 0px auto; width: 1533px;"></p>
+<p><img alt="" src="example2.png" style="display: block; margin: 0px auto;"></p>
 
 <h2 id="Оценка_или_дальнейшая_помощь">Оценка или дальнейшая помощь</h2>
 
@@ -123,5 +123,5 @@ original_slug: Learn/CSS/Styling_text/Задание:_Стилизировани
  <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Стилизация списков</a></li>
  <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Стилизация ссылок</a></li>
  <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Веб-шрифты</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Задании: Стилизация школьного сайта</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Задании: Стилизация школьного сайта</a></li>
 </ul>