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

Курс будет полезен тем, кто хочет изучить основы веб-разработки. Вы освоите основные понятия и получите представление о том, как устроены сайты и как они разрабатываются. На занятиях мы познакомимся с языком гипертекстовой разметки HTML как с основой любого сайта и добавим веб-страницам индивидуальности с таблицами стилей CSS.

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

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

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

• Знакомство с HTML;
• Форматирование текста веб‐страницы;
• Списки, графика и ссылки;
• Разметка веб‐страниц с помощью таблиц;
• Основы CSS;
• Управление шрифтом;
• Управление элементом;
• Дополнительные свойства CSS;
• Трансформация элементов;
• Анимация элементов;
• Адаптивная верстка;
• Размещение сайта в сети.

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

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

На занятиях мы познакомимся со всеми основными конструкциями языка JavaScript и разберем практические задачи, которые решаются с их помощью.

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

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

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

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

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

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

Модуль "Веб Программирование 3 - ReactJS" познакомит учеников с одной из самых популярных JavaScript-библиотек, разработчиком которой является компания Facebook. Данная библиотека используется для упрощенной разработки высокоскоростных одностраничных сайтов, целью которой является создание как небольших веб-приложений, так и больших проектов со сложной структурой.

На занятиях ребята приобретут навыки:

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

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

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

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

ПО и Оборудование:

Обучение будет проходить в текстовом редакторе Brackets. Для установки ReactJS потребуется программная платформа Node.js.

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

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