30 вопросов, которые стоит знать фронтендеру перед собеседованием

На собесе вам могут спросить о чем угодно — от разницы между var и let до Event Loop и нюансов CSS‑селекторов. И лучше подготовиться заранее, чем краснеть перед интервьюером.

В этой статье собрали 30 популярных вопросов, которые часто звучат на собеседованиях фронтенд‑разработчиков. Тут не просто сухие формулировки, а суть каждого — зачем спрашивают и что хотят проверить.

#фронтенд #собеседование

Hack Frontend: тренируйтесь для собеседования с огоньком

Если вы мечтаете прокачать фронтенд‑скиллы и спокойно заходить на тех‑интервью — обратите внимание на Hack Frontend. Это платформа, где вы сможете отточить навыки и подготовиться к успешному собеседованию.

Что внутри:

— Современный фронтенд‑стек и лучшие практики.
— Задания, которые реальнее всего встретить на интервью.
— Построено для реализации — вы сразу тренируетесь на реальных примерах, не просто читаете теорию.

#фронтенд #тренажер #javascript

Возможно, что эти HTML- и CSS-ошибки есть в вашем коде

Казалось бы, основные грабли веб-верстки давно известны, но ловушки ждут в деталях — от неожиданных эффектов font-size в rem и px до проблем с outline и адаптацией стилей к accessibility.

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

https://habr.com/ru/companies/ruvds/articles/928018/

Я вот не задумывался о некоторых нюансах, описанных в статье. А вы?

#фронтенд #css #html

Что такое @scope в CSS #простымисловами

@scope в CSS — это возможность ограничивать действие стилей определённой областью на странице. То есть вы можете задать стили, которые будут применяться только внутри конкретного блока, а не по всей странице.

Простой пример

Допустим, у вас есть два блока с одинаковыми заголовками:

<section class="blog">
  <h2>Заголовок блога</h2>
</section>

<section class="sidebar">
  <h2>Заголовок сайдбара</h2>
</section>

Раньше вам приходилось писать селекторы вроде .blog h2 { ... }, чтобы не затронуть другие заголовки. С @scope можно сделать это аккуратнее:

@scope (.blog) {
  h2 {
    color: darkblue;
  }
}

Теперь стиль применяется только к заголовкам внутри .blog, и не влияет на другие h2 на странице.

Зачем это нужно?

— Уменьшает конфликт между стилями разных компонентов.
— Упрощает переиспользование компонентов — один блок не «ломает» другой.
— Делает CSS более предсказуемым и читаемым.

### Что важно знать

— @scope сейчас поддерживается не во всех браузерах, но его уже можно попробовать в Chrome (начиная с версии 117) и некоторых других.
— Это не замена классическим селекторам, а дополнительный инструмент для ограничения области действия стилей.

#css #фронтенд

Скелетон: как сделать загрузку визуально приятной

Для загрузки контента на сайте или в приложении требуется время — иногда долисекунд, а иногда гораздо больше. Во втором случае нужно дать пользователю понять, что всё идет по плану, сайт не сломался и контент вот-вот будет. Для этого используются скелетоны — анимированные заглушки вместо контента до момента его загрузки. Они показывают не только, что идет загрузка, но и то где и даже какой контент будет загружен — картинка или текст. Это воспринимается лучше, чем обычный спиннер и делает интерфейс чище.

Я нашёл для вас гайд, как сверстать такой скелетон для карточки статьи за несколько минут. Демонстрируется HTML-код и CSS-стили с переменными, чтобы сразу получать плавную анимацию и адаптивную структуру без кучи лишнего кода.

#css #фронтенд #ux

Полный курс Tailwind CSS v4 с нуля

Если вы уже знакомы с HTML и CSS и готовы освоить Tailwind — этот видеокурс идеален. В нём собраны все ключевые темы — от установки и настройки до работы с утилитами, адаптивностью и тёмной темой. Более 20 важных тем, включая Flex, Grid, фильтры и новые возможности версии v4 — всё доступно в формате одного ролика.

#tailwindcss #фронтенд #видео

Фундаментальный курс по TypeScript

Если вы уже пробовали писать на JavaScript, но чувствуете, что «что-то не так» — самое время перейти на TypeScript. Этот бесплатный видео‑курс подходит тем, кто хочет разобраться в типах основательно: с пониманием, как они устроены, как работают типизации и где начинаются настоящие возможности языка.

В ролике — более 2,5 часов плотной теории и практики: от базовых any и void до дженериков, conditional types, utility‑типов и конфигурации tsconfig. Всё объясняется с опорой на реальные кейсы и продвинутые приёмы, а финалом идёт пример полноценного проекта на React с TypeScript.

#typescript #фронтенд #видео

Продолжаем делать 3D-текст без использования JS

В прошлой статье мы научились создавать статичный текст с эффектом 3D, используя современные возможности CSS. На этот раз пойдем дальше и добавим ему анимацию.

Первая часть тут.
А вторая тут.

#фронтенд #css

Максимально просто рассказываем, как работают микрофронтенды

В двух словах: микрофронтенды — это аналог концепции микросервисв, но для фронтенда. То есть пользователь видит цельный сайт, но на самом деле под капотом это сшитые отдельные модули, которые могут быть написаны на разных фреймворках разными командами.

Если вам этого объяснения хватило — отлично. А если хотите разобраться подробнее в тонкостях, плюсах и минусах, то переходите по ссылке.

#микрофронтенд #фронтенд