ДОП Техномир

МУНИЦИПАЛЬНОЕ БЮДЖЕТНОЕ УЧРЕЖДЕНИЕ
ДОПОЛНИТЕЛЬНОГО ОБРАЗОВАНИЯ
«ДОМ ДЕТСКОГО ТВОРЧЕСТВА»
СОГЛАСОВАНО
Заседание МС МБУ ДО «ДДТ»
Протокол № 1 от 28.08.2025г.
Зам. директора по НМР С. В. Синицына

УТВЕРЖДАЮ
Приказ № 105-0
от 28.08.2025г.
Директор МБУ ДО «ДДТ»
Е. В. Агафонова

Дополнительная общеразвивающая программа
технической направленности
«Техномир»
Возраст обучающихся: 12- 17лет
Срок реализации: 1 год
Уровень программы - базовый

Автор-составитель:
Горохова Ирина Александровна,
методист
Зубко Ольга Денисовна,
педагог дополнительного образования

Вихоревка 2025 г

Содержание
1

Титульный лист программы

1. Комплекс основных характеристик программы

1.1.Пояснительная записка

1.2.Цель и задачи программы

1.3.Содержание Программы

1.4. Планируемые результаты

2. Комплекс организационно-педагогических
условий
2.1.Календарный учебный график

2.2.Условия реализации программы

2.3. Формы аттестации

2.4. Оценочные материалы

2.5.Методические материалы

2.6. Рабочая программа воспитания

2.7. Календарный план воспитательной работы с
обучающимися
Список литературы.

Приложение1 Календарный учебно-тематический
план
Приложение 2. Технологическая карта учебного
занятия. Тема: "Что такое сайт? Какие бывают
сайты? (Классификация и структурные элементы)"

Приложение 3. Технологическая карта учебного
занятия.Тема: Всё о технологии HTML. Текстовые
элементы и списки.

15
16
17

1. Комплекс основных
программы

характеристик

дополнительной

общеразвивающей

1.1.Пояснительная записка
Дополнительна общеразвивающая программа «Техномир» разработана в
соответствии со следующими документами:
•
Федеральный закон от 29.12.2012г. № 273-ФЗ «Об образовании в Российской
Федерации»
•
Приказ Министерства просвещения Российской Федерации от 27.07.22 №629
«Об утверждении Порядка организации и осуществления образовательной деятельности по
дополнительным общеобразовательным программам».
•
Указ Президента Российской Федерации от 21.07. 2020 года № 474
«О национальных целях развития Российской Федерации на период до 2030 года»
•
Распоряжение Правительства РФ от 17.08.2024 № 2233-р «Об утверждении
Стратегии реализации молодежной политики в Российской Федерации на период до 2030
года» (ред. от 08.05.2025). Порядок организации и осуществления образовательной
деятельности по дополнительным общеобразовательным программам, утв. приказом
Министерства просвещения РФ от 27 июля 2022г. № 629.
•
Национальный проект «Молодёжь и дети». Паспорт федерального проекта
«Всё лучшее — детям».
•
Стратегия развития воспитания в Российской Федерации на период до 2030
года: проект от 17.12.2024.
•
Концепция развития дополнительного образования детей до 2030 года.
Утверждена распоряжением Правительства Российской Федерации от 31.03.2022 № 678-р.
ИЗМЕНЕНИЯ, которые вносятся в Концепцию развития дополнительного образования
детей до 2030 года. Утверждены распоряжением Правительства Российской Федерации от
1.07.2025 № 1745-р. ПЛАН МЕРОПРИЯТИЙ по реализации Концепции развития
дополнительного образования детей до 2030 года, II этап (2025–2030 годы). Утвержден
распоряжением Правительства Российской Федерации от 1 июля 2025 г. № 1745-р.
•
Постановление главного государственного санитарного врача Российской
Федерации от 17.03.2025 № 2 «О внесении изменений в санитарные правила и нормы
СанПиН 1.2.3685-21 «Гигиенические нормативы и требования к обеспечению безопасности
и (или) безвредности для человека факторов среды обитания», утвержденные
постановлением главного государственного санитарного врача Российской Федерации от
28.01.2021 № 2».
•
Устав муниципального бюджетного учреждения дополнительного
образования «Дом Детского Творчества» (утв. Постановлением мэра Братского района №
579 от 18.08.2020г.)
•
Положение о порядке разработки, утверждения и реализации дополнительной
общеобразовательной общеразвивающей программы в МБУ ДО «ДДТ» (утв. Приказом
МБУ ДО «ДДТ» № 10-о от «12» января 2021г.)
Направленность программы

Дополнительная общеразвивающая программа «Техномир» имеет техническую
направленность.
Язык реализации программы: русский

Актуальность
В современном мире цифровые технологии становятся неотъемлемой частью жизни.
Навыки создания сайтов востребованы в различных сферах: образовании, бизнесе,
творчестве, коммуникациях. Программа «Техномир» дает школьникам базовые знания и
практические умения по созданию, оформлению и публикации сайтов, что способствует их
успешной социализации и развитию ИКТ-компетентности.

Новизна
Программа реализует интеграцию теоретических знаний и практических навыков,
сочетает современные технологии (HTML5, CSS3, основы JavaScript), элементы проектной
деятельности и командной работы. Особое внимание уделяется развитию
самостоятельности, креативности и ответственности.

Особенности
Практико-ориентированный подход
Работа с современными инструментами
Проектная деятельность
Формирование коммуникативных и исследовательских навыков
Воспитательный компонент: развитие ответственности, культуры цифрового
общения, этики поведения в сети
Режим занятий: занятие проводится во второй половине дня. Время занятия – 2
академических часа (45 минут) с перерывом 15 минут . Периодичность занятий – 2 раза в
неделю.
Форма обучения – очная
Особенности организации учебного процесса
Чередование теории и практики: После изучения теоретического материала
обязательно следуют практические занятия, что обеспечивает закрепление знаний на
практике.
Индивидуальный и групповой подход: Задания рассчитаны как на
индивидуальное выполнение, так и на командную работу, что развивает навыки
сотрудничества.
Использование современных онлайн-инструментов: В работе используются
современные редакторы кода, графические редакторы, облачные сервисы для совместной
работы.
Гибкая организация времени: Возможность корректировки темпа освоения
программы с учетом уровня подготовленности обучающихся.
Регулярная рефлексия: На каждом занятии предусмотрены этапы самоанализа и
обсуждения трудностей, с которыми столкнулись обучающиеся.
Вовлечение родителей: Родители информируются о ходе освоения обучающимися
программы, получают рекомендации по поддержке детей.
4

