Программа ориентирована на освоение базовых и современных подходов к верстке веб-страниц. В процессе обучения последовательно рассматриваются структура HTML-документа, правила стилизации с использованием CSS, создание адаптивных интерфейсов и применение современных технологий, таких как Flexbox, CSS Grid, SCSS и медиазапросы. Уделяется внимание семантике, структуре и интерактивности пользовательского интерфейса.
Обучение проводится онлайн в формате групповых занятий по расписанию. Каждая тема сопровождается разбором примеров, практическими заданиями и обсуждением возникающих вопросов. В финале курса выполняется итоговый проект, закрепляющий все ключевые навыки.
Документ по окончании
📜 Удостоверение о повышении квалификации – для слушателей с высшим или средним профессиональным образованием.
📜 Сертификат о прохождении обучения – для всех остальных участников.
Содержание
- 6 модуля
- 40 уроков
- 40 часов
- Блок 1. Основы HTML8
- 1.1Введение в веб-разработку и структура HTML-документа
- 1.2Практическая работа №1. Создание базовой HTML-страницы
- 1.3Работа с текстом в HTML
- 1.4Практическая работа №2. Разметка текста и списков на веб-странице
- 1.5Работа с изображениями, ссылками и медиа
- 1.6Практическая работа №3. Создание страницы с мультимедийным контентом
- 1.7Формы и пользовательский ввод
- 1.8Практическая работа №4. Создание формы регистрации
- Блок 2. Основы CSS8
- 2.1Основы CSS и стилизация текста
- 2.2Практическая работа №5. Применение CSS к тексту и заголовкам
- 2.3Блочная модель и размеры элементов
- 2.4Практическая работа №6. Создание многоуровневой структуры страницы
- 2.5Расположение элементов и Flexbox
- 2.6Практическая работа №7. Создание адаптивного блока с Flexbox
- 2.7Сетка CSS Grid
- 2.8Практическая работа №8. Создание сетки для страницы
- Блок 3. Адаптивная верстка4
- 3.1Медиа-запросы и адаптивность
- 3.2Практическая работа №9. Адаптация страницы под мобильные устройства
- 3.3CSS-анимации и переходы
- 3.4Практическая работа №10. Добавление анимации к кнопке
- Блок 4. Препроцессоры и современные технологии CSS6
- 4.1Введение в SCSS и препроцессоры
- 4.2Практическая работа №11. Работа с SCSS
- 4.3Работа с иконочными шрифтами и SVG
- 4.4Практическая работа №12. Использование иконок на веб-странице
- 4.5Темизация сайтов (темная и светлая темы)
- 4.6Практическая работа №13. Создание переключателя тем
- Блок 5. Интерактивность и работа с макетами8
- 5.1Основы взаимодействия HTML и JavaScript
- 5.2Практическая работа №14. Изменение стиля страницы через JS
- 5.3Валидация форм с помощью JavaScript
- 5.4Практическая работа №15. Реализация валидации формы
- 5.5Основы работы с макетами Figma
- 5.6Практическая работа №16. Анализ макета Figma
- 5.7Верстка по макету Figma
- 5.8Практическая работа №17. Верстка макета из Figma
- Блок 6. Итоговые проекты6
- 6.1Оптимизация верстки
- 6.2Практическая работа №18. Оптимизация готовой страницы
- 6.3Публикация сайта в интернете
- 6.4Практическая работа №19. Размещение сайта в интернете
- 6.5Итоговый проект по разработке веб-страниц
- 6.6Практическая работа №20. Разработка итогового проекта
Требования
- Базовое владение ПК и браузером
- Установленный текстовый редактор (VS Code или аналогичный)
- Стабильное интернет-соединение
- Готовность работать с кодом и макетами
Особенности
- Последовательное освоение HTML и CSS от основ до адаптивной верстки
- Практическая работа с современными технологиями: Flexbox, CSS Grid, SCSS
- Изучение работы с макетами Figma и реализация верстки по ним
- Реализация интерактивных элементов и начальная интеграция JavaScript
- Подготовка итогового проекта и размещение сайта в интернете
- Обучение проходит в группе, возможен переход на индивидуальный формат
Целевая аудитория
- Начинающие разработчики и студенты технических направлений
- Дизайнеры, осваивающие верстку и структуру веб-интерфейсов
- Все, кто хочет научиться создавать сайты с нуля
- Специалисты, желающие перейти в сферу веб-разработки