Мелкие правки по замечаниям дизайнера и клиента

Разбор задачи «Мелкие правки по замечаниям дизайнера и клиента» из вакансии «Вёрстальщик (HTML/CSS)»: процесс, инструменты, критерии результата и мини-тест на подход студии.

Откликнуться на вакансию Все вакансии

В студии вёрстка — это инженерная дисциплина, а не «нарисовать и сверстать как получится». «Мелкие правки по замечаниям дизайнера и клиента» выполняется по дизайн-системе проекта: компоненты, отступы, типографика и состояния элементов описаны, а вёрстка повторяет макет с точностью до пикселя и остаётся читаемой для поисковых систем. Текст задачи из вакансии: мелкие правки по замечаниям дизайнера и клиента — быстро и аккуратно.

Дальше — разбор, как «Мелкие правки по замечаниям дизайнера и клиента» устроено внутри студии: процесс, инструменты и результат, который мы считаем нормой. Всё, что написано ниже, — практика, а не лозунги: так задача ставится в трекере, принимается у исполнителя и защищается перед клиентом.

Как это устроено в студии

разбор макета в Figma: компоненты, состояния, поведения на узких экранах;
вёрстка секций на grid/flex с семантической разметкой и доступностью;
адаптив от 320 до 1920: контрольные точки, картинки, типографика;
проверка с дизайнером: соответствие макету и защита деталей;
приёмка с тестировщиком: контрольные ширины и интерактив.

Инструменты и методы

HTML5 и семантическая разметка
CSS3: grid, flex, кастомные свойства
Figma (режим разработчика)
JS без тяжёлых фреймворков
Проверка Core Web Vitals
Кроссбраузерные прогоны

Что считаем результатом

Задача «Мелкие правки по замечаниям дизайнера и клиента» считается выполненной не «когда закончил», а когда результат принят по критериям. Для этой работы критерии такие:

страница совпадает с макетом на контрольных ширинах;
Core Web Vitals в зелёной зоне на мобильных;
замечания дизайна и QA закрыты с первого прогона.

Коротко о задаче

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

Какая минимальная ширина экрана поддерживается?
320 пикселей: вёрстка остаётся читаемой без горизонтального скролла, картинки и типографика масштабируются по сетке.

Нужен ли JavaScript для этой задачи?
Базовая вёрстка обходится HTML и CSS; JavaScript подключается там, где появляется интерактив — формы, слайдеры, динамические списки.

Письма, клиенты, стандарты: как проверяем вёрстку

Вёрстка писем проверяется иначе, чем страниц: вместо десятка браузеров — набор почтовых клиентов, а «кроссбраузерность» означает одинаковое отображение от Gmail до Outlook. Основа неизменна: валидность HTML, точность по макету, оптимизированные изображения и запасные шрифты. Анимация в письмах дозируется, скорость загрузки — приоритет: тяжёлое письмо режут. Каждый шаблон проходит тестовые отправки — отличия рендеров ловятся до отправки клиенту.

Задача из практики веб-студии LIKE-WEB (Москва, с 2003 года, более 380 проектов).

Задача в контексте вакансии

«Мелкие правки по замечаниям дизайнера и клиента» — пункт списка «Чем предстоит заниматься» в вакансии Вёрстальщик (HTML/CSS) (удалённо · можно совмещение). Направление студии: вёрстка и интерфейсы. Если видите себя в описании — пройдите мини-тест ниже и отправьте отклик: вернёмся с разговором, а не с формальной анкетой.

Другие задачи этой вакансии

Вёрстка секций и страниц по макетам Figma с соблюдением…Адаптив от 320 до 1920: сетки, картинки, типографика Вёрстка email-писем с таблицами и инлайн-стилями

FAQ: правильные ответы на тест

Те же десять вопросов, что в тесте выше, — с коротким пояснением, какой ответ мы считаем правильным и почему. Это подсказка: прочитайте перед тестом или сверьтесь после — так проще понять, совпадаете ли вы со студией в деталях.

С чего начинается вёрстка новой страницы по макету Figma в нашей студии?

Правильный ответ — «С сетки и контейнеров, дальше — секции». Сетка и контейнеры — каркас: секции ложатся предсказуемо, поздние правки дешевле.

Какая минимальная ширина экрана должна выдерживаться при адаптивной вёрстке?

Правильный ответ — «320px — включая компактные смартфоны». Компактные экраны — заметная доля трафика: страница обязана работать от 320px.

В каком виде картинки попадают в вёрстку перед сдачей страницы в продакшн?

Правильный ответ — «Сжатыми, в современных форматах, под ретину». Вес страницы — часть качества: сжатие и современные форматы ускоряют загрузку.

Как организованы стили проекта, чтобы правки через год были безопасными?

Правильный ответ — «Единая система: переменные и переиспользуемые блоки». Переменные и блоки делают правку точечной: поменял значение — обновился проект.

Зачем нужна семантика HTML, если страницу и так корректно отображает браузер?

Правильный ответ — «Чтобы структуру понимали люди, браузеры и поиск». Семантика — язык, на котором страницу читают скринридеры и поисковые роботы.

Как ведёт себя форма с клиентской валидацией при ошибке в заполнении?

Правильный ответ — «Подсказывает у поля и сохраняет введённое». Человек не теряет введённое, а подсказка появляется рядом с полем, где ошибся.

Что происходит с вёрсткой проекта перед сдачей в продакшн в нашей студии?

Правильный ответ — «Прогоняем контрольные ширины от 320 до 1920». Контрольные ширины ловят поломки вёрстки до того, как их увидит клиент.

Каким должен быть слайдер на главной странице сайта по нашим стандартам?

Правильный ответ — «Лёгким, с клавиатурой и без лишних зависимостей». Слайдер — интерфейс, а не украшение: минимальный вес и управление с клавиатуры.

На каких инструментах строится ежедневная работа всей команды студии?

Правильный ответ — «Общий стек: таск-трекер, git, стандарты студии». Общий стек делает работу видимой: задачи, история и стандарты у всей команды.

Как обращаемся с чужим кодом, доставшимся от предыдущих разработчиков?

Правильный ответ — «Разобраться, дописать аккуратно, не сломав». Сначала понять, потом менять: аккуратная правка чужого кода дешевле переписывания.

Частые вопросы