Программа повышения квалификации «Современная вёрстка: HTML5, CSS3, адаптивность и инструменты» охватывает профессиональные практики frontend-разработки: от семантической верстки и адаптивного дизайна до SCSS, Tailwind, оптимизации скорости, тестирования и публикации портфолио на VK Cloud Pages.
Курс включает 18 лекционных уроков (36 академических часов) и 18 практических работ для самостоятельного выполнения. Обучение проходит в индивидуальном формате по согласованному расписанию.
Вы освоите создание современных, быстрых и доступных веб-интерфейсов: научитесь верстать pixel-perfect макеты из Figma, использовать Flexbox/Grid, SCSS и Tailwind, оптимизировать производительность до 90+ в Lighthouse, тестировать кроссбраузерность, документировать компоненты и публиковать портфолио на российских хостингах без зависимости от зарубежных сервисов.
Технологический стек
HTML5 / a11y
CSS3 / SCSS
Flexbox / Grid
Tailwind CSS
Vite
Figma → Code
Lighthouse / axe
GitHub Pages
VK Cloud Pages
WeKan / AnyType
Git
CSS3 / SCSS
Flexbox / Grid
Tailwind CSS
Vite
Figma → Code
Lighthouse / axe
GitHub Pages
VK Cloud Pages
WeKan / AnyType
Git
Программа реализуется Центром индивидуального обучения Центра 25-12.
Обучение проходит в формате 1-на-1 с преподавателем по согласованному расписанию.
Обучение проходит в формате 1-на-1 с преподавателем по согласованному расписанию.
Документ об окончании
📜 Удостоверение о повышении квалификации — для слушателей с высшим или средним профессиональным образованием.
📜 Сертификат о прохождении обучения — для всех остальных участников.
📜 Сертификат о прохождении обучения — для всех остальных участников.
Стоимость и оплата
Оплата производится единым платежом. Все платежи осуществляются напрямую в адрес образовательной организации — без процентов и скрытых комиссий.
Стоимость программы — 72 000 ₽
Содержание
- 1 модуль
- 36 уроков
- 60 часов
- Программа курса36
- 1.1Структура HTML5: семантические теги и доступность
- 1.2Практическая работа №1. Создание семантической страницы с поддержкой a11y
- 1.3CSS3: селекторы, box model, позиционирование
- 1.4Практическая работа №2. Стилизация страницы с использованием CSS-переменных
- 1.5Адаптивный дизайн: медиа-запросы, mobile-first
- 1.6Практическая работа №3. Верстка макета для трёх точек останова
- 1.7Flexbox и CSS Grid: продвинутые макеты
- 1.8Практическая работа №4. Создание сложного Grid-макета с областями
- 1.9Препроцессоры: SCSS (вложенность, миксины, функции)
- 1.10Практическая работа №5. Конвертация CSS в SCSS с переменными и циклами
- 1.11Анимации и переходы: keyframes, transform, opacity
- 1.12Практическая работа №6. Реализация интерактивных эффектов при наведении
- 1.13Оптимизация изображений: форматы, lazy loading, SVG
- 1.14Практическая работа №7. Интеграция SVG-иконок и оптимизация загрузки фото
- 1.15CSS-архитектура: БЭМ, компонентный подход
- 1.16Практическая работа №8. Рефакторинг стилей по методологии БЭМ
- 1.17Кроссбраузерная вёрстка: особенности Firefox/Chrome/Safari
- 1.18Практическая работа №9. Исправление браузерных особенностей в макете
- 1.19Инструменты сборки: Vite для статических сайтов
- 1.20Практическая работа №10. Настройка проекта с поддержкой SCSS и автоперезагрузки
- 1.21Работа с Figma: экспорт стилей, спейсов, изображений
- 1.22Практическая работа №11. Верстка pixel-perfect секции по макету из Figma
- 1.23CSS-фреймворки: Tailwind CSS (основы и кастомизация)
- 1.24Практическая работа №12. Прототипирование интерфейса с использованием Tailwind
- 1.25Тестирование верстки: DevTools, Lighthouse, axe
- 1.26Практическая работа №13. Анализ производительности и доступности страницы
- 1.27Версия контроля: Git для верстки (ветки, коммиты, GitHub Pages)
- 1.28Практическая работа №14. Настройка деплоя на GitHub Pages (ручная сборка)
- 1.29Оптимизация скорости: критический CSS, шрифты, кэширование
- 1.30Практическая работа №15. Улучшение показателей Lighthouse до 90+
- 1.31Методологии: Agile в верстке, оценка задач в story points
- 1.32Практическая работа №16. Разбиение макета на задачи в AnyType или локальном Kanban-инструменте (WeKan)
- 1.33Документирование компонентов: Styleguidist для верстки
- 1.34Практическая работа №17. Создание living style guide для UI-библиотеки
- 1.35Создание портфолио: структура, хостинг, домен
- 1.36Практическая работа №18. Публикация портфолио на VK Cloud Pages
Занятия проходят онлайн в составе учебной группы. Каждое занятие включает теоретическую часть и практическую отработку материала.
Нет, программа начинается с основ и подходит для полного новичка.
Да, в курс включены практики по работе с макетами Figma и верстке интерфейсов на их основе.
Да, преподаватель сопровождает участников на каждом этапе, включая проверку работ и разбор ошибок.
Да, финальная часть программы посвящена разработке и публикации полноценного сайта.
Требования
- Базовое владение ПК и браузером
- Установленный текстовый редактор (VS Code или аналогичный)
- Стабильное интернет-соединение
- Готовность работать с кодом и макетами
Особенности
- Последовательное освоение HTML и CSS от основ до адаптивной верстки
- Практическая работа с современными технологиями: Flexbox, CSS Grid, SCSS
- Изучение работы с макетами Figma и реализация верстки по ним
- Реализация интерактивных элементов и начальная интеграция JavaScript
- Подготовка итогового проекта и размещение сайта в интернете
- Обучение проходит в группе, возможен переход на индивидуальный формат
Целевая аудитория
- Начинающие разработчики и студенты технических направлений
- Дизайнеры, осваивающие верстку и структуру веб-интерфейсов
- Все, кто хочет научиться создавать сайты с нуля
- Специалисты, желающие перейти в сферу веб-разработки