Воспитательные мероприятия: Проводятся беседы
по цифровой этике и
безопасности.
Промежуточная аттестация: После каждого модуля проводится оценка знаний и
умений по критериям, согласованным с обучающимися.
Адресат программы: 12-17 лет.
Характеристика возрастных особенностей обучающихся:
Подростковый возраст (12–17 лет) — это период интенсивного физического,
интеллектуального и личностного развития. Особенности этого возраста необходимо
учитывать при организации учебного процесса и воспитательной работы:
Познавательные особенности:
Активное развитие логического и абстрактного мышления, способность к анализу и синтезу
информации.
Повышенный интерес к поиску новых знаний, экспериментированию, самостоятельной
деятельности.
Склонность к задаванию вопросов, поиску смысла, стремление к самостоятельному
решению проблем.
Развитие критического мышления, желание обсуждать и обосновывать свою точку зрения.
Личностные особенности:
Формирование самооценки, стремление к самовыражению, поиск индивидуальности.
Возрастание значения общения со сверстниками, развитие навыков сотрудничества и
командной работы.
Повышенная чувствительность к оценке со стороны взрослых и сверстников.
Потребность в признании, поддержке, уважении личного мнения.
Эмоциональные особенности:
Эмоциональная неустойчивость, склонность к перепадам настроения.
Острая реакция на успехи и неудачи, важность положительной мотивации и поддержки.
Склонность к сопереживанию, эмпатии, развитию социальных чувств.
Волевые особенности:
Формируется способность к целеполаганию, планированию и организации собственной
деятельности.
Появляется самостоятельность в принятии решений, но необходим контроль и поддержка
педагога.
Физиологические особенности:
Активный рост, быстрая утомляемость, поэтому важно чередовать виды деятельности и
соблюдать режим отдыха.
Учет этих особенностей в программе:
Использование практико-ориентированных, проектных, игровых методов.
Создание ситуации успеха, поддержка индивидуальных инициатив.
Формирование умений работать в команде и самостоятельно.
Включение элементов самооценки, рефлексии, публичной презентации результатов.
Обеспечение эмоционально благоприятной атмосферы, создание условий для
самовыражения.
Гибкая организация времени, чередование теории и практики.

1.2.

Цель и задачи программы:

Цель
5

Формирование у обучающихся основ сайтостроения через развитие умения
создавать, оформлять и публиковать сайты
Задачи
1.
Ознакомить с основными понятиями и технологиями веб-разработки
(HTML, CSS)
2.
Научить создавать и оформлять простые сайты, работать с графикой
3.
Развивать навыки командной и проектной работы
4.
Способствовать воспитанию культуры работы в цифровой среде и
ответственного отношения к результатам труда.

1.3.

Содержание программы:

Раздел 1. Введение в Программу (4 часа)
Теория (2 часа):
Понятие интернет-пространства, сайты и их роль в жизни человека
Основы безопасности в интернете: персональные данные, пароли, фишинг, цифровой след
Этические нормы поведения в сети, авторское право
Практика (2 часа):
Анализ реальных ситуаций, связанных с безопасностью
Разработка правил безопасного поведения в интернете (групповая работа)
Раздел 2. Основы вёрстки. HTML (18 часов)
Теория (7 часов)
Назначение HTML
Структура HTML-документа
Основные теги: заголовки, абзацы, списки, ссылки, изображения
Вложенность тегов, атрибуты
Практика (11часов):
Создание первой HTML-страницы
Форматирование текста, вставка изображений, создание списков и ссылок
Введение в валидацию HTML-кода
Мини-проект: создание собственной информационной страницы
Раздел 3. Основы вёрстки. CSS (38 часов)
Теория ( 9 часов):
Назначение CSS, способы подключения стилей
Селекторы, свойства, значения
Оформление текста: шрифты, цвета, размеры
Оформление блоков: размеры, отступы, границы, фон
Каскадность и наследование
Основы позиционирования элементов
Практика (29 часов):
Оформление HTML-страниц с помощью CSS
Работа с цветами, шрифтами, фоном
Практикум по позиционированию элементов
Мини-проект: оформление сайта по заданному макету
Раздел 4. Макет. Float, Flexbox, CSS Grid (38 часов)
Теория (8 часов):
Макет веб-сайта
Что такое float, Flexbox, CSS Grid
Свойства Flexbox и CSS Grid
Практика (30 часов):
Создание макета веб-сайта
6

Использование float, Flexbox, CSS Grid
Выравнивание и размещение элементов при помощи float, Flexbox, CSS Grid
Раздел 5. Правила веб-дизайна (18 часов)
Теория (10 часа):
Типы веб-сайтов
Типографика и цвета в веб-дизайне
Оптимизация изображений для сайта
Понятие "иконка", "фоновое изображение", "логотип"
Практика (8 часов):
Вставка и оформление изображений на сайте
Использование онлайн- и офлайн-редакторов для обработки изображений
Практическая работа: оформление графики для собственного сайта
Раздел 6. Разработка собственного сайта (28часа)
Практика (28 часа):
Разработка полноценного сайта по выбранной тематике (индивидуально или в команде)
Оформление, адаптация, публикация сайта
Подготовка и проведение защиты итогового проекта
Учебно-тематический план.

№ п/п

1
2
3
4
5

Наименование
темы

Форма
контроля

Количество часов
Всего

Теория

Практика

Раздел 1.Введение в Программу. Входной
контроль.

Раздел 2. Основы вёрстки. HTML.

Редактор кода Visual Studio Code. Знакомство
с программой. Основные инструменты.
Установка плагинов. Браузер Chrome.
Самая первая страница. Структура HTMLдокумента. Технологии создания веб-сайта.
Все о технологии HTML. Текстовые
элементы и списки.

Изображения и атрибуты. Ссылки.

Семантический HTML. Элементы структуры
документа.

Закрепление полученных знаний об HTML.
Структура сайта по макету.

Раздел 3. Основы вёрстки. CSS.

Все о технологии CSS. Встроенный,
внутренний и внешний CSS.

Стилизация текста.

Комбинирование селекторов. Селекторы
атрибутов class и id.
7

