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>

6 files changed, 87 insertions, 87 deletions

diff --git a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html
index eb4a2d4b0f..286708f392 100644
--- a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html
+++ b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html
@@ -33,7 +33,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS
 </ul>
 
 <div class="note">
-<p><strong>Примечание</strong>: Вместо этого вы можете использовать для проверки такие сайты как  <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>. Вы можете скопировать HTML и заполнить CSS в одном из этих онлайн редакторов и использовать <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">этот URL</a> чтобы указать элементу <code>&lt;img&gt;</code> файл изображения. Если используемый онлайн-редактор не имеет отдельной панели для CSS, вы можете поместить его в элемент <code>&lt;style&gt;</code> в заголовке документа.</p>
+<p><strong>Примечание</strong>: Вместо этого вы можете использовать для проверки такие сайты как  <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>. Вы можете скопировать HTML и заполнить CSS в одном из этих онлайн редакторов и использовать <a href="https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">этот URL</a> чтобы указать элементу <code>&lt;img&gt;</code> файл изображения. Если используемый онлайн-редактор не имеет отдельной панели для CSS, вы можете поместить его в элемент <code>&lt;style&gt;</code> в заголовке документа.</p>
 </div>
 
 <h2 id="Краткое_описание_проекта">Краткое описание проекта</h2>
@@ -97,7 +97,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS
 
 <p>На следующем снимке экрана показан образец того, как должен выглядеть готовый дизайн:</p>
 
-<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p>
+<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="business-card.png" style="display: block; margin: 0 auto;"></p>
 
 <h2 id="Проверка">Проверка</h2>
 
@@ -108,17 +108,17 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS
 <h2 id="В_этом_модуле">В этом модуле</h2>
 
 <ul>
- <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">Как работает CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Syntax">Синтаксис CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Selectors">Введение в селекторы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors">Простые селекторы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Селекторы по атрибутам</a></li>
- <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors">Комбинаторы и множественные селекторы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS значения и единицы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Каскадность и наследование</a></li>
- <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Box_model">Блочная модель</a></li>
+ <li><a href="/ru/docs/Learn/CSS/First_steps">Вступление в CSS</a></li>
+ <li><a href="/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></li>
+ <li><a href="/ru/docs/Learn/CSS/First_steps/How_CSS_is_structured">Синтаксис CSS</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors">Введение в селекторы</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Простые селекторы</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Селекторы по атрибутам</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Комбинаторы и множественные селекторы</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">CSS значения и единицы</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскадность и наследование</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блочная модель</a></li>
  <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Отладка CSS</a></li>
  <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Задание: Основы понимания CSS</a></li>
 </ul>
diff --git a/files/ru/learn/css/building_blocks/selectors/index.html b/files/ru/learn/css/building_blocks/selectors/index.html
index 242a0859fa..090f134d91 100644
--- a/files/ru/learn/css/building_blocks/selectors/index.html
+++ b/files/ru/learn/css/building_blocks/selectors/index.html
@@ -24,7 +24,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
  <tbody>
   <tr>
    <th scope="row">Необходимые знания:</th>
-   <td>Базовая компьютерная грамотность, <a href="/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения">основное программное обеспечение</a>, понимание <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, базовые знания HTML (смотрите <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a>), и представление о том, как работает CSS (смотрите <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>).</td>
+   <td>Базовая компьютерная грамотность, <a href="/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software">основное программное обеспечение</a>, понимание <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, базовые знания HTML (смотрите <a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), и представление о том, как работает CSS (смотрите <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>).</td>
   </tr>
   <tr>
    <th scope="row">Цель:</th>
@@ -37,7 +37,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
 
 <p>Вы уже встречались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.</p>
 
-<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>
+<p><img alt="Some code with the h1 highlighted." src="selector.png" style="border: 1px solid #cccccc;"></p>
 
 <p>Ранее вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент <code>h1</code> или класс <code>.special</code>.</p>
 
@@ -47,26 +47,26 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
 
 <p>Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в <em>лист селекторов</em>: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка <code>h1</code> и класса <code>.special</code>; я могу написать их так:</p>
 
