Программа знакомит учеников с созданием современных сайтов — от разработки дизайна и обработки графики до верстки и программирования интерактивных элементов. На занятиях дети работают в Figma, GIMP и Tilda, изучают основы HTML, CSS и JavaScript, создают макеты, страницы, анимации, формы и простые веб-игры. Обучение построено на практике и помогает развить дизайнерское мышление, логику, креативность и навыки самостоятельной разработки веб-проектов.
- Продолжительность. 20 часов по 45 минут — 10 занятий
- Теория. Что такое веб-дизайн и зачем нужны макеты сайтов. Знакомство с интерфейсом Figma, основными инструментами, слоями, фреймами и рабочей областью. Что такое стили, компоненты, Auto Layout, кнопки, плагины и виджеты. Основы анимации, адаптивного дизайна и подготовки макетов для разных устройств.
- Практика. Создание первых элементов интерфейса в Figma. Работа с цветами, шрифтами, стилями и компонентами. Настройка кнопок, использование плагинов и виджетов. Создание простых анимаций и адаптивных экранов для разных устройств. Самостоятельный проект — разработка обложки сайта.
- Продолжительность. 20 часов по 45 минут — 10 занятий
- Теория. Знакомство с графическим редактором GIMP и его интерфейсом. Основные инструменты для обработки изображений, рисования и редактирования фотографий. Что такое слои, маски, форматы файлов, эффекты и фильтры. Основы создания логотипов, GIF-анимации, текстовых эффектов и графических элементов для сайта.
- Практика. Обработка фотографий и работа со слоями. Создание изображений с использованием эффектов, масок и модулей. Разработка текстовых эффектов, логотипа и GIF-анимации. Работа над элементами веб-дизайна: создание меню, шаблонов страниц и графических материалов для сайта. Итоговый проект по теме графического дизайна.
- Продолжительность. 16 часов по 45 минут — 8 занятий
- Теория. Что такое сайт и из каких частей он состоит. Знакомство с конструктором сайтов Tilda и принципами создания веб-страниц без кода. Основы HTML: структура страницы, теги, атрибуты, ссылки, таблицы, семантика, многостраничный сайт и формы. Роль HTML в веб-программировании и создании структуры сайта.
- Практика. Создание первых страниц сайта на Tilda. Работа с блоками, текстом, изображениями и настройками страницы. Написание HTML-кода для создания каркаса веб-страницы. Добавление ссылок, таблиц, форм и семантических элементов. Создание простой многостраничной структуры сайта.
- Продолжительность. 20 часов по 45 минут — 10 занятий
- Теория. Что такое CSS и зачем он нужен при создании сайтов. Способы подключения стилей к HTML-странице. Основы оформления элементов: цвета, шрифты, размеры, отступы, рамки и фон. Блочная модель, позиционирование, Flexbox и Grid. Псевдоклассы, переходы, трансформации, эффекты и CSS-анимации.
- Практика. Подключение CSS к HTML-странице и оформление первых элементов сайта. Работа с отступами, размерами и расположением блоков. Создание адаптивных сеток с помощью Flexbox и Grid. Добавление эффектов, анимаций, переходов и интерактивных состояний элементов. Верстка сайта по готовому шаблону в двух практических частях.
- Продолжительность. 20 часов по 30 минут — 10 занятий
- Теория. Что такое JavaScript и как он используется на сайтах. Переменные, типы данных, преобразование данных, операторы и операторы сравнения. Объекты, массивы, циклы и работа с внешними JavaScript-файлами. Случайные значения, модальные окна, обработчики событий и основы интерактивности. Знакомство с Canvas и созданием простых игр.
- Практика. Написание первых скриптов на JavaScript. Работа с переменными, условиями, циклами, массивами и объектами. Подключение внешних файлов JavaScript к сайту. Создание рандомайзера, модальных окон и интерактивных элементов с обработчиками событий. Создание проекта на Canvas и разработка игры в двух практических частях.