1. Язык разметки HTML
Изучите
1.Структура HTML-документа
2.Работа в редакторе кода
3.Панель разработчика
4.Семантика в HTML
5.Разбор видов тегов и атрибутов
6.Применение гиперссылок и якорных ссылок
7.Размещение изображений, таблиц, списков и спецсимволов
Освоите
- HTML-документ
- Теги и атрибуты
- Таблицы и списки
- Visual Code Studio
На практике
• Написание кода для схематичного представления макета с использованием инструментов разработчика.
Преподаватель оценит результат выполнения задания и подробно разберет его с вами.
2. Язык оформления стилей CSS
Изучите
1.Подключение стилей к странице
2.Виды селекторов и их вес
3.Свойства текста и шрифта
4.Работа с цветом
5.Блочные, строчные и строчно-блочные элементы
6.Свойства блоков: box-sizing, margin, padding, border
7.Позиционирование блоков
8.Применение блоков для построения макета
Освоите
- CSS синтаксис
- Свойства стилей
- Позиционирование блоков
- Блочная верстка
На практике
• Верстка блочной модели.
• Добавление стилей: цвет, размер, отступы, позиционирование блоков.
Преподаватель оценит результат выполнения задания и подробно разберет его с вами.
3. Работа с макетом
Изучите
1.Разбор дизайн-макета страницы
2.Flexbox: контейнеры и элементы
3.Свойства flex-элементов
4.Управление пропорциями
5.Управление порядками блоков
Освоите
- Дизайн-макет
- Контейнеры
- Flexbox верстка
- Порядок блоков
На практике
• Верстка макета на Flexbox.
Преподаватель оценит результат выполнения задания и подробно разберет его с вами.
4. Адаптивная верстка
Изучите
1.Применение инструментов разработчика для адаптивной верстки
2.Подходы к разработке
3.Изменение стилей элемента в определенных условиях
4.Условия @media
5.Применение @media для различных типов и размеров экранов
6.Адаптивные шаблоны
Освоите
- Адаптивность
- Desktop First
- Условия @media
- Мобильная верстка
На практике
• Адаптация макета под мобильные устройства.
Преподаватель оценит результат выполнения задания и подробно разберет его с вами.
5. Анимация на странице
Изучите
1.Взаимодействие пользователя с элементами на странице
2.Выбор элементов для анимации
3.Правила пользовательского дизайна
4.Наложение эффектов на кнопки
5.Этапы работы над анимацией: движение и вращение
6.Разработка сложной анимации
Освоите
- Анимация
- Эффекты
- Пользовательский дизайн
- Вращение элемента
На практике
• Наложение эффектов на кнопки страницы.
• Создание блока с анимацией.
Преподаватель оценит результат выполнения задания и подробно разберет его с вами.
