Вёрстка сайтов — удалённая работа в Москве

Сверстать: интернет-магазин. Платформа: HTML. Тип вёрстки: адаптивная. Есть макет. Пожелания и особенности: Необходима верстка интернет-магазина бытовой техники. *Тематика:* Продажа пылесосов (10-15 моделей). *Цель:* Точная и качественная верстка предоставленного дизайн-макета с последующей интеграцией на CMS WordPress и подключением необходимых сервисов. **Исходные материалы:* - Полноценный дизайн-проект в Figma, включающий все состояния элементов (hover, focus, active) и адаптивы для основных разрешений (мобильное, планшет, десктоп). *Технические требования* · CMS: WordPress + WooCommerce. · Фронтенд: · Верстка: Pixel-perfect верстка на HTML5, CSS3 (препроцессор SASS/SCSS) согласно макетам Figma. · Подход: Adaptive/Responsive (Mobile First по согласованию, исходя из дизайна). · JavaScript: Ванильный JS для интерактивных элементов. Допускается использование jQuery только для совместимости с плагинами WooCommerce. · Фреймворк: Bootstrap 5 (или аналогичный, если это заложено в дизайн-системе макета). · Браузеры: Последние версии Chrome, Firefox, Safari, Edge. Кроссбраузерность обязательна. **Взаимодействие с дизайнером* *(Критически важный этап) · Входные данные: Верстальщик получает ссылку на интерактивный макет в Figma. · Обязанности верстальщика на этом этапе: 1. Проверить макет на полноту: наличие всех страниц, состояний элементов, адаптивных версий. 2. Уточнить у дизайнера все спорные и сложные для реализации моменты (сложные анимации, нестандартные сетки, взаимодействия). 3. Экспортировать необходимые графические ресурсы (иконки, изображения) в оптимальных форматах (SVG, WebP, PNG). 4. Сверять шрифты, отступы, размеры и цвета с макетом. 4. Функциональные блоки и страницы для верстки и интеграции (Акцент на том, что верстка должна быть готова к дальнейшей интеграции) *Запрос по функционалу:* - Главная - ⁠Каталог с фильтрами, - ⁠Карточка товара, - ⁠Корзина, - ⁠Оформление заказа, Статические страницы (О нас, Контакты и т.д.). - Личный кабинет пользователя: История заказов, Профиль, Баллы по реферальной программе, Возможность покупки за баллы, Активация промокодов, Генерация реферальных ссылок Задача — обеспечить стилевое соответствие фронтенда предоставленному макету. *Интеграции (Backend-разработка и подключение)* Верстальщик обеспечивает корректную HTML-структуру и CSS-классы для беспроблемной работы следующих интеграций, которые могут выполняться другим разработчиком или им самим, в зависимости от договоренностей. · Интеграция со складом: Верстка должна корректно отображать динамически подгружаемые данные (наличие товара, цены). · Интеграция с CRM: Форма оформления заказа должна иметь правильную структуру полей (name, id) для корректной отправки данных. · Интеграция с эквайрингом: Верстка страницы успешной/неуспешной оплаты, а также стилизация платежного виджета (если он встраивается на сайт). *Процесс передачи сайта владельцу* Документация: · Комментарии в коде: Код должен быть хорошо структурирован и содержать комментарии для ключевых блоков. · Инструкция по сборке: Если использовались сборщики (Gulp/Webpack), предоставляется инструкция по установке зависимостей и сборке проекта. *Финальное тестирование и приемка:* 1. Предоставление демо-версии: Верстальщик размещает готовый сайт на тестовом хостинге. 2. Чек-лист для приемки: Сверка верстки с макетом Figma в нескольких браузерах и на разных устройствах. Проверка адаптивности, интерактивности всех элементов (кнопки, формы, фильтры) и работоспособности интеграций (оформление тестового заказа). 3. Исправление замечаний: Все отклонения от макета и технические ошибки исправляются в оговоренные сроки. 6.3. Перенос на хостинг заказчика и передача доступов: · Верстальщик производит миграцию готового сайта на хостинг Заказчика. · Передает Заказчику пакет доступов: · К хостингу и домену. · К админ-панели WordPress. · К репозиторию с исходным кодом (если используется Git). · К API-ключам интеграций. *Гарантийный период:* · Устанавливается гарантийный период — 30 календарных дней с момента подписания акта сдачи-приемки. · В течение этого периода Исполнитель бесплатно устраняет ошибки, связанные с версткой (отступы, неработающие скрипты, несоответствие макету на указанных в ТЗ разрешениях) и своей частью интеграций. · Важно: Правки контента, добавление товаров, изменение текстов или изображений, а также доработки, не связанные с изначальным ТЗ, в гарантию не входят и оплачиваются отдельно.