Тестовое
задание.
Опрос.

Тематиче
ские
задания

13
14
15
16
17
18

Цвета в CSS. Модель RGB.
Псевдоклассы. Стилизация ссылок.
Использование DevTools.
Конфликтующие селекторы. Универсальный
селектор.
Практическое задание. Стилизация своего
HTML-документа. Разработка своего сайта.
Блочная модель. Использование свойств
padding и margin. Размеры элементов в CSS.
Центрирование страницы.
Практическое задание. Применение
изученных стилей.
Типы элементов. Абсолютное
позиционирование.

Что такое псевдоэлементы.

Практическое задание.

Раздел 4. Макет. Float, Flexbox, CSS Grid

22
23
24

Правила построения макета. Три способа
создания макета в CSS.
Использование float. Очищение float.
Создание простого макета. Box-sizing borderbox.
Практическое задание. Создание простого
макета с float.

Введение в Flexbox. Основные свойства.

Выравнивание элементов. Свойство flex.

Практическое задание. Простой макет на
Flexbox.

Введение в CSS Grid. Основные свойства.

Столбцы и строки в CSS Grid.

Размещение и выравнивание grid элементов.

Практическое задание. Простой макет на CSS
Grid.

Практическое задание. Применение
технологий Flexbox и CSS Grid.

Раздел 5. Правила веб-дизайна.

Типы веб-сайтов.

Тематиче
ские
задания

Типографика в веб-дизайне.

Цвета в веб-дизайне.

Изображения и иконки в веб-дизайне.

Тени и скругление углов в веб-дизайне.

Визуальная иерархия и пустые места. UI и
UX.

Раздел 6. Разработка собственного сайта.

Разбор макетов. Разбивка на компоненты.

Разработка компонентов сайта – header.

Разработка компонентов сайта – навигация.

Разработка компонентов сайта – блоки с
контентом.

Разработка компонентов сайта – footer.

Доработка сайта.

Итоговая аттестация. Представление
собственного сайта.

144

100

Итого:

1.4.

Тематиче
ские
задания

Защита
проекта

Планируемые результаты

Предметные результаты
Владение основными понятиями и инструментами сайтостроения (HTML, CSS,
основы JavaScript).
Умение создавать и структурироваь веб-страницы с использованием тегов HTML.
Применение стилей CSS для оформления страниц, работы с цветом, шрифтами,
блоками.
Вставка и обработка графических элементов на сайте.
Использование базовых скриптов JavaScript для добавления интерактивности.
Проектирование макета сайта, создание прототипов.
Адаптация сайта для разных устройств (адаптивная верстка).
Публикация сайта на бесплатном хостинге, работа с файловой структурой.
Соблюдение основных принципов цифровой безопасности и этики при работе с
сайтами.
Применение полученных знаний для создания собственного сайта.
2. Метапредметные результаты
Умение ставить учебные цели, планировать и организовывать собственную
деятельность.
9

Навыки поиска, отбора, анализа и структурирования информации.
Развитие коммуникативных умений: работа в команде, ведение дискуссии,
презентация результатов.
Решение творческих и исследовательских задач, применение проектного метода.
Владение навыками самооценки, рефлексии, анализа своих действий и их
результатов.
Применение ИКТ для решения учебных и познавательных задач.
Формирование
навыков
эффективного
взаимодействия
с
педагогом,
одногрупниками, родителями.
Применение универсальных учебных действий: постановка проблемы, поиск путей
решения, анализ, синтез, сравнение, обобщение.
Формирование навыков безопасного использования интернет-ресурсов.
3. Личностные результаты
Формирование интереса к изучению современных технологий, развитие
познавательной активности.
Развитие творческих способностей, инициативности, креативного мышления.
Воспитание культуры поведения в цифровой среде, уважения к труду других людей,
соблюдения норм этики и авторского права.
Формирование положительной самооценки, уверенности в своих силах.
Принятие ценностей сотрудничества, взаимопомощи, поддержки одноклассников.
Осознание значимости цифровой грамотности для дальнейшего образования и
профессионального развития.

Раздел 2. Комплекс организационно-педагогических условий
2. Комплекс организационно-педагогических условий
2.1. Календарный учебный график дополнительной общеобразовательной общеразвивающей программы
Раздел /месяц
сентябрь
октябрь
ноябрь
декабрь
январь
февраль
март
апрель
Раздел 1.Введение в
4
2
Программу.
2
Раздел 2. Основы вёрстки.
HTML.
Раздел 3. Основы вёрстки. CSS.

12
4
8

6
3
3
14
6
8

16
2
14

8
1
7
8
3
5

Раздел 4. Макет. Float, Flexbox,
CSS Grid
Раздел 5. Правила веб-дизайна.

Раздел 6. Разработка
собственного сайта.

12
3
9

16
2
14

2
2
14
6
8

4
1
3
16
16

май

12
12

итого
4
2
2
18
7
11
38
9
29
38
8
30
18
7
11
28
28

2.2.Условия реализации программы
Материально-технические условия
1. Кабинет, соответствующий требованиям:
- СанПиН (температура 18-21 градус Цельсия; влажность воздуха в пределах 40-60
%, мебель, соответствующая возрастным особенностям детей 12-17 лет лет);
.
2. Оборудование
учебная мебель: столы для теоретических и практических занятий – 6 шт.,
Материально-техническое обеспечение:
Ноутбуки –
Выход в Интернет
Информационное обеспечение:
Кадровое обеспечение
Наличие
профессиональной
подготовки
по
программам
«Педагогика
дополнительного образования», профессиональное образование в области информатики,
или смежных IT-направлений Навыки работы с современными инструментами
сайтостроения (HTML, CSS, основы JavaScript, редакторы кода, хостинг)
2.3.
№
1
2
3
4

Формы контроля и аттестации
Формы

Текущие практические задания
Тематические задания по разделам программы
Итоговый проект (создание и презентация собственного сайта)
Самооценка и взаимооценка в ходе работы в группе
2.4 Оценочные материалы

