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