Кодик
Начать бесплатно

HTML & CSS на собесе: Гайд по выживанию для фронтендера в 2026 🎯

Готовитесь к собеседованию на фронтенд-разработчика? Разбираем реальные вопросы по HTML и CSS, которые задают в 2026 году: от базовых концепций до хардкорных тем вроде BFC и Container Queries. С примерами кода, мемами и практическими советами.

ОбзорРазработкаПрофессия

6 мин

Как не превратиться в мем "backend developer doing frontend"

Поздравляю! Вы решили пойти на собеседование фронтенд-разработчиком. Скорее всего, вы уже знаете, что такое семантические теги, box model и как отцентрировать div (спойлер: это всё ещё не так просто, как кажется 😅).

Но давайте будем честны: между "я изучал CSS" и "я прошел собеседование по CSS" — целая вселенная боли, страданий и вопросов в стиле "а вы знаете, что такое BFC?".

HTML: "Это же просто теги, что может пойти не так?"

1. Семантика — это не философия, это про теги

Вопрос: Чем отличается <div> от <section> и зачем вообще нужна семантика?

Что нужно знать:

Семантические теги (<article>, <section>, <nav>, <header>, <footer>, <aside>) не просто делают код "красивее".

Они:

  • Улучшают SEO (поисковики любят структуру)

  • Делают сайт доступным для скринридеров

  • Помогают разработчикам понимать структуру без чтения всего кода

<!-- Плохо: --><div class="article"><div class="header">Заголовок</div><div class="content">Контент</div></div>

<!-- Хорошо: --><article><header>
    <h1>Заголовок</h1></header><section>Контент</section></article>

Помните, что говорят: "Использовать везде <div> — это как называть все переменные data1, data2, data3". Технически работает, но коллеги будут вас ненавидеть.

2. HTML5 фичи: не только canvas и video

Топ-вопросов 2025:

  • В чём разница между <canvas> и <svg>?

  • Что такое data-атрибуты и зачем они нужны?

  • Как работает localStorage vs sessionStorage?

Быстрый ответ по canvas vs svg:

  • <canvas> — растровая графика, для сложной анимации и игр

  • <svg> — векторная, для иконок и масштабируемых элементов

Data-атрибуты — ваш личный кастомный атрибут-хранилище:

<article data-post-id="12345" data-category="frontend"><!-- Можно читать через JS: article.dataset.postId --></article>

3. Формы: больше, чем просто input

Вопрос: Какие новые типы input появились в HTML5?

Ответ для импресса интервьюера:

  • type="email" — валидация email

  • type="tel" — телефон (мобильная клавиатура оптимизирована)

  • type="date", type="time" — нативные date-пикеры

  • type="range" — слайдер

  • type="color" — color-пикер

  • required, pattern, min, max — встроенная валидация без JS!

<input type="email" required 
       pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
       placeholder="your@email.com">

4. Box Model: основа основ

Вопрос: Объясните CSS Box Model и разницу между box-sizing: content-box и border-box.

Ответ (запомните раз и навсегда):

Box Model состоит из:

  • Content — сам контент

  • Padding — отступ внутри

  • Border — граница

  • Margin — отступ снаружи

/* content-box (default, но неудобно) */.box {
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* Итоговая ширина: 200 + 20*2 + 5*2 = 250px */
}

/* border-box (используют все адекватные люди) */.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* Итоговая ширина: ровно 200px */
}

Если вы не используете * { box-sizing: border-box; } в 2026 году — возможно, вы застряли в прошлом веке 🦕

5. Flexbox vs Grid: вечная битва

Вопрос: Когда использовать Flexbox, а когда Grid?

Простое правило:

  • Flexbox — для одномерных лейаутов (строка ИЛИ столбец)

  • Grid — для двумерных (строки И столбцы одновременно)

Flexbox для навигации:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Grid для галереи:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

Flexbox — это когда вы хотите выровнять элементы. Grid — это когда вы хотите остановить войну с float и position.

6. Специфичность CSS: почему мой стиль не применился?!

