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 263 Technologies & Applications11 404...

📈 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 794 subscribers, ranking 11 404 in the Technologies & Applications category and 60 263 in the Russia region.

📊 Audience metrics and dynamics

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

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

Verification status: Not verified
Engagement rate (ER): The average audience engagement rate is 9.17%. Within the first 24 hours after publication, content typically collects 4.08% reactions from the total number of subscribers.
Post reach: On average, each post receives 990 views. Within the first day, a publication typically gains 441 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 27 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 794

Subscribers

No data24 hours

-137 days

-8130 days

990

Post views

~ 44124 hours

~ 51648 hours

9.17%

Engagement rate

No data

Posts per day

Ads index

beta

Posts Archive

10 794

HTML_CSS.pdf1.18 MB

10 794

Шпаргалки для начинающего верстальщика HTML/CSS Книга отлично подходит тем, кто только начинает учить верстку. Здесь вы найдете универсальный код и полезные советы, крутые эффективные ресурсы, применяя которые можно быстро и легко научиться верстать реальные проекты. Вы откроете новые фишки, лайфхаки для своей верстки... 👉 @frontendInterview

10 794

Курс графического дизайна с нуля. Бесплатное обучение! Выбери свое направление в дизайне: графический дизайн, веб-дизайн, UX/UI-дизайн. И изучи бесплатно основы дизайна с личным наставником! 3 работы в портфолио. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

10 794

Расскажите про приоритет селекторов Приоритет селекторов (также известный как специфичность селекторов) определяет, какие стили будут применяться к элементу, если на него действуют несколько правил с различными селекторами. Специфичность основана на типах селекторов и их количественном присутствии в одном CSS-правиле. Как она вычисляется? Специфичность выражается четырьмя уровнями: A, B, C, D. Чем выше значения, тем более специфичный селектор. A: Инлайновые стили (например, style="color: red;") имеют самую высокую специфичность. B: Количество ID-селекторов в селекторе (например, #header). C: Количество классов, атрибутов и псевдоклассов (например, .class, [type="text"], :hover). D: Количество тегов и псевдоэлементов (например, div, h1, ::before). Рассмотрим несколько примеров и определим их специфичность: 1. #main-content — (0, 1, 0, 0) 2. .article p — (0, 0, 1, 1) 3. header h1 span — (0, 0, 0, 3) 4. div#main .content .text — (0, 1, 2, 1) Чем выше значения специфичности, тем выше приоритет стиля. Если два селектора имеют одинаковую специфичность, то стиль, который объявлен позже, будет применён. Пример

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример специфичности</title>
    <style>
        p {
            color: black; /* (0, 0, 0, 1) */
        }
        .text {
            color: blue; /* (0, 0, 1, 0) */
        }
        #highlight {
            color: red; /* (0, 1, 0, 0) */
        }
        p#highlight {
            color: green; /* (0, 1, 0, 1) */
        }
    </style>
</head>
<body>
    <p class="text" id="highlight">Этот текст будет зелёным.</p>
</body>
</html>

В этом примере на <p> элемент действует несколько селекторов с разной специфичностью: p имеет специфичность (0, 0, 0, 1) .text имеет специфичность (0, 0, 1, 0) #highlight имеет специфичность (0, 1, 0, 0) p#highlight имеет специфичность (0, 1, 0, 1) Поскольку p#highlight имеет наивысшую специфичность (0, 1, 0, 1), он применяет стиль цвета зелёный. Почему это важно? - Управление конфликтами стилей: Знание специфичности помогает правильно управлять стилями и избегать конфликтов. - Чтение и поддержка кода: Более специфичные селекторы позволяют писать CSS, который легко поддерживать и расширять. - Эффективность разработки: Понимание специфичности позволяет создавать более предсказуемый и стабильный код. 👉 @frontendInterview

10 794

pov: ты решил залететь в айти в 2024-м 👉 @frontendInterview

10 794

Закрытый клуб для айтишников FAANG School, чьи выпускники работают в Яндексе, СБЕРЕ и других гигантах, запустили бесплатное сообщество для всех, кто изучает Java. Общайся в ламповом чате с такими же людьми «в теме», получай фидбек у опытных разрабов и черпай практические рекомендации от экспертов школы. В чате уже больше 10 000 человек, а новенькие, которые подключатся сейчас, получат доступ к большой библиотеке Java Junior с полезными материалами: – Пошаговая RoadMap по Java – Мануал по Docker. Основные команды и концепции – Микросервисы. Вопросы с собеседований – Шпаргалка по Kafka – Инструкция по работе с Git – Подробный гайд, как найти работу в IT без опыта – Подборка платформ с вакансиями для java-разработчиков Вступай сейчас. Открыли доступ всего на 24 часа!

10 794

Что такое "предварительный запрос" (Preflight Request) в контексте CORS?

Anonymous voting

10 794

Помощь в трудоустройстве в IT-сфере! В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно! Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита. Для этого нужно: - Перейти по ссылке - Заполнить анкету и ответить на вопросы (занимает менее 3 минут) - На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

10 794

А о техническом долге я скажу… Бывало у вас такое, что приходилось вставлять не самое лучшее решение в код, только чтоб успеть сдать задачу перед условной выставкой? Или идет работа над проектом в течение уже пары месяцев, а документация откладывается на потом, когда все устаканится? Поздравляю, вы “счастливый” обладатель технического долга. Не стоит расстраиваться, это часть жизни, которую следует принять и проработать как на сеансе у психолога для комфортной жизни в будущем. 👉 @frontendInterview

10 794

