Frontend Interview - собеседования по Javascript / Html / Css

Open in Telegram

Канал для подготовки к собеседованиям по фронтенду Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/frontendinterview Канал в реестре РКН: https://rknn.link/su

Network:Senior Frontend - javascript, html, css Russia60 422 Technologies & Applications11 448...

📈 Analytical overview of Telegram channel Frontend Interview - собеседования по Javascript / Html / Css

Channel Frontend Interview - собеседования по Javascript / Html / Css (@frontendinterview) in the Russian language segment is an active participant. Currently, the community unites 10 798 subscribers, ranking 11 448 in the Technologies & Applications category and 60 422 in the Russia region.

📊 Audience metrics and dynamics

Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 10 798 subscribers.

According to the latest data from 24 June, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -85 over the last 30 days and by -5 over the last 24 hours, overall reach remains high.

Verification status: Not verified
Engagement rate (ER): The average audience engagement rate is 9.60%. Within the first 24 hours after publication, content typically collects 4.17% reactions from the total number of subscribers.
Post reach: On average, each post receives 1 037 views. Within the first day, a publication typically gains 450 views.
Reactions and interaction: The audience actively supports content: the average number of reactions per post is 4.
Thematic interests: Content is focused on key topics such as javascript, браузер, html, css, видимость.

📝 Description and content policy

The author describes the resource as a platform for expressing subjective opinions:
“Канал для подготовки к собеседованиям по фронтенду Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/frontendinterview Канал в реестре РКН: https://rknn.link/su”

