1-й модуль
День первый
Знакомство с HTML
− Что такое HTML?
− Основные HTML-теги
− Атрибуты HTML-элементов
− Создание первой веб-страницы
Домашнее задание: создать веб-страницына выбранную тематику, изучить теоретический материал.
Результат занятия: изучены напрактикеосновные HTML-элементы, создана первая веб-страничка.
День второй
Основы стилизации веб-страниц
− Тестирование по материалу предыдущего занятия
− Язык стилизации CSS и его синтаксис
− Изменение стилейтекста
− Размеры элементов на веб-странице
Домашнее задание: изучить теоретическийматериал, закрепить на практике полученные на занятиизнания, доработать созданные ранее веб-страницы.
Результат занятия: изучены способы стилизациитекстового содержимого веб-сайта, пройдены css-свойства, изменяющие размеры элементов.
День третий
Основы позиционирования элементов
− Тестирование по теме «Основы стилизации веб-страниц»
− Изменение размеров элементов на веб-странице
− Внешние и внутренние отступы элементов
− Решение практических задач на изученную тему
Домашнее задание: изучить теоретический материал, закрепить на практике полученные на занятиизнания, подготовиться к финальному тесту в этом модуле.
Результат занятия: изучены основные css-свойства, отвечающие за позиционирование элементов на веб-странице, решенызадачи на пройденную тему.
День четвертый
Публикация своих проектовв интернет
− Финальное тестирование по всем изученным темам в этом модуле
− Регистрация в сервисе GitHub
− Публикацияпроектов
− Ответы на вопросы и работа над ошибками
Результат занятия: сдано финальное тестирование за первый модуль, каждый проект опубликован в сети.
2-й модуль
День первый
Позиционирование элементовна странице. Технология Flexbox.
− Что такое Flexbox?
− Позиционированиеэлементов с помощью Flexbox
− Основные Flexbox-свойства
− Решение практических задач на изученную тему
Домашнее задание: изучить теоретические материалы, выполнить практическое задание.
Результат занятия: изучены напрактикеосновы технологии Flexbox, решены практические задачи на изученную тему.
День второй
Свойства background
− Тестирование по теме «Позиционирование элементов на странице. Технология Flexbox»
− Установка изображения на задний фон элемента
− Свойства background
− Решение практических задач на изученную тему
Домашнее задание: изучить теоретическийматериал, закрепить на практике полученные на занятиизнания, создать галерею с изображениями с помощью технологии Flexbox.
Результат занятия: изучены альтернативные способы размещения изображений навеб-странице, получены практические навыки.
День третий
Анимация при наведении на элементы
− Тестирование по теме «Свойства background»
− Псевдокласс :hover
− Разбор примеров создания различных анимаций
− Решение практических задач на изученную тему
Домашнее задание: изучить теоретическийматериал, закрепить на практике полученные на занятиизнания, создать собственные анимации при наведении.
Результат занятия: изучены способы создания анимацийпри наведении на веб-странице, полученыпрактические навыкирешения задач.
День четвертый
Тестирование и ответы на вопросы
− Финальное тестирование по всем изученным темам в этом модуле
− Доработка своих проектов
− Публикацияпроектов
− Ответы на вопросы и работа над ошибками
Результат занятия: сдано финальное тестирование за второймодуль, все проекты опубликованы в сети
3-й модуль
День первый
Позиционирование элементовна странице. Технология Grid layout.
− Что такое Grid layout?
− Позиционированиеэлементов с помощью Grid layout
− Отличия от Flexbox
− Основные grid-свойства
− Решение практических задач на изученную тему
Домашнее задание: изучить теоретические материалы, выполнить практическое задание, начало работы над разработкойпосадочной страницы.
Результат занятия: изучены напрактикеосновы технологии Grid layout, решены практическиезадачи на изученную тему.
День второй
Разработка посадочной страницы
− Тестирование по теме «Позиционирование элементов на странице. Технология Grid layout»
− Создание первого экранапосадочной страницы
− Разработка навигации будущего веб-сайта
Домашнее задание: создать второй экранпосадочнойстраницы, повторить предыдущую тему.
Результат занятия: изучены альтернативные способы размещения изображений навеб-странице, получены практические навыки.
День третий
Разработка посадочной страницы
− Проверка домашнего задания
− Создание третьего экрана
− Создание мобильной версии посадочной страницы
Домашнее задание: закончить разработку проекта.
Результат занятия: исправленыбаги и ошибки, создан финальный экран посадочной страницы.
День четвертый
Тестирование и ответы на вопросы
− Финальное тестирование по всем изученным темам
− Доработка посадочной страницы
− Публикацияфинального проекта в интернет
Результат занятия: пройден финальныйтест, посадочная страница опубликована в интернет.