Developer

Вёрстка на время

↑ 1.3 CSS и SASS · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: junior

Зачем это на собесе

Практическое задание «сверстайте за 30–40 минут»: оценивают структуру, адаптивность и аккуратность.

Объяснение

Алгоритм действий:

  1. Анализ макета (3–5 мин): сетка, повторяющиеся блоки, типографика, цвета, состояния, адаптив.
  2. Структура HTML семантическими тегами (header/nav/main/section/footer), button и a по смыслу.
  3. Токены в :root: цвета, отступы, радиусы, шрифты.
  4. Reset: box-sizing: border-box, margin: 0, img { max-width: 100%; display: block }.
  5. Каркас Grid/Flex; затем компоненты; затем тонкая доводка.
  6. Адаптив mobile-first, минимум 2 брейкпоинта.
  7. Состояния: :hover, :focus-visible, :disabled.
  8. Проверка: DevTools, разные ширины, клавиатура.

Шаблон старта:

:root { --c-primary: #4f46e5; --c-text: #1f2937; --space: 8px; --radius: 8px; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; color: var(--c-text); }
img { max-width: 100%; display: block; }
.container { width: min(100% - 32px, 1120px); margin-inline: auto; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: calc(var(--space) * 2); }

Типовые задачи: карточки товаров, шапка с бургер-меню, форма с валидацией, модальное окно, аккордеон на details/summary, таблица с прокруткой, sticky-элементы, «зебра», центрирование, лендинг.

Проговаривайте решения вслух: почему Grid, а не Flex; как будет работать на мобильных; что сделали бы с большим временем.

Нюансы и подводные камни

  • Сначала структура и адаптив, потом «пиксель-перфект».
  • Фиксированные высоты и размеры ломают адаптивность.
  • Забыт viewport мета-тег и alt.
  • Использование !important и position: absolute для всего.
  • Отсутствие состояний и фокуса.

Практика

  1. Сверстайте по скриншоту лендинг за 40 минут на таймер.
  2. Сделайте бургер-меню на чистом CSS (:checked) и на details.
  3. Повторите три задания, сравнивая время.

Вопросы с ответами

Связанные темы

Вид графа

Обратные ссылки