Rivalry2

Основы HTML, CSS и веб-дизайна
2026-02-26 16:35 Diff
https://ru.hexlet.io/courses/html/lessons/intro/theory_unit
Хекслет
О нас
Отзывы
Корпоративное обучение
Блог
Вопросы и ответы
Глоссарий
Справка
Карта сайта
Профессии
DevOps-инженер с нуля
Go-разработчик
Java-разработчик
Python-разработчик
Аналитик данных
Инженер по ручному тестированию
РНР-разработчик
Фронтенд-разработчик
Навыки
Django
Docker
Laravel
Postman
React
REST API в Node.js
Spring Boot
Typescript
8 800 100 22 47 бесплатно по РФ
+7 495 085 21 62 бесплатно по Москве
108813 г. Москва, вн.тер.г. поселение Московский,
г. Московский, ул. Солнечная, д. 3А, стр. 1, помещ. 20Б/3
ОГРН 1217300010476
ИНН 7325174845
119331 г. Москва, вн. тер. г. муниципальный округ
Ломоносовский, пр-кт Вернадского, д. 29
ОГРН 1247700712390
ИНН 7736364948
<!DOCTYPE html>
<html class="h-100" data-bs-theme="light" data-mantine-color-scheme="light" lang="ru" prefix="og: https://ogp.me/ns#">
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<link crossorigin="true" href="https://cdn.hexlet.io" rel="preconnect">
<link href="https://mc.yandex.ru" rel="preconnect">
<meta content="aa2vrdtq64dub8knuf83lwywit311w" name="facebook-domain-verification">
<link href="/favicon.ico" rel="icon" sizes="any">
<link href="/favicon.svg" rel="icon" type="image/svg+xml">
<link href="/apple-touch-icon.png" rel="apple-touch-icon">
<link href="/manifest.webmanifest" rel="manifest">

<script>
//<![CDATA[
window.gon={};gon.ym_counter="25559621";gon.is_bot=true;gon.applications={};gon.current_user={"id":null,"last_viewed_notification_id":null,"email":null,"state":null,"first_name":"","last_name":"","created_at":"2026-02-26 16:35:16 UTC","current_program":null,"current_team":null,"full_name":"","guest":true,"can_use_paid_features":false,"is_hexlet_employee":false,"sanitized_phone_number":"","can_subscribe":true,"can_renew_education":false};gon.token="eS07Ggg60wiIV5eXoO_MBcX5PkhoAMvp3H4WD05S1xyW_PAt-kR-aD4Usw-s4DxyBfAT4mA3NUthnoxbHFUwcg";gon.locale="ru";gon.language="ru";gon.theme="light";gon.rails_env="production";gon.mobile=false;gon.google={"analytics_key":"UA-1360700-51","optimize_key":"GTM-5QDVFPF"};gon.captcha={"google_v3_site_key":"6LenGbgZAAAAAM7HbrDbn5JlizCSzPcS767c9vaY","yandex_site_key":"ysc1_Vyob5ZPPUdPBsu0ykt8bVFdzsfpoVjQChLGl2b4g19647a89","verification_failed":null};gon.social_signin=false;gon.typoreporter_google_form_id="1FAIpQLSeibfGq-KvWQ2Fyru-zkFFRVTLBuzXAHAoEyN1p49FtDmNoNA";
//]]>
</script>
<meta charset="utf-8">
<title>Верстальщик vs. веб-дизайнер | Основы HTML, CSS и веб-дизайна</title>
<meta name="description" content="Верстальщик vs. веб-дизайнер / Основы HTML, CSS и веб-дизайна: Познакомиться с курсом и рассмотреть специальности «верстальщик» и «веб-дизайнер» в контексте развития технологий.">
<link rel="canonical" href="https://ru.hexlet.io/courses/html/lessons/intro/theory_unit">
<meta name="robots" content="noarchive">
<meta property="og:title" content="Верстальщик vs. веб-дизайнер">
<meta property="og:title" content="Основы HTML, CSS и веб-дизайна">
<meta property="og:description" content="Верстальщик vs. веб-дизайнер / Основы HTML, CSS и веб-дизайна: Познакомиться с курсом и рассмотреть специальности «верстальщик» и «веб-дизайнер» в контексте развития технологий.">
<meta property="og:url" content="https://ru.hexlet.io/courses/html/lessons/intro/theory_unit">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="Lc_Rqwg4TBQslwBLgjFs2iPdXdBaWtj58wvFhbi4zXLCHhqc-kbhdJrUJNOOPpyt49RwelJtJltO61_R6r8qHA" />



<script src="/vite/assets/inertia-INZxX8jp.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/preload-helper-BJ4cLWpC.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-nkZBEvfU.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ahoy-DrlRQ-1D.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/analytics-6pOtQ3OW.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-naDSYSy9.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Surface-DL2bpZA-.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-D3e4yh1x.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-CGMYrt2Y.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-DRqSHbQE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-CCH8ilKF.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/extends-C-EagtpE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/inheritsLoose-BBd-DCVI.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/objectWithoutPropertiesLoose-DRHXDhjp.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/index.esm-DAqKOkZ0.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Button-CGPUux8l.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/CloseButton-D1euiPao.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Group-BX48WcuU.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Loader-BQEY8g6v.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Modal-Cy3HByv7.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/OptionalPortal-1Hza5P2w.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Stack-CtjJzfw4.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Textarea-Ck64llAy.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Box-B5-OOzBf.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/DirectionProvider-Dc9zdUke.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/events-DJQOhap0.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/use-reduced-motion-D2owz4wa.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/use-disclosure-zKtK5W1r.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/use-hotkeys-Cnc_Rwkb.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/random-id-DOQyszCZ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/notifications.store-C-3AFSMn.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/exports-C_MrNx_T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/axios-BEvgo0ym.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-BkKovM-s.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/i18next-BlSq9s7B.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-U9M77rxp.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-DaLxUz_h.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-Bx1Cdrkz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-6XxiPFnt.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-CwjcCKJi.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CkL4ZRHB.js" as="script" crossorigin="anonymous">
<link rel="stylesheet" href="/vite/assets/application-BqhCP46M.js" />
<script src="/vite/assets/application-Df9RExpe.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/autocomplete-VMNbxKGl.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-CCH8ilKF.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/createPopper-C3aM9r1M.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/js.cookie-D1-O8zkX.js" as="script" crossorigin="anonymous"><link rel="stylesheet" href="/vite/assets/application-C8HjmMaq.css" media="screen" />
<script>
  window.ym = function(){(ym.a=ym.a||[]).push(arguments)};
  window.addEventListener('load', function() {
    setTimeout(function() {
      ym.l = 1*new Date();
      ym(window.gon.ym_counter, "init", {
        clickmap: true,
        trackLinks: true,
        accurateTrackBounce: true,
        webvisor: true
      });
  
      // Загружаем скрипт
      var k = document.createElement('script');
      k.async = 1;
      k.src = 'https://mc.yandex.ru/metrika/tag.js';
      document.head.appendChild(k);
  
      ym(window.gon.ym_counter, 'getClientID', function(clientID) {
        window.ymClientId = clientID;
      });
    }, 1500);
  });
</script>

<!-- Google Tag Manager - deferred -->
<script>
  // dataLayer stub сразу — пуши работают до загрузки скрипта
  window.dataLayer = window.dataLayer || [];
  
  // Сам скрипт — отложенно после load
  window.addEventListener('load', function() {
    setTimeout(function() {
      dataLayer.push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
      var j = document.createElement('script');
      j.async = true;
      j.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-WK88TH';
      document.head.appendChild(j);
    }, 1500);
  });
</script>
<!-- End Google Tag Manager -->




</head>
<body>
<noscript>
<div>
<img alt="" src="https://mc.yandex.ru/watch/25559621" style="position:absolute; left:-9999px;">
</div>
</noscript>


