hexlet-basics · fey · Dec 3, 2025 · Dec 3, 2025 · Dec 3, 2025 · Dec 3, 2025
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 .DS_Store
 node_modules
+tmp
diff --git a/modules/10-html/40-nested-tag/assets/list.png b/modules/10-html/40-nested-tag/assets/list.png
diff --git a/modules/10-html/40-nested-tag/en/README.md b/modules/10-html/40-nested-tag/en/README.md
@@ -3,19 +3,14 @@
 
 Some elements in HTML require some tags to be nested into other. For example, lists:
 
-```html
-<ul>
-  <li>The first item in the list</li>
-  <li>The second item in the list</li>
-</ul>
-```
+![](../assets/list.png)
 
-<div class="hexlet-basics-example my-3">
+```html
   <ul class="m-0">
     <li>The first item in the list</li>
     <li>The second item in the list</li>
   </ul>
-</div>
+```
 
 The `<ul>` tag is used to define the list, and this one indicates that it's _a bulleted_ list. Inside are the `<li>` tags that define the elements of our list.
 

diff --git a/modules/10-html/40-nested-tag/es/README.md b/modules/10-html/40-nested-tag/es/README.md
@@ -3,19 +3,14 @@
 
 Algunos elementos en HTML requieren la anidación de unas etiquetas dentro de otras. Por ejemplo, las listas:
 
-```html
-<ul>
-  <li>Primer elemento de la lista</li>
-  <li>Segundo elemento de la lista</li>
-</ul>
-```
+![](../assets/list.png)
 
-<div class="hexlet-basics-example my-3">
+```html
   <ul class="m-0">
-    <li>Primer elemento de la lista</li>
-    <li>Segundo elemento de la lista</li>
+    <li>The first item in the list</li>
+    <li>The second item in the list</li>
   </ul>
-</div>
+```
 
 Para definir una lista se utiliza la etiqueta `<ul>`, que indica que es una lista _marcada_. Dentro de ella se encuentran las etiquetas `<li>`, que definen los elementos de nuestra lista.
 

diff --git a/modules/10-html/40-nested-tag/ru/README.md b/modules/10-html/40-nested-tag/ru/README.md
@@ -3,19 +3,14 @@
 
 Некоторые элементы в HTML требуют вложенности одних тегов в другие. Например, списки:
 
-```html
-<ul>
-  <li>Первый элемент списка</li>
-  <li>Второй элемент списка</li>
-</ul>
-```
+![](../assets/list.png)
 
-<div class="hexlet-basics-example my-3">
+```html
   <ul class="m-0">
-    <li>Первый элемент списка</li>
-    <li>Второй элемент списка</li>
+    <li>The first item in the list</li>
+    <li>The second item in the list</li>
   </ul>
-</div>
+```
 
 Для определения списка используется тег `<ul>`, который указывает, что это _маркированный_ список. Внутри располагаются теги `<li>`, определяющие элементы нашего списка.
 

diff --git a/modules/10-html/50-attributes/assets/tooltip.png b/modules/10-html/50-attributes/assets/tooltip.png
diff --git a/modules/10-html/50-attributes/en/README.md b/modules/10-html/50-attributes/en/README.md
@@ -1,9 +1,7 @@
 
 Page markup information can have many subtleties and nuances. For example, you can specify the type of element, but you can also pass additional information to be processed by the browser. Mouse over the text below:
 
-<div class="hexlet-basics-example my-3">
-  <p title="Tooltip. Here you can specify additional information." class="m-0">Mouse over this line of text. It's better to do this from a computer</p>
-</div>
+![](../assets/tooltip.png)
 
 When you mouse over an element, a small window will appear saying "Tooltip. Here you can specify additional information". This behavior is set using _attributes_ - special structures that can affect the output of information on the page. Each tag in HTML has several standard attributes, which are written based on this template: `attribute="value"`:
 

