1. Что такое HTML
2. Структура HTML-документа
3. Семантика
4. Теги и их атрибуты

• Заголовки и подзаголовки
• Текст
• Ссылки
• Изображения
• Cписки (маркированные, нумерованные)

5. Таблицы

• Создание таблиц
• Заголовки и ячейки

6. Формы и элементы управления

• Формы и их элементы
• Текстовые поля
• Выпадающие списки
• Флажки и переключатели
• Кнопки
• W3C валидатор (проверка кода)

Задание: познакомиться с основными HTML-тегами и научиться работать с макетом, создавать семантическую HTML-структуру проекта.

Результат: грамотно выстроена файловая и семантическая структура проекта

План занятия:

1. Устанавливаем инструменты разработки
2. Подключаем JS файл к HTML странице
3. Изучаем переменные и типы данных
4. Отрисовка данных, document.write
5. Условия if-else
6. Цикл for, цикл в цикле
7. Встречаемся со студентами инкубатора

1. Что такое CSS
2. Подключение CSS к HTML
3. Синтаксис и селекторы CSS
4. Блочные / строчные элементы
5. Стилизация текста
6. Размеры и единицы измерения (px, %, vh, vw)
7. Поля и отступы
8. Цвет
9. Границы
10. Списки
11. Таблицы
12. Минимальный сброс стилей и селектор " * "

Задание: подключить файл со стилями, подключить шрифты, познакомится с основными CSS-свойствами и научиться их применять.

Результат: всем элементам добавлены стили и они выглядят так, как их задумал дизайнер

План:

1. Функции. параметры и возвращаемое значение
2. Создание утилитных функций для отрисовки данных
3. Что такое DOM?
4. document.createElement
5. document.appendChild
6. Создание утилитных функций функций для создания DOM элементов

1. Container
2. Flexbox (base) + лягушки
3. Псевдоклассы (:hover)
4. Трансформации (transform)
5. Переходы (transition)

Задание: научиться располагать элементы в тех местах, где они должны находиться по макету. Научиться правильно использовать Flexbox – систему для расположения элементов. Познакомиться с понятием "container" и научиться его грамотно использовать. Познакомиться с понятием псевдоклассов и сделать эффекты при наведении для интерактивных элементов.

Результат: все элементы расположены правильно, как в макете. Интерактивные элементы "реагируют" на наведение мыши.

План:

1. Событийная модель
2. Концепция данных и перерисовок
3. Обработчик события onClick
4. Обработчик события onChange
5. Обработчик события onSubmit
6. Обработчик событий тега Audio
7. таймеры setTimeout и setInterval

1. Адаптив. Работа с медиа-запросами
2. Переполнение контента (свойство overflow)
3. min/max-width/height
4. Сode review (ответы на вопросы)

Задание: сделать проект адаптивным, чтобы он корректно отображался на различных разрешениях экрана (desktop, tablet, mobile). Познакомиться с директивой @media и научиться делать медиазапросы.

Результат: проект адаптируется под разные разрешения экранов и корректно отображается не только на десктопе, но и на планшетах и мобильных телефонах.

План:

1. Реализация поиска, фильтрации (search, filter)
2. Реализация сортировки (sorting)
3. поиск max и min значений
4. arrays vs hash
5. Object.keys, Object.values

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

Темы для закрепления: setInterval, onClick, table, img, src, appendChild, querySelector, querySelectorAll, цикл в цикле, координаты, счётчик, if-else, Audio, localStorage

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

Темы для закрепления: setInterval, onkeydown, table, img, src, appendChild, querySelector, querySelectorAll, цикл в цикле, координаты, счётчик, if-else, multiplayer mode, Audio, localStorage

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

Темы для закрепления: search, img, src, appendChild, querySelector, querySelectorAll, events of Audio, цикл в цикле, счётчик, if-else, Audio, CRUD, indexedDB, windows.history

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

Разработка приложения "Карточная игра Memo"

Темы для закрепления: search, img, src, appendChild, querySelector, querySelectorAll, events of Audio, цикл в цикле, table, coordinates, счётчик, multiplayer mode, if-else, Audio, CRUD, CRUD, indexedDB, windows.history