Критерии оценки итогового проекта
Структура итогового проекта
Итоговый проект — это самостоятельная работа обучающегося (или группы) по
созданию и публикации собственного сайта с презентацией результатов.
Критерии оценки
Баллы
Критерий
Описание
(макс.)
Соответствие теме и
Сайт полностью соответствует заявленной теме, цели
10
требованиям
проекта и техническому заданию
Наличие логичной структуры, удобная навигация,
Структура и навигация
15
использование меню, ссылок
Корректное использование тегов, валидность кода,
Качество HTML-разметки 15
отсутствие критических ошибок
Эстетичность, аккуратность, использование стилей,
Качество CSS-оформления 15
грамотная работа с цветом и шрифтами
Качественная вставка изображений, корректное
Работа с графикой
10
отображение, оптимизация

Использование JavaScript
(при наличии)

Адаптивность

Оригинальность, творческий
10
подход
Презентация проекта

Реализация интерактивных элементов, корректность
работы скриптов
Корректное отображение сайта на разных
устройствах и разрешениях
Проявление индивидуальности, креативность,
оригинальные решения
Ясность, логичность, умение ответить на вопросы,
культура речи

5
Соблюдение сроков,
самостоятельность

Своевременное выполнение, самостоятельная работа,
минимальная помощь учителя

Максимальное количество баллов: 100
Оценка по баллам
90–100 баллов — "отлично"
75–89 баллов — "хорошо"
60–74 баллов — "удовлетворительно"
менее 60 баллов — "требуется доработка"
Методика оценки обученности
1. Текущий контроль
Проверка практических заданий на каждом этапе (работа с HTML, CSS, графикой,
JavaScript).
Оценка по критериям: полнота выполнения, правильность, самостоятельность,
аккуратность.
Ведение индивидуальных карт достижений.
2. Промежуточная аттестация
Тематические задания по завершении каждого раздела.
Самооценка и взаимооценка в группе.
Диагностические контрольные работы.
3. Итоговый контроль
Защита итогового проекта по критериям (см. выше).
Оценка презентации и ответов на вопросы.
Индивидуальное собеседование с обучающимся по содержанию сайта.
4. Формула итоговой оценки
Итоговая оценка складывается из:
50% — оценка итогового проекта
30% — средний балл по текущим и промежуточным работам
10% — активность, участие в командной работе, воспитательных мероприятиях
10% — самооценка и рефлексия
Итоговый балл вычисляется по формуле:

где

— итоговый балл,

— балл за итоговый проект (в %),

текущие и промежуточные задания (в %),
(в %).
5. Уровни обученности

— средний балл за

— балл за активность (в %),

— самооценка

Высокий:
Достаточный:
Средний:
Низкий:

2.5.

(рекомендуется повторное выполнение итогового проекта)

Методические материалы

Принципы обучения
1.
Деятельностный подход
Обучение строится на активной практической деятельности обучающихся: выполнение
заданий, работа в группах, проектная деятельность.
2.
Проблемно-ориентированное обучение
Каждая тема сопровождается постановкой проблемы, которую обучающиеся решают
самостоятельно или в группе, что способствует развитию критического мышления.
3.
Интерактивные методы
Используются обсуждения, мозговые штурмы, работа в онлайн-сервисах, что развивает
коммуникативные навыки и способствует лучшему усвоению материала.
4.
Дифференцированный подход
Учитываются индивидуальные особенности и уровень подготовки обучающихся. Задания
имеют разный уровень сложности, предусмотрена поддержка для менее подготовленных и
дополнительные задания для продвинутых.
5.
Проектная деятельность
Основная форма итоговой работы — проект, что позволяет интегрировать знания и
умения из разных разделов, развить самостоятельность, ответственность и командные
качества.
6.
Рефлексия и самооценка
В конце каждого модуля и занятия проводится рефлексия: обучающиеся анализируют
свои успехи, обсуждают трудности, ставят цели на будущее.
Методы обучения:
1. Объяснительно-иллюстративный метод
Используется для введения новых понятий, правил, алгоритмов, структуры кода.
Применяется на начальных этапах изучения HTML, CSS, JavaScript, а также при
разборе вопросов безопасности и цифровой этики.
Включает объяснение педагога, демонстрации на экране, разбор готовых примеров.
2. Практико-ориентированный метод
Основной метод программы: каждый теоретический блок сопровождается
практическими заданиями.
14