Thanks to the high frequency of updates (latest data received on 25 June, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Technologies & Applications category.

10 798

Subscribers

-524 hours

-187 days

-8530 days

1 037

Post views

~ 45024 hours

~ 55148 hours

9.60%

Engagement rate

No data

Posts per day

Ads index

beta

Posts Archive

10 799

Стать фронтендером в Яндексе за выходные 26–27 апреля устраиваем Weekend Offer Frontend: всего за два дня можно пройти технические секции и попасть в Яндекс. Оставьте свою заявку на участие в мероприятии до 23 апреля. Вы сможете выбрать одну из 10 команд. Это команды Поиска: Еком-сценарии, Архитектура, Международный Поиск, Красота, Финансы, Видеопоиск. И команды Вертикалей: Путешествия, Недвижимость, Аренда, Авто.ру. Можно пообщаться с нанимающими менеджерами и выбрать самый интересный проект. Если всё пройдёт хорошо, сразу же получите офер. Узнать подробности и зарегистрироваться можно здесь. Реклама. ООО "Яндекс". ИНН 7736207543

10 799

Онлайн-магистратура Кибербезопасность от Яндекса и МИФИ День открытых дверей 23 апреля в 19:00 мск | Онлайн Эксперты Яндекса и НИЯУ МИФИ расскажут об очной онлайн-магистратуре для карьеры в IT. Всё о поступлении и обучении, выступления экспертов, ответы на вопросы. Выбирайте всё: работу и учёбу, навыки и диплом магистра. Узнать больше #реклама 16+ practicum.yandex.ru О рекламодателе

10 799

Alphabetized Создайте функцию, которая отсортирует символы строки в алфавитном порядке. Пример: alphabetized("The Holy Bible") // "BbeehHilloTy" 👉 @frontendInterview

10 799

Learning TypeScript Enhance Your Web....pdf5.21 MB

10 799

Learning TypeScript (2022) Вы узнаете: - Преимущества TypeScript и общие характеристики его системы типов - Почему и как TypeScript полезен поверх JavaScript - Как информировать свою систему типов с помощью аннотаций типов, предназначенных только для разработчиков - Как TypeScript анализирует и понимает код, чтобы помочь вам дополнить существующие модели разработки - Как TypeScript помогает работать с массивами, классами, функциями, объектами и другими важными встроенными конструкциями JavaScript 👉 @frontendInterview

10 799

Как работают плавающие элементы (floats)? float – это CSS-свойство, которое позволяет "выплывать" элементу из обычного потока документа и обтекаться другими элементами (например, текстом). Пример:

<img src="image.jpg" class="float-img">
<p>Это текст, который будет обтекать картинку.</p>

.float-img {
  float: left;
  margin-right: 10px;
}

Почему родитель "схлопывается" при использовании float? Когда внутри div есть только float-элементы, браузер считает, что он пустой, потому что float убирает элемент из потока.

<div class="container">
  <img src="image.jpg" class="float-img">
  <p>Текст обтекает картинку.</p>
</div>

.container {
  background: lightgray;
}
.float-img {
  float: left;
}

Решение 1: overflow: hidden;

.container {
  overflow: hidden; /* Контейнер теперь учитывает float-элементы */
}

Решение 2: clearfix (старый способ)

.container::after {
  content: "";
  display: block;
  clear: both;
}

Как остановить обтекание (`clear`)? Чтобы отменить обтекание, используется clear.

<img src="image.jpg" class="float-img">
<p>Этот текст обтекает картинку.</p>
<div class="clear"></div>
<p>Этот текст пойдёт на новую строку.</p>

.float-img {
  float: left;
  margin-right: 10px;
}
.clear {
  clear: both;
}

Почему `float` устарел и что использовать вместо него? Раньше float использовали для создания колонок и сеток, но сегодня его заменили: Flexbox (display: flex;) – лучше для адаптивных макетов. CSS Grid (display: grid;) – мощный инструмент для сложных сеток.

.container {
  display: flex;
  align-items: center;
}

👉 @frontendInterview

10 799

Обычный дейлик 👉 @frontendInterview

10 799

Что произойдет, если два селектора имеют одинаковую специфичность?

Anonymous voting

10 799

Мои 7 правил при собеседовании разработчиков За последние несколько лет я перестроил свой процесс найма разработчиков, начал по-другому готовиться к собеседованиям и проверять нужные навыки. Как мне кажется, у меня получилось повысить свою продуктивность и научиться нанимать подходящих разработчиков в проекты, где я работаю. Пару недель назад меня попросили помочь на техническом собеседовании для Senior/Lead backend-разработчика и поделиться опытом. В процессе я формализовал несколько правил, которых придерживаюсь при проверке кандидатов. Чем я и хочу поделиться. Ниже — мои советы по проведению интервью с конкретными примерами. Уточню, что это не подробное руководство по найму на конкретную должность, а универсальные рекомендации для всех интервью с разработчиками. 👉 @frontendInterview

10 799

🧑🏻‍💻Хотите начать разрабатывать с Vue.js, но не знаете, с чего начать? На открытом вебинаре 22 апреля в 20:00 мск мы расскажем вам о Vue.js 3. Вы увидите, как просто установить Vue, какие основные концепции нужно освоить и какие библиотеки вам понадобятся для старта. Убедитесь, что этот фреймворк проще, чем кажется, и намного мощнее, чем вы могли бы подумать! После вебинара вы будете понимать, как применять Vue.js в своих проектах. Это простой, быстрый и эффективный фреймворк для вашего будущего в веб-разработке. 👉Регистрируйтесь прямо сейчас и получите скидку на большое обучение «Vue.js-разработчик»: h https://otus.pw/xI5x/?erid=2W5zFHhsSUG Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

10 799

Научим создавать карточки для WB и Ozon с нуля! Дизайнер карточек для маркетплейсов — востребованная и доходная профессия 💰 Научись ей бесплатно! - Бесплатный доступ к курсу - Разбор ДЗ от наставника - Мощные кейсы в портфолио Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

10 799

Как встроить содержимое внешнего сайта на свой? <iframe> — это контейнер, который позволяет вставить любой HTML-документ из другого источника. Часто этот документ интерактивный — например, карта, видео или пост из соцсети. Этот контейнер обычно называют фреймом. Внешний вид фрейма и его положение на странице можно задать через CSS. Пример С помощью такого нехитрого кода мы можем встроить карту размером 560 на 400 пикселей на любую страницу:

<iframe
  id="inlineFrameExample"
  title="Inline Frame Map"
  width="560"
  height="400"
  frameborder="1"
  allowfullscreen="true"
  src="https://yandex.ru/map-widget/v1/-/CBFkaYSE0A"
>
</iframe>

Часто сервисы, из которых мы хотим что-то встроить (карты, посты и тому подобное), сами могут сгенерировать вам <iframe>. Его останется только добавить в свой код. 👉 @frontendInterview

10 799

26–27 апреля проводим Weekend Offer Frontend Устроиться в Яндекс за выходные — реально. Ищем крутых фронтендеров с опытом работы от 4 лет, готовых работать в офисном или гибридном режиме в России. Подавайте заявку до 23 апреля — и всего за два дня пройдите все технические собеседования. После сможете пообщаться с нанимающими менеджерами и выбрать из 10 команд ту, которая покажется самой интересной. Если всё сложится хорошо, сразу же пришлём вам офер. Зарегистрироваться #реклама yandex.ru О рекламодателе

10 799

Какое CSS свойство нужно использовать, чтобы сделать текст элемента span подчеркнутым?

Anonymous voting

10 799

👉 @frontendInterview

10 799

Обучение на Data Protection Officer (DPO) ⚡Обучение по защите персональных данных от практиков из Comply, ALUMNI Partners, Ozon, VK и др ✨ На курсе вы узнаете: » Узнаете все про работу с персональными данными » 152-ФЗ и трансграничную передачу данных 🎓Программа: » Управление рисками » Проверка регулятора » Составление документов Скидка до конца недели! Оставьте заявку сейчас и станьте ближе к успешной карьере юриста! ❤️ Узнать больше #реклама 16+ mosdigitals.ru О рекламодателе

10 799

Зачем нужен eslint? ESLint – это инструмент для автоматического анализа и исправления кода в JavaScript и TypeScript. Он помогает разработчикам следовать единым стилям кодирования, находить ошибки и предотвращать баги ещё до запуска кода. Почему ESLint полезен? Без линтера код может быть неаккуратным и содержать ошибки, которые сложно отловить. Проблемы без ESLint - Разные стили написания кода - Пропущенные точки с запятой или лишние пробелы - Неиспользуемые переменные - Ошибки, которые не выявляются во время компиляции (например, undefined переменные) **Решение с ESLint:** - Автоматически находит ошибки и предупреждения - Подсказывает лучшие практики - Поддерживает кастомные правила - Работает в IDE и CI/CD (автоматическая проверка) Как ESLint работает? ESLint использует набор правил, которые проверяют код. Если код нарушает эти правила – линтер выдаёт предупреждение или ошибку.

function sayHello(name) {
  console.log("Hello, " + name)
}

sayHello("John")

Пример исправленного кода (ESLint fix)

function sayHello(name) {
  console.log(`Hello, ${name}`);
}

sayHello("John");

Как установить и настроить ESLint? Установка

npm install eslint --save-dev

Создание конфига

npx eslint --init

Пример .eslintrc.js (настройки ESLint)

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    "eslint:recommended", // Базовые рекомендации
    "plugin:vue/vue3-recommended" // Рекомендации для Vue
  ],
  rules: {
    "no-unused-vars": "warn", // Предупреждать о неиспользуемых переменных
    "semi": ["error", "always"], // Обязательные точки с запятой
    "quotes": ["error", "double"], // Только двойные кавычки
  },
};

Запуск проверки кода

npx eslint myfile.js

Автоматическое исправление ошибок

npx eslint myfile.js --fix

👉 @frontendInterview

10 799

Simple CSS selector comparison Создайте функцию, которая сравнивает переданные CSS селекторы и возвращает самый специфичный. Примеры:

 "body p",  "div"     --->  return "body p"
 ".class",  "#id"     --->  return "#id"
 "div.big", ".small"  --->  return "div.big"
 ".big",    ".small"  --->  return ".small" (because it appears later)

👉 @frontendInterview

10 799

Shama_Hoque_Full_Stack_React_Projects_Learn_MERN_stack_development.epub26.67 MB

10 799

Full-Stack React Projects React в сочетании с проверенными в отрасли серверными технологиями, такими как Node, Express и MongoDB, позволяет разрабатывать и развертывать надежные полнофункциональные веб-приложения. Данное обновленное второе издание фокусируется на последних версиях и соглашениях технологий в этом стеке, а также на их новых фичах, таких как хуки в React и async / await в JavaScript. В книге также раскрываются сложные темы, такие как создание веб-приложения для учебных занятий и визуализация данных в приложении для отслеживания расходов. 👉 @frontendInterview