Современная web-разработка

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

Целью курса является обучение, как основополагающим принципам, так и последним тенденциям мира web-разработки. Осваивая пример за примером, дети научатся самостоятельно строить как привычные многостраничные сайты, так и современные одностраничные приложения; пользоваться библиотеками для быстрого прототипирования и реализовывать серверы. Среди проектов первого модуля курса - "Викторина", "Список дел", игра "Пятнашки"; проекты второго модуля - текстовый онлайн-редактор, галерея фильмов, приложение для обмена фотографиями "Фотолента".

Продолжительность каждого модуля: 24 академических часа (достаточно для 12 занятий по субботам в течение одного школьного полугодия).

Краткое содержание первого модуля:

Занятие №1. HyperText Markup Language

Задание каркаса и элементов страницы, ссылок, картинок, таблиц.

Занятие №2. Cascading Style Sheets

Изменение внешнего вида элементов: цветов, размеров, отступов.

Занятие №3. CSS. Выравнивание и эффекты

Структурирование элементов на странице. Трансформации и анимация.

Занятие №4. JavaScript. DOM, переменные и функции

Использование чисел и строк, изменение содержимого страницы.

Занятие №5. JavaScript. Условные конструкции и циклы

Вариация поведения страницы в зависимости от условий.

Занятие №6. JavaScript. Структуры данных

Способы хранения и организации данных.

Занятие №7. JQuery

Библиотека для эффективного управления содержимым страницы.

Занятие №8. Bootstrap

Библиотека, предоставляющая большое количество готовых элементов.

Занятие №9. CSS. Позиционирование

Взаимное расположение элементов. Глубина.

Занятие №10. Зачет

Проверка знаний в устной форме.

Занятие №11. Игра "Пятнашки". Начало

Реализация игрового поля, ячеек и их перемещения.

Занятие №12. Игра "Пятнашки". Завершение

Перемешивание костяшек и вывод поздравительного сообщения.

Содержание второго модуля:

 Занятие №1. Система контроля версий

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

Для разминки после каникул – рисование на холсте.

 Занятие №2. Погружение в JavaScript

Продвинутые функции языка. Отладка программ.

 Занятие №3. Node.js

Различные типы серверов. Особенности работы HTTP.

 Занятие №4. MongoDB

Система управления базами данных.

 Занятие №5. Vue.js. Связывание данных

Автоматическое связывание изменений хранимых данных с изменениями на странице.

 Занятие №6. Vue.js. Методы

Генерация списков, события и анимация в библиотеке Vue.js.

 Занятие №7. Vue.js. Компоненты и маршрутизация

Построение сложных одностраничных приложений.

 Занятие №8. Зачет

Практическая проверка знаний.

 Занятие №9. Фотолента. Аутентификация

Система регистрации: регистрация, вход, выход.

 Занятие №10. Фотолента. Загрузка

Механизм загрузки изображений на сервер.

 Занятие №11. Фотолента. Новости

Страница с последними фотографиями пользователей.

 Занятие №12. Impress.js

Библиотека для построения эффектных трехмерных презентаций.