diff --git a/modules/10-html/50-attributes/es/README.md b/modules/10-html/50-attributes/es/README.md
@@ -1,8 +1,6 @@
 La estructura de la información en una página web incluye muchos detalles y matices. Por ejemplo, no solo se puede especificar el tipo de elemento, sino también proporcionar información adicional que será procesada por el navegador. Pase el cursor sobre el siguiente texto:
 
-<div class="hexlet-basics-example my-3">
-  <p title="Tooltip. Aquí se puede proporcionar información adicional" class="m-0">Pase el cursor sobre esta línea de texto. Es mejor hacerlo desde una computadora</p>
-</div>
+![](../assets/tooltip.png)
 
 Al pasar el cursor sobre el elemento, aparece una pequeña ventana con el texto "Tooltip. Aquí se puede proporcionar información adicional". Este comportamiento se establece mediante _atributos_, que son construcciones especiales que pueden afectar la visualización de la información en la página. Cada etiqueta en HTML tiene varios atributos estándar que se escriben según el patrón `atributo="valor"`, donde:
 

diff --git a/modules/10-html/50-attributes/ru/README.md b/modules/10-html/50-attributes/ru/README.md
@@ -1,8 +1,6 @@
 Разметка информации на странице включает в себя множество тонкостей и нюансов. Например, можно задавать не только тип элемента, но и передавать дополнительную информацию, которая будет обработана браузером. Наведите курсор на текст ниже:
 
-<div class="hexlet-basics-example my-3">
-  <p title="Всплывающая подсказка. Здесь можно указать дополнительную информацию" class="m-0">Наведите курсор мыши на эту строку текста. Лучше сделать это с компьютера</p>
-</div>
+![](../assets/tooltip.png)
 
 При наведении мыши на элемент появилось небольшое окно с текстом «Всплывающая подсказка. Здесь можно указать дополнительную информацию». Такое поведение задаётся с помощью _атрибутов_ — специальных конструкций, которые могут влиять на вывод информации на странице. Каждый тег в HTML имеет несколько стандартных атрибутов, которые записываются по шаблону `атрибут="значение"`, где:
 

diff --git a/modules/20-hypertext/10-paragraph/assets/paragraphs.png b/modules/20-hypertext/10-paragraph/assets/paragraphs.png
diff --git a/modules/20-hypertext/10-paragraph/en/README.md b/modules/20-hypertext/10-paragraph/en/README.md
@@ -13,7 +13,4 @@ Paragraphs are created using the paired `<p>` tag with a small amount of text in
 
 This is what they look like in the browser:
 
-<div class="hexlet-basics-example my-3">
-  <p>First paragraph</p>
-  <p class="m-0">Second paragraph</p>
-</div>
+![](../assets/paragraphs.png)
diff --git a/modules/20-hypertext/10-paragraph/es/README.md b/modules/20-hypertext/10-paragraph/es/README.md
@@ -7,13 +7,10 @@ La división se realiza en bloques de significado pequeños. Esto no solo hace q
 Los párrafos se crean utilizando la etiqueta de apertura y cierre `<p>`, dentro de la cual se coloca una pequeña parte del texto. Por ejemplo:
 
 ```html
-<p>Primer párrafo</p>
-<p>Segundo párrafo</p>
+<p>First paragraph</p>
+<p>Second paragraph</p>
 ```
 
 Así es como se ven en el navegador:
 
-<div class="hexlet-basics-example my-3">
-  <p>Primer párrafo</p>
-  <p class="m-0">Segundo párrafo</p>
-</div>
+![](../assets/paragraphs.png)
diff --git a/modules/20-hypertext/10-paragraph/ru/README.md b/modules/20-hypertext/10-paragraph/ru/README.md
@@ -7,13 +7,10 @@
 Параграфы создаются с помощью парного тега `<p>`, в тело которого помещается небольшая часть текста. Например:
 
 ```html
-<p>Первый параграф</p>
-<p>Второй параграф</p>
+<p>First paragraph</p>
+<p>Second paragraph</p>
 ```
 
 Вот как они выглядят в браузере:
 
