Общие требования
1. Сверстать макет по ссылке из Figma
– Верстка должна быть адаптивной и корректно отображаться на всех типах устройств (desktop, tablet, mobile).
– Необходимо обеспечить кроссбраузерность: сайт должен корректно работать во всех актуальных браузерах (Google Chrome, Firefox, Edge и т.д.), а также в Safari на iOS c 15 и выше.
2. Технические детали
– Использовать семантические теги HTML5, грамотно разделять структуру контента и стили.
– Верстка должна быть responsive, т.е. изменять размеры и перестраивать блоки в зависимости от ширины экрана.
– SCSS. Для каждого смыслового (семантического) блока нужен отдельный SCSS-файл. Приветствуется использование переменных, миксинов и импортов (@import / @use) для удобства и дальнейшего расширения проекта.
– Использовать flexbox и/или grid для расположения элементов.
– Минимизировать использование лишних оберток и избежать float-верстки.
– Желательно придерживаться структуры и отступов, заданных в макете Figma.
– Соблюдать иерархию заголовков (h1, h2, h3...) и прочую семантику (header, main, footer и т.д.).
– Учесть все состояния элементов (hover, focus, active) и интерактивные элементы (кнопки, ссылки и т.д.), если они показаны или указаны в макете.
– Желательно использовать методологию BEM или другую соглашённую систему именования классов, чтобы избежать конфликтов в стилях.
3. Шрифты и цвета
– Использовать шрифты и цветовую палитру согласно макету.
– Если в макете не указаны названия шрифтов, использовать экспортируемые из Figma или согласовать заранее.
4. Изображения и иконки
– Экспортировать все необходимые изображения из Figma в соответствующих форматах (SVG для иконок, PNG/JPG/WebP для фото и графики).
– Оптимизировать изображения перед загрузкой (с помощью сервисов сжатия).
5. Проверка качества
– Убедиться в корректной загрузке и отображении стилей, шрифтов и изображений во всех актуальных браузерах + в Safari на iOS 15.
– Проверить, что при изменении масштаба и разрешения экрана нет «сломанных» блоков, горизонтальной прокрутки или других визуальных и функциональных ошибок.
6. Результат работы
– Исходные файлы проекта: HTML, SCSS (с разделением на отдельные файлы для блоков), JS (при необходимости).
– Структура проекта должна быть четкой и понятной.
– Если используется сборщик (Gulp/Webpack/etc.), предоставить README с инструкциями по установке и сборке.
– Финальная версия должна быть готова к деплою: все пути и ссылки проверены, нет лишних тестовых или временных файлов.
Итог: Ожидаю получить готовую верстку, максимально соответствующую макету из Figma, с разделенной структурой SCSS для каждого смыслового блока, с адаптивным и кроссбраузерным отображением, а также удобную для дальнейшего развития и поддержки.
По любым вопросам и уточнениям обращаться в личные сообщения.