<header class="sticky-top bg-body">
<nav class="navbar navbar-expand-lg">
<div class="container-xxl">
<a class="navbar-brand" href="/"><img alt="Логотип Хекслета" height="24" src="https://ru.hexlet.io/vite/assets/logo_ru_light-BpiEA1LT.svg" width="96">
</a><button aria-controls="collapsable" aria-expanded="false" aria-label="Меню" class="navbar-toggler border-0 mb-0 mt-1" data-bs-target="#collapsable" data-bs-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsable">
<ul class="navbar-nav mb-lg-0 mt-lg-1">
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
Все курсы
<span class="bi bi-chevron-down align-middle ms-1"></span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item d-flex py-2" href="/courses"><div class="fw-bold me-auto">Все что есть</div>
<div class="text-muted">117</div>
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Популярные категории</b>
</li>
<li>
<a class="dropdown-item py-2" href="/courses_devops">Курсы по DevOps
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_data_analytics">Курсы по аналитике данных
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_programming">Курсы по программированию
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_testing">Курсы по тестированию
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Популярные курсы</b>
</li>
<li>
<a class="dropdown-item py-2" href="/programs/devops-engineer-from-scratch">DevOps-инженер с нуля
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/go">Go-разработчик
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/java">Java-разработчик
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/python">Python-разработчик 
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/qa-auto-engineer-java">Автоматизатор тестирования на Java
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/data-analytics">Аналитик данных
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/frontend">Фронтенд-разработчик
</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
О Хекслете
<span class="bi bi-chevron-down align-middle"></span>
</button>
<ul class="dropdown-menu bg-body">
<li>
<a class="dropdown-item py-2" href="/pages/about">О нас
</a></li>
<li>
<a class="dropdown-item py-2" href="/blog">Блог
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/hse-research" role="button">Результаты (Исследование)
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://career.hexlet.io" role="button">Хекслет Карьера
</span></li>
<li>
<a class="dropdown-item py-2" href="/testimonials">Отзывы студентов
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://t.me/hexlet_help_bot" role="button">Поддержка (В ТГ)
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/referal-program/?promo_creative=priglasite-druzei&amp;promo_name=referal-program&amp;promo_position=promo_position&amp;promo_start=010724&amp;promo_type=link" role="button">Реферальная программа
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/certificate" role="button">Подарочные сертификаты
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://hh.ru/employer/4307094" role="button">Вакансии
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://b2b.hexlet.io" data-target="_blank" role="button">Компаниям
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexly.ru/" data-target="_blank" role="button">Колледж
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexlyschool.ru/" data-target="_blank" role="button">Частная школа
</span></li>
</ul>
</li>
<li><a class="nav-link" href="/subscription/new">Подписка</a></li>
</ul>
<ul class="navbar-nav flex-lg-row align-items-lg-center gap-2 ms-auto">
<li>
<a class="nav-link" aria-label="Переключить тему" href="/theme/switch?new_theme=dark"><span aria-hidden="true" class="bi bi-moon"></span>
</a></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="/u/new" role="button"><span>Регистрация</span>
</span></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="https://ru.hexlet.io/session/new" role="button"><span>Вход</span>
</span></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="x-container-xxxl">

</div>

