Зачем это вайбкодеру

Тебе не нужно уметь писать HTML и CSS с нуля - это делает ИИ. Но понимать их на уровне «узнаю и могу подправить» окупается каждый день. Вот три ситуации, где это спасает.

Поправить мелочь руками

Сменить слово в заголовке, поправить цвет кнопки, добавить отступ - это правки в одну-две строки. Найти нужное место и поменять значение часто быстрее, чем описывать агенту, ждать ответ и проверять, что он не задел соседнее. Мелочи лучше держать на себе.

Точнее объяснять, что хочешь

Сравни две просьбы. «Сделай покрасивее вот тут» - агент гадает. «Увеличь заголовок h1, кнопке добавь отступ и сделай фон синим» - агент делает ровно то, что нужно, с первого раза. Когда знаешь правильные слова, итераций меньше.

Прочитать результат

ИИ выдал страницу. Открываешь код и вместо стены непонятных символов видишь логику: вот блок с заголовком, вот список, вот стили кнопки. Понимаешь, где что лежит - значит, можешь осмысленно просить изменения и замечать, если агент сделал не то.

Где это в типичном проекте

В проекте на современном стеке HTML и CSS встречаются так:

• Файлы страниц и компонентов - там лежит разметка, очень похожая на HTML (заголовки, кнопки, списки).
• Стили - либо отдельные CSS-файлы, либо короткие classes прямо в разметке (популярный подход - Tailwind, где вид задаётся набором коротких слов в атрибуте class).
• Текст и тексты кнопок - то, что чаще всего хочется поправить руками; это просто содержимое между тегами.

Не обязательно знать, как всё устроено внутри. Достаточно узнавать знакомое и понимать, в чьей зоне твоя правка - HTML (что показать) или CSS (как выглядит).