Идея становится интерфейсом.
Измени параметры слева и посмотри, какое CSS-свойство за это отвечает.
PLAYGROUND / LEARN BY BUILDING
Изменяй параметр. Смотри результат. Понимай причину.
Небольшая интерактивная площадка: попробуй изменить цвет, скругление и масштаб элемента. Код под макетом обновляется вместе с визуальным результатом.
LIVE CONTROLS
Панель параметров.
LIVE PREVIEW● RUNNING
style.css
.demo-card {
--demo-accent: #79f2c0;
border-radius: 18px;
padding: 28px;
}01
HOW TO READ IT
Три слоя веб-страницы.
Структура
Задаёт, что находится на странице: заголовок, текст, ссылка, кнопка, контейнер.
<button>Открыть</button>Внешний вид
Определяет цвет, размер, отступы, расположение и реакцию на разные размеры экрана.
button {
padding: 12px;
}Поведение
Реагирует на действия пользователя и меняет интерфейс в ответ.
button.addEventListener(
"click", run
);NEXT EXPERIMENT
Вернуться к проектам ↗
Сначала пойми связь. Потом меняй код.
Открой инструменты разработчика в браузере, выбери элемент и понаблюдай, какие CSS-правила влияют на его внешний вид.