<main class="mb-6 min-vh-100 h-100">
<div id="app" data-page="{&quot;component&quot;:&quot;web/courses/lessons/theory_unit&quot;,&quot;props&quot;:{&quot;errors&quot;:{},&quot;locale&quot;:&quot;ru&quot;,&quot;language&quot;:&quot;ru&quot;,&quot;httpsHost&quot;:&quot;https://ru.hexlet.io&quot;,&quot;host&quot;:&quot;ru.hexlet.io&quot;,&quot;colorScheme&quot;:&quot;light&quot;,&quot;auth&quot;:{&quot;user&quot;:{&quot;id&quot;:null,&quot;last_viewed_notification_id&quot;:null,&quot;email&quot;:null,&quot;state&quot;:null,&quot;first_name&quot;:&quot;&quot;,&quot;last_name&quot;:&quot;&quot;,&quot;created_at&quot;:&quot;2026-02-26T16:35:16.307Z&quot;,&quot;current_program&quot;:null,&quot;current_team&quot;:null,&quot;full_name&quot;:&quot;&quot;,&quot;guest&quot;:true,&quot;can_use_paid_features&quot;:false,&quot;is_hexlet_employee&quot;:false,&quot;sanitized_phone_number&quot;:&quot;&quot;,&quot;can_subscribe&quot;:true,&quot;can_renew_education&quot;:false}},&quot;cloudflareTurnstileSiteKey&quot;:&quot;0x4AAAAAAA15KmeFXzd2H0Xo&quot;,&quot;vkIdClientId&quot;:&quot;51586979&quot;,&quot;yandexIdClientId&quot;:&quot;88d071f1d3384eb4bd1deb37910235c7&quot;,&quot;formAuthToken&quot;:&quot;3vB98zP4ItcpMCrG7BzPU57_oZHj3xUODx46iAubrUoxIbbEwYaPt59zDl7gEz8kXvaMO-vo66yy_qDcWZxKJA&quot;,&quot;topics&quot;:[{&quot;id&quot;:17117,&quot;title&quot;:&quot;А что за шутка про конвертацию кофе в код?&quot;,&quot;plain_title&quot;:&quot;А что за шутка про конвертацию кофе в код? &quot;,&quot;creator&quot;:{&quot;public_name&quot;:&quot;&quot;,&quot;id&quot;:141696,&quot;is_tutor&quot;:false},&quot;comments&quot;:[{&quot;creator&quot;:{&quot;public_name&quot;:&quot;R. D.&quot;,&quot;id&quot;:3,&quot;is_tutor&quot;:false},&quot;id&quot;:36174,&quot;body&quot;:&quot;Ну, вот такая шутка :) «программист — машина по конвертации кофе в код»&quot;,&quot;topic_id&quot;:17117},{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Svetlana  Presnyakova&quot;,&quot;id&quot;:185442,&quot;is_tutor&quot;:false},&quot;id&quot;:37093,&quot;body&quot;:&quot;Вспомнилось)) \n\n![enter image description here](https://pp.userapi.com/c840527/v840527731/38a5/XlmxAMQ-Bmo.jpg \&quot;enter image title here\&quot;)&quot;,&quot;topic_id&quot;:17117},{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Rafis Bagautdinov&quot;,&quot;id&quot;:188360,&quot;is_tutor&quot;:false},&quot;id&quot;:38809,&quot;body&quot;:&quot;Может быть имеется ввиду конвертация CoffeeScript в JavaScript.&quot;,&quot;topic_id&quot;:17117}],&quot;communitable&quot;:{&quot;parent_entity_name&quot;:null,&quot;parent_entity_url&quot;:null,&quot;entity_name&quot;:&quot;Верстальщик vs. веб-дизайнер&quot;,&quot;entity_url&quot;:null,&quot;active&quot;:true}},{&quot;id&quot;:18199,&quot;title&quot;:&quot;Немного сложновато слушать, когда Вы порой делаете паузы чуть ли не после каждого слова..\nА в целом все замечательно, спасибо)&quot;,&quot;plain_title&quot;:&quot;Немного сложновато слушать, когда Вы порой делаете паузы чуть ли не после каждого слова.. А в целом все замечательно, спасибо) &quot;,&quot;creator&quot;:{&quot;public_name&quot;:&quot;&quot;,&quot;id&quot;:186284,&quot;is_tutor&quot;:false},&quot;comments&quot;:[{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Rafis Bagautdinov&quot;,&quot;id&quot;:188360,&quot;is_tutor&quot;:false},&quot;id&quot;:38808,&quot;body&quot;:&quot;В настройках плеера поставьте скорость 1,5х и этой проблемы скорее всего не будет.\nХотя я увеличивал скорость не из-за пауз, а из-за того, что уже знаком с темой, но хотелось все равно прослушать&quot;,&quot;topic_id&quot;:18199}],&quot;communitable&quot;:{&quot;parent_entity_name&quot;:null,&quot;parent_entity_url&quot;:null,&quot;entity_name&quot;:&quot;Верстальщик vs. веб-дизайнер&quot;,&quot;entity_url&quot;:null,&quot;active&quot;:true}},{&quot;id&quot;:39012,&quot;title&quot;:&quot;- Спасибо за видео. Рада была, что этот материал именно видео и аудиотекст, а не печатный - экономит время от чтения и более понятно, когда _кто-то объясняет_, а не самому читать длинную статью.\n- Хотелось бы, чтобы было видео вместо текстов в \n&gt; Введении в веб-разработку - например, хотя бы в начале тем _HTML_ и _CSS_.\n- Само по себе конкретно это видео, на мой скромный взгяд, долговато. \n\n\n\n&quot;,&quot;plain_title&quot;:&quot;Спасибо за видео. Рада была, что этот материал именно видео и аудиотекст, а не печатный - экономит время от чтения и более понятно, когда кто-то объясняет, а не самому читать длинную статью. Хотелось бы, чтобы было видео вместо текстов в  ### Введении в веб-разработку - например, хотя бы в начале тем HTML и CSS. Само по себе конкретно это видео, на мой скромный взгяд, долговато.  &quot;,&quot;creator&quot;:{&quot;public_name&quot;:&quot;Anna Kaci&quot;,&quot;id&quot;:183967,&quot;is_tutor&quot;:false},&quot;comments&quot;:[{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Nikita Mikhaylov&quot;,&quot;id&quot;:186965,&quot;is_tutor&quot;:true},&quot;id&quot;:85804,&quot;body&quot;:&quot;Здравствуйте\n\nСпасибо за отзыв :)\n\nФормат текста на самом деле куда гибче и понятнее, чем может показаться на первый взгляд. Текст легко обновить (а это необходимо очень часто), в тексте легче найти нужную информацию. Большинство уроков у нас именно в форме текста по этим причинам.&quot;,&quot;topic_id&quot;:39012},{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Gosha Goshan&quot;,&quot;id&quot;:272466,&quot;is_tutor&quot;:false},&quot;id&quot;:90845,&quot;body&quot;:&quot;**Anna Kaci**, \nАнна если вам лень читать текст то програмирование, разработка сайтов или верстка это не для вас.\nпрошу прощения за прямоту. )))&quot;,&quot;topic_id&quot;:39012}],&quot;communitable&quot;:{&quot;parent_entity_name&quot;:null,&quot;parent_entity_url&quot;:null,&quot;entity_name&quot;:&quot;Верстальщик vs. веб-дизайнер&quot;,&quot;entity_url&quot;:null,&quot;active&quot;:true}},{&quot;id&quot;:20516,&quot;title&quot;:&quot;Подскажите, почему верстке для фронтенда уделено мало внимания, для этой профессии разве не нужно хорошо знать верстку?&quot;,&quot;plain_title&quot;:&quot;Подскажите, почему верстке для фронтенда уделено мало внимания, для этой профессии разве не нужно хорошо знать верстку? &quot;,&quot;creator&quot;:{&quot;public_name&quot;:&quot;Алексей Королёв&quot;,&quot;id&quot;:188357,&quot;is_tutor&quot;:false},&quot;comments&quot;:[{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Алексей Королёв&quot;,&quot;id&quot;:188357,&quot;is_tutor&quot;:false},&quot;id&quot;:43431,&quot;body&quot;:&quot;Например я прихожу устраиваться на работу, мне дают сложный макет psd и дают задание сверстать его за 1-2 дня на html. После ваших курсов я же не смогу это сделать, потому что мы это здесь не делали ни разу. Поэтому я задался вопросом, почему например мы не тренировались верстать макет какой нибудь? Или предполагается, что мы будем на работе заняты совсем другими вещами?&quot;,&quot;topic_id&quot;:20516},{&quot;creator&quot;:{&quot;public_name&quot;:&quot;R. D.&quot;,&quot;id&quot;:3,&quot;is_tutor&quot;:false},&quot;id&quot;:43563,&quot;body&quot;:&quot;Это довольно обширная тема, и она выходит за рамки нашего базового курса, посвященного знакомству с HTML и CSS.&quot;,&quot;topic_id&quot;:20516},{&quot;creator&quot;:{&quot;public_name&quot;:&quot;R. D.&quot;,&quot;id&quot;:3,&quot;is_tutor&quot;:false},&quot;id&quot;:43425,&quot;body&quot;:&quot;В базовом виде нужно обязательно. Но что вы имеете ввиду, когда говорите \&quot;верстке для фронтенда уделено мало внимания\&quot;? Любая верстка - это фронтенд по определению.&quot;,&quot;topic_id&quot;:20516}],&quot;communitable&quot;:{&quot;parent_entity_name&quot;:null,&quot;parent_entity_url&quot;:null,&quot;entity_name&quot;:&quot;Верстальщик vs. веб-дизайнер&quot;,&quot;entity_url&quot;:null,&quot;active&quot;:true}},{&quot;id&quot;:34601,&quot;title&quot;:&quot;```код``` \n**жирный текст**\n&gt; цитата&quot;,&quot;plain_title&quot;:&quot;**жирный текст** &gt; цитата &quot;,&quot;creator&quot;:{&quot;public_name&quot;:&quot;Дарья Киселёва&quot;,&quot;id&quot;:254342,&quot;is_tutor&quot;:false},&quot;comments&quot;:[{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Александр Некрасов&quot;,&quot;id&quot;:244158,&quot;is_tutor&quot;:false},&quot;id&quot;:75512,&quot;body&quot;:&quot;**Дарья Киселёва**, Привет!\n\nДобро пожаловать.&quot;,&quot;topic_id&quot;:34601}],&quot;communitable&quot;:{&quot;parent_entity_name&quot;:null,&quot;parent_entity_url&quot;:null,&quot;entity_name&quot;:&quot;Верстальщик vs. веб-дизайнер&quot;,&quot;entity_url&quot;:null,&quot;active&quot;:true}},{&quot;id&quot;:32038,&quot;title&quot;:&quot;&lt;&quot;,&quot;plain_title&quot;:&quot;&lt; &quot;,&quot;creator&quot;:{&quot;public_name&quot;:&quot;Никита Литвинчук&quot;,&quot;id&quot;:245113,&quot;is_tutor&quot;:false},&quot;comments&quot;:[{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Сергей К.&quot;,&quot;id&quot;:5174,&quot;is_tutor&quot;:false},&quot;id&quot;:69749,&quot;body&quot;:&quot;Никита, добрый день! Если вы хотели задать вопрос, то продублируйте его, пожалуйста.&quot;,&quot;topic_id&quot;:32038}],&quot;communitable&quot;:{&quot;parent_entity_name&quot;:null,&quot;parent_entity_url&quot;:null,&quot;entity_name&quot;:&quot;Верстальщик vs. веб-дизайнер&quot;,&quot;entity_url&quot;:null,&quot;active&quot;:true}},{&quot;id&quot;:11535,&quot;title&quot;:&quot;Один знакомый программист (хороший) твёрдо отстаивает позицию, что рисовать html-страничку должен Photoshop автоматически.&quot;,&quot;plain_title&quot;:&quot;Один знакомый программист (хороший) твёрдо отстаивает позицию, что рисовать html-страничку должен Photoshop автоматически. &quot;,&quot;creator&quot;:{&quot;public_name&quot;:&quot;Сергей К.&quot;,&quot;id&quot;:5174,&quot;is_tutor&quot;:false},&quot;comments&quot;:[{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Дмитрий Кукуйский&quot;,&quot;id&quot;:170011,&quot;is_tutor&quot;:false},&quot;id&quot;:30307,&quot;body&quot;:&quot;Проблема фотошопа в том, что он всё же предназначен для растровой графики, но сейчас актуально в интерфейсах и вебе использовать векторную графику. Во-первых, она легче, во-вторых она одинаково хорошо выглядит на экранах с разным разрешением. Так что, фотошоп, слава богу, скоро станет тем, чем он был изначально — инструментом для обработки фотографий. Если он останется вообще.&quot;,&quot;topic_id&quot;:11535},{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Sergei Melodyn&quot;,&quot;id&quot;:162475,&quot;is_tutor&quot;:true},&quot;id&quot;:26359,&quot;body&quot;:&quot;Есть же плагины такие, вроде, платные, но есть.&quot;,&quot;topic_id&quot;:11535},{&quot;creator&quot;:{&quot;public_name&quot;:&quot;R. D.&quot;,&quot;id&quot;:3,&quot;is_tutor&quot;:false},&quot;id&quot;:23939,&quot;body&quot;:&quot;Когда-нибудь, надеемся :)&quot;,&quot;topic_id&quot;:11535}],&quot;communitable&quot;:{&quot;parent_entity_name&quot;:null,&quot;parent_entity_url&quot;:null,&quot;entity_name&quot;:&quot;Верстальщик vs. веб-дизайнер&quot;,&quot;entity_url&quot;:null,&quot;active&quot;:true}},{&quot;id&quot;:22659,&quot;title&quot;:&quot;профессия верстальщика сравнима с профессией водителя-дальнобойщика, которая отмирает, бля... я и есть дальнобойщик, и понимаю что скоро водителей не будет((( не зря все таки пришел сюда... Вот только есть у меня один комплекс, у меня нет ни какого высшего образования.. Как считаете? Стоит ли пытаться найти работу после \&quot;курсов в интернете\&quot;?&quot;,&quot;plain_title&quot;:&quot;профессия верстальщика сравнима с профессией водителя-дальнобойщика, которая отмирает, бля... я и есть дальнобойщик, и понимаю что скоро водителей не будет((( не зря все таки пришел сюда... Вот только есть у меня один комплекс, у меня нет ни какого высшего образования.. Как считаете? Стоит ли пытаться найти работу после \&quot;курсов в интернете\&quot;? &quot;,&quot;creator&quot;:{&quot;public_name&quot;:&quot;Линат  Тимуршин&quot;,&quot;id&quot;:201346,&quot;is_tutor&quot;:false},&quot;comments&quot;:[{&quot;creator&quot;:{&quot;public_name&quot;:&quot;R. D.&quot;,&quot;id&quot;:3,&quot;is_tutor&quot;:false},&quot;id&quot;:48319,&quot;body&quot;:&quot;Стоит.\n\nВысшее образование в сфере ИТ намного менее важно, чем в других в контексте поиска работы (как показывает опыт).&quot;,&quot;topic_id&quot;:22659},{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Evgeny Antonov&quot;,&quot;id&quot;:204131,&quot;is_tutor&quot;:false},&quot;id&quot;:50105,&quot;body&quot;:&quot;Высшее образование его наличие/отсутствие это больше комплекс, чем реальные знания. Очень многие, особенно дневники просто 4-5 лет пробухивают, проскакивая экзамены, а знаний на выходе 0. \nУчиться надо, когда хочется и когда голова «придёт» к понимаю этого. А возраст не важен&quot;,&quot;topic_id&quot;:22659},{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Нурлан Хасанов&quot;,&quot;id&quot;:111543,&quot;is_tutor&quot;:false},&quot;id&quot;:48386,&quot;body&quot;:&quot;\n\n&gt; профессия верстальщика сравнима с профессией водителя-дальнобойщика, которая отмирает, бля... я и есть дальнобойщик, и понимаю что скоро водителей не будет((( не зря все таки пришел сюда... Вот только есть у меня один комплекс, у меня нет ни какого высшего образования.. Как считаете? Стоит ли пытаться найти работу после \&quot;курсов в интернете\&quot;?\n&gt; \n\nКто вам сказал что профессия верстальщика отмирает? Хороший верстальщик неплохо зарабатывает, да и насчет водителей неправда, это можетв США скоро будут фуры роботом управляться, а у нас имею ввиду в СНГ такого еще лет 100 не будет. И еще такой вопрос к вам, вы в ИТ решили податься изза денег? Наверное также пошли в дальнобои раз там платили хорошо? Я не понимаю вас \&quot;вайтишников\&quot;, когда я начинал (12 лет назад и по сей день работаю в ИТ) многие смеялись над ИТ специалистами мол задроты и краноглазики, а как в последние годы в ИТ стали нормально платить все туда ринулись. Я сейчас работаю системным администратором, решил перейти в разработку, так как там проще найти удаленную работу, я честно не понимаю таких как вы, без обид, получается в ИТ вас только деньги привлекают, а завтра появятся другие тренды и вы туда перейдете? &quot;,&quot;topic_id&quot;:22659},{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Нурлан Хасанов&quot;,&quot;id&quot;:111543,&quot;is_tutor&quot;:false},&quot;id&quot;:48387,&quot;body&quot;:&quot;Дополню свой комментарий, без профильного ИТ образования можно устроиться на работу, но вам будет сложнее чем человеку, у которого есть профильное образование, вам придется с нуля постигать некоторые фундаментальные вещи, например устройство сетей (ЛВС, ИНТЕРНЕТ, ПРОТОКОЛЫ,ПОРТЫ и прочее). Найти работу можно, но скажу вам, что на первой работе вам придется работать за очен небольшие деньги или же даже бесплатно, если есть семья это тоже усложняет ситуацию, так как вам придется создать \&quot;финансовую подушку\&quot; хотя бы на год, пока вы не сможете зарабатывать в ИТ более менее нормальные деньги. Опять же работодателю предпочтительнее взять неженатого молодого специалиста, который сможет работать за небольшие деньги с овертаймами и при этом не просить долгое время повышения заработной платы. В общем придется не просто. &quot;,&quot;topic_id&quot;:22659},{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Юрий Чернышев&quot;,&quot;id&quot;:182794,&quot;is_tutor&quot;:false},&quot;id&quot;:48395,&quot;body&quot;:&quot;Сейчас такое образование местами, что некоторые дальнобойщики заткнут за пояс, человека с вышкой.&quot;,&quot;topic_id&quot;:22659}],&quot;communitable&quot;:{&quot;parent_entity_name&quot;:null,&quot;parent_entity_url&quot;:null,&quot;entity_name&quot;:&quot;Верстальщик vs. веб-дизайнер&quot;,&quot;entity_url&quot;:null,&quot;active&quot;:true}},{&quot;id&quot;:29469,&quot;title&quot;:&quot;Такой вопрос, стоит ли проходить этот курс вообще ничего не зная о HTML?\nИли все таки лучше пройти например курс по html на сайте Code Bsics а затем уже проходить этот курс, посоветуйте!&quot;,&quot;plain_title&quot;:&quot;Такой вопрос, стоит ли проходить этот курс вообще ничего не зная о HTML? Или все таки лучше пройти например курс по html на сайте Code Bsics а затем уже проходить этот курс, посоветуйте! &quot;,&quot;creator&quot;:{&quot;public_name&quot;:&quot;Akakiy Karamazov&quot;,&quot;id&quot;:232669,&quot;is_tutor&quot;:false},&quot;comments&quot;:[{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Andrii Kovalchuk&quot;,&quot;id&quot;:76780,&quot;is_tutor&quot;:false},&quot;id&quot;:63799,&quot;body&quot;:&quot;Привет, советую пройти курс, а потом закрепить заданиями на Code Basics&quot;,&quot;topic_id&quot;:29469},{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Максим Козлов&quot;,&quot;id&quot;:251140,&quot;is_tutor&quot;:false},&quot;id&quot;:73437,&quot;body&quot;:&quot;**Akakiy Karamazov**, я изначально прошел курс на Code Bsics по html и сейчас начинаю курс здесь.&quot;,&quot;topic_id&quot;:29469}],&quot;communitable&quot;:{&quot;parent_entity_name&quot;:null,&quot;parent_entity_url&quot;:null,&quot;entity_name&quot;:&quot;Верстальщик vs. веб-дизайнер&quot;,&quot;entity_url&quot;:null,&quot;active&quot;:true}},{&quot;id&quot;:25553,&quot;title&quot;:&quot;Я начал урок. 888 сообшений 10 777 учащихся ,8 часов.И 34 урока: 3 + 4 = 7. Хорошие цифры. сумма =50 + 10.Сумма числа произведения четырёх семёрок и восьмёрок до одного числа = 8.А 7*7*7*7+8*8*8*8=6497 т.е сумма числа до одного знака 6+4+9+7=2+6=8. итого я получил пять восмёрок и пять пятёрок. А пять плюс пять десять.Вот и обоснованная десятка! Просто замечательные цифры, мне нравится.Заскринил.&quot;,&quot;plain_title&quot;:&quot;Я начал урок. 888 сообшений 10 777 учащихся ,8 часов.И 34 урока: 3 + 4 = 7. Хорошие цифры. сумма =50 + 10.Сумма числа произведения четырёх семёрок и восьмёрок до одного числа = 8.А 7777+8888=6497 т.е сумма числа до одного знака 6+4+9+7=2+6=8. итого я получил пять восмёрок и пять пятёрок. А пять плюс пять десять.Вот и обоснованная десятка! Просто замечательные цифры, мне нравится.Заскринил. &quot;,&quot;creator&quot;:{&quot;public_name&quot;:&quot;Алексей Видякин&quot;,&quot;id&quot;:207686,&quot;is_tutor&quot;:false},&quot;comments&quot;:[{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Сергей К.&quot;,&quot;id&quot;:5174,&quot;is_tutor&quot;:false},&quot;id&quot;:54768,&quot;body&quot;:&quot;Алексей, добрый день! Это что-то из области нумерологии :)&quot;,&quot;topic_id&quot;:25553},{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Алексей Видякин&quot;,&quot;id&quot;:207686,&quot;is_tutor&quot;:false},&quot;id&quot;:54808,&quot;body&quot;:&quot;Возможно. Но я всерьёз подумываю о том, что бы начать коллекционировать числа.&quot;,&quot;topic_id&quot;:25553}],&quot;communitable&quot;:{&quot;parent_entity_name&quot;:null,&quot;parent_entity_url&quot;:null,&quot;entity_name&quot;:&quot;Верстальщик vs. веб-дизайнер&quot;,&quot;entity_url&quot;:null,&quot;active&quot;:true}}],&quot;lesson&quot;:{&quot;exercise&quot;:null,&quot;units&quot;:[{&quot;id&quot;:2080,&quot;name&quot;:&quot;theory&quot;,&quot;url&quot;:&quot;/courses/html/lessons/intro/theory_unit&quot;}],&quot;links&quot;:[],&quot;ordered_units&quot;:[{&quot;id&quot;:2080,&quot;name&quot;:&quot;theory&quot;,&quot;url&quot;:&quot;/courses/html/lessons/intro/theory_unit&quot;}],&quot;id&quot;:1000,&quot;slug&quot;:&quot;intro&quot;,&quot;state&quot;:&quot;approved&quot;,&quot;name&quot;:&quot;Верстальщик vs. веб-дизайнер&quot;,&quot;course_order&quot;:10,&quot;goal&quot;:&quot;Познакомиться с курсом и рассмотреть специальности «верстальщик» и «веб-дизайнер» в контексте развития технологий.&quot;,&quot;self_study&quot;:null,&quot;theory_video_provider&quot;:&quot;vimeo&quot;,&quot;theory_video_uid&quot;:&quot;239970025&quot;,&quot;theory&quot;:&quot;&quot;},&quot;lessonMember&quot;:null,&quot;courseMember&quot;:null,&quot;course&quot;:{&quot;start_lesson&quot;:{&quot;exercise&quot;:null,&quot;units&quot;:[{&quot;id&quot;:2080,&quot;name&quot;:&quot;theory&quot;,&quot;url&quot;:&quot;/courses/html/lessons/intro/theory_unit&quot;}],&quot;links&quot;:[],&quot;ordered_units&quot;:[{&quot;id&quot;:2080,&quot;name&quot;:&quot;theory&quot;,&quot;url&quot;:&quot;/courses/html/lessons/intro/theory_unit&quot;}],&quot;id&quot;:1000,&quot;slug&quot;:&quot;intro&quot;,&quot;state&quot;:&quot;approved&quot;,&quot;name&quot;:&quot;Верстальщик vs. веб-дизайнер&quot;,&quot;course_order&quot;:10,&quot;goal&quot;:&quot;Познакомиться с курсом и рассмотреть специальности «верстальщик» и «веб-дизайнер» в контексте развития технологий.&quot;,&quot;self_study&quot;:null,&quot;theory_video_provider&quot;:&quot;vimeo&quot;,&quot;theory_video_uid&quot;:&quot;239970025&quot;,&quot;theory&quot;:&quot;&quot;},&quot;id&quot;:153,&quot;slug&quot;:&quot;html&quot;,&quot;challenges_count&quot;:0,&quot;name&quot;:&quot;Основы HTML, CSS и веб-дизайна&quot;,&quot;allow_indexing&quot;:true,&quot;state&quot;:&quot;approved&quot;,&quot;course_state&quot;:&quot;finished&quot;,&quot;pricing_type&quot;:&quot;free&quot;,&quot;description&quot;:&quot;Для разработки современных интерфейсов и страниц незаменимыми инструментами являются HTML и CSS. Вместе с пониманием основ веб-дизайна они позволяют создавать красочные и удобные для пользователя макеты. Для разработчика так же важно обладать навыками работы с веб-инспекторами, уметь публиковать страницы в интернете и интегрировать их с социальными сетями. Всё вместе это помогает вывести сайт на новый уровень, предоставляя пользователю множество возможностей для взаимодействия. В этом курсе вы шаг за шагом изучите базовые возможности HTML, CSS и веб-дизайна, а так же сверстаете свою первую страницу.&quot;,&quot;kind&quot;:&quot;sandbox&quot;,&quot;updated_at&quot;:&quot;2026-01-23T15:48:52.050Z&quot;,&quot;language&quot;:&quot;html&quot;,&quot;duration_cache&quot;:9900,&quot;skills&quot;:[&quot;Создавать базовую разметку HTML-документа.&quot;,&quot;Подключать стили для страницы.&quot;,&quot;Использовать возможности веб-инспектора Chrome DevTools.&quot;,&quot;Публиковать свой сайт в интернете на хостинге GitHub Pages.&quot;,&quot;Использовать базовые концепции веб-дизайна.&quot;],&quot;keywords&quot;:[&quot;HTML5&quot;,&quot;CSS3&quot;,&quot;Developer Tools&quot;,&quot;Веб-дизайн&quot;,&quot;GitHub Pages&quot;],&quot;lessons_count&quot;:11,&quot;cover&quot;:&quot;https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTAyNDQsInB1ciI6ImJsb2JfaWQifX0=--c6428a115acdfe88a4aa744bdb1cc772c6c96ce6/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--6067466c2912ca31a17eddee04b8cf2a38c6ad17/image.png&quot;},&quot;recommendedLandings&quot;:[],&quot;lessonMemberUnit&quot;:null,&quot;accessToLearnUnitExists&quot;:true,&quot;accessToCourseExists&quot;:true},&quot;url&quot;:&quot;/courses/html/lessons/intro/theory_unit&quot;,&quot;version&quot;:&quot;0b0c6d4ebbd40fd58630a0dd89cc25544ccdf24e&quot;,&quot;encryptHistory&quot;:false,&quot;clearHistory&quot;:false}"><style data-mantine-styles="true">:root, :host{--mantine-font-family: Arial, sans-serif;--mantine-font-family-headings: Arial, sans-serif;--mantine-heading-font-weight: normal;--mantine-radius-default: 0rem;--mantine-primary-color-filled: var(--mantine-color-indigo-filled);--mantine-primary-color-filled-hover: var(--mantine-color-indigo-filled-hover);--mantine-primary-color-light: var(--mantine-color-indigo-light);--mantine-primary-color-light-hover: var(--mantine-color-indigo-light-hover);--mantine-primary-color-light-color: var(--mantine-color-indigo-light-color);--mantine-spacing-xxl: calc(4rem * var(--mantine-scale));--mantine-font-size-xs: 12px;--mantine-font-size-sm: 14px;--mantine-font-size-md: 16px;--mantine-font-size-lg: clamp(16.0000px, calc(15.2727px + 0.2273vw), 18.0000px);--mantine-font-size-xl: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-display-3: clamp(32.0000px, calc(26.1818px + 1.8182vw), 48.0000px);--mantine-font-size-display-2: clamp(36.0000px, calc(25.8182px + 3.1818vw), 64.0000px);--mantine-font-size-display-1: clamp(40.0000px, calc(25.4545px + 4.5455vw), 80.0000px);--mantine-font-size-h1: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-font-size-h2: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-font-size-h3: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-font-size-h4: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-font-size-h5: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-h6: 1rem;--mantine-primary-color-0: var(--mantine-color-indigo-0);--mantine-primary-color-1: var(--mantine-color-indigo-1);--mantine-primary-color-2: var(--mantine-color-indigo-2);--mantine-primary-color-3: var(--mantine-color-indigo-3);--mantine-primary-color-4: var(--mantine-color-indigo-4);--mantine-primary-color-5: var(--mantine-color-indigo-5);--mantine-primary-color-6: var(--mantine-color-indigo-6);--mantine-primary-color-7: var(--mantine-color-indigo-7);--mantine-primary-color-8: var(--mantine-color-indigo-8);--mantine-primary-color-9: var(--mantine-color-indigo-9);--mantine-color-red-0: #ffeaea;--mantine-color-red-1: #fed4d4;--mantine-color-red-2: #f4a7a8;--mantine-color-red-3: #ec7878;--mantine-color-red-4: #e55050;--mantine-color-red-5: #e03131;--mantine-color-red-6: #e02829;--mantine-color-red-7: #c71a1c;--mantine-color-red-8: #b21218;--mantine-color-red-9: #9c0411;--mantine-color-violet-0: #fce9ff;--mantine-color-violet-1: #f1cfff;--mantine-color-violet-2: #e09bff;--mantine-color-violet-3: #d16fff;--mantine-color-violet-4: #be37fe;--mantine-color-violet-5: #b51afe;--mantine-color-violet-6: #b009ff;--mantine-color-violet-7: #9b00e4;--mantine-color-violet-8: #8a00cc;--mantine-color-violet-9: #7800b3;--mantine-color-indigo-0: #edecff;--mantine-color-indigo-1: #d6d5fe;--mantine-color-indigo-2: #aaa9f4;--mantine-color-indigo-3: #7b79eb;--mantine-color-indigo-4: #5451e4;--mantine-color-indigo-5: #3b37e0;--mantine-color-indigo-6: #2d2adf;--mantine-color-indigo-7: #1f1ec7;--mantine-color-indigo-8: #1819b2;--mantine-color-indigo-9: #0c149e;--mantine-color-cyan-0: #dffdff;--mantine-color-cyan-1: #caf5ff;--mantine-color-cyan-2: #99e8ff;--mantine-color-cyan-3: #64daff;--mantine-color-cyan-4: #3ccffe;--mantine-color-cyan-5: #24c8fe;--mantine-color-cyan-6: #00c2ff;--mantine-color-cyan-7: #00ade4;--mantine-color-cyan-8: #009acd;--mantine-color-cyan-9: #0085b5;--mantine-color-green-0: #e9fdec;--mantine-color-green-1: #d7f6dc;--mantine-color-green-2: #b0eab9;--mantine-color-green-3: #86df94;--mantine-color-green-4: #62d574;--mantine-color-green-5: #4ccf5f;--mantine-color-green-6: #3fcc54;--mantine-color-green-7: #2fb344;--mantine-color-green-8: #25a03b;--mantine-color-green-9: #138a2e;--mantine-color-yellow-0: #fff7e2;--mantine-color-yellow-1: #ffeecd;--mantine-color-yellow-2: #ffdc9c;--mantine-color-yellow-3: #ffc966;--mantine-color-yellow-4: #feb93a;--mantine-color-yellow-5: #feae1e;--mantine-color-yellow-6: #ffa90f;--mantine-color-yellow-8: #ca8200;--mantine-color-yellow-9: #af7000;--mantine-h1-font-size: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-h1-font-weight: normal;--mantine-h2-font-size: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-h2-font-weight: normal;--mantine-h3-font-size: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-h3-font-weight: normal;--mantine-h4-font-size: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-h4-font-weight: normal;--mantine-h5-font-size: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-h5-font-weight: normal;--mantine-h6-font-size: 1rem;--mantine-h6-font-weight: normal;}

:root[data-mantine-color-scheme="dark"], :host([data-mantine-color-scheme="dark"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-dark-filled: var(--mantine-color-dark-5);--mantine-color-dark-filled-hover: var(--mantine-color-dark-6);--mantine-color-dark-light: rgba(105, 105, 105, 0.15);--mantine-color-dark-light-hover: rgba(105, 105, 105, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-0);--mantine-color-dark-outline: var(--mantine-color-dark-1);--mantine-color-dark-outline-hover: rgba(184, 184, 184, 0.05);--mantine-color-gray-filled: var(--mantine-color-gray-5);--mantine-color-gray-filled-hover: var(--mantine-color-gray-6);--mantine-color-gray-light: rgba(222, 226, 230, 0.15);--mantine-color-gray-light-hover: rgba(222, 226, 230, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-0);--mantine-color-gray-outline: var(--mantine-color-gray-1);--mantine-color-gray-outline-hover: rgba(241, 243, 245, 0.05);--mantine-color-red-filled: var(--mantine-color-red-5);--mantine-color-red-filled-hover: var(--mantine-color-red-6);--mantine-color-red-light: rgba(236, 120, 120, 0.15);--mantine-color-red-light-hover: rgba(236, 120, 120, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-0);--mantine-color-red-outline: var(--mantine-color-red-1);--mantine-color-red-outline-hover: rgba(254, 212, 212, 0.05);--mantine-color-pink-filled: var(--mantine-color-pink-5);--mantine-color-pink-filled-hover: var(--mantine-color-pink-6);--mantine-color-pink-light: rgba(250, 162, 193, 0.15);--mantine-color-pink-light-hover: rgba(250, 162, 193, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-0);--mantine-color-pink-outline: var(--mantine-color-pink-1);--mantine-color-pink-outline-hover: rgba(255, 222, 235, 0.05);--mantine-color-grape-filled: var(--mantine-color-grape-5);--mantine-color-grape-filled-hover: var(--mantine-color-grape-6);--mantine-color-grape-light: rgba(229, 153, 247, 0.15);--mantine-color-grape-light-hover: rgba(229, 153, 247, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-0);--mantine-color-grape-outline: var(--mantine-color-grape-1);--mantine-color-grape-outline-hover: rgba(243, 217, 250, 0.05);--mantine-color-violet-filled: var(--mantine-color-violet-5);--mantine-color-violet-filled-hover: var(--mantine-color-violet-6);--mantine-color-violet-light: rgba(209, 111, 255, 0.15);--mantine-color-violet-light-hover: rgba(209, 111, 255, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-0);--mantine-color-violet-outline: var(--mantine-color-violet-1);--mantine-color-violet-outline-hover: rgba(241, 207, 255, 0.05);--mantine-color-indigo-filled: var(--mantine-color-indigo-5);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-6);--mantine-color-indigo-light: rgba(123, 121, 235, 0.15);--mantine-color-indigo-light-hover: rgba(123, 121, 235, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-0);--mantine-color-indigo-outline: var(--mantine-color-indigo-1);--mantine-color-indigo-outline-hover: rgba(214, 213, 254, 0.05);--mantine-color-blue-filled: var(--mantine-color-blue-5);--mantine-color-blue-filled-hover: var(--mantine-color-blue-6);--mantine-color-blue-light: rgba(116, 192, 252, 0.15);--mantine-color-blue-light-hover: rgba(116, 192, 252, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-0);--mantine-color-blue-outline: var(--mantine-color-blue-1);--mantine-color-blue-outline-hover: rgba(208, 235, 255, 0.05);--mantine-color-cyan-filled: var(--mantine-color-cyan-5);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-6);--mantine-color-cyan-light: rgba(100, 218, 255, 0.15);--mantine-color-cyan-light-hover: rgba(100, 218, 255, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-0);--mantine-color-cyan-outline: var(--mantine-color-cyan-1);--mantine-color-cyan-outline-hover: rgba(202, 245, 255, 0.05);--mantine-color-teal-filled: var(--mantine-color-teal-5);--mantine-color-teal-filled-hover: var(--mantine-color-teal-6);--mantine-color-teal-light: rgba(99, 230, 190, 0.15);--mantine-color-teal-light-hover: rgba(99, 230, 190, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-0);--mantine-color-teal-outline: var(--mantine-color-teal-1);--mantine-color-teal-outline-hover: rgba(195, 250, 232, 0.05);--mantine-color-green-filled: var(--mantine-color-green-5);--mantine-color-green-filled-hover: var(--mantine-color-green-6);--mantine-color-green-light: rgba(134, 223, 148, 0.15);--mantine-color-green-light-hover: rgba(134, 223, 148, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-0);--mantine-color-green-outline: var(--mantine-color-green-1);--mantine-color-green-outline-hover: rgba(215, 246, 220, 0.05);--mantine-color-lime-filled: var(--mantine-color-lime-5);--mantine-color-lime-filled-hover: var(--mantine-color-lime-6);--mantine-color-lime-light: rgba(192, 235, 117, 0.15);--mantine-color-lime-light-hover: rgba(192, 235, 117, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-0);--mantine-color-lime-outline: var(--mantine-color-lime-1);--mantine-color-lime-outline-hover: rgba(233, 250, 200, 0.05);--mantine-color-yellow-filled: var(--mantine-color-yellow-5);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-6);--mantine-color-yellow-light: rgba(255, 201, 102, 0.15);--mantine-color-yellow-light-hover: rgba(255, 201, 102, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-0);--mantine-color-yellow-outline: var(--mantine-color-yellow-1);--mantine-color-yellow-outline-hover: rgba(255, 238, 205, 0.05);--mantine-color-orange-filled: var(--mantine-color-orange-5);--mantine-color-orange-filled-hover: var(--mantine-color-orange-6);--mantine-color-orange-light: rgba(255, 192, 120, 0.15);--mantine-color-orange-light-hover: rgba(255, 192, 120, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-0);--mantine-color-orange-outline: var(--mantine-color-orange-1);--mantine-color-orange-outline-hover: rgba(255, 232, 204, 0.05);--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-9) 0%, var(--mantine-color-cyan-7) 100%);--app-color-surface: #2e2e2e;}

