- Занятие №1 HyperText Markup Language
- Задание каркаса и элементов страницы, ссылок, картинок, таблиц.
| -
Занятие 1. Погружение в мир сайтов. Что скрывается за буквами HTML?
- Первый код на HTML. Заголовки. Абзацы. Форматирование. Контрольные вопросы.
|
- Занятие № 2 Cascading Style Sheets
- Изменение внешнего вида элементов: цветов, размеров, отступов.
| -
Занятие 2. Секреты языка HTML: как добавить волшебство на страницы?
- Списки. Картинки. Ссылки. Основные теги структурирования страницы. — верхняя часть страницы. Таблицы. Контрольные вопросы. Домашнее задание № 1
|
- Занятие № 3 CSS. Выравнивание и эффекты
- Структурирование элементов на странице. Трансформации и анимация.
| -
Занятие 3. Создаём главную страницу мечты! Стили и магия CSS
- Селектор тегов. Селектор идентификаторов. Селектор классов. Комбинирование селекторов. Контрольные вопросы.
|
- Занятие №4 JavaScript. DOM, переменные и функции
- Использование чисел и строк, изменение содержимого страницы.
| -
Занятие 4. CSS: как сделать элементы сайта идеальными? Отступы и поля
- Псевдоклассы и Псевдоэлементы. Специальные цвета. Прозрачность. Цвет фона. Размеры. Отступы и поля. Центрирование. Границы. Свойство float. Контрольные вопросы.
|
- Занятие № 5 JavaScript. Условные конструкции и циклы
- Вариация поведения страницы в зависимости от условий.
| -
Занятие 5. Мастер выравнивания: аккуратные страницы с CSS!
- Выравнивание с FlexBox Layout. flex-wrap. justify-content. align-content. align-items. Добавление стилей к сайту «Выручай Школа». Контрольные вопросы. Домашнее задание № 2.
|
- Занятие № 6 JavaScript. Структуры данных
- Способы хранения и организации данных.
| -
Занятие 6. JavaScript на страже сайта: переменные и команды
- Введение в JavaScript. Java?.. Средства разработчика. Переменные. Арифметические операторы JavaScript. Document Object Model. Текстовые поля. Кнопки. linear-gradient. cursor: стиль курсора мыши. Взаимодействие с элементами. Контрольные вопросы.
|
- Занятие № 7 JQuery
- Библиотека для эффективного управления содержимым страницы.
| -
Занятие 7. Функции и события: прокачиваем калькулятор с JavaScript!
- Функции. События. Поиск ошибок. Логический тип. Операторы сравнения. Условные конструкции. Конструкция If. Конструкция switch/case/default. Логические операторы. Конъюнкция. Дизъюнкция. Отрицание. Доработка калькулятора. Контрольные вопросы. Домашнее задание № 3
|
- Занятие № 8 Bootstrap
- Библиотека, предоставляющая большое количество готовых элементов.
| -
Занятие 8. Циклы, как в калейдоскопе! Оживляем сайт с помощью Math
- While. For. Math в JavaScript. Генерация случайного числа в диапазоне. Создание элементов. Изменение стилевых свойств элементов. Контрольные вопросы.
|
- Занятие № 9 CSS. Позиционирование
- Взаимное расположение элементов. Глубина.
| -
Занятие 9. Подготовка к большому тесту: как организовать данные?
- Словари. Массивы. Комбинирование структур. Использование кавычек и апострофов в JavaScript. Заготовки к созданию теста. Контрольные вопросы.
|
- Занятие № 10 Зачёт
- Проверка знаний в устной форме.
| -
Занятие 10. Квиз-турнир: проверь свои знания собственным тестом!
- Разметка страницы. Массив с вопросами и ответами. Переменные для текущего вопроса и счета. Функция для перемешивания элементов массива. Функция для отображения текущего вопроса и вариантов ответов. Функция для проверки ответа и перехода к следующему вопросу. Функция для отображения результата теста. Запуск теста. В общем виде код выглядит следующим образом. Контрольные вопросы. Домашнее задание № 4.
|
- Занятие № 11 Игра "Пятнашки". Начало
- Реализация игрового поля, ячеек и их перемещения.
| -
Занятие 11. Превращаем экран в холст: инструменты для рисования на сайте!
- Тег <label>. Элементы формы <input type="range"> и <input type="color">. Тег <canvas>. Контрольные вопросы.
|
- Занятие № 12 Игра "Пятнашки". Завершение
- Перемешивание костяшек и вывод поздравительного сообщения.
| -
Занятие 12. Финальные штрихи. Как закончить и сохранить свой шедевр?
- Основы взаимодействия с <canvas> и JavaScript. Написание кода JavaScript для страницы «Рисовалка». Переменные для рисования. Функции рисования. События мыши для рисования. Обновление индикатора текущего цвета. Обновление ссылки для скачивания. Создание кнопок выбора цвета. Кнопка ластика. Кнопка очистки холста. Кнопка для своего цвета. Запуск кода. В общем виде код выглядит следующим образом. Контрольные вопросы. Домашнее задание № 5. Проект.
|
