Вёрстка сайта по макету Figma или PDF

Заказчик просил только HTML, CSS и JS, картинки из самой Figma и точное попадание в макет на компьютере и телефоне.

• Два макета — 1920 и 360 px; у мобильной версии своя компоновка и порядок блоков
• Оригиналы картинок и параметры текста выгружены из Figma через API
• Скрипт сверяет живую страницу с макетом по координатам
• Планшетных макетов не было — промежуточные ширины собраны самостоятельно
• Без фреймворков и сборщиков, как просил заказчик

Сверстать лендинг по PDF-экспорту макета, когда доступа к исходнику в Figma нет.

• Размеры блоков, кегли и цвета сняты из PDF, а не подобраны на глаз
• Иконки и логотип — векторные: вынуты из PDF и собраны в SVG-спрайт
• Настоящие начертания шрифта определены сравнением метрик
• Десктоп масштабируется целиком, для планшета и телефона — свои раскладки
• Чистые HTML, CSS и JS, без сборки

Перенести обучающие материалы в приложение так, чтобы схемы читались на телефоне и выглядели родными в светлой и тёмной теме.

• Схемы и таблицы перерисованы в SVG: чёткие на любом экране, цвет берут из темы
• Повторяющийся декор убран, настоящие фото оставлены с подписями
• Две версии каждой статьи: чистый источник и готовая к загрузке
• Оформление накатывается скриптом — палитра меняется в одном месте
• Учтён фильтр безопасности приложения, который вырезает блоки стилей

Сверстать письмо, которое не разваливается в почтовых клиентах и читается с телефона.

• Табличная вёрстка — единственный способ, который понимают все почтовые программы
• Отдельные запасные варианты для Outlook
• Адаптация под узкий экран телефона