Шаг 6 · 5 минут

Что дальше

Всё, что было на сайте, сводится к трём вопросам. С ними удобно ставить задачи Claude и проверять, что он сделал.

6.1

Три вопроса

Что это и где оно в дереве?HTML
Как выглядит и где стоит?CSS
Что происходит, когда пользователь действует или приходят данные?JS

6.2

Как ставить задачи Claude по слоям

Одна задача, разложенная по слоям. Claude не нужно гадать, что ты имела в виду.

ЗАДАЧА ДЛЯ CLAUDE

Добавь в карточку цену под названиемHTML. Серая, 14px, как описаниеCSS. При клике на «В корзину» текст кнопки меняется на «Добавлено»JS.

И проверка результата — тоже по слоям:

HTMLЭлемент есть?
CSSВыглядит как в макете?
JSРеагирует как задумано?

6.3

Шпаргалка Figma ↔ Web

Figma	Веб	Слой
Панель Layers	Дерево HTML	HTML
Frame, Group	`<div>`	HTML
Text	`<p>`, `<h1>`	HTML
Image	`<img>`	HTML
Имя слоя	`class="…"`	HTML → CSS JS
Prototype: Navigate to	ссылка `<a href>`	HTML
Панель Design	CSS	CSS
Fill, Stroke, Corner radius, Shadow	`background`, `border`, `border-radius`, `box-shadow`	CSS
Текстовый стиль	`font-size`, `font-weight`, `font-family`	CSS
Auto layout	`display: flex`	CSS
Варианты под брейкпоинты	`@media`	CSS
Вариант Hover	`:hover`	CSS
Prototype: On click	`addEventListener("click", …)`	JS
Prototype: Change to	`classList`, `textContent`	JS
Данные откуда-то (в Figma этого нет)	запрос на сервер	JS
Component и Instance	компонент React (следующие занятия)	—

6.4

Слои не изолированы

JS меняет HTML и CSS. CSS зависит от имён в HTML. Класс связывает все три.

Когда что-то не так, спрашивай не «где ошибка», а «в каком слое».

6.5

На следующем занятии

Браузер хранит HTML как дерево, оно называется DOM, и JS работает с ним. Когда дерево большое и меняется часто, менять его руками тяжело — для этого придумали React. Это следующий разговор.

6.6

До встречи

Две вещи до следующего занятия:

Объяснить вслух, человеку, как кнопка «Подписаться» устроена в трёх слоях и как они связаны.
Открыть любой сайт в DevTools и найти: один элемент (Elements), одно правило (Styles), один запрос (Network).