<section class="vb-m7q" id="vb-m7q" data-section-name="Направления обучения" data-vibeblock-unique-section="yes" aria-labelledby="vb-m7q-heading">
<style>
.vb-m7q,.vb-m7q *{box-sizing:border-box}.vb-m7q input,.vb-m7q textarea,.vb-m7q select{font:inherit}
.vb-m7q{--vb-m7q-ink:#292524;--vb-m7q-muted:#4e4e4e;--vb-m7q-line:#e7e5e4;background:#f5f5f5;color:var(--vb-m7q-ink);font-family:var(--t-text-font);padding:96px 40px}.vb-m7q .vb-m7q__wrap{max-width:1200px;margin:0 auto}.vb-m7q .vb-m7q__intro{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:end;margin-bottom:56px}.vb-m7q .vb-m7q__school{font-size:15px;margin:0 0 24px}.vb-m7q .vb-m7q__heading{font-family:var(--t-headline-font);font-size:64px;font-weight:300;line-height:1.05;letter-spacing:-1.92px;margin:0;text-wrap:balance}.vb-m7q .vb-m7q__lead{font-size:17px;line-height:1.6;letter-spacing:.16px;color:var(--vb-m7q-muted);max-width:440px;margin:0 0 4px}.vb-m7q .vb-m7q__tabs{display:flex;flex-wrap:wrap;gap:12px}.vb-m7q .vb-m7q__tabs--main{padding-bottom:24px;border-bottom:1px solid var(--vb-m7q-line)}.vb-m7q .vb-m7q__tab{font-family:var(--t-text-font);cursor:pointer;appearance:none;background:transparent;color:var(--vb-m7q-ink);border:1px solid #d6d3d1;border-radius:9999px;padding:15px 26px;font-size:20px;font-weight:400;line-height:1.3;text-align:center;white-space:normal;max-width:100%}.vb-m7q .vb-m7q__tab[aria-selected="true"]{background:var(--vb-m7q-ink);border-color:var(--vb-m7q-ink);color:#fff}.vb-m7q .vb-m7q__tabs--sub{gap:8px;padding:24px 0}.vb-m7q .vb-m7q__tabs--sub .vb-m7q__tab{font-size:15px;padding:12px 20px;border-color:transparent}.vb-m7q .vb-m7q__tabs--sub .vb-m7q__tab[aria-selected="true"]{background:#e7e5e4;color:#0c0a09;border-color:#e7e5e4}.vb-m7q .vb-m7q__tab:hover{border-color:#292524}.vb-m7q .vb-m7q__tab:focus-visible,.vb-m7q .vb-m7q__cta:focus-visible,.vb-m7q .vb-m7q__panel:focus-visible{outline:2px solid #292524;outline-offset:4px}.vb-m7q .vb-m7q__panel{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;border:1px solid var(--vb-m7q-line);background:#fafafa;padding:48px;display:grid;grid-template-columns:1.1fr 1fr;column-gap:80px;align-items:start}.vb-m7q .vb-m7q__panel::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-110px;bottom:-270px;width:620px;height:560px;background:radial-gradient(ellipse at 30% 60%,#a7e5d366,transparent 60%),radial-gradient(ellipse at 70% 65%,#c8b8e066,transparent 60%),radial-gradient(ellipse at 50% 90%,#f4c5a877,transparent 65%);filter:blur(25px)}.vb-m7q .vb-m7q__context{font-size:15px;color:var(--vb-m7q-muted);margin:0 0 24px}.vb-m7q .vb-m7q__title{font-family:var(--t-headline-font);font-size:40px;line-height:1.13;font-weight:300;letter-spacing:-.6px;margin:0 0 20px;text-wrap:balance}.vb-m7q .vb-m7q__description{font-size:16px;line-height:1.6;letter-spacing:.16px;color:var(--vb-m7q-muted);max-width:470px;margin:0}.vb-m7q .vb-m7q__topics-title{font-size:15px;font-weight:500;margin:0 0 12px}.vb-m7q .vb-m7q__topics{padding:0;margin:0;list-style:none}.vb-m7q .vb-m7q__topic{font-size:16px;line-height:1.5;padding:16px 0;border-bottom:1px solid #d6d3d1;display:flex;gap:14px}.vb-m7q .vb-m7q__topic::before{content:"";width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:#777169;margin-top:10px}.vb-m7q .vb-m7q__cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:9999px;background:#292524;color:#fff!important;text-decoration:none;font-family:var(--t-text-font);font-size:15px;font-weight:500;line-height:1.4;padding:12px 22px;margin-top:32px;text-align:center;max-width:100%}.vb-m7q .vb-m7q__cta:hover{background:#0c0a09}.vb-m7q [hidden]{display:none!important}
@media(min-width:960px) and (max-width:1199px){.vb-m7q{padding:80px 32px}.vb-m7q .vb-m7q__heading{font-size:56px}.vb-m7q .vb-m7q__panel{column-gap:48px}}
@media(min-width:640px) and (max-width:959px){.vb-m7q{padding:64px 28px}.vb-m7q .vb-m7q__intro{gap:32px}.vb-m7q .vb-m7q__heading{font-size:48px}.vb-m7q .vb-m7q__panel{padding:32px;column-gap:32px}.vb-m7q .vb-m7q__tab{font-size:18px;padding:14px 20px}.vb-m7q .vb-m7q__title{font-size:32px}}
@media(max-width:639px){.vb-m7q{padding:48px 20px}.vb-m7q .vb-m7q__intro{grid-template-columns:1fr;gap:24px;margin-bottom:32px}.vb-m7q .vb-m7q__heading{font-size:36px;letter-spacing:-.7px}.vb-m7q .vb-m7q__school{margin-bottom:20px}.vb-m7q .vb-m7q__lead{font-size:16px}.vb-m7q .vb-m7q__tab{font-size:17px;padding:12px 18px}.vb-m7q .vb-m7q__tabs{gap:8px}.vb-m7q .vb-m7q__tabs--sub{padding:20px 0}.vb-m7q .vb-m7q__tabs--sub .vb-m7q__tab{padding:11px 14px}.vb-m7q .vb-m7q__panel{grid-template-columns:1fr;padding:28px;gap:32px}.vb-m7q .vb-m7q__title{font-size:32px}.vb-m7q .vb-m7q__context{margin-bottom:20px}.vb-m7q .vb-m7q__cta{margin-top:24px}.vb-m7q .vb-m7q__panel::before{width:420px;height:480px;bottom:-260px}}
@media(max-width:479px){.vb-m7q{padding:40px 16px}.vb-m7q .vb-m7q__heading{font-size:32px}.vb-m7q .vb-m7q__panel{padding:24px}.vb-m7q .vb-m7q__tab{font-size:16px;padding:12px 16px}.vb-m7q .vb-m7q__title{font-size:30px}}
</style>
<div class="vb-m7q__wrap">
<div class="vb-m7q__intro"><div><p class="vb-m7q__school">Кодовая Среда · Онлайн-школа программирования</p><h2 class="vb-m7q__heading" id="vb-m7q-heading">Найдите своё<br>направление в IT</h2></div><p class="vb-m7q__lead">Не нужно знать всё заранее. Сравните направления, изучите темы и выберите, с чего хотите начать. Все программы — для новичков.</p></div>
<div class="vb-m7q__tabs vb-m7q__tabs--main" role="tablist" aria-label="Направления обучения"><button class="vb-m7q__tab" type="button" role="tab" id="vb-m7q-main-0" aria-selected="true" aria-controls="vb-m7q-category" tabindex="0">Веб-разработка</button><button class="vb-m7q__tab" type="button" role="tab" id="vb-m7q-main-1" aria-selected="false" aria-controls="vb-m7q-category" tabindex="-1">Python</button><button class="vb-m7q__tab" type="button" role="tab" id="vb-m7q-main-2" aria-selected="false" aria-controls="vb-m7q-category" tabindex="-1">Аналитика данных</button></div>
<div id="vb-m7q-category" role="tabpanel" aria-labelledby="vb-m7q-main-0">
<div class="vb-m7q__tabs vb-m7q__tabs--sub" role="tablist" aria-label="Темы направления Веб-разработка"><button class="vb-m7q__tab" type="button" role="tab" id="vb-m7q-sub-0" aria-controls="vb-m7q-panel" aria-selected="true" tabindex="0">HTML и CSS</button><button class="vb-m7q__tab" type="button" role="tab" id="vb-m7q-sub-1" aria-controls="vb-m7q-panel" aria-selected="false" tabindex="-1">JavaScript</button><button class="vb-m7q__tab" type="button" role="tab" id="vb-m7q-sub-2" aria-controls="vb-m7q-panel" aria-selected="false" tabindex="-1">Портфолио</button></div>
<div class="vb-m7q__panel" id="vb-m7q-panel" role="tabpanel" aria-labelledby="vb-m7q-sub-0" tabindex="0"><div><p class="vb-m7q__context">Веб-разработка / HTML и CSS</p><h3 class="vb-m7q__title">От идеи к первой странице</h3><p class="vb-m7q__description">Разберитесь, как устроены сайты. Научитесь создавать структуру страницы, оформлять её и адаптировать под разные экраны.</p><a class="t-btnflex t-btnflex_md vb-m7q__cta" href="#program"><span class="t-btnflex__text">Посмотреть программу обучения</span></a></div><div><h4 class="vb-m7q__topics-title">Что вы изучите</h4><ul class="vb-m7q__topics"><li class="vb-m7q__topic">Структура страницы и HTML-разметка</li><li class="vb-m7q__topic">Стили и оформление с помощью CSS</li><li class="vb-m7q__topic">Адаптивная вёрстка для разных экранов</li></ul></div></div>
</div></div>
<script>
(function(){'use strict';const root=document.getElementById('vb-m7q');if(!root)return;const data=[{name:'Веб-разработка',items:[['HTML и CSS','От идеи к первой странице','Разберитесь, как устроены сайты. Научитесь создавать структуру страницы, оформлять её и адаптировать под разные экраны.',['Структура страницы и HTML-разметка','Стили и оформление с помощью CSS','Адаптивная вёрстка для разных экранов']],['JavaScript','Добавьте странице интерактивность','Освойте основы JavaScript и научитесь делать страницы, которые реагируют на действия посетителей.',['Переменные и хранение данных','События и действия пользователя','Простые интерактивные элементы']],['Портфолио','Ваш первый сайт — в сети','Соберите знания в учебный проект: создайте собственную страницу и опубликуйте её, чтобы показать другим.',['Сборка первой страницы','Подготовка учебного проекта','Публикация проекта в интернете']]]},{name:'Python',items:[['Основы языка','Поймите логику программирования','Начните с простых конструкций Python и научитесь описывать задачи понятным кодом.',['Переменные и типы данных','Условия и циклы','Функции и повторное использование кода']],['Автоматизация','Поручите рутину коду','Узнайте, как Python помогает с повторяющимися задачами и обработкой файлов.',['Разбор повторяющихся задач','Чтение и обработка файлов','Автоматизация последовательности действий']],['Первый проект','Превратите знания в рабочий скрипт','Напишите небольшую программу с понятным результатом и пройдите путь от задачи до проверки решения.',['Постановка задачи и план решения','Написание небольшого скрипта','Проверка и получение результата']]]},{name:'Аналитика данных',items:[['Таблицы и данные','Найдите смысл в таблицах','Научитесь приводить данные в порядок, сравнивать значения и делать первые выводы.',['Очистка данных','Сортировка и упорядочивание таблиц','Базовый анализ данных']],['Python для анализа','Исследуйте данные с Python','Используйте код для работы с наборами данных и расчёта показателей, которые помогают отвечать на вопросы.',['Работа с наборами данных','Подготовка данных к расчётам','Расчёт и сравнение показателей']],['Визуализация','Сделайте результаты наглядными','Превратите данные в простые графики и научитесь объяснять, что стоит за цифрами.',['Выбор подходящего графика','Построение простых графиков','Объяснение результатов анализа']]]}];const main=root.querySelector('.vb-m7q__tabs--main');const sub=root.querySelector('.vb-m7q__tabs--sub');const category=root.querySelector('#vb-m7q-category');const panel=root.querySelector('#vb-m7q-panel');let selectedMain=0;function setSelected(list,index){Array.from(list.children).forEach(function(button,i){button.setAttribute('aria-selected',String(i===index));button.tabIndex=i===index?0:-1;});}function show(index){const item=data[selectedMain].items[index];setSelected(sub,index);panel.setAttribute('aria-labelledby','vb-m7q-sub-'+index);panel.querySelector('.vb-m7q__context').textContent=data[selectedMain].name+' / '+item[0];panel.querySelector('.vb-m7q__title').textContent=item[1];panel.querySelector('.vb-m7q__description').textContent=item[2];panel.querySelectorAll('.vb-m7q__topic').forEach(function(li,i){li.textContent=item[3][i];});}function chooseMain(index){selectedMain=index;setSelected(main,index);category.setAttribute('aria-labelledby','vb-m7q-main-'+index);sub.setAttribute('aria-label','Темы направления '+data[index].name);Array.from(sub.children).forEach(function(button,i){button.textContent=data[index].items[i][0];});show(0);}function bind(list,choose){list.addEventListener('click',function(event){const button=event.target.closest('[role="tab"]');if(!button||button.parentElement!==list)return;choose(Array.from(list.children).indexOf(button));});list.addEventListener('keydown',function(event){const buttons=Array.from(list.children);const current=buttons.indexOf(event.target);if(current<0)return;let next=current;if(event.key==='ArrowRight')next=(current+1)%buttons.length;else if(event.key==='ArrowLeft')next=(current+buttons.length-1)%buttons.length;else if(event.key==='Home')next=0;else if(event.key==='End')next=buttons.length-1;else return;event.preventDefault();choose(next);buttons[next].focus();});}bind(main,chooseMain);bind(sub,show);
})();
</script>
</section>