-<div class="hexlet-basics-example my-3">
-  <p>Первый параграф</p>
-  <p class="m-0">Второй параграф</p>
-</div>
+![](../assets/paragraphs.png)
diff --git a/modules/20-hypertext/20-text-style/assets/bold.png b/modules/20-hypertext/20-text-style/assets/bold.png
diff --git a/modules/20-hypertext/20-text-style/assets/em.png b/modules/20-hypertext/20-text-style/assets/em.png
diff --git a/modules/20-hypertext/20-text-style/assets/strong.png b/modules/20-hypertext/20-text-style/assets/strong.png
diff --git a/modules/20-hypertext/20-text-style/en/EXERCISE.md b/modules/20-hypertext/20-text-style/en/EXERCISE.md
@@ -1,7 +1,7 @@
 Add the phrase to the editor
 
-<div class="hexlet-basics-example my-3">
-  <span>Hexlet - hands-on programming courses</span>
-</div>
+```text
+Hexlet - hands-on programming courses
+```
 
 in which make the word "courses" bold (physical markup) and highlight the word "programming" in italics (logical markup). Don't forget to wrap the phrase in a paragraph
diff --git a/modules/20-hypertext/20-text-style/en/README.md b/modules/20-hypertext/20-text-style/en/README.md
@@ -9,17 +9,14 @@ To bold the text, one of the two paired tags is used: `<b>` or `<strong>`:
 <p>Code Basics — programming <b>courses</b>.</p>
 ```
 
-<div class="hexlet-basics-example my-3">
-  <p class="m-0">Code Basics — programming <b>courses</b>.</p>
-</div>
+![](../assets/bold.png)
 
 ```html
 <p>HTML — <strong>Hypertext Markup Language</strong></p>
 ```
 
-<div class="hexlet-basics-example my-3">
-  <p class="m-0">HTML — <strong>Hypertext Markup Language</strong></p>
-</div>
+![](../assets/strong.png)
+
 
 Both examples illustrate adding boldface to a section of text. But why were two different tags used for visually identical results? It's all about _semantics_, that is, meaning. In this case, the meaning of the tag:
 
@@ -33,12 +30,10 @@ Once upon a time, the developers wanted these tags to look different and differ
 The italic emphasis is very similar to the bold emphasis, but it emphasizes the key part, not the key part. For example:
 
 ```html
-<p><i>Code Basics</i> — <em>programming</em> free courses</p>
+<p><i>Code Basics</i> — programming <em>free</em> courses</p>
 ```
 
-<div class="hexlet-basics-example my-3">
-  <p class="m-0"><i>Code Basics</i> — <em>programming</em> free courses</p>
-</div>
+![](../assets/em.png)
 
 In this example, two parts of the text were marked:
 

diff --git a/modules/20-hypertext/20-text-style/es/EXERCISE.md b/modules/20-hypertext/20-text-style/es/EXERCISE.md
@@ -1,7 +1,7 @@
 Agrega al editor la siguiente frase
 
-<div class="hexlet-basics-example my-3">
-  <span>Hexlet — courses prácticos de programming</span>
-</div>
+```text
+Hexlet — courses prácticos de programming
+```
 
 donde la palabra "cursos" esté en negritas (formato físico) y el conjunto "programación" esté en cursiva (formato lógico). No olvides envolver la frase con una etiqueta de párrafo (`<p>`).
diff --git a/modules/20-hypertext/20-text-style/es/README.md b/modules/20-hypertext/20-text-style/es/README.md
@@ -5,20 +5,17 @@
 Para resaltar el texto en negritas, se utiliza uno de los dos pares de etiquetas: `<b>` o `<strong>`:
 
 ```html
-<p>Code Basics — <b>cursos</b> de programación.</p>
+<p>Code Basics — programming <b>courses</b>.</p>
 ```
 
-<div class="hexlet-basics-example my-3">
-  <p class="m-0">Code Basics — <b>cursos</b> de programación.</p>
-</div>
+![](../assets/bold.png)
 
 ```html
