Современная Web-разработка. Модуль 1

Программа курса «Современная Web-разработка. Модуль 1»

Тема 1. HyperText Markup Language

Древовидная структура, форматирование, таблицы, элементы управления, блочная разметка.

Тема 2. Cascading Style Sheets

Классы стилей. Изменение внешнего вида элементов.

Тема 3. CSS. Выравнивание и эффекты

Анимации. Трансформации, тени.

Тема 4. JavaScript. DOM, переменные и функции

Динамические страницы. Доступ к узлам HTML, события.

Тема 5. JavaScript. Условные конструкции и циклы

Операторы ветвления. Итерирование по элементам.

Тема 6. JavaScript. Структуры данных

Форматы хранения данных. Обмен данными.

Тема 7. Библиотека JQuery

Селекторы и плагины.

Тема 8. Библиотека Bootstrap

Адаптивная разметка, компоненты.

Тема 9. CSS. Позиционирование

Расположение элементов, нормальный поток.

Тема 10. Зачёт

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

Тема 11. Игра «Пятнашки». Начало

Игровое поле и логика перемещения костяшек.

Тема 12. Игра «Пятнашки». Завершение

Перемешивание и итоговая презентация.

Программа курса «Современная Web-разработка. Модуль 2. Вёрстка и макеты»

Тема 1. Ход работы над сайтом

Изучение ПО. Выбор шаблона, разбор будущего проекта, файловая структура проекта. Создание шапки.

Тема 2. Главный экран сайта. Блок со слайдером

Меню «гамбургер», работа со стилями  CSS. Работа с библиотекой слайдера.

Тема 3. Прототипирование, библиотека иконок. Блок «о нас»

Типографика, иконочные шрифты.

Тема 4. Стили и работа с grid-system. Блок «мы в цифрах»

Верстка с использованием Bootstrap с grid-system. Прототипирование секций.

Тема 5. Закрепление материала. Блок «цены»

Освоение пройденного материала, иконочные шрифты, grid-system, стили CSS. Проверка знаний.

Тема 6. Работа со слайдером. Блок «команда»

Изменение готовых стилей сторонних плагинов.

Тема 7. Форма обратной связи и слайдер партнёров. Блок «контакты» и «партнеры»

Поля ввода данных. Плагин карусели.

Тема 8. Размещение интерактивной карты. Блок «наш офис» и «подвал сайта»

Вставка и настройка виджетов. Плагин раскрытия секции.

Тема 9. Плагин фильтрации объектов. Блок «портфолио»

Фильтр для проектов.

Тема 10. Работа с JavaScript. Полноэкранное меню сайта и смена размера шапки

Практическое применение JS, создание анимаций.

Тема 11. Хостинг, отправка контактных данных. Блок «контакты»

Публикация проекта. Работа с данными.

Тема 12. Анимация объектов. Заставка сайта.

Анимация на сайте. Доработка мобильной версии. Заставка загрузки.

Программа курса «Современная Web-разработка. Модуль 3. Веб-приложения»

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

Хранилище кода. Репозитории на GitHub.

Тема 2. Погружение в JavaScript

Встроенные функции и структуры. Функциональные методы. Отладка.

Тема 3. Платформа Node.js

Серверная часть приложений. HTTP-запросы. WebSockets.

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

Структура и запросы. Доступ из Node.js. Асинхронность и однопоточность.

Тема 5. Vue.js. Связывание данных

Данные и представление. Связывание элементов форм. Генерация из списков.

Тема 6. Vue.js. Методы

События. Вычисляемые данные. Наблюдение.

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

Сборщик Browserify. Модульность. Параметры компонент. Маршрутизатор.

Тема 8. Зачёт

Решение задач.

Тема 9. Приложение «Фотолента». Аутентификация

Регистрация и вход. Реализация перенаправления.

Тема 10. Приложение «Фотолента». Загрузка

Панель навигации. Форма загрузки.

Тема 11. Приложение «Фотолента». Новости

Запросы к базе данных. Дальнейшее развитие проекта.

Тема 12. Презентации с Impress.js

Инструментарий для создания слайдов в трёхмерном пространстве.