Обучающиеся создают собственные страницы, оформляют их, интегрируют графику
и интерактивные элементы.
Используются задания разного уровня сложности для индивидуальной и групповой
работы.
3. Метод проектного обучения
В течение курса обучающиеся реализуют мини-проекты (например, "Личная
страничка", "Галерея", "Интерактивная анкета").
Итоговый проект — создание собственного сайта по выбранной тематике с
последующей презентацией.
Проектная деятельность развивает самостоятельность, креативность, навыки
планирования и презентации.
4. Метод проблемного обучения
Регулярно используются проблемные вопросы и задачи, требующие
самостоятельного поиска решения.
Педагог создает ситуации, когда обучающиеся сталкиваются с типичными
ошибками верстки, несовместимостью браузеров, необходимостью оптимизации сайта.
Обсуждение и анализ ошибок проводится коллективно.
5. Групповая и командная работа
Регулярно организуются задания для малых групп: совместное проектирование,
распределение ролей, обсуждение вариантов решений.
Используются методы мозгового штурма, коллективного анализа, взаимного
обучения.
Формируется культура совместной работы, взаимопомощи и ответственности за
общий результат.
6. Интерактивные методы
Использование онлайн-редакторов кода с мгновенной проверкой результата.
Проведение викторин, тестов, интерактивных опросов для актуализации знаний.
Применение игровых элементов: соревнования, челленджи, квесты по поиску
ошибок в коде.
7. Рефлексия и самоанализ
В конце каждого занятия проводится обсуждение: что получилось, какие трудности
встретились, как их удалось преодолеть.
Обучающиеся на каждом занятии обсуждают свои успехи и неудачи.
Проводится самооценка и взаимооценка в ходе работы над проектами.
8. Метод кейсов (анализ ситуаций)
Разбор реальных и смоделированных ситуаций: этика в интернете, авторское право,
безопасность личных данных.
Обсуждение кейсов проводится в форме дискуссий, дебатов, ролевых игр.
9. Исследовательский метод
Обучающиеся самостоятельно ищут информацию о современных веб-технологиях,
анализируют сайты, сравнивают их структуру и оформление.
Поощряется самостоятельное изучение дополнительных материалов, участие в
онлайн-курсах, чтение профильных статей.
10. Использование ИКТ
Применение специализированных программ (VS Code, Figma, GIMP и др.).
Использование обучающих платформ, видеоуроков, онлайн-тренажеров для
закрепления навыков.

Средства обучения
Компьютеры с доступом в интернет
Современные редакторы кода (VS Code, Sublime Text)
Онлайн-сервисы (CodePen, GitHub Pages)
Графические редакторы (Figma, Photoshop)
15

Презентации, раздаточные материалы, инструкции

Формы организации учебной деятельности
Индивидуальная работа
Парная и групповая работа
Проектная деятельность
Защита проектов, презентации
Алгоритм учебного занятия
Этап занятия
Организационный момент
Постановка целей и задач
Актуализация знаний
Изучение материала
Практическая работа
Рефлексия, подведение
итогов
Домашнее задание

Время (мин)
2
3
5

Содержание этапа
Приветствие, проверка готовности
Озвучивание темы и целей урока
Краткое повторение предыдущего
материала
Объяснение нового материала
Выполнение заданий, работа в группах
Обсуждение результатов, ответы на
вопросы
Объяснение задания для самостоятельной
работы

20
50
5
5

Учебные и методические пособия для педагога и обучающихся:
Для педагога:
Учебно-методическое пособие "Основы сайтостроения" .
Методические рекомендации по организации проектной деятельности.
Сборник практических заданий и тестов.
Доступ к онлайн-курсам (например, Stepik, HTML Academy) для расширения и
индивидуализации обучения.
Примерные шаблоны для промежуточных и итоговых проектов.
Список литературы и интернет-ресурсов для подготовки и углубления материала.
Для обучающихся:
Рабочая тетрадь "Мой первый сайт" (с заданиями и местом для заметок).
Памятки по HTML, CSS, основам JavaScript.
Инструкции по работе с редакторами кода (Visual Studio Code, Notepad++).
Список полезных онлайн-ресурсов и справочников(htmlbook.ru, learn.javascript.ru,
htmlacademy.ru, stepik.org, w3schools.com)
Примеры кода и шаблонов (в бумажном и электронном виде).
Воспитательный компонент программы
Цель
Создание условий для формирования у обучающихся ответственного, творческого,
самостоятельного, этичного и социально-активного участника цифрового общества на
основе совместной проектной деятельности и культуры цифрового взаимодействия.
Задачи
Формировать ответственное отношение к результатам собственной деятельности в
цифровой среде.
Воспитывать культуру цифрового общения, уважение к интеллектуальной
собственности и к результатам труда других людей.
16

Развивать навыки коллективной работы, взаимопомощи, толерантности и уважения
к мнению других.
Способствовать развитию самостоятельности, инициативности, настойчивости в
достижении целей.
Воспитывать интерес к саморазвитию, современным профессиям и осознанному
выбору жизненного пути.
Формировать навыки безопасного поведения в интернете и критического отношения
к информации.
Планируемые результаты
Ответственное отношение к цифровому контенту: обучающиеся осознают
последствия публикации информации в интернете, соблюдают цифровую этику.
Развитие самостоятельности и инициативности: проявляют инициативу в
проектной деятельности, самостоятельно ищут решения возникающих задач.
Формирование уважения к труду других: уважают интеллектуальную
собственность, корректно используют чужие материалы, соблюдают правила цитирования.
Осознанное отношение к выбору профессии: понимают роль цифровых
технологий в современном мире, проявляют интерес к профессиям IT-сферы.
Развитие толерантности и культуры общения: умеют работать в команде,
проявляют уважение к мнению одноклассников, соблюдают нормы корректного общения.
Навыки коллективной деятельности: обучающиеся умеют распределять роли в
группе, совместно разрабатывать проекты, договариваться и приходить к общим решениям.
Взаимопомощь и поддержка: проявляют готовность помочь одноклассникам,
делятся знаниями и опытом.
Готовность к участию в жизни объединения: участвуют в презентациях,
конкурсах, совместных мероприятиях.
Цифровая культура и безопасность
Формирование культуры безопасного поведения в сети: знают основные правила
безопасности, умеют защищать свои персональные данные, критически относятся к
информации из интернета.
Осознанное использование цифровых ресурсов: умеют выбирать надежные
источники информации, различают достоверные и недостоверные сайты.

2.6.
№
1

План воспитательной работы с обучающимися

Мероприятие
Беседы о цифровой этике и безопасности
(сетевой этикет, авторское право, защита
персональных данных)
Формирование ответственности и
самостоятельности (постановка целей,
поощрение инициативы)
Развитие коммуникативных навыков
(работа в группах, коллективные
обсуждения)
Воспитание культуры презентации и
самопрезентации (защита проектов,
публичные выступления)

Форма работы
Беседы, дискуссии, разбор ситуаций,
просмотр и обсуждение видеоматериалов
Индивидуальные и групповые задания,
ведение "Дневника достижений",
самоанализ после выполнения работ
Групповые проекты, ролевые игры,
тренинги на командообразование, дебаты
Организация мини-конференций,
презентаций, взаимная оценка, мастерклассы по публичным выступлениям

№

Мероприятие
Форма работы
Проведение тематических бесед
Мозговой штурм, работа с кейсами,
5 (безопасный интернет, ответственность в
создание буклетов и памяток
сети, командная работа)
Профориентация по профессиям,
6
Работа с кейсами
связанным с ITтехнологиями
План работы с родителями
№
1
2
3
4

Мероприятие
Информирование о целях и
задачах программы
Регулярное оповещение о ходе
обучения
Вовлечение родителей в
итоговые мероприятия
Консультации по вопросам
цифровой безопасности

5 Обратная связь

Форма работы
Родительские собрания, индивидуальные беседы,
информационные письма
Электронные рассылки, публикации в общем чате
Приглашение на презентации проектов, совместные
мастер-классы, дни открытых дверей
Памятки, индивидуальные консультации,
совместное обсуждение кейсов
Опросы, анкетирование, "почта доверия",
обсуждение предложений и замечаний на встречах

Список литературы:
Джон Дакетт «HTML и CSS. Разработка и дизайн веб-сайтов», издательство
«Эксмо»,2019. 480 стр.
Бен Фрэйн. Отзывчивый дизайн на HTML5 и CSS3 для любых устройств: книга /Бен
Фрэйн.–СПб.: Питер, 2022. – 336 с.
Джон Даккет HTML и CSS. Разработка и дизайн веб-сайтов: книга /Джон Даккет [пер. с
англ. М.А. Райтмана].– М.: Эксмо, 2019. – 480 с.
Костин А.А. «Разработка современных веб-сайтов: Стандарты, методология и лучшие
практики». /Интеллектуальная издательская система Ridero,2025
Лапин Л. Web-дизайн для «чайников». Издательство Вильямс, 2008
Салихов Р. «Разработка сайта самостоятельно»./ Интеллектуальная издательская система
Ridero,2025
Чуранов Е. «Pro сайты: как сделать из сайта канал продаж»/Издательство Пи-Бюро, 2019,
228с.
Янцев В.В. Разработка web-страниц на HTML, CSS и JavaScript :учебное пособие для
ВУЗов/, Санкт-Петербург:Лань,2024-148с.
Янцев В.В. JavaScript : учебное пособие для вузов/ Санкт-Петербург:Лань,2024-232с.
Веб-документация htmlbook.ru. –URL: https://htmlbook.ru (дата обращения: 15.04.2024). –
Текст: электронный.
Веб-документация MDN. –URL: https://developer.mozilla.org/ru (дата обращения:
15.04.2024). –Текст: электронный.

