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

На изучение направления на базовом уровне без дополнительных тем потребуется от 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, которая позволяет добавлять готовые элементы на веб-страницы и создавать типовые стили для них.

На изучение направления на базовом уровне без дополнительных тем потребуется от 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 к своему проекту и использовать его возможности для того, чтобы манипулировать элементами веб-страницы, создавать плавные анимации перехода, а также делать асинхронные запросы на сервер для получения данных.

На освоение этого направления на базовом уровне без дополнительных тем потребуется от 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 сторонних приложений. Разработка чат ботов.

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