<!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:29:55 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="zlFF99XINzDEof5iMVEedo14qg8mP2uHjrs_xLV7pBMhgI7AJ7aaUHLi2vo9Xu4BTXGHpS4IlSUzW6WQ53xDfQ";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>Адаптивность страницы | Введение в тестирование веб-приложений</title>
<meta name="description" content="Адаптивность страницы / Введение в тестирование веб-приложений: Выясняем, как отображаются страницы на разных устройствах и экранах">
<link rel="canonical" href="https://ru.hexlet.io/courses/web-testing-basics/lessons/adaptivity/theory_unit">
<meta name="robots" content="noarchive">
<meta property="og:title" content="Адаптивность страницы">
<meta property="og:title" content="Введение в тестирование веб-приложений">
<meta property="og:description" content="Адаптивность страницы / Введение в тестирование веб-приложений: Выясняем, как отображаются страницы на разных устройствах и экранах">
<meta property="og:url" content="https://ru.hexlet.io/courses/web-testing-basics/lessons/adaptivity/theory_unit">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="EBd23QX7_-vPSYqhh5ZbUZJJWml8xRWgVQfxEnXmUAf_xr3q94VSi3kKrjmLmasmUkB3w3Ty6wLo52tGJ-G3aQ" />
<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&promo_name=referal-program&promo_position=promo_position&promo_start=010724&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">
<link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6Mzk1MCwicHVyIjoiYmxvYl9pZCJ9fQ==--4a16fe638654fb8d5ae09d7e8ab8e16ff228214f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Bug%20fixing-amico.png"/><link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzkyOCwicHVyIjoiYmxvYl9pZCJ9fQ==--f60f9dfdd11bed62e5573394ea442764a862e2c8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Mobile%20testing-bro.png"/><link rel="preload" as="image" href="/vite/assets/development-BVihs_d5.png"/><div id="app" data-page="{"component":"web/courses/lessons/theory_unit","props":{"errors":{},"locale":"ru","language":"ru","httpsHost":"https://ru.hexlet.io","host":"ru.hexlet.io","colorScheme":"light","auth":{"user":{"id":null,"last_viewed_notification_id":null,"email":null,"state":null,"first_name":"","last_name":"","created_at":"2026-02-26T16:29:55.048Z","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}},"cloudflareTurnstileSiteKey":"0x4AAAAAAA15KmeFXzd2H0Xo","vkIdClientId":"51586979","yandexIdClientId":"88d071f1d3384eb4bd1deb37910235c7","formAuthToken":"1DwHLOt23DHg6cp_IGDCbIGunmTZWWwIc3SHIjSMPwk77cwbGQhxUVaq7ucsbzIbQaezztFukqrOlB12ZovYZw","topics":[{"id":104500,"title":"Как вернуться уже на пройденный тест. Мне очень надо","plain_title":"Как вернуться уже на пройденный тест. Мне очень надо ","creator":{"public_name":"Оля","id":909134,"is_tutor":false},"comments":[{"creator":{"public_name":"Оля","id":909134,"is_tutor":false},"id":197055,"body":"Уже все есть. Вы классный","topic_id":104500},{"creator":{"public_name":"Оля","id":909134,"is_tutor":false},"id":197054,"body":"Спасибо большое. Я уже нашла. Только не открывается page2. Большое спасибо. ","topic_id":104500},{"creator":{"public_name":"Игорь Пустошило","id":744978,"is_tutor":false},"id":197053,"body":"Тыкните мышом на название курса. Выпадет табличка с уроками, и там будут ссылки на тесты к урокам и на упражнения. Ткните на нужный тест. Хекслет скажет, что вы его уже прошли, но если хотите, можете пройти заново. Согласитесь и тестируйтесь.","topic_id":104500}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Адаптивность страницы","entity_url":null,"active":true}},{"id":104499,"title":"Как вернуться на выполненный тест. ","plain_title":"Как вернуться на выполненный тест. ","creator":{"public_name":"Оля","id":909134,"is_tutor":false},"comments":[{"creator":{"public_name":"Maksim Litvinov","id":198906,"is_tutor":true},"id":197065,"body":"Используйте навигацию в панели справа, там можно на любой урок, тест и практику курса перейти","topic_id":104499}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Адаптивность страницы","entity_url":null,"active":true}},{"id":83388,"title":"Здравствуйте!\nСсылка на ресурс ,представленная в тексте урока, https://bluetree.ai/screenfly/ указывает,что такой страницы не существует","plain_title":"Здравствуйте! Ссылка на ресурс ,представленная в тексте урока, https://bluetree.ai/screenfly/ указывает,что такой страницы не существует ","creator":{"public_name":"Иван","id":568200,"is_tutor":false},"comments":[{"creator":{"public_name":"Nikita Mikhaylov","id":186965,"is_tutor":true},"id":169298,"body":"Здравствуйте\n\nДействительно. Ох уж эти закладочки :) Поправил ссылку — спасибо!","topic_id":83388}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Адаптивность страницы","entity_url":null,"active":true}},{"id":88462,"title":"Добрый день. Пишу в Solution ответ, но все равно пишет что ошибка\nпроверил, мой ответ правильный ","plain_title":"Добрый день. Пишу в Solution ответ, но все равно пишет что ошибка проверил, мой ответ правильный ","creator":{"public_name":"Gabit Bekimov","id":646455,"is_tutor":false},"comments":[{"creator":{"public_name":"Ivan Gagarinov","id":75907,"is_tutor":true},"id":176725,"body":"**Gabit Bekimov**, здравствуйте. Пришлите, пожалуйста, ссылку на свое решение. Я проверю почему не проходит проверка.","topic_id":88462}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Адаптивность страницы","entity_url":null,"active":true}},{"id":81830,"title":"Варианты ответов не копируются , от руки написанные принимаются , как ошибка . Что делать ?","plain_title":"Варианты ответов не копируются , от руки написанные принимаются , как ошибка . Что делать ? ","creator":{"public_name":"","id":573505,"is_tutor":false},"comments":[{"creator":{"public_name":"","id":573505,"is_tutor":false},"id":166962,"body":"**Ivan Gagarinov**, это сработало , пробовал до этого мышкой -бестолку","topic_id":81830},{"creator":{"public_name":"Ivan Gagarinov","id":75907,"is_tutor":true},"id":166947,"body":"**Sergey**, попробуйте вставить скопированный текст сочетанием клавиш **Ctrl+v**. Работает?","topic_id":81830},{"creator":{"public_name":"","id":573505,"is_tutor":false},"id":166922,"body":"Где на клавиатуре взять такие кавычки\n","topic_id":81830}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Адаптивность страницы","entity_url":null,"active":true}},{"id":87835,"title":"Здравствуйте, написано страница не найдена...это ссылка на web-доступ https://web-web-testing-basics-adaptivity-5483802.evaluator2-5.hexlet.io/? ","plain_title":"Здравствуйте, написано страница не найдена...это ссылка на web-доступ https://web-web-testing-basics-adaptivity-5483802.evaluator2-5.hexlet.io/? ","creator":{"public_name":"Елизавета Еремина","id":484869,"is_tutor":false},"comments":[{"creator":{"public_name":"Ivan Gagarinov","id":75907,"is_tutor":true},"id":175720,"body":"**Елизавета Еремина**, здравствуйте. Ссылка на веб-доступ всегда уникальная и зависит от вашего упражнения. Если вы откроете упражнение и в нем веб-доступ, а затем закроете упражнение, то ссылка на веб-доступ перестанет работать. Вам нужно заново открыть упражнение и веб-доступ с новой ссылкой. Проверьте, пожалуйста, работает ли сейчас веб-доступ с новой ссылкой?","topic_id":87835}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Адаптивность страницы","entity_url":null,"active":true}},{"id":87845,"title":"Добрый день. Не активно кнопка \"сохранить код\"","plain_title":"Добрый день. Не активно кнопка \"сохранить код\" ","creator":{"public_name":"Ксения","id":640850,"is_tutor":false},"comments":[{"creator":{"public_name":"Olga Pejenkova","id":364375,"is_tutor":true},"id":175985,"body":"**Ксения**, \n\nвы можете сохранить скриншот на стороннем ресурсе (например, [lightshot](https://app.prntscr.com/ru/)), а сюда приложить ссылку на него.","topic_id":87845},{"creator":{"public_name":"Olga Pejenkova","id":364375,"is_tutor":true},"id":175805,"body":"**Ксения**, \n\nуточните, пожалуйста, эта кнопка, которая появляется вместе с кнопкой \"завершить\" после запуска проверки? Я проверила сейчас, все в порядке. Попробуйте, пожалуйста, сделать сброс упражнения, обновить страницу с упражнением.","topic_id":87845},{"creator":{"public_name":"Ксения","id":640850,"is_tutor":false},"id":176020,"body":"**Olga Pejenkova**, https://prnt.sc/xZ3_SyseJxJC","topic_id":87845},{"creator":{"public_name":"Olga Pejenkova","id":364375,"is_tutor":true},"id":175966,"body":"**Ксения**, \n\nСделайте, пожалуйста, скриншот, как это выглядит, чтобы посмотреть в чем может быть проблема.","topic_id":87845},{"creator":{"public_name":"Ксения","id":640850,"is_tutor":false},"id":175935,"body":"Сделала несколько раз сброс, обновляла, кнопка осталась неактивной","topic_id":87845},{"creator":{"public_name":"Ксения","id":640850,"is_tutor":false},"id":175974,"body":"**Olga Pejenkova**,Не могу понять, как сюда приложить скрин","topic_id":87845},{"creator":{"public_name":"Olga Pejenkova","id":364375,"is_tutor":true},"id":176137,"body":"**Ксения**, \n\nу вас вкладка **\"Output\"** пустая, похоже, что вы не отправляли решение на проверку, поэтому кнопка ожидаемо недоступна. \n\nПорядок действий должен быть такой: \n\n- на вкладке **\"solution\"** пишите решение, пусть даже это будет черновой вариант, который не работает до конца\n- далее нажимаете кнопку **\"Проверить\"** и запускается проверка\n- На вкладке **\"Output\"** вы получаете вывод тестов, и кнопка **\"Сохранить код\"** становится доступной.","topic_id":87845}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Адаптивность страницы","entity_url":null,"active":true}},{"id":79235,"title":"Добрый вечер. Пока нет вопросов. Смотрю как работает такая возможность - создать топик - задать вопрос и куда чего нажимать )","plain_title":"Добрый вечер. Пока нет вопросов. Смотрю как работает такая возможность - создать топик - задать вопрос и куда чего нажимать ) ","creator":{"public_name":"Александр Маринин","id":520540,"is_tutor":false},"comments":[{"creator":{"public_name":"Nikita Mikhaylov","id":186965,"is_tutor":true},"id":163621,"body":"Хорошо :) ","topic_id":79235},{"creator":{"public_name":"Роман Тимановский","id":558112,"is_tutor":false},"id":166269,"body":"всем привет. в адаптивности не могу скопировать необходимые варианты... нет строки вставить)) да да проблемы с англ\n","topic_id":79235}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Адаптивность страницы","entity_url":null,"active":true}},{"id":89924,"title":"Добрый день. \nЧто такое \"Блок «Фронтенд-разработчик» имеет отступы меньше\"? \nМеньше чего или меньше от чего? Формулировка не понятна.","plain_title":"Добрый день. Что такое \"Блок «Фронтенд-разработчик» имеет отступы меньше\"? Меньше чего или меньше от чего? Формулировка не понятна. ","creator":{"public_name":"Andrey","id":664884,"is_tutor":false},"comments":[{"creator":{"public_name":"Ivan Gagarinov","id":75907,"is_tutor":true},"id":178834,"body":"**Andrey**, здравствуйте. В упражнении нужно сравнить страницу, которую сделал разработчик с эталонной страницей. Поэтому отступы относительно этих двух страниц Page-2 и главной (эталон).","topic_id":89924},{"creator":{"public_name":"Константин","id":663090,"is_tutor":false},"id":178865,"body":"**Andrey**, вот и я про тоже формулировки....отсутствие грамотной русской речи ","topic_id":89924},{"creator":{"public_name":"Ivan Gagarinov","id":75907,"is_tutor":true},"id":178867,"body":"**Константин**, в задании четко прописано что с чем сравнивается. В тексте есть указание, что сравнивается вторая версия с первой. Иначе бы весь смысл пунктов с отличиями не имел смысл, а не только это предложение.","topic_id":89924},{"creator":{"public_name":"Andrey","id":664884,"is_tutor":false},"id":178924,"body":"Да понятно что надо сравнить две страницы. Отступы откуда? Мне что - их линейкой выверять? Лично я визуально не увидел разницы в части отступов, либо не понял о каких отступах речь. Формулировка заданий хромает и это еще только бесплатный курс... Печаль,","topic_id":89924},{"creator":{"public_name":"Ivan Gagarinov","id":75907,"is_tutor":true},"id":178927,"body":"**Andrey**, отступы от краев — это популярный случай в разработке веб-приложений, обычно просто говорят \"отступ\" подразумевая края. Передам автору, чтобы поправил описание. Тем не менее в реальной работе эта формулировка будет часто встречаться, поэтому придется к ней привыкнуть.","topic_id":89924}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Адаптивность страницы","entity_url":null,"active":true}},{"id":81829,"title":"просят какой то код от меня , что делать ?","plain_title":"просят какой то код от меня , что делать ? ","creator":{"public_name":"","id":573505,"is_tutor":false},"comments":[{"creator":{"public_name":"","id":573505,"is_tutor":false},"id":167121,"body":"Уже разобрался","topic_id":81829},{"creator":{"public_name":"Olga Pejenkova","id":364375,"is_tutor":true},"id":167073,"body":"**Sergey**, \n\nрасскажите, пожалуйста, подробней что именно не получается, будем разбираться.","topic_id":81829}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Адаптивность страницы","entity_url":null,"active":true}}],"lesson":{"exercise":{"id":2113,"slug":"web_testing_basics_adaptivity_exercise","name":null,"state":"active","kind":"exercise","language":"javascript","locale":"ru","has_web_view":true,"has_test_view":false,"reviewable":true,"readme":"При разработке сайтов пользуется популярностью подход, который называется **Mobile First**. В этом подходе создание идёт от мобильной версии сайта к десктопной, то есть к устройствам с монитором.\n\nРазработчик страницы из этого упражнения сделал так же — он адаптировал страницу для мобильных устройств, но не проверил на десктопных. Ваша задача — описать отличия, которые возникли в сравнении с эталонным макетом.\n\nЧтобы посмотреть макеты, используйте кнопку «Web-доступ» в правой панели упражнения:\n\n* После нажатия на неё вы попадёте на страницу с финальным макетом\n* Для перехода на страницу, которую сделал разработчик, перейдите на страницу _Page-2_. Кнопки перехода доступны в начале макета. Эта навигация не является частью дизайна страницы и нужна для удобного перехода между разными шаблонами\n\nВо всех упражнениях, где преполагается протестировать веб-страницу, есть кнопка «Web-доступ» для перехода на эту страницу.\n\nСравните оба макета и выберете те варианты ответа, которые подходят. Скопируйте их в файл _solution_. Одна строчка — одно различие. Чтобы не ошибиться в написании используйте копирование текста.\n\n## Варианты отличий\n\n* Шапка сайта не в одну строку\n* Шапка сайта другого цвета\n* Шапка сайта находится не в той части сайта\n* Текст блока \"Фронтенд-разработчик\" имеет отступы меньше\n* Текст блока \"Фронтенд-разработчик\" имеет отступы больше\n* Кнопка \"Посмотреть программу\" не на своем месте\n* Заголовок \"Учим необходимому\" отличается\n* Список инструментов и навыков расположен не в две колонки\n* Список инструментов и навыков расположен не в три колонки\n\n## solution\n\nЗапишите в файл _solution_ все найденные различия. Помните, что одно различие — одна строчка. Сохраняйте заглавные буквы и кавычки. Самый простой способ — скопировать правильные варианты в файл.\n\nПример файла с решением:\n\n```\nШапка побежала к бабушке с пирожками\nВ списке инструментов нет молотка\n```\n\n## Подсказки\n\n* Шапка сайта — область страницы, где обычно располагается меню, поиск, логотип. Находится самой первой на странице\n","prepared_readme":"При разработке сайтов пользуется популярностью подход, который называется **Mobile First**. В этом подходе создание идёт от мобильной версии сайта к десктопной, то есть к устройствам с монитором.\n\nРазработчик страницы из этого упражнения сделал так же — он адаптировал страницу для мобильных устройств, но не проверил на десктопных. Ваша задача — описать отличия, которые возникли в сравнении с эталонным макетом.\n\nЧтобы посмотреть макеты, используйте кнопку «Web-доступ» в правой панели упражнения:\n\n* После нажатия на неё вы попадёте на страницу с финальным макетом\n* Для перехода на страницу, которую сделал разработчик, перейдите на страницу _Page-2_. Кнопки перехода доступны в начале макета. Эта навигация не является частью дизайна страницы и нужна для удобного перехода между разными шаблонами\n\nВо всех упражнениях, где преполагается протестировать веб-страницу, есть кнопка «Web-доступ» для перехода на эту страницу.\n\nСравните оба макета и выберете те варианты ответа, которые подходят. Скопируйте их в файл _solution_. Одна строчка — одно различие. Чтобы не ошибиться в написании используйте копирование текста.\n\n## Варианты отличий\n\n* Шапка сайта не в одну строку\n* Шапка сайта другого цвета\n* Шапка сайта находится не в той части сайта\n* Текст блока \"Фронтенд-разработчик\" имеет отступы меньше\n* Текст блока \"Фронтенд-разработчик\" имеет отступы больше\n* Кнопка \"Посмотреть программу\" не на своем месте\n* Заголовок \"Учим необходимому\" отличается\n* Список инструментов и навыков расположен не в две колонки\n* Список инструментов и навыков расположен не в три колонки\n\n## solution\n\nЗапишите в файл _solution_ все найденные различия. Помните, что одно различие — одна строчка. Сохраняйте заглавные буквы и кавычки. Самый простой способ — скопировать правильные варианты в файл.\n\nПример файла с решением:\n\n```\nШапка побежала к бабушке с пирожками\nВ списке инструментов нет молотка\n```\n\n## Подсказки\n\n* Шапка сайта — область страницы, где обычно располагается меню, поиск, логотип. Находится самой первой на странице\n","has_solution":true,"entity_name":"Адаптивность страницы"},"units":[{"id":7273,"name":"theory","url":"/courses/web-testing-basics/lessons/adaptivity/theory_unit"},{"id":7485,"name":"quiz","url":"/courses/web-testing-basics/lessons/adaptivity/quiz_unit"},{"id":7335,"name":"exercise","url":"/courses/web-testing-basics/lessons/adaptivity/exercise_unit"}],"links":[{"id":422997,"name":"Digital 2022 Global Overview","url":"https://datareportal.com/reports/digital-2022-global-overview-report"}],"ordered_units":[{"id":7273,"name":"theory","url":"/courses/web-testing-basics/lessons/adaptivity/theory_unit"},{"id":7485,"name":"quiz","url":"/courses/web-testing-basics/lessons/adaptivity/quiz_unit"},{"id":7335,"name":"exercise","url":"/courses/web-testing-basics/lessons/adaptivity/exercise_unit"}],"id":3268,"slug":"adaptivity","state":"approved","name":"Адаптивность страницы","course_order":120,"goal":"Выясняем, как отображаются страницы на разных устройствах и экранах","self_study":null,"theory_video_provider":"vimeo","theory_video_uid":"773468719","theory":"В 2022 году вышел отчет [Digital 2022 Global Overview](https://datareportal.com/reports/digital-2022-global-overview-report), в котором указано, что:\n\n* 53.96% переходов на сайты совершается со смартфонов\n* 43.53% переходов — с компьютеров и ноутбуков\n* 2.47% переходов — с планшетов\n* 0.03% переходов — с других устройств\n\nЕсли не принимать во внимание планшеты и другие устройства, которые не подходят под смартфоны, компьютеры и ноутбуки, то видно, что пользователи активно пользуются смартфонами и компьютерами для просмотра контента в интернете.\n\nСайт Хекслета в период с сентября по декабрь 2022 года открывался с мобильных устройств в 36% случаев. Возможно, и вы читаете этот урок с телефона прямо сейчас.\n\nУ всех устройств может быть разное разрешение экрана, то есть количество пикселей по высоте и ширине экрана. Такое разнообразие разрешений экрана вынуждает разработчиков создавать сайты, которые будут хорошо выглядеть на всех этих устройствах. Тестировщики же должны подтвердить, что сайт одинаково хорошо открывается на компьютере, последнем айфоне и на китайском смартфоне пятилетней давности.\n\nСпособность сайта открываться на разных разрешениях и подстраиваться под них называется **адаптивностью**. В этом уроке мы рассмотрим, в чем заключается адаптивность страницы, и посмотрим на примеры хорошей и плохой адаптивности. Также узнаем, где тестировщику можно проверить страницу на адаптивность.\n\n## Сценарии создания страницы\n\nЧтобы разобраться, какую страницу назвать адаптивной, рассмотрим разные пути создания страницы сайта:\n\n* Отсутствие поддержки мобильных устройств\n* Резиновый макет\n* Мобильная версия сайта\n* Адаптивный макет\n\n### Отсутствие поддержки мобильных устройств\n\nТаким способом создавались сайты в первые десять лет появления интернета. Мобильного интернета еще не существовало и возможность создавать страницы под мобильные устройства тоже. Всё изменилось с приходом мобильного интернета в 2000 году и появлением первых смартфонов. К 2022 году количество людей, которые используют смартфоны для просмотра сайтов, сравнялось с количеством людей, просматривающих сайты с компьютеров.\n\nНо и сейчас есть сайты, которые не адаптированы для мобильных устройств. Это легко заметить по маленькому шрифту и контенту, который выходит за пределы ширины устройства. Выход контента за ширину — частая ошибка начинающих разработчиков и при создании адаптивных страниц, поэтому тестировщику очень важно уметь находить такой контент.\n\nВот пример страницы, которая не адаптирована под мобильные устройства. В качестве примера эмулируется открытие страницы на iPhone 12 Pro. Эмуляция — имитация использования одного устройства на другом. В этом примере используется разрешение экрана такое же, как и у iPhone 12 Pro, при этом все действия выполнены в браузере Google Chrome.\n\n\n\nВ этом макете несколько проблем:\n\n* Фоновые заливки цветом не на всю ширину экрана\n* Текст и некоторые блоки выходят за пределы фона — не помещаются по размерам\n* В одних частях макета текст читаемый, в других же его невозможно прочитать из-за небольшого размера\n\n### Резиновый макет\n\nОдной из первых техник, которые придумали разработчики — резиновая верстка. Это когда блоки меняют свой размер в зависимости от разрешения устройства. Разработчикам приходилось переписывать много кода для достижения этой цели, но результат был далек от идеала:\n\n\n\n\n\nПри такой технике создания страницы блоки не меняют своего положения. В примере с макетом выше на первой строке всегда будет три блока, а во второй строке два. Это приводит к проблемам на очень больших или очень маленьких разрешениях. Например, так будет выглядеть макет на мобильном разрешении:\n\n\n\nТекст не помещается в заданные рамки размеров блоков и просто выходит за его пределы. Так как текст — основа любого сайта, то браузеры по умолчанию не скрывают контент, который вышел за пределы блока. Если пропорционально уменьшать текст, то он станет слишком маленького размера для комфортного чтения.\n\nТак разработчики пришли к выводу, что мобильная версия и версия для компьютеров — это два разных сайта.\n\n### Мобильная версия сайта\n\nРешение делать две разные версии сайта пользовалось большой популярностью еще до появления первых смартфонов. Такие сайты были адаптированы для первых мобильных телефонов и назывались _WAP-сайты_. Это название пришло от технологии WAP, с помощью которых соединялись кнопочные мобильные телефоны с интернетом.\n\nСейчас _WAP-сайты_ не актуальны, но принцип создания отдельного сайта для мобильных устройств остался и при появлении смартфонов. Например, популярная социальная сеть _VK_ имеет мобильную версию по адресу m.vk.com.\n\nОбычная версия VK:\n\n\n\nМобильная версия VK по адресу m.vk.com:\n\n\n\nМобильная и основная версия сайта разрабатываются параллельно друг другу, что вносит свои плюсы и минусы. Тестируются эти версии независимо друг от друга, так как проблема на одной из версий необязательно будет на другой.\n\nЧтобы не держать две разные версии одного и того же сайта, был придуман подход, который назвали адаптивный или отзывчивый дизайн.\n\n### Адаптивный макет\n\nПод термином адаптивность воспринимается буквальное значение — страница должна адаптироваться под разные устройства. Дело не только в размере блоков или текста, но и в их расположении. Взгляните на одну из страниц Хекслета с разных устройств:\n\n\n\nТакой дизайн предполагает три разных макета, которые реализуются в рамках одного сайта. Между этими тремя дизайнами используют резиновую верстку, чтобы макеты сменяли себя плавно при изменении разрешения устройства.\n\nРассмотрим несколько принципов адаптивного дизайна, на которые стоит ориентироваться тестировщику:\n\n* Основной контент должен дублироваться на всех разрешениях. Не должно быть ситуации, при которой на мобильной версии скрывается статья, но при этом отображающаяся на компьютере. Можно убирать декоративные элементы, но основной текст и посыл должны быть на месте\n* Дизайн и функционал сайта не должны меняться на разных разрешениях. Если в мобильной версии можно нажать на кнопку «Сделать хорошо», то это же действие можно сделать и на версии сайта для компьютеров\n* Переходы между версиями макета должны быть «плавными». Не хорошо, когда макет резко перепрыгивает, дергается или перезагружается при изменении разрешения\n\nЧтобы узнать, на каких разрешениях происходят переходы между версиями, стоит внимательно посмотреть на макет или посоветоваться с дизайнером/разработчиком. Они знают, при каком разрешении макет перестраивается под мобильную версию, а при каком — под планшеты.\n\nКрайние точки переходов между макетами называются **брейкпойнтами** — от английского _breakpoint_. Чтобы протестировать макет, нужно отталкиваться от этих точек. Они — база при переходе макета из одного состояния в другое.\n\nЕсли таких точек нет в техническом задании, то можно использовать усредненные значения или найти эти точки самостоятельно простым уменьшением окна браузера. Стандартными значениями для брейкпойнтов являются:\n\n* 375 пикселей по ширине для мобильных устройств\n* 768 или 960 пикселей по ширине для планшетов\n* 1440 пикселей по ширине для ноутбуков\n* 1600 пикселей по ширине для компьютеров\n\nЭто средние брейкпойнты и они могут быть другими в проекте, но от них можно отталкиваться при первом знакомстве с проектом.\n\n## Как тестировать адаптивность\n\nТестировать адаптивность сайта можно вручную — изменять размеры браузера, а также и с помощью разных сервисов. В уроке про HTML/CSS мы познакомимся с инструментом DevTools, который позволит тестировать адаптивность без сторонних сервисов. Но уже сейчас можно использовать бесплатные онлайн-инструменты:\n\n* [Adaptivator](http://adaptivator.ru/)\n* [Screenfly](https://screenfly.org/)\n\nСреди платных сервисов популярным является [Browser Stack](https://www.browserstack.com/). С его помощью можно протестировать сайт на определенном разрешении экрана и на различных связках операционных систем и браузеров. Подробнее про влияние этих вещей на отображение страницы поговорим в следующем уроке.\n\n## Выводы\n\nВ этом уроке мы узнали, в чем заключается адаптивность страницы, и посмотрели на примеры хорошей и плохой адаптивности. Также узнали, где тестировщику можно проверить страницу на адаптивность. Повторим важные моменты:\n\n* По отчетам, на 2022 год, половина из всех посещений сайтов приходится на мобильные устройства\n* Способность сайта открываться на разных разрешениях и подстраиваться под них называется адаптивностью\n* Чтобы адаптировать сайт для просмотра с мобильных устройств используются техники:\n 1. Резиновая верстка\n 2. Мобильная версия сайта\n 3. Адаптивная верстка\n* Протестировать сайт на мобильных устройствах можно самостоятельно или с помощью онлайн-сервисов\n"},"lessonMember":null,"courseMember":null,"course":{"start_lesson":{"exercise":null,"units":[{"id":7261,"name":"theory","url":"/courses/web-testing-basics/lessons/intro/theory_unit"}],"links":[],"ordered_units":[{"id":7261,"name":"theory","url":"/courses/web-testing-basics/lessons/intro/theory_unit"}],"id":3262,"slug":"intro","state":"approved","name":"Введение","course_order":60,"goal":"Знакомимся с темой курса","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"В этом курсе мы поговорим о ручном тестировании: из чего оно состоит, какие инструменты используются и на что обращать внимание при тестировании.\n\nНесмотря на то, что курс является вводным, он полезен как для разработчиков, так и для новичков:\n\n* **Новичкам в тестировании** — познакомиться с основами тестирования, выяснить, из чего оно состоит, и какие аспекты приложения или сайта требует\n* **Начинающим разработчикам** — выявить типичные проблемы при создании сайта, которых можно избежать уже на этапе постановки задачи. Например, как ускорить загрузку сайта, как обеспечить базовую защиту от атак и так далее\n* **Кто уже тестирует** — структурировать информацию, найти новые подходы к тестированию и почерпнуть новые темы, которые пригодятся в работе\n\nПроцесс тестирования в крупных приложениях неразрывно связан с разработкой, и на это есть три причины.\n\n### Качество\n\nБольшинство проектов в интернете рассчитано на массовое использование, будь то сайт с рецептами или приложение для просмотра сериалов. Такие проекты постоянно вводят новые функции и разделы, из-за чего сложно отслеживать их работоспособность.\n\nПредставьте свои ощущения, если вместо рецепта ваших любимых кексиков откроется страница с контактами или количество ингредиентов будет рассчитываться неправильно.\n\nТак как разработчики заняты разработкой продукта, то главными героями являются тестировщики. Их задача — проверить новый функционал и убедиться, что старый работает исправно. После этого продукт можно открывать для всех пользователей.\n\n### Понятность\n\nРазработчики сделали возможность изменения языка озвучки для сериала. Для компании важно, чтобы этот функционал не просто работал, но и был доступен для понимания. Он не должен быть скрыт за кучей настроек или расположен в том месте, где его не ожидаешь.\n\nТестировщики, как фокус-группа, не просто находят технические проблемы, но и следят, чтобы функционал был понятен и прост для использования. Такая область, как понятность и удобность использования, еще называется юзабилити, от английского usability — удобство использования.\n\n### Безопасность\n\nСайт или приложение = большое количество кода. Чем больше проект и больше в нем данных, тем больше встает вопрос о безопасности. Если продукт можно взломать простыми способами, которые написаны на первой странице поисковой системы, то будьте уверены — кто-то воспользуется этим.\n\nЕсли злоумышленник получит персональные данные, то может пострадать сайт, приложение, репутация или пользователи.\n\nОдна из задач тестировщика — проверить базовые виды атак, которые можно исправить сразу. Например, добавление кода на JavaScript в поля формы.\n\n## Что изучается в курсе\n\nВ процессе прохождения курса мы изучим, что тестируют специалисты, какие используют инструменты и на что стоит обращать внимание при заходе на сайт. Также изучим:\n\n* Как проверить сайт на разных устройствах: компьютер, планшет, смартфоны\n* Почему сайт может отличаться в разных программах и устройствах\n* Из чего состоит сайт, что такое HTML и CSS\n* Какой инструмент в браузерах необходим для тестировщиков\n* С какими проблемами безопасности можно встретиться и как их выявлять\n* Какие типы тестирования существуют\n"},"id":245,"slug":"web-testing-basics","challenges_count":4,"name":"Введение в тестирование веб-приложений","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"free","description":"На этом курсе вы узнаете о веб-приложениях и изучите основы их тестирования. \nВ процессе прохождения курса мы изучим, что тестируют специалисты, какие используют инструменты и на что стоит обращать внимание при заходе на сайт. Вы узнаете, как на работоспособность веб-приложения влияет многообразие устройств, скорость соединения и другие условия. Вы познакомитесь с основами юзабилити и доступности. Вы научитесь находить уязвимости, ошибки верстки и логики работы веб-приложения. Вы научитесь диагностировать работу сайта с помощью инструментов Devtools. \nОсвоить тестирование веб-приложений с нуля непросто, поэтому с первого же урока вы будете подкреплять теорию практикой. В упражнениях курса вы будете проводить тестирование различных страниц, каталогов, форм и приложений.","kind":"basic","updated_at":"2026-01-20T11:40:26.695Z","language":"other","duration_cache":62880,"skills":["Использовать DevTools для диагностики запросов","Обнаруживать ошибки в верстке и UX приложения","Тестировать SPA-приложения","Находить уязвимости веб-приложений, например, XSS"],"keywords":[],"lessons_count":15,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NjIyMSwicHVyIjoiYmxvYl9pZCJ9fQ==--23e3df9feea39eaed8d150557abd4377bc99b425/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--6067466c2912ca31a17eddee04b8cf2a38c6ad17/image.png"},"recommendedLandings":[{"stack":{"id":56,"slug":"qa-engineer","title":"Инженер по тестированию","audience":"for_beginners","start_type":"weekly","pricing_model":"purchase","priority":"high","kind":"profession","state":"published","stack_state":"finished","order":40,"duration_in_months":4},"id":100,"slug":"qa-engineer","title":"Инженер по ручному тестированию","subtitle":"Изучите виды тестирования, тест-кейсы, DevTools, Postman, SQL, Git и HTTP/HTTPS.","subtitle_for_lists":"Изучите виды тестирования, тест-кейсы, DevTools, Postman, SQL, Git и HTTP/HTTPS.","locale":"ru","current":true,"duration_in_months_text":"4 месяца","stack_slug":"qa-engineer","price_text":"от 3 368 ₽","duration_text":"4 месяца","cover_list_variant":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6Mzk1MCwicHVyIjoiYmxvYl9pZCJ9fQ==--4a16fe638654fb8d5ae09d7e8ab8e16ff228214f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Bug%20fixing-amico.png"},{"stack":{"id":121,"slug":"testing-basics-free","title":"Основы тестирования","audience":"for_beginners","start_type":"anytime","pricing_model":"free","priority":"low","kind":"track","state":"published","stack_state":"finished","order":1000,"duration_in_months":1},"id":200,"slug":"testing-basics-free","title":"Основы тестирования","subtitle":"Изучите основы тестирование, HTML/CSS, DevTools и веб-стандарты","subtitle_for_lists":"","locale":"ru","current":true,"duration_in_months_text":"1 месяц","stack_slug":"testing-basics-free","price_text":"Бесплатно","duration_text":"1 месяц","cover_list_variant":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzkyOCwicHVyIjoiYmxvYl9pZCJ9fQ==--f60f9dfdd11bed62e5573394ea442764a862e2c8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Mobile%20testing-bro.png"}],"lessonMemberUnit":null,"accessToLearnUnitExists":true,"accessToCourseExists":true},"url":"/courses/web-testing-basics/lessons/adaptivity/theory_unit","version":"0b0c6d4ebbd40fd58630a0dd89cc25544ccdf24e","encryptHistory":false,"clearHistory":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">Введение в тестирование веб-приложений</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">Теория: Адаптивность страницы</h1><script type="application/ld+json">{"@context":"https://schema.org","@type":"LearningResource","name":"Адаптивность страницы","inLanguage":"ru","isPartOf":{"@type":"LearningResource","name":"Введение в тестирование веб-приложений"},"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/773468719" loading="lazy" allowFullScreen="" title="video"></iframe></div></div><div class="paywalled m_d08caa0 mantine-Typography-root"><p>В 2022 году вышел отчет <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://datareportal.com/reports/digital-2022-global-overview-report" rel="noopener noreferrer" target="_blank">Digital 2022 Global Overview</a>, в котором указано, что:</p>
<ul>
<li>53.96% переходов на сайты совершается со смартфонов</li>
<li>43.53% переходов — с компьютеров и ноутбуков</li>
<li>2.47% переходов — с планшетов</li>
<li>0.03% переходов — с других устройств</li>
</ul>
<p>Если не принимать во внимание планшеты и другие устройства, которые не подходят под смартфоны, компьютеры и ноутбуки, то видно, что пользователи активно пользуются смартфонами и компьютерами для просмотра контента в интернете.</p>
<p>Сайт Хекслета в период с сентября по декабрь 2022 года открывался с мобильных устройств в 36% случаев. Возможно, и вы читаете этот урок с телефона прямо сейчас.</p>
<p>У всех устройств может быть разное разрешение экрана, то есть количество пикселей по высоте и ширине экрана. Такое разнообразие разрешений экрана вынуждает разработчиков создавать сайты, которые будут хорошо выглядеть на всех этих устройствах. Тестировщики же должны подтвердить, что сайт одинаково хорошо открывается на компьютере, последнем айфоне и на китайском смартфоне пятилетней давности.</p>
<p>Способность сайта открываться на разных разрешениях и подстраиваться под них называется <strong>адаптивностью</strong>. В этом уроке мы рассмотрим, в чем заключается адаптивность страницы, и посмотрим на примеры хорошей и плохой адаптивности. Также узнаем, где тестировщику можно проверить страницу на адаптивность.</p>
<h2 id="heading-2-1">Сценарии создания страницы</h2>
<p>Чтобы разобраться, какую страницу назвать адаптивной, рассмотрим разные пути создания страницы сайта:</p>
<ul>
<li>Отсутствие поддержки мобильных устройств</li>
<li>Резиновый макет</li>
<li>Мобильная версия сайта</li>
<li>Адаптивный макет</li>
</ul>
<h3 id="heading-3-2">Отсутствие поддержки мобильных устройств</h3>
<p>Таким способом создавались сайты в первые десять лет появления интернета. Мобильного интернета еще не существовало и возможность создавать страницы под мобильные устройства тоже. Всё изменилось с приходом мобильного интернета в 2000 году и появлением первых смартфонов. К 2022 году количество людей, которые используют смартфоны для просмотра сайтов, сравнялось с количеством людей, просматривающих сайты с компьютеров.</p>
<p>Но и сейчас есть сайты, которые не адаптированы для мобильных устройств. Это легко заметить по маленькому шрифту и контенту, который выходит за пределы ширины устройства. Выход контента за ширину — частая ошибка начинающих разработчиков и при создании адаптивных страниц, поэтому тестировщику очень важно уметь находить такой контент.</p>
<p>Вот пример страницы, которая не адаптирована под мобильные устройства. В качестве примера эмулируется открытие страницы на iPhone 12 Pro. Эмуляция — имитация использования одного устройства на другом. В этом примере используется разрешение экрана такое же, как и у iPhone 12 Pro, при этом все действия выполнены в браузере Google Chrome.</p>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NjI1NywicHVyIjoiYmxvYl9pZCJ9fQ==--db94a03287f9f7f169caa84fe02192a0dd122f35/page-without-adaptive.png" alt="Страница сайта без адаптивности" loading="lazy"/></p>
<p>В этом макете несколько проблем:</p>
<ul>
<li>Фоновые заливки цветом не на всю ширину экрана</li>
<li>Текст и некоторые блоки выходят за пределы фона — не помещаются по размерам</li>
<li>В одних частях макета текст читаемый, в других же его невозможно прочитать из-за небольшого размера</li>
</ul>
<h3 id="heading-3-3">Резиновый макет</h3>
<p>Одной из первых техник, которые придумали разработчики — резиновая верстка. Это когда блоки меняют свой размер в зависимости от разрешения устройства. Разработчикам приходилось переписывать много кода для достижения этой цели, но результат был далек от идеала:</p>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NjI2NSwicHVyIjoiYmxvYl9pZCJ9fQ==--7ab0574c8de55e701440629ccf574b14c797ca9b/elastic-layout-1.png" alt="Резиновая вёрстка макета" loading="lazy"/></p>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NjI2OCwicHVyIjoiYmxvYl9pZCJ9fQ==--813f020aedc943a71481a1f8c9415898c5e20bdf/elastic-layout-2.png" alt="Резиновая вёрстка макета" loading="lazy"/></p>
<p>При такой технике создания страницы блоки не меняют своего положения. В примере с макетом выше на первой строке всегда будет три блока, а во второй строке два. Это приводит к проблемам на очень больших или очень маленьких разрешениях. Например, так будет выглядеть макет на мобильном разрешении:</p>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NjI3OSwicHVyIjoiYmxvYl9pZCJ9fQ==--e481fdc9a868a896aff7663daa3c8155aa28db9b/elastic-layout-3.png" alt="Резиновая вёрстка макета на маленьком разрешении" loading="lazy"/></p>
<p>Текст не помещается в заданные рамки размеров блоков и просто выходит за его пределы. Так как текст — основа любого сайта, то браузеры по умолчанию не скрывают контент, который вышел за пределы блока. Если пропорционально уменьшать текст, то он станет слишком маленького размера для комфортного чтения.</p>
<p>Так разработчики пришли к выводу, что мобильная версия и версия для компьютеров — это два разных сайта.</p>
<h3 id="heading-3-4">Мобильная версия сайта</h3>
<p>Решение делать две разные версии сайта пользовалось большой популярностью еще до появления первых смартфонов. Такие сайты были адаптированы для первых мобильных телефонов и назывались <em>WAP-сайты</em>. Это название пришло от технологии WAP, с помощью которых соединялись кнопочные мобильные телефоны с интернетом.</p>
<p>Сейчас <em>WAP-сайты</em> не актуальны, но принцип создания отдельного сайта для мобильных устройств остался и при появлении смартфонов. Например, популярная социальная сеть <em>VK</em> имеет мобильную версию по адресу m.vk.com.</p>
<p>Обычная версия VK:</p>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NjI4NiwicHVyIjoiYmxvYl9pZCJ9fQ==--86dd976eefb70cfd2743d416c5d6c2dd79ce56cb/vk.png" alt="Группа Хекслета в VK" loading="lazy"/></p>
<p>Мобильная версия VK по адресу m.vk.com:</p>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NjI4OSwicHVyIjoiYmxvYl9pZCJ9fQ==--2805ad7ca9a09ebb05a00025a2d3a19f2a3174ea/vk-2.png" alt="Группа Хекслета в VK" loading="lazy"/></p>
<p>Мобильная и основная версия сайта разрабатываются параллельно друг другу, что вносит свои плюсы и минусы. Тестируются эти версии независимо друг от друга, так как проблема на одной из версий необязательно будет на другой.</p>
<p>Чтобы не держать две разные версии одного и того же сайта, был придуман подход, который назвали адаптивный или отзывчивый дизайн.</p>
<h3 id="heading-3-5">Адаптивный макет</h3>
<p>Под термином адаптивность воспринимается буквальное значение — страница должна адаптироваться под разные устройства. Дело не только в размере блоков или текста, но и в их расположении. Взгляните на одну из страниц Хекслета с разных устройств:</p>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NjI5MSwicHVyIjoiYmxvYl9pZCJ9fQ==--752b72adae37780be1bcea5fea9ef804960b63ca/3-devices-white.png" alt="Подготовительные курсы по Java на Хекслете" loading="lazy"/></p>
<p>Такой дизайн предполагает три разных макета, которые реализуются в рамках одного сайта. Между этими тремя дизайнами используют резиновую верстку, чтобы макеты сменяли себя плавно при изменении разрешения устройства.</p>
<p>Рассмотрим несколько принципов адаптивного дизайна, на которые стоит ориентироваться тестировщику:</p>
<ul>
<li>Основной контент должен дублироваться на всех разрешениях. Не должно быть ситуации, при которой на мобильной версии скрывается статья, но при этом отображающаяся на компьютере. Можно убирать декоративные элементы, но основной текст и посыл должны быть на месте</li>
<li>Дизайн и функционал сайта не должны меняться на разных разрешениях. Если в мобильной версии можно нажать на кнопку «Сделать хорошо», то это же действие можно сделать и на версии сайта для компьютеров</li>
<li>Переходы между версиями макета должны быть «плавными». Не хорошо, когда макет резко перепрыгивает, дергается или перезагружается при изменении разрешения</li>
</ul>
<p>Чтобы узнать, на каких разрешениях происходят переходы между версиями, стоит внимательно посмотреть на макет или посоветоваться с дизайнером/разработчиком. Они знают, при каком разрешении макет перестраивается под мобильную версию, а при каком — под планшеты.</p>
<p>Крайние точки переходов между макетами называются <strong>брейкпойнтами</strong> — от английского <em>breakpoint</em>. Чтобы протестировать макет, нужно отталкиваться от этих точек. Они — база при переходе макета из одного состояния в другое.</p>
<p>Если таких точек нет в техническом задании, то можно использовать усредненные значения или найти эти точки самостоятельно простым уменьшением окна браузера. Стандартными значениями для брейкпойнтов являются:</p>
<ul>
<li>375 пикселей по ширине для мобильных устройств</li>
<li>768 или 960 пикселей по ширине для планшетов</li>
<li>1440 пикселей по ширине для ноутбуков</li>
<li>1600 пикселей по ширине для компьютеров</li>
</ul>
<p>Это средние брейкпойнты и они могут быть другими в проекте, но от них можно отталкиваться при первом знакомстве с проектом.</p>
<h2 id="heading-2-6">Как тестировать адаптивность</h2>
<p>Тестировать адаптивность сайта можно вручную — изменять размеры браузера, а также и с помощью разных сервисов. В уроке про HTML/CSS мы познакомимся с инструментом DevTools, который позволит тестировать адаптивность без сторонних сервисов. Но уже сейчас можно использовать бесплатные онлайн-инструменты:</p>
<ul>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="http://adaptivator.ru/" rel="noopener noreferrer" target="_blank">Adaptivator</a></li>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://screenfly.org/" rel="noopener noreferrer" target="_blank">Screenfly</a></li>
</ul>
<p>Среди платных сервисов популярным является <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.browserstack.com/" rel="noopener noreferrer" target="_blank">Browser Stack</a>. С его помощью можно протестировать сайт на определенном разрешении экрана и на различных связках операционных систем и браузеров. Подробнее про влияние этих вещей на отображение страницы поговорим в следующем уроке.</p>
<h2 id="heading-2-7">Выводы</h2>
<p>В этом уроке мы узнали, в чем заключается адаптивность страницы, и посмотрели на примеры хорошей и плохой адаптивности. Также узнали, где тестировщику можно проверить страницу на адаптивность. Повторим важные моменты:</p>
<ul>
<li>По отчетам, на 2022 год, половина из всех посещений сайтов приходится на мобильные устройства</li>
<li>Способность сайта открываться на разных разрешениях и подстраиваться под них называется адаптивностью</li>
<li>Чтобы адаптировать сайт для просмотра с мобильных устройств используются техники:
<ol>
<li>Резиновая верстка</li>
<li>Мобильная версия сайта</li>
<li>Адаптивная верстка</li>
</ol>
</li>
<li>Протестировать сайт на мобильных устройствах можно самостоятельно или с помощью онлайн-сервисов</li>
</ul></div><div style="margin-block:var(--mantine-spacing-xl)" class=""><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);margin-bottom:var(--mantine-spacing-md)" class="m_8a5d1357 mantine-Title-root" data-order="2">Рекомендуемые программы</h2><style data-mantine-styles="inline">.__m__-_R_2mremqrdub_{--carousel-slide-gap:var(--mantine-spacing-xs);--carousel-slide-size:70%;}@media(min-width: 36em){.__m__-_R_2mremqrdub_{--carousel-slide-gap:var(--mantine-spacing-xl);--carousel-slide-size:50%;}}</style><div style="--carousel-control-size:calc(2.5rem * var(--mantine-scale));--carousel-controls-offset:var(--mantine-spacing-sm);margin-bottom:var(--mantine-spacing-lg);padding-block:var(--mantine-spacing-sm);background:var(--app-color-surface)" class="m_17884d0f mantine-Carousel-root responsiveClassName" data-orientation="horizontal" data-include-gap-in-size="true"><div class="m_39bc3463 mantine-Carousel-controls" data-orientation="horizontal"><button class="mantine-focus-auto m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" data-type="previous" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" data-type="next" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(-90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><div class="m_a2dae653 mantine-Carousel-viewport" data-type="media"><div class="m_fcd81474 mantine-Carousel-container __m__-_R_2mremqrdub_" data-orientation="horizontal"><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/programs/qa-engineer?promo_name=programs_list&promo_position=course&promo_creative=catalog_card&promo_type=card" target="_blank"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="--group-gap:calc(0.25rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">4 месяца</span><span class="mantine-focus-auto m_b6d8b162 mantine-Text-root">·</span><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">С нуля</span></div><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h5);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Инженер по ручному тестированию</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Изучите виды тестирования, тест-кейсы, DevTools, Postman, SQL, Git и HTTP/HTTPS.</p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6Mzk1MCwicHVyIjoiYmxvYl9pZCJ9fQ==--4a16fe638654fb8d5ae09d7e8ab8e16ff228214f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Bug%20fixing-amico.png" alt="Инженер по ручному тестированию" loading="eager"/></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:end;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-xs)" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">от 3 368 ₽</p><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/programs/testing-basics-free?promo_name=programs_list&promo_position=course&promo_creative=catalog_card&promo_type=card" target="_blank"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="--group-gap:calc(0.25rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">1 месяц</span><span class="mantine-focus-auto m_b6d8b162 mantine-Text-root">·</span><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">С нуля</span></div><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h5);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Основы тестирования</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root"></p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzkyOCwicHVyIjoiYmxvYl9pZCJ9fQ==--f60f9dfdd11bed62e5573394ea442764a862e2c8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Mobile%20testing-bro.png" alt="Основы тестирования" loading="eager"/></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:end;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-xs)" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Бесплатно</p><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses?promo_name=programs_list&promo_position=course&promo_creative=catalog_card&promo_type=card"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);margin-bottom:var(--mantine-spacing-md);font-size:var(--mantine-font-size-h3)" class="m_8a5d1357 mantine-Title-root" data-order="2" data-responsive="true">Каталог</h2><p style="margin-bottom:auto" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Полный список доступных курсов по разным направлениям</p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="/vite/assets/development-BVihs_d5.png" alt="Orientation"/></div></div></div></a></div></div></div></div></div></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/web-testing-basics/lessons/adaptivity/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 / 15</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/web-testing-basics/lessons/adaptivity/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>