Приложение 1

№

Дата

03.09.2025

04.09.2025

10.09.2025

11.09.2025

17.09.225

Календарный учебно-тематический план
Дополнительной общеразвивающей программы «Техномир»
Объем программы - 144 часов
на 2025 -2026 учебный год
возраст обучающихся: 12 - 17 лет
группа №1
Педагог ДО Зубко Ольга Денисовна
Название раздела; темы раздела; темы занятий
Объем
часов
Раздел 1. Введение в Программу (4 часа)
Вводное занятие. Знакомство с Программой. Инструктаж 2
по технике безопасности.
Что такое сайт? Какие бывают сайты?
2
(Классификация и структурные элементы)
Входной контроль.
Раздел 2. Основы вёрстки. HTML (18 часов)
Редактор кода Visual Studio Code. Знакомство с
2
программой. Основные инструменты. Установка
плагинов. Браузер Chrome.
Самая первая страница. Структура HTML-документа.
2
Технологии создания веб-сайта.
Все о технологии HTML. Текстовые элементы и списки.
2

6
7

18.09.2025
24.09.2025

Все о технологии HTML. Текстовые элементы и списки.
Изображения и атрибуты. Ссылки.

2
2

8
9

25.09.2025
01.10.2025

Изображения и атрибуты. Ссылки.
Семантический HTML. Элементы структуры документа.

2
2

02.10.2025

Закрепление полученных знаний об HTML. Структура
сайта по макету.

Форма занятий
Теоретическипрактическое
Теоретическипрактическое

Форма
контроля

Тестовое
задание

Теоретическипрактическое
Теоретическипрактическое
Теоретическипрактическое
Практическое
Теоретическипрактическое
Практическое
Теоретическипрактическое
Теоретическипрактическое

Самооценка и
взаимооценка в

08.10.225

Закрепление полученных знаний об HTML. Структура
сайта по макету.

Теоретическипрактическое

09.10.2025

15.10.2026

Раздел 3. Основы вёрстки. CSS (38 часов)
Все о технологии CSS. Встроенный, внутренний и
внешний CSS.
Стилизация текста.

16.10.2025

22.10.2025

23.10.2025

29.10.2025

Теоретическипрактическое
Теоретическипрактическое
Теоретическипрактическое
Теоретическипрактическое
Теоретическипрактическое
Практическое

30.10.2025

19
20

05.11.2025
06.11.2025

12.11.2025

13.11.2025

19.11.2025

20.11.2025

26.11.2025

Комбинирование селекторов. Селекторы атрибутов class и
id.
Цвета в CSS. Модель RGB.

Псевдоклассы. Стилизация ссылок. Использование
DevTools.
Псевдоклассы. Стилизация ссылок. Использование
DevTools.
Конфликтующие селекторы. Универсальный селектор.

Конфликтующие селекторы. Универсальный селектор.
Практическое задание. Стилизация своего HTMLдокумента. Разработка своего сайта.
Практическое задание. Стилизация своего HTMLдокумента. Разработка своего сайта.
Блочная модель. Использование свойств padding и margin.
Размеры элементов в CSS. Центрирование страницы.
Блочная модель. Использование свойств padding и margin.
Размеры элементов в CSS. Центрирование страницы.
Блочная модель. Использование свойств padding и margin.
Размеры элементов в CSS. Центрирование страницы.
Практическое задание. Применение изученных стилей.

2
2

Теоретическипрактическое
Практическое
Практическое

Практическое

2
2

Теоретическипрактическое
Практическое

Практическое

2
2

ходе работы в
группе
Тематические
задания по
разделам
программы

27.11.2025

Типы элементов. Абсолютное позиционирование.

03.12.2025

Что такое псевдоэлементы.

04.12.2025

Практическое задание.

Теоретическипрактическое
Теоретическипрактическое
Практическое

10.12.2025

Практическое задание.

Практическое

11.12.2025

Практическое задание. Промежуточный контроль.

Практическое

17.12.2025

Теоретическое

18.12.2025

25.12.2025

Теоретическипрактическое
Практическое

34
35
36

26.12.2025
14.01.2026
15.01.2026

Раздел 4. Макет. Float, Flexbox, CSS Grid (38 часов)
Правила построения макета. Три способа создания макета
в CSS.
Использование float. Очищение float. Создание простого
макета. Box-sizing border-box.
Использование float. Очищение float. Создание простого
макета. Box-sizing border-box.
Практическое задание. Создание простого макета с float.
Практическое задание. Создание простого макета с float.
Введение в Flexbox. Основные свойства.

21.01.2026

Выравнивание элементов. Свойство flex.

38
39
40

22.01.2026
28.01.2026
29.01.2026

Выравнивание элементов. Свойство flex.
Практическое задание. Простой макет на Flexbox.
Введение в CSS Grid. Основные свойства.

2
2
2

2
2
2
2

Практическое
Практическое
Теоретическипрактическое
Теоретическипрактическое
Практическое
Практическое
Теоретическипрактическое

Самооценка и
взаимооценка в
ходе работы в
группе
Самооценка и
взаимооценка в
ходе работы в
группе
Тематические
задания по
разделам
программы

04.02.2026

Столбцы и строки в CSS Grid.

05.02.2026

Размещение и выравнивание grid элементов.

43
44
45