Вопрос: Объясните CSS Specificity и приоритеты стилей.

Ранжирование по силе (от слабого к сильному):

  1. Селекторы тегов: div (0,0,1)

  2. Классы: .button (0,1,0)

  3. ID: #header (1,0,0)

  4. Inline стили: style="..." (1,0,0,0)

  5. !important — ядерная кнопка (никогда не используйте!)

/* Специфичность: 0,0,1 */p { color: blue; }

/* Специфичность: 0,1,0 */.text { color: red; }

/* Специфичность: 0,1,1 */p.text { color: green; } /* Этот выиграет! */

/* Специфичность: 1,0,0 */#content { color: purple; }

/* Если добавить !important — всё сломается */p { color: orange !important; } /* НЕ ДЕЛАЙТЕ ТАК */

7. Псевдоклассы vs Псевдоэлементы: в чём разница?

Вопрос задают всегда!

Псевдоклассы (:) — состояния элемента:

a:hover { color: red; }
input:focus { border: 2px solid blue; }
li:nth-child(2) { background: yellow; }

Псевдоэлементы (::) — виртуальные элементы:

p::before { content: "📌 "; }
p::after { content: " ✓"; }
::selection { background: yellow; }

Лайфхак: Одно двоеточие — состояние, два — элемент.

8. Адаптивность: Mobile-First в 2026

Вопрос: Как реализовать responsive design без фреймворков?

Modern подход:

/* Mobile-first: базовые стили для мобилок */.container {
  padding: 10px;
  font-size: 14px;
}

/* Для планшетов */@media (min-width: 768px) {
  .container {
    padding: 20px;
    font-size: 16px;
  }
}

/* Для десктопов */@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
  }
}

BFC (Block Formatting Context): для хардкорщиков

Вопрос для middle/senior: Что такое BFC и как его создать?

Простыми словами:
BFC — это изолированная область рендеринга, где элементы взаимодействуют по своим правилам.

Создаётся при:

  • overflow: hidden/auto/scroll (не visible)

  • display: flow-root (современный способ!)

  • position: absolute/fixed

  • display: flex/grid на родителе

  • float: left/right

/* Проблема: плавающий элемент вываливается из контейнера */.container {
  border: 2px solid black;
}

.float-item {
  float: left;
  width: 200px;
}

/* Решение: создаём BFC */.container {
  overflow: hidden; /* Старый способ *//* или */display: flow-root; /* Современный способ */
}

🎓 А что насчет практики?

Теория — это круто, но без практики на собесе вы будете чувствовать себя как backend-разработчик, который пытается отцентрировать div.

Здесь на помощь приходит Кодик — мобильное приложение для изучения программирования, где вы можете прокачивать HTML и CSS прямо на ходу. Метро, очередь в кофейне, обеденный перерыв — любое место превращается в coding bootcamp!

✅ Интерактивные уроки
с реальным кодом

✅ Практика в приложении
не нужен компьютер!

✅ Прогресс отслеживается
автоматически

✅ Задачки по уровням
от новичка до про

А еще есть наше Telegram-сообщество! 🚀

Это место, где:

  • 📚 Выходят полезные посты каждый день

  • 💬 Можно задать вопрос и получить помощь

  • 🔥 Делимся опытом прохождения собеседований

  • 😄 Постим мемы

Подписывайтесь, чтобы ежедневно повторять материалы и оставаться в курсе трендов!

Собеседования по HTML и CSS в 2025 году — это не просто "знаешь ли ты теги". Это понимание того, как браузер рендерит страницу, как оптимизировать производительность и как писать поддерживаемый код.

Золотое правило: Честность + базовые знания + практика = оффер.

Не знаете ответ? Скажите: "Сейчас не помню точно, но я знаю, где найти эту информацию и как применить". Интервьюеры ценят честность и умение искать решения больше, чем знание всех 500 CSS-свойств наизусть.

P.S. Помните: каждый senior-разработчик когда-то гуглил "how to center a div css". Разница в том, что теперь они знают 5 способов это сделать и могут объяснить, какой из них лучше для конкретной задачи.

Комментарии