Web-программирование для детей —

Познакомим ребенка с основами web-разработки, научим создавать сайты, приложения при помощи HTML разметки, стилей CSS и языка программирования JavaScript.
#от 10 лет
#онлайн
создай свой сайт или приложение
с помощью кода
Цель - формирование системы понятий, знаний, умений и навыков в области создания сайтов и веб-страниц с использованием языка разметки HTML и языка стилей CSS.

В результате изучения курса ребята научатся:
  1. Использовать базовые языковые конструкции(теги) языка HTML для верстки веб-страниц;
  2. Добавлять на страницы ссылки и изображения для создания интерактивности и более красочного контента;
  3. Работать с файловой системой компьютера;
  4. Использовать таблицы для структурирования данных на страницах;
  5. Создавать стили для HTML-элементов с помощью языка CSS;
  6. Пользоваться современными текстовыми редакторами;
  7. Создавать анимации на веб-страницах;
  8. Использовать современные методы и приёмы верстки сайтов, такие как Flexbox и Grid.
  9. Создавать множество различных полноценных сайтов с использованием языков HTML и CSS.


Курс включает в себя видео уроки, презентации, практикумы и тесты, которые позволяют проверить и закрепить полученные знания.

Данный курс будет полезен для тех, кто уже знаком с программированием и хочет улучшить свои навыки, а также познакомиться с версткой сайтов.

Логичным завершением курса HTML+CSS является переход к языку JavaScript.


По окончанию модуля HTML+CSS учащиеся изучат все современные приёмы создания сайтов(за исключением специальных конструкторов для создания сайтов), а также стилей для них.
Программа обучения
На изучение данного курса на базовом уровне без дополнительных тем потребуется от 86 до 106 часов.
На углубленном уровне с дополнительными темами и собственными проектами - от 110 до 130 часов.
HTML+CSS
На изучение направления на базовом уровне без дополнительных тем потребуется от 86 до 106 часов.

На углубленном уровне с дополнительными темами и собственными проектами - от 110 до 130 часов.

1. Введение в HTML (2-4 часа)

Учащиеся в этом разделе знакомятся с базовыми принципами и правилами работы с языком разметки HTML.

  • Выбор и установка текстового редактора.
  • Создание первого HTML-документа и его запуск в браузере.
  • Изучение тегов для форматирования текста на веб-страницах.
  • Основы редактирования текста в текстовом редакторе.
  • Синтаксис и распространённые ошибки.
  • Первый проект с использованием HTML.
К концу прохождения модуля ученик изучит основы работы с текстовым редактором, познакомится с тегами для форматирования текста, научится создавать нумерованные и маркированные списки на страницах. Итоговый проект включает в себя практические задания, основанные на ранее полученных знаниях.

2. Ссылки и изображения (8-10 часов)

Учащиеся знакомятся с особенностями добавления контента на свои веб-страницы, а также изучают особые приёмы работы со ссылками и изображениями.

  • Способы добавления ссылок и изображений на веб-страницу.
  • Практические задания на использование ссылок и изображений на веб-страницах.
  • Дополнительные возможности при работе со ссылками.
  • Создание нескольких проектов по теме для закрепления полученных знаний.
  • Дополнительные возможности редактирования изображений для Windows и MacOS.
Результатом прохождения модуля являются два созданных сайта "Электронная газета" и "Профиль в социальной сети". Также в модуле ученику предлагается продолжить выполнение собственного проекта на основе полученных знаний. Помимо выполнения проектов ученик получит знания в важной теме "Ссылки и изображения", которая необходима для создания навигации и красочного контента на страницах, а также потренирует свои навыки на практических заданиях.

3. Таблицы (4-6 часов)

Учащиеся знакомятся со способами добавления таблиц на веб-страницы, а также оттачивают свои навыки на практических заданиях.

  • Основы работы с таблицами в HTML.
  • Группировка ячеек таблицы.
  • Упражнения для закрепления пройденного теоретического материала.