11.02.2026
12.02.2026
18.02.2026

Размещение и выравнивание grid элементов.
Практическое задание. Простой макет на CSS Grid.
Практическое задание. Простой макет на CSS Grid.

2
2
2

Теоретическипрактическое
Теоретическипрактическое
Практическое
Практическое
Практическое

19.02.2026

задание. Применение технологий Flexbox и 2

Практическое

25.02.2026

задание. Применение технологий Flexbox и 2

Практическое

26.02.2026

задание. Применение технологий Flexbox и 2

Практическое

04.03.2026

Практическое
CSS Grid.
Практическое
CSS Grid.
Практическое
CSS Grid.
Практическое
CSS Grid.

задание. Применение технологий Flexbox и 2

Практическое

50
51

05.03.2026
11.03.2026

Раздел 5. Правила веб-дизайна (18 часов)
Типы веб-сайтов.
Типографика в веб-дизайне.

52
53

12.03.2026
18.03.2026

Типографика в веб-дизайне.
Цвета в веб-дизайне.

2
2

54
55

19.03.2026
25.03.2026

Цвета в веб-дизайне.
Изображения и иконки в веб-дизайне.

2
2

26.03.2026

Тени и скругление углов в веб-дизайне.

2
2

Теоретическое
Теоретическипрактическое
Практическое
Теоретическипрактическое
Практическое
Теоретическипрактическое
Теоретическипрактическое

Самооценка и
взаимооценка в
ходе работы в
группе

Тематические
задания по
разделам
программы

01.04.2026

Визуальная иерархия и пустые места. UI и UX.

02.04.2026

Визуальная иерархия и пустые места. UI и UX.

Теоретическипрактическое
Практическое

08.04.2026
09.04.2026
15.04.2026
16.04.2026
22.04.2026
23.04.2026
29.04.2026
30.04.2026
06.05.2026
07.05.2026
13.05.2026
14.05.2026
20.05.2026
21.05.2026

Раздел 6. Разработка собственного сайта (24 часа)
Разбор макетов. Разбивка на компоненты.
Разработка компонентов сайта – header.
Разработка компонентов сайта – header.
Разработка компонентов сайта – навигация.
Разработка компонентов сайта – блоки с контентом.
Разработка компонентов сайта – блоки с контентом.
Разработка компонентов сайта – блоки с контентом.
Разработка компонентов сайта – блоки с контентом.
Разработка компонентов сайта – footer.
Доработка сайта.
Доработка сайта.
Доработка сайта.
Доработка сайта.
Итоговая аттестация. Представление собственного сайта.

2
2
2
2
2
2
2
2
2
2
2
2
2
2

Практическое
Практическое
Практическое
Практическое
Практическое
Практическое
Практическое
Практическое
Практическое
Практическое
Практическое
Практическое
Практическое
Практическое

59
60
61
62
63
64
65
66
67
68
69
70
71
72

Тематические
задания по
разделам
программы

Защита проекта
Самооценка и
взаимооценка в
ходе работы в
группе

Приложение 2
Технологическая карта учебного занятия
Тема: "Что такое сайт? Какие бывают сайты? (Классификация и структурные
элементы)"
Тема занятия: Что такое сайт? Классификация и структурные элементы сайтов
Тип занятия: Изучение нового материала с элементами практики
Форма проведения: Групповая, с элементами дискуссии и мини-проектом
Продолжительность: 2 академических часа (90 минут)
2. Цели и задачи занятия
Цель: Сформировать у обучающихся представление о понятии "сайт", видах сайтов и их
структурных элементах; развивать умение анализировать и классифицировать сайты.
Задачи:
Познавательные:
Ознакомить с определением сайта, классификацией сайтов по назначению и структуре.
Рассмотреть основные структурные элементы сайта.
Развивающие:
Развивать логическое и аналитическое мышление, умение работать с информацией.
Формировать навыки коммуникации и командной работы.
Воспитательные:
Воспитывать ответственное отношение к цифровой информации.
Формировать интерес к изучению современных технологий.
3. Планируемые результаты
Предметные:
Обучающиеся знают определение сайта, основные виды сайтов, их структурные
элементы.
Умеют приводить примеры разных видов сайтов, анализировать их структуру.
Метапредметные:
Умеют работать в группе, формулировать выводы, презентовать результаты.
Развивают навыки анализа и классификации объектов.
Личностные:
Проявляют интерес к теме, осознают значимость цифровых компетенций.
4. Оборудование и материалы
Компьютер, проектор/интерактивная доска
Раздаточные материалы (таблицы для классификации)
Доступ к интернету (для анализа сайтов)
Рабочие тетради
5. Алгоритм учебного занятия (структура)
Этап занятия

Время
(мин)

Деятельность педагога

Деятельность
учащихся

Методы и
приемы

1.
Организационный 2
момент

Приветствие, настрой на
работу

Приветствуют
Беседа
учителя, готовятся

2. Мотивация,
5
постановка целей

Задает вопросы: "Что такое
сайт?", "Какие сайты вы
знаете?"

Беседа,
Отвечают,
мозговой
приводят примеры
штурм

Этап занятия
3. Актуализация
знаний

Время
(мин)
5

4. Изучение нового
20
материала

5. Практическая
работа

6. Презентация и
обсуждение

7. Рефлексия,
5
подведение итогов
8. Домашнее
задание

Деятельность педагога
Просит вспомнить, где и для
чего используются сайты
Объясняет понятие "сайт",
классификацию по
назначению
(информационные,
коммерческие,
развлекательные и др.),
показывает примеры
Делит на группы, выдает
задания: найти примеры
разных видов сайтов,
определить их структуру
(главная страница, меню,
контент, подвал и др.),
заполнить таблицу

Деятельность
Методы и
учащихся
приемы
Обсуждают,
Коллективное
приводят примеры обсуждение

Слушают, делают
Рассказ,
записи, задают
демонстрация
вопросы

В группах
анализируют
сайты, заполняют
таблицу, готовят
мини-презентацию

Представляют
результаты,
отвечают на
вопросы
Подводит итоги, задает
Отвечают,
вопросы: "Что нового
формулируют
узнали?", "Чему научились?" выводы
Объясняет задание: найти
Записывают
интересный сайт, описать его задание, задают
структуру
вопросы
Организует презентацию
результатов, задает вопросы
для обсуждения

Работа с
интернетом,
групповая
работа

