Создание сайтов на
языках HTML, CSS, JavaScript для детей

В модуле “Веб-программирование 1. HTML и CSS” ученики познакомятся с языком гипертекстовой разметки HTML и с таблицами стилей CSS для придания странице индивидуальности. На занятиях дети будут создавать веб-страницы с помощью популярной среды разработки Visual Studio Code, добавляя на них картинки, ссылки на другие страницы, списки, таблицы, научатся анимировать элементы на странице, работать со шрифтами, использовать библиотеку Bootstrap для создания страниц с адаптивным отображением на любом устройстве, а в конце модуля ученики загрузят свою страницу в интернет.

Пример занятия:

Ученики на уроке создают элементы на странице и с помощью специальных инструментов учатся ими управлять. В конце урока у каждого ученика получится разноцветная пирамидка.

Результат занятий:

• Создадим свои первые веб-страницы с надписями, таблицами, картинками и ссылками;
• Научимся управлять как текстом, так и отдельными элементами страницы, создадим анимацию;
• Узнаем, как сделать сайт более удобным для экранов разной ширины;
• По итогу курса разработаем небольшой сайт и разместим его в сети интернет.

Методический план модуля:

• Знакомство с HTML;
• Знакомство с CSS;
• Работа со списками;
• Работа с изображениями;
• Работа с таблицами;
• Что такое контейнер, классы, тег div;
• Управление элементом;
• Подключение шрифтов, псевдоклассы;
• Анимация элементов;
• Библиотека Bootstrap;
• Bootstrap: навигация и формы;
• Bootstrap: карточки и карусель из картинок.

Модуль “Веб-программирование 2. JavaScript” нацелен на изучение языка программирования JavaScript (JS). Ученики узнают о таких базовых понятиях, как: переменная, условие, циклы, массивы, объекты, множество и рекурсия. Используя JavaScript, ребята научатся программировать кнопки и поля ввода для получения необходимого результата (например, реализация калькулятора, добавление в список важных дел, настройка сортировки слов и чисел и т. д.). 

Пример занятия:

Ребята на занятии узнают, что такое массив, как он записывается и каким образом добавлять в него элементы. Затем, используя цикл for, ученики выведут все элементы на страницу, а с помощью поля ввода и кнопок реализуют как добавление элементов на страницу, так и их удаление.

Методический план модуля:

• JavaScript. Переменная. Функция;
• Условие;
• Циклы;
• Массив;
• Объект;
• Математические функции;
• Сортировка;
• Множество;
• Vue.js. Работа с элементами;
• Vue.js. Списки. События. Анимирование и переходы;
• Подготовка к защите проекта;
• Защита проекта.

В модуле “Веб-программирование 3. ReactJS” ребята познакомятся с одной из самых популярных JavaScript-библиотек, разработчиком которой является компания Facebook. Данная библиотека используется для упрощенной разработки высокоскоростных сайтов и приложений. На занятиях ученики приобретут навыки создания интерактивных пользовательских интерфейсов, разработки гибких веб-сайтов и более удобного распределения блоков сайта на логические части.

По завершении модуля дети будут знать, как с помощью ReactJS динамически изменять страницу, используя в одном файле одновременно HTML и JavaScript.

Пример занятия:

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

Методический план модуля:

• ReactJS. Создание первого веб-приложения;
• Компоненты;
• CSS-модули. Компонент Login;
• Props;
• State;
• NavLink и Route;
• Работа с данными;
• Корзина;
• Футер сайта;
• Повторение;
• Подготовка к защите проекта;
• Защита проекта.