11/24/2024 0 Комметариев

Как научиться работать с html-кодом?

Как научиться работать с html-кодом?

На чтение

26 мин.

Просмотров

69

Дата обновления

10.03.2025

#COURSE##INNER#

Начните с базовых элементов. Изучите ключевые HTML-теги, такие как

,

-

, , ,
,
,
. Понимание этих тегов – фундамент для создания любого веб-документа. Пробуйте создавать простые страницы, постепенно добавляя новые теги.

Практикуйтесь регулярно. Создавайте различные HTML-структуры. Не бойтесь экспериментировать с разметкой: от простых списков до сложных таблиц. Начиная с самых простых страниц, постепенное усложнение позволит вам закрепить знания и развить навыки.

Используйте онлайн-ресурсы. Многочисленные онлайн-ресурсы помогут вам разобраться с HTML. Обращайтесь к учебникам, онлайн-курсам, документации W3Schools и другим полезным источникам.

Понимайте атрибуты тегов. Не просто используйте теги: познакомьтесь с их атрибутами (например, `src` для , `href` для ). Атрибуты задают поведение и характеристики элементов.

Пробуйте разные методы. Не все разбираются в коде одинаково успешно. Найдите свой способ обучения: изучение на практике, проработка примеров, создание проектов – выбирайте тот вариант, который лучше всего подойдет вам.

Как научиться работать с HTML-кодом?

Начните с простого: изучите базовые теги и их атрибуты. Например,
,
,
, , .

Создавайте небольшие веб-страницы. Начните с простых макетов, постепенно добавляя более сложные элементы.

Используйте онлайн-редакторы HTML. Они позволяют видеть результат в реальном времени, что ускоряет процесс обучения.

Практикуйтесь! Создавайте разные страницы - с разметкой текста, изображениями, списками, ссылками. Попробуйте воссоздать примеры из учебников или онлайн-курсов.

Проверяйте валидность кода. Используйте валидаторы HTML, чтобы убедиться, что ваш код соответствует стандартам.

Изучайте семантику тегов. Понимайте, зачем тот или иной тег используется. Это поможет создавать более структурированный и понятный код.

Пользуйтесь справочниками и документацией. Найдите надежные ресурсы с подробными описаниями тегов и их атрибутов.

Не бойтесь экспериментировать и нарушать существующие инструкции. Развивайте собственное видение языка.

Обращайтесь к сообществам разработчиков. Общение, помощь, ответы и поддержка помогут в освоении новых приёмов.

Установка необходимых инструментов

Для работы с HTML-кодом вам понадобится текстовый редактор и браузер. Рекомендуем Sublime Text (бесплатный, но не самый простой вариант для новичков) или VS Code (бесплатный, функциональный, с возможностью установки расширений). Выберите редактор, с которым вы будете чувствовать себя комфортно.

Для просмотра результатов кода понадобится браузер. Самые распространенные и удобные – Chrome, Firefox, Safari. Установите любой из них. После установки браузера, вы сможете тестировать свой HTML-код непосредственно в нём.

Не требуются специальные платные программы или сложные установщики. Основное – это работа с текстовым редактором и браузером.

Основные теги и их практическое применение

Начните с понимания базовых тегов. Вот таблица с примерами их использования:

Тег Описание Пример использования Результат

`...` Основной заголовок `Мой сайт`

`...` Абзац текста `Привет, мир!`
Привет, мир!

`...` Ссылка `Перейти на сайт` Перейти на сайт

Изображение

`...` Неупорядоченный список `Элемент 1 Элемент 2`
Элемент 1
Элемент 2

`...` Упорядоченный список `Пункт 1 Пункт 2`
Пункт 1
Пункт 2

`...` Таблица `Ячейка 1 Ячейка 2`
Ячейка 1 Ячейка 2

Важно: Используйте правильные атрибуты (например, `href` для ссылок, `src` для изображений) и правильные имена элементов (например, , а не для простых картинок). Правильный HTML гарантирует корректное отображение страницы.

Работа с атрибутами элементов

Для управления отображением и поведением HTML-элементов, атрибуты играют ключевую роль. Они предоставляют дополнительные сведения об элементе.

