Все мы привыкли, что у научно-популярных книг есть оглавление, введение, множество отдельных глав, заключительная глава с ключевыми выводами, список терминов и использованных источников. Это привычная структура книги, которая обязательно должна быть.
А теперь представьте, что вы купили новую книгу в жанре нон-фикш — например, о психологии, программировании или естественных науках. Уже дома вы открываете книжку и не видите введения, оглавления и прочих важных блоков — это непривычно и странно. У вас может возникнуть недоверие к этой книге, ведь она заметно отличается от всего, к чему мы привыкли.
Так же и студенты привыкают к структуре уроков. Они ожидают, что у каждого урока будет введение, теория, выводы, дополнительные материалы. Именно эту тему мы разберем сегодня. Вы узнаете, как каждая из перечисленных частей повышает образовательные результаты студента и помогает ему лучше усваивать новое.
Структура урока
Урок состоит из следующих частей:
- Введение — краткое и вовлекающее описание темы урока
- Теория — сам рассказ о теме урока
- Выводы — подведение итогов
- Дополнительные ссылки — список ссылок, которые помогут студенту глубже погрузиться в тему
Разберем каждую часть подробнее по порядку. Когда будете составлять план и писать урок, можете работать по удобному для вас алгоритму.
Введение
Благодаря введению студент плавно подходит к новой теме. Это связано с принципами андрагогики — науки об обучении взрослых. Введение помогает понять:
- О чем будет урок
- Почему важно изучить эту тему
- Какие знания и навыки студент получит во время урока
- В чем польза от этих новых знаний и навыков
- Что произойдет, если этих знаний и навыков не будет
Согласно этим пунктам и строится введение. Подробнее об этом мы рассказываем в курсе «Как писать классные тексты».
Если начать урок без введения, то студенту будет неинтересно. Он не поймет, зачем он изучает тему, почему она важна, как она помогает в карьере. Если студент не понимает, как тема пригодится на практике, он не станет сосредотачиваться на ней, у него снизится мотивация. Поэтому важно обращать внимание на введение и писать его очень подробно.
Во введении нужно не просто перечислить основные моменты урока, но и сделать правильный заход. Он увеличит заинтересованность студента пройти урок. Мы в Хекслете используем следующие заходы:
- Через проблему
- Через историческую справку
- Через связь с реальностью
Через проблему
Когда студент начинает изучать тему, он еще ничего не знает. Если мы сразу будем говорить сложно, то он может испугаться. Чтобы студенту было легко вникнуть в тему, нужно начать объяснять ее через проблему — показать, как она помогает в работе или решении бизнес-задачи.
Например, мы пишем урок про анализ сделанных изменений в Git. Пишем введение:
Чтобы посмотреть разницу между файлами, нужно использовать специальную команду. В этом уроке познакомимся с ней.
В этом коротком абзаце есть несколько моментов, которые студент не поймет:
- О какой разнице между файлами идет речь
- Почему она возникла и в каких файлах
- Когда такое может произойти
Чтобы закрыть эти вопросы, можно написать так:
Во время разработки программистам часто приходится останавливаться и анализировать изменения, которые они сделали с последнего коммита.
В работе над реальным проектом программист постоянно смотрит изменения. Как правило, проект — это тысячи строк кода, десятки файлов и месяцы работы. Информации так много, что очень сложно вспомнить, какие фрагменты кода уже менялись, а в какие — еще нужно внести изменения.
В этом уроке мы разберем команду, которая помогает в таких ситуациях. Она показывает разницу между тем, что было и что стало. С ее помощью вы сможете анализировать изменения даже в сложном и запутанном коде.
Теперь студент поймет, в какой ситуации он может встретиться с этой проблемой, и на какие вопросы найдет ответы. Тема стала более ясной и доступной для новичка.
Через историческую справку
В некоторых случаях понять тему можно только через историческую справку. Например, чтобы объяснить, что такое DNS, нужно зайти через историю его появления. Такое вступление будет построено по такой структуре:
- Как все было устроено до появления DNS
- С какими проблемами сталкивались разработчики без DNS
- Как разработчики создали протокол DNS и решились ли проблемы, описанные выше
Так студент уже в начале урока поймет, чем полезен DNS, зачем его создали и какие потребности он сможет закрыть с его помощью.
Через связь с реальностью
В этом случае нужно показать студенту, что он сталкивается с темой урока в реальной жизни, а не только в программировании.
Например, мы решили рассказать, что такое криптография. Наша задача — сделать так, чтобы студенту эта тема стала интересна, близка и понятна. Для этого мы расскажем ему, где он встречается с криптографией в повседневной жизни:
Это может быть не очевидно, но мы сталкиваемся с криптографией каждый день. Например, когда мы оплачиваем покупки картой, смотрим видео на YouTube или заправляем машину. В таких ситуациях криптография защищает нашу информацию — шифрует ее, чтобы предотвратить кражу денег или данных.
Может показаться, что криптография – это дело разработчиков, хакеров и корпораций, а простому пользователю знать о ней необязательно. Однако это полезно не только узким специалистам, но и всем, кто заботится о собственной безопасности. +
Так студент не будет пугаться нового сложного слова, и тема ему станет понятной. Еще мы показываем важность темы — раз он сталкивается с темой урока постоянно, значит ему нужно разобраться в ней.
Такие заходы помогут студенту плавно подойти к основной теории, где ему предстоит изучить иногда достаточно сложную тему. Перейдем к ней.
Теория
Теория — это основная часть, где студент получит знания, которые мы пообещали во введении. Именно ради этих знаний студент пришел на урок, здесь объясняются вещи, которые необходимы для освоения темы курса.
На этапе проектирования урока нам важно продумать основные мысли уроков — то есть блоки, из которых будет состоять теория.
Теория должна быть грамотно выстроенной, без лишней информации и по всем правилам объяснения образовательного материала. Подходы к объяснению мы будем разбирать в следующих уроках, а здесь расскажем об основных ее характеристиках:
- Не должно быть теории ради теории. Каждый объясняемый процесс студент должен будет использовать на практике, поэтому не должно быть лишних терминов и отступлений
- Теория должна быть структурированной. Для этого используются заголовки разных уровней, списки, абзацы. Правила работы с этими составляющими также разберем в курсе «Как писать классные тексты»
- В теории нужна визуализация. Это поможет показать процесс, а не описывать его словами, так как это усложняет понимание. Об этом тоже расскажем в других уроках
- Теория не должна быть инструкцией только из действий. Такое подходит больше гайдам, а в уроках нам нужно повествование, чтобы студент больше погрузился в тему и рабочую атмосферу
Теория не должна обрываться на последнем предложении. Важно подытожить всё пройденное, для чего и пишутся выводы.
Выводы
Мы уже знаем, как важны введения в уроках — они помогают заинтересовать студента, объяснить ему, зачем изучать ту или иную тему. Хорошие введения помогают студенту встраивать новые знания в общий контекст — в итоге, он учится эффективнее.
Но есть один важный аспект — заключения. Они также необходимы, потому что с их помощью студент:
- Быстрее запоминает — он успевает подвести итоги, еще раз повторить весь материал и закрепить его
- Легче ориентируется в структуре урока и курса — если он что-то забыл, всегда можно вернуться к уже пройденному уроку и перечитать последний абзац
- Меньше устает — ему не нужно делать выводы самостоятельно, мы помогаем ему в этом
Вывод в конце урока помогает ученику систематизировать, что он только что узнал. С помощью вывода, мы подчеркиваем, что научился делать студент и с какими темами познакомился.
Выводы бывают краткими, когда повторяется мысль из введения, и расширенными, когда повторяются основные тезисы с урока. Подробнее о способах написания таких выводов мы рассказываем в курсе «Как писать классные тексты».
Дополнительные материалы
Этот блок идет последним перед практикой. В него помещают ссылки на дополнительные материалы по теме урока. В этот блок не нужно добавлять ссылки, где по сути повторяется всё то, что уже изучили. С помощью дополнительных материалов можно посмотреть на изученную тему с другой стороны. Так кругозор студента становится шире, и ему не придется выбирать среди огромного количества статей в сети необходимую.
В Хекслете мы поняли, что студенты обожают, когда с ними делятся дополнительными материалами. В этих ссылках они видят проявление заботы. Студент прочитал тему, заинтересовался и захотел углубиться, а мы заранее это предусмотрели и предоставили интересные и надежные источники.
Выводы
В этом уроке мы разобрали основные части урока. В нем важна не только теория, но и введение, заключение и дополнительные материалы. Эти составляющие делают урок более легким, привлекательным, понятным и заботливым. Так у студента будет возникать меньше тревоги и переживаний, что тема очень сложная. Нужно заранее беспокоиться о его эмоциональном состоянии.
<!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 22:47:06 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="IuLrjw9xKU33lBPSZFV9EK3G5qw3chIykZIKu3C8TafNMyC4_Q-ELUHXN0poWo1nbc_LBj9F7JAscpDvIruqyQ";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/awesome-text-structure/lessons/lesson-structure/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/awesome-text-structure/lessons/lesson-structure/theory_unit">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="9PaR_9e5Dr_VwbZ9StnQ5_h0_2sIA4qGw2AiweDNfkMbJ1rIJcej32OCkuVG1iCQOH3SwQA0dCR-gLiVssqZLQ" />
<script src="/vite/assets/inertia-DfXos102.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-BrRXra1y.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-cb8xch9l.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">
<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-26T22:47:06.932Z","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":"wsyfuxXEYp4mbSEJ9jVqIJzMyVpSJGiT5Cfhpoy0qOotHVSM57rP_pAuBZH6OppXXMXk8FoTljFZx3vy3rNPhA","topics":[],"lesson":{"exercise":null,"units":[{"id":7473,"name":"theory","url":"/courses/awesome-text-structure/lessons/lesson-structure/theory_unit"},{"id":7967,"name":"quiz","url":"/courses/awesome-text-structure/lessons/lesson-structure/quiz_unit"}],"links":[],"ordered_units":[{"id":7473,"name":"theory","url":"/courses/awesome-text-structure/lessons/lesson-structure/theory_unit"},{"id":7967,"name":"quiz","url":"/courses/awesome-text-structure/lessons/lesson-structure/quiz_unit"}],"id":3334,"slug":"lesson-structure","state":"approved","name":"Основные блоки внутри урока","course_order":170,"goal":"Изучаем, какими должны быть введение, теория, заключение и дополнительные материалы","self_study":"Продолжайте составлять план урока. На этом этапе пропишите ключевые тезисы — основные мысли каждого блока. Не забудьте указать, о чем будете говорить во введении и выводах, и что можете дать в дополнительных материалах.\n","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* Почему важно изучить эту тему\n* Какие знания и навыки студент получит во время урока\n* В чем польза от этих новых знаний и навыков\n* Что произойдет, если этих знаний и навыков не будет\n\nСогласно этим пунктам и строится введение. Подробнее об этом мы рассказываем в курсе [«Как писать классные тексты»](https://ru.hexlet.io/courses/awesome-text).\n\nЕсли начать урок без введения, то студенту будет неинтересно. Он не поймет, зачем он изучает тему, почему она важна, как она помогает в карьере. Если студент не понимает, как тема пригодится на практике, он не станет сосредотачиваться на ней, у него снизится мотивация. Поэтому важно обращать внимание на введение и писать его очень подробно.\n\nВо введении нужно не просто перечислить основные моменты урока, но и сделать правильный заход. Он увеличит заинтересованность студента пройти урок. Мы в Хекслете используем следующие заходы:\n\n* Через проблему\n* Через историческую справку\n* Через связь с реальностью\n\n#### Через проблему\n\nКогда студент начинает изучать тему, он еще ничего не знает. Если мы сразу будем говорить сложно, то он может испугаться. Чтобы студенту было легко вникнуть в тему, нужно начать объяснять ее через проблему — показать, как она помогает в работе или решении бизнес-задачи.\n\nНапример, мы пишем урок про анализ сделанных изменений в Git. Пишем введение:\n\nЧтобы посмотреть разницу между файлами, нужно использовать специальную команду. В этом уроке познакомимся с ней.\n\nВ этом коротком абзаце есть несколько моментов, которые студент не поймет:\n\n* О какой разнице между файлами идет речь\n* Почему она возникла и в каких файлах\n* Когда такое может произойти\n\nЧтобы закрыть эти вопросы, можно написать так:\n\nВо время разработки программистам часто приходится останавливаться и анализировать изменения, которые они сделали с последнего коммита.\\\n\\\nВ работе над реальным проектом программист постоянно смотрит изменения. Как правило, проект — это тысячи строк кода, десятки файлов и месяцы работы. Информации так много, что очень сложно вспомнить, какие фрагменты кода уже менялись, а в какие — еще нужно внести изменения.\\\n\\\nВ этом уроке мы разберем команду, которая помогает в таких ситуациях. Она показывает разницу между тем, что было и что стало. С ее помощью вы сможете анализировать изменения даже в сложном и запутанном коде.\n\nТеперь студент поймет, в какой ситуации он может встретиться с этой проблемой, и на какие вопросы найдет ответы. Тема стала более ясной и доступной для новичка.\n\n#### Через историческую справку\n\nВ некоторых случаях понять тему можно только через историческую справку. Например, чтобы объяснить, что такое DNS, нужно зайти через историю его появления. Такое вступление будет построено по такой структуре:\n\n* Как все было устроено до появления DNS\n* С какими проблемами сталкивались разработчики без DNS\n* Как разработчики создали протокол DNS и решились ли проблемы, описанные выше\n\nТак студент уже в начале урока поймет, чем полезен DNS, зачем его создали и какие потребности он сможет закрыть с его помощью.\n\n#### Через связь с реальностью\n\nВ этом случае нужно показать студенту, что он сталкивается с темой урока в реальной жизни, а не только в программировании.\n\nНапример, мы решили рассказать, что такое криптография. Наша задача — сделать так, чтобы студенту эта тема стала интересна, близка и понятна. Для этого мы расскажем ему, где он встречается с криптографией в повседневной жизни:\n\nЭто может быть не очевидно, но мы сталкиваемся с криптографией каждый день. Например, когда мы оплачиваем покупки картой, смотрим видео на YouTube или заправляем машину. В таких ситуациях криптография защищает нашу информацию — шифрует ее, чтобы предотвратить кражу денег или данных.\\\n\\\nМожет показаться, что криптография – это дело разработчиков, хакеров и корпораций, а простому пользователю знать о ней необязательно. Однако это полезно не только узким специалистам, но и всем, кто заботится о собственной безопасности. +\n\nТак студент не будет пугаться нового сложного слова, и тема ему станет понятной. Еще мы показываем важность темы — раз он сталкивается с темой урока постоянно, значит ему нужно разобраться в ней.\n\nТакие заходы помогут студенту плавно подойти к основной теории, где ему предстоит изучить иногда достаточно сложную тему. Перейдем к ней.\n\n### Теория\n\nТеория — это основная часть, где студент получит знания, которые мы пообещали во введении. Именно ради этих знаний студент пришел на урок, здесь объясняются вещи, которые необходимы для освоения темы курса.\n\nНа этапе проектирования урока нам важно продумать **основные мысли уроков** — то есть блоки, из которых будет состоять теория.\n\nТеория должна быть грамотно выстроенной, без лишней информации и по всем правилам объяснения образовательного материала. Подходы к объяснению мы будем разбирать в следующих уроках, а здесь расскажем об основных ее характеристиках:\n\n* Не должно быть теории ради теории. Каждый объясняемый процесс студент должен будет использовать на практике, поэтому не должно быть лишних терминов и отступлений\n* Теория должна быть структурированной. Для этого используются заголовки разных уровней, списки, абзацы. Правила работы с этими составляющими также разберем в курсе [«Как писать классные тексты»](https://ru.hexlet.io/courses/awesome-text)\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В этом уроке мы разобрали основные части урока. В нем важна не только теория, но и введение, заключение и дополнительные материалы. Эти составляющие делают урок более легким, привлекательным, понятным и заботливым. Так у студента будет возникать меньше тревоги и переживаний, что тема очень сложная. Нужно заранее беспокоиться о его эмоциональном состоянии.\n"},"lessonMember":null,"courseMember":null,"course":{"start_lesson":{"exercise":null,"units":[{"id":7470,"name":"theory","url":"/courses/awesome-text-structure/lessons/intro/theory_unit"}],"links":[],"ordered_units":[{"id":7470,"name":"theory","url":"/courses/awesome-text-structure/lessons/intro/theory_unit"}],"id":3331,"slug":"intro","state":"approved","name":"Введение","course_order":100,"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В этом курсе мы разберем основные методические принципы проектирования уроков, которых придерживаемся в Хекслете. А практики после каждого урока помогут закрепить полученные знания и навыки, поэтому их не стоит пропускать. Далее вы приступите к написанию уроков. Этот этап пройдет максимально просто, если вы будете применять рекомендации, которые получили в этом курсе.\n"},"id":286,"slug":"awesome-text-structure","challenges_count":0,"name":"Как проектировать классные уроки","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"free","description":"В этом курсе вы научитесь проектировать уроки на технические темы. Вы узнаете, как построить план урока и написать текст по нему. Вы научитесь раскладывать по полочкам сложные темы и дополнять абстрактную теорию примерами, кейсами и практическими заданиями. После курса вы сможете делиться своими знаниями с новичками в доступной и увлекательной форме.","kind":"additional","updated_at":"2026-01-20T11:44:27.960Z","language":"other","duration_cache":9360,"skills":["Создавать уроки с высокой образовательной ценностью","Доступно и увлекательно рассказывать о сложных вещах","Передавать свои знания новичкам"],"keywords":[],"lessons_count":9,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NzA5NywicHVyIjoiYmxvYl9pZCJ9fQ==--60f284baa05503be36b99005302b1c030efc7758/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2ZpbGwiOls2MDAsNDAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--25b4ee73052eb43df9a50f4a4459ce26d57b6a5d/image.png"},"recommendedLandings":[],"lessonMemberUnit":null,"accessToLearnUnitExists":true,"accessToCourseExists":true},"url":"/courses/awesome-text-structure/lessons/lesson-structure/theory_unit","version":"8f286f6358a90a7bef2263b3a6edf5a90a94fa42","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 class="paywalled m_d08caa0 mantine-Typography-root"><p>Все мы привыкли, что у научно-популярных книг есть оглавление, введение, множество отдельных глав, заключительная глава с ключевыми выводами, список терминов и использованных источников. Это привычная структура книги, которая обязательно должна быть.</p>
<p>А теперь представьте, что вы купили новую книгу в жанре нон-фикш — например, о психологии, программировании или естественных науках. Уже дома вы открываете книжку и не видите введения, оглавления и прочих важных блоков — это непривычно и странно. У вас может возникнуть недоверие к этой книге, ведь она заметно отличается от всего, к чему мы привыкли.</p>
<p>Так же и студенты привыкают к структуре уроков. Они ожидают, что у каждого урока будет введение, теория, выводы, дополнительные материалы. Именно эту тему мы разберем сегодня. Вы узнаете, как каждая из перечисленных частей повышает образовательные результаты студента и помогает ему лучше усваивать новое.</p>
<h2 id="heading-2-1">Структура урока</h2>
<p>Урок состоит из следующих частей:</p>
<ul>
<li>Введение — краткое и вовлекающее описание темы урока</li>
<li>Теория — сам рассказ о теме урока</li>
<li>Выводы — подведение итогов</li>
<li>Дополнительные ссылки — список ссылок, которые помогут студенту глубже погрузиться в тему</li>
</ul>
<p>Разберем каждую часть подробнее по порядку. Когда будете составлять план и писать урок, можете работать по удобному для вас алгоритму.</p>
<h3 id="heading-3-2">Введение</h3>
<p>Благодаря введению студент плавно подходит к новой теме. Это связано с принципами <strong>андрагогики</strong> — науки об обучении взрослых. Введение помогает понять:</p>
<ul>
<li>О чем будет урок</li>
<li>Почему важно изучить эту тему</li>
<li>Какие знания и навыки студент получит во время урока</li>
<li>В чем польза от этих новых знаний и навыков</li>
<li>Что произойдет, если этих знаний и навыков не будет</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://ru.hexlet.io/courses/awesome-text" rel="noopener noreferrer" target="_blank">«Как писать классные тексты»</a>.</p>
<p>Если начать урок без введения, то студенту будет неинтересно. Он не поймет, зачем он изучает тему, почему она важна, как она помогает в карьере. Если студент не понимает, как тема пригодится на практике, он не станет сосредотачиваться на ней, у него снизится мотивация. Поэтому важно обращать внимание на введение и писать его очень подробно.</p>
<p>Во введении нужно не просто перечислить основные моменты урока, но и сделать правильный заход. Он увеличит заинтересованность студента пройти урок. Мы в Хекслете используем следующие заходы:</p>
<ul>
<li>Через проблему</li>
<li>Через историческую справку</li>
<li>Через связь с реальностью</li>
</ul>
<h4 id="heading-4-3">Через проблему</h4>
<p>Когда студент начинает изучать тему, он еще ничего не знает. Если мы сразу будем говорить сложно, то он может испугаться. Чтобы студенту было легко вникнуть в тему, нужно начать объяснять ее через проблему — показать, как она помогает в работе или решении бизнес-задачи.</p>
<p>Например, мы пишем урок про анализ сделанных изменений в Git. Пишем введение:</p>
<p>Чтобы посмотреть разницу между файлами, нужно использовать специальную команду. В этом уроке познакомимся с ней.</p>
<p>В этом коротком абзаце есть несколько моментов, которые студент не поймет:</p>
<ul>
<li>О какой разнице между файлами идет речь</li>
<li>Почему она возникла и в каких файлах</li>
<li>Когда такое может произойти</li>
</ul>
<p>Чтобы закрыть эти вопросы, можно написать так:</p>
<p>Во время разработки программистам часто приходится останавливаться и анализировать изменения, которые они сделали с последнего коммита.<br/>
<br/>
В работе над реальным проектом программист постоянно смотрит изменения. Как правило, проект — это тысячи строк кода, десятки файлов и месяцы работы. Информации так много, что очень сложно вспомнить, какие фрагменты кода уже менялись, а в какие — еще нужно внести изменения.<br/>
<br/>
В этом уроке мы разберем команду, которая помогает в таких ситуациях. Она показывает разницу между тем, что было и что стало. С ее помощью вы сможете анализировать изменения даже в сложном и запутанном коде.</p>
<p>Теперь студент поймет, в какой ситуации он может встретиться с этой проблемой, и на какие вопросы найдет ответы. Тема стала более ясной и доступной для новичка.</p>
<h4 id="heading-4-4">Через историческую справку</h4>
<p>В некоторых случаях понять тему можно только через историческую справку. Например, чтобы объяснить, что такое DNS, нужно зайти через историю его появления. Такое вступление будет построено по такой структуре:</p>
<ul>
<li>Как все было устроено до появления DNS</li>
<li>С какими проблемами сталкивались разработчики без DNS</li>
<li>Как разработчики создали протокол DNS и решились ли проблемы, описанные выше</li>
</ul>
<p>Так студент уже в начале урока поймет, чем полезен DNS, зачем его создали и какие потребности он сможет закрыть с его помощью.</p>
<h4 id="heading-4-5">Через связь с реальностью</h4>
<p>В этом случае нужно показать студенту, что он сталкивается с темой урока в реальной жизни, а не только в программировании.</p>
<p>Например, мы решили рассказать, что такое криптография. Наша задача — сделать так, чтобы студенту эта тема стала интересна, близка и понятна. Для этого мы расскажем ему, где он встречается с криптографией в повседневной жизни:</p>
<p>Это может быть не очевидно, но мы сталкиваемся с криптографией каждый день. Например, когда мы оплачиваем покупки картой, смотрим видео на YouTube или заправляем машину. В таких ситуациях криптография защищает нашу информацию — шифрует ее, чтобы предотвратить кражу денег или данных.<br/>
<br/>
Может показаться, что криптография – это дело разработчиков, хакеров и корпораций, а простому пользователю знать о ней необязательно. Однако это полезно не только узким специалистам, но и всем, кто заботится о собственной безопасности. +</p>
<p>Так студент не будет пугаться нового сложного слова, и тема ему станет понятной. Еще мы показываем важность темы — раз он сталкивается с темой урока постоянно, значит ему нужно разобраться в ней.</p>
<p>Такие заходы помогут студенту плавно подойти к основной теории, где ему предстоит изучить иногда достаточно сложную тему. Перейдем к ней.</p>
<h3 id="heading-3-6">Теория</h3>
<p>Теория — это основная часть, где студент получит знания, которые мы пообещали во введении. Именно ради этих знаний студент пришел на урок, здесь объясняются вещи, которые необходимы для освоения темы курса.</p>
<p>На этапе проектирования урока нам важно продумать <strong>основные мысли уроков</strong> — то есть блоки, из которых будет состоять теория.</p>
<p>Теория должна быть грамотно выстроенной, без лишней информации и по всем правилам объяснения образовательного материала. Подходы к объяснению мы будем разбирать в следующих уроках, а здесь расскажем об основных ее характеристиках:</p>
<ul>
<li>Не должно быть теории ради теории. Каждый объясняемый процесс студент должен будет использовать на практике, поэтому не должно быть лишних терминов и отступлений</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://ru.hexlet.io/courses/awesome-text" rel="noopener noreferrer" target="_blank">«Как писать классные тексты»</a></li>
<li>В теории нужна визуализация. Это поможет показать процесс, а не описывать его словами, так как это усложняет понимание. Об этом тоже расскажем в других уроках</li>
<li>Теория не должна быть инструкцией только из действий. Такое подходит больше гайдам, а в уроках нам нужно повествование, чтобы студент больше погрузился в тему и рабочую атмосферу</li>
</ul>
<p>Теория не должна обрываться на последнем предложении. Важно подытожить всё пройденное, для чего и пишутся выводы.</p>
<h3 id="heading-3-7">Выводы</h3>
<p>Мы уже знаем, как важны введения в уроках — они помогают заинтересовать студента, объяснить ему, зачем изучать ту или иную тему. Хорошие введения помогают студенту встраивать новые знания в общий контекст — в итоге, он учится эффективнее.</p>
<p>Но есть один важный аспект — заключения. Они также необходимы, потому что с их помощью студент:</p>
<ul>
<li>Быстрее запоминает — он успевает подвести итоги, еще раз повторить весь материал и закрепить его</li>
<li>Легче ориентируется в структуре урока и курса — если он что-то забыл, всегда можно вернуться к уже пройденному уроку и перечитать последний абзац</li>
<li>Меньше устает — ему не нужно делать выводы самостоятельно, мы помогаем ему в этом</li>
</ul>
<p>Вывод в конце урока помогает ученику систематизировать, что он только что узнал. С помощью вывода, мы подчеркиваем, что научился делать студент и с какими темами познакомился.</p>
<p>Выводы бывают краткими, когда повторяется мысль из введения, и расширенными, когда повторяются основные тезисы с урока. Подробнее о способах написания таких выводов мы рассказываем в курсе «Как писать классные тексты».</p>
<h3 id="heading-3-8">Дополнительные материалы</h3>
<p>Этот блок идет последним перед практикой. В него помещают ссылки на дополнительные материалы по теме урока. В этот блок не нужно добавлять ссылки, где по сути повторяется всё то, что уже изучили. С помощью дополнительных материалов можно посмотреть на изученную тему с другой стороны. Так кругозор студента становится шире, и ему не придется выбирать среди огромного количества статей в сети необходимую.</p>
<p>В Хекслете мы поняли, что студенты обожают, когда с ними делятся дополнительными материалами. В этих ссылках они видят проявление заботы. Студент прочитал тему, заинтересовался и захотел углубиться, а мы заранее это предусмотрели и предоставили интересные и надежные источники.</p>
<h2 id="heading-2-9">Выводы</h2>
<p>В этом уроке мы разобрали основные части урока. В нем важна не только теория, но и введение, заключение и дополнительные материалы. Эти составляющие делают урок более легким, привлекательным, понятным и заботливым. Так у студента будет возникать меньше тревоги и переживаний, что тема очень сложная. Нужно заранее беспокоиться о его эмоциональном состоянии.</p></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/awesome-text-structure/lessons/lesson-structure/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 / 9</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><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/awesome-text-structure/lessons/lesson-structure/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></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-Bukl1lYy.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-BrRXra1y.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>