Курсы HTML и веб-дизайна: создание сайтов для детей
HTML, CSS, JavaScript, Figma
С первого урока делает свою игру — и сам ждёт следующего занятия.
Не нужно разбираться самим: на пробном уроке педагог увидит, что ребёнку по душе, и подберёт курс.
Стоимость обучения
Занятие — 90 минут. 1 раз в неделю, 90 минут
Не понравится — вернём деньги. Полный прайс →
Чему научится
- HTML5 семантика
- CSS и адаптивность
- Программирование на JavaScript
- Figma для дизайна
- Тренды веб-дизайна
Что создаст
- Сайт-портфолио
- Макет в Figma
- Адаптивный лендинг
- Интерактивные элементы
О курсе
Изучаем разработку веб-страниц: основы HTML, CSS и JavaScript. Усвоим актуальные тренды веб-дизайна и научимся проектировать макеты веб-проектов в графическом редакторе Figma. Эти занятия подходят ребятам, которые хотят разобраться, как устроен любой веб-проект в интернете — от макета до рабочей страницы в браузере.
Между собой мы иногда называем его коротко «веб-направление»: за 9 месяцев ученик проходит путь от первой строки HTML до собственного веб-портфолио. Начинаем с разметки страницы на HTML, добавляем стили на CSS, учимся делать страницу живой с помощью JavaScript — это и есть кодинг в браузере, а макеты будущих страниц сначала рисуем в Figma, так же как поступают в настоящих студиях веб-дизайна.
Каждое занятие заканчивается конкретным результатом: новым блоком страницы, рабочим скриптом или готовым макетом, а не просто конспектом. HTML — это скелет любой страницы: заголовки, абзацы, кнопки, картинки, ссылки. CSS отвечает за то, как всё это выглядит — цвета, отступы, шрифты, расположение блоков на экране.
JavaScript оживляет страницу: кнопка нажимается, меню открывается, форма проверяет, что поля заполнены, — простая логика интерфейса. Figma — отдельный инструмент: в ней сначала рисуют, как будет выглядеть страница, ещё до того, как написана хоть одна строка кода. Ученик проходит оба пути — от идеи и макета до рабочего результата в браузере — и видит, как одно превращается в другое.
Как устроены занятия. Занятия проходят раз в неделю по 90 минут в мини-группах до 6 человек — так преподаватель успевает подойти к каждому и проверить, что получилось. Программа разделена на несколько частей: сначала вёрстка страницы на HTML и оформление на CSS, затем разработка интерактивности на JavaScript, и отдельной линией через весь год — макетирование в Figma и основы веб-дизайна: сетки, типографика, цвет, адаптивность под экран телефона и компьютера.
Первые недели — простые статичные страницы без готовых шаблонов: визитка, страница о хобби, небольшой блог. Дальше добавляются формы, галереи, адаптивная вёрстка под разные экраны — от телефона до широкого монитора. Ближе к финалу — программирование на JavaScript: переключение вкладок, всплывающие подсказки, простая анимация при наведении.
Всё это ребята собирают своими руками, а не копируют готовый шаблон — поэтому под конец есть чем гордиться и что показать. К программированию на JavaScript переходят не в первый месяц, а когда вёрстка уже уверенная. К середине пути ученик уже собирает небольшие страницы самостоятельно, а к финалу — большой сайт-портфолио, который можно показать друзьям, опубликовать в интернете и добавить в собственное портфолио.
Инструменты простые: обычный браузер, бесплатный редактор кода VS Code и Figma, которая тоже открывается прямо в браузере, — специального мощного компьютера не нужно. Занятия проходят в наших филиалах в Москве или дома за компьютером, если ближе онлайн-формат. Материалы одинаковые для обоих форматов, поэтому переход из офлайна в онлайн и обратно не создаёт пробелов.
Прогресс виден на каждом занятии, а не только в конце подготовки: неделя за неделей в портфолио добавляется новая страница или новый приём и заканчивается готовым веб-проектом. Ребёнок сам решает, о чём будет его сайт-портфолио, — увлечение, учебный проект, страница класса или личный блог, — и весь курс двигается вокруг этой идеи.
Так учёба не превращается в абстрактные упражнения: результат — не оценка, а работающий веб-проект, которым можно поделиться. На каждом занятии есть короткий разбор: что получилось на прошлой неделе, что попробуем сегодня. Преподаватель показывает приём — например, как сделать адаптивное меню или анимацию при наведении — и ученик сразу применяет его в своей работе.
Ошибки не страшны: в вёрстке и коде почти всё можно поправить за минуту, поэтому пробовать разные варианты не боятся. В начале устроена короткая ознакомительная встреча с форматом занятий. На занятиях ребята работают в своём темпе, но общая структура прогресса одна на группу. К середине подготовки набор сохранённых страниц уже похож на настоящее портфолио.
После каждого занятия остаётся заметный кусок кода, который можно открыть и посмотреть заново. Формат не меняется в течение года — расписание и длительность занятия стабильны. Итог всегда один — готовый веб-проект, а не набор разрозненных упражнений. Педагог ведёт занятие лично, без записи на видео вместо живого урока.
За это время каждый пробует разные роли: разработчика вёрстки, автора макета и немного тестировщика собственной страницы. В календаре нет незаполненных недель — каждая тема идёт по порядку. Список тем построен так, чтобы каждая следующая опиралась на предыдущую. Расписание фиксировано на неделю вперёд, поэтому его удобно встроить в учебный график.
Семантическая разметка HTML — это когда каждый тег означает то, для чего он нужен: заголовок — заголовок, кнопка — кнопка, а не просто раскрашенный блок. Такая разметка понятна не только человеку, но и поисковым системам, и программам для людей с нарушениями зрения — это тоже часть темы про доступность, с которой знакомятся при освоении веб-разработки.
Адаптивная вёрстка означает, что одна и та же страница по-разному выкладывается на телефоне, планшете и большом мониторе, сохраняя удобство в любом случае. В CSS для этого используются гибкие сетки и медиазапросы — правила, которые меняют стиль страницы в зависимости от ширины экрана.
Ближе к концу программы ученик начинает замечать такие вещи и на чужих веб-проектах — почему кнопка выделена именно этим цветом, почему меню на телефоне превращается в три полоски, — и это уже начало собственного взгляда на устройство интерфейсов. В Figma работают с теми же инструментами, что и взрослые специалисты: слои, компоненты, сетки, стили текста.
Сначала — простой макет одной страницы, потом — несколько связанных экранов с общим стилем: одинаковые отступы, шрифты и цвета делают веб-проект цельным, а не набором случайных страниц. Готовый макет затем переносится в код почти буквально: размеры, отступы и цвета берутся прямо из Figma, поэтому итоговая страница выглядит так же, как задумывалась на этапе рисования.
У нас всё построено по одному принципу: понятные шаги и видимый результат на каждом занятии. Ведущий заранее знает, на каком шаге программы сейчас находится каждый ученик. Возврат к материалам возможен в любой момент — ничего не закрывается после того, как тема пройдена. Оплата помесячная, без необходимости сразу вносить деньги за весь год вперёд.
Обсуждение хода подготовки с родителями возможно в любое время через администратора. Смена преподавателя в течение года не планируется — занятия ведёт один и тот же человек с начала и до финального проекта.
Для кого этот курс
Курс подходит школьникам и подросткам 10–17 лет, которым интересно, как устроены веб-проекты в интернете, и кто хочет научиться создавать их сами. Занятия начинаются с базовых тем — специальной подготовки не нужно, вёрстку и код осваивают шаг за шагом на HTML, CSS и JavaScript. Программирование здесь появляется постепенно: сначала структура и стиль, затем логика на JavaScript.
Подойдёт и тем, кому ближе творческая часть — макеты, цвета и шрифты в Figma, и тем, кто хочет разобраться в технической стороне разработки. За 9 месяцев — путь от первой HTML-страницы до готового веб-портфолио, который можно показать друзьям и опубликовать в интернете. Этот курс хорошо подходит и тем, кто уже пробовал Scratch или Python и хочет попробовать другое направление, и тем, для кого это вообще первое знакомство с программированием — программа не требует предыдущего опыта.
Ребятам, которым нравится рисовать и придумывать, ближе часть с Figma и веб-дизайном: цвет, шрифты, композиция макета. Тем, кому интереснее логика, — часть с HTML, CSS и JavaScript, где сразу видно, как написанная строка меняет страницу в браузере. На практике большинству учеников интересны обе части сразу, и программа это учитывает: каждую неделю чередуются практика по коду и практика по макету.
Родителям, которые выбирают между офлайн-занятиями в Москве и форматом онлайн, будет удобно, что содержание одинаковое в обоих форматах — отличается только то, встречается ли ученик с преподавателем в классе или в Zoom. Присмотреться стоит и тем родителям, чьи дети много времени проводят в интернете и разглядывают чужие веб-проекты и приложения, — так интерес к технологиям можно направить в практическое русло: не только пользоваться готовым, но и понимать, как это сделано, и уметь сделать своё.
Родителям не нужно самим разбираться в HTML или Figma, чтобы помочь ученику. Дома достаточно спросить, что нового получилось на этой неделе, и попросить показать страницу в браузере — обычно ребята сами с удовольствием проводят небольшую экскурсию по своей работе. Первое занятие можно попробовать без обязательств — если формат не подойдёт, деньги вернут.
Хорошо, если ученик уже пользуется компьютером самостоятельно и может печатать без помощи взрослых — остальному научим на месте. Отдельная подготовка перед первым занятием не нужна: программа начинается с самых азов и рассчитана именно на новичков. Создание собственного веб-портфолио — главная цель курса.
Знакомство ребят с веб-дизайном строится так, чтобы результат был виден с первых недель. Для ребят это понятная цель: веб-проект, который можно открыть по ссылке. Практика вёрстки у ребят идёт параллельно с рисованием макетов в Figma, а для ребят, которым интереснее код, есть отдельная линия JavaScript.
Родители детей, которые начинают без опыта, часто спрашивают, не поздно ли: нет, курс рассчитан на начинающих с нуля. К концу подготовки у детей есть собственный сайт-портфолио, а после подготовки им проще выбрать следующее направление. При онлайн-занятиях педагог работает индивидуально, и с ребятами занимается один и тот же человек.
Курсы идут по одной программе в обоих форматах, а веб-дизайн и веб-разработка остаются общей основой.
Инструменты
Как проходят занятия
Филиалы с этим курсом
Вопросы про Веб-дизайн и создание сайтов
Что такое веб-дизайн для детей?
Веб-дизайн — это создание веб-проектов: от макета в Figma до готовой страницы в браузере. На занятиях осваивают вёрстку и программирование с базовых тем: HTML (структура), CSS (внешний вид) и JavaScript (логика и интерактивность), а также учатся проектировать интерфейсы.
С какого возраста можно начинать?
С 10 лет. Ребёнок должен уметь работать за компьютером и, желательно, иметь базовое понимание файлов и папок. Специальной подготовки не нужно — начнём с основ. Занятия одинаково подходят и для детей помладше в этом возрасте, и для старших подростков.
Чему научится ученик на этих занятиях?
HTML5 и семантическая разметка, CSS и адаптивная вёрстка (веб-проект на телефоне и компьютере), основы JavaScript, проектирование макетов в Figma. Итог — реальный сайт-портфолио, опубликованный в интернете.
Что дальше после этого курса?
Python или JavaScript углублённо. Веб — хорошая база: ребёнок понимает, как работает интернет, что такое сервер и клиент. Это облегчает переход к любому языку разработки. Базовое программирование на JavaScript уже знакомо, поэтому старт будет быстрым.
Нужен ли мощный компьютер?
Нет. HTML, CSS и Figma работают на любом ноутбуке или ПК. VS Code — бесплатный. Figma работает в браузере — без установки. Хватит любого компьютера от 5 лет.
Это про макеты или про код?
И то, и другое. Дети учатся и проектировать (макеты в Figma, принципы UI/UX), и кодить (HTML, CSS, JS). Программа даёт понимание обеих сторон разработки. Создание веб-проектов на курсе идёт от макета к коду, а создание макета всегда предшествует вёрстке.
Кем сможет работать ребёнок после этого курса?
Веб-дизайн — основа для профессий веб-дизайнера, верстальщика и frontend-разработчика: собрать макет в Figma и сверстать его на HTML и CSS — это то, с чего начинают на реальных проектах и фрилансе. Даже если ребёнок не станет разработчиком, он поймёт, как устроены веб-проекты, и сможет заняться веб-проектами под свои задачи.
Занятия проходят очно в Москве или онлайн?
Оба формата — можно выбрать удобный, курсы в обоих форматах одинаковые по содержанию. Очно занимаемся в наших филиалах в Москве, в мини-группах до 6 человек: так каждый получает внимание, а ребята обмениваются идеями по макетам и коду. Онлайн подходит ребятам из любого города — занятия идут индивидуально, преподаватель работает только с одним учеником. Содержание и итоговый результат одинаковые в обоих форматах: сайт-портфолио на HTML, CSS и JavaScript с макетом в Figma.
Сколько длится программа?
9 месяцев, занятия раз в неделю по 90 минут. Такой темп даёт время разобраться в каждой теме без спешки: сначала HTML и CSS, потом JavaScript, а макеты в Figma идут параллельно с самого начала. За это время ребёнок успевает собрать несколько учебных страниц и один большой итоговый сайт-портфолио, и весь путь его сборки виден в истории занятий.
Сколько стоят занятия по вёрстке и разработке веб-проектов для детей?
Групповые занятия офлайн — 9 790 ₽/мес (абонемент, мини-группы до 6 человек). Индивидуальные занятия — 3 200 ₽/занятие офлайн и 2 338 ₽/занятие онлайн. Первое пробное занятие — 500 ₽. Не понравится — вернём деньги.
Можно ли начать без опыта в вёрстке или рисовании?
Да, знакомство и с вёрсткой, и с рисованием макетов в Figma начинается с основ — предыдущий опыт не нужен. Первые занятия посвящены самым простым вещам: структуре страницы на HTML, базовым стилям CSS, интерфейсу Figma. Дальше сложность растёт постепенно, шаг за шагом, вместе с проектом ребёнка.
Чем эти занятия отличаются от кружка рисования или отдельного курса по Figma?
Кружок дизайна учит только рисовать макеты, курс по Figma в чистом виде — только интерфейсу программы, а здесь всё соединяется с самого начала: макет, вёрстку и программирование. Ребёнок не просто придумывает, как должен выглядеть веб-проект, а доводит идею от макета до публикации в интернете — это и есть полный цикл веб-дизайна, с которым сталкиваются в настоящих студиях.
Подойдут ли занятия ребёнку, который любит рисовать, но не любит код?
Да. Половина программы — это макет в Figma: цвет, композиция, шрифты, сетка страницы. Код при этом даётся постепенно и на понятных примерах, поэтому ребятам с творческим складом обычно комфортно и в части HTML и CSS — тем более что результат сразу видно на экране.
А если ребёнку, наоборот, интереснее код, а не макеты?
Тоже подойдёт. Часть с HTML, CSS и JavaScript — про логику и структуру: как страница собирается из блоков и что делает JavaScript интерактивным. Часть с Figma даёт понимание, как выглядит хороший макет, даже если ребёнок не займётся дизайном отдельно, — это пригодится в любом проекте с интерфейсом.
Что попадёт в портфолио?
Итоговый сайт-портфолио: несколько связанных страниц на HTML и CSS, с адаптивной вёрсткой под телефон и компьютер, интерактивными элементами на JavaScript и макетом, который заранее собран в Figma. Также остаются промежуточные работы, заметки о процессе работы над макетом — учебные страницы и макеты, сделанные по ходу подготовки.
Что дальше, если ребёнку понравился веб-дизайн?
Можно углубиться в JavaScript или перейти на Python — оба курса есть у нас. Ещё один вариант — курс C++ для тех, кому ближе более строгие языки. Веб-дизайн — хорошая стартовая площадка для любого из этих направлений: ребёнок уже понимает основы кода, все этапы проекта целиком и структуру интерфейсов.
Нужно ли ребёнку заранее уметь работать за компьютером?
Базовые навыки пригодятся — умение печатать, открывать файлы и папки, пользоваться браузером. Специальных знаний по вёрстке или дизайну не требуется: занятия начинаются с самых азов и рассчитаны на детей и подростков 10–17 лет без предыдущего опыта. Курс ведёт от основ до готового сайта-портфолио.
Нужно ли своё оборудование, если занятия проходят в филиале?
Нет, в филиале есть компьютеры для занятий. Из дома можно принести свои материалы, если они уже есть, — например, наброски макета на бумаге. Для онлайн-формата понадобится свой компьютер или ноутбук с интернетом.
Пригодится ли этот опыт, если ребёнок ещё не определился с будущим увлечением?
Да. Даже если веб-дизайн не станет главным интересом ребёнка, навык собирать простую страницу и объяснять идею через макет пригодится в школьных проектах, презентациях и любых других занятиях, связанных с компьютером.
Что если ребёнок уже немного знает HTML?
Не страшно — на первых занятиях видно, что ребёнок уже умеет, и темп подстраивают под него: кому-то нужно больше времени на азы, кому-то — сразу переходить к более сложным примерам. Итоговый проект всё равно один на всех — большой сайт-портфолио к концу подготовки.
Какой браузер и операционная система нужны для занятий?
Любой современный браузер — Chrome, Safari, Firefox, Edge — и любая операционная система: Windows, macOS, даже Chromebook подойдёт. Figma и VS Code одинаково работают везде, а итоговый сайт проверяют в браузере, а не в специальной программе.
Публикуют ли итоговый сайт по-настоящему в интернете?
Да, ребёнок публикует готовую работу так, чтобы её можно было открыть по ссылке и показать кому угодно — не только сохранить файл на компьютере. Это финальный шаг курса: без него проект остаётся просто папкой с файлами, а с ним — настоящим сайтом в интернете.
Что если формат не понравится — можно ли вернуть деньги?
Да. Первое занятие — пробное: если по итогам станет понятно, что не подходит, деньги за него вернут без вопросов. Дальше действует общая гарантия центра: не понравится — вернём деньги за оплаченный, но не проведённый период подготовки.
Это программирование или просто вёрстка?
И то, и другое сразу. HTML и CSS — это вёрстка и оформление, а JavaScript — уже настоящее программирование: логика, переменные, реакция на действия пользователя. Такая программа построена в два слоя: вёрстка и программирование, и оба слоя начинаются с нуля, а после уверенной вёрстки легко перейти к созданию более сложных проектов на Python.
Полезные материалы
Куда двигаться дальше
Полезные статьи
Помочь с выбором
- Python или JavaScript
Сравните направления перед выбором курса.
- Сравнить курсы
Возраст, программа и стоимость — выберите подходящее направление.
- Почитать отзывы родителей
Узнайте, как другие семьи оценивают обучение.
Дополнительно о занятиях
Это программирование или просто вёрстка? И то, и другое сразу. HTML и CSS — это вёрстка и оформление, а JavaScript — уже настоящее программирование: логика, переменные, реакция на действия пользователя. Такое обучение построено в два слоя: вёрстка и программирование, и оба слоя начинаются с нуля, а после уверенной вёрстки легко перейти к созданию более сложных проектов на Python.
На курсе веб-разработки ребёнок учится создавать страницы и интерфейсы, которые можно открыть в браузере. Сначала идут основы HTML: структура страницы, заголовки, текст, изображения, ссылки и блоки. Затем добавляется CSS: цвета, шрифты, отступы, сетки, адаптивность и аккуратный внешний вид. После этого школьник знакомится с JavaScript и делает страницу интерактивной.
Курсы HTML, CSS и JavaScript подходят детям и подросткам, которым интересно не только играть, но и создавать собственные сайты. На уроках ученики собирают лендинги, страницы портфолио, простые приложения, формы и интерактивные элементы. Преподаватель объясняет, как связаны дизайн, код и поведение интерфейса.
Веб-дизайн на курсе не отделяется от разработки: ребёнок учится думать о пользователе, композиции, читаемости и логике страницы. Если проект выглядит плохо, мы разбираем причину: неудачные отступы, слишком мелкий текст, слабый контраст или непонятная структура. Так школьник постепенно понимает, что хороший сайт — это и код, и дизайн, и удобство.