-<pre class="brush: css notranslate"><code>h1 {
+<pre class="brush: css notranslate">h1 {
   color: blue;
 }
 
 .special {
   color: blue;
-} </code></pre>
+} </pre>
 
 <p>А могу написать короче — просто отделив селекторы запятыми:</p>
 
-<pre class="brush: css notranslate"><code>h1, .special {
+<pre class="brush: css notranslate">h1, .special {
   color: blue;
-} </code></pre>
+} </pre>
 
 <p>Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:</p>
 
-<pre class="brush: css notranslate"><code>h1,
+<pre class="brush: css notranslate">h1,
 .special {
   color: blue;
-} </code></pre>
+} </pre>
 
 <p>В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.</p>
 
@@ -76,19 +76,19 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
 
 <p>В примере ниже правило для селектора класса не будет работать, в то время как <code>h1</code> будет стилизован.</p>
 
-<pre class="brush: css notranslate"><code>h1 {
+<pre class="brush: css notranslate">h1 {
   color: blue;
 }
 
 ..special {
   color: blue;
-} </code></pre>
+} </pre>
 
 <p>Но если мы объединим селекторы, правило не применится ни к <code>h1</code>, ни к классу: оно считается недействительным.</p>
 
-<pre class="brush: css notranslate"><code>h1, ..special {
+<pre class="brush: css notranslate">h1, ..special {
   color: blue;
-} </code></pre>
+} </pre>
 
 <h2 id="Типы_селекторов">Типы селекторов</h2>
 
@@ -136,7 +136,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
 
 <h2 id="Продолжение">Продолжение</h2>
 
-<p>Ниже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или вы можете двинуться дальше: нас ждут <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors">селекторы тегов, классов и идентификаторов</a>.</p>
+<p>Ниже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или вы можете двинуться дальше: нас ждут <a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">селекторы тегов, классов и идентификаторов</a>.</p>
 
 <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>
 
@@ -156,57 +156,57 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
   <tr>
    <td><a href="/ru/docs/Web/CSS/Type_selectors">Селектор по типу</a></td>
    <td><code>h1 {  }</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors#Селекторы_по_типу">Селектор по типу</a></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%bf%d0%be_%d1%82%d0%b8%d0%bf%d1%83">Селектор по типу</a></td>
   </tr>
   <tr>
    <td><a href="/ru/docs/Web/CSS/Universal_selectors">Универсальный селектор</a></td>
    <td><code>* {  }</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors#Универсальный_селектор">Универсальный селектор</a></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a3%d0%bd%d0%b8%d0%b2%d0%b5%d1%80%d1%81%d0%b0%d0%bb%d1%8c%d0%bd%d1%8b%d0%b9_%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80">Универсальный селектор</a></td>
   </tr>
   <tr>
    <td><a href="/ru/docs/Web/CSS/Class_selectors">Селектор класса</a></td>
    <td><code>.box {  }</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors#Селекторы_классов">Селекторы классов</a></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%be%d0%b2">Селекторы классов</a></td>
   </tr>
   <tr>
    <td><a href="/ru/docs/Web/CSS/ID_selectors">Селектор ID</a></td>
    <td><code>#unique { }</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors#Селекторы_по_ID">Селекторы по ID</a></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%bf%d0%be_id">Селекторы по ID</a></td>
   </tr>
   <tr>
    <td><a href="/ru/docs/Web/CSS/Attribute_selectors">Селектор атрибутов </a></td>
    <td><code>a[title] {  }</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Attribute_selectors">Селекторы атрибутов </a></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Селекторы атрибутов </a></td>
   </tr>
   <tr>