В результате изучения модуля "Таблицы" ученик научится добавлять и редактировать таблицы на веб-страницах. Также учащемуся будет продемонстрирован метод верстки веб-страницы с помощью таблицы. Итоговым проектом является набор практических заданий, основанный на ранее полученных знаниях. Ученик также предложено продолжить выполнение своего собственного проекта.

4. Основы CSS (12-14 часов)

Учащиеся знакомятся с языком для создания стилей CSS и учатся работать с его базовыми понятиями. В этом разделе ученик получает доступ к справочникам по основным CSS свойствам, а также создаёт такие глобальные проекты как:"Сайт кофейни", "Сайт компьютерных игр".

  • Знакомство с языком стилей CSS.
  • Способы подключения CSS к HTML и их взаимодействие.
  • CSS свойства для форматирования текста.
  • Основы блочной вёрстки веб-страниц.
  • Знакомство с селекторами в CSS.
  • Работа со шрифтами.
  • Применение полученных знаний при выполнении заданий "Проекты по теме".
По итогам изучения модуля обучающийся получит навыки работы с языком стилей CSS. Данный модуль обладает большим количеством теоретического материала и практических заданий для отработки полученных знаний. На протяжении всего модуля ученик выполняет не только типовые задания, но и полноценные проекты. Некоторые из них являются логически законченными сайтами, например, итоговый проект "Сайт кофейни".

5. Формы (8-10 часов)

Учащиеся знакомятся с таким понятием как "Форма на веб-странице". Учатся создавать поля для ввода данных, различные кнопки, "чекбоксы". Данные возможности языка HTML позволяют добавлять на веб-страницы поля для входа в аккаунт или регистрации.

  • Знакомство с формами.
  • Текстовые поля, выпадающие списки, важные атрибуты.
  • Стилизация форм с помощью CSS.
  • Практические задания на добавление форм.
  • Загрузка сайта на GitHub.
В результате изучения модуля ученик овладеет навыками добавления элементов форм на веб-страницы. А также научится создавать полноценные формы регистрации и входа на страницу. На этом этапе ученик может осуществить переход на JavaScript, если он не нуждается в изучении дополнительных особенностей языков HTML и CSS. Для этого необходимо выполнить тест.

6. Продвинутый CSS (12-14 часов)

Учащиеся знакомятся с более сложными приёмами работы с языком CSS и изучают современные продвинутые способы стилизации веб-страниц. На этом этапе ученик создаёт большое количество как собственных проектов, так и проектов по заданному шаблону.

  • Позиционирование элементов.
  • Резиновый фон и способ его создания.
  • Блочная верстка макета страницы.
  • Сложные селекторы в CSS.
  • Псевдоэлементы и их применение.
  • Правильное использование цветов при оформлении сайтов.
  • CSS переменные.
  • Медиазапросы.
  • Особенности создания горизонтального меню.
  • Создание галереи на CSS.
  • Разбор и исправление наиболее популярных ошибок.
По итогам изучения данного модуля учащийся получит знания о более сложных и современных приемах языка CSS, научится создавать такие механизмы как "Резиновый фон", "Горизонтальное меню" и "Галерея на CSS". Данный модуль расширяет понятие о том, насколько важен и какими возможностями обладает язык CSS.

7. Анимация (4-8 часов)

Учащиеся знакомятся с основными принципами создания анимации на веб-страницах. Также выполняются проекты по анимации изображений и текста на сайтах.

  • Основные понятия при работе с анимацией в CSS.
  • Анимация текста.
  • Анимация картинки с помощью псевдоэлементов.
  • Изучение CSS-переменных.
  • Проект Спиннер Pacman.
В результате изучения данного модуля ученик овладеет базовыми и продвинутыми навыками создания анимации на веб-страницах, а также закрепит свои знания на практических проектах.

8. HTML5 (8-10 часов)

