Самая большая ошибка на этом месте — сесть рисовать красивую картинку. Дизайн сайта начинается не с картинки, а со списка типов страниц: их всегда меньше, чем кажется, и от их числа зависит вся дальнейшая работа.
Порядок такой. Сначала считаем типы страниц — сколько разных раскладок нужно на самом деле. Потом разбираем две главные: первый экран главной и внутреннюю страницу, по образцу которой сделано почти всё остальное. Потом учимся писать запросы, на которые нейросеть отвечает готовой вёрсткой. И в конце — про порядок в файлах, без которого на десятой странице начинается путаница.
CMS здесь ещё не нужна
Весь этап — про обычные HTML-файлы, которые открываются двойным щелчком. Это не упрощение для учебника: я и правда сначала сверстал статический прототип, а на CMS перенёс его позже, на пятом этапе. Так ошибки вёрстки не мешаются с ошибками движка.
Пять страниц этапа
-
Типы страниц
Сколько разных раскладок нужно сайту из полусотни страниц и почему их получается три, а не пятьдесят четыре.
-
Шаблон главной страницы
Что обязано попасть на первый экран, что идёт под ним и в каком порядке главная объясняет, куда посетитель попал.
-
Шаблон внутренней страницы
Крошки, заголовок, текст, оглавление, переходы к соседям: одна раскладка, которая закрывает почти весь сайт.
-
Как писать промпты
Из каких четырёх частей состоит запрос, на который приходит готовый код, а не общие рассуждения о вёрстке.
-
Чистый код и порядок
Имена классов и раскладка файлов: как сделать так, чтобы нейросеть не ломала уже готовое, а вы понимали свой сайт через месяц.
Что будет на выходе
К концу этапа у вас должен быть не макет в графическом
редакторе, а папка с настоящими файлами: две-три свёрстанные
страницы, общие base.css и components.css,
и понимание, какой блок за что отвечает. Именно это добро
переносится на CMS дальше — макет перенести нельзя.
В конце этапа вы сможете
- Назвать типы страниц своего сайта и сказать, чем они отличаются
- Собрать первый экран, который работает и на телефоне, и на большом мониторе
- Написать запрос к нейросети, на который приходит готовый код нужного вида
- Разложить файлы так, чтобы правка в одном месте не ломала три других