От «почему съехал блок» до пиксель-в-пиксель адаптивных макетов с анимациями — научись верстать сложное красиво и брать заказы уровня middle.
Разовая оплата, без подписки. Школьнику курс покупает родитель из кабинета parents.omnex.study.
Ты знаешь, что такое `div`, умеешь покрасить фон и задать шрифт. Но стоит открыть реальный макет из Figma — три колонки, липкий хедер, карточки, которые должны красиво перестраиваться на телефоне, — и начинается магия с `float`, `position: absolute` и десятком костылей, которые разъезжаются от одного лишнего отступа. Знакомо? Это не потолок твоих способностей. Это потолок старых приёмов.
Этот курс — про то, как верстать сложное спокойно и предсказуемо. Мы разберём современный CSS так, как его используют в продакшене: **Flexbox** для рядов и панелей, **Grid** для полноценных двумерных сеток, `clamp()` и контейнерные запросы для адаптивности без сотни медиазапросов, трансформации и `@keyframes` для анимаций, которые не тормозят. Никакой воды и зубрёжки свойств — каждый урок это маленький рабочий пример, который ты открываешь в браузере и видишь результат сразу, плюс разбор «почему так, а не иначе».
За курс ты соберёшь **5 проектов в портфолио**: адаптивный хедер с навигацией, галерею-портфолио на Grid, набор интерактивных карточек с ховер-эффектами, коллекцию CSS-лоадеров и капстоун — целый адаптивный лендинг с нуля. Отдельные модули посвящены отзывчивому дизайну, анимациям и современному арсеналу CSS (`:has()`, переменные, логические свойства, тёмная тема), а финал — про то, как организовать код по БЭМ, отладить вёрстку в DevTools и показать работы работодателю.
Вёрстка — это навык, который конвертируется в деньги напрямую: адаптивный лендинг на фрилансе стоит от 15 000 рублей, а junior+/middle-верстальщик, который уверенно владеет Flexbox и Grid, закрывает вакансии от 90 000 рублей. Освоив этот курс, ты перестанешь бояться сложных макетов и начнёшь браться за них с мыслью «да это на Grid в десять строк».
Разбираем то, на чём стоит вся вёрстка: box-sizing, поток документа, единицы измерения, позиционирование и каскад. Без этого Flexbox и Grid — гадание на кофейной гуще.
Главный инструмент для рядов, панелей и центрирования. Разбираем две оси, направление, распределение и растягивание элементов, а в конце собираем адаптивный хедер.
Инструмент для настоящих макетов — строки и колонки одновременно. fr, repeat, размещение по линиям, именованные области, адаптивные сетки без медиазапросов и финальная галерея-портфолио.
Один макет, который одинаково хорош и на телефоне, и на 4K-мониторе. Mobile-first, медиазапросы, текучая типографика на clamp(), отзывчивые картинки и контейнерные запросы.
Двигаем, крутим и масштабируем элементы через transform, добавляем плавность через transition, разбираем 3D и производительность анимаций, а в финале собираем карточки с сочными ховер-эффектами.
Анимации, которые играют сами: спиннеры, скелетоны, пульсация, появление элементов. Разбираем @keyframes, управление проигрыванием, стаггеринг, производительность и доступность, а в конце собираем коллекцию лоадеров.
Инструменты, которые делают код чище и мощнее: пользовательские свойства (переменные), calc(), псевдоэлементы, новые селекторы :is/:where/:has и тёмная тема. Финал — тематизируемый компонент.
Навыки, которые превращают верстальщика в профи: именование по БЭМ, отладка в DevTools, кросс-браузерность через @supports и логические свойства. Финал курса — капстоун-лендинг целиком.