Учащиеся знакомятся с новыми возможности пятой версии HTML, а также учатся применять новые теги на веб-страницах с помощью практических заданий и проектов по теме.

  • Новые теги в HTML5.
  • Практические задания на применение тегов HTML5.
  • Проект по теме для закрепления полученных знаний.
  • Разбор и исправление наиболее популярных ошибок.
В результате изучения модуля ученик познакомится с новыми тегами, используемыми в пятой версии языка HTML. Для закрепления полученных знаний используется большое количество как практических заданий, так и заданий по построению полноценных сайтов.

9. Флексбоксы (10-12 часов)

Данный блок посвящен технологии построения макетов для веб-страниц - Flexbox. Учащиеся изучают основы работы этой технологии, создают большое количество макетов и сайтов на основе Flexbox.

  • Как работает Flexbox.
  • Справочники и теоретический материал.
  • Практические задания для закрепления полученных знаний.
  • Анимированная фотогалерея.
  • Создание адаптивных сайтов.
  • Проекты по теме для создания портфолио и закрепления полученных знаний.
  • Разбор и исправление наиболее популярных ошибок.
После изучения данного модуля ученик будет готов к построению макетов сайтов с помощью технологии Flexbox, которая позволяет задавать гибкое позиционирование для элементов на странице. Также на протяжении всего модуля ученик будет создавать большое количество проектов и полноценных сайтов.

10. Гриды(Grid System) (8-10 часов)

Учащиеся знакомятся с принципами построения макетов сайтов с помощью системы гридов.

  • Введение в гриды.
  • Теоретический материал по основам работы с Grid System.
  • Создание адаптивных сайтов с помощью Grid System.
  • Практические задания для закрепления полученных знаний.
  • Проекты по теме для создания портфолио.
  • Разбор и исправление наиболее популярных ошибок при работе с Grid System.
В результате изучения модуля ученик получит знания в области создания макетов веб-страниц с использованием Grid System. Данная технология является одной из самых популярных при построении макетов сайтов. Для закрепления полученных знаний используются как обычные практические задания, так и задания, основанные на построении полноценных сайтов.

11. Bootstrap (4-6 часов)

Учащиеся знакомятся с библиотекой стилей Bootstrap и используют эти знания для построения стилей для сайтов.

  • Знакомство с Bootstrap.
  • Bootstrap и Grid System.
  • Практическое задание по построению сайта с помощью Bootstrap.
По итогам изучения модуля ученик научится работать со сторонней библиотекой Bootstrap, которая позволяет добавлять готовые элементы на веб-страницы и создавать типовые стили для них.
JavaScript
На изучение направления на базовом уровне без дополнительных тем потребуется от 50 до 80 часов.

На углубленном уровне с дополнительными темами - от 140 до 220 часов.

Модуль 1. Введение в JavaScript (2-6 часов)

Структура кода на JavaScritpt, понятие переменных, функции alert(), prompt(), confirm(), работа с консолью.

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

Модуль 2. Переменные, операции, типы данных (8-14 часов)


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

К концу изучения модуля ученик научится решать математические задания, используя JavaScript. Для этого он сможет применять различные типы данных переменных, сможет преобразовывать типы данных, а также он сможет использовать сокращенные операции при решении математических задач.

Модуль 3. Условия (10-16 часов)

Конструкция if else. Операторы сравнения и логические операторы. Сокращенный синтаксис if else. Конструкция switch case. Сравнение данных разных типов.

После изучения этого модуля ученик сможет делать ветвления в программе, используя при этом условные операторы if else или switch case. Ученик поймет разницу между этими операторами и узнает особенности использования каждого из них. Научится решать задачи с ветвлениями, сделает несколько небольших простых игр, используя ветвления.

Модуль 4. Строки (4-8 часов)

Строки и операции над ними. Методы работы со строками.

