Программа позволяет с нуля освоить вёрстку веб-страниц, научиться создавать адаптивные и визуально привлекательные интерфейсы с использованием HTML и CSS. В ходе обучения изучаются структура HTML-документов, стилизация текста и блоков, работа с изображениями, формами и таблицами, а также современные технологии Flexbox, CSS Grid и медиазапросы. В завершении курса участник умеет самостоятельно вёрстать макеты из Figma, создавать формы и анимированные элементы, а также публиковать готовые сайты.
Обучение проходит в индивидуальном формате. Преподаватель адаптирует содержание и темп под цели и уровень подготовки слушателя. Все темы подкрепляются практическими заданиями — вы сразу видите результат на экране и учитесь создавать работающие страницы шаг за шагом.
Документ по окончании
📜 Удостоверение о повышении квалификации – для слушателей с высшим или средним профессиональным образованием.
📜 Сертификат о прохождении обучения – для всех остальных участников.
Содержание
- 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 или аналогичный)
- Все инструкции по установке даются в начале курса
Особенности
- Обучение один на один — внимание только к вашему прогрессу
- Фокус на практике — весь материал закрепляется на реальных примерах
- Разбор макетов из Figma — подготовка к работе с дизайнерскими задачами
- Создание собственных страниц — по итогам курса у вас будет готовый результат
- База для дальнейшего роста — уверенное понимание HTML и CSS как основа для изучения JavaScript и React
Целевая аудитория
- Новички, начинающие путь в веб-разработке
- Студенты и школьники, желающие освоить HTML и CSS
- Специалисты из других сфер, осваивающие frontend
- Все, кто хочет научиться создавать современные сайты с нуля