💻 10 лет в IT, и я публикую только то, что сам читаю или собираюсь прочитать. Это самые важные статьи и новости, которые действительно нужны разработчику. Решил поделиться тем, что помогает мне быть в курсе всего. Подписывайся на DevDrafts | RSS — здесь только то, что стоит твоего времени! 👉 @devdrafts_rss

10 794

Как сделать превью проекта на собственном сервере Почти всегда в проекте существует задача смотреть на текущие сборки из неосновной ветки репозитория. В крупных проектах есть инженеры, которые занимаются такими задачами. А что, если вы один на проекте? А что, если вы работаете в опенсорс? А что, если у вас совсем маленькая команда и нет возможности нанимать инженеров с нужным опытом? Есть несколько готовых сервисов. Если вы работаете над статическим сайтом, можно использовать GitHub Pages, Netlify или Surge. Но это не всегда удобно по целому ряду причин. А вот если есть свой выделенный сервер, возможности резко увеличиваются. Почему бы и не использовать уже имеющийся у вас ресурс? Моё решение основано на использовании веб-сервера Nginx, зато кроме него ничего не понадобится. С другой стороны, вы всегда сможете приспособить моё решение под свои нужды. 👉 @frontendInterview

10 794

Какое значение примет переменная arr?

Anonymous voting

10 794

👉 @frontendInterview

10 794

За что отвечает z-index? Это CSS-свойство, которое определяет порядок расположения элементов по оси z (перпендикулярно экрану). Это свойство используется для управления тем, какие элементы будут отображаться поверх других, когда они перекрываются. Как он работает? Контекст наложения (stacking context): Чтобы z-index работал, элемент должен иметь установленное значение position, отличное от static (например, relative, absolute, fixed или sticky). Без этого z-index не будет применяться. Числовое значение: z-index принимает целые числа, включая отрицательные. Элементы с более высоким значением z-index будут отображаться поверх элементов с более низким значением. Пример

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример z-index</title>
    <style>
        .box {
            position: absolute;
            width: 100px;
            height: 100px;
        }
        .box1 {
            background-color: red;
            z-index: 1;
            top: 50px;
            left: 50px;
        }
        .box2 {
            background-color: blue;
            z-index: 2;
            top: 80px;
            left: 80px;
        }
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>

В этом примере у нас есть два элемента, которые перекрываются. Красный квадрат имеет z-index: 1, а синий квадрат — z-index: 2. Поскольку значение z-index у синего квадрата выше, он будет отображаться поверх красного. Почему это важно? Управление перекрытиями: Важен для создания сложных интерфейсов, где элементы могут перекрываться. Это часто встречается в модальных окнах, всплывающих подсказках, выпадающих меню и т.д. Визуальная иерархия: Он позволяет разработчикам управлять визуальной иерархией, гарантируя, что более важные элементы остаются видимыми и доступны пользователям. 👉 @frontendInterview

10 794

Millipede of words Дан массив из 3-7 слов произвольной длины. Без заглавных букв. Слова объединяются, если последняя буква одного слова и первая буква другого слова одинаковы. Возвращается true, если все слова из набора могут быть объединены в одно слово. Каждое слово может и должно быть использовано только один раз. В противном случае возвращается false. Пример:

solution(["no", "dog", "on", "good"]) => false
solution(["engine", "endure", "elite"]) => true

👉 @frontendInterview

10 794

Наглядный_CSS.pdf17.39 MB

10 794

Наглядный CSS На 1 июня 2018 года CSS содержал 415 уникальных свойств, относящихся к объекту style в любом элементе браузера Chrome. Сколько свойств доступно в вашем браузере на сегодняшний день? Наверняка уже почти шесть сотен. Наиболее важные из них мы и рассмотрим. Грег Сидельников упорядочил свойства по основной категории (положение, размерность, макеты, CSS-анимация и т. д.) и визуализировал их работу. Вместо бесконечных томов документации – две с половиной сотни иллюстраций помогут вам разобраться во всех тонкостях работы CSS. Эта книга станет вашим настольным справочником, позволяя мгновенно перевести пожелания заказчика и собственное видение в компьютерный код! 👉 @frontendInterview

10 794

Что такое мемоизация ? Это оптимизационная техника, используемая для ускорения выполнения программ путём сохранения результатов дорогостоящих функций и повторного использования этих результатов, когда снова возникают одинаковые входные данные, вместо того чтобы повторно выполнять функцию. Как это работает При первом вызове функции с определённым набором аргументов результат выполнения функции сохраняется в каком-либо хранилище (чаще всего в виде объекта или карты). При последующих вызовах функции с теми же аргументами, вместо выполнения функции, возвращается сохранённый результат. Это значительно сокращает время выполнения, особенно если исходная функция требует значительных вычислительных ресурсов. Применение: Мемоизация часто применяется для оптимизации производительности в различных областях, включая: - Рекурсивные вычисления, например, вычисление чисел Фибоначчи. - Дорогостоящие вычисления, которые часто повторяются с одними и теми же аргументами. - Оптимизация производительности веб-приложений, например, в React, где меморизация помогает избежать ненужных перерисовок компонентов.

function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = args.toString();
    if (cache[key]) {
      return cache[key];
    } else {
      const result = fn.apply(this, args);
      cache[key] = result;
      return result;
    }
  };
}

// Пример использования меморизации для функции вычисления факториала
const factorial = memoize(function(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
});

console.log(factorial(5));  // Вычисляется и сохраняется в кэше
console.log(factorial(5));  // Возвращается результат из кэша, вычислений не происходит

👉 @frontendInterview

10 794

Работодатели, выберите своего бойца 👉 @frontendInterview

10 794

Для чего используется свойство text-wrap в CSS?

Anonymous voting