-<p>HTML — <strong>lenguaje de marcado de hipertexto</strong></p>
+<p>HTML — <strong>Hypertext Markup Language</strong></p>
 ```
 
-<div class="hexlet-basics-example my-3">
-  <p class="m-0">HTML — <strong>lenguaje de marcado de hipertexto</strong></p>
-</div>
+![](../assets/strong.png)
+
 
 Ambos ejemplos ilustran cómo agregar formato en negritas a un fragmento de texto. Pero, ¿por qué se utilizaron dos etiquetas diferentes para lograr resultados visualmente iguales? Esto se debe a la _semántica_, es decir, el significado. En este caso, el significado de la etiqueta es:
 
@@ -32,12 +29,10 @@
 En su significado, el resaltado en cursiva es muy similar al resaltado en negritas, pero en lugar de enfatizar partes clave, se pone énfasis. Por ejemplo:
 
 ```html
-<p><i>Code Basics</i> — <em>cursos gratuitos</em> de programación</p>
+<p><i>Code Basics</i> — programming <em>free</em> courses</p>
 ```
 
-<div class="hexlet-basics-example my-3">
-  <p class="m-0"><i>Code Basics</i> — <em>cursos gratuitos</em> de programación</p>
-</div>
+![](../assets/em.png)
 
 En este ejemplo, se marcaron dos partes del texto:
 

diff --git a/modules/20-hypertext/20-text-style/ru/EXERCISE.md b/modules/20-hypertext/20-text-style/ru/EXERCISE.md
@@ -1,7 +1,7 @@
 Добавьте в редактор фразу
 
-<div class="hexlet-basics-example my-3">
-  <span>Hexlet — hands-on programming courses</span>
-</div>
+```text
+Hexlet - hands-on programming courses
+```
 
 в которой слово «courses» сделайте жирным начертанием (физическая разметка), и выделите сочетание «programming» курсивом (логическая разметка). Не забудьте обернуть фразу в параграф
diff --git a/modules/20-hypertext/20-text-style/ru/README.md b/modules/20-hypertext/20-text-style/ru/README.md
@@ -6,20 +6,16 @@
 Для выделения текста жирным используется один из двух парных тегов: `<b>` или `<strong>`:
 
 ```html
-<p>Code Basics — <b>курсы</b> по программированию.</p>
+<p>Code Basics — programming <b>courses</b>.</p>
 ```
 
-<div class="hexlet-basics-example my-3">
-  <p class="m-0">Code Basics — <b>курсы</b> по программированию.</p>
-</div>
+![](../assets/bold.png)
 
 ```html
-<p>HTML — <strong>язык разметки гипертекста</strong></p>
+<p>HTML — <strong>Hypertext Markup Language</strong></p>
 ```
 
-<div class="hexlet-basics-example my-3">
-  <p class="m-0">HTML — <strong>язык разметки гипертекста</strong></p>
-</div>
+![](../assets/strong.png)
 
 Оба примера иллюстрируют добавление жирного начертания к участку текста. Но почему для визуально одинаковых результатов использовалось два разных тега? Дело в _семантике_, то есть смысловом значении. В данном случае смысловом значении тега:
 
@@ -33,12 +29,10 @@
 По своему смыслу курсивное выделение очень похоже на жирное, но им выделяется не ключевая часть, а ставится акцент. Например:
 
 ```html