Презентация,
дискуссия
Рефлексия,
самооценка
Инструктаж

6. Основные понятия и формулы
Сайт — совокупность связанных между собой веб-страниц, объединённых общей темой,
структурой и адресом.
Классификация сайтов по назначению:
Информационные
Коммерческие
Образовательные
Развлекательные
Социальные
Персональные и др.
Структурные элементы сайта:
Главная страница
Меню/навигация
Контент (основная информация)
Боковые панели (сайдбары)
Подвал (footer)
Заголовок (header)
Форма обратной связи
7. Критерии оценки
Активность на занятии, участие в обсуждении (1 балл)
Корректность заполнения таблицы (2 балла)
Качество мини-презентации (2 балла)
25

Умение работать в группе (1 балл)
Максимум: 6 баллов
8. Воспитательный компонент
Формирование культуры общения и работы в группе.
Воспитание уважения к мнению других.
Развитие интереса к современным цифровым профессиям.
9. Рефлексия
Что нового узнали о сайтах?
Какая информация оказалась самой интересной?
Какие вопросы появились по теме?
10. Домашнее задание
Найти в интернете интересный сайт, описать его структуру (выделить основные
элементы: главная страница, меню, контент, подвал и др.), подготовить краткое
сообщение (5–7 предложений).
11. Приложение: Пример таблицы для групповой работы
Название сайта Тип сайта Главная страница Меню Контент Подвал Особенности
Примечание: В ходе занятия допускается использование реальных сайтов для анализа (по
усмотрению педагога и с учетом возрастных ограничений).

Приложение 3
Технологическая карта учебного занятия
Тема: Всё о технологии HTML. Текстовые элементы и списки
Тип занятия: теоретико-практическое
1. Цели и задачи занятия
Цель: Сформировать представление о технологии HTML, научить использовать
основные текстовые элементы и создавать списки в HTML-документе.
Задачи:
Познакомить с назначением и историей HTML.
Изучить структуру HTML-документа.
Освоить применение текстовых тегов: заголовки, абзацы, выделение текста.
Научиться создавать упорядоченные и неупорядоченные списки.
Развивать навыки работы с редактором кода.
Воспитывать аккуратность, внимательность, культуру цифрового общения.
Методы, используемые на занятии
Объяснительно-иллюстративный метод — разъяснение новых понятий и
демонстрация примеров на экране.
Практический метод — самостоятельное выполнение заданий учащимися на
компьютерах.
Частично-поисковый (эвристический) метод — стимулирование поиска
решений при выполнении заданий, обсуждение вариантов в парах.
Метод проблемного обучения — постановка вопросов, требующих размышлений
(например, зачем нужны разные виды списков).
Метод дискуссии — обсуждение типичных ошибок, коллективный разбор работ.
Рефлексивный метод — самооценка и анализ собственной деятельности в конце
занятия.
26

3. Оборудование и материалы
Компьютеры с установленным редактором кода (например, Visual Studio Code).
Проектор/интерактивная доска.
Рабочие тетради, карточки с заданиями.
Доступ к интернет-ресурсам (htmlbook.ru, w3schools.com).
4. Планируемые результаты
Личностные:
Формирование интереса к цифровым технологиям.
Развитие самостоятельности и ответственности.
Метапредметные:
Навыки поиска и анализа информации.
Умение работать в паре/группе.
Предметные:
Знание основных текстовых тегов HTML.
Умение создавать и оформлять списки в HTML-документе.
5. Структура и ход занятия
Этап занятия

Время
(мин)

1.
Организационный 2
момент
2. Мотивация и
3
целеполагание
3. Актуализация
5
знаний
4. Объяснение
20
нового материала

5. Практическая
работа

6. Обсуждение и
самопроверка

7. Рефлексия

Содержание
деятельности
педагога

Деятельность
обучающихся

Приветствие, проверка Приветствуют,
готовности
готовятся к уроку
Обсуждение
Отвечают на вопросы
значимости темы
Вопросы по
Отвечают, обсуждают
предыдущей теме
Рассказывает о HTML,
структуре, тегах.
Слушают, записывают,
Демонстрирует
задают вопросы
примеры.
Выполняют задания:
Постановка задач:
создают документ,
создать HTMLдокумент с
используют теги
текстовыми
элементами и
, , , , , , ,
списками.
Консультирует,
,
. Работают в
помогает.
парах, обсуждают.
Организует разбор
Демонстрируют работы,
типичных ошибок,
анализируют, задают
обсуждение решений вопросы
Предлагает оценить
Самооценка, ответы на
свою работу, задать
вопросы
вопросы
27

Формы
организации
Фронтальная
Фронтальная
Фронтальная
Фронтальная,
индивидуальная

Индивидуальная,
парная, групповая

Фронтальная,
групповая
Фронтальная

Этап занятия

Время
(мин)

8. Итоги и
2
домашнее задание

Содержание
деятельности
педагога
Подводит итоги,
объясняет домашнее
задание

Деятельность
обучающихся
Записывают задание,
задают вопросы

Формы
организации
Фронтальная

6. Основные понятия и термины
HTML (
) — язык разметки гипертекста.
Тег — элемент языка разметки, заключённый в угловые скобки.
Структура HTML-документа:

Текстовые теги:

Списки:

, , , ,

(неупорядоченный),

.
.

(упорядоченный),

(элемент списка).

7. Пример практического задания
1.
Создать HTML-документ с заголовком и несколькими абзацами.
2.
3.

Использовать теги , ,
,
для выделения текста.
Создать неупорядоченный и упорядоченный список с 3-5 пунктами.

8. Критерии оценки
Корректность структуры HTML-документа.
Использование всех необходимых тегов.
Оформление списков (наличие ,
Аккуратность и читаемость кода.
Самостоятельность выполнения.

, ).

9. Воспитательный компонент
Формирование культуры работы с информацией.
Воспитание уважения к чужому труду (не копировать чужие работы).
Развитие аккуратности, ответственности, умения работать в команде.
10. Домашнее задание
Создать HTML-документ "Мои увлечения" с использованием заголовков, абзацев,
списков (как минимум один и один ).
Подготовить 3 вопроса по теме для обсуждения на следующем занятии.
11. Рефлексия (пример вопросов)
Было ли что-то непонятно на уроке?
Какие теги показались самыми удобными?
Как можно использовать списки на сайте?