:root[data-mantine-color-scheme="light"], :host([data-mantine-color-scheme="light"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-red-light: rgba(224, 40, 41, 0.1);--mantine-color-red-light-hover: rgba(224, 40, 41, 0.12);--mantine-color-red-outline-hover: rgba(224, 40, 41, 0.05);--mantine-color-violet-light: rgba(176, 9, 255, 0.1);--mantine-color-violet-light-hover: rgba(176, 9, 255, 0.12);--mantine-color-violet-outline-hover: rgba(176, 9, 255, 0.05);--mantine-color-indigo-light: rgba(45, 42, 223, 0.1);--mantine-color-indigo-light-hover: rgba(45, 42, 223, 0.12);--mantine-color-indigo-outline-hover: rgba(45, 42, 223, 0.05);--mantine-color-cyan-light: rgba(0, 194, 255, 0.1);--mantine-color-cyan-light-hover: rgba(0, 194, 255, 0.12);--mantine-color-cyan-outline-hover: rgba(0, 194, 255, 0.05);--mantine-color-green-light: rgba(63, 204, 84, 0.1);--mantine-color-green-light-hover: rgba(63, 204, 84, 0.12);--mantine-color-green-outline-hover: rgba(63, 204, 84, 0.05);--mantine-color-yellow-light: rgba(255, 169, 15, 0.1);--mantine-color-yellow-light-hover: rgba(255, 169, 15, 0.12);--mantine-color-yellow-outline-hover: rgba(255, 169, 15, 0.05);--app-color-surface: #f1f3f5;--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-5) 100%);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><div style="position:absolute;top:0rem" class=""></div><div style="max-width:var(--container-size-xl);height:100%;min-height:0rem" class=""><style data-mantine-styles="inline">.__m__-_R_5ub_{--grid-gutter:0rem;}</style><div style="height:100%;min-height:0rem" class="m_410352e9 mantine-Grid-root __m__-_R_5ub_"><div class="m_dee7bd2f mantine-Grid-inner" style="height:100%"><style data-mantine-styles="inline">.__m__-_R_rdub_{--col-flex-grow:auto;--col-flex-basis:91.66666666666667%;--col-max-width:91.66666666666667%;}@media(min-width: 48em){.__m__-_R_rdub_{--col-flex-grow:auto;--col-flex-basis:83.33333333333334%;--col-max-width:83.33333333333334%;}}</style><div style="min-width:0rem;height:100%;min-height:0rem;display:flex" class="m_96bdd299 mantine-Grid-col __m__-_R_rdub_"><style data-mantine-styles="inline">.__m__-_R_6qrdub_{margin-top:0rem;padding-inline:var(--mantine-spacing-xs);width:100%;}@media(min-width: 48em){.__m__-_R_6qrdub_{margin-top:var(--mantine-spacing-xl);width:80%;}}@media(min-width: 62em){.__m__-_R_6qrdub_{padding-inline:var(--mantine-spacing-xl);}}</style><div style="margin-inline:auto;max-width:var(--mantine-breakpoint-xl)" class="__m__-_R_6qrdub_"><div style="color:var(--mantine-color-dimmed)" class="m_4451eb3a mantine-Center-root" data-inline="true"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:calc(0.125rem * var(--mantine-scale));color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-lock "><path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6"></path><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path d="M8 11v-4a4 4 0 1 1 8 0v4"></path></svg></div><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Основы HTML, CSS и веб-дизайна</p></div><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size);margin-bottom:var(--mantine-spacing-xl)" class="m_8a5d1357 mantine-Title-root" data-order="1">Теория: Верстальщик vs. веб-дизайнер</h1><script type="application/ld+json">{"@context":"https://schema.org","@type":"LearningResource","name":"Верстальщик vs. веб-дизайнер","inLanguage":"ru","isPartOf":{"@type":"LearningResource","name":"Основы HTML, CSS и веб-дизайна"},"isAccessibleForFree":"False","hasPart":{"@type":"WebPageElement","isAccessibleForFree":"False","cssSelector":".paywalled"}}</script><div class=""><div style="--alert-color:var(--mantine-color-indigo-light-color);margin-bottom:var(--mantine-spacing-lg);font-size:var(--mantine-font-size-lg)" class="m_66836ed3 mantine-Alert-root" id="mantine-_R_remqrdub_" role="alert" aria-describedby="mantine-_R_remqrdub_-body" aria-labelledby="mantine-_R_remqrdub_-title"><div class="m_a5d60502 mantine-Alert-wrapper"><div class="m_667f2a6a mantine-Alert-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-rocket "><path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3"></path><path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3"></path><path d="M14 9a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></div><div class="m_667c2793 mantine-Alert-body"><div class="m_6a03f287 mantine-Alert-title"><span id="mantine-_R_remqrdub_-title" class="m_698f4f23 mantine-Alert-label">Полный доступ к материалам</span></div><div id="mantine-_R_remqrdub_-body" class="m_7fa78076 mantine-Alert-message"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Зарегистрируйтесь и получите доступ к этому и десяткам других курсов</p><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:linear-gradient(45deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-hover:linear-gradient(45deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-color:var(--mantine-color-white);--button-bd:none" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-variant="gradient" data-size="xs" href="/u/new"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Зарегистрироваться</span></span></a></div></div></div></div></div><div style="margin-bottom:var(--mantine-spacing-xl)" class=""><div class="ratio ratio-16x9"><iframe width="100%" height="auto" src="//player.vimeo.com/video/239970025" loading="lazy" allowFullScreen="" title="video"></iframe></div></div><div class="paywalled m_d08caa0 mantine-Typography-root"></div></div></div></div><style data-mantine-styles="inline">.__m__-_R_1bdub_{--col-flex-grow:auto;--col-flex-basis:8.333333333333334%;--col-max-width:8.333333333333334%;}@media(min-width: 48em){.__m__-_R_1bdub_{--col-flex-grow:auto;--col-flex-basis:16.666666666666668%;--col-max-width:16.666666666666668%;}}</style><div style="min-width:0rem;height:100%;min-height:0rem" class="m_96bdd299 mantine-Grid-col __m__-_R_1bdub_"><div style="margin-inline:var(--mantine-spacing-xs)" class="mantine-visible-from-sm"><a style="--button-color:var(--mantine-color-white);margin-bottom:var(--mantine-spacing-lg);text-decoration:none" class="mantine-focus-auto m_849cf0da mantine-focus-auto m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/html/lessons/intro/finish_unit?unit=theory" data-disabled="true" data-block="true" disabled=""><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label"><span style="margin-inline-end:var(--mantine-spacing-xs)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Дальше</span>→</span></span></a><a style="padding-inline:0rem" class="mantine-focus-auto m_f0824112 mantine-NavLink-root m_87cf2631 mantine-UnstyledButton-root"><span class="m_690090b5 mantine-NavLink-section" data-position="left"><div style="--ti-size:var(--ti-size-sm);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-list-numbers "><path d="M11 6h9"></path><path d="M11 12h9"></path><path d="M12 18h8"></path><path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"></path><path d="M6 10v-6l-2 2"></path></svg></div></span><div class="m_f07af9d2 mantine-NavLink-body"><span class="m_1f6ac4c4 mantine-NavLink-label">Навигация по теме</span><span class="m_57492dcc mantine-NavLink-description">Теория</span></div><span class="m_690090b5 mantine-NavLink-section" data-position="right"></span></a><div style="margin-block:var(--mantine-spacing-lg)" class="m_3eebeb36 mantine-Divider-root" data-orientation="horizontal" role="separator"></div><div style="margin-block:var(--mantine-spacing-lg)" class=""><div style="justify-content:space-between;margin-bottom:calc(0.1875rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-xs)" class="m_8bffd616 mantine-Flex-root __m__-_R_qimrbdub_"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Завершено</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">0 / 11</p></div><div style="--progress-size:var(--progress-size-sm)" class="m_db6d6462 mantine-Progress-root" data-size="sm"><div style="--progress-section-size:0%;--progress-section-color:var(--mantine-color-gray-filled)" class="m_2242eb65 mantine-Progress-section" role="progressbar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" aria-valuetext="0%"></div></div></div><button style="padding-inline:0rem" class="mantine-focus-auto m_f0824112 mantine-NavLink-root m_87cf2631 mantine-UnstyledButton-root" type="button"><span class="m_690090b5 mantine-NavLink-section" data-position="left"><div style="--ti-size:var(--ti-size-sm);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-message "><path d="M8 9h8"></path><path d="M8 13h6"></path><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12"></path></svg></div></span><div class="m_f07af9d2 mantine-NavLink-body"><span class="m_1f6ac4c4 mantine-NavLink-label">Обсуждения (архив)</span><span class="m_57492dcc mantine-NavLink-description"></span></div></button><div style="--toc-bg:var(--mantine-color-blue-light);--toc-color:var(--mantine-color-blue-light-color);--toc-size:var(--mantine-font-size-sm);--toc-radius:var(--mantine-radius-sm);margin-top:var(--mantine-spacing-xl)" class="m_bcaa9990 mantine-TableOfContents-root" data-variant="light" data-size="sm"></div></div><div class="mantine-hidden-from-sm"><div style="--stack-gap:0rem;--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><a style="--button-color:var(--mantine-color-white);margin-bottom:var(--mantine-spacing-xs);padding:0rem;text-decoration:none" class="mantine-focus-auto m_849cf0da mantine-focus-auto m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/html/lessons/intro/finish_unit?unit=theory" data-disabled="true" data-block="true" disabled=""><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">→</span></span></a><button style="--ai-size:var(--ai-size-sm);--ai-bg:transparent;--ai-hover:var(--mantine-color-indigo-light-hover);--ai-color:var(--mantine-color-indigo-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;padding-block:var(--mantine-spacing-lg);color:inherit;width:100%" class="mantine-focus-auto m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="subtle" data-size="sm" data-disabled="true" type="button" disabled=""><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-list-numbers "><path d="M11 6h9"></path><path d="M11 12h9"></path><path d="M12 18h8"></path><path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"></path><path d="M6 10v-6l-2 2"></path></svg></span></button><button style="--ai-size:var(--ai-size-sm);--ai-bg:transparent;--ai-hover:var(--mantine-color-indigo-light-hover);--ai-color:var(--mantine-color-indigo-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;padding-block:var(--mantine-spacing-lg);color:inherit;width:100%" class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="subtle" data-size="sm" type="button"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-message "><path d="M8 9h8"></path><path d="M8 13h6"></path><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12"></path></svg></span></button></div></div></div></div></div></div></div>
</main>
<footer class="bg-dark fw-light text-light px-3 py-5">
<div class="row small">
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 mb-3">Хекслет</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/about">О нас</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/testimonials">Отзывы</a>
</li>
<li>
<span class="nav-link link-light py-1 ps-0 external-link" data-href="https://b2b.hexlet.io" role="button">Корпоративное обучение</span>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/blog">Блог</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/qna">Вопросы и ответы</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/glossary">Глоссарий</a>
</li>
<li>
<span class="nav-link link-light py-1 ps-0 external-link" data-href="https://help.hexlet.io" data-target="_blank" role="button">Справка</span>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" target="_blank" rel="noopener noreferrer" href="/map">Карта сайта</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 fw-normal mb-3">Направления</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_devops">DevOps
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_data_analytics">Аналитика
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_backend_development">Бэкенд
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_programming">Программирование
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_testing">Тестирование
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_front_end_dev">Фронтенд
</a></li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5">Профессии</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/devops-engineer-from-scratch">DevOps-инженер с нуля</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/go">Go-разработчик</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/java">Java-разработчик</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/python">Python-разработчик </a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/data-analytics">Аналитик данных</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/qa-engineer">Инженер по ручному тестированию</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/php">РНР-разработчик</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/frontend">Фронтенд-разработчик</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5">Навыки</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/python-django-developer">Django</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/docker">Docker</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/php-laravel-developer">Laravel</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/postman">Postman</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/js-react-developer">React</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/js-rest-api">REST API в Node.js</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/spring-boot">Spring Boot</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/typescript">Typescript</a>
</li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="col-12 col-sm-4 col-md-2">
<div class="fs-4">
<ul class="list-unstyled d-flex">
<li class="me-3">
<a aria-label="Telegram" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://t.me/hexlet_ru"><span class="bi bi-telegram"></span>
</a></li>
<li>
<a aria-label="Youtube" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://www.youtube.com/user/HexletUniversity"><span class="bi bi-youtube"></span>
</a></li>
</ul>
</div>
<div class="mb-2 d-flex flex-column">
<a class="link-light text-decoration-none" rel="nofollow" href="mailto:support@hexlet.io">support@hexlet.io</a>
<a class="link-light text-decoration-none py-2" target="_blank" href="https://t.me/hexlet_help_bot">t.me/hexlet_help_bot</a>
</div>
<ul class="list-unstyled d-flex">
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://hexlet.io/locale/switch?new_locale=en" data-target="_self" role="button"><span class="my-auto">EN</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 opacity-100 external-link" rel="nofollow" data-href="https://ru.hexlet.io/locale/switch?new_locale=ru" data-target="_self" role="button"><span class="my-auto">RU</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://kz.hexlet.io/locale/switch?new_locale=kz" data-target="_self" role="button"><span class="my-auto">KZ</span>
</span></li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<ul class="list-unstyled fs-4">
<li class="mb-3">
<a class="link-light text-decoration-none" href="tel:8%20800%20100%2022%2047">8 800 100 22 47</a>
<span class="d-block opacity-50 small">бесплатно по РФ</span>
</li>
<li>
<a class="link-light text-decoration-none" href="tel:%2B7%20495%20085%2021%2062">+7 495 085 21 62</a>
<span class="d-block opacity-50 small">бесплатно по Москве</span>
</li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<div class="small mb-3">Образовательные услуги оказываются на основании Л035-01298-77/01989008 от 14.03.2025</div>
<ul class="list-unstyled small">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/legal">Правовая информация</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/offer">Оферта</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/license">Лицензия</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/contacts">Контакты</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-4 small">
<div class="mb-2">
<div>ООО «<a href="/" class="text-decoration-none link-light">Хекслет Рус</a>»</div>
<div>108813 г. Москва, вн.тер.г. поселение Московский,</div>
<div>г. Московский, ул. Солнечная, д. 3А, стр. 1, помещ. 20Б/3</div>
<div>ОГРН 1217300010476</div>
<div>ИНН 7325174845</div>
</div>
<hr>
<div>АНО ДПО «<a href="/" class="text-decoration-none link-light">Учебный центр «Хекслет</a>»</div>
<div>119331 г. Москва, вн. тер. г. муниципальный округ</div>
<div>Ломоносовский, пр-кт Вернадского, д. 29</div>
<div>ОГРН 1247700712390</div>
<div>ИНН 7736364948</div>
</div>
</div>
</footer>


<div id="root-assistant-offcanvas"></div>
<script src="/vite/assets/assistant-CdBlNCiQ.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-nkZBEvfU.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-naDSYSy9.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/MarkdownBlock-DbyKWoR_.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-D3e4yh1x.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-CGMYrt2Y.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/shiki-V011pkdv.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-DRqSHbQE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-CCH8ilKF.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-XR8Qr8kR.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dist-GCHh59xr.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Box-B5-OOzBf.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/notifications.store-C-3AFSMn.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useIsomorphicEffect-HJ6VK0D3.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-KSp6QbZ0.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/axios-BEvgo0ym.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/classnames-l6ipYlLR.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-BkKovM-s.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/debounce-jMQ_Cf4f.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/i18next-BlSq9s7B.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-U9M77rxp.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-DaLxUz_h.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-Bx1Cdrkz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-6XxiPFnt.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-CwjcCKJi.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CkL4ZRHB.js" as="script" crossorigin="anonymous">



<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v67327c56f0bb4ef8b305cae61679db8f1769101564043" integrity="sha512-rdcWY47ByXd76cbCFzznIcEaCN71jqkWBBqlwhF1SY7KubdLKZiEGeP7AyieKZlGP9hbY/MhGrwXzJC/HulNyg==" data-cf-beacon='{"version":"2024.11.0","token":"d11015b65d11429ea6b4a2ef37dd7e0b","server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>