Требования к верстке

С точки зрения веб-разработки:

• верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.)
• при именовании блоков используем методологию БЭМ в стиле "Two Dashes": block-name__elem-name--mod-name--mod-val
  • имена записываются латиницей в нижнем регистре
  • для разделения слов в именах БЭМ-сущностей используется дефис (-)
  • имя элемента отделяется от имени блока двумя подчеркиваниями (__)
  • модификаторы отделяются от имения блока или элемента двумя дефисами (--)
  • значение модификатора отделяется от его имени двумя дефисами (--)
• из конечного HTML-файла убрать все комментарии, если такие имеются

С точки зрения SEO:

• все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2.
• на странице должен быть только один заголовок первого уровня (h1)
• должны присутствовать все основные теги и атрибуты — html, head, body, title, description, lang=ru, content=html, charset=utf8
• для кнопок, нажатие на которые не требует редиректа используем тег <button>, а не <a>
• для <img> самостоятельно проставляем атрибут alt="", со значением описывающим того что изображено на картинке

Оптимальный порядок действий

1. Сначала определить CSS-переменные для основных цветов/градиентов, начертаний шрифтов (толщина, размер, модификация, межтрочный интервал) и занести в специально подгтовленный CSS-файл style-core.css
2. Все шрифты выкачать и сохранить локально в директорию /assets/fonts/ и подключить их в файле style-core.css
3. Далее начинать стоит с верстки UI kit (должен быть предоставлен в макете дизайнером), для того чтобы переиспользовать готовые элементы по ходу верстки макетов. Для удобства подготовлен файл "ui_kit.html"
4. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html"

Примечания

Для работы с Figma рекомендуем использовать плагин "Inspect Styles" для инспевтирования CSS-свойсв.