Модуль даст ученику понятие о том, как работать со сточными данными, об особенностях операций с ними, а также ученик научится производить простые манипуляции со строками (изменять регистр, производить поиск внутри строки, вырезать подстроки из строки).

Модуль 5. Циклы (14-20 часов)

Работа с различными видами циклических алгоритмических структур в JavaScript.

При изучении изучения этого модуля ученик познакомится с понятием цикла как такового, изучит выражения для создания циклов while, do while, for. Также он изучит особенности использования каждого вида циклов. Ученик научится решать задачи с использованием циклов, создаст несколько простых проектов с использованием циклов, а также сделает простейшую игру «Угадай число».

Модуль 6. Составные типы данных (18-24 часов)

Массивы, методы работы с массивами. Многомерные массивы. Объекты.

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

Модуль 7. Функции (12-18 часов)

Понятие функций в JavaScript. Параметры функций, инструкция return. Использование флагов в функциях, области видимости переменных.

К концу изучения этого модуля ученик будет иметь представление о том, что такое функции, как передавать аргументы в функции и как возвращать результат выполнения функций. Кроме того, он изучит способы использования функций: использование флагов в функциях, передача функций в виде аргументов к другим функциям; изучит области видимости переменных.

Модуль 8. Работа с DOM (30-40 часов)

Понятие о DOM (Document Object Model), обращение к элементам веб-страницы, привязка и отвязка событий элемента. Работа с текстом тега, с текстовыми полями. Цепочки методов и свойств. Работа с группой элементов. Создание DOM элементов.

К концу изучения этого модуля ученик научится обращаться к существующим элементам веб-страницы и изменять их. Он научится привязывать различные события к элементам страницы. Для закрепления знаний он сделает несколько проектов и игр, в которых нужно будет использовать элементы веб-страницы.

Модуль 9. Объектно-ориентированное программирование (6-12 часов)

Понятие класса и объекта класса. Создание собственных классов

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

Модуль 10. Canvas (30-38 часов)

Знакомство с canvas. Создание изображений на canvas. Создание двумерных анимаций и простых игр.

При изучении этого модуля ученик познакомится с тегом canvas, научится рисовать на нем простые изображения, а также создавать двухмерную анимацию. Для закрепления этого модуля, а также модуля 9, ученик создаст несколько игр, где применит знания классов, объектов и работы с canvas.

Модуль 11. Модули (10-16 часов)

Создание больших модульных проектов.

После изучения этого модуля ученик научится структурировать свой код, разбивать его на отдельные части – модули. Также он научится подключать и использовать эти модули для создания сложных проектов.

Модуль 12. jQuery (20-26 часов)

Работа с фреймворком jQuery.

К концу изучения этого модуля ученик сможет подключить фреймворк jQuery к своему проекту и использовать его возможности для того, чтобы манипулировать элементами веб-страницы, создавать плавные анимации перехода, а также делать асинхронные запросы на сервер для получения данных.
Node JS
На освоение этого направления на базовом уровне без дополнительных тем потребуется от 48 до 68 часов.

На углубленном уровне с дополнительными темами - от 52 до 74 часов.

1. Основы работы с платформой Node.js (6-8 часов)

Установка Node.js. Написание и запуск простого скрипта. Создание и подключение модулей. Асинхронность. Работа с файловой системой. События.

По итогам изучения модуля ученик получит базовые знания для работы с платформой Node.js. На данном этапе мы ещё не создаём приложения, а лишь отрабатываем базовые приёмы работы с платформой Node.js. Запаситесь терпением. Дальше будет интереснее!

2. Создание http-сервера (8-10 часов)

Что такое протокол http. Создание сервера на модуле http. Работа с http-запросами.

По итогам изучения модуля ученик научится создавать и запускать серверную часть сайта на основе модуля http и создаст свой первый настоящий web-проект в виде небольшого сайта.

3. Модуль Express
(10-16 часов)

