Блок 1. Введение в профессию веб-разработчика. Знакомство. Обзор профессии. Обзор инструментов и программного обеспечения. Терминология. Этапы разработки веб-сайта. Структура веб-сайта. Организация рабочего места веб-разработчика, структура директорий веб-сайта.

Блок 2. Язык HTML5. Структура HTML-документа. Понятие тега и его атрибута. Заголовки, параграфы, разделители. Физические и логические стили текста, маркированные и нумерованные списки. Списки определений. Вставка изображений, типы и атрибуты изображений. Вставка гиперссылок, атрибуты гиперссылок. Цветовое оформление и фоновые изображения.

Блок 3. Обзор редактора Adobe Dreamweaver. Табличная верстка. Редактор Adobe Dreamweaver: глобальные настройки, рабочая область, инспектор файлов, настройка Web-сайта. Импорт табличных данных. Структура таблицы, заголовки, строки и ячейки, объединение ячеек. Позиционирование элементов сайта с помощью таблиц.

Блок 4. Язык стилей CSS3. Подключение CSS к HTML-документу. Синтаксис CSS. Основные элементы стилей: строки, числа, проценты, абсолютные и относительные единицы размеров, цвета, адреса, комментарии. Селекторы тегов и селекторы классов. Классы тегов. Практические задания по использованию стилей тегов и стилей классов.

Блок 5. Использование селекторов CSS. Селекторы идентификаторов. Идентификаторы тегов. Использование псевдоклассов для определения динамического состояния элементов. Принципы наследования и применение каскадирования для стилевых правил.

Блок 6. Размещение аудио и видео материалов на сайте. Создание одностраничного сайта. Типы медиа файлов. Атрибуты медиа тегов: предварительная загрузка, автозапуск, органы управления. Конвертеры форматов аудио и видео. Добавление на свой сайт аудио и видео материалов.

Блок 7. Блочная верстка (часть 1). Семантические элементы HTML5 для группирования контента и разметки содержимого. Блочные и строчные элементы. Блочная модель: контейнеры и обертки, отступы и границы, содержимое блока, тип контейнера элемента, область блочного элемента, позиционирование элементов, переполнение блочного элемента, наложение элементов.

Блок 8. Блочная верстка (часть 2). Пример блочной верстки сайта. Использование семантических тегов для разделения страницы на части. Плавающие элементы - CSS свойство float. CSS-спрайты. Использование reset.css и normalize.css.

Блок 9. Модель верстки CSS Flexbox. Свойства flex-контейнера и flex-элементов. Выравнивание элементов по главной оси, выравнивание элементов по поперечной оси, сворачиваемость элементов. Верстка адаптивного шаблона Web-сайта с помощью CSS Flexbox.

Блок 10. Модель верстки CSS Grid. Работа с разметкой в двухмерном пространстве. Свойства grid-контейнера и grid-элементов. Создание колонок и рядов сетки. Выравнивание элементов, объединение ячеек c использованием grid-линий. Разметка сайта с помощью областей grid. Верстка адаптивного шаблона Web-сайта с помощью CSS Grid.

Блок 11. Анимация и шаблоны. Анимация и трансформация в CSS. Готовые библиотеки анимации. Использование bootstrap-шаблонов.

Блок 12. Пример адаптивной верстки сайта. Медиазапросы CSS. Использование препроцессоров, постпроцессоров и методологий CSS. CSS-фреймфорки.

Блок 13. Пикселы, разрешения и размеры. Цветовые модели, типы и форматы изображений. Векторная и растровая графика.

Блок 14. Ознакомление с графическим редактором Figma. Обзор интерфейса. Изучение основного инструментария. Создание лендинга.

Блок 15. Режим разработчика в Figma. Создание макетов сайта в Figma. Интерактивные прототипы.

Блок 16. Верстка шаблона сайта с Figma. Создание на диске структуры папок сайта, верстка структуры сайта с помощью HTML, создание стилевых правил для отдельных блоков сайта с помощью CSS, поэтапное создание блоков сайта от заголовка до футера с указанием стилей каждому блоку.

Блок 17. Закрепление изученного материала в игровой форме.

Блок 18. Ознакомление с языком JavaScript. Типы данных и преобразование типов, константы и переменные, операторы языка, ввод-вывод данных, языковые конструкции, организация ветвлений и выполнение вычислений. Области видимости переменных.

Блок 19. Циклы, массивы, объекты. Понятие объекта, его свойства и метода. Объекты JavaScript. Методы объекта Math, Date.

Блок 20. Использование JavaScript для создания веб-сайта. Способы подключения сценариев JavaScript к HTML-документу. Функции. События и обработчики событий. Отладка кода JavaScript с помощью инструментов разработчика на примере браузера Chrome.