Рекомендация 1: Понимание структуры. Атрибуты добавляются в HTML-теги. Пример:

Здесь "src", "alt" и "width" – атрибуты.

src определяет путь к изображению.

alt описывает изображение для пользователей с отключенным отображением картинок.

width задаёт ширину изображения.

Рекомендация 2: Типы атрибутов. Не все атрибуты работают одинаково. Некоторые определяют свойство, другие – значение, некоторые – и то, и другое.

Атрибуты событий: Они реагируют на события пользователя, например, клик, наведение курсора.

Атрибуты стилей: Определяют визуальные характеристики элемента (цвет, размер, расположение). Например, `style="color:red;"`

Атрибуты данных: Хранят произвольную информацию о элементе.

Рекомендация 3: Используйте атрибуты для семантики. Правильно подобранные атрибуты помогают поисковым системам и программам-считывателям понимать контекст, например, `Ссылка` (target="_blank").

Атрибут `target="_blank"` открывает ссылку в новой вкладке.

Ключевые моменты: Знайте разницу между атрибутами и содержимым тегов.

Атрибуты формируют поведение элементов, а содержимое отвечает за отображаемый текст или контент.

Создание структурированной страницы

Начните с базовой структуры HTML5: , , и . В – тег </code> – краткое описание страницы. В <code><body></code> размещайте контент.</p> <p>Используйте смысловые теги: <code><header></code> (шапка), <code><nav></code> (навигация), <code><main></code> (главная часть), <code><article></code> (статья), <code><aside></code> (дополнительная информация), <code><footer></code> (футер). Правильно используйте <code><section></code> для разделов.</p> <p>Структурируйте контент с помощью заголовков: <code><h1></code> (главный), <code><h2></code>, <code><h3></code> и т.д. Используйте <code><p></code> для параграфов.</p> <p>Размещайте элементы в логически корректном порядке. Убедитесь в правильном использовании <code><ul></code> и <code><ol></code> для списков. <em>Правильное использование семантических тегов значительно улучшит доступность и SEO страницы.</em></p> <p>Для навигации применяйте <code><ul></code> или <code><nav></code> вместе с соответствующими элементами. <strong>Не пренебрегайте важностью alt-атрибутов для изображений</strong> <code><img src="image.jpg" alt="Описание изображения"></code>.</p> <p>Проверяйте структуру страницы валидатором HTML. Это поможет выявить ошибки и улучшить качество кода.</p> <h2>Использование внешних ресурсов</h2> <p>Подключайте CSS-стили и JavaScript-скрипты с помощью тегов <code><link></code> и <code><script></code>. Для CSS указывайте путь к файлу стилей в атрибуте <code>href</code>. Для JavaScript - в атрибуте <code>src</code> (лучше отдавать предпочтение относительным путям).</p> <p><b>Пример подключения CSS:</b></p> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p><b>Пример подключения JavaScript:</b></p> <pre><code><script src="script.js"></script></code></pre> <p>Если файлы находятся в другой папке, используйте относительные пути. Например, если файл <code>style.css</code> находится в папке <code>css</code>, путь будет <code>"css/style.css"</code>.</p> <p><b>Важно!</b> Проверяйте наличие ошибок в подключенных файлах. Простые ошибки в CSS или JavaScript могут блокировать отображение или работу страницы.</p> <p>Используйте <code><link></code> внутри <code><head></code> и <code><script></code> обычно перед закрывающим тегом <code></body></code>.</p> <p>Для изображений используйте тег <code><img src="путь_к_изображению"></code>. Изображения обычно хранятся в отдельной папке.</p> <p>Убедитесь, что путь к внешним ресурсам корректен. Ошибки в путях приведут к ошибкам загрузки.</p> <h2>Отладка и оптимизация кода</h2> <p>Используйте инструменты разработчика браузера. Инструменты разработчика (например, в Chrome DevTools) позволяют исследовать HTML, CSS и JavaScript в реальном времени. С их помощью вы можете видеть, как элементы отображаются на странице, отлавливать ошибки в JavaScript-коде, а также анализировать производительность.</p> <p>Изучайте консоль ошибок. Консоль браузера позволит вам увидеть сообщения об ошибках JavaScript. Важно не только прочитать сообщение, но и понять, что с ним делать. Конкретная ошибка часто указывает на место в коде, нуждающемся в исправлении.</p> <ul> <li>Проверяйте структуру HTML: валидатор HTML поможет увидеть незакрытые теги, опечатки и другие проблемы.</li> <li>Используйте CSS-инспекторы, чтобы выявлять конфликты стилей.</li> <li>Используйте отладчики JavaScript: они помогут зафиксировать неисправности в вашем скрипте.</li> </ul> <p>Правильно используйте браузерные инструменты для профилирования. Эти инструменты показывают, какие части кода занимают больше времени. Это помогает понять узкие места и оптимизировать код для лучшей производительности страницы. Замеряйте время загрузки, кол-во запросов, используйте инструменты для оценки.</p> <p>Оптимизируйте CSS-свойства для повышения производительности. Избегайте неиспользуемого или избыточного кода CSS. Выбирайте высокоэффективные селекторы. Объединяйте связанные стили в один файл.</p> <p>Уменьшайте размер файлов. Сжимайте ваши HTML, CSS и JavaScript-файлы с помощью специального программного обеспечения, чтобы снизить размер файла и ускорить загрузку страницы. Обращайте внимание на размер JS и CSS.</p> <ol> <li>Минимизируйте JavaScript и CSS.</li> <li>Используйте кэширование.</li> <li>Выбирайте эффективные изображения.</li> </ol> <p>Проверяйте код на разных устройствах и браузерах. Проверьте, как ваш код отображается на различных устройствах (например, мобильных телефонах) и в разных браузерах (например, Chrome, Firefox, Safari), чтобы убедиться, что он работает корректно на всех платформах. Используйте инструменты для кроссбраузерной совместимости.</p> <h2>Вопрос-ответ:</h2> <h4>Как быстро освоить HTML и начать создавать простые веб-страницы?</h4> <p>Для быстрого старта с HTML рекомендуется сочетать практику с понятным изложением материала. Выберите учебник или онлайн-курс, которые не запутают вас сложной терминологией. Сконцентрируйтесь на базовых элементах: теги, атрибуты, создание заголовков, списков, абзацев. Создавайте небольшие страницы, постепенно усложняя их. Не бойтесь экспериментировать и искать информацию об HTML-элементах в интернете — это важная часть процесса обучения. Очень полезно сразу же практиковаться, создавая собственные страницы, а не только повторяя примеры.</p> <h4>Какие инструменты нужны для работы с HTML-кодом, помимо текстового редактора?</h4> <p>Помимо простого текстового редактора, полезны инструменты визуального редактирования HTML. Они позволяют видеть результат работы в реальном времени. Например, такие приложения, как Sublime Text или Atom, облегчают работу с кодом, предоставляя возможности автодополнения, подсветки синтаксиса, и другие улучшения работы с кодом. Также, есть специализированные IDE (интегрированные среды разработки) для веб-разработки, которые содержат дополнительные инструменты, такие как отладка и управление проектами. Выбор инструмента зависит от ваших предпочтений и сложности ваших задач.</p> <h4>Какие ошибки часто допускают начинающие при работе с HTML и как их избежать?</h4> <p>Частые ошибки начинающих - это забывание закрывающих тегов, неправильное использование атрибутов, недопонимание взаимосвязей между тегами, и проблемы с вложенностью. Изучение правильного синтаксиса и структуры кода (например, используя хорошую документацию или онлайн-курсы) поможет. Полезно обращать внимание, как элементы работают совместно и как определённые теги влияют на вывод страницы. Некоторые ошибки можно обнаружить самостоятельно с помощью инструментов браузера, например, инспектора. Проверка своей работы на разных видах устройств также помогает найти потенциальные недочёты.</p> <h4>Как научиться понимать структуру и логику HTML-кода чужих веб-сайтов?</h4> <p>Чтобы понимать чужой код, нужно обращать внимание на логическое построение страницы. Пробуйте "разобрать" код, обращая внимание на соответствие заголовков и секций, расположение элементов, стили и их связь. Изучение чужого кода полезно для понимания разных подходов и практику применения разных тегов. Полезно искать на онлайн-платформах примеры реализации тех или иных задач, анализировать кодовые решения и выявлять, как авторы подходят к проблеме.</p> <h4>Нужно ли изучать CSS, чтобы работать с HTML, или можно сначала освоить только HTML?</h4> <p>Освоение HTML и CSS идут рука об руку, так как HTML создаёт структуру, а CSS определяет внешний вид. Вы можете сначала освоить HTML и создать базовые веб-страницы, но для работы с дизайном страницы, а также её визуальной частью вам нужно будет изучить CSS. Изучение CSS поможет узнать как применить стили к элементам HTML, для создания более привлекательных и функциональных веб-страниц.</p> </div> <div class="article-footer"> <div class="tags"> <a href="/blog/kursy-html-i-css/">Курсы HTML и CSS</a> </div> <div class="blog-share"> <span>Поделиться:</span> <div class="ya-share2" data-curtain data-shape="round" data-services="vkontakte,telegram,viber,whatsapp"> <div class="ya-share2container ya-share2container_size_m ya-share2__container_color-scheme_normal ya-share2__container_shape_round"> <ul class="ya-share2list ya-share2list_direction_horizontal"> <li class="ya-share2item ya-share2item_service_vkontakte"> <a class="ya-share2__link" href="https://vk.com/share.php?url=https://kimgid.ru/blog/kak-nauchitsya-rabotat-s-html-kodom/&title=Как научиться работать с html-кодом?&utm_source=share2" rel="nofollow noopener" target="_blank" title="ВКонтакте"> <span class="ya-share2badge"> <span class="ya-share2icon"></span> </span> <span class="ya-share2title">ВКонтакте</span> </a> </li> <li class="ya-share2item ya-share2__item_service_telegram"> <a class="ya-share2__link" href="https://t.me/share/url?url=https://kimgid.ru/blog/kak-nauchitsya-rabotat-s-html-kodom/&text=Как научиться работать с html-кодом?&utm_source=share2" target="_blank" rel="nofollow noopener"> <span class="ya-share2badge"> <span class="ya-share2icon"></span> </span> <span class="ya-share2title">Telegram</span> </a> </li> <li class="ya-share2item ya-share2__item_service_viber"> <a class="ya-share2__link" href="viber://forward?text=Блог kimgid https://kimgid.ru/blog/kak-nauchitsya-rabotat-s-html-kodom/&utm_source=share2" rel="nofollow" target="_blank" title="Viber"> <span class="ya-share2badge"> <span class="ya-share2icon"></span> </span> <span class="ya-share2title">Viber</span> </a> </li> <li class="ya-share2item ya-share2__item_service_whatsapp"> <a class="ya-share2__link" href="https://api.whatsapp.com/send?text=Как научиться работать с html-кодом? https://kimgid.ru/blog/kak-nauchitsya-rabotat-s-html-kodom/&utm_source=share2" rel="nofollow noopener" target="_blank" title="WhatsApp"> <span class="ya-share2badge"> <span class="ya-share2icon"></span> </span> <span class="ya-share2__title">WhatsApp</span> </a> </li> </ul> </div> </div> </div> </div> </div> <meta property="og:type" content="website"> <meta property="og:site_name" content="instagramer.info"> <meta property="og:type" content="article" /> <meta name="author" content="" /> <meta property="article:published_time" content="18.02.2025 01:02:57" /> <meta property="article:modified_time" content="10.03.2025 01:03:37" /> <meta property="og:url" content="https://instagramer.info/blog/kak-nauchitsya-rabotat-s-html-kodom/"> <meta property="og:locale" content="ru"> <meta property="og:title" content="Блог \ Как научиться работать с html-кодом? | instagramer.info"> <meta property="og:description" content=""> <meta property="og:image" content="https://instagramer.info/upload/iblock/58a/3vqsdv2tk7ijvd2gq1zqzi8htiixu9zd/peredacha_programmy_ot_razrabotchika_treneram_obuchenie.png"> <div class="pane related-posts"> <h4 class="decored-title">Похожие статьи</h4> <div class="row"> <div class="col-lg-4 mb-4 mb-lg-0"> <div class="post-preview"> <div class="post-preview-cover"><a href="/blog/kak-nauchitsya-rabotat-s-html-kodom/"><img src="/upload/iblock/58a/3vqsdv2tk7ijvd2gq1zqzi8htiixu9zd/peredacha_programmy_ot_razrabotchika_treneram_obuchenie.png" alt="Как научиться работать с html-кодом?"></a></div> <div class="post-preview-title"><a href="/blog/kak-nauchitsya-rabotat-s-html-kodom/">Как научиться работать с html-кодом?</a></div> <span>11/24/2024</span> </div> </div> </div> </div> <div class="pane pe-0 ps-0"> <div class="decored-title">0 Комментариев</div> <div class="comm-list"> </div> </div> <div class="pane"> <div>Комментариев на модерации: 0</div> <div class="decored-title">Оставьте комментарий</div> <div class="comm-form"> <form method="post" enctype="multipart/form-data" class="comment form"> <div class="row"> <div class="col-lg-12 mb-3"> <div class="rate-block"> <label>Ваша оценка</label> <div class="rating"> <div class="votes_block with-text"> <div class="ratings"> <div class="item-rating" data-message="Очень плохо"><i class="svg inline svg-inline-star" aria-hidden="true"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_172_19507)"> <path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path> <path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path> <path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path> </g> <defs> <clipPath id="clip0_172_19507"> <rect width="25" height="24" fill="white"></rect> </clipPath> </defs> </svg> </i></div> <div class="item-rating" data-message="Плохо"><i class="svg inline svg-inline-star" aria-hidden="true"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_172_19507)"> <path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path> <path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path> <path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path> </g> <defs> <clipPath id="clip0_172_19507"> <rect width="25" height="24" fill="white"></rect> </clipPath> </defs> </svg> </i></div> <div class="item-rating" data-message="Нормально"><i class="svg inline svg-inline-star" aria-hidden="true"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_172_19507)"> <path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path> <path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path> <path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path> </g> <defs> <clipPath id="clip0_172_19507"> <rect width="25" height="24" fill="white"></rect> </clipPath> </defs> </svg> </i></div> <div class="item-rating" data-message="Хорошо"><i class="svg inline svg-inline-star" aria-hidden="true"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_172_19507)"> <path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path> <path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path> <path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path> </g> <defs> <clipPath id="clip0_172_19507"> <rect width="25" height="24" fill="white"></rect> </clipPath> </defs> </svg> </i></div> <div class="item-rating" data-message="Отлично"><i class="svg inline svg-inline-star" aria-hidden="true"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_172_19507)"> <path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path> <path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path> <path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path> </g> <defs> <clipPath id="clip0_172_19507"> <rect width="25" height="24" fill="white"></rect> </clipPath> </defs> </svg> </i></div> </div> </div> </div> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="">Ваше имя</label> <div class="input-box" required> <i class="far fa-user"></i> <input type="text" class="form-control" required name="name"> </div> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="">Ваша почта</label> <div class="input-box" required> <i class="far fa-envelope"></i> <input type="email" class="form-control" required name="email"> </div> </div> </div> </div> <div class="form-group"> <div class="input-box"> <i class="far fa-comment-alt"></i> <textarea name="comment" id="" class="form-control"></textarea> </div> </div> <input type="hidden" name="article" value="70406"> <input type="hidden" name="rating" value="5" class="rating_form"> <input type="hidden" name="link" value="https://instagramer.info/blog/kak-nauchitsya-rabotat-s-html-kodom/"> <input type="hidden" name="ip" value="3.144.87.230"> <input type="hidden" name="sid" value="34"> <div class="row"> <div class="col-lg-6"> <div class="form-group"> <label for="">Прикрепите фото</label> <input type="file" class="form-control" name="file"> </div> <div class="form-check mb-4"> <input class="form-check-input" type="checkbox" id="agree2" name="agreement" checked> <label class="form-check-label" for="agree2"> Я соглашаюсь на <a href="#">обработку персональных данных</a> </label> </div> </div> </div> <div class="row mb-3"> <div class="col-lg-4"> <button type="submit" class="btn btn-full">Отправить</button> </div> </div> </form> <div class="modal-content inline_success"> <div class="modal-body"> <div class="thank-ico"> <img src="/local/templates/kimgid/img/check.svg" width="93" alt=""> </div> <p>Ваш комментарий добавлен! <br>Он будет размещен после модерации</p> </div> </div> </div> </div> </div> <div class="sidebar"> <div class="widget"> <h3>Популярные статьи</h3> <div class="wiget-grp"> </div> </div> <div class="widget"> <h3>Categories</h3> <ul class="cat-nav"> <li><a href="/blog/kursy-ux1/">Курсы UX</a></li> <li><a href="/blog/kursy-backend-i-frontend-razrabotki/">Курсы Backend и frontend разработки</a></li> <li><a href="/blog/kursy-deep-learning/">Курсы Deep Learning</a></li> <li><a href="/blog/kursy-google-sheets/">Курсы Google Sheets</a></li> <li><a href="/blog/kursy-html-i-css/">Курсы HTML и CSS</a></li> <li><a href="/blog/kursy-it-rekrutinga/">Курсы IT рекрутинга</a></li> <li><a href="/blog/kursy-mba-v-it/">Курсы MBA в IT</a></li> <li><a href="/blog/kursy-product-growth/">Курсы Product Growth</a></li> <li><a href="/blog/kursy-python/">Курсы Python</a></li> <li><a href="/blog/kursy-soft-skills/">Курсы Soft skills</a></li> <li><a href="/blog/kursy-unit-ekonomiki/">Курсы Unit-экономики</a></li> <li><a href="/blog/kursy-ux/">Курсы UX</a></li> <li><a href="/blog/kursy-ux-analitiki/">Курсы UX аналитики</a></li> <li><a href="/blog/kursy-vr/">Курсы VR</a></li> <li><a href="/blog/kursy-akterskogo-masterstva/">Курсы Актерского мастерства</a></li> <li><a href="/blog/kursy-angliyskogo-yazyka/">Курсы Английского языка</a></li> <li><a href="/blog/kursy-biznes-analiza/">Курсы Бизнес-анализа</a></li> <li><a href="/blog/kursy-vizualizatsii-dannykh/">Курсы Визуализации данных</a></li> <li><a href="/blog/kursy-vospitaniya-detey/">Курсы Воспитания детей</a></li> <li><a href="/blog/kursy-gosudarstvennogo-i-munitsipalnogo-upravleniya/">Курсы государственного и муниципального управления</a></li> <li><a href="/blog/kursy-graficheskogo-dizayna/">Курсы Графического дизайна</a></li> <li><a href="/blog/kursy-dizayna-i-grafiki/">Курсы Дизайна и графики</a></li> <li><a href="/blog/kursy-dizayna-interfeysov-i-ux/">Курсы Дизайна интерфейсов и UX</a></li> <li><a href="/blog/kursy-zdorovya/">Курсы Здоровья</a></li> <li><a href="/blog/kursy-inostrannogo-yazyka-dlya-raboty/">Курсы Иностранного языка для работы</a></li> <li><a href="/blog/kursy-internet-marketologa/">Курсы Интернет маркетолога</a></li> <li><a href="/blog/kursy-internet-marketinga/">Курсы Интернет-маркетинга</a></li> <li><a href="/blog/kursy-informatsionnoy-bezopasnosti/">Курсы Информационной безопасности</a></li> <li><a href="/blog/kursy-iskusstva/">Курсы Искусства</a></li> <li><a href="/blog/kursy-iskusstvennogo-intellekta/">Курсы Искусственного интеллекта</a></li> <li><a href="/blog/kursy-istorii/">Курсы Истории</a></li> <li><a href="/blog/kursy-kiberbezopasnosti/">Курсы Кибербезопасности</a></li> <li><a href="/blog/kursy-klientskogo-servisa/">Курсы Клиентского сервиса</a></li> <li><a href="/blog/kursy-klinicheskoy-psikhologii/">Курсы клинической психологии</a></li> <li><a href="/blog/kursy-kouchinga/">Курсы Коучинга</a></li> <li><a href="/blog/kursy-kreativnogo-myshleniya/">Курсы Креативного мышления</a></li> <li><a href="/blog/kursy-kulinarii/">Курсы Кулинарии</a></li> <li><a href="/blog/kursy-liderstva-i-komandoobrazovaniya/">Курсы Лидерства и командообразования</a></li> <li><a href="/blog/kursy-marketinga/">Курсы Маркетинга</a></li> <li><a href="/blog/kursy-matematiki/">Курсы Математики</a></li> <li><a href="/blog/kursy-metodista-onlayn-kursov/">Курсы Методиста онлайн-курсов</a></li> <li><a href="/blog/kursy-napisaniya-stsenariev/">Курсы Написания сценариев</a></li> <li><a href="/blog/kursy-nlp/">Курсы НЛП</a></li> <li><a href="/blog/kursy-obucheniya-personala/">Курсы Обучения персонала</a></li> <li><a href="/blog/kursy-onlayn-obrazovaniya/">Курсы Онлайн-образования</a></li> <li><a href="/blog/kursy-pedagogiki/">Курсы Педагогики</a></li> <li><a href="/blog/kursy-pedagogiki-onlayn-obucheniya/">Курсы Педагогики онлайн-обучения</a></li> <li><a href="/blog/kursy-poiska-raboty/">Курсы Поиска работы</a></li> <li><a href="/blog/kursy-prezentatsiy/">Курсы Презентаций</a></li> <li><a href="/blog/kursy-prinyatiya-resheniy/">Курсы Принятия решений</a></li> <li><a href="/blog/kursy-programmirovaniya/">Курсы Программирования</a></li> <li><a href="/blog/kursy-prodvizheniya-v-telegram/">Курсы Продвижения в Telegram</a></li> <li><a href="/blog/kursy-proforientatsii/">Курсы Профориентации</a></li> <li><a href="/blog/kursy-psikhologii/">Курсы Психологии</a></li> <li><a href="/blog/kursy-psikhologii-i-psikhoterapii/">Курсы Психологии и психотерапии</a></li> <li><a href="/blog/kursy-psikhologii-obshcheniya/">Курсы Психологии общения</a></li> <li><a href="/blog/kursy-psikhologicheskoy-konfliktologii/">Курсы Психологической конфликтологии</a></li> <li><a href="/blog/kursy-publichnykh-vystupleniy/">Курсы Публичных выступлений</a></li> <li><a href="/blog/kursy-razvitiya-karery/">Курсы Развития карьеры</a></li> <li><a href="/blog/kursy-razvitiya-pamyati/">Курсы Развития памяти</a></li> <li><a href="/blog/kursy-razvitiya-emotsionalnogo-intellekta/">Курсы Развития эмоционального интеллекта</a></li> <li><a href="/blog/kursy-russkogo-yazyka/">Курсы Русского языка</a></li> <li><a href="/blog/kursy-saund-dizayna/">Курсы саунд-дизайна</a></li> <li><a href="/blog/kursy-seksologii/">Курсы Сексологии</a></li> <li><a href="/blog/kursy-skorochteniya/">Курсы Скорочтения</a></li> <li><a href="/blog/kursy-sotsialnoy-psikhologii/">Курсы Социальной психологии</a></li> <li><a href="/blog/kursy-storitellinga/">Курсы Сторителлинга</a></li> <li><a href="/blog/kursy-treydinga/">Курсы Трейдинга</a></li> <li><a href="/blog/kursy-trudovogo-prava/">Курсы Трудового права</a></li> <li><a href="/blog/kursy-upravleniya-biznesom/">Курсы Управления бизнесом</a></li> <li><a href="/blog/kursy-upravleniya-po-agile-i-scrum/">Курсы Управления по Agile и Scrum</a></li> <li><a href="/blog/kursy-uchiteley-nachalnykh-klassov/">Курсы учителей начальных классов</a></li> <li><a href="/blog/kursy-filosofii/">Курсы Философии</a></li> <li><a href="/blog/kursy-finansovoy-gramotnosti/">Курсы Финансовой грамотности</a></li> <li><a href="/blog/kursy-frilansa/">Курсы Фриланса</a></li> <li><a href="/blog/kursy-yurisprudentsii/">Курсы Юриспруденции</a></li> <li><a href="/blog/ostalnoe/">Остальное</a></li> <li><a href="/" class="selected">Главная</a></li> <li><a href="/schools/">Школы</a></li> <li><a href="/podborki/">Подборки курсов</a></li> </ul> </div> </div> </div> </div> </main>  <div class="modal modal-wide fade" id="modal-1" tabindex="-1" aria-labelledby="modal-1Label" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-help"> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <div class="modal-help-lft"> <span>Поможем подобрать курс</span> чтобы вы получили повышение <br> или новую профессию. </div> <div class="modal-help-rht"> <div class="modal-form-title">Оставьте заявку, и мы перезвоним</div> <form method="post" enctype="multipart/form-data" class="help"> <div class="form-group"> <input type="text" placeholder="Имя" class="form-control" name="name"> </div> <div class="form-group"> <input type="text" placeholder="Телефон" class="form-control" name="tel"> </div> <div class="form-group"> <input type="text" placeholder="Email" class="form-control" name="email"> </div> <div class="form-group"> <input type="hidden" placeholder="Статья" class="form-control" name="article" value="70406"> <input type="hidden" name="link" value="https://instagramer.info/blog/kak-nauchitsya-rabotat-s-html-kodom/"> <input type="hidden" name="ip" value="3.144.87.230"> <input type="hidden" name="sid" value="34"> </div> <div class="form-check mb-4"> <input class="form-check-input" type="checkbox" id="agree" name="agreement" checked> <label class="form-check-label" for="agree"> Я соглашаюсь на <a href="#">обработку персональных данных</a> </label> </div> <button type="submit" class="btn btn-primary btn-full">Оставить заявку</button> </form> <div class="modal-content inline_success"> <div class="modal-body"> <div class="thank-ico"> <img src="/local/templates/kimgid/img/check.svg" width="93" alt=""> </div> <p>Ваша заявка отправлена! <br>Мы скоро с Вами свяжемся!</p> </div> </div> </div> </div> </div> </div> </div>  <div class="modal modal-simple fade" id="modal-2" tabindex="-1" aria-labelledby="modal-2Label" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <div class="modal-title">Узнайте какая профессия вам подходит</div> <p class="text-center">Пройдите тест - это займет не больше 10 минут</p> <form method="post" enctype="multipart/form-data" class="profession"> <div class="form-group"> <input type="text" placeholder="Имя" class="form-control" name="name"> </div> <div class="form-group"> <input type="email" placeholder="Email" class="form-control" name="email"> </div> <div class="form-group"> <input type="hidden" placeholder="Статья" class="form-control" name="article" value="70406"> <input type="hidden" name="link" value="https://instagramer.info/blog/kak-nauchitsya-rabotat-s-html-kodom/"> <input type="hidden" name="ip" value="3.144.87.230"> <input type="hidden" name="sid" value="34"> </div> <div class="form-check mb-4"> <input class="form-check-input" type="checkbox" id="agree1" name="agreement" checked> <label class="form-check-label" for="agree1"> Я соглашаюсь на <a href="#">обработку персональных данных</a> </label> </div> <button type="submit" class="btn btn-primary btn-full">Пройти тест</button> </form> <div class="modal-content inline_success"> <div class="modal-body"> <div class="thank-ico"> <img src="/local/templates/kimgid/img/check.svg" width="93" alt=""> </div> <p>Ваша заявка отправлена! <br>Мы скоро с Вами свяжемся!</p> </div> </div> </div> </div> </div><footer class="footer"> <div class="footer-top"> <div class="container"> <div class="row"> <div class="col-12 col-sm-4 col-md-4 col-xl-4"> <a href="/" class="logo-brand"> <span><img src="/favicon.ico" alt=""></span> GramGenius </a> </div> <div class="col-6 col-sm-4 col-md-4 col-xl-4"> </div> <div class="col-6 col-sm-4 col-md-4 col-xl-4"> </div> </div> </div> </div> <div class="footer-btm"> <div class="container"> <span>© 2024</span> <span>Edtech Seo</span>  <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(99958756, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/99958756" style="position:absolute; left:-9999px;" alt="" /></div></noscript>  </div> </div> </footer> <svg width="0" height="0" style="display: none;"> <symbol id="prev" viewBox="0 0 24 24" fill="none"> <path d="M15 6L9 12L15 18" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </symbol> <symbol id="next" viewBox="0 0 24 24" fill="none"> <path d="M9 6L15 12L9 18" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </symbol> </svg> </body> </html>