new

Author: Inna Belaya

platform/tutorials/dist-quick-start/dist-html-generation.ru.md

@@ -2,6 +2,11 @@
 
 Руководство показывает, как генерировать HTML-разметку блока в браузере с помощью [предсобранных бандлов](https://tech.yandex.ru/jslibs/) библиотеки [bem-components](https://ru.bem.info/platform/libs/bem-components/). 
 
+* [Начало работы](#Начало-работы)
+* [Подключение библиотеки](#Подключение-библиотеки)
+* [Добавление блока на страницу](#Добавление-блока-на-страницу)
+* [Что дальше?](#Что-дальше)
+
 ## Начало работы
 
 Создайте локально HTML-файл с минимальным набором элементов (например, `hello.html`): 
@@ -43,10 +48,10 @@
 
 В бандлы с расширением `*.js+bemhtml.js` включен шаблонизатор [BEMHTML](https://ru.bem.info/platform/bem-xjst/8/), который преобразует [BEMJSON](https://ru.bem.info/platform/bemjson/) в HTML.
 
-### Добавление блока на страницу
+## Добавление блока на страницу
 
 Чтобы добавить блоки на страницу, выполните следующие действия:
-  1. Откройте документацию блока (например, [input](https://ru.bem.info/platform/libs/bem-components/current/touch-phone/input).
+  1. Откройте документацию блока (например, [input](https://ru.bem.info/platform/libs/bem-components/current/touch-phone/input)).
   2. Выберите подходящий вариант использования блока (например, блок [input с модификатором type в значении search](https://ru.bem.info/platform/libs/bem-components/6.0.0/touch-phone/input/#Модификатор-type-10)).
   3. Перейдите во вкладку BEMJSON.  
   ![Вкладка BEMJSON в примере блока input](https://cdn.rawgit.com/bem-site/bem-method/bem-info-data/platform/tutorials/dist-quick-start/dist-quick-start-bemjson.png)
@@ -91,6 +96,8 @@
 </html>
 ```
 
+Чтобы проверить результат, откройте файл `hello.html` в браузере.
+
 > Проект в [JSFiddle](https://jsfiddle.net/inna__neige/df6uuw7u/). Содержит реализацию [формы приветствия](./dist-quick-start.ru.md#) с помощью генерации HTML-разметки блока в браузере. 
 
 ## Что дальше?

platform/tutorials/dist-quick-start/dist-quick-start.ru.md

@@ -2,7 +2,7 @@
 
 Предварительно собранные файлы ([бандлы](https://ru.bem.info/methodology/build/#Введение)) библиотеки [bem-components](https://ru.bem.info/platform/libs/bem-components/) — это самый быстрый способ попробовать блоки библиотеки в действии.
 
-Руководство содержит пошаговую инструкцию по созданию формы привествия пользователя, которая включает следующие разделы:
+Руководство содержит пошаговую инструкцию по созданию формы привествия пользователя. Руководство включает следующие разделы:
 
 * [Быстрый старт](#Быстрый-старт). Как подключить библиотеку и вставить блок на страницу.
 * [Руководство](#Работа-с-блоками-библиотеки). Как работать с блоками библиотеки.
@@ -26,6 +26,7 @@
   ```
 
 2. Подключите библиотеку
+
   Скопируйте ссылки на предсобранные файлы библиотеки с [CDN Яндекса](https://tech.yandex.ru/jslibs/) в HTML-код страницы:
 
   ```diff
@@ -41,12 +42,12 @@
   </html>
   ```
 
-3. Вставьте блок на страницу
-  3.1 Откройте документацию блока (например, [input](https://ru.bem.info/platform/libs/bem-components/current/touch-phone/input).
-  3.2 Выберите подходящий вариант использования блока (например, блок [input с модификатором type в значении search](https://ru.bem.info/platform/libs/bem-components/6.0.0/touch-phone/input/#Модификатор-type-10)).
-  3.3 Перейдите во вкладку HTML и скопируйте код.  
-  ![Вкладка HTML в примере блока input](https://cdn.rawgit.com/bem-site/bem-method/bem-info-data/platform/tutorials/dist-quick-start/dist-quick-start-html.png)
-  3.4 Вставьте код блока в файл `hello.html`.
+3. Вставьте блок на страницу  
+  3.1 Откройте документацию блока (например, [input](https://ru.bem.info/platform/libs/bem-components/current/touch-phone/input).  
+  3.2 Выберите подходящий вариант использования блока (например, блок [input с модификатором type в значении search](https://ru.bem.info/platform/libs/bem-components/6.0.0/touch-phone/input/#Модификатор-type-10)).  
+  3.3 Перейдите во вкладку HTML и скопируйте код.    
+  ![Вкладка HTML в примере блока input](https://cdn.rawgit.com/bem-site/bem-method/bem-info-data/platform/tutorials/dist-quick-start/dist-quick-start-html.png)  
+  3.4 Вставьте код блока в файл `hello.html`.  
 
   ```diff
   <!DOCTYPE html>
@@ -68,12 +69,14 @@
   </html>
   ```
 
-4. Проверьте результат
+4. Проверьте результат  
   Откройте файл `hello.html` в браузере. 
 
 ## Работа с блоками библиотеки
 
-Не всегда достаточно увидеть, как выглядит блок на странице, часто важнее понять, как блоки могут взаимодействовать друг с другом. Чтобы научиться работать с блоками bem-components, создадим форму приветствия пользователя. Форма будет состоять из поля ввода, кнопки и фразы с приветствием. Если в поле ввода указать имя и нажать на кнопку, это имя отобразится в приветствии. 
+Не всегда достаточно увидеть, как выглядит блок на странице, часто нужно понять, как блоки могут взаимодействовать друг с другом. 
+
+Чтобы научиться работать с блоками bem-components, создадим форму приветствия пользователя. Форма будет состоять из поля ввода, кнопки и фразы с приветствием. Если в поле ввода указать имя и нажать на кнопку, это имя отобразится в приветствии. 
 
 ### Создание формы приветствия