Установка фреймворка Express.js. Работа с объектами запроса в express. Класс Route и работа с маршрутами. Работа с формами и обработка Post-запросов.

Express - это самый популярный на сегодняшний день фреймворк для Node.js. Express значительно упрощает работу по созданию серверной части сайта. По итогам изучения модуля ученик научится создавать клиент-серверные сайты с помощью Express.

4. Работа с базами данных MongoDB (10-16 часов)

Установка MongoDB и Mongoose. Подключение к БД, добавление и удаление данных. Поиск данных в БД и изменение существующих записей.

В настоящее время невозможно представить себе полнофункциональный сайт, который обходился бы без базы данных. Регистрация пользователей, хранение персональных данных, статей блога, комментариев и т.д.

После изучения модуля ученик будет уметь подключать базу данных к своему сайту, сохранять и получать данные из базы, регистрировать пользователей сайта.

5. Аутентификация и авторизация (6-8 часов)

Работа с сессиями. Работа с cookies. Простая регистрация, авторизация, аутентификация.

В этом разделе ученик учится реализовывать вход на сайт по логину и паролю. Это довольно сложная механика, подразумевающая авторизацию и аутентификацию пользователя. После изучения модуля ученик сможет самостоятельно добавлять аутентификацию и авторизацию пользователей на своём сайте или в своём веб-приложении.

6. Непрерывная связь с сервером на основе web-сокетов (8-10 часов)

Знакомство с технологией WebSocket. Разработка чата. Разработка сетевой игры.

Веб-сокеты - это технология, обеспечивающая быстрое взаимодействие клиентской и серверной части сайта с помощью веб-сокетов. В модуле ученик познакомится с технологией web-сокетов, создаст с её помощью свой чат и небольшую онлайн-игру "Крестики-нолики".

7. Взаимодействие со сторонними сервисами (4-6 часов)

Понятие API. Знакомство с API сторонних приложений. Разработка чат ботов.

Это дополнительный модуль, изучаемый по желанию. Модуль предназначен для ребят, желающих научиться создавать приложения-боты, способные автоматически отвечать на сообщения пользователей в современных мессенджерах.
Занятия проводят лучшие тренеры
Обучение проводится на русском и английском языках
Наш строгий отбор преподавателей позволяет выбрать самых опытных в работе с детьми
290 000+
из 70 стран
с 2016 года
занятий провели наши тренеры
мира родители доверяют нам своих детей
помогаем успешно учиться онлайн
Найдут общий язык с любым ребенком, что позволяет сделать обучение намного эффективным
Овладеет навыками web-разработки. Изучит основы HTML, узнает как менять оформление и стиль отдельных элементов сайта, научится систематизировать информацию, познакомится с JavaScript и практическим программированием.
Разовьет интеллект и аналитическое мышление. Хороший программист всегда может разложить проблему на составные части и «увидеть» ее решение. Это ценится не только в профессиональной деятельности, но и в повседневной жизни.
Освоит востребованную профессию. Web-программист занимается обслуживанием сайтов, web-ресурсов или создает новые. Это высокооплачиваемая профессия. Бюро статистики трудовых ресурсов США спрогнозировало рост рабочих мест в IT-сфере на 27% к 2024 году.
Что получит ребенок, изучив web-программирование?
Ссылки на лучшие работы учеников:
• Операционная система: Windows 8/8.1/10 x64, Mac OS 10.12 и выше;
• Установленный интернет браузер Google Chrome;
• Оперативная память: 4 Гб (рекомендованная 8 Гб);
• Процессор: 2-х ядерный с тактовой частотой от 2.2 GHz (желательно 4-х ядерный если это возможно);
• Место на жестком диске: не менее 4-6 ГБ свободного пространства жестком диске;
• Разрешение экрана: желательно 1280x800 пикселей;
• Наличие микрофона или гарнитуры;
• Наличие динамиков;
• Интернет-соединение от 1 Мбит/сек.
Системные требования