-   <td><a href="/ru/docs/Web/CSS/Псевдо-классы">Селектор псевдоклассов</a></td>
+   <td><a href="/ru/docs/Web/CSS/Pseudo-classes">Селектор псевдоклассов</a></td>
    <td><code>p:first-child { }</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements#Что_такое_псевдокласс">Псевдоклассы</a></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#%d0%a7%d1%82%d0%be_%d1%82%d0%b0%d0%ba%d0%be%d0%b5_%d0%bf%d1%81%d0%b5%d0%b2%d0%b4%d0%be%d0%ba%d0%bb%d0%b0%d1%81%d1%81">Псевдоклассы</a></td>
   </tr>
   <tr>
    <td><a href="/ru/docs/Web/CSS/Pseudo-elements">Селектор псевдоэлементов</a></td>
    <td><code>p::first-line { }</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements#Что_такое_псевдоэлемент">Псевдоэлементы</a></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#%d0%a7%d1%82%d0%be_%d1%82%d0%b0%d0%ba%d0%be%d0%b5_%d0%bf%d1%81%d0%b5%d0%b2%d0%b4%d0%be%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82">Псевдоэлементы</a></td>
   </tr>
   <tr>
    <td><a href="/ru/docs/Web/CSS/Descendant_combinator">Селектор потомков</a></td>
    <td><code>article p</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators#Селектор_потомков">Селектор потомков</a></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80_%d0%bf%d0%be%d1%82%d0%be%d0%bc%d0%ba%d0%be%d0%b2">Селектор потомков</a></td>
   </tr>
   <tr>
    <td><a href="/ru/docs/Web/CSS/Child_combinator">Селектор дочерних элементов</a></td>
    <td><code>article &gt; p</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators#Комбинатор">Селектор дочерних элементов</a></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%9a%d0%be%d0%bc%d0%b1%d0%b8%d0%bd%d0%b0%d1%82%d0%be%d1%80">Селектор дочерних элементов</a></td>
   </tr>
   <tr>
    <td><a href="/ru/docs/Web/CSS/Adjacent_sibling_combinator">Смежные селекторы</a></td>
    <td><code>h1 + p</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators#Смежные_селекторы">Смежные селекторы </a></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%a1%d0%bc%d0%b5%d0%b6%d0%bd%d1%8b%d0%b5_%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b">Смежные селекторы </a></td>
   </tr>
   <tr>
    <td><a href="/ru/docs/Web/CSS/General_sibling_combinator">Селектор братских элементов</a></td>
    <td><code>h1 ~ p</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators#Братские_элементы">Селектор братских элементов</a></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%91%d1%80%d0%b0%d1%82%d1%81%d0%ba%d0%b8%d0%b5_%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d1%8b">Селектор братских элементов</a></td>
   </tr>
  </tbody>
 </table>
@@ -215,12 +215,12 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
 
 <ol>
  <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование </a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">CSS-селекторы </a>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors">CSS-селекторы </a>
   <ul>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors">Селекторы по типу, классу и идентификатору</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Attribute_selectors">Селекторы атрибутов </a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements">Псевдоклассы, псевдоэлементы </a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators">Комбинации селекторов </a></li>
+   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Селекторы по типу, классу и идентификатору</a></li>
+   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Селекторы атрибутов </a></li>
+   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Псевдоклассы, псевдоэлементы </a></li>
+   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Комбинации селекторов </a></li>
   </ul>
  </li>
  <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блоки в CSS </a></li>
diff --git a/files/ru/learn/css/building_blocks/styling_tables/index.html b/files/ru/learn/css/building_blocks/styling_tables/index.html
index 563122004b..7cdc57a8de 100644
--- a/files/ru/learn/css/building_blocks/styling_tables/index.html
+++ b/files/ru/learn/css/building_blocks/styling_tables/index.html
@@ -17,7 +17,7 @@ translation_of: Learn/CSS/Building_blocks/Styling_tables
  <tbody>
   <tr>
    <th scope="row">Необходимые знания:</th>
-   <td>Базовый HTML (<a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS (<a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>).</td>
+   <td>Базовый HTML (<a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS (<a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>).</td>
   </tr>
   <tr>
    <th scope="row">Цель:</th>
@@ -71,9 +71,9 @@ translation_of: Learn/CSS/Building_blocks/Styling_tables
   &lt;/tfoot&gt;
 &lt;/table&gt;</pre>
 
-<p>Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}} и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>):</p>
+<p>Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}} и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь <a href="https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>):</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p>
+<p><img alt="" src="table-unstyled.png" style="display: block; margin: 0 auto;"></p>
 
 <p>Это выглядит достаточно грубо, трудно читаемо и скучно. Нам нужно использовать немного CSS чтобы все исправить.</p>
 