-<p><i>Code Basics</i> — <em>бесплатные курсы</em> по программированию</p>
+<p><i>Code Basics</i> — programming <em>free</em> courses</p>
 ```
 
-<div class="hexlet-basics-example my-3">
-  <p class="m-0"><i>Code Basics</i> — <em>бесплатные курсы</em> по программированию</p>
-</div>
+![](../assets/em.png)
 
 В этом примере были размечены две части текста:
 

diff --git a/modules/20-hypertext/25-hypertext-header/assets/headings.png b/modules/20-hypertext/25-hypertext-header/assets/headings.png
diff --git a/modules/20-hypertext/25-hypertext-header/en/README.md b/modules/20-hypertext/25-hypertext-header/en/README.md
@@ -18,14 +18,7 @@ To create titles used 6 paired tags: `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h
 <h6>Title of the sixth level</h6>
 ```
 
-<div class="hexlet-basics-example my-3">
-  <h1>Title of the first level</h1>
-  <h2>Title of the second level</h2>
-  <h3>Title of the third level</h3>
-  <h4>Title of the fourth level</h4>
-  <h5>Title of the fifth level</h5>
-  <h6>Title of the sixth level</h6>
-</div>
+![](../assets/headings.png)
 
 Each lower level heading is a subsection of a higher level heading. This is very similar to the table of contents of any book, the structure of which might look like this:
 

diff --git a/modules/20-hypertext/25-hypertext-header/es/README.md b/modules/20-hypertext/25-hypertext-header/es/README.md
@@ -10,22 +10,15 @@ Estas divisiones lógicas en títulos permiten orientarse más rápidamente en e
 Para crear títulos se utilizan 6 pares de etiquetas: `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, donde `<h1>` es el título de primer nivel, el más importante y que describe el tema principal del texto, y `<h6>` es el título de nivel más bajo.
 
 ```html
-<h1>Título de primer nivel</h1>
-<h2>Título de segundo nivel</h2>
-<h3>Título de tercer nivel</h3>
-<h4>Título de cuarto nivel</h4>
-<h5>Título de quinto nivel</h5>
-<h6>Título de sexto nivel</h6>
+<h1>Title of the first level</h1>
+<h2>Title of the second level</h2>
+<h3>Title of the third level</h3>
+<h4>Title of the fourth level</h4>
+<h5>Title of the fifth level</h5>
+<h6>Title of the sixth level</h6>
 ```
 
-<div class="hexlet-basics-example my-3">
-  <h1>Título de primer nivel</h1>
-  <h2>Título de segundo nivel</h2>
-  <h3>Título de tercer nivel</h3>
-  <h4>Título de cuarto nivel</h4>
-  <h5>Título de quinto nivel</h5>
-  <h6>Título de sexto nivel</h6>
-</div>
+![](../assets/headings.png)
 
 Cada título de nivel inferior es una subsección del título de nivel superior. Esto es muy similar a la tabla de contenido de cualquier libro, cuya estructura puede ser así:
 

diff --git a/modules/20-hypertext/25-hypertext-header/ru/README.md b/modules/20-hypertext/25-hypertext-header/ru/README.md
@@ -9,23 +9,17 @@
 
 Для создания заголовков используется 6 парных тегов: `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, где `<h1>` — заголовок первого уровня, самый важный и описывающий главную тему текста, а `<h6>` — заголовок самого низшего уровня.
 
+
 ```html
-<h1>Заголовок первого уровня</h1>
-<h2>Заголовок второго уровня</h2>
-<h3>Заголовок третьего уровня</h3>
-<h4>Заголовок четвёртого уровня</h4>
-<h5>Заголовок пятого уровня</h5>
-<h6>Заголовок шестого уровня</h6>
+<h1>Title of the first level</h1>
+<h2>Title of the second level</h2>
+<h3>Title of the third level</h3>
+<h4>Title of the fourth level</h4>
+<h5>Title of the fifth level</h5>
+<h6>Title of the sixth level</h6>
 ```
 
-<div class="hexlet-basics-example my-3">
-  <h1>Заголовок первого уровня</h1>
-  <h2>Заголовок второго уровня</h2>
-  <h3>Заголовок третьего уровня</h3>
-  <h4>Заголовок четвёртого уровня</h4>
-  <h5>Заголовок пятого уровня</h5>
-  <h6>Заголовок шестого уровня</h6>
-</div>
+![](../assets/headings.png)
 
 Каждый заголовок низшего уровня является подразделом заголовка более верхнего уровня. Это очень похоже на оглавление любой книги, структура которой может выглядеть так:
 

diff --git a/modules/20-hypertext/30-lists/assets/ol.png b/modules/20-hypertext/30-lists/assets/ol.png
diff --git a/modules/20-hypertext/30-lists/assets/paragraphs.png b/modules/20-hypertext/30-lists/assets/paragraphs.png
diff --git a/modules/20-hypertext/30-lists/assets/ul.png b/modules/20-hypertext/30-lists/assets/ul.png