@@ -128,14 +128,14 @@ th, td {
  <li>Свойство {{cssxref("table-layout")}} со значением <code>fixed</code> как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда <code>table-layout: fixed</code>, размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора <code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) ("Выберите <em>n-ый</em> дочерний элемент {{htmlelement("th")}} в последовательности, внутри элемента {{htmlelement("thead")}}") и задать им заданную в процентах ширину. Ширина колонки соответствует ширине её заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>.<br>
   <br>
   Мы также использовали {{cssxref("width")}} 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется ещё некоторая работа для правильного отображения на экранах небольших размеров).</li>
- <li>Свойство {{cssxref("border-collapse")}} со значением <code>collapse</code> это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;">Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить <code>border-collapse: collapse;</code>  рамки схлопываются в одну и так выглядит намного лучше: <img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li>
+ <li>Свойство {{cssxref("border-collapse")}} со значением <code>collapse</code> это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: <img alt="" src="no-border-collapse.png" style="display: block; margin: 0 auto;">Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить <code>border-collapse: collapse;</code>  рамки схлопываются в одну и так выглядит намного лучше: <img alt="" src="border-collapse.png" style="display: block; margin: 0 auto;"></li>
  <li>Мы установили {{cssxref("border")}} вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.</li>
  <li>Мы установили {{cssxref("padding")}} на элементах {{htmlelement("th")}} и {{htmlelement("td")}} — это создаёт в талице воздух, который позволяет ей дышать, делая её более понятной.</li>
 </ul>
 
 <p>На этом этапе наша таблица выглядит уже гораздо лучше:</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p>
+<p><img alt="" src="table-with-spacing.png" style="display: block; margin: 0 auto;"></p>
 
 <h3 id="Немного_простой_типографики">Немного простой типографики</h3>
 
@@ -186,7 +186,7 @@ tfoot th {
 
 <p>В результате таблица выглядит немного аккуратнее:</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p>
+<p><img alt="" src="table-with-typography.png" style="display: block; margin: 0 auto;"></p>
 
 <h3 id="Графика_и_цвета">Графика и цвета</h3>
 
@@ -210,7 +210,7 @@ thead th, tfoot th, tfoot td {
 
 <p>Мы добавили {{cssxref("background-image")}} в {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и изменили {{cssxref("color")}} для всего текста внутри header и footer на белый (и ещё {{cssxref("text-shadow")}}) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.</p>
 
-<p>Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания лёгкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">несколько фоновых изображений</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient">линейные градиенты</a>.</p>
+<p>Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания лёгкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">несколько фоновых изображений</a> и <a href="/en-US/docs/Web/CSS/gradient/linear-gradient()">линейные градиенты</a>.</p>
 
 <h4 id="Полосатая_зебра">Полосатая зебра</h4>
 
@@ -240,7 +240,7 @@ table {
 
 <p>Этот взрыв цвета выглядит следующим образом:</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p>
+<p><img alt="" src="table-with-color.png" style="display: block; margin: 0 auto;"></p>
 
 <p>То что получилось может быть не в вашем вкусе, но основная идея была в том, что мы попытались сделать таблицу которая не будет скучной и академической.</p>
 
@@ -258,9 +258,9 @@ table {
   letter-spacing: 1px;
 }</pre>
 
-<p>Здесь нет ничего особенного, кроме свойства {{cssxref("caption-side")}}, которое имеет значение <code>bottom</code>. В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>):</p>
+<p>Здесь нет ничего особенного, кроме свойства {{cssxref("caption-side")}}, которое имеет значение <code>bottom</code>. В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке <a href="https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>):</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p>
+<p><img alt="" src="table-with-caption.png" style="display: block; margin: 0px auto;"></p>
 
 <h2 id="Активное_обучение_Стилизация_вашей_собственной_таблицы">Активное обучение: Стилизация вашей собственной таблицы</h2>
 
@@ -290,13 +290,13 @@ table {
 <h2 id="В_этом_блоке">В этом блоке</h2>
 
 <ul>
- <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap">Box model recap</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Borders</a></li>
- <li><a href="/ru/docs/Learn/CSS/Styling_boxes/Styling_tables">Стилизация таблиц</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">Advanced box effects</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">A cool looking box</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Box model recap</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Borders</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Advanced box effects</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/A_cool_looking_box">A cool looking box</a></li>
 </ul>
 
 <p> </p>
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>